/* QubeSight website prototype — dark-first, brand = indigo cube + cyan "sight" cell */
:root{
  --bg:#06070b;
  --bg-2:#090b11;
  --panel:#0d1017;
  --panel-2:#121621;
  --panel-3:#171c29;
  --line:rgba(148,163,184,.11);
  --line-2:rgba(148,163,184,.2);
  --line-3:rgba(148,163,184,.32);
  --text:#ecebe7;
  --text-2:#b9bdc9;
  --muted:#7e8497;
  --brand:#6366f1;
  --brand-2:#818cf8;
  --brand-3:#a5b4fc;
  --brand-deep:#312e81;
  --sight:#22d3ee;
  --sight-2:#67e8f9;
  --amber:#f5b041;
  --red:#fb5a6e;
  --green:#34d399;
  --radius:14px;
  --radius-sm:9px;
  --wrap:1200px;
  --gutter:24px;
  --nav-h:64px;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Inter,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{background:var(--bg);color:var(--text);font:400 16.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
code{font-family:var(--mono);font-size:.88em;background:rgba(129,140,248,.12);color:var(--brand-3);padding:.1em .4em;border-radius:6px}
::selection{background:rgba(34,211,238,.28);color:#fff}
:focus-visible{outline:2px solid var(--sight);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono)}
.dim{color:var(--muted)}
.c-amber{color:var(--amber)}
.c-red{color:var(--red)}
.c-sight{color:var(--sight)}
.hide-sm{}
.show-xs{display:none}

/* faint Stripe-like column guides */
.guides{position:fixed;inset:0 auto 0 50%;transform:translateX(-50%);width:min(var(--wrap),100%);pointer-events:none;z-index:0;
  background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/25% 100%;border-right:1px solid var(--line);opacity:.45;
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
main,footer,.nav,.announce{position:relative;z-index:1}

/* ---------- buttons, pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:46px;padding:0 20px;border-radius:999px;font-weight:500;font-size:15.5px;letter-spacing:-.005em;transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s;white-space:nowrap}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.btn-primary{background:linear-gradient(180deg,#7275f5,#5457e6);color:#fff;box-shadow:0 0 0 1px rgba(165,180,252,.35) inset,0 8px 30px -8px rgba(99,102,241,.7)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(165,180,252,.5) inset,0 12px 36px -8px rgba(99,102,241,.85)}
.btn-ghost{border:1px solid var(--line-2);background:rgba(255,255,255,.02);color:var(--text)}
.btn-ghost:hover{border-color:var(--line-3);background:rgba(255,255,255,.05)}
.btn-sm{height:36px;padding:0 15px;font-size:14px}
.btn-block{width:100%}
.btn-mini{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:7px;font-size:12.5px;font-weight:500;background:var(--brand);color:#fff}
.btn-mini.ghost{background:transparent;border:1px solid var(--line-2);color:var(--text-2)}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.04em;vertical-align:middle}
.pill-brand{background:rgba(99,102,241,.16);color:var(--brand-3);border:1px solid rgba(129,140,248,.3)}
.pill-ee{background:rgba(34,211,238,.1);color:var(--sight-2);border:1px solid rgba(34,211,238,.28);height:20px;font-size:10.5px;margin-left:4px}
.link-quiet{color:var(--text-2);font-size:14.5px}
.link-quiet:hover{color:var(--text)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--brand-3)}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--sight);box-shadow:0 0 0 0 rgba(34,211,238,.6);animation:ping 2.2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}70%{box-shadow:0 0 0 9px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
.grad{background:linear-gradient(92deg,#c7d2fe 0%,#818cf8 38%,#22d3ee 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- announce + nav ---------- */
.announce{display:flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:6px 16px;font-size:13.5px;color:var(--text-2);border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(99,102,241,.08),rgba(34,211,238,.06),rgba(99,102,241,.08));text-align:center}
.announce:hover{color:var(--text)}
.announce-tag{font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:rgba(34,211,238,.14);color:var(--sight-2)}
.announce .arrow{transition:transform .2s var(--ease)}
.announce:hover .arrow{transform:translateX(3px)}

.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);border-bottom:1px solid transparent;transition:background .25s,border-color .25s,backdrop-filter .25s}
.nav.is-scrolled{background:rgba(6,7,11,.72);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-color:var(--line)}
.nav-inner{display:flex;align-items:center;height:100%;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:18.5px;letter-spacing:-.02em}
.brand em{font-style:normal;color:var(--brand-2)}
.nav-links{display:flex;gap:26px;margin-right:auto;font-size:14.5px;color:var(--text-2)}
.nav-links a{position:relative;transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:18px}
.nav-toggle{display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line-2);position:relative}
.nav-toggle span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--text);transition:transform .25s var(--ease)}
.nav-toggle span:first-child{top:15px}.nav-toggle span:last-child{top:22px}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;padding:72px 0 0;overflow:clip}
.hero-grid{position:absolute;inset:0;--cell:56px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:var(--cell) var(--cell);
  mask-image:radial-gradient(ellipse 80% 70% at 60% 25%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 25%,#000 20%,transparent 75%)}
.cell{position:absolute;width:var(--cell);height:var(--cell);transition:opacity .9s var(--ease);opacity:0}
.cell.is-on{opacity:1}
.cell-sight{background:linear-gradient(135deg,rgba(103,232,249,.55),rgba(34,211,238,.18));box-shadow:0 0 40px 6px rgba(34,211,238,.35),inset 0 0 0 1px rgba(103,232,249,.7)}
.cell-dim{background:rgba(99,102,241,.13);box-shadow:inset 0 0 0 1px rgba(129,140,248,.25)}
.hero-glow{position:absolute;top:-260px;left:50%;width:1100px;height:700px;transform:translateX(-35%);background:radial-gradient(closest-side,rgba(99,102,241,.32),rgba(99,102,241,.08) 55%,transparent);pointer-events:none;filter:blur(10px)}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px;align-items:center}
.hero h1{margin:22px 0 22px;font-size:clamp(2.55rem,5.4vw,4.35rem);line-height:1.02;letter-spacing:-.045em;font-weight:620}
.lead{font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--text-2);max-width:36em;line-height:1.62}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-actions.center{justify-content:center}
.install{margin-top:26px;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px 9px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(13,16,23,.7);font:500 14px/1.3 var(--mono);color:var(--text);text-align:left;transition:border-color .2s}
.install:hover{border-color:var(--line-3)}
.install .prompt{color:var(--sight)}
.install-note{color:var(--muted);font-size:12.5px}
.install .copy{margin-left:4px;font-size:11.5px;color:var(--brand-3);padding:3px 8px;border-radius:6px;background:rgba(99,102,241,.14)}

/* console (hero live stream) */
.console{position:relative;border-radius:16px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(18,22,33,.92),rgba(10,12,18,.96));box-shadow:0 40px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4),0 0 80px -30px rgba(99,102,241,.5);overflow:hidden;font-family:var(--mono)}
.chrome{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.dots{display:inline-flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#2a2f3d}
.dots i:nth-child(1){background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.chrome-title{font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:.02em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live{display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--sight-2)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--sight);animation:ping 2s infinite}
.console-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.console-stats div{padding:12px 14px;border-right:1px solid var(--line)}
.console-stats div:last-child{border-right:0}
.console-stats span{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.console-stats b{font-weight:500;font-size:17px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.console-head,.srow{display:grid;grid-template-columns:62px minmax(0,1.05fr) 92px 62px minmax(0,1fr) 74px;gap:10px;align-items:center;padding:0 14px}
.console-head{height:30px;font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.console-rows{height:318px;overflow:hidden;position:relative}
.srow{height:35px;font-size:12.3px;color:var(--text-2);border-bottom:1px solid rgba(148,163,184,.06);animation:rowIn .5s var(--ease) both;white-space:nowrap}
.srow > span{overflow:hidden;text-overflow:ellipsis}
.srow .t{color:var(--muted);font-variant-numeric:tabular-nums}
.srow .u{color:var(--text)}
.srow .op{color:var(--brand-3)}
.srow .tag{justify-self:start;font-size:10px;font-weight:600;letter-spacing:.06em;padding:3px 7px;border-radius:5px;background:rgba(52,211,153,.1);color:var(--green)}
.srow.is-sens{background:linear-gradient(90deg,rgba(245,176,65,.07),transparent 70%)}
.srow.is-sens .tag{background:rgba(245,176,65,.14);color:var(--amber)}
.srow.is-alert{background:linear-gradient(90deg,rgba(251,90,110,.14),rgba(251,90,110,.02) 80%);box-shadow:inset 2px 0 0 var(--red)}
.srow.is-alert .tag{background:rgba(251,90,110,.18);color:#ff8a98}
.srow.is-alert .u{color:#fff}
@keyframes rowIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.console-fade{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(180deg,transparent,rgba(10,12,18,.98));pointer-events:none}

/* metrics */
.metrics{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.metrics li{padding:26px 22px 24px 0;border-right:1px solid var(--line);padding-left:22px}
.metrics li:first-child{padding-left:0}
.metrics li:last-child{border-right:0}
.metrics b{display:block;font-size:clamp(1.8rem,3vw,2.35rem);font-weight:600;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.metrics span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted);line-height:1.45}
.metrics-note{margin-top:12px;font-size:12.5px;color:var(--muted)}
.metrics-note em{font-style:normal;color:var(--text-2)}

.marquee{margin-top:56px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marquee 48s linear infinite}
.marquee-track span{font:500 14px/1 var(--mono);color:var(--muted);white-space:nowrap;letter-spacing:.01em}
.marquee-track span::before{content:"◆";color:rgba(129,140,248,.45);margin-right:44px;font-size:8px;vertical-align:middle}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
section{position:relative}
.section-head{max-width:720px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{margin:16px 0 16px;font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.06;letter-spacing:-.04em;font-weight:600}
.section-head p{font-size:1.08rem;color:var(--text-2);max-width:36em}
.section-head.center p{margin:0 auto}

/* ---------- story / scrollytelling ---------- */
.story{padding:140px 0 60px}
.scrolly{display:grid;grid-template-columns:96px minmax(0,1.12fr) minmax(0,.88fr);gap:40px;position:relative}
.rail{position:sticky;top:calc(50vh - 150px);align-self:start;list-style:none;height:300px;display:flex;flex-direction:column;justify-content:space-between;padding-left:18px;font:500 12px/1 var(--mono);color:var(--muted)}
.rail::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.rail-fill{position:absolute;left:4px;top:6px;width:1px;height:0;background:linear-gradient(180deg,var(--brand-2),var(--sight));transition:height .5s var(--ease);box-shadow:0 0 8px rgba(34,211,238,.6)}
.rail li{position:relative;transition:color .3s;cursor:pointer}
.rail li:hover{color:var(--text)}
.rail li i{position:absolute;left:-18px;top:-1px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--line-3);transition:all .3s;z-index:1}
.rail li.is-past{color:var(--text-2)}
.rail li.is-past i{background:var(--brand-2);border-color:var(--brand-2)}
.rail li.is-active{color:var(--sight-2)}
.rail li.is-active i{background:var(--sight);border-color:var(--sight);box-shadow:0 0 0 4px rgba(34,211,238,.18),0 0 14px rgba(34,211,238,.8)}

.stage-wrap{position:relative}
.stage{position:sticky;top:calc(50vh - 260px + var(--nav-h)/2);height:520px;border-radius:16px;border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(18,22,33,.92),rgba(9,11,17,.97));box-shadow:0 40px 120px -40px rgba(0,0,0,.9),0 0 90px -40px rgba(99,102,241,.55);overflow:hidden}
.stage-clock{font:500 12px/1 var(--mono);color:var(--sight-2);font-variant-numeric:tabular-nums}
.stage-body{position:absolute;inset:40px 0 0 0;padding:26px}
/* layers never overlap: the outgoing one leaves fast, the incoming one starts after it */
.layer{position:absolute;inset:26px;display:flex;flex-direction:column;justify-content:center;gap:16px;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .16s ease-out,transform .16s ease-out,visibility 0s linear .16s;pointer-events:none}
.layer.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .42s var(--ease) .14s,transform .5s var(--ease) .14s,visibility 0s}

.card{border:1px solid var(--line-2);border-radius:12px;background:var(--panel-2);padding:16px 18px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:12px}
.kv{display:grid;gap:9px}
.kv div{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;font-size:14px}
.kv dt{font:500 12px/1 var(--mono);color:var(--muted)}
.kv dd{font-family:var(--mono);font-size:13.5px;color:var(--text);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.flag{font:600 10px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:rgba(245,176,65,.13);color:var(--amber);opacity:0;transform:translateX(-6px);transition:all .4s var(--ease)}
.layer.is-active .flag{opacity:1;transform:none}
.layer.is-active .kv div:nth-child(2) .flag{transition-delay:.35s}
.layer.is-active .kv div:nth-child(3) .flag{transition-delay:.6s}
.layer.is-active .kv div:nth-child(5) .flag{transition-delay:.85s}
.baseline{border:1px solid var(--line);border-radius:12px;padding:14px 16px 10px;background:rgba(255,255,255,.012)}
.baseline-head{display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:10px}
.bars{display:grid;grid-template-columns:repeat(24,1fr);gap:4px;align-items:end;height:72px}
.bars span{display:block;border-radius:3px 3px 1px 1px;background:rgba(129,140,248,.35);height:0;transition:height .7s var(--ease)}
.bars span.night{background:var(--amber);box-shadow:0 0 14px rgba(245,176,65,.6)}
.layer.is-active .bars span{height:var(--h)}
.axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:6px}

.pipe{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:4px}
.pipe-line{position:absolute;left:25px;top:24px;bottom:24px;width:1px;background:linear-gradient(180deg,var(--line-3),var(--line-2))}
.packet{position:absolute;left:-4px;top:0;width:9px;height:9px;border-radius:50%;background:var(--sight);box-shadow:0 0 0 4px rgba(34,211,238,.18),0 0 18px 2px rgba(34,211,238,.9);opacity:0}
.layer.is-active .packet{animation:packet 3.2s var(--ease) infinite}
@keyframes packet{0%{top:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{top:100%;opacity:0}}
.pnode{position:relative;display:flex;align-items:center;gap:14px;padding:11px 14px 11px 8px;border-radius:11px;border:1px solid var(--line);background:var(--panel-2);transition:border-color .3s,box-shadow .3s}
.pico{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--panel-3);border:1px solid var(--line-2);color:var(--brand-3);font:500 11.5px/1 var(--mono);flex:none;position:relative;z-index:1}
.pnode b{display:block;font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.pnode span{display:block;font:400 12px/1.4 var(--mono);color:var(--muted)}
.layer.is-active .pnode{animation:nodeLit 3.2s var(--ease) infinite;animation-delay:calc(var(--i) * .62s)}
@keyframes nodeLit{0%,100%{border-color:var(--line);box-shadow:none}8%,22%{border-color:rgba(34,211,238,.5);box-shadow:0 0 24px -6px rgba(34,211,238,.45)}34%{border-color:var(--line);box-shadow:none}}
.note{font-size:12px;color:var(--text-2);padding:10px 12px;border-radius:9px;background:rgba(34,211,238,.05);border:1px solid rgba(34,211,238,.14)}

.code{margin:0;padding:16px 18px;border-radius:12px;border:1px solid var(--line-2);background:#090b10;font:400 13.4px/1.75 var(--mono);color:var(--text-2);white-space:pre-wrap;overflow:hidden}
.code .k{color:#c4b5fd}
.code .str{color:#86efac}
.code .tbl{color:var(--text);font-weight:500}
.code .s-col{color:var(--text);background:linear-gradient(transparent 62%,rgba(34,211,238,0) 62%);transition:background .6s var(--ease) .4s,color .4s .4s;border-radius:2px}
.layer.is-active .code .s-col{color:var(--sight-2);background:linear-gradient(transparent 62%,rgba(34,211,238,.28) 62%)}
.parsed{display:grid;gap:10px}
.prow{display:flex;flex-wrap:wrap;align-items:center;gap:7px;opacity:0;transform:translateY(6px);transition:all .45s var(--ease)}
.layer.is-active .prow{opacity:1;transform:none;transition-delay:calc(.5s + var(--i) * .2s)}
.pk{width:76px;font:500 11px/1 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.prow > .mono.dim{font-size:11.5px}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:7px;font:500 12px/1 var(--mono);background:var(--panel-3);border:1px solid var(--line-2);color:var(--text)}
.chip-sight{background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.3);color:var(--sight-2)}
.chip-amber{background:rgba(245,176,65,.1);border-color:rgba(245,176,65,.3);color:var(--amber)}
.chip-red{background:rgba(251,90,110,.1);border-color:rgba(251,90,110,.32);color:#ff8a98}
.chip-quiet{color:var(--muted)}

.rule{border:1px solid var(--line-2);border-radius:14px;background:var(--panel-2);overflow:hidden}
.rule-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px;font-size:11.5px}
.rule-head b{font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.checks{list-style:none;padding:8px 0}
.checks li{display:flex;align-items:center;gap:12px;padding:10px 18px;font-size:14px;color:var(--text-2)}
.checks .val{margin-left:auto;font:500 12.5px/1 var(--mono);color:var(--muted);transition:color .3s}
.box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-3);position:relative;flex:none;transition:all .3s var(--ease)}
.box::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #0b0d12;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease)}
.layer.is-active .checks li .box{background:var(--amber);border-color:var(--amber);transition-delay:calc(.3s + var(--i) * .26s)}
.layer.is-active .checks li .box::after{transform:rotate(45deg) scale(1);transition-delay:calc(.35s + var(--i) * .26s)}
.layer.is-active .checks li .val{color:var(--text);transition-delay:calc(.3s + var(--i) * .26s)}
.verdict{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line);background:rgba(251,90,110,.07);font-size:12.5px;color:#ffb3bd;opacity:0;transition:opacity .4s}
.layer.is-active .verdict{opacity:1;transition-delay:1.35s;animation:alarmPulse 2s 1.35s infinite}
@keyframes alarmPulse{0%,100%{background:rgba(251,90,110,.07)}50%{background:rgba(251,90,110,.16)}}
.sev{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;font:700 11px/1 var(--mono);letter-spacing:.08em}
.sev-crit{background:var(--red);color:#1a0508}
.sev-high{background:var(--amber);color:#1d1203}
.sev-med{background:#facc15;color:#1d1803}
.sev-info{background:var(--brand-2);color:#0b0d18}
.sev-ok{background:var(--green);color:#03170f}

.mail{border:1px solid var(--line-2);border-radius:12px;background:var(--panel-2);padding:16px 18px;opacity:0;transform:translateY(10px);transition:all .5s var(--ease)}
.layer.is-active .mail{opacity:1;transform:none;transition-delay:.15s}
.mail-meta{display:grid;gap:4px;font-size:12px;color:var(--text-2);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px}
.mail-meta span{display:inline-block;width:56px;color:var(--muted)}
.mail-subj{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;letter-spacing:-.01em;margin-bottom:8px}
.mail p{font-size:13.5px;color:var(--text-2);line-height:1.55}
.mail-actions{display:flex;gap:8px;margin-top:12px}
.syslog{margin:0;padding:12px 14px;border-radius:10px;background:#07080c;border:1px solid var(--line);font:400 11.5px/1.6 var(--mono);color:#8fd8e6;white-space:pre-wrap;word-break:break-all;opacity:0;transition:opacity .5s .45s}
.layer.is-active .syslog{opacity:1}
.channels{display:flex;gap:8px;flex-wrap:wrap;font-size:11.5px}
.channels span{padding:5px 9px;border-radius:6px;border:1px solid var(--line-2);color:var(--text-2)}

.mindmap{width:100%;height:auto;max-height:100%}
.mm-links path{fill:none;stroke:var(--line-3);stroke-width:1.2;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1s var(--ease)}
.mm-links path.mm-alert{stroke:rgba(251,90,110,.6)}
.layer.is-active .mm-links path{stroke-dashoffset:0}
.mm-nodes g{opacity:0;transition:opacity .45s var(--ease);transition-delay:calc(.25s + var(--i,0) * .12s)}
.layer.is-active .mm-nodes g{opacity:1}
.mm-nodes rect{fill:var(--panel-2);stroke:var(--line-2)}
.mm-nodes text{fill:var(--text);font:500 12.5px var(--mono);text-anchor:middle}
.mm-nodes text.t1{fill:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.mm-nodes text.t2{font-size:11.5px}
.mm-center rect{fill:var(--brand);stroke:var(--brand-3)}
.mm-center text{fill:#fff;font-weight:600;font-size:14px}
.mm-sens rect{fill:rgba(34,211,238,.08);stroke:rgba(34,211,238,.45)}
.mm-sens text{fill:var(--sight-2)}
.mm-alertnode rect{fill:rgba(251,90,110,.12);stroke:rgba(251,90,110,.55)}
.mm-alertnode text{fill:#ff97a4;font-weight:600}

.evidence{border:1px solid var(--line-2);border-radius:14px;background:var(--panel-2);padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.ev-head{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;letter-spacing:.06em}
.evidence h4{font-size:19px;font-weight:600;letter-spacing:-.02em}
.ev-list{list-style:none;display:grid;gap:2px}
.ev-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;opacity:0;transform:translateX(-6px);transition:all .4s var(--ease)}
.layer.is-active .ev-list li{opacity:1;transform:none;transition-delay:calc(.2s + var(--i) * .2s)}
.ev-list .dim{margin-left:auto;font:400 12px/1 var(--mono)}
.ok{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(52,211,153,.15);color:var(--green);font-size:11px;font-weight:700}
.sig{font-size:12px;padding:10px 12px;border-radius:9px;background:#07080c;border:1px dashed var(--line-2);color:var(--brand-3)}
.evidence .btn-mini{align-self:flex-start}

.steps{position:relative}
.step{min-height:max(72vh,480px);display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.28;transition:opacity .35s var(--ease)}
.step.is-active{opacity:1}
.step:first-child{min-height:max(60vh,420px)}
.step:last-child{min-height:max(70vh,460px)}
.step-time{display:none;font-size:12.5px;color:var(--sight-2);margin-bottom:12px}
.step h3{font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.18;letter-spacing:-.03em;font-weight:600;margin-bottom:14px}
.step p{font-size:1.04rem;color:var(--text-2);line-height:1.65}
.step p + p{margin-top:12px}
.step p.dim{color:var(--muted)}

/* ---------- try it ---------- */
.tryit{padding:120px 0 120px}
.try{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:22px;align-items:start}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.presets button{height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);font:500 13px/1 var(--mono);color:var(--text-2);transition:all .2s}
.presets button:hover{border-color:var(--line-3);color:var(--text)}
.presets button.is-on{background:rgba(99,102,241,.16);border-color:rgba(129,140,248,.5);color:var(--brand-3)}
.editor{border-radius:14px;border:1px solid var(--line-2);background:#080a0f;overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.editor:focus-within{border-color:rgba(129,140,248,.55);box-shadow:0 0 0 3px rgba(99,102,241,.15),0 30px 80px -40px rgba(0,0,0,.9)}
.bytes{font-size:11px}
.editor-body{position:relative;min-height:260px}
.editor-body .hl,.editor-body textarea{margin:0;padding:18px 20px;font:400 14.5px/1.75 var(--mono);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;tab-size:2;letter-spacing:0}
.editor-body .hl{position:absolute;inset:0;color:var(--text-2);pointer-events:none;overflow:hidden}
.editor-body textarea{position:relative;display:block;width:100%;min-height:260px;resize:none;overflow:hidden;border:0;outline:0;background:transparent;color:transparent;caret-color:var(--sight);-webkit-text-fill-color:transparent}
.editor-body textarea::selection{background:rgba(34,211,238,.25);-webkit-text-fill-color:transparent}
.hl .k{color:#c4b5fd}
.hl .s{color:#86efac}
.hl .n{color:#fdba74}
.hl .c{color:#5d6478;font-style:italic}
.hl .sc{color:var(--sight-2);background:rgba(34,211,238,.12);border-radius:3px;box-shadow:0 1px 0 rgba(34,211,238,.6)}
.hl .bad{color:#ff97a4;background:rgba(251,90,110,.14);border-radius:3px}
.try-foot{margin-top:12px;font-size:12.5px;color:var(--muted)}

.try-result{border-radius:14px;border:1px solid var(--line-2);background:linear-gradient(180deg,var(--panel-2),var(--panel));overflow:hidden}
.verdict-big{display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line);transition:background .3s}
.verdict-big .sev{height:30px;padding:0 12px;font-size:12px}
.verdict-big b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.verdict-big div span{display:block;font-size:13px;color:var(--muted)}
.verdict-big.v-crit{background:linear-gradient(90deg,rgba(251,90,110,.14),transparent)}
.verdict-big.v-high{background:linear-gradient(90deg,rgba(245,176,65,.12),transparent)}
.verdict-big.v-med{background:linear-gradient(90deg,rgba(250,204,21,.09),transparent)}
.verdict-big.v-ok{background:linear-gradient(90deg,rgba(52,211,153,.1),transparent)}
.rgroup{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);align-items:start}
.rgroup-col{grid-template-columns:1fr}
.rk{font:500 11px/26px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.rv{display:flex;flex-wrap:wrap;gap:6px;min-height:26px;align-items:center}
.rv .none{font-size:13px;color:var(--muted)}
.hits{list-style:none;display:grid;gap:8px;margin-top:2px}
.hits li{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;padding:11px 12px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid var(--line);animation:rowIn .35s var(--ease) both}
.hits li .sev{height:22px;font-size:10px;grid-row:span 2;align-self:center}
.hits li b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.hits li span{font-size:12.5px;color:var(--muted);line-height:1.45}
.hits .none{padding:12px;font-size:13.5px;color:var(--text-2);border:1px dashed var(--line-2);border-radius:10px;background:none;display:block}
.rawrow{padding:12px 20px 16px}
.rawrow summary{cursor:pointer;font-size:12px;color:var(--brand-3);list-style:none}
.rawrow summary::before{content:"▸ ";transition:transform .2s}
.rawrow[open] summary::before{content:"▾ "}
.rawrow pre{margin-top:10px;padding:12px 14px;border-radius:10px;background:#07080c;border:1px solid var(--line);font:400 12px/1.6 var(--mono);color:var(--text-2);white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto}

/* ---------- performance ---------- */
.perf{padding:120px 0 60px}
.perf-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.perf .section-head{margin-bottom:0}
.perf-stats{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:30px}
.perf-stats b{display:block;font-size:clamp(1.6rem,2.6vw,2rem);font-weight:600;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.perf-stats span{display:block;margin-top:4px;font-size:13px;color:var(--muted);max-width:15em;line-height:1.4}
.bench{border:1px solid var(--line-2);border-radius:16px;background:linear-gradient(180deg,var(--panel-2),var(--panel));overflow:hidden;box-shadow:0 40px 100px -50px rgba(99,102,241,.55)}
.bench .chrome-title{flex:1}
.bench-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:14px 20px;border-bottom:1px solid var(--line)}
.bench-q{font-size:14.5px;font-weight:500;color:var(--text)}
.bench-q small{display:block;margin-top:3px;font:400 11.5px/1.4 var(--mono);color:var(--muted)}
.bench-ms{align-self:center;font:600 15px/1 var(--mono);color:var(--sight-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.bench-bar{grid-column:1/-1;height:6px;border-radius:3px;background:rgba(148,163,184,.09);overflow:hidden}
.bench-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--sight));box-shadow:0 0 10px rgba(34,211,238,.45);transition:width 1.2s var(--ease)}
.bench.is-in .bench-bar i{width:var(--w)}
.bench-row:nth-child(3) .bench-bar i{transition-delay:.08s}.bench-row:nth-child(4) .bench-bar i{transition-delay:.16s}.bench-row:nth-child(5) .bench-bar i{transition-delay:.24s}
.bench-row:nth-child(6) .bench-bar i{transition-delay:.32s}.bench-row:nth-child(7) .bench-bar i{transition-delay:.4s}.bench-row:nth-child(8) .bench-bar i{transition-delay:.48s}
.bench-axis{display:flex;justify-content:space-between;padding:12px 20px 0;font:500 11px/1 var(--mono);color:var(--muted)}
.bench-note{padding:10px 20px 16px;font-size:12px;color:var(--muted);line-height:1.55}

/* ---------- noise management ---------- */
.noise{padding:110px 0 60px}
.noise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ncard{display:flex;flex-direction:column;gap:18px;padding:22px;border-radius:16px;border:1px solid var(--line-2);background:var(--panel)}
.ncard .feature-k{font-size:12px}
.ncard h3{margin-top:-8px;font-size:18px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ncard p{font-size:14.5px;color:var(--text-2);line-height:1.58}
.nmock{display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:184px;padding:14px;border-radius:12px;border:1px solid var(--line);background:#090b10}
.spark{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;height:92px}
.spark span{display:block;height:var(--h);border-radius:2px 2px 1px 1px;background:rgba(129,140,248,.32)}
.spark span.hot{background:var(--amber);box-shadow:0 0 10px rgba(245,176,65,.5)}
.spark-meta{display:flex;justify-content:space-between;gap:8px;font:500 11px/1.3 var(--mono);color:var(--muted)}
.spark-meta b{color:var(--amber);font-weight:600}
.nm-subj{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.35}
.nm-line{font:400 11.5px/1.5 var(--mono);color:var(--text-2)}
.nm-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.nm-btns .btn-mini{height:26px;padding:0 10px;font-size:11.5px}
.btn-mini.link{background:transparent;color:var(--brand-3);padding:0 4px}
.durs{display:flex;flex-wrap:wrap;gap:6px}
.durs span{padding:5px 10px;border-radius:7px;border:1px solid var(--line-2);font:500 11.5px/1 var(--mono);color:var(--text-2)}
.durs span.on{background:rgba(99,102,241,.18);border-color:rgba(129,140,248,.55);color:var(--brand-3)}
.nm-k{font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nm-checks{list-style:none;display:grid;gap:7px;font-size:12.5px;color:var(--text-2)}
.nm-checks li{display:flex;align-items:center;gap:8px}

/* ---------- AI ---------- */
.ai{padding:110px 0 60px}
.ai-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:18px}
.acard{display:flex;flex-direction:column;gap:18px;padding:24px;border-radius:16px;border:1px solid var(--line-2);background:var(--panel)}
.acard h3{font-size:19px;font-weight:600;letter-spacing:-.02em}
.acard p{font-size:14.5px;color:var(--text-2);line-height:1.58}
.chat{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:12px;border:1px solid var(--line);background:#090b10}
.bubble-q{align-self:flex-end;max-width:90%;padding:10px 14px;border-radius:14px 14px 4px 14px;background:rgba(99,102,241,.16);border:1px solid rgba(129,140,248,.35);font-size:14px;color:var(--text);line-height:1.5}
.bubble-a{align-self:flex-start;width:100%;max-width:96%;padding:12px 14px;border-radius:14px 14px 14px 4px;background:var(--panel-2);border:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px}
.bubble-a .nm-k{margin-bottom:-2px}
.plan-chips{display:flex;flex-wrap:wrap;gap:6px}
.plan-chips .chip{height:24px;font-size:11.5px}
.answer-line{font-size:13.5px;color:var(--text-2);line-height:1.5}
.answer-line b{color:var(--text)}
.answer-actions{display:flex;flex-wrap:wrap;gap:6px}
.ai-links{list-style:none;display:grid;gap:10px}
.ai-links li{display:grid;grid-template-columns:34px 1fr;gap:4px 12px;align-items:start;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#090b10}
.ai-links .pico{grid-row:span 2;width:34px;height:34px}
.ai-links b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.ai-links span:not(.pico){font-size:13px;color:var(--muted);line-height:1.45}

/* ---------- product features ---------- */
.product{padding:120px 0 60px}
.feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.feature-rev .feature-copy{order:2}
.feature-k{font-size:12.5px;color:var(--sight-2);letter-spacing:.04em}
.feature h3{margin:14px 0 14px;font-size:clamp(1.55rem,2.6vw,2.1rem);line-height:1.12;letter-spacing:-.035em;font-weight:600}
.feature p{color:var(--text-2);font-size:1.03rem}
.ticks{list-style:none;display:grid;gap:10px;margin-top:20px}
.ticks li{position:relative;padding-left:26px;font-size:14.8px;color:var(--text-2);line-height:1.5}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:12px;border-radius:3px;background:linear-gradient(135deg,var(--brand-2),var(--brand));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.ticks li:nth-child(3n)::before{background:linear-gradient(135deg,var(--sight-2),var(--sight))}
.shot{position:relative;border-radius:14px;padding:8px;background:linear-gradient(180deg,rgba(129,140,248,.22),rgba(129,140,248,.04) 60%,rgba(34,211,238,.06));box-shadow:0 50px 120px -50px rgba(99,102,241,.55),0 30px 60px -30px rgba(0,0,0,.8);transform:perspective(1600px) rotateY(-4deg) rotateX(2deg);transition:transform .7s var(--ease)}
.feature-rev .shot{transform:perspective(1600px) rotateY(4deg) rotateX(2deg)}
.shot:hover,.feature-rev .shot:hover{transform:perspective(1600px) rotateY(0) rotateX(0)}
.shot img{width:100%;height:auto;border-radius:9px;border:1px solid rgba(255,255,255,.06)}
.shot::after{content:"";position:absolute;inset:auto 8px 8px 8px;height:30%;border-radius:0 0 9px 9px;background:linear-gradient(180deg,transparent,rgba(6,7,11,.55));pointer-events:none}

/* ---------- integrations flow ---------- */
.flow{padding:110px 0}
.flow-grid{display:grid;grid-template-columns:1fr minmax(160px,300px) 1fr;align-items:center;gap:0}
.flow-col{display:flex;flex-direction:column;gap:9px}
.flow-col{align-items:flex-start}
.flow-col:first-child{align-items:flex-end}
.flow-k{font-size:11.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.fpill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);font-size:14px;font-weight:500;transition:border-color .2s,transform .2s var(--ease)}
.fpill:hover{border-color:rgba(129,140,248,.5);transform:translateY(-1px)}
.fpill em{font:400 11.5px/1 var(--mono);font-style:normal;color:var(--muted)}
.flow-core{position:relative;height:380px;display:grid;place-items:center}
.flow-lines{position:absolute;inset:10px 0;width:100%;height:calc(100% - 20px)}
.flow-lines path{fill:none;stroke:rgba(129,140,248,.35);stroke-width:1;stroke-dasharray:4 6;animation:dash 1.6s linear infinite;vector-effect:non-scaling-stroke}
.flow-lines path:nth-child(n+6){stroke:rgba(34,211,238,.35)}
@keyframes dash{to{stroke-dashoffset:-20}}
.core-mark{position:relative;width:118px;height:118px;border-radius:28px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1a1f33,#0b0d15);border:1px solid rgba(129,140,248,.35);box-shadow:0 0 0 8px rgba(99,102,241,.06),0 0 60px -6px rgba(99,102,241,.6)}

/* ---------- security ---------- */
.secure{padding:110px 0}
.secure-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg-2)}
.sbox{padding:28px 24px 30px;border-right:1px solid var(--line)}
.sbox:last-child{border-right:0}
.sico{display:inline-block;font-size:12px;color:var(--sight-2);padding:5px 8px;border-radius:6px;border:1px solid rgba(34,211,238,.25);background:rgba(34,211,238,.06);margin-bottom:22px}
.sbox h4{font-size:17px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px}
.sbox p{font-size:14.5px;color:var(--text-2);line-height:1.55}

/* ---------- editions ---------- */
.editions{padding:110px 0}
.ed-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:960px;margin:0 auto}
.ed{position:relative;display:flex;flex-direction:column;padding:30px 28px 28px;border-radius:18px;border:1px solid var(--line-2);background:var(--panel)}
.ed-ee{background:linear-gradient(180deg,rgba(99,102,241,.12),rgba(13,16,23,1) 45%);border-color:rgba(129,140,248,.45);box-shadow:0 40px 100px -50px rgba(99,102,241,.7)}
.ed-head{display:flex;justify-content:space-between;align-items:baseline}
.ed-head h3{font-size:22px;font-weight:600;letter-spacing:-.025em}
.ed-head span{font-size:12px}
.ed-price{margin:18px 0 6px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ed-price b{display:block;font-size:30px;font-weight:600;letter-spacing:-.035em}
.ed-price span{font-size:13.5px;color:var(--muted)}
.ed .ticks{margin:18px 0 28px;flex:1}
.ed .ticks li b{color:var(--text);font-weight:600}

/* AWS Marketplace band (under the edition cards) */
.aws{display:grid;grid-template-columns:1fr 1fr;gap:24px 44px;align-items:center;max-width:960px;margin:20px auto 0;padding:30px 30px 30px 28px;border-radius:18px;border:1px solid var(--line-2);background:linear-gradient(115deg,rgba(245,176,65,.07),rgba(13,16,23,0) 50%),var(--panel)}
.aws-badge{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(245,176,65,.1);border:1px solid rgba(245,176,65,.3);color:var(--amber)}
.aws h3{margin-top:14px;font-size:20px;font-weight:600;letter-spacing:-.022em;line-height:1.3}
.aws p{margin-top:10px;font-size:14.8px;line-height:1.6;color:var(--text-2)}
.aws .ticks{margin-top:0}
.cta .cta-mail{margin-top:22px;font-size:14.5px;color:var(--muted)}
.cta-mail a{color:var(--text);border-bottom:1px solid var(--line-2)}
.cta-mail a:hover{border-color:var(--brand-3)}

/* ---------- CTA ---------- */
.cta{padding:120px 0 140px;overflow:clip}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 40%,rgba(99,102,241,.22),transparent 70%)}
.cta-inner{position:relative;text-align:center}
.cta-mark{display:grid;place-items:center;margin-bottom:28px}
.cta-mark svg{filter:drop-shadow(0 20px 50px rgba(99,102,241,.5));animation:float 6s ease-in-out infinite}
.sight-cell{fill:#22d3ee;animation:sight 2.6s ease-in-out infinite}
@keyframes sight{0%,100%{fill:#22d3ee;filter:drop-shadow(0 0 0 rgba(34,211,238,0))}50%{fill:#a5f3fc;filter:drop-shadow(0 0 6px rgba(34,211,238,1))}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.cta h2{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.045em;font-weight:600}
.cta p{margin:18px auto 0;max-width:34em;color:var(--text-2);font-size:1.08rem}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:56px 0 28px;background:var(--bg-2)}
.footer-inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer-brand p{margin-top:12px;font-size:14px;max-width:24em}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap}
.footer-cols div{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--text-2)}
.footer-cols h5{font:500 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.footer-cols a:hover{color:var(--text)}
.footer-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px}

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

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav-links{gap:20px}
  .hero-inner{grid-template-columns:1fr;gap:48px}
  .console{max-width:640px}
  .scrolly{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px}
  .rail{display:none}
  .step-time{display:block}
  .try{grid-template-columns:1fr}
  .perf-grid,.ai-grid{grid-template-columns:1fr;gap:40px}
  .ai-grid{gap:18px}
  .noise-grid{grid-template-columns:1fr;max-width:640px}
  .feature{grid-template-columns:1fr;gap:36px}
  .feature-rev .feature-copy{order:0}
  .shot,.feature-rev .shot{transform:none}
  .secure-grid{grid-template-columns:1fr 1fr}
  .sbox:nth-child(2){border-right:0}
  .sbox:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:860px){
  :root{--gutter:16px;--nav-h:58px}
  .nav-toggle{display:block}
  .hide-sm{display:none}
  .nav-links{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;padding:8px 16px 16px;background:rgba(8,9,14,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .25s var(--ease)}
  .nav-links a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:16px}
  .nav-links a:last-child{border-bottom:0}
  .nav.is-open .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav.is-open{background:rgba(8,9,14,.97)}
  .hero{padding-top:44px}
  .metrics{grid-template-columns:1fr 1fr;margin-top:56px}
  .metrics li{padding:20px 14px 18px}
  .metrics li:nth-child(odd){padding-left:0}
  .metrics li:nth-child(2){border-right:0}
  .metrics li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .story{padding-top:96px}
  /* stacked scrollytelling: sticky stage on top, text scrolls below */
  .scrolly{grid-template-columns:1fr;gap:0}
  .stage-wrap{position:sticky;top:calc(var(--nav-h) + 8px);z-index:2;height:min(430px,52vh);margin-bottom:0}
  .stage-wrap::after{content:"";position:absolute;left:-16px;right:-16px;top:100%;height:28px;background:linear-gradient(180deg,var(--bg),transparent);pointer-events:none}
  .stage{position:relative;top:0;height:100%}
  .stage-body{padding:14px}
  .layer{inset:14px;gap:12px}
  /* --region = the area left below the sticky stage. Each step is exactly that tall with its text
     centred, so one step's text leaves as the next arrives. The stage-wrap's bottom margin (cancelled
     by the steps' negative top margin) makes the stage let go when the LAST text is centred, instead
     of keeping it stuck until that text has slid underneath. */
  .scrolly{--stage-h:min(430px,52vh);--region:calc(100vh - var(--nav-h) - 8px - var(--stage-h))}
  @supports (height:100svh){.scrolly{--stage-h:min(430px,52svh);--region:calc(100svh - var(--nav-h) - 8px - var(--stage-h))}}
  .stage-wrap{height:var(--stage-h);margin-bottom:var(--region)}
  .steps{margin-top:calc(-1 * var(--region))}
  .step,.step:first-child,.step:last-child{min-height:var(--region);justify-content:center;padding:14px 0;opacity:.3}
  /* the step text already says these; keep the small stage uncluttered */
  .layer .note,.layer .channels,.evidence .sig{display:none}
  .step.is-active{opacity:1}
  .step h3{font-size:1.38rem}
  .step p{font-size:.98rem}
  .tryit,.product,.flow,.secure,.editions,.perf,.noise,.ai{padding:84px 0}
  .flow-grid{grid-template-columns:1fr;gap:28px}
  .flow-col,.flow-col:first-child{align-items:stretch}
  .flow-core{height:150px;order:-1}
  .flow-lines{display:none}
  .secure-grid{grid-template-columns:1fr}
  .sbox{border-right:0;border-bottom:1px solid var(--line)}
  .sbox:last-child{border-bottom:0}
  .ed-grid{grid-template-columns:1fr}
  .aws{grid-template-columns:1fr;max-width:640px;padding:26px 22px}
  .cta{padding:84px 0 100px}
  .footer-cols{gap:36px}
}
@media (max-width:560px){
  .nav-cta{gap:10px}
  .nav-cta .btn-primary{display:none}
  .nav-links .show-xs{display:block;color:var(--brand-3)}
  .console-head,.srow{grid-template-columns:60px minmax(0,1fr) 54px minmax(0,.9fr) 60px;gap:7px;padding:0 12px}
  .srow .t{font-size:11px}
  .card-head .mono{display:none}
  .baseline-head{font-size:10px}
  .baseline{padding:10px 12px 8px}
  .bars{height:56px}
  .card{padding:12px 14px}
  .kv{gap:7px}
  .col-ip,.srow .ip{display:none}
  .console-stats{grid-template-columns:repeat(2,1fr)}
  .console-stats div:nth-child(2){border-right:0}
  .console-stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .console-rows{height:280px}
  .srow{font-size:11.5px}
  .install-note{display:none}
  .kv div{grid-template-columns:88px 1fr}
  .kv dd{font-size:12.5px}
  .code{font-size:11.6px;padding:12px 14px}
  .pk{width:100%}
  .pnode{padding:8px 10px 8px 6px}
  .pnode span{font-size:11px}
  .pipe{gap:9px}
  .pico{width:30px;height:30px}
  .pipe-line{left:21px}
  .rgroup{grid-template-columns:1fr;gap:6px}
  .editor-body .hl,.editor-body textarea{font-size:13.5px;padding:14px 14px}
  .mail p{font-size:12.5px}
  .syslog{font-size:10.5px}
  .checks li{padding:9px 14px;font-size:13px}
  .bench-row{padding:12px 14px}
  .bench-axis{padding:10px 14px 0}
  .bench-note{padding:10px 14px 14px}
  .ncard,.acard{padding:18px}
}

/* reduced motion: keep everything visible, stop loops */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none}
}