/* ════════════════════════════════════════════════════════════════════════
   Marivant — marketing site
   Graphite & Steel, dark hero register. Geist + Geist Mono.
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* Tokens mirror the shipped Marivant app (src/index.css :root/.dark, Marine palette).
   Warm-graphite dark (brand hero) + cool Marine light (broker default). Cool steel-blue
   accent on both. The WebGL hero keeps its own marine palette (see hero.js), exactly as
   the app's /experience showpiece themes keep theirs separate from app tokens. */
:root, :root[data-theme="dark"] {
  --ink:#0B0A08;
  --canvas:#100F0D;
  --surface:#1A1815;
  --surface-2:#211F1B;
  --surface-3:#2A2722;
  --border:#2C2A24;
  --border-strong:#3C392F;
  --foreground:#EDEAE3;
  --muted:#A09C92;
  --tertiary:#7C786E;
  --faint:#615D54;
  --accent:#6BA6EA;
  --accent-2:#9CC4F2;
  --accent-deep:#1F5596;
  --accent-wash:#16263B;
  --on-accent:#0A1322;
  --positive:#5FB985;
  --warning:#D9A441;
  --hero-fallback:radial-gradient(120% 90% at 62% 40%, #14304a 0%, #0a141d 45%, #070a0d 100%);
  --scrim:rgba(7,11,15,.40);
  --veil:#070B0F;
  --card-glass:rgba(26,24,21,.84);
  --grain-op:.03;

  --r-sm:9px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --elev-1:0 0 0 1px rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -20px rgba(0,0,0,.8);
  --elev-2:0 0 0 1px rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.5), 0 24px 56px -28px rgba(0,0,0,.9);
  --elev-3:0 0 0 1px rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.55), 0 48px 100px -40px rgba(0,0,0,.95);
  --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
}

:root[data-theme="light"] {
  --ink:#E2E1DC;
  --canvas:#EBEAE6;
  --surface:#FCFBFA;
  --surface-2:#F3F2EE;
  --surface-3:#E9E7E1;
  --border:#DCD9D2;
  --border-strong:#C8C4BB;
  --foreground:#1B1A18;
  --muted:#5B5953;
  --tertiary:#88857E;
  --faint:#A4A199;
  --accent:#1F5596;
  --accent-2:#18416F;
  --accent-deep:#143C6B;
  --accent-wash:#E4EAF3;
  --on-accent:#F6F9FC;
  --positive:#2F8A5B;
  --warning:#B17A22;
  --hero-fallback:radial-gradient(120% 90% at 62% 40%, #cfe0f2 0%, #e6ebf0 45%, #ebeae6 100%);
  --scrim:rgba(238,240,243,.32);
  --veil:#EDF1F6;
  --card-glass:rgba(252,251,250,.88);
  --grain-op:.016;
  --elev-1:0 0 0 1px rgba(38,30,22,.05), 0 1px 2px -1px rgba(38,30,22,.10), 0 2px 6px -2px rgba(38,30,22,.08);
  --elev-2:0 0 0 1px rgba(38,30,22,.06), 0 4px 10px -4px rgba(38,30,22,.12), 0 14px 30px -10px rgba(38,30,22,.16);
  --elev-3:0 0 0 1px rgba(38,30,22,.05), 0 10px 24px -8px rgba(38,30,22,.16), 0 40px 80px -28px rgba(38,30,22,.24);
}

* , *::before, *::after { box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; background:var(--canvas); }
body {
  margin:0; background:transparent; color:var(--foreground);
  font-family:'Geist', system-ui, sans-serif; font-size:16px; line-height:1.5;
  overflow-x:hidden;
}
body::after { /* film grain */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:200; opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.025em; color:var(--foreground); text-wrap:balance; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 32px; }
@media (max-width:680px){ .wrap{ padding:0 20px; } }

/* ── atoms ─────────────────────────────────────────────────────────────── */
.eyebrow {
  font-family:'Geist Mono', monospace; font-weight:500; text-transform:uppercase;
  letter-spacing:.18em; font-size:11px; color:var(--accent);
}
.mono { font-family:'Geist Mono', monospace; font-variant-numeric:tabular-nums; }
.fig { font-family:'Geist Mono', monospace; font-variant-numeric:tabular-nums; font-weight:500; letter-spacing:-.01em; }
.muted { color:var(--muted); }
.acc { color:var(--accent); }

.btn {
  font-family:'Geist', sans-serif; font-weight:500; font-size:15px; border-radius:999px;
  display:inline-flex; align-items:center; gap:9px; padding:0 22px; height:48px; cursor:pointer;
  border:1px solid transparent; transition:.22s var(--ease); white-space:nowrap; position:relative;
}
.btn.primary { background:var(--accent); color:var(--on-accent); box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 8px 30px -10px var(--accent); }
.btn.primary:hover { background:var(--accent-2); transform:translateY(-1px); box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 14px 40px -12px var(--accent); }
.btn.ghost { background:transparent; color:var(--foreground); border-color:var(--border-strong); }
.btn.ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn.sm { height:40px; font-size:14px; padding:0 18px; }
.btn .arrow { transition:transform .25s var(--ease); }
.btn:hover .arrow { transform:translateX(3px); }

/* ── logo / chevron mark ───────────────────────────────────────────────── */
.logo { display:inline-flex; align-items:center; gap:11px; }
.logo .mark { width:30px; height:30px; color:var(--accent); flex:0 0 auto; }
.logo .mark path { stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.logo .mark path:nth-of-type(2){ opacity:.55; }
.logo .word { font-weight:600; font-size:20px; letter-spacing:-.02em; }
/* draw-on: paths start hidden, .drawn animates dash */
.mark.draw path { stroke-dasharray:60; stroke-dashoffset:60; }
.mark.draw.drawn path { animation:chevDraw 1.1s var(--ease) forwards; }
.mark.draw.drawn path:nth-of-type(2){ animation-delay:.18s; }
@keyframes chevDraw { to { stroke-dashoffset:0; } }
/* settle into water ripple after draw */
.mark.ripple path { transform-box:fill-box; transform-origin:center; animation:chevtide 3.6s cubic-bezier(.45,0,.55,1) infinite; }
.mark.ripple path:nth-of-type(2){ animation-delay:.5s; }
@keyframes chevtide { 0%,100%{ transform:translateY(.8px);} 45%{ transform:translateY(-1.1px);} }

/* ── nav ───────────────────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; transition:padding .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled { padding:14px 32px; }
.nav { transition:transform .42s var(--ease), opacity .42s var(--ease), padding .3s var(--ease); }
.nav.hide { transform:translateY(-130%); opacity:0; pointer-events:none; }
.navright { display:flex; align-items:center; gap:14px; }
.navlinks {
  display:flex; align-items:center; gap:3px; padding:0 5px; height:44px;
  border-radius:999px; background:var(--card-glass); border:1px solid var(--border);
  box-shadow:var(--elev-1);
}
.navlinks a {
  font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none; white-space:nowrap;
  height:34px; padding:0 15px; display:inline-flex; align-items:center; border-radius:999px;
  transition:color .18s, background .18s, box-shadow .18s;
}
.navlinks a:hover {
  color:var(--foreground); background:color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow:0 1px 4px rgba(0,0,0,.10), inset 0 0 0 1px var(--border);
}
.navright .btn.sm { height:44px; font-size:13.5px; }

/* nav CTA — quiet glass with an accent ring, sized to match the links */
.nav-cta {
  height:44px; padding:0 18px; font-size:13.5px; font-weight:500; border-radius:999px;
  color:var(--foreground); background:var(--card-glass); border:1px solid var(--border);
  box-shadow:var(--elev-1); transition:color .18s, background .18s, box-shadow .18s;
}
.nav-cta .dot { width:7px; height:7px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); animation:ctaPulse 2.6s ease-in-out infinite; }
@keyframes ctaPulse { 0%,100%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);} 50%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 6%, transparent);} }
.nav-cta:hover { color:var(--foreground); background:color-mix(in srgb, var(--surface) 92%, transparent); box-shadow:0 2px 10px -2px var(--accent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }

/* footer theme segmented control (light / dark / system) */
.themeseg { display:inline-flex; gap:3px; padding:4px; border-radius:999px; background:var(--card-glass); border:1px solid var(--border); box-shadow:var(--elev-1); }
.themeseg button { width:34px; height:30px; display:grid; place-items:center; border:0; border-radius:999px; background:transparent; color:var(--tertiary); cursor:pointer; transition:color .16s, background .16s; padding:0; }
.themeseg button svg { width:15px; height:15px; }
.themeseg button:hover { color:var(--foreground); }
.themeseg button.on { background:var(--accent); color:var(--on-accent); }
@media (max-width:860px){ .navlinks{ display:none; } .nav{ padding:16px 20px; } }
@media (max-width:560px){ .foot .base{ flex-direction:column; align-items:flex-start; gap:18px; } }

/* hero text-legibility veil — a whisper of cool lift behind the headline only.
   The marine sea is pale/dark enough on its own; keep this nearly invisible. */
.hero .veil {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(90% 70% at 0% 88%,
      color-mix(in srgb, var(--veil) 34%, transparent) 0%,
      transparent 52%);
}
/* dark mode: the additive sea is bright across the hero, so the headline needs a real scrim */
:root[data-theme="dark"] .hero .veil {
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--veil) 82%, transparent) 0%,
      color-mix(in srgb, var(--veil) 46%, transparent) 30%,
      color-mix(in srgb, var(--veil) 12%, transparent) 52%,
      transparent 66%),
    linear-gradient(to top, color-mix(in srgb, var(--veil) 40%, transparent) 0%, transparent 30%);
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden;
}
.bg-gl {
  position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:0;
  background:var(--hero-fallback);
}
.bg-gl.gl-failed { background:var(--hero-fallback); }
/* orbit ribbon overlay — sits above content, never intercepts clicks */
.orbit-gl { position:fixed; inset:0; width:100vw; height:100vh; z-index:3; pointer-events:none; }
/* content rides above the fixed living world */
.hero, section, .foot { position:relative; z-index:1; }
.hero .wrap { position:relative; z-index:2; width:100%; padding-top:80px; }
.hero-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:30px; }
.hero-eyebrow .tick { width:26px; height:1px; background:var(--accent); opacity:.6; }
.hero h1 {
  font-size:clamp(42px, 7.4vw, 104px); line-height:.98; letter-spacing:-.04em; font-weight:600;
  max-width:15ch;
}
.hero h1 .dim { color:var(--muted); }
.hero h1 em { font-style:normal; color:var(--accent); }
.hero .sub {
  margin-top:30px; font-size:clamp(17px,1.6vw,21px); line-height:1.55; color:var(--muted);
  max-width:60ch; font-weight:300;
}
.hero .cta-row { margin-top:42px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero .scrollcue {
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:2;
  font-family:'Geist Mono', monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tertiary); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero .scrollcue .line { width:1px; height:38px; background:linear-gradient(var(--accent), transparent); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1);transform-origin:top;} 55%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* signature switcher */

/* ── section scaffolding ───────────────────────────────────────────────── */
section { position:relative; }
.foot { position:relative; }
/* content bands ride frosted glass over the living world */
.band::before, .foot::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, transparent 0%, var(--scrim) 7%, var(--scrim) 100%);
}
.band { padding:120px 0; }
.band.tight { padding:88px 0; }
.shead { max-width:760px; margin-bottom:60px; }
.shead .eyebrow { display:block; margin-bottom:20px; }
.shead h2 { font-size:clamp(30px, 4.4vw, 54px); line-height:1.04; letter-spacing:-.035em; }
.shead p { margin-top:22px; font-size:19px; line-height:1.6; color:var(--muted); font-weight:300; max-width:60ch; }

/* reveal */
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-d="1"]{ transition-delay:.08s; }
[data-reveal][data-d="2"]{ transition-delay:.16s; }
[data-reveal][data-d="3"]{ transition-delay:.24s; }
[data-reveal][data-d="4"]{ transition-delay:.32s; }

/* card depth — driven by scroll position in app.js (perspective rotateX + parallax + fade) */
[data-tilt] { transform-origin:center 80%; will-change:transform, opacity; transition:none; backface-visibility:hidden; }
@media (prefers-reduced-motion: reduce){ [data-tilt]{ transform:none !important; opacity:1 !important; } }

/* ── value pillars (the why) ───────────────────────────────────────────── */
.pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:color-mix(in srgb, var(--border) 50%, transparent); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.pillar { background:var(--card-glass); padding:34px 30px; position:relative; transition:background .3s; }
.pillar:hover { background:var(--surface-2); }
.pillar .n { font-family:'Geist Mono', monospace; font-size:11px; color:var(--accent); letter-spacing:.1em; }
.pillar h3 { font-size:21px; margin-top:34px; letter-spacing:-.02em; }
.pillar p { margin-top:12px; font-size:14.5px; line-height:1.55; color:var(--muted); font-weight:300; }
@media (max-width:980px){ .pillars{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pillars{ grid-template-columns:1fr; } }

/* ── thesis / two registers ────────────────────────────────────────────── */
.regs { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.reg { border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--elev-2); background:var(--surface); }
.reg .top { padding:34px 34px 30px; }
.reg .eyebrow { margin-bottom:16px; display:block; }
.reg h3 { font-size:27px; letter-spacing:-.02em; }
.reg p { margin-top:14px; font-size:15.5px; line-height:1.6; color:var(--muted); font-weight:300; }
.reg .strip { height:160px; position:relative; overflow:hidden; border-top:1px solid var(--border); }
@media (max-width:860px){ .regs{ grid-template-columns:1fr; } }

/* ── card / mock primitives (reused in Navigator + features) ───────────── */
.card { background:var(--card-glass); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--elev-1); }
.card.nested { background:color-mix(in srgb, var(--surface-2) 78%, transparent); box-shadow:none; }
.kpi { background:color-mix(in srgb, var(--surface-2) 70%, transparent); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 17px; }
.kpi .lab { font-family:'Geist Mono', monospace; text-transform:uppercase; letter-spacing:.12em; font-size:9.5px; color:var(--faint); }
.kpi .val { font-family:'Geist Mono', monospace; font-variant-numeric:tabular-nums; font-weight:500; font-size:27px; letter-spacing:-.02em; margin-top:9px; line-height:1; }
.kpi .delta { font-family:'Geist Mono', monospace; font-size:11px; margin-top:8px; }
.pos { color:var(--positive); } .mut2 { color:var(--tertiary); }
.statuspill { display:inline-flex; align-items:center; gap:5px; font-family:'Geist Mono', monospace; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; border-radius:999px; padding:3px 9px; background:var(--accent-wash); color:var(--accent); }

/* ── Navigator flagship ────────────────────────────────────────────────── */
.nav-flagship { }
.navmock {
  border:1px solid var(--border-strong); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--elev-3); background:var(--card-glass); margin-top:8px;
}
.navmock .chrome { height:42px; background:var(--surface-2); display:flex; align-items:center; gap:8px; padding:0 16px; border-bottom:1px solid var(--border); }
.navmock .chrome i { width:11px; height:11px; border-radius:999px; background:var(--border-strong); }
.navmock .chrome .tag { margin-left:10px; font-family:'Geist Mono', monospace; font-size:10px; letter-spacing:.1em; color:var(--tertiary); text-transform:uppercase; }
.navbody { padding:28px 30px; display:grid; grid-template-columns:1fr 250px; gap:26px; }
@media (max-width:860px){ .navbody{ grid-template-columns:1fr; } .navrail{ display:none; } }
.userturn { display:flex; justify-content:flex-end; margin-bottom:18px; }
.userturn .b { background:var(--surface-2); border:1px solid var(--border); border-radius:14px 14px 4px 14px; padding:11px 16px; font-size:15px; max-width:78%; }
.thinking { display:flex; flex-direction:column; gap:9px; font-family:'Geist Mono', monospace; font-size:12px; color:var(--tertiary); margin-bottom:20px; }
.thinking .trace-lbl { display:block; margin-bottom:2px; }
.thinking .step { display:flex; align-items:center; gap:11px; opacity:.25; transition:opacity .4s var(--ease); }
.thinking .step.on { opacity:1; }
.thinking .step .tk { width:13px; height:13px; border-radius:999px; border:1.5px solid var(--accent); flex:0 0 auto; position:relative; }
.thinking .step.done .tk { background:var(--accent); }
.thinking .step.run .tk { border-right-color:transparent; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.navans .hd { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.navans .hd .mk { width:26px; height:26px; border-radius:8px; background:var(--accent-wash); color:var(--accent); display:grid; place-items:center; flex:0 0 auto; }
.navans .hd .mk svg { width:15px; height:15px; }
.navans .hd .mk path { stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.navans .hd .nm { font-weight:600; font-size:14px; }
.navans .hd .src { margin-left:auto; font-family:'Geist Mono', monospace; font-size:10px; color:var(--faint); letter-spacing:.04em; }
.navans .lede { font-size:18px; line-height:1.55; font-weight:400; color:var(--foreground); max-width:60ch; }
.navans .lede b { font-weight:600; }
.kpiband { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:20px; }
.compt { margin-top:14px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.compt .r { display:flex; padding:11px 16px; font-size:13.5px; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.compt .r:last-child { border-bottom:0; }
.compt .r.h { background:var(--surface-2); }
.compt .r.h span { font-family:'Geist Mono', monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); }
.compt .nm2 { flex:1; font-weight:500; }
.compt .c { width:64px; text-align:right; font-family:'Geist Mono', monospace; }
.actions { margin-top:20px; display:flex; gap:9px; flex-wrap:wrap; }
.chip { font-size:13px; padding:8px 14px; border-radius:999px; cursor:pointer; transition:.18s; }
.chip.accent { background:var(--accent); color:var(--on-accent); font-weight:500; }
.chip.outline { background:transparent; border:1px solid var(--border-strong); color:var(--foreground); }
.chip.outline:hover { border-color:var(--accent); color:var(--accent); }
.navrail .box { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; }
.navrail .h { font-family:'Geist Mono', monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--faint); margin-bottom:13px; }
.navrail .it { display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size:12.5px; color:var(--muted); }
.navrail .it:first-of-type { border-top:0; }
.navrail .it .v { font-family:'Geist Mono', monospace; font-weight:500; color:var(--foreground); }

/* ── features ──────────────────────────────────────────────────────────── */
.features { display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; }
.feature { background:var(--card-glass); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px; overflow:hidden; position:relative; transition:border-color .3s, transform .3s var(--ease); }
.feature:hover { border-color:var(--border-strong); transform:translateY(-3px); }
.feature.lg { grid-column:span 4; }
.feature.sm { grid-column:span 2; }
.feature.half { grid-column:span 3; }
@media (max-width:980px){ .feature.lg,.feature.sm,.feature.half{ grid-column:span 6; } }
.feature .ic { width:42px; height:42px; border-radius:11px; background:var(--accent-wash); color:var(--accent); display:grid; place-items:center; margin-bottom:22px; }
.feature .ic svg { width:21px; height:21px; }
.feature h3 { font-size:22px; letter-spacing:-.02em; }
.feature p { margin-top:12px; font-size:15px; line-height:1.6; color:var(--muted); font-weight:300; max-width:46ch; }
.feature .demo { margin-top:26px; }

/* NL search demo */
.nlbar { display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:13px 20px; }
.nlbar .q { flex:1; font-size:15px; color:var(--foreground); min-height:21px; }
.nlbar .cursor { display:inline-block; width:2px; height:18px; background:var(--accent); vertical-align:middle; animation:blink 1s steps(2) infinite; }
@keyframes blink { 0%,50%{opacity:1;} 51%,100%{opacity:0;} }
.nlchips { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.nlchip { font-family:'Geist Mono', monospace; font-size:11px; padding:5px 11px; border-radius:999px; background:var(--accent-wash); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); opacity:0; transform:translateY(6px); transition:.4s var(--ease); }
.nlchip.in { opacity:1; transform:none; }

/* voice demo — a live hands-free mock */
.voicemock { display:flex; flex-direction:column; gap:18px; }
.vrow { display:flex; align-items:center; gap:16px; }
.vmic { position:relative; width:48px; height:48px; border-radius:999px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; flex:0 0 auto; box-shadow:0 6px 20px -6px var(--accent); }
.vmic svg { width:21px; height:21px; position:relative; z-index:1; }
.vmic .ring { position:absolute; inset:0; border-radius:999px; border:1.5px solid var(--accent); animation:micring 2.4s ease-out infinite; }
.vmic .ring:nth-child(2){ animation-delay:1.2s; }
@keyframes micring { 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.9); opacity:0; } }
.vwave { display:flex; align-items:center; gap:3px; height:42px; flex:1; }
.vwave i { width:3px; border-radius:999px; background:var(--accent); opacity:.85; animation:eq 1s ease-in-out infinite; }
@keyframes eq { 0%,100%{ height:7px; opacity:.5; } 50%{ height:38px; opacity:1; } }
.vlines { display:flex; flex-direction:column; gap:11px; }
.vline { display:flex; align-items:baseline; gap:10px; font-size:13.5px; line-height:1.45; }
.vtag { font-family:'Geist Mono', monospace; font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); flex:0 0 auto; width:62px; padding-top:1px; }
.vtag.acc { color:var(--accent); }
.vtxt { color:var(--foreground); }
.vspeak { background:linear-gradient(90deg, var(--muted) 28%, var(--accent) 50%, var(--muted) 72%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:speak 2.6s linear infinite; }
@keyframes speak { to { background-position:-220% 0; } }

/* brochure demo — a real private-offering page + a live client page beside it */
.brochure-set { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:stretch; }
@media (max-width:520px){ .brochure-set{ grid-template-columns:1fr; } }
.offer { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:var(--elev-1); display:flex; flex-direction:column; }
.offer-hero { position:relative; padding:18px 18px 16px; background:linear-gradient(150deg, #15324a, #0c1f30 70%); overflow:hidden; }
.offer-hero::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 80% 0%, rgba(127,178,239,.32), transparent 60%); }
.offer-badge { position:relative; font-family:'Geist Mono', monospace; font-size:8.5px; text-transform:uppercase; letter-spacing:.16em; color:#9CC4F2; }
.offer-name { position:relative; font-size:21px; font-weight:600; letter-spacing:-.02em; color:#EDF1F4; margin-top:20px; }
.offer-sub { position:relative; font-family:'Geist Mono', monospace; font-size:11px; color:#A6B4C2; margin-top:4px; }
.offer-body { padding:6px 18px 14px; display:flex; flex-direction:column; flex:1; }
.offer-spec { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent); font-size:13px; }
.offer-spec span { color:var(--tertiary); }
.offer-spec b { font-family:'Geist Mono', monospace; font-weight:500; color:var(--foreground); white-space:nowrap; }
.offer-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:13px; }
.offer-brk { font-size:12.5px; font-weight:600; color:var(--foreground); white-space:nowrap; }
.offer-by { font-family:'Geist Mono', monospace; font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); }

/* live client page panel */
.clientpage { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:var(--elev-1); display:flex; flex-direction:column; }
.cp-top { display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.cp-dot { width:8px; height:8px; border-radius:999px; background:var(--border-strong); }
.cp-url { margin-left:8px; font-family:'Geist Mono', monospace; font-size:10px; color:var(--tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-shot { position:relative; height:104px; background:linear-gradient(150deg, #15324a, #0c1f30 70%); margin:14px 14px 0; border-radius:9px; overflow:hidden; }
.cp-shot::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 75% 10%, rgba(127,178,239,.34), transparent 60%); }
.cp-tag { position:absolute; left:12px; bottom:11px; z-index:1; font-family:'Geist Mono', monospace; font-size:8.5px; text-transform:uppercase; letter-spacing:.14em; color:#cfe0f5; }
.cp-rows { padding:14px 14px 6px; display:flex; flex-direction:column; gap:8px; flex:1; }
.cp-rows i { height:7px; border-radius:4px; background:var(--surface-3); display:block; }
.cp-foot { display:flex; align-items:center; gap:8px; padding:8px 14px 14px; }
.cp-chip { font-family:'Geist', sans-serif; font-size:11px; font-weight:500; padding:6px 12px; border-radius:999px; background:var(--accent); color:var(--on-accent); }
.cp-chip.ghost { background:transparent; border:1px solid var(--border-strong); color:var(--muted); }
.cp-meta { margin-left:auto; font-family:'Geist Mono', monospace; font-size:9.5px; color:var(--positive); }

/* central data hub demo — a self-contained SVG scene: data packets stream into a live core */
.hubviz { padding-top:6px; }
.hubviz svg { width:100%; height:auto; display:block; overflow:visible; }
.hubviz .conn { fill:none; stroke:var(--border-strong); stroke-width:1; stroke-dasharray:3 5; opacity:.6; }
.hubviz .packet { fill:var(--accent); filter:drop-shadow(0 0 3px var(--accent)); }
.hubviz .gn rect { fill:var(--surface-2); stroke:var(--border); stroke-width:1; }
.hubviz .gn text { fill:var(--muted); font-family:'Geist Mono', monospace; font-size:10px; }
.hubviz .gn text .c { fill:var(--accent); font-weight:600; }
.hubviz .core .disc { fill:var(--accent-wash); stroke:var(--accent); stroke-width:1.2; }
.hubviz .core .ring { fill:none; stroke:var(--accent); stroke-width:1.2; }
.hubviz .core .chev { fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hubviz .hubcount { fill:var(--foreground); font-family:'Geist Mono', monospace; font-size:11px; font-weight:500; }
.hubviz .hubcount tspan { fill:var(--accent); }
.hubviz .hublabel { fill:var(--faint); font-family:'Geist Mono', monospace; font-size:7px; letter-spacing:.18em; }

/* ── beta form ─────────────────────────────────────────────────────────── */
.beta { }
.betacard {
  border:1px solid var(--border-strong); border-radius:var(--r-xl); background:var(--card-glass);
  box-shadow:var(--elev-3); overflow:hidden; display:grid; grid-template-columns:1fr 1fr;
}
@media (max-width:860px){ .betacard{ grid-template-columns:1fr; } }
.betacard .left { padding:48px 44px; position:relative; overflow:hidden; border-right:1px solid var(--border); }
.betacard .left .glow { position:absolute; inset:0; background:radial-gradient(80% 60% at 30% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); pointer-events:none; }
.betacard .left .seats { margin-top:28px; display:flex; align-items:baseline; gap:10px; }
.betacard .left .seats .num { font-family:'Geist Mono', monospace; font-size:44px; font-weight:500; letter-spacing:-.03em; color:var(--accent); }
.betacard .left h3 { font-size:30px; letter-spacing:-.03em; line-height:1.1; }
.betacard .left p { margin-top:16px; color:var(--muted); font-size:15.5px; line-height:1.6; font-weight:300; max-width:38ch; }
.betacard .left ul { list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:13px; }
.betacard .left li { display:flex; gap:11px; font-size:14.5px; color:var(--muted); }
.betacard .left li svg { width:18px; height:18px; color:var(--accent); flex:0 0 auto; margin-top:1px; }
.betacard .right { padding:48px 44px; }
@media (max-width:560px){ .betacard .left,.betacard .right{ padding:34px 26px; } }
.field { margin-bottom:20px; }
.field label { display:block; font-family:'Geist Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--tertiary); margin-bottom:9px; }
.field input, .field select {
  width:100%; height:48px; padding:0 16px; font-family:'Geist', sans-serif; font-size:15px;
  color:var(--foreground); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm);
  transition:.18s; appearance:none;
}
.field select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7783' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; }
.field input:focus, .field select:focus { outline:none; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-wash); }
.field input::placeholder { color:var(--faint); }
.field.err input, .field.err select { border-color:var(--warning); }
.field .msg { font-size:12px; color:var(--warning); margin-top:7px; min-height:0; display:none; }
.field.err .msg { display:block; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
.formsuccess { display:none; text-align:center; padding:30px 0; }
.formsuccess.show { display:block; animation:pop .5s var(--ease); }
@keyframes pop { from{ opacity:0; transform:scale(.96) translateY(8px); } to{ opacity:1; transform:none; } }
.formsuccess .ok { width:64px; height:64px; border-radius:999px; background:var(--accent-wash); color:var(--accent); display:grid; place-items:center; margin:0 auto 22px; }
.formsuccess .ok svg { width:30px; height:30px; }
.formsuccess h3 { font-size:25px; }
.formsuccess p { margin-top:12px; color:var(--muted); font-size:15px; line-height:1.6; }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { border-top:1px solid var(--border); padding:60px 0 50px; }
.foot .top { display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; }
.foot .tag { color:var(--muted); font-size:15px; font-weight:300; max-width:34ch; margin-top:18px; line-height:1.6; }
.foot .links { display:flex; gap:48px; flex-wrap:wrap; }
.foot .col h4 { font-family:'Geist Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); font-weight:500; }
.foot .col a { display:block; margin-top:13px; color:var(--muted); font-size:14px; transition:.16s; }
.foot .col a:hover { color:var(--accent); }
.foot .base { margin-top:54px; padding-top:26px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot .base .pw { font-family:'Geist Mono', monospace; font-size:11.5px; color:var(--faint); letter-spacing:.04em; }
.foot .base .pw b { color:var(--muted); font-weight:500; }

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