/* Verbrisk — site styles. Tokens from the Verbrisk design system. */
:root{
  --electric:#0A62FF; --teal:#06C3D0; --mint:#0CF5B9; --navy:#0B1B2B; --mist:#F3F6F8; --white:#FFFFFF;
  --navy-2:#12263A; --navy-3:#0E2133; --line-d:#1E3348; --ink-d:#F3F6F8; --muted-d:#9AABBA;
  --line:#DCE3E8; --line-strong:#77848F; --ink:#0B1B2B; --muted:#4A5866;
  --obeyed-fg:#0B7A5F; --obeyed-bg:#E2FAF3; --review-fg:#8A5300; --review-bg:#FFF3D6; --blocked-fg:#C42B1C; --blocked-bg:#FDECEA;
  --obeyed-fg-d:#3FE0B0; --obeyed-bg-d:#0F3A33; --review-fg-d:#FFC861; --review-bg-d:#3A2C10; --blocked-fg-d:#FF8A80; --blocked-bg-d:#3A1A1C;
  --grad:linear-gradient(225deg,#0CF5B9 0%,#06C3D0 48%,#0A62FF 100%);
  --font-display:"Syne","Helvetica Neue",Arial,sans-serif;
  --font-sans:"Geist","Inter",system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:6px; --r-md:12px; --r-lg:18px; --pill:999px;
  --wrap:1240px; --gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--mint);color:var(--navy)}
:focus-visible{outline:2px solid var(--electric);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--mint)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type */
.display-xl{font:700 clamp(44px,6.2vw,92px)/.95 var(--font-display);letter-spacing:-.03em;margin:0}
.display-l{font:700 clamp(36px,5vw,68px)/1 var(--font-display);letter-spacing:-.025em;margin:0}
.h1{font:700 clamp(30px,3.4vw,46px)/1.08 var(--font-display);letter-spacing:-.02em;margin:0}
.h2{font:700 clamp(22px,2vw,28px)/1.2 var(--font-display);letter-spacing:-.01em;margin:0}
.h3{font:700 20px/1.3 var(--font-display);margin:0}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--muted);max-width:62ch;margin:0}
.dark .lead{color:var(--muted-d)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.dark .eyebrow{color:var(--muted-d)}
.mono{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.accent{color:var(--electric)} .dark .accent{color:var(--mint)}
.muted{color:var(--muted)} .dark .muted{color:var(--muted-d)}
.eq{font-family:var(--font-mono);font-weight:500;letter-spacing:.01em}
.eq i{font-style:italic;font-family:"Times New Roman",Georgia,serif;font-weight:400;font-size:1.12em}

/* ---------- surfaces */
.dark{background:var(--navy);color:var(--ink-d)}
.mist{background:var(--mist)}
section{position:relative}
.sec{padding:clamp(88px,12vw,168px) 0}
.sec-tight{padding:clamp(64px,8vw,112px) 0}

/* ---------- buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:var(--pill);border:1px solid transparent;font:500 15px/1 var(--font-sans);white-space:nowrap;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);overflow:hidden;isolation:isolate}
.btn svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--electric);color:var(--white)}
.btn-primary::after{content:"";position:absolute;inset:0;background:var(--navy);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1;border-radius:inherit}
.btn-primary:hover::after{transform:none}
.dark .btn-primary{background:var(--mint);color:var(--navy)}
.dark .btn-primary::after{background:var(--white)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.dark .btn-ghost{border-color:#6B7E8F;color:var(--ink-d)}
.dark .btn-ghost:hover{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--electric)}
.dark .link-arrow{color:var(--mint)}
.link-arrow svg{width:15px;height:15px;transition:transform .35s var(--ease)} .link-arrow:hover svg{transform:translateX(4px)}

/* ---------- verdict pills */
.vb-verdict{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:var(--pill);font:500 13px/1 var(--font-sans);white-space:nowrap}
.vb-verdict::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.v-obeyed{background:var(--obeyed-bg);color:var(--obeyed-fg)} .v-review{background:var(--review-bg);color:var(--review-fg)} .v-blocked{background:var(--blocked-bg);color:var(--blocked-fg)}
.dark .v-obeyed{background:var(--obeyed-bg-d);color:var(--obeyed-fg-d)} .dark .v-review{background:var(--review-bg-d);color:var(--review-fg-d)} .dark .v-blocked{background:var(--blocked-bg-d);color:var(--blocked-fg-d)}

/* ---------- header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;transition:transform .5s var(--ease),background-color .4s,border-color .4s,color .4s;border-bottom:1px solid transparent}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:76px}
.hdr .logo{display:flex;align-items:center;height:30px}
.hdr .logo img{height:28px;width:auto}
.hdr .logo .on-light{display:none}
.hdr nav{display:flex;gap:4px;margin-left:auto}
.hdr nav a{position:relative;padding:8px 14px;font-size:14.5px;font-weight:500;border-radius:var(--pill);color:inherit;opacity:.82;transition:opacity .2s,background-color .2s}
.hdr nav a:hover,.hdr nav a.on{opacity:1}
.hdr nav a.on::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--mint)}
.hdr .cta{margin-left:10px}
.hdr{color:var(--ink-d)}
.hdr.solid{background:rgba(11,27,43,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:rgba(255,255,255,.06)}
.hdr.light{color:var(--ink)} .hdr.light .logo .on-dark{display:none} .hdr.light .logo .on-light{display:block}
.hdr.light.solid{background:rgba(255,255,255,.86);border-bottom-color:var(--line)}
.hdr.light nav a.on::after{background:var(--electric)}
.hdr.hide{transform:translateY(-100%)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:transparent;align-items:center;justify-content:center}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
.mnav{position:fixed;inset:0;z-index:49;background:var(--navy);color:var(--ink-d);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);clip-path:circle(0 at calc(100% - 44px) 38px);transition:clip-path .7s var(--ease)}
.mnav.open{clip-path:circle(150% at calc(100% - 44px) 38px)}
.mnav a{font:700 clamp(34px,9vw,56px)/1.25 var(--font-display);letter-spacing:-.02em}
@media(max-width:980px){.hdr nav,.hdr .cta{display:none}.burger{display:inline-flex}}

/* ---------- loader and page transition: frosted white glass with the lockup */
.curtain{position:fixed;inset:0;z-index:100;pointer-events:none}
.curtain .cbg{position:absolute;inset:0;background:rgba(243,246,248,.78);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2)}
.curtain .cwrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(260px,58vw)}
.curtain .cl{display:block;width:100%;height:auto;will-change:transform}
.curtain .cd{position:absolute;left:21.95%;top:89.49%;width:2.574%;aspect-ratio:1;border-radius:50%;background:#0A62FF;transform:translate(-50%,-50%);will-change:transform}
.curtain.gone{opacity:0;transition:opacity .6s var(--ease)}
.curtain.enter .cbg{opacity:0;transition:opacity .5s var(--ease)}
.curtain.enter.go .cbg{opacity:1}

/* ---------- hero (pinned particle stage) */
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--navy);color:var(--ink-d)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage .grain{position:absolute;inset:0;pointer-events:none;background:radial-gradient(1200px 700px at 70% 30%,rgba(10,98,255,.10),transparent 60%),radial-gradient(900px 600px at 10% 90%,rgba(12,245,185,.06),transparent 60%)}
.stage .copy{position:absolute;left:0;right:0;bottom:clamp(40px,9vh,96px);pointer-events:none}
.stage .copy .panel{position:absolute;left:0;bottom:0;width:min(640px,100%);opacity:0;transform:translateY(24px)}
.stage .copy .panel.first{opacity:1;transform:none}
.stage .copy .panel h1,.stage .copy .panel h2{margin:0 0 18px}
.stage .copy .panel p{margin:0;color:var(--muted-d);font-size:clamp(16px,1.3vw,19px);max-width:52ch}
.stage .copy .panel .acts{display:flex;gap:12px;margin-top:28px;pointer-events:auto;flex-wrap:wrap}
.stage .meta{position:absolute;top:110px;right:var(--gut);text-align:right;font:500 11px/1.8 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);pointer-events:none}
.stage .meta b{display:block;color:var(--ink-d);font-weight:500;letter-spacing:.02em;font-size:13px;text-transform:none}
.stage .rail{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;pointer-events:none}
.stage .rail i{width:6px;height:6px;border-radius:50%;background:rgba(243,246,248,.25);transition:background-color .3s,transform .3s}
.stage .rail i.on{background:var(--mint);transform:scale(1.4)}
.scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:500 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted-d)}
.scrollcue span{width:1px;height:40px;background:linear-gradient(var(--mint),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.subhero{min-height:86vh;display:flex;align-items:flex-end;padding-bottom:clamp(56px,10vh,110px)}
.subhero .copy{position:relative;z-index:2;max-width:820px}
.subhero h1{margin:0 0 22px}

/* ---------- reveal helpers (JS adds .in) */
.rv{opacity:0;transform:translateY(32px)}
.rv-line{overflow:hidden}
.split-line{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}

/* ---------- section heads */
.shead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.shead .lead{justify-self:end}
@media(max-width:860px){.shead{grid-template-columns:1fr}.shead .lead{justify-self:start}}

/* ---------- statement */
.statement{font:700 clamp(30px,4.6vw,64px)/1.08 var(--font-display);letter-spacing:-.025em;margin:0;max-width:20ch}
.statement .word{display:inline-block;opacity:.16}

/* ---------- attack cards */
.attacks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.atk{position:relative;padding:28px 24px 26px;border-radius:var(--r-lg);background:var(--mist);overflow:hidden;min-height:340px;display:flex;flex-direction:column}
.dark .atk{background:var(--navy-2)}
.atk .num{font:500 12px/1 var(--font-mono);color:var(--muted);letter-spacing:.08em}
.dark .atk .num{color:var(--muted-d)}
.atk .viz{height:110px;margin:22px 0 auto}
.atk h3{margin:22px 0 8px}
.atk p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.dark .atk p{color:var(--muted-d)}
.atk .vb-verdict{margin-top:18px;align-self:flex-start}
@media(max-width:1080px){.attacks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.attacks{grid-template-columns:1fr}}

/* ---------- horizontal checks */
.hscroll{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hscroll .track{display:flex;gap:24px;padding:0 var(--gut);will-change:transform}
.hscroll .intro{flex:0 0 min(520px,80vw);display:flex;flex-direction:column;justify-content:center;padding-right:40px}
.check{flex:0 0 min(560px,84vw);height:min(560px,70vh);border-radius:var(--r-lg);background:var(--navy-2);padding:32px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.check .tag{display:flex;align-items:center;justify-content:space-between;font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d)}
.check .tag b{color:var(--mint);font-weight:500}
.check .viz{flex:1;margin:22px -8px;min-height:0;position:relative}
.check .viz canvas,.check .viz svg{width:100%;height:100%}
.check .formula{font:500 clamp(16px,1.6vw,21px)/1.4 var(--font-mono);color:var(--ink-d);padding:14px 16px;border-radius:var(--r-md);background:rgba(243,246,248,.04);border:1px solid var(--line-d)}
.check h3{margin:18px 0 6px;font-size:24px}
.check p{margin:0;color:var(--muted-d);font-size:15px}
.hprog{position:absolute;left:var(--gut);right:var(--gut);bottom:40px;height:1px;background:var(--line-d)}
.hprog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--grad)}

/* ---------- exploded product */
.xplode{position:relative;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center}
.xplode .txt .step{position:absolute;opacity:0;max-width:420px}
.xplode .txt{position:relative;height:280px}
.xplode .txt .step:first-child{opacity:1}
.stack{position:relative;height:min(700px,86vh)}
.layer{position:absolute;left:50%;top:50%;width:min(520px,92%);transform:translate(-50%,-50%);border-radius:var(--r-lg);background:var(--white);border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,27,43,.06),0 8px 24px rgba(11,27,43,.06);padding:18px 20px}
.layer .lh{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.layer .lbl{position:absolute;right:calc(100% + 24px);top:50%;transform:translateY(-50%);white-space:nowrap;font:500 12px/1 var(--font-mono);color:var(--muted);opacity:0;display:flex;align-items:center;gap:10px}
.layer .lbl::after{content:"";width:28px;height:1px;background:var(--line-strong)}
.lrow{display:flex;align-items:center;gap:12px;margin-top:12px}
.lrow .nm{flex:1;font-size:14px;font-weight:500}
.lrow .bar{flex:0 0 120px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.lrow .bar i{display:block;height:100%;border-radius:3px}
.lrow .sc{width:42px;text-align:right;font:500 13px var(--font-mono)}
@media(max-width:980px){.xplode{grid-template-columns:1fr;height:auto;padding:80px 0}.xplode .txt{height:auto}.xplode .txt .step{position:relative;opacity:1;margin-bottom:24px}.stack{height:640px}.layer .lbl{display:none}}

/* ---------- numbers */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.dark .nums{border-color:var(--line-d)}
.numc{padding:36px 28px 0 0;border-right:1px solid var(--line);margin-right:28px}
.dark .numc{border-color:var(--line-d)}
.numc:last-child{border-right:0;margin-right:0}
.numc .v{font:700 clamp(48px,6vw,84px)/1 var(--font-display);letter-spacing:-.04em}
.numc .v small{font-size:.42em;margin-left:4px;letter-spacing:0}
.numc p{margin:14px 0 6px;font-weight:500}
.numc .src{font:500 12px/1.5 var(--font-mono);color:var(--muted)}
.dark .numc .src{color:var(--muted-d)}
@media(max-width:900px){.nums{grid-template-columns:1fr 1fr}.numc{border-right:0;margin-right:0;padding-right:16px}}
@media(max-width:520px){.nums{grid-template-columns:1fr}}

/* ---------- code */
.codewin{border-radius:var(--r-lg);background:var(--navy);color:var(--ink-d);overflow:hidden;border:1px solid var(--line-d)}
.codewin .bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line-d)}
.codewin .bar i{width:10px;height:10px;border-radius:50%;background:#1E3348}
.codewin .bar span{margin-left:10px;font:500 12px var(--font-mono);color:var(--muted-d)}
.codewin .tabs{margin-left:auto;display:flex;gap:4px}
.codewin .tabs button{height:28px;padding:0 12px;border-radius:var(--pill);border:0;background:transparent;color:var(--muted-d);font:500 12px var(--font-mono)}
.codewin .tabs button.on{background:var(--navy-2);color:var(--ink-d)}
.codewin pre{margin:0;padding:22px 24px;font:500 13.5px/1.75 var(--font-mono);overflow:auto;min-height:320px;white-space:pre}
.tk-k{color:#5B95FF} .tk-s{color:var(--mint)} .tk-n{color:#FFC861} .tk-c{color:#6B7E8F} .tk-p{color:var(--teal)}
.cursor{display:inline-block;width:8px;height:1.1em;vertical-align:-2px;background:var(--mint);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- grids & cards */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:center}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}}
.card{position:relative;border-radius:var(--r-lg);background:var(--mist);padding:28px;overflow:hidden;transition:transform .5s var(--ease)}
.dark .card{background:var(--navy-2)}
.card:hover{transform:translateY(-4px)}
.card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--white);color:var(--electric);margin-bottom:22px}
.dark .card .ic{background:rgba(12,245,185,.08);color:var(--mint)}
.card .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card p{margin:10px 0 0;color:var(--muted);font-size:15px}
.dark .card p{color:var(--muted-d)}

/* use-case rows */
.uc{border-top:1px solid var(--line)}
.dark .uc{border-color:var(--line-d)}
.ucr{display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1fr) 40px;gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);position:relative;cursor:pointer}
.dark .ucr{border-color:var(--line-d)}
.ucr .n{font:500 12px var(--font-mono);color:var(--muted)}
.ucr h3{font:700 clamp(22px,2.4vw,34px)/1.1 var(--font-display);letter-spacing:-.02em;margin:0;transition:transform .5s var(--ease)}
.ucr p{margin:0;color:var(--muted);font-size:15px}
.dark .ucr p,.dark .ucr .n{color:var(--muted-d)}
.ucr .arr{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;transition:background-color .3s,transform .5s var(--ease)}
.ucr .arr svg{width:16px;height:16px}
.ucr:hover h3{transform:translateX(10px)} .ucr:hover .arr{background:var(--electric);border-color:var(--electric);color:#fff;transform:rotate(-45deg)}
.dark .ucr:hover .arr{background:var(--mint);border-color:var(--mint);color:var(--navy)}
@media(max-width:760px){.ucr{grid-template-columns:40px 1fr;}.ucr p{grid-column:2}.ucr .arr{display:none}}

/* marquee */
.marquee{overflow:hidden;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);padding:22px 0;white-space:nowrap}
.marquee .mt{display:inline-flex;gap:56px;animation:mq 42s linear infinite;padding-right:56px}
.marquee span{font:500 14px var(--font-mono);color:var(--muted-d);display:inline-flex;align-items:center;gap:56px}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
@keyframes mq{to{transform:translateX(-50%)}}

/* CTA band */
.ctab{position:relative;overflow:hidden;border-radius:28px;padding:clamp(48px,7vw,96px);background:var(--navy);color:var(--ink-d)}
.ctab canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.ctab .in{position:relative;z-index:1;max-width:640px}
.ctab h2{margin:0 0 18px}
.ctab .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* footer */
.ftr{background:var(--navy);color:var(--ink-d);padding:96px 0 40px}
.ftr .top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px}
.ftr .top img{height:30px;width:auto;margin-bottom:22px}
.ftr .top p{color:var(--muted-d);font-size:14.5px;max-width:34ch;margin:0}
.ftr h4{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);margin:6px 0 18px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr ul a{font-size:14.5px;opacity:.86;transition:opacity .2s} .ftr ul a:hover{opacity:1;color:var(--mint)}
.ftr .bot{margin-top:72px;padding-top:28px;border-top:1px solid var(--line-d);display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;font:500 12px/1.6 var(--font-mono);color:var(--muted-d)}
.ftr .big{font:700 clamp(48px,9vw,148px)/.92 var(--font-display);letter-spacing:-.04em;margin:72px 0 0;color:transparent;-webkit-text-stroke:1px rgba(243,246,248,.12)}
@media(max-width:900px){.ftr .top{grid-template-columns:1fr 1fr}.ftr .top>div:first-child{grid-column:1/-1}}

/* product shell (console mock) */
.shot{position:relative;border-radius:22px;background:var(--navy);border:1px solid var(--line-d);overflow:hidden;box-shadow:0 40px 120px -40px rgba(11,27,43,.55)}
.shot .chrome{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-bottom:1px solid var(--line-d);background:#0A1724}
.shot .chrome i{width:10px;height:10px;border-radius:50%;background:#1E3348}
.shot .chrome span{margin-left:14px;font:500 12px var(--font-mono);color:var(--muted-d)}
.app{display:grid;grid-template-columns:64px minmax(0,1fr);min-height:520px;color:var(--ink-d)}
.app .rl{border-right:1px solid var(--line-d);display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 0}
.app .rl img{width:30px;margin-bottom:10px}
.app .rl i{width:36px;height:36px;border-radius:10px;background:transparent;border:1px solid transparent;display:block}
.app .rl i.on{background:rgba(243,246,248,.06);border-color:var(--line-d)}
.app .rl i::before{content:"";display:block;width:14px;height:2px;border-radius:2px;background:var(--muted-d);margin:17px auto 0;opacity:.6}
.app .main{padding:22px;display:grid;gap:14px;align-content:start;min-width:0}
.app .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.app .top h4{font:700 22px/1 var(--font-display);margin:0;letter-spacing:-.01em}
.tile{border-radius:14px;background:var(--navy-2);border:1px solid var(--line-d);padding:16px;min-width:0}
.tile .k{font:500 10.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d)}
.tile .v{font:500 30px/1 var(--font-mono);margin-top:14px;letter-spacing:-.02em}
.tile .s{font:500 11.5px var(--font-mono);color:var(--muted-d);margin-top:8px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bento{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}
@media(max-width:760px){.tiles{grid-template-columns:1fr 1fr}.bento{grid-template-columns:1fr}.app{grid-template-columns:1fr}.app .rl{display:none}}

/* feature rows */
.feat{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(56px,8vw,120px) 0;border-top:1px solid var(--line)}
.dark .feat{border-color:var(--line-d)}
.feat.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.feat.flip .ftxt{order:2}
.feat ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.feat li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:15.5px;color:var(--muted)}
.dark .feat li{color:var(--muted-d)}
.feat li::before{content:"";width:8px;height:8px;border-radius:50%;margin-top:9px;background:var(--electric)}
.dark .feat li::before{background:var(--mint)}
@media(max-width:900px){.feat,.feat.flip{grid-template-columns:1fr}.feat.flip .ftxt{order:0}}

/* scrollytelling (science) */
.scrolly{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.scrolly .pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.scrolly .pin .viz{position:relative;width:100%;aspect-ratio:1/1;max-height:76vh;border-radius:24px;background:var(--navy);overflow:hidden}
.scrolly .pin canvas{position:absolute;inset:0;width:100%;height:100%}
.scrolly .pin .cap{position:absolute;left:22px;bottom:18px;right:22px;font:500 12px/1.5 var(--font-mono);color:var(--muted-d)}
.scrolly .steps{padding:30vh 0}
.scrolly .st{min-height:80vh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .5s var(--ease)}
.scrolly .st.on{opacity:1}
.scrolly .st .eq{font-size:clamp(18px,2vw,26px);margin:22px 0;padding:18px 20px;border-radius:var(--r-md);background:var(--mist);color:var(--ink)}
.dark .scrolly .st .eq{background:var(--navy-2);color:var(--ink-d)}
@media(max-width:900px){.scrolly{grid-template-columns:1fr}.scrolly .pin{height:56vh;top:76px;z-index:2}.scrolly .pin .viz{aspect-ratio:auto;height:50vh}.scrolly .steps{padding:10vh 0}}

/* misc */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--pill);border:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.dark .chip{border-color:var(--line-d);color:var(--muted-d)}
.form{display:grid;gap:14px}
.form label{display:grid;gap:8px;font-size:13.5px;font-weight:500}
.form input,.form select,.form textarea{height:52px;padding:0 16px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--white);font:400 15px var(--font-sans);color:var(--ink)}
.form textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--electric);outline-offset:1px;border-color:transparent}
.note{font:500 12px/1.6 var(--font-mono);color:var(--muted)}
.dark .note{color:var(--muted-d)}
.divider{height:1px;background:var(--line)} .dark .divider{background:var(--line-d)}
.timeline{display:grid;gap:0;border-left:1px solid var(--line);margin-left:6px}
.dark .timeline{border-color:var(--line-d)}
.tl{position:relative;padding:0 0 44px 36px}
.tl::before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--white);border:2px solid var(--electric)}
.dark .tl::before{background:var(--navy);border-color:var(--mint)}
.tl .y{font:500 12px var(--font-mono);color:var(--electric);letter-spacing:.08em}
.dark .tl .y{color:var(--mint)}
.tl h3{margin:8px 0 6px}
.tl p{margin:0;color:var(--muted);max-width:56ch}
.dark .tl p{color:var(--muted-d)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- inner-page hero */
.stage.sub{height:94vh;height:94svh;min-height:620px}
.stage .subcopy{position:absolute;left:0;right:0;bottom:clamp(48px,11vh,120px);z-index:2}
.stage .subcopy .in{max-width:620px}
.stage .subcopy h1{margin:0 0 22px}
.stage .subcopy p{margin:0;color:var(--muted-d);font-size:clamp(16px,1.3vw,19px);max-width:52ch}
.stage .subcopy .acts{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
@media(max-width:760px){.stage.sub{height:auto;min-height:100svh}.stage .subcopy{position:relative;bottom:auto;padding:58svh 0 64px}}

/* ---------- product UI shots */
.ui{border-radius:20px;background:var(--navy);border:1px solid var(--line-d);color:var(--ink-d);padding:22px;box-shadow:0 30px 90px -40px rgba(11,27,43,.6);overflow:hidden}
.ui .uh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-d)}
.dec-word{font:700 64px/.9 var(--font-display);letter-spacing:-.03em;color:#FF8A80}
.gauge{width:170px;height:96px}
.ckrow{display:grid;grid-template-columns:36px 1fr auto 70px;gap:12px;align-items:center;padding:11px 12px;border-radius:12px;background:var(--navy-2);border:1px solid var(--line-d);margin-top:8px}
.ckrow .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,138,128,.12);color:#FF8A80}
.ckrow .ic.ok{background:rgba(63,224,176,.12);color:#3FE0B0} .ckrow .ic.rv{background:rgba(255,200,97,.12);color:#FFC861}
.ckrow .ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ckrow b{font-size:14px;font-weight:500} .ckrow small{display:block;color:var(--muted-d);font-size:12px}
.ckrow .sc{font:500 22px var(--font-mono);text-align:right}
.kb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kcol{background:var(--navy-2);border:1px solid var(--line-d);border-radius:14px;padding:10px;min-height:280px}
.kcol .kh{display:flex;justify-content:space-between;font:500 11px var(--font-mono);color:var(--muted-d);padding:4px 4px 10px;letter-spacing:.08em;text-transform:uppercase}
.kcard{background:var(--navy);border:1px solid var(--line-d);border-radius:10px;padding:10px 11px;margin-bottom:8px;font-size:12.5px}
.kcard .t{display:flex;justify-content:space-between;font:500 10.5px var(--font-mono);color:var(--muted-d)}
.kcard b{display:block;margin:5px 0 6px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kcard .vb-verdict{height:20px;font-size:11px;padding:0 8px}
.matrix{width:100%;border-collapse:separate;border-spacing:6px}
.matrix th{font:500 10.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d);text-align:center;padding:4px}
.matrix th:first-child{text-align:left}
.matrix td:first-child{font-size:14px;font-weight:500;padding-right:8px}
.matrix td button{width:100%;height:38px;border-radius:10px;border:1px solid var(--line-d);background:var(--navy-2);font:500 12.5px var(--font-mono);transition:background-color .2s,color .2s,border-color .2s}
.matrix td button.obey{color:var(--obeyed-fg-d);background:var(--obeyed-bg-d);border-color:transparent}
.matrix td button.confirm{color:var(--review-fg-d);background:var(--review-bg-d);border-color:transparent}
.matrix td button.block{color:var(--blocked-fg-d);background:var(--blocked-bg-d);border-color:transparent}
.logl{display:grid;gap:6px;font:500 12.5px/1.5 var(--font-mono)}
.logl div{display:grid;grid-template-columns:76px 92px 1fr;gap:12px;padding:9px 12px;border-radius:10px;background:var(--navy-2);border:1px solid var(--line-d);color:var(--muted-d)}
.logl b{font-weight:500;color:var(--ink-d)}
.ui canvas{width:100%;display:block}
@media(max-width:600px){.kb{grid-template-columns:1fr}.ckrow{grid-template-columns:32px 1fr 56px}.ckrow .vb-verdict{display:none}}

/* =====================================================================
   v2 — editorial luxury: quiet canvas, one object, hairline type
   ===================================================================== */
:root{--canvas:#E9EDF0;--frame:#C7CED5;--label:11px}
.hdr nav a{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;padding:10px 14px}
.hdr .cta.btn-sm{height:36px;font-size:12.5px}
body[data-page="home"] .hdr.intro{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px)}
.hdr{transition:transform .5s var(--ease),opacity .5s var(--ease),background-color .4s,border-color .4s,color .4s}

/* hero */
.lux{position:relative;height:100vh;height:100svh;padding:16px;background:var(--frame)}
.lux-card{position:relative;height:100%;border-radius:28px;overflow:hidden;background:var(--canvas);box-shadow:0 40px 90px -40px rgba(11,27,43,.45),0 0 0 1px rgba(255,255,255,.5) inset}
.lux-card canvas{position:absolute;inset:0;width:100%;height:100%}
.lux-fallback{display:none;position:absolute;left:50%;top:46%;width:min(28vw,260px);transform:translate(-50%,-50%)}
.no-webgl .lux-fallback{display:block} .no-webgl #sculpt{display:none}
.lux-ui{position:absolute;inset:0;color:var(--navy);pointer-events:none}
.lux-ui a,.lux-ui button{pointer-events:auto}
.lux-top{position:absolute;top:34px;left:44px;right:44px;display:flex;align-items:center;gap:28px}
.lux-logo img{height:22px;width:auto}
.lux-lbl,.lux-nav a,.lux-pilot{font:500 var(--label)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.lux-lbl{color:var(--muted)}
.lux-nav{display:flex;gap:44px;margin:0 auto}
.lux-nav a{position:relative;color:var(--navy)}
.lux-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.lux-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.lux-pilot{display:inline-flex;align-items:center;gap:8px;color:var(--navy)}
.lux-pilot svg{width:13px;height:13px}
.lux-left{position:absolute;left:44px;bottom:48px}
.lux-idx{display:block;font:500 var(--label)/1 var(--font-mono);letter-spacing:.1em;margin-bottom:22px}
.lux-title{margin:0;font:700 clamp(26px,2.6vw,40px)/1.02 var(--font-display);letter-spacing:-.02em}
.lux-dots{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);display:flex;gap:14px}
.lux-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid var(--navy);background:transparent;transition:background-color .3s,transform .3s}
.lux-dots button.on{background:var(--navy);transform:scale(1.15)}
.lux-right{position:absolute;right:44px;bottom:48px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.hl{display:inline-block;background:var(--navy);color:var(--white);font:500 var(--label)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;padding:4px 6px 3px}
.lux-right ul{list-style:none;margin:22px 0 0;padding:0;text-align:right;font:700 13px/1.35 var(--font-display);letter-spacing:.01em}
.lux-right li{color:rgba(11,27,43,.32);transition:color .4s} .lux-right li.on{color:var(--navy)}
.lux-eq{position:absolute;right:44px;top:30%;width:min(300px,26vw);text-align:left}
.lux-eq .k{display:block;font:500 var(--label)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.lux-eq .v{display:block;font:500 clamp(15px,1.3vw,19px)/1.3 var(--font-mono);color:var(--navy);padding-bottom:12px;border-bottom:1px solid rgba(11,27,43,.18)}
.lux-eq p{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.lux-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font:500 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.lux-cue span{width:28px;height:1px;background:currentColor;transform-origin:left;animation:cue2 2.4s var(--ease) infinite}
@keyframes cue2{0%{transform:scaleX(0)}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@media(max-width:980px){.lux-nav,.lux-lbl{display:none}.lux-pilot{margin-left:auto}.lux-eq{top:auto;bottom:150px;right:24px;width:min(300px,60vw)}.lux-top{left:24px;right:24px;top:24px}.lux-left{left:24px;bottom:32px}.lux-right{display:none}.lux-dots{bottom:auto;top:84px;left:24px;transform:none}}

/* sound, defined */
.wavesec{background:#05080C;color:#E8EEF3}
.ws-pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.ws-pin canvas{position:absolute;inset:0;width:100%;height:100%}
.ws-ui{position:absolute;inset:0;padding:40px 48px;pointer-events:none}
.ws-ui a{pointer-events:auto}
.ws-top{display:flex;justify-content:space-between;align-items:baseline;font:500 var(--label)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#8899A8}
.ws-brand{font:700 22px/1 var(--font-display);letter-spacing:-.01em;text-transform:none;color:#E8EEF3}
.ws-count b{color:#E8EEF3;font-weight:500}
.ws-defs{position:absolute;right:48px;top:30%;width:min(520px,40vw);height:260px}
.ws-def{position:absolute;inset:0 auto auto 0;opacity:0}
.ws-def.on{opacity:1}
.ws-def p{margin:0;font:400 clamp(20px,1.9vw,28px)/1.32 var(--font-sans);letter-spacing:-.01em;color:#E8EEF3}
.ws-def u{text-decoration-thickness:1px;text-underline-offset:5px}
.ws-def a{display:inline-block;margin-top:34px;font:500 13px/1 var(--font-sans);color:#E8EEF3;text-decoration:underline;text-underline-offset:4px}
.ws-badge{position:absolute;left:34%;top:30%;width:116px;height:116px;animation:spin 18s linear infinite}
.ws-badge text{font:500 7.2px var(--font-mono);letter-spacing:.32em;fill:#C8D3DD}
.ws-badge circle{fill:var(--mint)}
.ws-badge svg{width:100%;height:100%;border-radius:50%;background:rgba(5,8,12,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(232,238,243,.18)}
@keyframes spin{to{transform:rotate(360deg)}}
.ws-bot{position:absolute;left:48px;right:48px;bottom:38px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-top:18px;border-top:1px solid rgba(232,238,243,.12)}
.ws-bot p{margin:0;max-width:56ch;font-size:12.5px;line-height:1.6;color:#8899A8}
.ws-tags{display:flex;gap:18px;font:500 var(--label)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#8899A8}
@media(max-width:760px){.ws-pin{height:auto;min-height:100svh;padding-bottom:40px}.ws-pin canvas{position:relative;height:56svh}.ws-ui{position:relative;padding:24px}.ws-defs{position:relative;right:auto;top:auto;width:100%;height:auto;display:grid;gap:28px}.ws-def{position:relative}.ws-badge{display:none}.ws-bot{position:relative;left:auto;right:auto;bottom:auto;flex-direction:column;align-items:flex-start;margin-top:28px}}

/* ---------- the continuous scene */
.scene{position:relative}
.scene-pin{height:100vh;height:100svh;padding:16px;background:var(--frame)}
.scene-pin .lux-card{height:100%}
.ws-layer{position:absolute;inset:0;opacity:0;pointer-events:none}
.ws-layer .ws-ui{opacity:0}
.lux-dots{display:none}
.scene-stacked .scene-pin{height:auto;padding:0;background:var(--canvas)}
.scene-stacked .lux-card{height:100svh;border-radius:0}
.scene-stacked .ws-layer{position:relative;height:auto;background:#05080C;opacity:1;pointer-events:auto}
.scene-stacked .ws-layer .ws-ui{opacity:1;position:relative;padding:24px}
.scene-stacked .ws-defs{position:relative;right:auto;top:auto;width:100%;height:auto;display:grid;gap:28px}
.scene-stacked .ws-def{position:relative;opacity:1!important}
.scene-stacked .ws-badge{display:none}
.scene-stacked .ws-bot{position:relative;left:auto;right:auto;bottom:auto;flex-direction:column;align-items:flex-start;margin-top:28px}

/* =====================================================================
   v3 — the instrument language everywhere: pale canvas, white hairline cards,
   mono labels, light display type, the dot as the only saturated colour.
   ===================================================================== */
body{background:var(--canvas);color:var(--navy)}
.sec{padding:clamp(80px,10vw,140px) 0} .sec-tight{padding:clamp(56px,7vw,96px) 0}
.mist,.dark:not(.wavesec):not(.scene){background:var(--canvas);color:var(--navy)}
.dark:not(.wavesec):not(.scene) .lead,.dark:not(.wavesec):not(.scene) .eyebrow,.dark:not(.wavesec):not(.scene) .muted{color:var(--muted)}
.dark:not(.wavesec):not(.scene) .card{background:var(--white);color:var(--navy)}
.dark:not(.wavesec):not(.scene) .card p,.dark:not(.wavesec):not(.scene) .feat li,.dark:not(.wavesec):not(.scene) .numc .src,.dark:not(.wavesec):not(.scene) .ucr p,.dark:not(.wavesec):not(.scene) .ucr .n{color:var(--muted)}
.dark:not(.wavesec):not(.scene) .card .ic{background:var(--canvas);color:var(--electric)}
.dark:not(.wavesec):not(.scene) .nums,.dark:not(.wavesec):not(.scene) .numc,.dark:not(.wavesec):not(.scene) .uc,.dark:not(.wavesec):not(.scene) .ucr,.dark:not(.wavesec):not(.scene) .feat{border-color:var(--frame)}
.dark:not(.wavesec):not(.scene) .feat li::before{background:var(--electric)}
.dark:not(.wavesec):not(.scene) .btn-ghost{border-color:var(--line-strong);color:var(--navy)}
.dark:not(.wavesec):not(.scene) .btn-primary{background:var(--navy);color:var(--white)}
.dark:not(.wavesec):not(.scene) .ucr:hover .arr{background:var(--navy);border-color:var(--navy);color:#fff}
.dark:not(.wavesec):not(.scene) .link-arrow{color:var(--electric)}
.dark:not(.wavesec):not(.scene) .timeline{border-color:var(--frame)} .dark:not(.wavesec):not(.scene) .tl::before{background:var(--canvas);border-color:var(--electric)} .dark:not(.wavesec):not(.scene) .tl .y{color:var(--electric)} .dark:not(.wavesec):not(.scene) .tl p{color:var(--muted)}
.card{background:var(--white);border:1px solid rgba(11,27,43,.08);border-radius:20px;box-shadow:none}
.card .ic{background:var(--canvas);color:var(--navy)}
.fact,.how .step,.atk,.quick a,.kpi{background:var(--white);border:1px solid rgba(11,27,43,.08)}
.atk{border-radius:20px}
.facts,.how{border:0;background:transparent;gap:12px} .fact,.how .step{border-radius:16px}
.eyebrow{color:var(--muted);letter-spacing:.16em}
.h1,.display-l,.display-xl{letter-spacing:-.03em}
.lead{color:var(--muted)}
.btn{height:44px;padding:0 20px;font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;box-shadow:none}
.btn-primary{background:var(--navy);border-color:var(--navy);color:var(--white)} .btn-primary::after{background:var(--electric)}
.btn-ghost{border-color:rgba(11,27,43,.35);color:var(--navy)} .btn-ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-sm{height:36px;padding:0 14px;font-size:11px}
.link-arrow{font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.chip{border-color:rgba(11,27,43,.18);color:var(--navy);font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;height:30px}
.statement{font-weight:700;letter-spacing:-.03em} .statement .word{opacity:.14}
.nums{border-top:1px solid var(--frame)} .numc{border-right:1px solid var(--frame)}
.numc .v{font:700 clamp(44px,5.4vw,76px)/1 var(--font-display);letter-spacing:-.045em}
.numc .src{color:var(--muted)}
.shead{border-bottom:0}
.hdr{color:var(--navy)} .hdr.solid{background:rgba(233,237,240,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:rgba(11,27,43,.08)}
.hdr:not(.light) .logo .on-dark{display:none} .hdr:not(.light) .logo .on-light{display:block}
.hdr.light.solid,.hdr.solid{background:rgba(233,237,240,.85)}
.hdr nav a{color:var(--navy);opacity:.85} .hdr nav a.on::after{background:var(--electric)}
.hdr .cta.btn.btn-primary{background:transparent;border-color:transparent;color:var(--navy);padding:0;height:auto;font:500 11px/1 var(--font-mono);letter-spacing:.14em}
.hdr .cta.btn.btn-primary::after{display:none} .hdr .cta.btn.btn-primary:hover{color:var(--electric)}
.search{display:none}
.burger{border-color:rgba(11,27,43,.3)}
.mnav{background:var(--canvas);color:var(--navy)}
/* code windows and product screens keep their dark glass: they are screens, framed in white */
.codewin{border-radius:20px;border:1px solid rgba(11,27,43,.08)}
.shot,.ui{border-radius:20px}
/* use-case rows */
.ucr .arr{border-color:rgba(11,27,43,.3)}
/* CTA band: a white card with the instrument at the right */
.ctab{background:var(--white);color:var(--navy);border:1px solid rgba(11,27,43,.08);border-radius:28px;padding:clamp(40px,6vw,80px)}
.ctab canvas{opacity:1;left:auto;right:0;width:52%;height:100%}
.ctab .lead{color:var(--muted)} .ctab .eyebrow{color:var(--muted)}
.ctab .btn-ghost{border-color:rgba(11,27,43,.35);color:var(--navy)}
@media(max-width:900px){.ctab canvas{opacity:.35;width:100%}}
/* footer, light */
.ftr{background:var(--canvas);color:var(--navy);border-top:1px solid var(--frame);padding:80px 0 36px}
.ftr .top p{color:var(--muted)} .ftr h4{color:var(--muted)} .ftr ul a{color:var(--navy);opacity:.8} .ftr ul a:hover{color:var(--electric);opacity:1}
.ftr .bot{border-color:var(--frame);color:var(--muted)}
.ftr .big{color:transparent;-webkit-text-stroke:1px rgba(11,27,43,.18)}
.ftr .top img.on-light{display:block} .ftr .top img.on-dark{display:none}
/* marquee, light */
.marquee{border-color:var(--frame)} .marquee span{color:var(--muted)} .marquee span::after{background:var(--electric)}
/* inner-page hero: the instrument on the pale card */
.phero{padding:92px 16px 0}
.phero .lux-card{height:calc(100svh - 108px);min-height:560px;position:relative;overflow:hidden;border-radius:28px;background:var(--canvas);box-shadow:0 0 0 1px rgba(11,27,43,.06) inset}
.phero canvas{position:absolute;inset:0;width:100%;height:100%}
.phero .pui{position:absolute;inset:0;pointer-events:none}
.phero .pui a{pointer-events:auto}
.phero .pleft{position:absolute;left:44px;bottom:44px;max-width:620px}
.phero .pleft h1{margin:14px 0 18px;font:700 clamp(32px,4.2vw,58px)/1.02 var(--font-display);letter-spacing:-.03em}
.phero .pleft p{margin:0;color:var(--muted);font-size:clamp(15px,1.2vw,17px);max-width:50ch}
.phero .pleft .acts{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.phero .peq{position:absolute;right:44px;top:36%;width:min(300px,26vw)}
.phero .peq .k{display:block;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.phero .peq .v{display:block;font:500 clamp(15px,1.3vw,19px)/1.3 var(--font-mono);color:var(--navy);padding-bottom:12px;border-bottom:1px solid rgba(11,27,43,.18)}
.phero .peq p{margin:12px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.phero .pright{position:absolute;right:44px;bottom:44px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.phero .pidx{position:absolute;left:44px;top:34px;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.phero{padding:76px 10px 0}.phero .lux-card{height:auto;min-height:0;padding:52svh 0 0}.phero canvas{height:60svh}.phero .pui{position:relative}.phero .pleft,.phero .peq,.phero .pright,.phero .pidx{position:relative;left:auto;right:auto;top:auto;bottom:auto;padding:0 24px}.phero .peq{width:auto;margin:18px 0 0}.phero .pright{display:none}.phero .pleft{padding-bottom:36px}}
/* scrolly (science): the pinned viz is a pale instrument card */
.scrolly .pin .viz{background:var(--canvas);box-shadow:0 0 0 1px rgba(11,27,43,.06) inset}
.scrolly .pin .cap{color:var(--muted)}
.scrolly .st .eq{background:var(--white);border:1px solid rgba(11,27,43,.08);color:var(--navy)}
.secthead h2{font-weight:700}
/* API reference, light */
.api th{color:var(--muted);border-bottom-color:var(--frame)} .api td{color:var(--muted);border-bottom-color:rgba(11,27,43,.1)} .api td:first-child{color:var(--navy)}
.api .m{background:rgba(10,98,255,.1);color:var(--electric)} .api .m.get{background:rgba(6,195,208,.14);color:#067A82} .api tbody tr:hover{background:rgba(11,27,43,.03)}
.qs .card::before{color:var(--electric)}
/* home: the why panel and the attack instruments */
.panel{position:relative;overflow:hidden;background:var(--white);border:1px solid rgba(11,27,43,.08);border-radius:28px;padding:clamp(40px,6vw,88px)}
.panel .pviz{position:absolute;right:-6%;top:-10%;width:48%;height:120%;opacity:.9;pointer-events:none}
.panel .pin{position:relative;z-index:1}
@media(max-width:900px){.panel .pviz{opacity:.3;width:100%;right:0}}
.panel .statement{max-width:min(20ch,58%)} .panel .pviz{right:-4%;width:42%}
@media(max-width:900px){.panel .statement{max-width:20ch}}

/* ---------- v4 · the instrument explains: decision, attacks, readings */
.xcap{display:flex;align-items:baseline;gap:14px;margin:0;font:500 12px/1.5 var(--font-mono);color:var(--navy)}
.xcap .k{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:11px;display:inline-flex;align-items:center;gap:10px}
.xcap .k::before{content:"";width:22px;height:1px;background:var(--frame)}
.xcap.alert .v{color:#C42B1C}
.xcap.alert .k::before{background:#C42B1C}
/* inside one decision */
.xinst{position:relative;display:flex;flex-direction:column;gap:4px}
.xinst canvas{width:100%;aspect-ratio:1/1;max-height:80vh;display:block}
.xinst .xcap{justify-content:center;padding-bottom:4px}
@media(max-width:980px){.xinst{height:auto;order:-1}.xinst canvas{aspect-ratio:1/1;flex:none}}
/* attacks */
.atkx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.ainst{position:relative;display:flex;flex-direction:column;gap:6px}
.ainst canvas{width:100%;aspect-ratio:5/4;display:block}
.ainst .xcap{justify-content:center}
.alist{list-style:none;margin:0;padding:0;border-top:1px solid var(--frame)}
.alist li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;padding:24px 0;border-bottom:1px solid var(--frame);cursor:pointer;outline:none}
.alist li .n{font:500 12px/1 var(--font-mono);color:var(--muted);letter-spacing:.08em;padding-top:8px;transition:color .4s var(--ease)}
.alist li h3{margin:0 0 8px}
.alist li p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;max-width:46ch}
.alist li .vd{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font:500 12px/1 var(--font-mono);color:var(--navy)}
.alist li .vd::before{content:"";width:7px;height:7px;border-radius:50%;background:#C42B1C}
.alist li .vd.review::before{background:transparent;box-shadow:0 0 0 1.2px var(--navy) inset}
.alist li>div,.alist li .n{transition:opacity .4s var(--ease)}
.alist li:not(.on)>div{opacity:.42}
.alist li:hover>div,.alist li:focus-visible>div{opacity:1}
.alist li.on .n{color:var(--electric)}
.alist li .tm{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--electric)}
.alist li.on .tm{animation:atkT 4.2s linear forwards}
@keyframes atkT{to{width:100%}}
@media(prefers-reduced-motion:reduce){.alist li.on .tm{animation:none;width:100%}}
@media(max-width:900px){.atkx{grid-template-columns:1fr}.ainst{max-width:520px;margin:0 auto;width:100%}}
/* readings, set like marks on the dial */
.nums.readings{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,48px);border:0;padding-top:40px}
.nums.readings::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;border-bottom:1px solid var(--frame);
  background:repeating-linear-gradient(90deg,rgba(11,27,43,.35) 0 1px,transparent 1px 96px) left bottom/100% 14px no-repeat,repeating-linear-gradient(90deg,rgba(11,27,43,.16) 0 1px,transparent 1px 12px) left bottom/100% 6px no-repeat}
.nums.readings .numc{position:relative;background:none;border:0!important;border-radius:0;padding:0;margin:0}
.nums.readings .numc::before{content:"";position:absolute;left:0;top:-40px;width:2px;height:26px;background:var(--electric)}
.nums.readings .numc .v{font:700 clamp(52px,6.4vw,96px)/.95 var(--font-display);letter-spacing:-.05em;color:var(--navy)}
.nums.readings .numc p{margin:18px 0 8px;font-weight:500;color:var(--navy)}
.nums.readings .numc .src{font:500 11.5px/1.6 var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
@media(max-width:900px){.nums.readings{grid-template-columns:1fr 1fr;row-gap:56px}}
@media(max-width:520px){.nums.readings{grid-template-columns:1fr}}
.xinst .xcap{margin-top:-9%}
@media(max-width:980px){.xinst .xcap{margin-top:-6%}}

/* ---------- v5 · one language on every page: paper screens, dot verdicts, ruled columns */
/* product screens are paper, not navy */
body .ui,body .shot,body .feed{--muted-d:var(--muted);--ink-d:var(--navy);--line-d:rgba(11,27,43,.08);--navy-2:#F6F8FA;
  background:var(--white);color:var(--navy);border:1px solid rgba(11,27,43,.08);box-shadow:0 40px 80px -60px rgba(11,27,43,.45)}
body .shot .chrome{background:#F6F8FA;border-bottom:1px solid rgba(11,27,43,.07)}
body .shot .chrome i{background:var(--frame)}
body .app{color:var(--navy)} body .app .rl{border-right-color:rgba(11,27,43,.07)} body .app .rl i.on{background:var(--canvas);border-color:transparent}
body .tile{background:#F7F9FA;border:1px solid rgba(11,27,43,.06)}
body .tile .v{color:var(--navy)}
body .kcol{background:#F7F9FA;border-color:rgba(11,27,43,.06)}
body .kcard{background:var(--white);border-color:rgba(11,27,43,.08)}
body .logl div{background:#F7F9FA;border-color:rgba(11,27,43,.06);color:var(--muted)}
body .logl b{color:var(--navy)}
body .matrix td button{background:var(--white);border:1px solid rgba(11,27,43,.1);color:var(--navy)}
body .matrix td button.obey{background:var(--white);color:#067A82;border-color:rgba(6,195,208,.35)}
body .matrix td button.confirm{background:var(--white);color:var(--navy);border-color:rgba(11,27,43,.35)}
body .matrix td button.block{background:rgba(196,43,28,.06);color:#C42B1C;border-color:rgba(196,43,28,.35)}
body .matrix td button:hover{border-color:var(--navy)}
/* one verdict system: a mono word and a dot. red blocks, a ring asks, teal obeys */
.ui .vb-verdict,.shot .vb-verdict,.feed .vb-verdict,.kcard .vb-verdict{background:none!important;color:var(--navy)!important;padding:0!important;height:auto!important;border-radius:0;font:500 12px/1 var(--font-mono)!important;letter-spacing:.02em;gap:8px}
.ui .vb-verdict::before,.shot .vb-verdict::before,.feed .vb-verdict::before,.kcard .vb-verdict::before{width:7px;height:7px;background:var(--navy)}
:is(.ui,.shot,.feed,.kcard) .vb-verdict:is([style*="blocked"],.v-blocked)::before{background:#C42B1C}
:is(.ui,.shot,.feed,.kcard) .vb-verdict:is([style*="blocked"],.v-blocked){color:#C42B1C!important}
:is(.ui,.shot,.feed,.kcard) .vb-verdict:is([style*="review"],.v-review)::before{background:none;box-shadow:0 0 0 1.2px var(--navy) inset}
:is(.ui,.shot,.feed,.kcard) .vb-verdict:is([style*="obeyed"],[style*="12,245,185"],.v-obeyed)::before{background:#06C3D0}
/* instruments inside screens */
.ui .inst{width:100%;aspect-ratio:1/1;max-height:460px;display:block}
.ui .xcap{justify-content:flex-start;margin-top:4px}
.ui .xcap.alert .v{color:#C42B1C}
/* cards become ruled columns, like readings on the dial */
body .card{background:none;border:0;border-top:1px solid var(--frame);border-radius:0;padding:26px 0 0;box-shadow:none;overflow:visible;min-height:0}
body .card:hover{transform:none}
body .card::after{content:"";position:absolute;left:0;top:-1px;width:36px;height:2px;background:var(--electric)}
body .card .ic{width:auto;height:auto;background:none;border-radius:0;justify-content:start;color:var(--electric);margin-bottom:18px}
body .card p{color:var(--muted)}
body .g3,body .qs,body .princ{column-gap:clamp(28px,4vw,64px);row-gap:56px}
body .g2:has(> .card){column-gap:clamp(28px,4vw,64px);row-gap:48px}
body .princ .card .n{padding-bottom:28px;margin-bottom:0}
body .feed .it,body .logl div{background:none;border:0;border-top:1px solid rgba(11,27,43,.08);border-radius:0;padding:12px 2px;margin-top:0}
body .feed .it:first-of-type{margin-top:6px}
body .card{background:none!important;border-radius:0!important;border:0!important;border-top:1px solid var(--frame)!important}
/* ---------- v6 · product: the trust gate as meters on a scale */
.gdec{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:6px 0 26px}
.gdec .w{font:700 clamp(40px,4.4vw,60px)/.95 var(--font-display);letter-spacing:-.035em;color:#C42B1C}
.gdec .r{font:500 12px var(--font-mono);color:var(--muted)}
.meters{display:grid;gap:18px}
.mt{display:grid;grid-template-columns:132px minmax(0,1fr) 44px 64px;align-items:center;gap:14px}
.mt .nm{font-size:14px;font-weight:500;color:var(--navy)}
.mt .rl{position:relative;height:22px;background:repeating-linear-gradient(90deg,rgba(11,27,43,.22) 0 1px,transparent 1px 10%) left center/100% 7px no-repeat}
.mt .rl::before,.mt .rl::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(11,27,43,.55)}
.mt .rl::before{left:33%} .mt .rl::after{left:66%}
.mt .rl i{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;width:0;border-radius:2px;background:var(--navy);transition:width 1.1s var(--ease)}
.mt .rl i::after{content:"";position:absolute;right:-1px;top:-6px;width:2px;height:15px;background:inherit}
#gateUi.on .mt .rl i{width:max(3px,calc(var(--s) * 100%))}
.mt:nth-child(2) .rl i{transition-delay:.12s} .mt:nth-child(3) .rl i{transition-delay:.24s} .mt:nth-child(4) .rl i{transition-delay:.36s}
.mt:has(.hostile) .rl i{background:#C42B1C} .mt:has(.clean) .rl i{background:linear-gradient(90deg,#0A62FF,#06C3D0,#0CF5B9)}
.mt .sc{font:500 15px var(--font-mono);color:var(--navy);text-align:right}
.mt .bd{font:500 11px var(--font-mono);color:var(--muted)} .mt .bd.hostile{color:#C42B1C} .mt .bd.clean{color:#067A82}
.mnote{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0 0;padding-top:14px;border-top:1px solid rgba(11,27,43,.08);font:500 11px var(--font-mono);color:var(--muted)}
@media(max-width:600px){.mt{grid-template-columns:1fr 44px 60px}.mt .nm{grid-column:1/-1}}
.ui canvas.spec{width:100%;height:340px;display:block}

/* attacks: the spectrogram on paper beside the list; the list never depends on a scroll tween to be seen */
.atkx{align-items:start}
.ainst.ui{padding:20px 22px 18px;gap:0}
.ainst.ui canvas{aspect-ratio:16/11}
.ainst.ui .xcap{justify-content:flex-start;margin-top:10px;padding-top:12px;border-top:1px solid rgba(11,27,43,.08)}
#atkHead{color:var(--navy)}
.atkx .alist li{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.atkx:not(.in) .alist li{opacity:0;transform:translateY(24px)}
.atkx.in .alist li:nth-child(2){transition-delay:.08s} .atkx.in .alist li:nth-child(3){transition-delay:.16s} .atkx.in .alist li:nth-child(4){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.atkx:not(.in) .alist li{opacity:1;transform:none}}
@media(min-width:901px){.ainst.ui{position:sticky;top:110px}}