/* =====================================================================
   NEXICH: web2 · product-matched palette.
   Teal primary · blue as sparing accent · red/orange/amber severity ramp.
   Zero-build, offline, no external fonts. Shared across all pages.
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
ul{list-style:none}

:root{
  --bg:#0E1822; --bg-2:#15212E; --card:#1C2C3B;
  --line:#27384A; --line-2:#33485E;
  --fg:#EAF1F7; --dim:#93A6B6; --mute:#5E7183;

  --teal:#16B8A6;   /* primary accent     */
  --blue:#2FA8FF;   /* secondary, sparing */
  --amber:#FF8A00;  /* high / warn        */
  --gold:#F7BC38;   /* medium             */
  --coral:#F2495C;  /* critical / proof   */
  --ok:#3DBE6B;     /* verified / up      */

  --grad:linear-gradient(100deg,#16B8A6 0%,#17B6AF 42%,#2FA8FF 100%);
  --glow:0 0 0 1px rgba(22,184,166,.32),0 18px 50px -14px rgba(22,184,166,.4);
  --maxw:1160px; --gut:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
html,body{background:var(--bg)}
body{font-family:var(--sans);color:var(--fg);font-size:17px;line-height:1.6;letter-spacing:-.006em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:rgba(22,184,166,.3);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
strong{color:var(--fg);font-weight:700}

/* ---- background: balanced, cheap ---- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg .glow{position:absolute;top:-34vh;left:50%;width:min(1150px,125vw);height:min(1150px,125vw);transform:translateX(-50%);
  background:radial-gradient(circle,rgba(22,184,166,.15),rgba(47,168,255,.08) 36%,transparent 60%);filter:blur(26px)}
.bg .grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000 22%,transparent 76%);
  mask-image:radial-gradient(120% 90% at 50% 0,#000 22%,transparent 76%)}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gut);backdrop-filter:blur(10px);background:linear-gradient(var(--bg),rgba(14,24,34,.4))}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:750;letter-spacing:-.02em;font-size:19px}
.brand .brandmark{height:26px;width:auto;display:block}
.foot .brandmark{height:18px;width:auto;display:block;opacity:.92}
.brand .mark path{fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linejoin:round}
.brand .mark{filter:drop-shadow(0 0 8px rgba(22,184,166,.5))}
.brand.small{gap:7px;font-size:15px;color:var(--dim)}
.nav-links{display:flex;align-items:center;gap:26px;font-size:15px}
.nav-links a:not(.btn){color:var(--dim);transition:color .2s}
.nav-links a:not(.btn):hover{color:var(--fg)}
.nav-links a.here{color:var(--fg)}
@media(max-width:560px){.nav-links a:not(.btn){display:none}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:650;font-size:15.5px;letter-spacing:-.01em;
  padding:13px 22px;border-radius:12px;color:#04241F;background:var(--grad);box-shadow:var(--glow);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 0 0 1px rgba(22,184,166,.5),0 22px 60px -14px rgba(22,184,166,.5)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:9px 16px;font-size:14px;border-radius:10px}
.btn-lg{padding:16px 30px;font-size:17px;border-radius:14px}
.btn-ghost{color:var(--fg);background:transparent;border:1px solid var(--line-2);box-shadow:none}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);background:rgba(22,184,166,.08);box-shadow:none;transform:translateY(-2px)}

/* ---- section heads ---- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:rgba(22,184,166,.08)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.section-head{max-width:660px;margin-bottom:clamp(28px,4vw,44px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin-top:16px;font-size:clamp(28px,4.4vw,50px);font-weight:820;line-height:1.03;letter-spacing:-.03em}
.section-head .sub{margin-top:14px;color:var(--dim);font-size:clamp(15px,1.6vw,18px)}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(50px,9vw,110px)}
h1{margin:22px 0 0;font-size:clamp(44px,7.4vw,88px);font-weight:820;line-height:.98;letter-spacing:-.035em}
.lead{margin-top:22px;max-width:30ch;font-size:clamp(17px,1.7vw,20px);color:var(--dim);line-height:1.5}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:28px;font-family:var(--mono);font-size:12.5px;color:var(--mute)}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.85}

/* ---- HUD (live run) ---- */
.hud{background:linear-gradient(180deg,var(--card),#0B0C12);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}
.hud-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.tl{display:flex;gap:6px}.tl i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.hud-title{font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.hud-live{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);
  padding:3px 9px;border-radius:999px;border:1px solid rgba(22,184,166,.3);background:rgba(22,184,166,.08)}
.hud-live.done{color:var(--ok);border-color:rgba(61,190,107,.32);background:rgba(61,190,107,.1)}
.rail{display:flex;gap:6px;padding:12px 16px;flex-wrap:wrap}
.rail span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  padding:5px 10px;border-radius:8px;border:1px solid var(--line);transition:.25s var(--ease)}
.rail span.on{color:#04241F;background:var(--grad);border-color:transparent;box-shadow:0 6px 18px -8px rgba(22,184,166,.5)}
.rail span.done{color:var(--teal);border-color:rgba(22,184,166,.3)}
.stream{font-family:var(--mono);font-size:13px;line-height:1.7;padding:8px 18px 16px;min-height:184px;color:var(--dim);white-space:pre-wrap;word-break:break-word}
.stream .t{color:var(--teal)}.stream .b{color:var(--blue)}.stream .a{color:var(--amber)}
.stream .r{color:var(--coral);font-weight:700}.stream .m{color:var(--mute)}.stream .f{color:var(--fg)}
.stream .cur{color:var(--teal);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hud-foot{display:flex;gap:20px;padding:13px 18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--mute)}
.kpi b{color:var(--fg);font-size:15px}
.kpi.crit b{color:var(--coral)}

/* ---- pills ---- */
.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-block:clamp(20px,4vw,40px)}
.pill{padding:26px 24px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2);transition:.25s var(--ease)}
.pill:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--card)}
.pill .ic{width:26px;height:26px;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.pill h3{font-size:18px;font-weight:720;letter-spacing:-.02em}
.pill p{margin-top:7px;color:var(--dim);font-size:14.5px;line-height:1.5}

/* UNIVERSAL COVERAGE */
.cov-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(24px,4vw,40px)}
.cov{position:relative;padding:20px 18px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);transition:.25s var(--ease);overflow:hidden}
.cov::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--teal);opacity:.85}
.cov:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--card)}
.cov h4{font-size:15px;font-weight:720;letter-spacing:-.01em;color:var(--fg)}
.cov p{margin-top:8px;color:var(--dim);font-size:12.5px;line-height:1.45}
.cov-note{margin-top:clamp(22px,3vw,34px);text-align:center;color:var(--dim);font-size:15px;max-width:70ch;margin-inline:auto}
.cov-note b{color:var(--teal);font-weight:700}
@media (max-width:980px){.cov-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cov-grid{grid-template-columns:1fr}}

/* IP-BASED LICENSE SCALE */
.lic-scale{display:flex;align-items:stretch;margin-top:clamp(24px,4vw,40px);border:1px solid var(--line);border-radius:16px;background:var(--bg-2);overflow:hidden}
.lic-step{flex:1;padding:22px 12px;text-align:center;border-right:1px solid var(--line);transition:.25s var(--ease)}
.lic-step:last-child{border-right:0}
.lic-step:hover{background:var(--card)}
.lic-step b{display:block;font-family:var(--mono);font-size:clamp(20px,2.6vw,30px);color:var(--teal);font-weight:600;letter-spacing:-.02em}
.lic-step b .u{font-family:var(--sans);font-size:.4em;font-weight:600;color:var(--dim);margin-left:4px;letter-spacing:.03em;vertical-align:.55em}
.lic-step b.inf{font-size:clamp(15px,1.85vw,21px);letter-spacing:-.01em}
.lic-step span{display:block;margin-top:6px;font-size:12.5px;color:var(--dim)}
.lic-step.min{background:rgba(22,184,166,.07)}
.lic-step.min > span{color:var(--fg)}
@media (max-width:640px){.lic-scale{flex-wrap:wrap}.lic-step{flex:1 1 33%;border-bottom:1px solid var(--line)}}

/* ---- operation modes ---- */
.modes{padding-block:clamp(46px,8vw,96px)}
.dial{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--bg-2),#0B0C12);overflow:hidden}
.dial-track{display:flex;gap:4px;padding:8px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--line);overflow-x:auto}
.dial-track button{flex:1;min-width:max-content;white-space:nowrap;font-weight:640;font-size:14.5px;color:var(--dim);
  padding:12px 16px;border-radius:12px;border:1px solid transparent;transition:.22s var(--ease)}
.dial-track button:hover{color:var(--fg);background:rgba(255,255,255,.04)}
.dial-track button.on{color:#04241F;background:var(--grad);box-shadow:0 8px 22px -10px rgba(22,184,166,.5)}
.dial-panel{padding:clamp(24px,4vw,40px)}
.ai-meter{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ai-meter .bar{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;max-width:420px}
.ai-meter .bar i{display:block;height:100%;width:100%;border-radius:999px;background:var(--grad);transition:width .55s var(--ease)}
.ai-meter b{color:var(--teal);font-size:13px}
.dial-panel h3{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em}
.mode-desc{margin-top:12px;max-width:60ch;color:var(--dim);font-size:clamp(15px,1.7vw,18px);line-height:1.55}
.mode-best{margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--gold);
  padding:6px 12px;border-radius:999px;border:1px solid rgba(247,188,56,.26);background:rgba(247,188,56,.08)}
.mode-best::before{content:"BEST FOR";font-size:10px;letter-spacing:.1em;color:var(--mute);margin-right:2px}

/* ---- product preview (crafted mockup) ---- */
.preview{padding-block:clamp(46px,8vw,96px)}
.console{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--card),#0B0C12);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04)}
.console-top{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.console-top .tl i{width:10px;height:10px;border-radius:50%;background:var(--line-2);display:inline-block;margin-right:6px}
.console-top .pathb{margin-left:6px;color:var(--mute)}
.console-top .badge{margin-left:auto;color:var(--ok);border:1px solid rgba(61,190,107,.32);background:rgba(61,190,107,.1);padding:3px 9px;border-radius:999px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.console-body{display:grid;grid-template-columns:1.4fr 1fr;gap:0}
.console-main{padding:20px;border-right:1px solid var(--line)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.kpitile{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg-2)}
.kpitile b{font-size:26px;font-weight:820;letter-spacing:-.03em}
.kpitile.c b{color:var(--coral)}.kpitile.h b{color:var(--amber)}.kpitile.g b{color:var(--teal)}
.kpitile span{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.flist{display:flex;flex-direction:column;gap:8px}
.frow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.frow .sev{width:9px;height:9px;border-radius:50%;flex:none}
.frow .sev.crit{background:var(--coral);box-shadow:0 0 10px var(--coral)}
.frow .sev.high{background:var(--amber)}
.frow .ft{flex:1;min-width:0;font-size:14px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .vb{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;
  color:var(--blue);border:1px solid rgba(47,168,255,.32);background:rgba(47,168,255,.1)}
.frow .vb.proven{color:var(--coral);border-color:rgba(242,73,92,.34);background:rgba(242,73,92,.1)}
.console-side{padding:20px;display:flex;flex-direction:column;gap:14px}
.trophy{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg-2)}
.trophy h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--mono);font-size:12px;color:var(--fg);padding:5px 10px;border-radius:8px;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.chip b{color:var(--teal)}
.chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.chain i{color:var(--mute)}
.chain .node{padding:5px 9px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.chain .node.hit{color:var(--coral);border-color:rgba(242,73,92,.34)}
@media(max-width:760px){.console-body{grid-template-columns:1fr}.console-main{border-right:none;border-bottom:1px solid var(--line)}.kpis{grid-template-columns:repeat(3,1fr)}}
.section-head .sub.center{margin-inline:auto}

/* ---- product shots (real screenshots in a browser frame) ---- */
.shot{position:relative;margin-top:clamp(30px,6vw,64px)}
.shot.primary{margin-top:clamp(26px,4vw,48px)}
/* soft brand glow behind each frame */
.shot::before{content:"";position:absolute;inset:6% 10% 2%;z-index:-1;border-radius:40px;
  background:radial-gradient(58% 60% at 50% 28%,rgba(22,184,166,.24),rgba(47,168,255,.13) 46%,transparent 72%);
  filter:blur(55px);opacity:0;transition:opacity .8s var(--ease)}
.shot.in::before{opacity:1}
.browser{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--card);
  box-shadow:0 44px 130px -46px rgba(0,0,0,.85),0 0 0 1px rgba(22,184,166,.07);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);will-change:transform}
.shot.in .browser{transform:translateY(0)}
.shot .browser{transform:translateY(22px)}
.browser:hover{box-shadow:0 54px 150px -46px rgba(0,0,0,.9),0 0 0 1px rgba(22,184,166,.18)}
.browser .bar{display:flex;align-items:center;gap:12px;padding:11px 15px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.browser .tl{display:inline-flex;gap:7px;flex:none}
.browser .tl i{width:11px;height:11px;border-radius:50%;background:#37475a;display:block}
.browser .addr{font-family:var(--mono);font-size:12.5px;color:var(--mute);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser .livebadge{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--coral)}
.browser .livebadge i{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(242,73,92,.6);animation:ping 1.9s ease-out infinite}
.browser img{display:block;width:100%;height:auto}
/* the lead shot breathes gently once revealed */
.shot.primary.in .browser{animation:float 8s ease-in-out .8s infinite}
.shot figcaption{text-align:center;margin-top:16px;color:var(--dim);font-size:14.5px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ping{70%{box-shadow:0 0 0 7px rgba(242,73,92,0)}100%{box-shadow:0 0 0 0 rgba(242,73,92,0)}}
@media(prefers-reduced-motion:reduce){.shot .browser{transform:none}.shot.primary.in .browser{animation:none}.browser .livebadge i{animation:none}}

/* ---- composed showcase: 3D-tilted frame + layered proof card + callouts ---- */
.showcase{position:relative;margin-top:clamp(34px,6vw,66px)}
.stage{position:relative;max-width:900px;margin-inline:auto}
.showcase::before{content:"";position:absolute;inset:0 6% -8%;z-index:-1;border-radius:44px;
  background:radial-gradient(58% 58% at 52% 36%,rgba(22,184,166,.26),rgba(47,168,255,.14) 46%,transparent 72%);
  filter:blur(62px);opacity:0;transition:opacity .9s var(--ease)}
.showcase.in::before{opacity:1}
/* main framed dashboard, tilted in 3D */
.shot-main{position:relative;perspective:1700px}
.shot-main .browser{transform:rotateX(4deg) rotateY(-10deg) rotate(.5deg) translateY(20px);transform-origin:56% 46%;opacity:0;
  box-shadow:0 60px 140px -50px rgba(0,0,0,.9),0 0 0 1px rgba(22,184,166,.08);
  transition:transform 1s var(--ease),opacity .9s var(--ease)}
.showcase.in .shot-main .browser{transform:rotateX(2.5deg) rotateY(-7deg) rotate(.3deg) translateY(0);opacity:1}
.shot-main .browser:hover{transform:rotateX(1deg) rotateY(-2.5deg)}
/* floating proof card, layered in front */
.float-card{position:absolute;right:-2%;bottom:-8%;width:min(340px,62%);z-index:3;
  background:linear-gradient(180deg,var(--card),var(--bg-2));border:1px solid var(--line-2);border-radius:14px;padding:14px 15px;
  box-shadow:0 44px 100px -34px rgba(0,0,0,.88);transform:translateY(26px);opacity:0;
  transition:transform .9s var(--ease) .25s,opacity .9s var(--ease) .25s}
.showcase.in .float-card{transform:translateY(0);opacity:1}
.fc-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);margin-bottom:11px}
.fc-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(61,190,107,.16);flex:none}
.fc-row{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13px;border-top:1px solid var(--line)}
.fc-row:first-of-type{border-top:none}
.fc-row .sev{width:8px;height:8px;border-radius:50%;flex:none}
.fc-row .sev.crit{background:var(--coral);box-shadow:0 0 8px var(--coral)}.fc-row .sev.high{background:var(--amber)}
.fc-row .ft{flex:1;min-width:0;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-row .vb{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--coral);border:1px solid rgba(242,73,92,.34);border-radius:999px;padding:2px 7px;flex:none}
/* annotated callouts */
.callout{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg);
  background:rgba(30,46,62,.92);backdrop-filter:blur(8px);border:1px solid rgba(120,150,175,.28);border-radius:999px;padding:7px 13px;
  white-space:nowrap;box-shadow:0 16px 38px -14px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.25);opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.co-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(22,184,166,.2);flex:none}
.co-op{top:1%;right:-4%;transform:translateX(16px)}
.co-kpi{top:35%;left:-5%;transform:translateX(-16px)}
.co-ai{bottom:19%;left:-6%;transform:translateX(-16px)}
.showcase.in .callout{opacity:1;transform:translateX(0)}
.showcase.in .co-op{transition-delay:.55s}.showcase.in .co-kpi{transition-delay:.7s}.showcase.in .co-ai{transition-delay:.85s}
@media(max-width:1024px){.callout{display:none}}
@media(max-width:820px){
  .shot-main{perspective:none}
  .shot-main .browser,.showcase.in .shot-main .browser{transform:none;opacity:1}
  .float-card{position:static;width:auto;margin-top:14px;transform:none;opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .shot-main .browser,.showcase.in .shot-main .browser{transform:rotateY(-6deg);opacity:1}
  .float-card,.callout{opacity:1;transform:none;transition:none}
}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,6vw,72px);max-width:620px;margin-inline:auto;padding-block:clamp(40px,6vw,72px);text-align:center}
.stat b.num{display:block;font-size:clamp(34px,5vw,58px);font-weight:840;letter-spacing:-.04em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--mute)}
@media(max-width:620px){.stats{grid-template-columns:repeat(2,1fr);gap:28px 16px}}

/* ---- feature grid (sub-pages) ---- */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-block:clamp(24px,4vw,44px)}
.feat .card{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}
.feat .card h3{font-size:17px;font-weight:720;margin-bottom:7px}
.feat .card p{color:var(--dim);font-size:14.5px;line-height:1.5}
.feat .card .ic{width:24px;height:24px;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
@media(max-width:760px){.feat{grid-template-columns:1fr}}

/* page hero (sub-pages) */
.phero{padding-block:clamp(48px,8vw,96px);max-width:760px}
.phero h1{font-size:clamp(38px,6vw,66px)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-block:clamp(20px,4vw,40px)}
.plan{padding:28px 24px;border:1px solid var(--line);border-radius:18px;background:var(--bg-2);display:flex;flex-direction:column;gap:12px}
.plan.feature{border-color:rgba(22,184,166,.38);box-shadow:0 20px 60px -30px rgba(22,184,166,.4)}
.plan h3{font-size:20px;font-weight:760}
.plan .pr{font-family:var(--mono);color:var(--teal);font-size:14px}
.plan ul{display:flex;flex-direction:column;gap:9px;margin:6px 0 auto;color:var(--dim);font-size:14.5px}
.plan li{display:flex;gap:9px}.plan li::before{content:"→";color:var(--teal)}
@media(max-width:760px){.plans{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);padding-block:clamp(24px,4vw,44px);align-items:start}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.field input,.field textarea{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:var(--fg);font-size:15px}
.field input:focus,.field textarea:focus{border-color:var(--teal);outline:none}
.channels{display:flex;flex-direction:column;gap:12px}
.channel{display:flex;gap:12px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.channel .ic{width:22px;height:22px;fill:none;stroke:var(--teal);stroke-width:1.7}
.channel b{display:block}.channel span{color:var(--dim);font-size:14px}
@media(max-width:760px){.contact{grid-template-columns:1fr}}

/* ---- closer ---- */
.closer{text-align:center;padding-block:clamp(60px,10vw,128px)}
.closer h2{font-size:clamp(30px,5vw,58px);font-weight:820;line-height:1.02;letter-spacing:-.03em}
.closer .btn-lg{margin-top:32px}
.fine{margin-top:18px;font-family:var(--mono);font-size:12.5px;color:var(--mute)}

/* ---- footer ---- */
.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px;border-top:1px solid var(--line);color:var(--mute);font-size:13px}
.foot .mark path{fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linejoin:round}
.foot .fnav{display:flex;gap:18px}.foot .fnav a:hover{color:var(--fg)}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---- staggered child reveal: grids/cards cascade in on scroll ----
   Uses an ANIMATION (not a transition) so it never clashes with a card's own
   hover transition; `backwards` fill holds the hidden state through the
   per-child --sd delay, then reverts to the base state so hover still works. */
@keyframes nxRiseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.stagger > *{opacity:0}
.stagger.in > *{opacity:1;animation:nxRiseIn .6s var(--ease) var(--sd,0ms) backwards}

/* =====================================================================
   MID-FUNNEL SECTIONS: thesis · problem · flow · proof
   · comparison · personas · trust · faq · megafooter. Same tokens.
   ===================================================================== */

/* ---- thesis bar ---- */
.thesis{padding-block:clamp(30px,5vw,56px)}
.thesis .band{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,30px);flex-wrap:wrap;text-align:center;
  border:1px solid var(--line);border-radius:18px;padding:clamp(22px,4vw,34px) clamp(20px,4vw,40px);
  background:linear-gradient(100deg,rgba(22,184,166,.08),rgba(47,168,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.thesis .band b{font-size:clamp(22px,3.2vw,34px);font-weight:820;letter-spacing:-.03em;line-height:1.08}
.thesis .band .sep{width:1px;height:34px;background:var(--line-2);display:inline-block}
.thesis .band span{color:var(--dim);font-size:clamp(14px,1.6vw,17px);max-width:34ch}
@media(max-width:680px){.thesis .band .sep{display:none}}

/* ---- section intro (generic, centered) ---- */
.intro{max-width:720px;margin:0 auto clamp(28px,4vw,46px);text-align:center}
.intro h2{margin-top:16px;font-size:clamp(27px,4.2vw,46px);font-weight:820;line-height:1.05;letter-spacing:-.03em}
.intro .sub{margin-top:14px;color:var(--dim);font-size:clamp(15px,1.6vw,18px)}

/* ---- problem / why-now ---- */
.problem{padding-block:clamp(46px,8vw,90px)}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prob{position:relative;padding:26px 24px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}
.prob::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:2px;border-radius:2px;background:var(--coral);opacity:.7}
.prob .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
.prob h3{margin-top:10px;font-size:17.5px;font-weight:740;letter-spacing:-.01em}
.prob p{margin-top:8px;color:var(--dim);font-size:14.5px;line-height:1.55}
.prob .fix{margin-top:12px;display:flex;gap:8px;align-items:flex-start;color:var(--teal);font-size:13.5px;line-height:1.45}
.prob .fix::before{content:"→";color:var(--teal);font-weight:700;flex:none}
@media(max-width:760px){.prob-grid{grid-template-columns:1fr}}

/* ---- how it works (stages) ---- */
.pipe{padding-block:clamp(46px,8vw,90px)}
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}
.stages::before{content:"";position:absolute;left:6%;right:6%;top:29px;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--teal),var(--blue));opacity:.35}
.pstage{position:relative;z-index:1;text-align:center;padding:0 6px}
.pstage .no{width:58px;height:58px;margin:0 auto 16px;display:grid;place-items:center;border-radius:16px;
  font-family:var(--mono);font-weight:800;font-size:20px;color:#04241F;background:var(--grad);
  box-shadow:0 12px 30px -12px rgba(22,184,166,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.pstage h3{font-size:16px;font-weight:740;letter-spacing:-.01em}
.pstage p{margin-top:7px;color:var(--dim);font-size:13.5px;line-height:1.5}
.pstage .verb{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
@media(max-width:900px){.stages{grid-template-columns:repeat(2,1fr);gap:24px 16px}.stages::before{display:none}
  .pstage{text-align:left;display:grid;grid-template-columns:58px 1fr;gap:0 16px;align-items:start}
  .pstage .no{margin:0}.pstage .verb,.pstage h3,.pstage p{grid-column:2}}
@media(max-width:520px){.stages{grid-template-columns:1fr}}

/* ---- proof artifacts (shown, not claimed) ---- */
.artifacts{padding-block:clamp(20px,4vw,44px)}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(24px,4vw,40px)}
.artifact{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--card),#0B0C12);overflow:hidden;
  box-shadow:0 26px 70px -34px rgba(0,0,0,.8);display:flex;flex-direction:column}
.art-head{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);background:rgba(255,255,255,.02)}
.art-head .adot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);flex:none}
.art-body{padding:16px 16px 18px;flex:1}
.art-cap{padding:0 16px 16px;color:var(--dim);font-size:13px;line-height:1.5}
/* kill-chain mockup */
.kc{display:flex;flex-direction:column;gap:10px}
.kc-hop{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px}
.kc-hop .ip{color:var(--fg)}
.kc-hop .via{color:var(--mute);font-size:11px}
.kc-hop .pw{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--coral);border:1px solid rgba(242,73,92,.34);border-radius:999px;padding:2px 7px}
.kc-hop .pw.own{color:var(--ok);border-color:rgba(61,190,107,.34)}
.kc-arrow{margin-left:5px;color:var(--mute);font-family:var(--mono);font-size:12px}
.kc-node{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2)}
.kc-node .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--coral);box-shadow:0 0 8px var(--coral)}
.kc-node.seed .dot{background:var(--blue);box-shadow:0 0 8px var(--blue)}
/* terminal proof mockup */
.term{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--dim);white-space:pre-wrap;word-break:break-word}
.term .t{color:var(--teal)}.term .r{color:var(--coral);font-weight:700}.term .f{color:var(--fg)}.term .m{color:var(--mute)}.term .o{color:var(--ok)}
/* re-test verdict mockup */
.verdict{display:flex;flex-direction:column;gap:12px}
.vrow{display:flex;align-items:center;gap:10px}
.vrow .vl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);min-width:82px}
.vpill{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.vpill.still{color:var(--coral);border:1px solid rgba(242,73,92,.34);background:rgba(242,73,92,.1)}
.vpill.fixed{color:var(--ok);border:1px solid rgba(61,190,107,.34);background:rgba(61,190,107,.1)}
.vnote{border-top:1px solid var(--line);padding-top:12px;color:var(--dim);font-size:13px;line-height:1.55}
.vnote b{color:var(--fg)}
@media(max-width:860px){.art-grid{grid-template-columns:1fr}}

/* ---- comparison table ---- */
.compare{padding-block:clamp(46px,8vw,90px)}
.ctable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--bg-2)}
.ctable{width:100%;border-collapse:collapse;min-width:720px;font-size:14.5px}
.ctable th,.ctable td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.ctable thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600;white-space:nowrap}
.ctable tbody tr:last-child td{border-bottom:none}
.ctable td:first-child,.ctable th:first-child{color:var(--fg);font-weight:600;min-width:230px}
.ctable .colus{position:relative;background:rgba(22,184,166,.06)}
.ctable thead .colus{color:var(--teal);border-top:2px solid var(--teal);border-radius:12px 12px 0 0}
.ctable td.colus{text-align:center}.ctable td.cval{text-align:center}
.mk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-weight:800;font-size:13px}
.mk.yes{color:var(--ok);background:rgba(61,190,107,.14)}
.mk.no{color:var(--mute);background:rgba(255,255,255,.04)}
.mk.part{color:var(--gold);background:rgba(247,188,56,.14)}
.ctable td small{display:block;margin-top:3px;color:var(--mute);font-size:11.5px;font-family:var(--mono)}
.clegend{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:18px;font-size:12.5px;color:var(--mute)}
.clegend span{display:inline-flex;align-items:center;gap:7px}

/* ---- personas ---- */
.personas{padding-block:clamp(46px,8vw,90px)}
.persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.persona{padding:24px 22px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2);transition:.25s var(--ease)}
.persona:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--card)}
.persona .ic{width:24px;height:24px;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.persona h3{font-size:16.5px;font-weight:740;letter-spacing:-.01em}
.persona .role{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:2px}
.persona p{margin-top:11px;color:var(--dim);font-size:13.5px;line-height:1.55}
.persona .out{margin-top:12px;display:flex;gap:8px;align-items:flex-start;color:var(--teal);font-size:13px;line-height:1.45}
.persona .out::before{content:"✓";color:var(--teal);font-weight:700;flex:none}
@media(max-width:920px){.persona-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.persona-grid{grid-template-columns:1fr}}

/* ---- 4-up stats ---- */
.stats.four{grid-template-columns:repeat(4,1fr);max-width:960px}
.stats.four .stat b.num{font-size:clamp(28px,4vw,46px)}
@media(max-width:720px){.stats.four{grid-template-columns:repeat(2,1fr);gap:32px 16px}}

/* ---- trust band ---- */
.trustband{padding-block:clamp(40px,6vw,76px)}
.tb-inner{border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 140% at 12% 0,rgba(22,184,166,.1),transparent 60%),var(--bg-2)}
.tb-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,44px);padding:clamp(26px,4vw,44px)}
.tb-copy h2{font-size:clamp(24px,3.4vw,38px);font-weight:820;letter-spacing:-.03em;line-height:1.06}
.tb-copy p{margin-top:14px;color:var(--dim);font-size:clamp(15px,1.6vw,17px);line-height:1.55;max-width:46ch}
.tb-copy .btn{margin-top:22px}
.tb-list{display:flex;flex-direction:column;gap:12px;align-self:center}
.tb-item{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:rgba(14,24,34,.5)}
.tb-item .ic{width:22px;height:22px;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:1px}
.tb-item b{display:block;font-size:14.5px;font-weight:680}
.tb-item span{color:var(--dim);font-size:13px;line-height:1.45}
@media(max-width:820px){.tb-grid{grid-template-columns:1fr}}

/* ---- diagram (trust / architecture) ---- */
.diagram{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg-2)}
.dg-boundary{margin:0;padding:clamp(20px,3vw,32px);position:relative}
.dg-label{position:absolute;top:12px;right:16px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);
  border:1px dashed rgba(22,184,166,.4);border-radius:999px;padding:4px 11px;background:rgba(22,184,166,.05)}
.dg-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.dg-node{flex:1;min-width:150px;max-width:230px;text-align:center;padding:18px 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--card)}
.dg-node .ic{width:26px;height:26px;margin:0 auto 10px;fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dg-node b{display:block;font-size:15px;font-weight:720}
.dg-node span{color:var(--dim);font-size:12.5px;line-height:1.45;display:block;margin-top:5px}
.dg-egress{padding:16px;text-align:center;border-top:1px dashed var(--line-2);color:var(--mute);font-family:var(--mono);font-size:12.5px;background:rgba(242,73,92,.04)}
.dg-egress b{color:var(--coral)}

/* ---- FAQ (native details) ---- */
.faq{padding-block:clamp(46px,8vw,90px)}
.qa{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:10px}
.qa details{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);overflow:hidden;transition:border-color .2s}
.qa details[open]{border-color:var(--line-2)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 20px;font-size:16px;font-weight:640;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary .plus{margin-left:auto;flex:none;width:22px;height:22px;position:relative;transition:transform .25s var(--ease)}
.qa summary .plus::before,.qa summary .plus::after{content:"";position:absolute;background:var(--teal);border-radius:2px}
.qa summary .plus::before{left:0;right:0;top:10px;height:2px}
.qa summary .plus::after{top:0;bottom:0;left:10px;width:2px;transition:opacity .25s}
.qa details[open] summary .plus{transform:rotate(90deg)}
.qa details[open] summary .plus::after{opacity:0}
.qa .ans{padding:0 20px 20px;color:var(--dim);font-size:15px;line-height:1.6}
.qa .ans a{color:var(--teal)}

/* ---- CTA sub-line under closer button ---- */
.closer .sub2{margin-top:18px;color:var(--dim);font-size:15px}

/* ---- richer footer ---- */
.megafoot{border-top:1px solid var(--line);margin-top:clamp(30px,6vw,60px)}
.mf-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,4vw,48px);padding-block:clamp(40px,6vw,64px)}
.mf-brand .brandmark{height:22px;width:auto}
.mf-brand p{margin-top:14px;color:var(--dim);font-size:14px;line-height:1.55;max-width:32ch}
.mf-brand .trust{margin-top:16px}
.mf-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.mf-col a{display:block;color:var(--dim);font-size:14.5px;padding:5px 0;transition:color .2s}
.mf-col a:hover{color:var(--fg)}
.mf-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-block:20px;border-top:1px solid var(--line);color:var(--mute);font-size:13px}
.mf-bottom .lg{font-family:var(--mono);font-size:12px;color:var(--coral);border:1px solid rgba(242,73,92,.28);border-radius:999px;padding:4px 11px}
@media(max-width:760px){.mf-grid{grid-template-columns:1fr 1fr}.mf-brand{grid-column:1/-1}}
@media(max-width:460px){.mf-grid{grid-template-columns:1fr}}

/* ---- responsive ---- */
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:36px}.pills{grid-template-columns:1fr}.feat{grid-template-columns:1fr}.lead{max-width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.stagger > *{opacity:1;transform:none}}

/* =====================================================================
   MOTION LAYER: ambient recon-sweep + glow breathe, hero entrance
   choreography, pipeline chain-trace, scroll rail, button sheen, card
   spotlight, dial crossfade + odometer settle. GPU-only (transform/opacity/
   filter/stroke). Degrades under prefers-reduced-motion (guard at the end).
   ===================================================================== */

/* ambient: a soft scan-line sweeps down through the grid, then long dark rest */
.bg::after{content:"";position:absolute;left:0;right:0;top:0;height:42vh;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(22,184,166,.045) 40%,rgba(22,184,166,.10) 50%,rgba(47,168,255,.045) 60%,transparent 100%);
  transform:translate3d(0,-42vh,0);will-change:transform,opacity;animation:nxSweep 15s var(--ease) infinite}
@keyframes nxSweep{0%{transform:translate3d(0,-42vh,0);opacity:0}10%{opacity:1}42%{opacity:1}60%{transform:translate3d(0,72vh,0);opacity:0}100%{transform:translate3d(0,72vh,0);opacity:0}}

/* ambient: the existing glow idles/breathes */
.bg .glow{animation:nxBreathe 12s ease-in-out infinite}
@keyframes nxBreathe{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}

/* scroll-progress rail (CSS scroll-timeline where supported; JS fallback in app.js) */
.scrollprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;transform:scaleX(0);transform-origin:0 50%;
  background:var(--grad);box-shadow:0 0 10px -1px rgba(22,184,166,.5);will-change:transform}
@supports (animation-timeline: scroll()){.scrollprog{animation:nxProg linear both;animation-timeline:scroll(root block)}}
@keyframes nxProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* hero: entrance choreography. TRANSITION-based (not keyframes) so the .enter
   END-STATE is a real computed style: content is never stuck hidden if the tab
   isn't painting animation frames. JS splits the H1 + toggles .anim/.enter. */
.hero-copy h1 .hl{display:block;overflow:hidden;padding:.09em 0;margin:-.09em 0}
.hero-copy h1 .hl-in{display:block}
.hero.anim h1 .hl-in{transform:translateY(116%);transition:transform .85s var(--ease);transition-delay:calc(var(--i,0)*130ms + 160ms)}
.hero.enter h1 .hl-in{transform:none}
.hero.anim .eyebrow,.hero.anim .lead,.hero.anim .cta,.hero.anim .trust li{opacity:0;transform:translateY(13px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hero.anim .eyebrow{transition-delay:.05s}
.hero.anim .lead{transition-delay:.42s}
.hero.anim .cta{transition-delay:.56s}
.hero.anim .trust li{transition-delay:calc(.74s + var(--ci,0)*90ms)}
.hero .trust li:nth-child(1){--ci:0}.hero .trust li:nth-child(2){--ci:1}.hero .trust li:nth-child(3){--ci:2}
.hero.enter .eyebrow,.hero.enter .lead,.hero.enter .cta,.hero.enter .trust li{opacity:1;transform:none}

/* micro: one-pass diagonal sheen across primary buttons on hover */
.btn:not(.btn-ghost){position:relative;overflow:hidden;isolation:isolate}
.btn:not(.btn-ghost)::before{content:"";position:absolute;top:-40%;bottom:-40%;left:-60%;width:38%;z-index:1;pointer-events:none;opacity:0;
  transform:translateX(0) skewX(-16deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent)}
.btn:not(.btn-ghost):hover::before{animation:nxSheen .7s var(--ease)}
@keyframes nxSheen{0%{opacity:0;transform:translateX(0) skewX(-16deg)}15%{opacity:1}100%{opacity:0;transform:translateX(430%) skewX(-16deg)}}

/* micro: pointer-tracked border spotlight on cards + framed screenshots */
.pill,.prob,.persona,.artifact,.plan,.feat .card,.shot .browser,.shot-main .browser{position:relative}
.pill::after,.prob::after,.persona::after,.artifact::after,.plan::after,.feat .card::after,.shot .browser::after,.shot-main .browser::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;opacity:0;transition:opacity .3s var(--ease);
  background:radial-gradient(300px circle at var(--mx,-200px) var(--my,-200px),rgba(22,184,166,.85),rgba(47,168,255,.34) 42%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.pill:hover::after,.prob:hover::after,.persona:hover::after,.artifact:hover::after,.plan:hover::after,.feat .card:hover::after,.shot .browser:hover::after,.shot-main .browser:hover::after{opacity:1}

/* ============ INTERACTION LAYER (cursor-free): scan-line reveals, directional sweep, tilt, table cascade, stage scrub ============ */
/* 1. scan-line headline reveal: headings resolve left-to-right on scroll-in */
.reveal .intro h2,.reveal .section-head h2{clip-path:inset(0 100% 0 0);transition:clip-path .85s var(--ease)}
.reveal.in .intro h2,.reveal.in .section-head h2{clip-path:inset(0 0 0 0)}
/* 2. coverage grid: direction-aware recon sweep (origin set by JS via --sox/--soy) */
.cov::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(120deg,rgba(22,184,166,.18),rgba(47,168,255,.10));
  transform:scale(0);transform-origin:var(--sox,50%) var(--soy,50%);transition:transform .42s var(--ease)}
.cov:hover::after{transform:scale(1)}
.cov::before{z-index:2}
.cov h4,.cov p{position:relative;z-index:1}
/* 3. proof artifacts: pointer 3D tilt (transform set by JS; base perspective + smoothing) */
.art-grid{perspective:1600px}
.artifact{transition:transform .5s var(--ease),box-shadow .3s var(--ease)}
/* 4. comparison table: self-assembling cascade + checkmark pop (keyed on section .in; --sd set by JS) */
.compare.reveal .ctable tbody tr{opacity:0}
.compare.reveal.in .ctable tbody tr{animation:nxRowIn .5s var(--ease) var(--sd,0ms) both}
.compare.reveal.in .ctable tbody .mk{animation:nxPop .42s var(--ease) var(--sd,0ms) both}
@keyframes nxRowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes nxPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.18)}100%{transform:scale(1)}}
/* 5. stage scroll-scrub: JS drives --p (0..1); line + spark + stage ignition follow scroll */
.stages.scrub .ct-line{animation:none;stroke-dashoffset:calc(1 - var(--p,0))}
.stages.scrub .chain-spark{animation:none;opacity:1;transform:translateX(calc(var(--p,0) * 100%))}
.stages.autoplay .ct-line{transition:stroke-dashoffset .7s var(--ease)}
.stages.autoplay .chain-spark{transition:transform .7s var(--ease)}
.pstage{transition:transform .3s var(--ease)}
.pstage .no{transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.pstage.lit{transform:translateY(-4px)}
.pstage.lit .no{color:#04241F;background:var(--grad);border-color:transparent;box-shadow:0 8px 22px -8px rgba(22,184,166,.6)}
@media (prefers-reduced-motion:reduce){
  .reveal .intro h2,.reveal .section-head h2{clip-path:none!important}
  .cov::after{display:none}
  .artifact{transform:none!important}
  .compare .ctable tbody tr{opacity:1!important;animation:none!important}
  .compare .ctable tbody .mk{animation:none!important}
  .stages.scrub .ct-line{stroke-dashoffset:0}.stages.scrub .chain-spark{display:none}.pstage.lit{transform:none}
}
@media (max-width:900px){.stages.scrub .ct-line{stroke-dashoffset:0}}
/* signature: the stage chain draws itself + a spark rides the edge (keyed on .stages.in) */
.chain-trace{position:absolute;left:6%;top:28px;width:88%;height:4px;z-index:0;overflow:visible;pointer-events:none}
.ct-line{fill:none;stroke:url(#nxctg);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 5px rgba(22,184,166,.55))}
.chain-spark{position:absolute;left:6%;top:24px;width:88%;height:11px;z-index:1;pointer-events:none;opacity:0}
.chain-spark::before{content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle,#EAF1F7 0%,rgba(47,168,255,.95) 45%,transparent 72%);box-shadow:0 0 16px 4px rgba(47,168,255,.6)}
@media(min-width:901px){
  .stages.in .ct-line{animation:nxCtDraw 1.5s var(--ease) .5s forwards}
  .stages.in .chain-spark{animation:nxCtSpark 1.5s var(--ease) .5s forwards}
}
@keyframes nxCtDraw{to{stroke-dashoffset:0}}
@keyframes nxCtSpark{0%{opacity:0;transform:translateX(0)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
@media(max-width:900px){.chain-trace,.chain-spark{display:none}}

/* micro: dial mode-panel crossfade + odometer settle */
@keyframes nxPanelSwap{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.dial-panel.swap #mode-name{animation:nxPanelSwap .34s var(--ease) both}
.dial-panel.swap #mode-desc{animation:nxPanelSwap .34s var(--ease) .05s both}
.dial-panel.swap #mode-best{animation:nxPanelSwap .34s var(--ease) .10s both}
.num{font-variant-numeric:tabular-nums}
@keyframes nxSettle{0%{transform:scale(1)}40%{transform:scale(1.045)}100%{transform:scale(1)}}
.num.landed{display:inline-block;animation:nxSettle .5s var(--ease)}

/* motion layer: reduced-motion guards */
@media(prefers-reduced-motion:reduce){
  .bg::after{display:none}.bg .glow{animation:none}.scrollprog{display:none}
  .hero .eyebrow,.hero .lead,.hero .cta,.hero .trust li{opacity:1;transform:none;animation:none}
  .btn:not(.btn-ghost)::before{display:none}
  .ct-line{stroke-dashoffset:0}.chain-spark{display:none}
  .num.landed{animation:none}
}

/* =====================================================================
   LIVE LAYER (added). The page reacts: an ambient glow trails the
   cursor, the backdrop drifts on scroll, primary CTAs pull toward the
   pointer, and the hero console tilts to the cursor. Additive only, no
   colour or layout change. GPU transforms, cursor always visible,
   disabled under reduced-motion / touch (guards below + in app.js).
   ===================================================================== */
.aura{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:-1;pointer-events:none;
  border-radius:50%;mix-blend-mode:screen;filter:blur(24px);opacity:0;transition:opacity .5s var(--ease);will-change:transform;
  background:radial-gradient(circle,rgba(22,184,166,.15),rgba(47,168,255,.07) 44%,transparent 70%)}
.aura.on{opacity:1}
.bg{will-change:transform}
@media (hover:none),(prefers-reduced-motion:reduce){.aura{display:none!important}}