/* ============================================================
   AI Catalogue Engine — product site
   Vibrant sibling of the eqomOS system: same bones, more colour.
   ============================================================ */
:root{
  --ink:      #070B18;
  --ink-2:    #0D1424;
  --ink-3:    #141E36;
  --line:     #1E2A45;
  --line-2:   #2A3A5C;

  --paper:    #F4F6FB;
  --paper-2:  #E9EDF6;
  --card:     #FFFFFF;
  --rule:     #DDE3EF;

  --violet:   #7C5CFF;
  --violet-d: #5B3BE0;
  --cyan:     #22D3EE;
  --mint:     #00E5A0;
  --amber:    #FFB020;
  --pink:     #FF5DA2;

  --tx:       #0A1020;
  --tx-2:     #3E4A63;
  --muted:    #5C6A85;
  --muted-d:  #8FA0C0;

  --grad: linear-gradient(120deg, var(--violet) 0%, var(--cyan) 55%, var(--mint) 100%);

  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --shell: 1220px;
  --gut: 26px;
  --r: 6px;
  --r-lg: 14px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:#fff;
  font-family:var(--body); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:3px}
section[id]{scroll-margin-top:86px}

.shell{width:100%; max-width:var(--shell); margin:0 auto; padding:0 var(--gut)}
.sec{padding:104px 0; position:relative}
.sec-light{background:var(--paper); color:var(--tx)}
.sec-white{background:var(--card); color:var(--tx)}

h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.1; letter-spacing:-.025em; margin:0}
h1{font-size:clamp(2.4rem,5.6vw,4.15rem); letter-spacing:-.038em}
h2{font-size:clamp(1.9rem,3.7vw,2.9rem); letter-spacing:-.03em}
h3{font-size:1.15rem}
p{margin:0}

.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.67rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(34,211,238,.07);
}
.eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); flex:none;
  box-shadow:0 0 0 3px rgba(34,211,238,.2)}
.sec-light .eyebrow, .sec-white .eyebrow{color:var(--violet-d); border-color:var(--rule); background:rgba(124,92,255,.07)}
.sec-light .eyebrow::before, .sec-white .eyebrow::before{background:var(--violet); box-shadow:0 0 0 3px rgba(124,92,255,.18)}

.lede{font-size:1.06rem; color:var(--muted-d); max-width:60ch}
.sec-light .lede, .sec-white .lede{color:var(--muted)}
.sec-head{max-width:780px; margin-bottom:56px}
.sec-head h2{margin:20px 0 0}
.sec-head .lede{margin-top:20px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--r); border:1px solid transparent;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn .arw{transition:transform .22s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-grad{background:var(--grad); color:#06101F; font-weight:600; box-shadow:0 10px 30px -12px rgba(124,92,255,.7)}
.btn-grad:hover{box-shadow:0 16px 40px -12px rgba(34,211,238,.6)}
.btn-line{border-color:var(--line-2); color:#fff}
.btn-line:hover{border-color:var(--cyan); color:var(--cyan)}
.sec-light .btn-line, .sec-white .btn-line{border-color:var(--rule); color:var(--tx)}
.sec-light .btn-line:hover, .sec-white .btn-line:hover{border-color:var(--violet); color:var(--violet)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:var(--ink-3)}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky; top:0; z-index:120; background:rgba(7,11,24,.82);
  backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line); transition:background .3s var(--ease)}
.nav.scrolled{background:rgba(7,11,24,.96)}
.nav-in{display:flex; align-items:center; gap:24px; height:72px}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto; flex:none}
.brand-mark{width:34px; height:34px; border-radius:9px; background:var(--grad); display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:.9rem; color:#06101F; flex:none}
.brand-txt{display:flex; flex-direction:column; line-height:1.22; gap:1px}
.brand-txt b{font-family:var(--display); font-size:1.02rem; font-weight:600; letter-spacing:-.02em}
.brand-txt span{font-family:var(--mono); font-size:.58rem; letter-spacing:.17em; text-transform:uppercase; color:var(--muted-d)}
.nav-links{display:flex; align-items:center; gap:3px; list-style:none; margin:0; padding:0}
.nav-links a{display:block; padding:9px 11px; font-size:.855rem; white-space:nowrap; color:var(--muted-d);
  border-radius:var(--r); transition:color .18s, background .18s}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.06)}
.burger{display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:var(--r); flex:none}
.burger span{display:block; width:19px; height:1.6px; background:#fff; position:relative; transition:background .2s}
.burger span::before,.burger span::after{content:''; position:absolute; left:0; width:19px; height:1.6px; background:#fff; transition:transform .25s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed; inset:72px 0 0; background:var(--ink); z-index:110; overflow-y:auto;
  padding:24px var(--gut) 60px; transform:translateX(100%); visibility:hidden; transition:transform .34s var(--ease)}
body.menu-open .drawer{transform:none; visibility:visible}
.drawer a{display:block; padding:16px 2px; border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:1.08rem; font-weight:600}
.drawer .btn{margin-top:26px; width:100%}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; overflow:hidden; padding:76px 0 90px}
.glow{position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.5}
.glow-a{width:520px; height:520px; background:rgba(124,92,255,.5); top:-190px; left:-140px}
.glow-b{width:460px; height:460px; background:rgba(34,211,238,.34); top:-90px; right:-130px}
.glow-c{width:400px; height:400px; background:rgba(0,229,160,.2); bottom:-220px; left:38%}
.hero::after{content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px; opacity:.35;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 75%)}
.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center}
.hero h1{margin:22px 0 0}
.hero-lede{margin-top:22px; font-size:1.12rem; color:var(--muted-d); max-width:52ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero-note{margin-top:18px; font-family:var(--mono); font-size:.7rem; color:var(--muted-d); letter-spacing:.03em}
.hero-facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; padding-top:28px; border-top:1px solid var(--line)}
.fact{display:flex; align-items:center; gap:9px; padding:9px 14px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03); font-size:.8rem; color:#C8D4EA}
.fact svg{width:14px; height:14px; color:var(--mint); flex:none}

/* ---------- hero pipeline animation ---------- */
.pipe-viz{position:relative; background:linear-gradient(160deg,var(--ink-2),var(--ink));
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:24px 22px 20px;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9)}
.pipe-viz::before{content:''; position:absolute; inset:-1px; border-radius:var(--r-lg); padding:1px;
  background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; pointer-events:none}
.pv-bar{display:flex; align-items:center; gap:8px; padding-bottom:16px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.67rem; color:var(--muted-d); letter-spacing:.07em}
.pv-dot{width:8px; height:8px; border-radius:50%; background:var(--line-2)}
.pv-dot.live{background:var(--mint); animation:blip 1.8s infinite}
@keyframes blip{0%,100%{box-shadow:0 0 0 0 rgba(0,229,160,.5)}50%{box-shadow:0 0 0 6px rgba(0,229,160,0)}}
.pv-stage{display:grid; grid-template-columns:104px 1fr; gap:16px; padding:20px 0 4px; align-items:start}
.pv-photo{border:1px dashed var(--line-2); border-radius:10px; padding:10px; text-align:center; color:var(--line-2)}
.pv-photo svg{width:100%; height:auto}
.pv-file{font-family:var(--mono); font-size:.63rem; color:var(--muted-d); margin-top:8px; word-break:break-all}
.pv-out{min-width:0}
.pv-lbl{font-family:var(--mono); font-size:.58rem; letter-spacing:.19em; text-transform:uppercase; color:var(--cyan); display:block; margin-bottom:12px}
.pv-rows{display:grid; gap:7px}
.pv-row{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.71rem; color:#B6C6E2;
  opacity:0; transform:translateX(-6px)}
.pv-row.on{opacity:1; transform:none; transition:opacity .35s var(--ease), transform .35s var(--ease)}
.pv-row i{width:5px; height:5px; background:var(--mint); transform:rotate(45deg); flex:none}
.pv-row b{margin-left:auto; color:var(--mint); font-weight:500}
.pv-row span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-foot{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.67rem; color:var(--amber); letter-spacing:.03em}
.pv-foot i{width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none}
.pv-progress{height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-top:14px}
.pv-progress i{display:block; height:100%; width:0; background:var(--grad); transition:width .3s linear}

/* ============================================================
   MARQUEE / capability strip
   ============================================================ */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink-2); padding:18px 0; overflow:hidden}
.strip-track{display:flex; gap:44px; width:max-content; animation:slide 42s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.strip-item{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.76rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted-d); white-space:nowrap}
.strip-item svg{width:15px; height:15px; color:var(--cyan); flex:none}

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.feat{position:relative; background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:32px 28px; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)}
.feat::after{content:''; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--grad);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.feat:hover{transform:translateY(-6px); box-shadow:0 26px 60px -30px rgba(10,16,32,.4); border-color:transparent}
.feat:hover::after{transform:scaleX(1)}
.feat-ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:20px;
  background:linear-gradient(140deg,rgba(124,92,255,.14),rgba(34,211,238,.14)); color:var(--violet);
  transition:background .3s var(--ease), color .3s var(--ease)}
.feat:hover .feat-ic{background:var(--grad); color:#fff}
.feat-ic svg{width:22px; height:22px}
.feat h3{margin-bottom:10px; font-size:1.12rem}
.feat > p{font-size:.9rem; color:var(--muted); line-height:1.6}
.feat ul{list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--rule); display:grid; gap:9px}
.feat li{display:flex; gap:9px; font-size:.845rem; color:var(--tx-2); line-height:1.5; align-items:flex-start}
.feat li::before{content:''; width:5px; height:5px; margin-top:8px; flex:none; transform:rotate(45deg); background:var(--violet)}

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */
.ba{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2);
  background:var(--ink-2); aspect-ratio:16/9; max-height:520px; user-select:none; touch-action:pan-y}
.ba-pane{position:absolute; inset:0}
.ba-after{clip-path:inset(0 0 0 var(--split,50%))}
.ba-before{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0)}
.ba-pane svg{width:100%; height:100%; display:block}
.ba-tag{position:absolute; top:16px; font-family:var(--mono); font-size:.63rem; letter-spacing:.15em;
  text-transform:uppercase; padding:7px 12px; border-radius:999px; z-index:4; pointer-events:none}
.ba-tag.l{left:16px; background:rgba(255,255,255,.08); border:1px solid var(--line-2); color:var(--muted-d)}
.ba-tag.r{right:16px; background:var(--grad); color:#06101F; font-weight:600}
.ba-handle{position:absolute; top:0; bottom:0; left:var(--split,50%); width:2px; background:var(--grad); z-index:5; pointer-events:none}
.ba-knob{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px;
  border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#06101F;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.7)}
.ba-knob svg{width:20px; height:20px}
.ba-range{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:6; margin:0}
.ba-hint{margin-top:14px; font-family:var(--mono); font-size:.67rem; color:var(--muted-d); letter-spacing:.04em; text-align:center}

/* ============================================================
   LANGUAGE DEMO
   ============================================================ */
.lang-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px}
.lang-tab{font-family:var(--mono); font-size:.73rem; letter-spacing:.09em; text-transform:uppercase;
  padding:11px 18px; border:1px solid var(--line-2); border-radius:999px; color:var(--muted-d);
  transition:all .22s var(--ease)}
.lang-tab:hover{color:#fff; border-color:var(--muted-d)}
.lang-tab.active{background:var(--grad); border-color:transparent; color:#06101F; font-weight:600}
.lang-card{background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:32px 30px;
  animation:fade .35s var(--ease)}
.lang-field{padding:16px 0; border-bottom:1px solid var(--line)}
.lang-field:last-child{border-bottom:0; padding-bottom:0}
.lang-field .k{display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:8px}
.lang-field .v{font-size:1.02rem; color:#fff; line-height:1.5}
.lang-field .v.sm{font-size:.93rem; color:#B6C6E2; line-height:1.65}
.lang-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:4px}
.lang-chips span{font-family:var(--body); font-size:.83rem; padding:8px 13px; border-radius:var(--r);
  border:1px solid var(--line-2); color:#B6C6E2; line-height:1.4}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ============================================================
   RUN LEDGER
   ============================================================ */
.run{display:grid; grid-template-columns:1fr 440px; gap:52px; align-items:start}
.ledger{background:#040711; border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden}
.led-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px;
  border-bottom:1px solid var(--line); font-family:var(--mono); font-size:.69rem; color:var(--muted-d)}
.led-head b{color:#fff; font-weight:500}
.led-body{font-family:var(--mono); font-size:.72rem; padding:8px 0}
.led-row{display:grid; grid-template-columns:1.45fr .85fr .5fr .5fr; gap:10px; padding:8px 18px;
  align-items:center; color:var(--muted-d); opacity:0; transform:translateY(4px)}
.led-row.in{opacity:1; transform:none; transition:opacity .3s var(--ease), transform .3s var(--ease)}
.led-row.cols{opacity:1; transform:none; color:#3E5478; font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; padding-bottom:10px}
.led-row .op{color:#C8D4EA}
.led-row .ms{text-align:right}
.led-row .cr{text-align:right; color:var(--mint)}
.led-foot{display:flex; align-items:center; justify-content:space-between; padding:15px 18px;
  border-top:1px solid var(--line); background:var(--ink-2); font-family:var(--mono); font-size:.72rem; color:var(--muted-d)}
.led-foot .tot{color:var(--mint)}
.led-status{display:flex; align-items:center; gap:9px; padding:15px 18px; border-top:1px solid var(--line);
  background:rgba(255,176,32,.08); font-family:var(--mono); font-size:.71rem; color:var(--amber)}
.led-status i{width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none}
.led-cap{margin-top:14px; font-family:var(--mono); font-size:.65rem; color:#3E5478; line-height:1.7}

/* ============================================================
   USE CASES
   ============================================================ */
.uc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden}
.uc{background:var(--card); padding:32px 28px; transition:background .28s var(--ease)}
.uc:hover{background:var(--paper)}
.uc-ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(140deg,rgba(124,92,255,.13),rgba(34,211,238,.13)); color:var(--violet-d)}
.uc-ic svg{width:20px; height:20px}
.uc h3{font-size:1.06rem; margin-bottom:9px}
.uc p{font-size:.875rem; color:var(--muted); line-height:1.58}
.uc .win{display:block; margin-top:14px; padding-top:13px; border-top:1px dashed var(--rule);
  font-family:var(--mono); font-size:.68rem; color:var(--violet-d); letter-spacing:.03em}

/* ============================================================
   GOVERNANCE
   ============================================================ */
.gov-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.gov{position:relative; background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:30px 26px; transition:border-color .28s var(--ease), transform .28s var(--ease)}
.gov:hover{border-color:var(--violet); transform:translateY(-4px)}
.gov .c{font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mint)}
.gov h3{margin:12px 0 10px; font-size:1.07rem; color:#fff}
.gov p{font-size:.88rem; color:var(--muted-d); line-height:1.62}

/* ============================================================
   VIDEO SLOTS
   ============================================================ */
.vid-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.vid{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px dashed var(--line-2);
  background:var(--ink-2); aspect-ratio:16/11; display:grid; place-items:center; text-align:center; padding:56px 26px 30px;
  transition:border-color .28s var(--ease), background .28s var(--ease)}
.vid:hover{border-color:var(--cyan); background:var(--ink-3)}
.vid-play{width:52px; height:52px; border-radius:50%; background:var(--grad); display:grid; place-items:center;
  margin:0 auto 16px; color:#06101F}
.vid-play svg{width:20px; height:20px; margin-left:3px}
.vid b{display:block; font-family:var(--display); font-size:1.02rem; margin-bottom:7px}
.vid span{font-size:.83rem; color:var(--muted-d); line-height:1.55}
.vid-tag{position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:.57rem; letter-spacing:.14em;
  text-transform:uppercase; padding:5px 9px; border-radius:var(--r); background:rgba(255,176,32,.14);
  border:1px solid var(--amber); color:var(--amber)}

/* ============================================================
   ROADMAP + FAQ
   ============================================================ */
.road-badge{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--amber); border:1px solid var(--amber);
  border-radius:999px; padding:8px 15px}
.road-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.road{background:var(--card); border:1px solid var(--rule); border-radius:var(--r-lg); padding:26px 24px}
.road .c{font-family:var(--mono); font-size:.61rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber)}
.road h3{margin:11px 0 8px; font-size:1.02rem}
.road p{font-size:.86rem; color:var(--muted); line-height:1.56}

.faq{max-width:880px; border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex; width:100%; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px;
  text-align:left; font-family:var(--display); font-size:1.06rem; font-weight:600; color:#fff; transition:color .2s}
.faq-q:hover{color:var(--cyan)}
.faq-q i{width:13px; height:13px; position:relative; flex:none}
.faq-q i::before,.faq-q i::after{content:''; position:absolute; background:var(--cyan); transition:transform .25s var(--ease)}
.faq-q i::before{top:6px; left:0; width:13px; height:1.6px}
.faq-q i::after{left:6px; top:0; width:1.6px; height:13px}
.faq-item.open .faq-q i::after{transform:scaleY(0)}
.faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden; min-height:0}
.faq-a p{padding:0 4px 26px; color:var(--muted-d); font-size:.95rem; max-width:76ch}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta{position:relative; overflow:hidden; padding:96px 0; background:var(--ink-2)}
.cta .glow-a{width:600px; height:600px; top:-260px; left:20%; opacity:.4}
.cta-in{position:relative; z-index:2; text-align:center; max-width:720px; margin:0 auto}
.cta h2{margin:22px 0 0}
.cta p{margin-top:18px; color:var(--muted-d); font-size:1.05rem}
.cta-btns{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px}

.foot{background:var(--ink); border-top:1px solid var(--line); padding:60px 0 28px; color:var(--muted-d)}
.foot-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line)}
.foot-blurb{margin-top:16px; font-size:.875rem; line-height:1.65; max-width:34ch}
.fcol h4{font-family:var(--mono); font-size:.63rem; letter-spacing:.18em; text-transform:uppercase;
  color:#fff; font-weight:500; margin-bottom:16px}
.fcol ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.fcol a{font-size:.875rem; transition:color .18s}
.fcol a:hover{color:var(--cyan)}
.foot-bot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:24px;
  font-family:var(--mono); font-size:.68rem}
.foot-bot a{border-bottom:1px solid var(--line-2)}
.foot-bot a:hover{color:var(--cyan)}

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

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .burger{display:flex}
  .hero-in{grid-template-columns:1fr; gap:46px}
  .feat-grid,.uc-grid,.gov-grid,.vid-grid,.road-grid{grid-template-columns:repeat(2,1fr)}
  .run{grid-template-columns:1fr; gap:38px}
  .foot-top{grid-template-columns:1fr 1fr; gap:34px}
}
@media (max-width:760px){
  :root{--gut:20px}
  .sec{padding:72px 0}
  .hero{padding:48px 0 64px}
  .sec-head{margin-bottom:40px}
  .feat-grid,.uc-grid,.gov-grid,.vid-grid,.road-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr; gap:30px}
  .hero-cta,.cta-btns{flex-direction:column; align-items:stretch}
  .pv-stage{grid-template-columns:1fr}
  .pv-photo{max-width:120px}
  .ba{aspect-ratio:4/5}
  .led-row{grid-template-columns:1.4fr .5fr .55fr; font-size:.66rem; gap:8px}
  .led-row .md{display:none}
  .lang-card{padding:24px 20px}
  html,body{max-width:100%; overflow-x:hidden}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
  .pv-row{opacity:1; transform:none}
}

/* ---------- mobile: stacked before / after ---------- */
.ba-stack{display:none}
@media (max-width:760px){
  .ba{display:none}
  .ba-stack{display:block}
  .bs-card{position:relative; background:var(--ink-2); border:1px solid var(--line-2);
    border-radius:var(--r-lg); padding:46px 20px 20px}
  .bs-card.lit{border-color:transparent; background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box,
    var(--grad) border-box; border:1px solid transparent}
  .bs-tag{position:absolute; top:14px; left:16px; font-family:var(--mono); font-size:.58rem;
    letter-spacing:.15em; text-transform:uppercase; padding:6px 11px; border-radius:999px;
    background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:var(--muted-d)}
  .bs-tag.grad{background:var(--grad); border-color:transparent; color:#06101F; font-weight:600}
  .bs-head{display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line)}
  .bs-photo{width:64px; height:64px; flex:none; border-radius:10px; padding:11px;
    border:1px solid var(--cyan); color:var(--cyan)}
  .bs-photo.dim{border:1px dashed var(--line-2); color:var(--line-2)}
  .bs-head b{display:block; font-family:var(--mono); font-size:.78rem; color:#fff; margin-bottom:3px}
  .bs-head span{font-family:var(--mono); font-size:.66rem; color:var(--muted-d); line-height:1.45}
  .bs-rows{display:grid; gap:13px; padding:16px 0}
  .bs-k{display:block; font-family:var(--mono); font-size:.57rem; letter-spacing:.16em;
    text-transform:uppercase; color:#3E5478; margin-bottom:5px}
  .bs-card.lit .bs-k{color:var(--mint)}
  .bs-v{font-size:.88rem; color:#E8EEFA; line-height:1.45}
  .bs-skel{display:block; height:12px; border-radius:3px; background:#16203A}
  .bs-status{display:flex; align-items:center; gap:9px; padding:12px 14px; border-radius:var(--r);
    font-family:var(--mono); font-size:.68rem; line-height:1.4}
  .bs-status i{width:6px; height:6px; border-radius:50%; flex:none}
  .bs-status.dim{background:#111A2E; border:1px solid var(--line-2); color:#5A6E92}
  .bs-status.dim i{background:#3E5478}
  .bs-status.amber{background:rgba(255,176,32,.1); border:1px solid var(--amber); color:var(--amber)}
  .bs-status.amber i{background:var(--amber)}
  .bs-arrow{display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 0; color:var(--cyan)}
  .bs-arrow span{font-family:var(--mono); font-size:.6rem; letter-spacing:.19em; text-transform:uppercase}
  .bs-arrow svg{width:20px; height:20px}
}
@media (max-width:760px){ .drag-only{display:none} }

/* ============================================================
   FORMS + LEAD CAPTURE
   ============================================================ */
.form-wrap{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start}
.form-intro h1{font-size:clamp(2rem,4vw,3rem); margin:20px 0 0}
.form-points{list-style:none; margin:32px 0 0; padding:26px 0 0; border-top:1px solid var(--line); display:grid; gap:20px}
.form-points li{display:flex; gap:15px; align-items:flex-start}
.form-points .n{font-family:var(--mono); font-size:.65rem; letter-spacing:.12em; color:var(--mint); flex:none; padding-top:3px}
.form-points b{display:block; font-family:var(--display); font-size:1rem; color:#fff; margin-bottom:4px}
.form-points div{font-size:.885rem; color:var(--muted-d); line-height:1.6}
.form-alt{margin-top:28px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap;
  gap:8px 18px; align-items:center; font-family:var(--mono); font-size:.74rem; color:var(--muted-d)}
.form-alt a{color:var(--cyan)}
.form-alt a:hover{border-bottom:1px solid var(--cyan)}

.card-form{background:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:34px 32px 30px; box-shadow:0 40px 90px -40px rgba(0,0,0,.85)}
.card-form h3{font-size:1.35rem; color:#fff}
.card-form > p{margin-top:9px; font-size:.9rem; color:var(--muted-d)}
.fgrid{display:grid; gap:15px; margin-top:24px}
.fr{display:grid; grid-template-columns:1fr 1fr; gap:15px}
.field > label{display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-d); margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%; background:#060A15; border:1px solid var(--line-2); border-radius:var(--r);
  padding:12px 14px; color:#fff; font-family:var(--body); font-size:.92rem;
  transition:border-color .2s, box-shadow .2s}
.field textarea{resize:vertical; min-height:100px}
.field input::placeholder,.field textarea::placeholder{color:#3E5478}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(34,211,238,.15)}
.field input.err,.field textarea.err{border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,176,32,.14)}
.checks{display:grid; grid-template-columns:1fr 1fr; gap:9px 14px}
.chk{display:flex; align-items:flex-start; gap:9px; cursor:pointer; font-size:.85rem; color:#C8D4EA; line-height:1.45}
.field .chk{font-family:var(--body); letter-spacing:normal; text-transform:none; margin-bottom:0}
.chk input[type="checkbox"]{appearance:none; -webkit-appearance:none; width:16px; height:16px; flex:none;
  margin-top:2px; padding:0; border:1px solid var(--line-2); border-radius:3px; background:#060A15; cursor:pointer;
  box-shadow:none; transition:background .18s, border-color .18s}
.chk input[type="checkbox"]:checked{background:var(--mint); border-color:var(--mint)}
.chk input[type="checkbox"]:checked::after{content:''; display:block; width:4px; height:8px; margin:2px auto 0;
  border:solid #06101F; border-width:0 2px 2px 0; transform:rotate(45deg)}
.chk.consent{margin-top:2px; padding-top:15px; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted-d)}
.card-form .btn{width:100%; margin-top:22px}
.fnote{margin-top:13px; font-family:var(--mono); font-size:.67rem; color:var(--muted-d); text-align:center; line-height:1.6}

/* thank-you state */
.thanks{padding:42px 32px 38px; animation:fade .4s var(--ease)}
.thanks-tick{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; margin-bottom:20px;
  background:rgba(0,229,160,.13); border:1px solid var(--mint); color:var(--mint)}
.thanks-tick svg{width:24px; height:24px}
.thanks h3{font-size:1.6rem; color:#fff; margin-bottom:13px}
.thanks p{font-size:.94rem; color:var(--muted-d); line-height:1.66; max-width:56ch}
.thanks p + p{margin-top:12px}
.thanks-next{margin-top:25px; padding-top:21px; border-top:1px solid var(--line)}
.thanks-next .k{display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--mint); margin-bottom:13px}
.thanks-next ol{margin:0; padding-left:20px; display:grid; gap:10px}
.thanks-next li{font-size:.88rem; color:#C8D4EA; line-height:1.55}
.thanks-next li::marker{color:var(--mint); font-family:var(--mono); font-size:.78rem}
.thanks-ref{margin-top:22px; padding:13px 15px; border-radius:var(--r); background:#060A15;
  border:1px solid var(--line-2); font-family:var(--mono); font-size:.71rem; color:var(--muted-d); line-height:1.7}
.thanks-ref b{color:var(--mint); font-weight:500}
.thanks-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}

/* compact inline contact form in the CTA band */
.cta-form{max-width:640px; margin:32px auto 0; text-align:left}
.cta-form .fr{grid-template-columns:1fr 1fr}
.crumb{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.65rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-d)}
.crumb a:hover{color:var(--cyan)}
.crumb .cur{color:var(--mint)}
.ty-wrap{max-width:720px; margin-top:36px}
.ty-wrap h1{margin:20px 0 0}

/* ============================================================
   ANIMATED DEMO PLAYERS
   ============================================================ */
.demo-card{position:relative; background:var(--ink-2); border:1px solid var(--line-2);
  border-radius:var(--r-lg); overflow:hidden; transition:border-color .28s var(--ease)}
.demo-card:hover{border-color:var(--cyan)}
.demo-stage{position:relative; aspect-ratio:16/10; background:#060A15; overflow:hidden}
.demo-frame{position:absolute; inset:0; padding:20px; opacity:0; transition:opacity .35s var(--ease);
  display:flex; flex-direction:column; gap:10px}
.demo-frame.on{opacity:1}
.demo-overlay{position:absolute; inset:0; display:grid; place-items:center; z-index:5;
  background:rgba(6,10,21,.72); backdrop-filter:blur(3px); transition:opacity .3s var(--ease)}
.demo-overlay.hide{opacity:0; pointer-events:none}
.demo-play{width:56px; height:56px; border-radius:50%; background:var(--grad); display:grid; place-items:center;
  color:#06101F; box-shadow:0 10px 30px -8px rgba(34,211,238,.6); transition:transform .22s var(--ease)}
.demo-play:hover{transform:scale(1.08)}
.demo-play svg{width:22px; height:22px; margin-left:3px}
.demo-bar{height:3px; background:var(--line)}
.demo-bar i{display:block; height:100%; width:0; background:var(--grad); transition:width .2s linear}
.demo-meta{padding:18px 20px 20px}
.demo-meta b{display:block; font-family:var(--display); font-size:1.04rem; margin-bottom:6px}
.demo-meta span{font-size:.85rem; color:var(--muted-d); line-height:1.55}
.demo-replay{margin-top:12px; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cyan); display:inline-flex; align-items:center; gap:7px}
.demo-note{position:absolute; top:12px; right:12px; z-index:4; font-family:var(--mono); font-size:.55rem;
  letter-spacing:.13em; text-transform:uppercase; padding:5px 9px; border-radius:var(--r);
  background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:var(--muted-d)}

/* pieces the demo frames are built from */
.df-title{font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan)}
.df-box{border:1px dashed var(--line-2); border-radius:9px; padding:16px; text-align:center;
  color:var(--muted-d); font-family:var(--mono); font-size:.7rem}
.df-box.lit{border-style:solid; border-color:var(--cyan); color:var(--cyan)}
.df-line{height:9px; border-radius:3px; background:#141E36}
.df-line.fill{background:linear-gradient(90deg,rgba(124,92,255,.6),rgba(34,211,238,.5))}
.df-chip{display:inline-block; font-family:var(--mono); font-size:.63rem; padding:5px 9px; border-radius:4px;
  border:1px solid var(--line-2); color:#C8D4EA; margin:0 5px 5px 0}
.df-chip.ok{border-color:var(--mint); color:var(--mint)}
.df-row{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.68rem; color:#C8D4EA}
.df-row b{margin-left:auto; color:var(--mint); font-weight:500}
.df-band{padding:10px 12px; border-radius:6px; font-family:var(--mono); font-size:.66rem; line-height:1.45}
.df-band.amber{background:rgba(255,176,32,.11); border:1px solid var(--amber); color:var(--amber)}
.df-band.mint{background:rgba(0,229,160,.1); border:1px solid var(--mint); color:var(--mint)}
.df-band.grey{background:#0D1424; border:1px solid var(--line-2); color:var(--muted-d)}
.df-scan{position:absolute; left:20px; right:20px; height:2px; background:var(--grad); opacity:.9;
  animation:scan 1.6s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateY(0)}50%{transform:translateY(90px)}}
.df-prog{height:6px; border-radius:3px; background:#141E36; overflow:hidden}
.df-prog i{display:block; height:100%; background:var(--grad); width:0; animation:fill 2.4s linear forwards}
@keyframes fill{to{width:100%}}

@media (max-width:1080px){
  .form-wrap{grid-template-columns:1fr; gap:38px}
}
@media (max-width:760px){
  .fr{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .card-form{padding:26px 20px 24px}
  .thanks{padding:32px 20px 28px}
  .thanks-cta{flex-direction:column; align-items:stretch}
  .demo-stage{aspect-ratio:4/3}
}
.demo-replay[hidden]{display:none !important}
.df-title{display:block; padding-right:104px}

/* beta badge — built and testing, distinct from "not ready" amber */
.road-badge.beta{color:var(--violet-d); border-color:var(--violet); background:rgba(124,92,255,.08)}
.road-badge.beta::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--violet);
  box-shadow:0 0 0 3px rgba(124,92,255,.22); animation:blip 2s infinite}
.road .c{color:var(--violet-d)}
.road{position:relative}
.road::after{content:''; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease)}
.road:hover::after{transform:scaleX(1)}