/* oxy-asset-stamp:20260803 */
/* =====================================================================
   OXYNTIO — public website theme
   Dark tech / neon accent. No frameworks, no build step.
   ===================================================================== */

:root{
  --bg:#05070f;
  --bg-2:#080c18;
  --panel:#0c1222;
  --panel-2:#101830;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --txt:#e8eefc;
  --txt-2:#9fb0d4;
  --txt-3:#6b7c9f;
  --cy:#22d3ee;
  --vi:#8b5cf6;
  --pk:#f472b6;
  --am:#fbbf24;
  --em:#34d399;
  --sky:#38bdf8;
  --grad:linear-gradient(120deg,var(--cy),var(--vi));
  --radius:18px;
  --max:1240px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* surfaces that invert in light mode */
  --card-bg:linear-gradient(170deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  --soft:rgba(255,255,255,.025);
  --softer:rgba(255,255,255,.012);
  --chip-bg:rgba(255,255,255,.03);
  --field-bg:rgba(4,7,15,.75);
  --field-bg-focus:rgba(4,7,15,.95);
  --header-bg:rgba(5,7,15,.72);
  --header-bg-solid:rgba(5,7,15,.92);
  --footer-bg:rgba(6,9,18,.6);
  --on-grad:#04070f;
  --grid-line:rgba(255,255,255,.018);
  --logo-dim:rgba(255,255,255,.26);
  --logo-lit:rgba(255,255,255,.6);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--txt);
  font:16px/1.7 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(34,211,238,.28)}

/* ---------------------------------------------------------- ambient bg */
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/72px 72px;
  mask-image:radial-gradient(ellipse 100% 70% at 50% 0%,#000 40%,transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 100% 70% at 50% 0%,#000 40%,transparent 85%);
}
.bg-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% -8%,rgba(34,211,238,.15),transparent 62%),
    radial-gradient(880px 600px at 92% 4%,rgba(139,92,246,.16),transparent 62%),
    radial-gradient(700px 500px at 50% 108%,rgba(244,114,182,.09),transparent 60%);
}
.page{position:relative;z-index:1}

/* ---------------------------------------------------------- layout */
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 28px}
@media(max-width:720px){.container{padding:0 20px}}
section{position:relative}
.sec{padding:104px 0}
.sec-sm{padding:72px 0}
@media(max-width:860px){.sec{padding:74px 0}.sec-sm{padding:56px 0}}

/* ---------------------------------------------------------- typography */
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.025em;font-weight:700}
h1{font-size:clamp(2.35rem,5.4vw,4rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.85rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem)}
p{color:var(--txt-2)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cy);padding:7px 15px;border:1px solid rgba(34,211,238,.28);
  border-radius:999px;background:rgba(34,211,238,.06);margin-bottom:20px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:0 0 12px var(--cy)}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{margin-top:18px;font-size:17px}
.lead{font-size:18px;color:var(--txt-2)}
.muted{color:var(--txt-3)}

/* ---------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:12px;font-weight:600;font-size:15px;
  border:1px solid transparent;cursor:pointer;transition:.28s var(--ease);white-space:nowrap;
}
.btn-primary{background:var(--grad);color:var(--on-grad);box-shadow:0 16px 40px -18px rgba(34,211,238,.85)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 48px -16px rgba(34,211,238,.95)}
.btn-ghost{border-color:var(--line-2);color:var(--txt);background:var(--softer)}
.btn-ghost:hover{border-color:var(--cy);color:var(--txt);background:rgba(34,211,238,.09)}
.btn-sm{padding:10px 18px;font-size:13.5px}
.btn-block{width:100%}
.arrow{transition:transform .28s var(--ease)}
.btn:hover .arrow,.link:hover .arrow{transform:translateX(4px)}
.link{display:inline-flex;align-items:center;gap:7px;color:var(--cy);font-weight:600;font-size:14.5px}
.link:hover{color:var(--txt)}

/* ---------------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:80;
  background:var(--header-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:.3s;
}
.site-header.scrolled{border-bottom-color:var(--line);background:var(--header-bg-solid)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:.02em;flex-shrink:0}
.brand-mark{
  width:34px;height:34px;border-radius:10px;background:var(--grad);
  display:grid;place-items:center;color:var(--on-grad);font-weight:900;font-size:16px;
  box-shadow:0 8px 24px -10px rgba(34,211,238,.9);flex-shrink:0;
}
.brand img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{
  padding:9px 15px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--txt-2);transition:.2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--txt);background:var(--chip-bg)}
.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.8px;background:var(--txt);transition:.25s var(--ease)}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:26px}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1000px){
  .nav-links{
    position:fixed;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--header-bg-solid);border-bottom:1px solid var(--line);padding:16px 20px 26px;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:.28s var(--ease);
    max-height:calc(100vh - 76px);overflow-y:auto;
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:13px 14px;font-size:16px}
  .burger{display:block}
  .nav-cta .btn{display:none}
}

/* ---------------------------------------------------------- hero */
.hero{padding:112px 0 96px;position:relative;overflow:hidden}
.hero-inner{max-width:940px}
.hero h1{margin-bottom:24px}
.hero h1 .grad{display:inline-block}
.hero p.sub{font-size:19px;max-width:660px;margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:66px}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hero-stats div{background:var(--bg);padding:26px 22px}
.hero-stats .v{font-size:30px;font-weight:800;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats .l{font-size:13px;color:var(--txt-3);margin-top:4px}
@media(max-width:860px){.hero{padding:72px 0 66px}.hero-stats{grid-template-columns:repeat(2,1fr)}}
.hero-orbit{
  position:absolute;right:-180px;top:-120px;width:640px;height:640px;border-radius:50%;
  border:1px solid rgba(34,211,238,.16);pointer-events:none;
}
.hero-orbit::before,.hero-orbit::after{
  content:"";position:absolute;border-radius:50%;border:1px solid rgba(139,92,246,.14);
}
.hero-orbit::before{inset:70px}
.hero-orbit::after{inset:150px;border-color:rgba(244,114,182,.12)}
@media(max-width:1100px){.hero-orbit{display:none}}

/* page hero (interior) */
.page-hero{padding:88px 0 60px;border-bottom:1px solid var(--line)}
.page-hero h1{max-width:900px;margin-bottom:18px}
.page-hero p{max-width:700px;font-size:18px}
.crumbs{font-size:13px;color:var(--txt-3);margin-bottom:20px}
.crumbs a:hover{color:var(--cy)}

/* ---------------------------------------------------------- cards */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  position:relative;background:var(--card-bg);
  border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  transition:.35s var(--ease);overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);opacity:0;transition:.35s;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(34,211,238,.13),transparent 70%);
  pointer-events:none;
}
.card:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.34)}
.card:hover::after{opacity:1}
.card h3{margin-bottom:11px}
.card p{font-size:14.5px}
.card .ico{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.24);color:var(--cy);
}
.card .ico svg{width:23px;height:23px}
.card.a-violet .ico{background:rgba(139,92,246,.1);border-color:rgba(139,92,246,.26);color:var(--vi)}
.card.a-pink   .ico{background:rgba(244,114,182,.1);border-color:rgba(244,114,182,.26);color:var(--pk)}
.card.a-amber  .ico{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.26);color:var(--am)}
.card.a-emerald .ico{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.26);color:var(--em)}
.card.a-sky    .ico{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.26);color:var(--sky)}
.card-link{margin-top:20px;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--cy)}

/* numbered / index label */
.card .idx{position:absolute;top:22px;right:26px;font-size:12px;font-weight:700;color:var(--txt-3);letter-spacing:.1em}

/* ---------------------------------------------------------- logos */
.logos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.logos .lbl{text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);margin-bottom:22px}
.logo-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 52px}
.logo-row span{font-size:17px;font-weight:800;letter-spacing:.2em;color:var(--logo-dim);transition:.3s}
.logo-row span:hover{color:var(--logo-lit)}

/* ---------------------------------------------------------- stats strip */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat{padding:32px 26px;border:1px solid var(--line);border-radius:16px;background:var(--soft);text-align:center}
.stat .v{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-size:13.5px;color:var(--txt-3);margin-top:8px}
@media(max-width:860px){.stats-strip{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------- split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.split.reverse .split-media{order:-1}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:44px}.split.reverse .split-media{order:0}}
.points{list-style:none;margin-top:28px;display:grid;gap:14px}
.points li{display:flex;gap:13px;align-items:flex-start;font-size:15px;color:var(--txt-2)}
.points li::before{
  content:"";flex-shrink:0;width:20px;height:20px;margin-top:3px;border-radius:6px;
  background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;background-position:center;
}
.split-media{position:relative;aspect-ratio:4/3;border-radius:22px;border:1px solid var(--line);overflow:hidden;background:var(--panel)}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media.placeholder{
  background:
    radial-gradient(500px 300px at 30% 20%,rgba(34,211,238,.2),transparent 60%),
    radial-gradient(500px 300px at 80% 80%,rgba(139,92,246,.22),transparent 60%),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/34px 34px,
    var(--panel);
}
.split-media.placeholder::after{
  content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.3);
}

/* ---------------------------------------------------------- process */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.process .step{padding:34px 28px;border-right:1px solid var(--line);position:relative;background:var(--softer);transition:.3s}
.process .step:last-child{border-right:none}
.process .step:hover{background:rgba(34,211,238,.05)}
.process .no{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--cy);margin-bottom:14px}
.process h3{font-size:18px;margin-bottom:9px}
.process p{font-size:14px}
@media(max-width:940px){.process{grid-template-columns:repeat(2,1fr)}.process .step:nth-child(2n){border-right:none}.process .step:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:560px){.process{grid-template-columns:1fr}.process .step{border-right:none;border-bottom:1px solid var(--line)}}

/* ---------------------------------------------------------- tech */
.tech-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.tech-groups{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tech-groups{grid-template-columns:1fr}}
.tech-group{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--soft)}
.tech-group h4{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 13px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--txt-2);background:var(--chip-bg);transition:.25s}
.chip:hover{border-color:rgba(34,211,238,.45);color:var(--txt)}

/* ---------------------------------------------------------- testimonials */
.quote{
  border:1px solid var(--line);border-radius:18px;padding:32px;background:var(--soft);
  display:flex;flex-direction:column;justify-content:space-between;transition:.3s var(--ease);
}
.quote:hover{border-color:rgba(139,92,246,.4);transform:translateY(-3px)}
.quote .mark{font-size:44px;line-height:1;color:rgba(139,92,246,.5);font-weight:800;margin-bottom:8px}
.quote p{font-size:15.5px;color:var(--txt);margin-bottom:24px}
.quote .who{display:flex;align-items:center;gap:13px;padding-top:20px;border-top:1px solid var(--line)}
.quote .av{width:40px;height:40px;border-radius:11px;background:var(--grad);display:grid;place-items:center;color:var(--on-grad);font-weight:800;font-size:14px;flex-shrink:0}
.quote .nm{font-size:14px;font-weight:600}
.quote .rl{font-size:12.5px;color:var(--txt-3)}

/* ---------------------------------------------------------- pricing / engagement */
.plan{border:1px solid var(--line);border-radius:18px;padding:30px;background:var(--soft);position:relative;transition:.3s var(--ease)}
.plan:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.35)}
.plan.featured{border-color:rgba(34,211,238,.5);background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(139,92,246,.05))}
.plan.featured::before{
  content:"Most popular";position:absolute;top:-11px;left:30px;
  background:var(--grad);color:var(--on-grad);font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 12px;border-radius:999px;
}
.plan h3{font-size:19px;margin-bottom:6px}
.plan .price{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:14px 0 4px}
.plan .unit{font-size:13px;color:var(--txt-3);margin-bottom:22px}
.plan ul{list-style:none;display:grid;gap:11px;font-size:14px;color:var(--txt-2)}
.plan ul li{display:flex;gap:10px}
.plan ul li::before{content:"→";color:var(--cy);flex-shrink:0}

/* ---------------------------------------------------------- faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:24px 46px 24px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:600;
  position:relative;transition:.2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cy)}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:24px;font-weight:300;color:var(--cy);transition:.28s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .ans{padding:0 46px 26px 0;color:var(--txt-2);font-size:15px}

/* ---------------------------------------------------------- team */
.member{text-align:center;border:1px solid var(--line);border-radius:16px;padding:28px 20px;background:var(--soft);transition:.3s var(--ease)}
.member:hover{transform:translateY(-4px);border-color:rgba(139,92,246,.4)}
.member .ph{width:82px;height:82px;border-radius:22px;margin:0 auto 16px;background:var(--grad);display:grid;place-items:center;font-size:26px;font-weight:800;color:var(--on-grad);overflow:hidden}
.member .ph img{width:100%;height:100%;object-fit:cover}
.member h4{font-size:16px;margin-bottom:4px}
.member .rl{font-size:13px;color:var(--txt-3)}

/* ---------------------------------------------------------- cta band */
.cta-band{
  border:1px solid rgba(34,211,238,.28);border-radius:24px;padding:60px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(34,211,238,.11),rgba(139,92,246,.11));
}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/40px 40px;
  mask-image:radial-gradient(ellipse at center,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 78%);
}
.cta-band > *{position:relative}
.cta-band h2{margin-bottom:16px}
.cta-band p{max-width:640px;margin:0 auto 30px;font-size:17px}
.cta-band .note{font-size:13px;color:var(--txt-3);margin-top:20px}
@media(max-width:700px){.cta-band{padding:40px 24px}}

/* ---------------------------------------------------------- article / rich text */
.rich{max-width:820px;font-size:16.5px;color:var(--txt-2)}
.rich h2{font-size:1.7rem;margin:38px 0 14px;color:var(--txt)}
.rich h3{font-size:1.28rem;margin:30px 0 12px;color:var(--txt)}
.rich p{margin-bottom:18px}
.rich ul,.rich ol{margin:0 0 20px 22px;display:grid;gap:9px}
.rich a{color:var(--cy);text-decoration:underline;text-underline-offset:3px}
.rich blockquote{border-left:2px solid var(--cy);padding-left:22px;margin:26px 0;color:var(--txt);font-size:18px}
.rich img{border-radius:14px;margin:26px 0;border:1px solid var(--line)}
.rich code{background:var(--chip-bg);border:1px solid var(--line);padding:2px 7px;border-radius:6px;font-size:14px;color:var(--cy)}
.rich table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.5px}
.rich th,.rich td{padding:11px 14px;border:1px solid var(--line);text-align:left}
.rich th{background:var(--chip-bg);color:var(--txt)}

/* ---------------------------------------------------------- listing items */
.post-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--soft);transition:.32s var(--ease);display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.35)}
.post-card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(139,92,246,.2));position:relative}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .body{padding:24px;flex:1;display:flex;flex-direction:column}
.post-card .cat{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);margin-bottom:11px}
.post-card h3{font-size:18px;margin-bottom:10px;line-height:1.35}
.post-card p{font-size:14px;flex:1}
.post-card .meta{font-size:12.5px;color:var(--txt-3);margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

.case-card{position:relative;border:1px solid var(--line);border-radius:18px;padding:30px;background:var(--soft);transition:.32s var(--ease)}
.case-card:hover{transform:translateY(-4px);border-color:rgba(244,114,182,.4)}
.case-card .ind{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pk);margin-bottom:12px}
.case-metrics{display:flex;gap:26px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.case-metrics .m .v{font-size:21px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.case-metrics .m .l{font-size:11.5px;color:var(--txt-3)}

.job-row{
  display:flex;align-items:center;gap:20px;padding:24px 26px;border:1px solid var(--line);
  border-radius:14px;background:var(--soft);transition:.28s var(--ease);margin-bottom:12px;
}
.job-row:hover{border-color:rgba(34,211,238,.4);transform:translateX(4px)}
.job-row .jt{flex:1;min-width:200px}
.job-row h3{font-size:17px;margin-bottom:5px}
.job-row .jm{font-size:13px;color:var(--txt-3);display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:640px){.job-row{flex-direction:column;align-items:flex-start}}

/* ---------------------------------------------------------- forms */
.form-card{border:1px solid var(--line);border-radius:20px;padding:36px;background:var(--card-bg)}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:#cbd6ee}
.field .req{color:var(--pk)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:11px;background:var(--field-bg);
  border:1px solid var(--line);transition:.2s;font-size:15px;
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cy);box-shadow:0 0 0 3px rgba(34,211,238,.14);
  background-color:var(--field-bg-focus)
}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c9f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
/* The dropdown arrow is a background image. Any rule that sets the
   `background` SHORTHAND on select — including a :focus rule — silently
   resets repeat, position and size, which tiles the arrow across the whole
   control. These longhands are re-asserted at a specificity that beats
   both :focus and the light-theme override so that cannot happen again.
   Use background-color, never background, on select. */
:root .field select,
:root[data-theme] .field select,
:root .field select:focus,
:root[data-theme] .field select:focus{
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

.alert{padding:15px 18px;border-radius:12px;font-size:14.5px;margin-bottom:22px;border:1px solid}
.alert-success{background:rgba(52,211,153,.09);border-color:rgba(52,211,153,.32);color:#a7f3d0}
.alert-error{background:rgba(251,113,133,.09);border-color:rgba(251,113,133,.32);color:#fecdd3}
.alert-warn{background:rgba(251,191,36,.09);border-color:rgba(251,191,36,.3);color:#fde68a}

/* contact layout */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
@media(max-width:940px){.contact-grid{grid-template-columns:1fr;gap:38px}}
.contact-item{display:flex;gap:16px;margin-bottom:26px}
.contact-item .ci{width:42px;height:42px;border-radius:12px;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25);display:grid;place-items:center;color:var(--cy);flex-shrink:0}
.contact-item .cl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);margin-bottom:3px}
.contact-item .cv{font-size:15.5px;font-weight:500}
.contact-item a:hover{color:var(--cy)}

/* ---------------------------------------------------------- footer */
.site-footer{border-top:1px solid var(--line);margin-top:0;background:var(--footer-bg)}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding:66px 0 48px}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer-brand p{font-size:14px;margin:18px 0 22px;max-width:330px}
.footer-col h4{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:18px}
.footer-col ul{list-style:none;display:grid;gap:11px}
.footer-col a{font-size:14.5px;color:var(--txt-2);transition:.2s}
.footer-col a:hover{color:var(--cy)}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;color:var(--txt-2);transition:.25s}
.socials a:hover{border-color:var(--cy);color:var(--cy);transform:translateY(-2px)}
.socials svg{width:17px;height:17px}
.newsletter{display:flex;gap:9px;margin-top:14px}
.newsletter input{flex:1;padding:11px 14px;border-radius:10px;background:var(--field-bg);border:1px solid var(--line);font-size:14px}
.newsletter input:focus{outline:none;border-color:var(--cy)}
.footer-bottom{
  border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--txt-3);
}
.footer-bottom a:hover{color:var(--cy)}

/* ---------------------------------------------------------- misc */
.tag{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;border:1px solid var(--line);color:var(--txt-2);background:var(--chip-bg)}
.divider{height:1px;background:var(--line);margin:0}
.empty{text-align:center;padding:70px 20px;color:var(--txt-3);border:1px dashed var(--line);border-radius:16px}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.pagination a,.pagination span{padding:9px 15px;border-radius:9px;border:1px solid var(--line);font-size:14px;color:var(--txt-2)}
.pagination a:hover{border-color:var(--cy);color:var(--txt)}
.pagination .cur{background:var(--grad);color:var(--on-grad);border-color:transparent;font-weight:700}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition-duration:.01ms!important}
}

/* print */
@media print{
  .site-header,.site-footer,.bg-grid,.bg-glow{display:none}
  body{background:#fff;color:#000}
}

/* =====================================================================
   LIGHT MODE — public site
   Same layout, inverted tokens. Set by data-theme on <html>.
   ===================================================================== */
:root[data-theme="light"]{
  --bg:#f7f9fc;
  --bg-2:#eef2f8;
  --panel:#ffffff;
  --panel-2:#f2f5fa;
  --line:rgba(15,23,42,.10);
  --line-2:rgba(15,23,42,.18);
  --txt:#0e1729;
  --txt-2:#48587a;
  --txt-3:#6f7f9c;
  --cy:#0891b2;
  --vi:#7c3aed;
  --pk:#db2777;
  --am:#b45309;
  --em:#059669;
  --sky:#0284c7;
  --grad:linear-gradient(120deg,#06b6d4,#7c3aed);

  --card-bg:#ffffff;
  --soft:#ffffff;
  --softer:rgba(15,23,42,.02);
  --chip-bg:rgba(15,23,42,.04);
  --field-bg:#ffffff;
  --field-bg-focus:#ffffff;
  --header-bg:rgba(247,249,252,.78);
  --header-bg-solid:rgba(255,255,255,.96);
  --footer-bg:rgba(238,242,248,.7);
  --on-grad:#ffffff;
  --grid-line:rgba(15,23,42,.035);
  --logo-dim:rgba(15,23,42,.28);
  --logo-lit:rgba(15,23,42,.6);
  color-scheme:light;
}

:root[data-theme="light"] body{-webkit-font-smoothing:auto}
:root[data-theme="light"] .bg-glow{background:
  radial-gradient(900px 620px at 12% -8%,rgba(6,182,212,.14),transparent 62%),
  radial-gradient(880px 600px at 92% 4%,rgba(124,58,237,.13),transparent 62%),
  radial-gradient(700px 500px at 50% 108%,rgba(219,39,119,.07),transparent 60%);}
:root[data-theme="light"] .card,
:root[data-theme="light"] .quote,
:root[data-theme="light"] .plan,
:root[data-theme="light"] .member,
:root[data-theme="light"] .post-card,
:root[data-theme="light"] .case-card,
:root[data-theme="light"] .job-row,
:root[data-theme="light"] .tech-group,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .form-card{box-shadow:0 1px 2px rgba(15,23,42,.05),0 12px 30px -22px rgba(15,23,42,.3)}
:root[data-theme="light"] .card::after{background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(6,182,212,.10),transparent 70%)}
:root[data-theme="light"] .btn-primary{box-shadow:0 14px 34px -18px rgba(8,145,178,.8)}
:root[data-theme="light"] .brand-mark{box-shadow:0 8px 22px -12px rgba(8,145,178,.8)}
:root[data-theme="light"] .eyebrow{border-color:rgba(8,145,178,.3);background:rgba(8,145,178,.07)}
:root[data-theme="light"] .eyebrow::before{box-shadow:0 0 10px rgba(8,145,178,.7)}
:root[data-theme="light"] .hero-stats{background:var(--line)}
:root[data-theme="light"] .hero-orbit{border-color:rgba(8,145,178,.2)}
:root[data-theme="light"] .hero-orbit::before{border-color:rgba(124,58,237,.18)}
:root[data-theme="light"] .hero-orbit::after{border-color:rgba(219,39,119,.16)}
:root[data-theme="light"] .points li::before{
  background:rgba(8,145,178,.12);border-color:rgba(8,145,178,.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230891b2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;background-position:center;}
:root[data-theme="light"] .split-media.placeholder{background:
  radial-gradient(500px 300px at 30% 20%,rgba(6,182,212,.18),transparent 60%),
  radial-gradient(500px 300px at 80% 80%,rgba(124,58,237,.18),transparent 60%),
  linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px) 0 0/34px 34px,
  linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px) 0 0/34px 34px,
  var(--panel);}
:root[data-theme="light"] .split-media.placeholder::after{color:rgba(15,23,42,.35)}
:root[data-theme="light"] .process .step:hover{background:rgba(8,145,178,.05)}
:root[data-theme="light"] .quote .mark{color:rgba(124,58,237,.45)}
:root[data-theme="light"] .cta-band{
  border-color:rgba(8,145,178,.28);
  background:linear-gradient(135deg,rgba(6,182,212,.10),rgba(124,58,237,.10));}
:root[data-theme="light"] .cta-band::before{background:
  linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px) 0 0/40px 40px;}
:root[data-theme="light"] .plan.featured{background:linear-gradient(180deg,rgba(6,182,212,.09),rgba(124,58,237,.06))}
:root[data-theme="light"] .post-card .thumb{background:linear-gradient(135deg,rgba(6,182,212,.18),rgba(124,58,237,.2))}
:root[data-theme="light"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7f9c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
:root[data-theme="light"] .contact-item .ci{background:rgba(8,145,178,.09);border-color:rgba(8,145,178,.25)}
:root[data-theme="light"] .alert-success{background:rgba(5,150,105,.08);border-color:rgba(5,150,105,.28);color:#065f46}
:root[data-theme="light"] .alert-error{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.26);color:#991b1b}
:root[data-theme="light"] .alert-warn{background:rgba(180,83,9,.08);border-color:rgba(180,83,9,.26);color:#92400e}
:root[data-theme="light"] .socials a:hover{background:rgba(8,145,178,.07)}

/* ---- follow the OS when the mode is "auto" ---- */
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{
    --bg:#f7f9fc;--bg-2:#eef2f8;--panel:#ffffff;--panel-2:#f2f5fa;
    --line:rgba(15,23,42,.10);--line-2:rgba(15,23,42,.18);
    --txt:#0e1729;--txt-2:#48587a;--txt-3:#6f7f9c;
    --cy:#0891b2;--vi:#7c3aed;--pk:#db2777;--am:#b45309;--em:#059669;--sky:#0284c7;
    --grad:linear-gradient(120deg,#06b6d4,#7c3aed);
    --card-bg:#ffffff;--soft:#ffffff;--softer:rgba(15,23,42,.02);--chip-bg:rgba(15,23,42,.04);
    --field-bg:#ffffff;--field-bg-focus:#ffffff;
    --header-bg:rgba(247,249,252,.78);--header-bg-solid:rgba(255,255,255,.96);
    --footer-bg:rgba(238,242,248,.7);--on-grad:#ffffff;--grid-line:rgba(15,23,42,.035);
    --logo-dim:rgba(15,23,42,.28);--logo-lit:rgba(15,23,42,.6);
    color-scheme:light;
  }
}

/* ---- footer theme switch ---- */
.theme-switch{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);color:var(--txt-3);font-size:12.5px;cursor:pointer;
  background:transparent;transition:.25s var(--ease);
}
.theme-switch:hover{border-color:var(--cy);color:var(--cy)}
.theme-switch svg{width:14px;height:14px}
.theme-switch .ico-sun,.theme-switch .lbl-light{display:none}
:root[data-theme="light"] .theme-switch .ico-sun,
:root[data-theme="light"] .theme-switch .lbl-light{display:inline}
:root[data-theme="light"] .theme-switch .ico-moon,
:root[data-theme="light"] .theme-switch .lbl-dark{display:none}

/* =====================================================================
   SLIDESHOW  (Theme builder → Slideshows)
   ===================================================================== */
.oxy-slider{position:relative;height:var(--sl-h,84vh);min-height:420px;overflow:hidden;isolation:isolate}
.sl-track{position:absolute;inset:0}
.sl-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity var(--sl-speed,800ms) var(--ease),transform var(--sl-speed,800ms) var(--ease),filter var(--sl-speed,800ms) var(--ease)}
.sl-slide.on{opacity:1;visibility:visible;z-index:2}
.sl-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sl-media.ken{animation:oxy-ken 14s ease-out both}
.sl-slide.on .sl-media.ken{animation-play-state:running}
.sl-gradient{background:
  radial-gradient(900px 620px at 15% 10%,rgba(34,211,238,.35),transparent 62%),
  radial-gradient(900px 620px at 85% 30%,rgba(139,92,246,.38),transparent 62%),var(--bg);}
.sl-mobile{display:none}
@media(max-width:720px){.sl-media:not(.sl-mobile){display:none}.sl-mobile{display:block}}
.sl-overlay{position:absolute;inset:0;z-index:1}
.sl-ov-solid{background:rgba(3,6,14,var(--ov,.55))}
.sl-ov-gradient{background:linear-gradient(90deg,rgba(3,6,14,calc(var(--ov,.55) + .2)) 0%,rgba(3,6,14,var(--ov,.55)) 45%,rgba(3,6,14,.15) 100%)}
.sl-ov-grid{background:
  linear-gradient(rgba(3,6,14,var(--ov,.55)),rgba(3,6,14,var(--ov,.55))),
  linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/44px 44px,
  linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/44px 44px;}
.sl-inner{position:relative;z-index:3;height:100%;display:flex}
.sl-inner.pos-top{align-items:flex-start;padding-top:14vh}
.sl-inner.pos-center{align-items:center}
.sl-inner.pos-bottom{align-items:flex-end;padding-bottom:12vh}
.sl-copy{max-width:720px;color:#fff}
.sl-copy.align-center{margin:0 auto;text-align:center}
.sl-copy.align-right{margin-left:auto;text-align:right}
.sl-title{font-size:clamp(2.1rem,5vw,3.7rem);line-height:1.1;letter-spacing:-.03em;margin-bottom:16px;color:#fff}
.sl-sub{font-size:clamp(1rem,1.6vw,1.18rem);color:rgba(255,255,255,.86);margin-bottom:28px;max-width:620px}
.sl-copy.align-center .sl-sub{margin-left:auto;margin-right:auto}
.sl-copy.align-right .sl-sub{margin-left:auto}
.sl-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.sl-copy.align-center .sl-badges{justify-content:center}
.sl-copy.align-right .sl-badges{justify-content:flex-end}
.sl-badges .tag{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#fff}
.sl-actions{display:flex;gap:13px;flex-wrap:wrap}
.sl-copy.align-center .sl-actions{justify-content:center}
.sl-copy.align-right .sl-actions{justify-content:flex-end}
.sl-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(8px);transition:.25s var(--ease);
}
.sl-arrow:hover{background:rgba(255,255,255,.2);transform:translateY(-50%) scale(1.06)}
.sl-arrow.prev{left:22px}.sl-arrow.prev svg{transform:rotate(180deg)}
.sl-arrow.next{right:22px}
@media(max-width:720px){.sl-arrow{display:none}}
.sl-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:6;display:flex;gap:9px}
.sl-dot{width:9px;height:9px;border-radius:999px;border:none;background:rgba(255,255,255,.38);cursor:pointer;transition:.3s var(--ease);padding:0}
.sl-dot:hover{background:rgba(255,255,255,.7)}
.sl-dot.on{width:30px;background:#fff}
.sl-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.14);z-index:6}
.sl-progress i{display:block;height:100%;background:var(--grad);width:0}
.sl-progress i.run{animation:oxy-bar linear forwards}
/* transitions */
.oxy-slider[data-transition="slide"] .sl-slide{transform:translateX(60px)}
.oxy-slider[data-transition="slide"] .sl-slide.on{transform:none}
.oxy-slider[data-transition="slide-up"] .sl-slide{transform:translateY(50px)}
.oxy-slider[data-transition="slide-up"] .sl-slide.on{transform:none}
.oxy-slider[data-transition="zoom"] .sl-slide{transform:scale(1.08)}
.oxy-slider[data-transition="zoom"] .sl-slide.on{transform:none}
.oxy-slider[data-transition="flip"] .sl-slide{transform:rotateY(12deg) scale(.96);transform-origin:left center}
.oxy-slider[data-transition="flip"] .sl-slide.on{transform:none}
.oxy-slider[data-transition="blur"] .sl-slide{filter:blur(16px)}
.oxy-slider[data-transition="blur"] .sl-slide.on{filter:none}

/* =====================================================================
   FREE CANVAS  (drag-positioned landing sections)
   ===================================================================== */
.oxy-canvas{position:relative;min-height:var(--cv-h,600px);overflow:hidden;isolation:isolate}
.cv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cv-overlay{position:absolute;inset:0;background:rgba(3,6,14,.55);z-index:1}
.cv-stage{position:relative;height:var(--cv-h,600px);z-index:2}
.cv-item{position:absolute}
@media(max-width:860px){
  .oxy-canvas{min-height:0}
  .cv-stage{height:auto;padding:56px 0;display:flex;flex-direction:column;gap:22px}
  .cv-item{position:static!important;width:100%!important;text-align:left!important}
}

/* =====================================================================
   THEME BUILDER — header / footer layout variants
   ===================================================================== */
.topbar{
  background:var(--grad);color:var(--on-grad);font-size:13px;font-weight:500;
  text-align:center;padding:9px 0;position:relative;z-index:81;
}
.topbar a{text-decoration:underline;text-underline-offset:2px}

.site-header .nav{height:var(--hdr-h,76px)}
.site-header.not-sticky{position:relative}
.site-header.solid{background:var(--header-bg-solid);border-bottom-color:var(--line)}

/* centred: logo in the middle, links either side */
.site-header.hdr-centered .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.site-header.hdr-centered .brand{order:2;justify-self:center}
.site-header.hdr-centered .nav-links{order:1;justify-self:start;margin:0}
.site-header.hdr-centered .nav-cta{order:3;justify-self:end}

/* split: logo left, links centred, CTA right */
.site-header.hdr-split .nav-links{margin:0 auto}

/* minimal: everything collapses behind the burger */
.site-header.hdr-minimal .nav-links{
  position:fixed;top:var(--hdr-h,76px);left:0;right:0;flex-direction:column;align-items:stretch;
  background:var(--header-bg-solid);border-bottom:1px solid var(--line);padding:16px 20px 26px;
  transform:translateY(-12px);opacity:0;pointer-events:none;transition:.28s var(--ease);gap:2px;
}
.site-header.hdr-minimal .nav-links.open{transform:none;opacity:1;pointer-events:auto}
.site-header.hdr-minimal .burger{display:block;order:3}
@media(max-width:1000px){.site-header.hdr-centered .nav{display:flex}}

/* footer variants */
.site-footer.ftr-centered .footer-top{grid-template-columns:1fr!important;text-align:center;justify-items:center}
.site-footer.ftr-centered .footer-brand p{margin-left:auto;margin-right:auto}
.site-footer.ftr-centered .socials{justify-content:center}
.site-footer.ftr-minimal .footer-top{display:none}
.site-footer.ftr-minimal .footer-bottom{border-top:none;padding:26px 0}

/* ============================================================ PRODUCTS */
.prod-filters{display:flex;flex-wrap:wrap;gap:10px}
.prod-filters .chip{padding:9px 18px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;
  color:var(--txt-2);background:var(--soft);transition:.25s var(--ease);text-decoration:none}
.prod-filters .chip:hover{border-color:rgba(34,211,238,.4);color:var(--txt)}
.prod-filters .chip.on{background:var(--grad);color:var(--on-grad);border-color:transparent;font-weight:600}

.prod-tagline{font-size:1.15rem;color:var(--txt);font-weight:500;margin:14px 0 16px;line-height:1.5}

.prod-badges{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 4px}
.prod-badges .pill{display:inline-flex;align-items:center;gap:7px}

.prod-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* --- featured product rows --------------------------------------------- */
.prod-feature{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;
  padding:56px 0;border-bottom:1px solid var(--line)}
.prod-feature:last-child{border-bottom:0}
.prod-feature.rev .prod-feature-copy{order:2}
.prod-feature.rev .prod-feature-media{order:1}
.prod-feature h2{font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.02em;line-height:1.12}
.prod-feature-media img{width:100%;border-radius:var(--radius);border:1px solid var(--line);display:block}

/* --- generated product mock-up (used when no hero image is uploaded) ---- */
.prod-mock{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.55);position:relative}
.prod-mock::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 80% 0%,rgba(34,211,238,.10),transparent 60%)}
.prod-mock-bar{display:flex;gap:7px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--soft)}
.prod-mock-bar span{width:11px;height:11px;border-radius:50%;background:var(--line-2)}
.prod-mock-bar span:first-child{background:rgba(244,63,94,.55)}
.prod-mock-bar span:nth-child(2){background:rgba(251,191,36,.55)}
.prod-mock-bar span:nth-child(3){background:rgba(52,211,153,.55)}
.prod-mock-body{padding:28px 26px 32px;display:grid;gap:14px}
.prod-mock.lg .prod-mock-body{padding:36px 32px 40px;gap:16px}
.prod-mock-ico{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;
  background:var(--grad);color:var(--on-grad);margin-bottom:10px}
.prod-mock-row{display:flex;align-items:center;gap:13px}
.prod-mock-row .pm-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--softer);border:1px solid var(--line);color:var(--cy);flex-shrink:0}
.prod-mock-row .pm-t{font-size:13.5px;font-weight:600;color:var(--txt-2);white-space:nowrap}
.prod-mock-row .pm-bar{flex:1;height:7px;border-radius:99px;background:var(--softer);position:relative;overflow:hidden}
.prod-mock-row .pm-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:62%;border-radius:99px;
  background:linear-gradient(90deg,var(--cy),transparent);opacity:.55}
.prod-mock-row:nth-child(3) .pm-bar::after{width:44%}
.prod-mock-row:nth-child(4) .pm-bar::after{width:78%}
.prod-mock-row:nth-child(5) .pm-bar::after{width:35%}

/* --- product detail ----------------------------------------------------- */
.prod-hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:60px;align-items:center;margin-top:14px}
.prod-hero-grid h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.prod-hero-media img{width:100%;border-radius:var(--radius);border:1px solid var(--line);display:block}
.prod-video{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.prod-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.prod-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.prod-gallery figure{margin:0}
.prod-gallery img{width:100%;border-radius:14px;border:1px solid var(--line);display:block}
.prod-gallery figcaption{margin-top:11px;font-size:13px;color:var(--txt-3)}

.prod-specs{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.prod-spec{display:grid;grid-template-columns:250px 1fr;gap:24px;padding:19px 26px;border-bottom:1px solid var(--line)}
.prod-spec:last-child{border-bottom:0}
.prod-spec .ps-l{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);font-weight:700}
.prod-spec .ps-v{font-size:14.5px;color:var(--txt-2)}

.plan .plan-tag{position:absolute;top:-11px;left:30px;padding:4px 13px;border-radius:999px;
  background:var(--grad);color:var(--on-grad);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.plan .plan-desc{font-size:13.5px;color:var(--txt-3);margin:0 0 20px;line-height:1.6}

/* --- demo booking ------------------------------------------------------- */
.demo-steps{display:grid;gap:22px;margin-top:28px}
.demo-step{display:flex;gap:16px;align-items:flex-start}
.demo-step .ds-n{width:34px;height:34px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;
  background:var(--softer);border:1px solid var(--line);color:var(--cy);font-weight:800;font-size:14px}
.demo-step .cl{font-size:14.5px;font-weight:600;color:var(--txt);margin-bottom:4px}
.demo-step .cv{font-size:13.5px;color:var(--txt-3);line-height:1.65}

.demo-points{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin:22px 0 28px}
.demo-points span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--txt-2)}
.demo-points svg{color:var(--cy)}

@media(max-width:960px){
  .prod-feature{grid-template-columns:1fr;gap:38px;padding:44px 0}
  .prod-feature.rev .prod-feature-copy{order:1}
  .prod-feature.rev .prod-feature-media{order:2}
  .prod-hero-grid{grid-template-columns:1fr;gap:40px}
  .prod-spec{grid-template-columns:1fr;gap:6px;padding:17px 20px}
}

/* ---- product cards ------------------------------------------------------
   Three columns. A gradient hairline frame wraps an inner panel, the media
   carries an overlapping accent tab with the product icon, and the whole
   card lifts into an accent glow on hover. Deliberately not a plain
   bordered box — this is the signature component of the products page.  */

.prod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

.prod-card{
  --pc-a:#22d3ee;               /* accent, overridden per variant below */
  --pc-a2:#8b5cf6;
  position:relative;padding:1px;border-radius:22px;
  background:linear-gradient(158deg,var(--line-2) 0%,var(--line) 34%,transparent 70%);
  transition:transform .38s var(--ease),background .38s var(--ease)}
.prod-card::before{
  /* Glow sits above the card background but below the panel, so the hover
     transform creating a stacking context cannot swallow it. */
  content:"";position:absolute;inset:-8px;border-radius:28px;z-index:0;
  background:radial-gradient(65% 55% at 50% 10%,var(--pc-a),transparent 70%);
  opacity:0;filter:blur(26px);transition:opacity .38s var(--ease);pointer-events:none}
.prod-card:hover{transform:translateY(-7px);
  background:linear-gradient(158deg,var(--pc-a) 0%,var(--line) 42%,transparent 72%)}
.prod-card:hover::before{opacity:.30}

.pc-panel{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  border-radius:21px;background:var(--card-bg);padding:16px;overflow:hidden}
.pc-panel::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--pc-a),var(--pc-a2));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.prod-card:hover .pc-panel::after{transform:scaleX(1)}

/* --- media -------------------------------------------------------------- */
.pc-media{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--softer);margin-bottom:22px}
.pc-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.prod-card:hover .pc-media img{transform:scale(1.05)}

/* diagonal sheen that sweeps across on hover */
.pc-media::after{content:"";position:absolute;top:0;bottom:0;left:-65%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);
  transform:skewX(-18deg);transition:left .75s var(--ease);pointer-events:none}
.prod-card:hover .pc-media::after{left:125%}

/* signature detail: accent tab holding the product icon, overlapping the
   bottom-left corner of the image */
.pc-media::before{content:"";position:absolute;left:14px;bottom:-1px;width:52px;height:26px;
  border-radius:12px 12px 0 0;background:var(--card-bg);z-index:2}
.prod-card .pc-tab{position:absolute;left:22px;bottom:6px;z-index:3;
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--pc-a),var(--pc-a2));color:var(--on-grad);
  box-shadow:0 10px 26px -10px var(--pc-a)}

.pc-flag{position:absolute;top:12px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  background:rgba(4,7,15,.72);color:#fff;backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16)}

/* skeleton shown when no image is uploaded */
.pc-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:11px;padding:0 30px 0 78px;
  background:
    radial-gradient(110% 110% at 12% 0%,color-mix(in srgb,var(--pc-a) 20%,transparent),transparent 62%),
    radial-gradient(110% 110% at 95% 100%,color-mix(in srgb,var(--pc-a2) 18%,transparent),transparent 62%),
    var(--softer)}
.pc-fallback .pc-fb-l{display:block;height:9px;border-radius:99px;background:var(--line-2);opacity:.85}
.pc-fallback .w1{width:76%}.pc-fallback .w2{width:54%}.pc-fallback .w3{width:64%}

/* --- body --------------------------------------------------------------- */
.pc-body{text-align:center;padding:0 8px;flex:1}
.pc-cat{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pc-a);margin-bottom:11px}
.prod-card h3{font-size:20.5px;letter-spacing:-.018em;margin:0 0 9px;line-height:1.25}
.prod-card h3 a{color:var(--txt);text-decoration:none;transition:color .25s var(--ease)}
.prod-card h3 a:hover{color:var(--pc-a)}
.pc-tag{font-size:14px;color:var(--txt-2);font-weight:500;line-height:1.55;margin:0 0 10px}
.pc-sum{font-size:13px;color:var(--txt-3);line-height:1.68;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.pc-badges{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:18px}
.pc-badges .pill{font-size:11px;padding:4px 11px}

/* --- footer buttons ------------------------------------------------------ */
.pc-foot{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  display:grid;gap:9px}
.pc-price{text-align:center;font-size:12.5px;color:var(--txt-3);margin-bottom:4px}
.pc-price strong{color:var(--txt);font-size:17px;font-weight:800;letter-spacing:-.02em}
.pc-price span{display:block;font-size:11.5px;margin-top:2px}

.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:11px;font-size:13.5px;font-weight:600;
  text-decoration:none;border:1px solid var(--line);color:var(--txt-2);
  background:var(--soft);transition:.26s var(--ease)}
.pc-btn:hover{color:var(--txt);border-color:color-mix(in srgb,var(--pc-a) 45%,var(--line));
  background:var(--softer)}
.pc-btn.primary{border-color:transparent;color:var(--on-grad);font-weight:700;
  background:linear-gradient(120deg,var(--pc-a),var(--pc-a2))}
.pc-btn.primary:hover{filter:brightness(1.08);
  box-shadow:0 14px 30px -14px var(--pc-a);color:var(--on-grad)}

/* --- accent variants ----------------------------------------------------- */
.prod-card.a-violet {--pc-a:#8b5cf6;--pc-a2:#22d3ee}
.prod-card.a-pink   {--pc-a:#f472b6;--pc-a2:#8b5cf6}
.prod-card.a-sky    {--pc-a:#38bdf8;--pc-a2:#22d3ee}
.prod-card.a-emerald{--pc-a:#34d399;--pc-a2:#22d3ee}
.prod-card.a-amber  {--pc-a:#fbbf24;--pc-a2:#f472b6}

/* Older browsers without color-mix still get a sensible border. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pc-btn:hover{border-color:var(--line-2)}
  .pc-fallback{background:var(--softer)}
}

@media(max-width:1040px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media(max-width:680px){.prod-grid{grid-template-columns:1fr}}