/* ============================================================
   LUMEN8 · Energy Intelligence — site stylesheet
   Dark, cinematic, typographic. No screenshots: the UI is the visual.
   ============================================================ */

:root{
  --bg:#04060c;
  --bg-2:#070b14;
  --bg-3:#0b1020;
  --ink:#eaf0f8;
  --ink-2:#aab4c6;
  --muted:#6f7b91;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --panel:rgba(255,255,255,.028);
  --panel-2:rgba(255,255,255,.05);
  --cyan:#22d3ee;
  --cyan-2:#67e8f9;
  --amber:#3b82f6;
  --amber-2:#93c5fd;
  --blue:#3b82f6;
  --blue-2:#60a5fa;
  --violet:#cbd5e1; /* silver: the twin's identity. No purple anywhere on this site. */
  --green:#34d399;
  --rose:#2dd4bf; /* teal: the telecoms identity. No pink anywhere on this site. */
  --font-d:'Space Grotesk',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:18px;
  --gutter:clamp(20px,5vw,72px);
  --max:1360px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font-b);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
::selection{background:rgba(34,211,238,.28);color:var(--hi)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;letter-spacing:-.02em;line-height:1.05}

/* ---------- grain + ambient ---------- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
.orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;will-change:transform}
.orb.c{width:60vw;height:60vw;left:-20vw;top:-20vw;background:radial-gradient(circle,rgba(34,211,238,.35),transparent 60%)}
.orb.a{width:50vw;height:50vw;right:-18vw;top:30vh;background:radial-gradient(circle,rgba(59,130,246,.22),transparent 60%)}
.orb.v{width:45vw;height:45vw;left:20vw;bottom:-25vw;background:radial-gradient(circle,rgba(45,212,191,.14),transparent 60%)}
main{position:relative;z-index:1}

/* ---------- progress + cursor ---------- */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:1500;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--green))}
.cursor{position:fixed;left:0;top:0;z-index:3000;pointer-events:none;mix-blend-mode:difference;display:none}
.cursor .dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.cursor .ring{position:absolute;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.75);transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),opacity .25s}
.cursor.is-link .ring{width:56px;height:56px;opacity:.9}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}

/* ---------- layout helpers ---------- */
.wrap{width:min(var(--max),100% - var(--gutter)*2);margin-inline:auto}
.section{position:relative;padding:clamp(88px,12vw,160px) 0}
.section.tight{padding:clamp(64px,8vw,110px) 0}
.eyebrow{font-family:var(--font-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.eyebrow.amber{color:var(--amber)}
.eyebrow.violet{color:var(--violet)}
.eyebrow.green{color:var(--green)}
.eyebrow.rose{color:var(--rose)}
.h-xl{font-size:clamp(40px,7.2vw,112px);line-height:.96;letter-spacing:-.035em}
.h-l{font-size:clamp(34px,5vw,72px);letter-spacing:-.03em}
.h-m{font-size:clamp(26px,3.2vw,44px)}
.h-s{font-size:clamp(20px,2vw,26px)}
.lead{font-size:clamp(17px,1.4vw,21px);color:var(--ink-2);max-width:62ch;line-height:1.55}
.muted{color:var(--muted)}
.grad{background:linear-gradient(92deg,var(--cyan-2) 0%,var(--blue-2) 45%,var(--grad-end) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-c{background:linear-gradient(92deg,var(--gc0),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-a{background:linear-gradient(92deg,var(--ice),var(--blue-2) 50%,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-v{background:linear-gradient(92deg,var(--gv0),var(--gv1));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-g{background:linear-gradient(92deg,var(--grad-end),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-r{background:linear-gradient(92deg,var(--gr0),var(--rose));-webkit-background-clip:text;background-clip:text;color:transparent}
.head{display:grid;gap:22px;max-width:920px;margin-bottom:clamp(40px,6vw,72px)}
.head.center{text-align:center;margin-inline:auto;justify-items:center}
.head .lead{margin-top:4px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;
  font-family:var(--font-d);font-weight:600;font-size:15px;letter-spacing:-.01em;border:1px solid var(--line-2);
  color:var(--ink);background:rgba(var(--fg-rgb),.03);transition:transform .35s var(--ease),background .3s,border-color .3s,box-shadow .3s;
  overflow:hidden;isolation:isolate;will-change:transform}
.btn span{position:relative;z-index:1}
.btn svg{width:16px;height:16px;position:relative;z-index:1;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn.primary{background:linear-gradient(135deg,var(--cyan),var(--blue));border-color:transparent;color:var(--on-accent)}
/* Hover overlay stays in the cyan/blue family. It previously ended on
   the old lavender --violet, which over a bright gradient button read as pink. */
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--cyan-2),var(--blue));opacity:0;transition:opacity .4s}
.btn.primary:hover::after{opacity:1}
.btn.primary:hover{box-shadow:0 12px 40px rgba(59,130,246,.28)}
.btn.ghost:hover{background:rgba(var(--fg-rgb),.07);border-color:rgba(var(--fg-rgb),.28)}
.btn.sm{padding:10px 18px;font-size:13px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1200;transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s var(--ease);
  padding:22px 0;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(var(--bg-rgb),.62);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-color:var(--line);padding:12px 0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:30px;width:auto;filter:drop-shadow(0 2px 10px rgba(34,211,238,.25))}
.brand .tag{font-family:var(--font-m);font-size:10px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase;border-left:1px solid var(--line-2);padding-left:12px}
@media (max-width:600px){.brand .tag{display:none}}
.links{display:flex;gap:6px;align-items:center}
.links a{position:relative;padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-2);transition:color .25s,background .25s}
.links a:hover{color:var(--ink);background:rgba(var(--fg-rgb),.05)}
.links a.active{color:var(--ink)}
.links a.active::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--cyan);transform:translateX(-50%);box-shadow:0 0 12px var(--cyan)}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s}
.burger.open i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0}
.burger.open i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile{position:fixed;inset:0;z-index:1100;background:rgba(var(--bg-rgb),.96);backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gutter);opacity:0;pointer-events:none;transition:opacity .35s}
.mobile.open{opacity:1;pointer-events:auto}
.mobile a{font-family:var(--font-d);font-size:clamp(32px,9vw,56px);font-weight:600;letter-spacing:-.03em;padding:10px 0;border-bottom:1px solid var(--line);
  transform:translateY(20px);opacity:0;transition:transform .5s var(--ease),opacity .5s}
.mobile.open a{transform:none;opacity:1}
.mobile a:nth-child(2){transition-delay:.05s}.mobile a:nth-child(3){transition-delay:.1s}.mobile a:nth-child(4){transition-delay:.15s}.mobile a:nth-child(5){transition-delay:.2s}
@media (max-width:900px){.links,.nav-cta .btn{display:none}.burger{display:flex}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:140px 0 90px;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .veil{position:absolute;inset:0;z-index:1;background:
  radial-gradient(60% 60% at 70% 45%,transparent 0%,rgba(var(--bg-rgb),.55) 70%,var(--bg) 100%),
  linear-gradient(180deg,rgba(var(--bg-rgb),.2),rgba(var(--bg-rgb),.0) 35%,var(--bg) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin:26px 0 28px}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w i{display:inline-block;font-style:normal;transform:translateY(110%);will-change:transform}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-side{display:grid;gap:12px;min-width:0}
.ticker{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:rgba(var(--pane-rgb),.5);backdrop-filter:blur(10px);
  font-family:var(--font-m);font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:12px;overflow:hidden;min-width:0;max-width:100%}
.ticker b{color:var(--ink);font-weight:600}
.ticker .pulse{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:pulse 2s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.ticker .line{white-space:nowrap;animation:tick 22s linear infinite;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 20px),transparent)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.scroll-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-m);font-size:10px;letter-spacing:.3em;color:var(--muted)}
.scroll-hint i{width:1px;height:44px;background:linear-gradient(180deg,var(--cyan),transparent);animation:drop 1.8s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* subpage hero (shorter) */
.hero.sub{min-height:78svh;padding-top:170px}
.hero.sub .h-xl{font-size:clamp(40px,6.4vw,96px)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;gap:44px;width:max-content;will-change:transform}
.marquee span{font-family:var(--font-m);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:44px;white-space:nowrap}
.marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 10px var(--blue-2)}

/* ---------- cards ---------- */
.card{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:28px;overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s,background .4s;transform-style:preserve-3d;will-change:transform}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(34,211,238,.13),transparent 45%)}
.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;padding:1px;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(34,211,238,.7),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card:hover::before,.card:hover::after{opacity:1}
.card:hover{background:var(--panel-2);border-color:var(--line-2)}
.card.amber::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(59,130,246,.13),transparent 45%)}
.card.amber::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(59,130,246,.7),transparent 45%)}
.card.violet::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(203,213,225,.11),transparent 45%)}
.card.violet::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(203,213,225,.6),transparent 45%)}
.card.green::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(52,211,153,.13),transparent 45%)}
.card.green::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(52,211,153,.7),transparent 45%)}
/* Was the old pink --rose. That is the one unambiguously pink glow
   on the site, and it fired on plain .card:hover. Now cyan like the default. */
.card.rose::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(34,211,238,.13),transparent 45%)}
.card.rose::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(34,211,238,.7),transparent 45%)}
.card>*{position:relative;z-index:1}
.card .num{font-family:var(--font-m);font-size:11px;letter-spacing:.2em;color:var(--muted)}
.card h3{margin:16px 0 10px;font-size:clamp(20px,1.6vw,24px)}
.card p{color:var(--ink-2);font-size:15px}
.card .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(var(--fg-rgb),.03);color:var(--cyan)}
.card .ico svg{width:20px;height:20px}
.card.amber .ico{color:var(--amber)}.card.violet .ico{color:var(--violet)}.card.green .ico{color:var(--green)}.card.rose .ico{color:var(--rose)}
.card .more{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:600;font-size:14px;color:var(--ink)}
.card .more svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.card:hover .more svg{transform:translateX(5px)}
.card.big{padding:clamp(28px,3.5vw,48px);min-height:380px;display:flex;flex-direction:column;justify-content:flex-end}
.card.big h3{font-size:clamp(26px,2.6vw,38px)}
.card.big .art{position:absolute;right:-6%;top:-6%;width:58%;aspect-ratio:1;opacity:.95;pointer-events:none;z-index:0}
.card.big .art svg{width:100%;height:100%;overflow:visible}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{font-family:var(--font-m);font-size:11px;letter-spacing:.08em;padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:rgba(var(--fg-rgb),.02)}
.chip.on{border-color:rgba(52,211,153,.5);color:var(--mint)}
.chip.soon{border-color:rgba(59,130,246,.45);color:var(--amber-2)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.stat{padding:32px 28px;border-right:1px solid var(--line);position:relative}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--font-d);font-weight:600;font-size:clamp(34px,3.6vw,54px);letter-spacing:-.04em;line-height:1}
.stat b small{font-size:.5em;color:var(--muted);margin-left:4px;letter-spacing:0}
.stat span{display:block;margin-top:10px;font-size:13px;color:var(--ink-2)}
.stat em{display:block;font-style:normal;font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:8px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.stat{border-bottom:1px solid var(--line)}.stat:nth-child(even){border-right:0}}
@media (max-width:480px){.stats{grid-template-columns:1fr}.stat{border-right:0}}

/* ---------- proof band: coverage fields behind the national numbers ---------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--line)}
.pcell{position:relative;isolation:isolate;min-height:248px;padding:26px 26px 24px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(var(--fg-rgb),.05),rgba(var(--fg-rgb),.012));transition:background .55s var(--ease)}
.pcell canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.62;transition:opacity .55s var(--ease);pointer-events:none}
.pcell::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:var(--fc);opacity:.34;transition:opacity .45s var(--ease)}
/* the number sits in its own pool of dark so the field never fights the type */
.pcell::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--bg-rgb),0),rgba(var(--bg-rgb),.72) 46%,rgba(var(--bg-rgb),.9))}
.pcell>b,.pcell>span,.pcell>em{position:relative;z-index:3}
.pcell>b{display:block;font-family:var(--font-d);font-weight:600;font-size:clamp(34px,3.6vw,54px);letter-spacing:-.04em;line-height:1;
  background:linear-gradient(180deg,var(--hi),var(--lead));-webkit-background-clip:text;background-clip:text;color:transparent}
.pcell>b small{font-size:.46em;margin-left:5px;letter-spacing:0;font-family:var(--font-m);font-weight:500;-webkit-text-fill-color:var(--muted)}
.pcell>span{display:block;margin-top:10px;font-size:13px;color:var(--ink-2)}
.pcell>em{display:block;font-style:normal;font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.pcell:hover{background:linear-gradient(180deg,rgba(var(--fg-rgb),.085),rgba(var(--fg-rgb),.02))}
.pcell:hover canvas{opacity:1}
.pcell:hover::before{opacity:1}
.pcell:hover>em{color:var(--fc)}
/* the survey sweep over a landed field: a transform animation the compositor runs without repainting the canvas */
.pf-sweep{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease)}
.pf-sweep.on{opacity:1}
.pf-sweep::before{content:"";position:absolute;top:0;bottom:0;left:0;width:32%;background:linear-gradient(90deg,rgba(var(--fg-rgb),0),rgba(var(--fg-rgb),.055),rgba(var(--fg-rgb),0));transform:translate3d(-130%,0,0)}
.pf-sweep.on::before{animation:pf-sweep 9.4s linear infinite}
@keyframes pf-sweep{to{transform:translate3d(340%,0,0)}}
@media (prefers-reduced-motion:reduce){.pf-sweep{display:none}}

/* the second rank of proof: the figures that describe the machine, not the map */
.prail{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin-top:1px;background:var(--line);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);overflow:hidden}
.proof{border-radius:var(--r) var(--r) 0 0}
.prail>div{background:var(--bg-2);padding:20px 22px 22px}
.prail b{display:block;font-family:var(--font-d);font-weight:600;font-size:clamp(19px,1.6vw,25px);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.prail b i{font-style:normal;font-family:var(--font-m);font-size:.5em;font-weight:500;color:var(--muted);margin-left:4px;letter-spacing:0}
.prail span{display:block;margin-top:9px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.prail s{display:inline-block;text-decoration:none;font-family:var(--font-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(34,211,238,.3);border-radius:20px;padding:1px 7px;margin-top:5px}
@media (max-width:1100px){.prail{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.proof{grid-template-columns:repeat(2,1fr)}.pcell{min-height:210px}}
@media (max-width:560px){.proof{grid-template-columns:1fr}.prail{grid-template-columns:repeat(2,1fr)}}

/* ---------- pinned pipeline ---------- */
.pipe{position:relative}
.pipe-stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,5vw,80px);overflow:hidden}
@media (max-width:900px){.pipe-stage{grid-template-columns:1fr;align-content:center;gap:16px}}
.pipe-steps{position:relative;min-height:300px}
.pipe-step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(30px);pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pipe-step.on{opacity:1;transform:none;pointer-events:auto}
.pipe-step .k{font-family:var(--font-m);font-size:12px;letter-spacing:.24em;color:var(--cyan);margin-bottom:18px}
.pipe-step h3{font-size:clamp(30px,4vw,56px);letter-spacing:-.03em;margin-bottom:18px}
.pipe-step p{color:var(--ink-2);font-size:clamp(16px,1.3vw,19px);max-width:48ch}
.pipe-rail{display:flex;gap:6px;margin-top:28px}
.pipe-rail i{height:3px;flex:1;background:var(--line-2);border-radius:2px;overflow:hidden;position:relative}
.pipe-rail i::after{content:"";position:absolute;inset:0;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pipe-rail i.on::after{transform:scaleX(1)}
.pipe-vis{position:relative;aspect-ratio:1;max-height:72vh;margin-inline:auto;width:100%}
@media (max-width:900px){.pipe-vis{max-height:38vh}}
.pipe-vis svg{width:100%;height:100%;overflow:visible}
.pipe-vis .layer{opacity:0;transition:opacity .7s var(--ease)}
.pipe-vis .layer.on{opacity:1}
.pipe-spacer{height:100svh}

/* ---------- horizontal scroller ---------- */
.hs{position:relative}
.hs-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;width:100%}
.hs-track{display:flex;gap:20px;padding:0 var(--gutter);will-change:transform;align-items:stretch}
.hs-card{flex:0 0 min(560px,82vw);min-height:min(360px,44vh);display:flex;flex-direction:column}
.hs-card .chips{margin-top:auto;padding-top:22px}
.hs-card::after{content:"";position:absolute;left:28px;right:28px;bottom:20px;height:1px;
  background:linear-gradient(90deg,var(--blue-2),rgba(96,165,250,.06));opacity:.5}
.hs-head{padding:0 var(--gutter);margin-bottom:34px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.hs-head .h-l{max-width:16ch}
.hs-head .hint{font-family:var(--font-m);font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;display:flex;gap:10px;align-items:center}
.hs-head .hint::after{content:"→";animation:nudge 1.4s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(6px)}}

/* ---------- split / two column story ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:start}
.story .sticky{position:sticky;top:120px}
@media (max-width:900px){.story{grid-template-columns:1fr}.story .sticky{position:static}}
.rows{display:grid}
.row{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:30px 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row .n{font-family:var(--font-m);font-size:12px;letter-spacing:.2em;color:var(--amber);padding-top:6px}
.row h4{font-size:clamp(19px,1.6vw,24px);margin-bottom:8px}
.row p{color:var(--ink-2);font-size:15px;max-width:60ch}

/* ---------- audience ---------- */
.aud{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.aud{grid-template-columns:1fr}}
.aud .card{min-height:300px;display:flex;flex-direction:column}
.aud .card ul{list-style:none;margin-top:auto;padding-top:22px;display:grid;gap:8px}
.aud .card li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.aud .card li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-top:8px;box-shadow:0 0 8px var(--cyan)}
.aud .card.amber li::before{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.aud .card.violet li::before{background:var(--violet);box-shadow:0 0 8px var(--violet)}

/* ---------- big statement ---------- */
.statement{text-align:center;padding:clamp(80px,12vw,160px) 0}
.statement h2{font-size:clamp(30px,4.6vw,66px);letter-spacing:-.03em;max-width:22ch;margin-inline:auto;line-height:1.08}
.statement h2 .l{display:block;overflow:hidden}
.statement h2 .l i{display:block;font-style:normal;transform:translateY(105%)}
.statement h2 .dim{color:var(--muted)}
/* Each span is one sentence of the statement, set tight because on a wide screen each is a single line of
   type. On a phone every one of them wraps, and 1.08 leading pushed a descender into the cap below it --
   four sentences read as one crowded block. Narrow screens get their own leading and a gap between the
   sentences, so the statement still lands as four deliberate lines. */
@media (max-width:640px){
  .statement h2{line-height:1.2;max-width:19ch}
  .statement h2 .l+.l{margin-top:.14em}
}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);will-change:transform,opacity}
[data-reveal].in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-30px)}
[data-reveal="right"]{transform:translateX(30px)}
[data-reveal="scale"]{transform:scale(.94)}
.stagger>*{opacity:0;transform:translateY(24px)}
.stagger.in>*{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.stagger.in>*:nth-child(2){transition-delay:.08s}.stagger.in>*:nth-child(3){transition-delay:.16s}.stagger.in>*:nth-child(4){transition-delay:.24s}
.stagger.in>*:nth-child(5){transition-delay:.32s}.stagger.in>*:nth-child(6){transition-delay:.4s}.stagger.in>*:nth-child(7){transition-delay:.48s}.stagger.in>*:nth-child(8){transition-delay:.56s}

/* ---------- outputs list ---------- */
.outs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1000px){.outs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.outs{grid-template-columns:1fr}}
.out{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--panel);display:flex;gap:14px;align-items:center;transition:border-color .3s,transform .4s var(--ease)}
.out:hover{border-color:var(--line-2);transform:translateY(-3px)}
.out i{flex:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--font-m);font-size:10px;letter-spacing:.06em;color:var(--amber);font-style:normal}
.out b{display:block;font-family:var(--font-d);font-weight:600;font-size:15px}
.out span{font-size:12px;color:var(--muted)}

/* ---------- module strip on subpages ---------- */
.subnav{position:sticky;top:64px;z-index:900;display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none;
  background:linear-gradient(180deg,var(--bg) 60%,transparent)}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);transition:all .25s}
.subnav a:hover,.subnav a.active{border-color:var(--cyan);color:var(--cyan);background:rgba(34,211,238,.06)}

/* ---------- module block ---------- */
.mod{padding:clamp(70px,9vw,120px) 0;border-top:1px solid var(--line)}
.mod-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,90px);align-items:center}
.mod-grid.flip .art{order:-1}
@media (max-width:900px){.mod-grid{grid-template-columns:1fr}.mod-grid.flip .art{order:0}}
.mod .art{aspect-ratio:1/0.9;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden}
.mod .art svg{width:100%;height:100%}
.mod .art .lbl{position:absolute;left:16px;top:14px;font-family:var(--font-m);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.mod .art .status{position:absolute;right:14px;top:14px}
.feat{display:grid;gap:10px;margin-top:26px}
.feat li{list-style:none;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:15px;color:var(--ink-2)}
.feat li svg{width:18px;height:18px;margin-top:3px;color:var(--cyan)}
.mod.amber .feat li svg{color:var(--amber)}.mod.violet .feat li svg{color:var(--violet)}.mod.green .feat li svg{color:var(--green)}.mod.rose .feat li svg{color:var(--rose)}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
@media (max-width:520px){.kv{grid-template-columns:1fr}}
.kv div{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--panel)}
.kv b{display:block;font-family:var(--font-d);font-size:24px;letter-spacing:-.03em;font-weight:600}
.kv span{font-size:12px;color:var(--muted)}

/* ---------- animated svg bits ---------- */
.dash{stroke-dasharray:6 8;animation:dashmove 3s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-56}}
.spin{transform-origin:center;transform-box:fill-box;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spin.rev{animation-direction:reverse;animation-duration:60s}
.blink{animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.sweep{transform-origin:center;transform-box:fill-box;animation:spin 5s linear infinite}
.rise{transform-box:fill-box;transform-origin:bottom;animation:rise 4s ease-in-out infinite}
@keyframes rise{50%{transform:scaleY(1.25)}}
.draw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 4s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;border-radius:calc(var(--r) + 8px);border:1px solid var(--line-2);padding:clamp(48px,7vw,96px) clamp(24px,6vw,80px);
  background:linear-gradient(135deg,rgba(34,211,238,.09),rgba(59,130,246,.07) 60%,rgba(52,211,153,.08));text-align:center}
.cta::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(34,211,238,.12),transparent 30%,rgba(59,130,246,.12),transparent 60%);animation:spin 18s linear infinite;pointer-events:none}
.cta>*{position:relative}
.cta h2{font-size:clamp(32px,5vw,68px);letter-spacing:-.035em;max-width:16ch;margin-inline:auto}
.cta p{margin:18px auto 30px;max-width:56ch;color:var(--ink-2);font-size:clamp(16px,1.3vw,19px)}
.cta .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{position:relative;padding:80px 0 34px;border-top:1px solid var(--line);overflow:hidden;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;margin-bottom:60px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
footer h5{font-family:var(--font-m);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:10px}
footer li a{color:var(--ink-2);font-size:14px;transition:color .25s}
footer li a:hover{color:var(--cyan)}
.foot-brand img{height:34px;width:auto;margin-bottom:16px}
.foot-brand p{color:var(--ink-2);font-size:14px;max-width:34ch}
.foot-word{font-family:var(--font-d);font-weight:700;font-size:clamp(64px,17vw,260px);line-height:.8;letter-spacing:-.06em;text-align:center;
  background:linear-gradient(180deg,rgba(var(--fg-rgb),.12),rgba(var(--fg-rgb),.0));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;margin:20px 0 40px}
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--font-m);font-size:11px;letter-spacing:.12em;color:var(--muted);border-top:1px solid var(--line);padding-top:22px}

/* ---------- preloader ---------- */
.loader{position:fixed;inset:0;z-index:4000;background:var(--bg);display:grid;place-items:center;transition:transform .9s var(--ease);will-change:transform}
.loader.done{transform:translateY(-100%)}
.loader img{height:42px;width:auto;opacity:0;animation:lfade 1s var(--ease) forwards}
@keyframes lfade{to{opacity:1}}
.loader .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,var(--cyan),var(--amber));transform:scaleX(0);transform-origin:left;animation:lbar 1.1s var(--ease) forwards .1s}
@keyframes lbar{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  [data-reveal],.stagger>*{opacity:1;transform:none}
  .hero h1 .w i,.statement h2 .l i{transform:none}
}

/* ---- Platform link (app.lumen8.ai) --------------------------------------
   The one nav item that leaves the marketing site for the password-gated
   cockpit. Amber against the cyan nav so it reads as a door, not a section;
   the lock glyph says "credentials required" before the click. Present in
   both the desktop tab row and the mobile drawer, since a sign-in route is
   the one thing that must survive the nav collapsing. */
.links a.platform-link{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--amber-2);
  background:rgba(59,130,246,.07);
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.28);
}
.links a.platform-link svg{width:13px;height:13px;opacity:.85}
.links a.platform-link:hover{
  color:var(--amber-2);
  background:rgba(59,130,246,.14);
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.5),0 4px 18px rgba(59,130,246,.13);
}

/* ---------- holographic art + waveforms ---------- */
.card.big{min-height:460px}
.card.big .art{position:absolute;inset:0;width:auto;aspect-ratio:auto;opacity:1;z-index:0}
.card.big .art canvas{width:100%;height:100%;display:block}
.card.big .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--bg-rgb),0) 28%,rgba(var(--bg-rgb),.94) 72%)}
.pipe-vis canvas,.mod .art canvas{width:100%;height:100%;display:block}
.mod .art{aspect-ratio:1/0.92;background:radial-gradient(80% 70% at 50% 60%,rgba(34,211,238,.06),transparent 70%),var(--panel)}
.wave-strip{position:relative;height:clamp(130px,18vw,230px);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.wave-strip canvas{width:100%;height:100%;display:block}
.hero canvas[data-hero3d]{z-index:0}
.hero .veil{background:radial-gradient(70% 70% at 62% 50%,transparent 0%,rgba(var(--bg-rgb),.35) 70%,var(--bg) 100%),linear-gradient(180deg,rgba(var(--bg-rgb),.35),rgba(var(--bg-rgb),0) 30%,rgba(var(--bg-rgb),.2) 70%,var(--bg) 100%)}
.hero.sub{min-height:86svh}

/* ---------- layout fixes ---------- */
.card.big{min-height:520px}
.card.big .art{inset:0 0 auto 0;height:64%}
.card.big .art::after{background:linear-gradient(180deg,rgba(var(--bg-rgb),0) 45%,rgba(var(--bg-rgb),.96) 100%)}
.pipe-steps{display:flex;flex-direction:column;justify-content:flex-end;min-height:380px}
.pipe-step{inset:0 0 64px 0}
.pipe-rail{margin-top:0}
@media (max-width:900px){.pipe-steps{min-height:300px}}

/* ---------- v3 polish: interactive 3D art, calmer rhythm ---------- */
.mod .art{aspect-ratio:1/1;cursor:grab;background:radial-gradient(70% 60% at 50% 55%,rgba(59,130,246,.10),transparent 70%),linear-gradient(180deg,rgba(var(--fg-rgb),.03),rgba(var(--fg-rgb),.01));border-color:var(--line-2)}
.mod .art::after{content:"DRAG TO ORBIT";position:absolute;left:16px;bottom:14px;font-family:var(--font-m);font-size:9px;letter-spacing:.24em;color:var(--muted);pointer-events:none;opacity:.8}
.mod .art .lbl,.mod .art .status{z-index:2}
.pipe-vis{cursor:grab}
.pipe-vis canvas{border-radius:var(--r)}
.card.big .art{height:62%}
.wave-strip{height:clamp(150px,20vw,260px);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.eyebrow{font-size:10.5px;letter-spacing:.26em}
.h-l{font-size:clamp(32px,4.6vw,66px)}
.lead{color:var(--lead)}
.card{border-radius:20px}
.stats{background:linear-gradient(180deg,rgba(var(--fg-rgb),.04),rgba(var(--fg-rgb),.015))}
.stat b{background:linear-gradient(180deg,var(--hi),var(--lead));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat b small{-webkit-text-fill-color:var(--muted)}
.hero .veil{background:radial-gradient(70% 70% at 62% 48%,transparent 0%,rgba(var(--bg-rgb),.30) 72%,var(--bg) 100%),linear-gradient(180deg,rgba(var(--bg-rgb),.4),rgba(var(--bg-rgb),0) 28%,rgba(var(--bg-rgb),.15) 70%,var(--bg) 100%)}
.nav.scrolled{background:rgba(var(--bg-rgb),.55)}
.links a.platform-link{color:var(--blue-2);background:rgba(59,130,246,.08);box-shadow:inset 0 0 0 1px rgba(59,130,246,.3)}
.links a.platform-link:hover{color:var(--ice);background:rgba(59,130,246,.16);box-shadow:inset 0 0 0 1px rgba(59,130,246,.55),0 4px 18px rgba(59,130,246,.15)}
.chip.soon{border-color:rgba(96,165,250,.5);color:var(--ice)}
.row .n{color:var(--blue-2)}
.out i{color:var(--blue-2)}
.cta{background:linear-gradient(135deg,rgba(34,211,238,.08),rgba(59,130,246,.08) 55%,rgba(52,211,153,.09))}
.cta::before{background:conic-gradient(from 0deg,transparent,rgba(34,211,238,.12),transparent 30%,rgba(59,130,246,.14),transparent 60%,rgba(52,211,153,.1),transparent)}
.foot-bar,.foot-word{letter-spacing:-.06em}
.foot-bar{letter-spacing:.12em}

/* ---------- v4: crisper hero, interactive panels ---------- */
.hero .veil{background:radial-gradient(70% 70% at 62% 48%,transparent 0%,rgba(var(--bg-rgb),.18) 74%,var(--bg) 100%),linear-gradient(180deg,rgba(var(--bg-rgb),.35),rgba(var(--bg-rgb),0) 26%,rgba(var(--bg-rgb),.08) 72%,var(--bg) 100%)}
.mod .art::after{content:"DRAG TO ORBIT · HOVER TO INSPECT · CLICK TO FOCUS"}
.pipe-vis::after{content:"DRAG · HOVER · CLICK";position:absolute;left:16px;bottom:14px;font-family:var(--font-m);font-size:9px;letter-spacing:.24em;color:var(--muted);pointer-events:none;opacity:.7}
.pipe-vis{position:relative}

/* ---------- v4: utility scroller backdrop, marquee start ---------- */
.hs-bg{position:absolute;right:0;top:0;width:58%;height:100%;z-index:0;opacity:.85;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent,#000 30%);mask:linear-gradient(90deg,transparent,#000 30%)}
.hs-bg canvas{width:100%;height:100%;display:block}
.hs-head,.hs-track{position:relative;z-index:1}
.hs-card{min-height:min(340px,42vh);background:rgba(var(--pane-rgb),.62);backdrop-filter:blur(6px)}
/* a phone gives the rail the whole viewport; the copy wraps longer, so the cards can
   stay tall without reopening the empty bottoms they had on a wide screen */
@media (max-width:760px){.hs-card{min-height:min(420px,52vh)}}
@media (max-width:900px){.hs-bg{width:100%;opacity:.45}}
.ticker .line{padding-left:6px}

/* ---------- v5: per-page heroes, readable headline, six surfaces ---------- */
.hero .veil{pointer-events:none;background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.94) 18%,rgba(var(--bg-rgb),.66) 38%,rgba(var(--bg-rgb),.14) 56%,transparent 70%),linear-gradient(180deg,rgba(var(--bg-rgb),.55),rgba(var(--bg-rgb),0) 24%,rgba(var(--bg-rgb),.06) 70%,var(--bg) 100%)}
.hero .h-xl{font-size:clamp(40px,6.5vw,98px)}
.hero-grid{grid-template-columns:1.15fr .85fr}
.hero .lead{max-width:560px;text-shadow:0 2px 24px rgba(var(--bg-rgb),.9)}
.hero h1{text-shadow:0 4px 40px rgba(var(--bg-rgb),.85)}
.hero canvas.hero-holo{left:auto;right:0;width:66%;height:100%;z-index:0;cursor:grab;-webkit-mask:linear-gradient(90deg,transparent 0,#000 36%,#000 100%);mask:linear-gradient(90deg,transparent 0,#000 36%,#000 100%)}
.hero.sub .veil{background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.9) 20%,rgba(var(--bg-rgb),.5) 40%,transparent 58%),linear-gradient(180deg,rgba(var(--bg-rgb),.5),rgba(var(--bg-rgb),0) 26%,rgba(var(--bg-rgb),0) 62%,var(--bg) 100%)}
.hero.sub .wrap{pointer-events:none}
.hero.sub .wrap a,.hero.sub .wrap .ticker,.hero.sub .hero-grid>div:first-child{pointer-events:auto}
.hero .hint{position:absolute;right:var(--gutter);bottom:30px;z-index:2;font-family:var(--font-m);font-size:9px;letter-spacing:.24em;color:var(--muted);opacity:.8;pointer-events:none}
@media (max-width:1000px){
  .hero .veil,.hero.sub .veil{background:linear-gradient(180deg,rgba(var(--bg-rgb),.72),rgba(var(--bg-rgb),.55) 55%,var(--bg) 100%)}
  .hero canvas.hero-holo{width:100%;opacity:.6;-webkit-mask:none;mask:none}
  .hero .hint{display:none}
}
.card.big{min-height:500px}
.card.big .art{height:58%}
.card.big .num{position:relative;z-index:1}
.card.green::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(52,211,153,.13),transparent 45%)}
.card.green::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(52,211,153,.7),transparent 45%)}
.card.rose::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(45,212,191,.12),transparent 45%)}
.card.rose::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(45,212,191,.65),transparent 45%)}
.surf-note{margin-top:26px;display:flex;justify-content:flex-end;font-family:var(--font-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.surf-note a{color:var(--ink-2);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.surf-note a:hover{color:var(--ink);border-color:var(--cyan)}
.card.big .art{height:66%}

/* ---------- v6: sunshine-to-money hero, module dropdown, full-bleed pipeline, wordmark footer ---------- */
.hero h1 .grad{background:linear-gradient(92deg,#67e8f9 0%,#5eead4 35%,#34d399 70%,var(--mint) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradshift 7s ease-in-out infinite alternate}
@keyframes gradshift{from{background-position:0% 0}to{background-position:100% 0}}
.hero canvas[data-hero3d]{inset:0;width:100%;height:100%}
.hero .veil{background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.92) 16%,rgba(var(--bg-rgb),.6) 34%,rgba(var(--bg-rgb),.1) 52%,transparent 66%),linear-gradient(180deg,rgba(var(--bg-rgb),.5),rgba(var(--bg-rgb),0) 22%,rgba(var(--bg-rgb),.04) 72%,var(--bg) 100%)}
.hero .lead{max-width:540px}
/* nav: module dropdown */
.links .has-menu{position:relative;display:inline-flex}
.links .has-menu>a{display:inline-flex;align-items:center;gap:5px}
.links .chev{width:12px;height:12px;opacity:.6;transition:transform .3s var(--ease)}
.links .has-menu:hover .chev,.links .has-menu.open .chev{transform:rotate(180deg)}
.links .menu{position:absolute;top:calc(100% + 10px);left:0;min-width:292px;padding:8px;border-radius:16px;border:1px solid var(--line-2);background:rgba(var(--pane-rgb),.94);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);display:grid;gap:2px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .35s var(--ease);box-shadow:0 30px 70px rgba(var(--sh-rgb),calc(.55*var(--sh-k)))}
.links .menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.links .has-menu:hover .menu,.links .has-menu:focus-within .menu,.links .has-menu.open .menu{opacity:1;transform:none;pointer-events:auto}
.links .menu a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.links .menu a:hover{color:var(--ink);background:rgba(var(--fg-rgb),.06)}
.links .menu a i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);flex:none}
.links .menu a i.rose{background:var(--rose);box-shadow:0 0 10px var(--rose)}
.links .menu a i.green{background:var(--green);box-shadow:0 0 10px var(--green)}
.links .menu a i.violet{background:var(--violet);box-shadow:0 0 10px var(--violet)}
.links .menu a i.blue{background:var(--blue-2);box-shadow:0 0 10px var(--blue-2)}
.links .menu a small{margin-left:auto;font-family:var(--font-m);font-size:9px;letter-spacing:.16em;color:var(--muted);padding-left:14px}
/* pinned pipeline: full-bleed scene, text floats on the left, edges fade instead of clipping */
.pipe-stage{display:block;position:sticky;top:0;height:100svh;width:100%;overflow:hidden}
.pipe-vis{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;margin:0;z-index:0;cursor:grab}
.pipe-vis canvas{border-radius:0;width:100%;height:100%}
.pipe-veil{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.9) 22%,rgba(var(--bg-rgb),.45) 40%,rgba(var(--bg-rgb),.05) 56%,transparent 68%),linear-gradient(180deg,var(--bg) 0%,rgba(var(--bg-rgb),.3) 14%,rgba(var(--bg-rgb),0) 30%,rgba(var(--bg-rgb),0) 74%,var(--bg) 100%)}
.pipe-vis::after{left:auto;right:var(--gutter);bottom:30px;z-index:2}
.pipe-steps{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(560px,46%);height:440px;min-height:0;z-index:2;pointer-events:none;display:block}
.pipe-step{inset:0 0 56px 0}
.pipe-step h3{text-shadow:0 4px 40px rgba(var(--bg-rgb),.9)}
.pipe-step p{text-shadow:0 2px 20px rgba(var(--bg-rgb),.9)}
.pipe-rail{position:absolute;left:0;right:0;bottom:0}
@media (max-width:900px){.pipe-stage{display:block}.pipe-steps{width:calc(100% - var(--gutter)*2);top:auto;bottom:36px;transform:none;height:340px}.pipe-veil{background:linear-gradient(180deg,var(--bg) 0%,rgba(var(--bg-rgb),.2) 18%,rgba(var(--bg-rgb),.25) 50%,rgba(var(--bg-rgb),.92) 74%,var(--bg) 100%)}.pipe-vis::after{display:none}}
/* footer wordmark: the logo itself, fading into the dark */
.foot-word{display:block;width:min(94%,1180px);aspect-ratio:1000/187;margin:24px auto 44px;background:url(/assets/wordmark.webp) center/contain no-repeat;-webkit-mask:linear-gradient(180deg,rgba(0,0,0,.17) 0%,rgba(0,0,0,.05) 62%,transparent 100%);mask:linear-gradient(180deg,rgba(0,0,0,.17) 0%,rgba(0,0,0,.05) 62%,transparent 100%);font-size:0;color:transparent;letter-spacing:0;line-height:0;user-select:none}
/* stats: units sit small beside the figure */
.stat b small,.kv b small{font-size:.46em;color:var(--muted);margin-left:5px;letter-spacing:0;-webkit-text-fill-color:var(--muted);font-family:var(--font-m);font-weight:500}
.surf-note{gap:26px;flex-wrap:wrap}
/* cards: the scene is the card */
.card.big .art{height:70%}
/* The card eyebrow ("05 . AGRICULTURE") sits at 61-66% of the art and the title just
   under it, so the scrim has to be near-opaque by 61% or the label disappears into a
   bright scene. Five earlier rounds each appended their own ramp here; this is the one
   that wins, measured rather than guessed. Above 46% it stays light so the scene reads. */
.card.big .art::after{background:linear-gradient(180deg,
  rgba(var(--bg-rgb),0) 26%,rgba(var(--bg-rgb),.3) 46%,rgba(var(--bg-rgb),.8) 58%,
  rgba(var(--bg-rgb),.95) 68%,rgba(var(--bg-rgb),.99) 100%)}
.card.big .num{color:#9db0c9;text-shadow:0 1px 14px rgba(var(--bg-rgb),.95),0 0 5px rgba(var(--bg-rgb),.85)}
.card.big h3{text-shadow:0 2px 22px rgba(var(--bg-rgb),.8)}
.card.big:hover .art canvas{filter:saturate(1.08) brightness(1.06)}
.card.big .art canvas{transition:filter .5s}
/* module art: taller on wide screens so nothing is cut */
.mod .art{aspect-ratio:1/1.02}
.mod.amber .art{aspect-ratio:1/1.08}
/* hover glow: teal for telecoms, silver for the twin, cyan/blue/green elsewhere. Nothing pink, nothing purple. */
.card.rose::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(45,212,191,.12),transparent 45%)}
.card.rose::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(45,212,191,.6),transparent 45%)}
/* mailto fallback toast */

/* ---------- v7: no purple, no pink; silver twin, teal telecoms; keyboard focus; a pipeline rail you can use ---------- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline-offset:4px}
.eyebrow.violet{color:var(--silver)}
.links .menu a i.violet{background:var(--silver);box-shadow:0 0 10px rgba(226,232,240,.8)}
.links .menu a i.rose{background:var(--rose);box-shadow:0 0 10px var(--rose)}
.card.violet .ico{color:var(--silver)}.mod.violet .feat li svg{color:var(--silver)}
.aud .card.violet li::before{background:var(--silver);box-shadow:0 0 8px rgba(226,232,240,.8)}
/* pipeline rail: a real step index. Click a segment to jump; labels stay visible so you always know where you are */
.pipe-steps .pipe-rail{pointer-events:auto;margin-top:34px;gap:8px}
.pipe-rail i{height:3px;cursor:pointer;overflow:visible;transition:background .3s}
.pipe-rail i:hover{background:rgba(var(--fg-rgb),.35)}
.pipe-rail i b{position:absolute;left:0;top:12px;font:500 9.5px/1 var(--font-m);letter-spacing:.16em;color:var(--muted);white-space:nowrap;transition:color .3s;text-transform:uppercase}
.pipe-rail i.on b{color:var(--ink-2)}
.pipe-rail i.on + i:not(.on) b{color:var(--ink-2)}
.pipe-rail i:hover b{color:var(--ink)}
.pipe-step{inset:0 0 72px 0}
@media (max-width:900px){.pipe-rail i b{display:none}}
/* cards: the scene lifts a little under the pointer */
.card.big .art{transition:transform .7s var(--ease),opacity .5s}
.card.big:hover .art{transform:translateY(-6px) scale(1.025)}
.mod .art canvas{transition:filter .5s}
.mod .art:hover canvas{filter:saturate(1.06) brightness(1.05)}
/* sub-page heroes: a hair more room for the scene on wide screens */
@media (min-width:1200px){.hero.sub .hero-grid{grid-template-columns:1.1fr .9fr}}
/* nav: active page carries its dot, hovered page gets a soft underline */
.links>a{position:relative}
.links>a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
.links>a:hover::after{transform:none}
/* the ring-and-dot custom cursor read as a radar reticle; the native cursor is back for good */
.cursor{display:none!important}

/* ---------- v9: the hero's treatment on every scene ---------- */
/* module art: the same veil as the hero, so the site sits in the dark instead of in a box */
.mod .art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:radial-gradient(85% 80% at 50% 46%,transparent 52%,rgba(var(--bg-rgb),.62) 100%),linear-gradient(180deg,rgba(var(--bg-rgb),.34),rgba(var(--bg-rgb),0) 24%,rgba(var(--bg-rgb),0) 68%,rgba(var(--bg-rgb),.6) 100%)}
.mod .art canvas{position:relative;z-index:0}
.mod .art::after{z-index:2}
.card.big .art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(90% 80% at 50% 40%,transparent 55%,rgba(var(--bg-rgb),.5) 100%),linear-gradient(180deg,rgba(var(--bg-rgb),.3),transparent 26%)}
/* sub-page heroes: more of the frame for the site */
.hero canvas.hero-holo{width:72%;-webkit-mask:linear-gradient(90deg,transparent 0,#000 32%,#000 100%);mask:linear-gradient(90deg,transparent 0,#000 32%,#000 100%)}
.hs-bg{width:62%;opacity:.9}
@media (max-width:1000px){.hero canvas.hero-holo{width:100%;opacity:.6;-webkit-mask:none;mask:none}}
@media (max-width:900px){.hs-bg{width:100%;opacity:.45}}

/* ---------- v12: lighter on every frame ---------- */
/* a 90 px blur on three 60 vw orbs re-rendered every scroll frame; the gradients carry the softness now */
.orb{filter:none}
.orb.c{background:radial-gradient(circle,rgba(34,211,238,.26) 0%,rgba(34,211,238,.10) 30%,rgba(34,211,238,.03) 52%,transparent 68%)}
.orb.a{background:radial-gradient(circle,rgba(59,130,246,.18) 0%,rgba(59,130,246,.07) 30%,rgba(59,130,246,.02) 52%,transparent 68%)}
.orb.v{background:radial-gradient(circle,rgba(45,212,191,.12) 0%,rgba(45,212,191,.05) 30%,rgba(45,212,191,.015) 52%,transparent 68%)}
body::before{mix-blend-mode:normal;opacity:.03}
/* backdrop blurs over a live canvas re-blur every frame; solid panels instead */
.ticker{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(var(--pane-rgb),.72)}
.hs-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(var(--pane-rgb),.8)}
/* the headline gradient shift repainted the whole hero title every frame */
.hero h1 .grad{animation:none;background-position:35% 0}
@media (max-width:900px){.nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}}
/* hero intro and statement lines without a tween library */
.js .hero [data-hero]{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .hero.in [data-hero]{opacity:1;transform:none}
.hero h1 .w i{transition:transform 1.2s var(--ease)}
.hero.in h1 .w i{transform:none}
.statement h2 .l i{transition:transform 1.1s var(--ease)}
.statement h2 .l:nth-child(2) i{transition-delay:.12s}.statement h2 .l:nth-child(3) i{transition-delay:.24s}.statement h2 .l:nth-child(4) i{transition-delay:.36s}
.statement h2.in .l i{transform:none}
@media (prefers-reduced-motion:reduce){.js .hero [data-hero]{opacity:1;transform:none}}

/* ---------- v12: a first engagement, and the questions people ask ---------- */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1000px){.tl{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tl{grid-template-columns:1fr}}
.tl .card{min-height:260px;display:flex;flex-direction:column}
.tl .card .num{display:flex;align-items:center;gap:12px;color:var(--blue-2)}
.tl .card .num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(96,165,250,.5),transparent)}
.tl .card h3{font-size:clamp(20px,1.5vw,23px)}
.tl .card p{font-size:14.5px}
.tl .card .who{margin-top:auto;padding-top:20px;font-family:var(--font-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* --- the engagement thread: one conductor drawn across the four stages as the
   reader scrolls. The section is about a sequence in time, so it is staged in
   time: the line draws, each node ignites as the current reaches it, and the
   card under that node comes up out of its resting state. --- */
.tl-thread{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:center;height:34px;margin-bottom:10px}
/* the track runs node-centre to node-centre: half a column in from each end,
   and the columns carry the same 18px gap the cards do */
.tl-track{position:absolute;left:calc(12.5% - 6.75px);right:calc(12.5% - 6.75px);top:50%;height:1px;transform:translateY(-.5px);background:var(--line-2)}
.tl-fill{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--cyan),var(--blue-2) 60%,var(--green));
  box-shadow:0 0 12px rgba(59,130,246,.55)}
.tl-pulse{position:absolute;top:50%;left:calc(var(--p,0) * 100%);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--cyan-2);box-shadow:0 0 10px var(--cyan),0 0 26px rgba(34,211,238,.6);
  opacity:var(--pulse,0);transition:opacity .35s}
.tl-node{position:relative;justify-self:center;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--bg);transition:border-color .45s,background .45s,box-shadow .45s}
.tl-node::after{content:"";position:absolute;inset:2px;border-radius:50%;background:transparent;transition:background .45s}
.tl-node.on{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,238,.10),0 0 16px rgba(34,211,238,.5)}
.tl-node.on::after{background:var(--cyan-2)}
/* The cards rest back, then come forward as the current reaches them. This
   block drives its own reveal, so it carries no .stagger -- and the resting
   state is scoped to .js so the cards stay readable if the script never runs. */
.js .tl .card{opacity:.46;transform:translateY(10px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),border-color .6s}
.js .tl .card.lit{opacity:1;transform:none;border-color:var(--line-2)}
.tl .card.lit .num{color:var(--cyan-2)}
@media (max-width:1000px){.tl-thread{display:none}}
@media (prefers-reduced-motion:reduce){
  .tl-fill{transform:scaleX(1)}.tl-pulse{display:none}
  .js .tl .card{opacity:1;transform:none;transition:none}
}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:start}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;align-items:center;gap:18px;padding:22px 0;font-family:var(--font-d);font-weight:600;font-size:clamp(17px,1.4vw,21px);letter-spacing:-.01em;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cyan-2)}
.faq summary i{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);position:relative;transition:transform .4s var(--ease),border-color .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--ink-2);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg);border-color:var(--cyan)}
.faq details p{color:var(--ink-2);font-size:15.5px;max-width:64ch;padding:0 0 24px}

/* ---------- v12: investors door beside the platform door ---------- */
.links a.investors-link{color:var(--mint);background:rgba(52,211,153,.07);box-shadow:inset 0 0 0 1px rgba(52,211,153,.3);margin-left:6px}
.links a.investors-link:hover{color:var(--mint-2);background:rgba(52,211,153,.14);box-shadow:inset 0 0 0 1px rgba(52,211,153,.55),0 4px 18px rgba(52,211,153,.13)}
.mobile a:nth-child(6){transition-delay:.25s}.mobile a:nth-child(7){transition-delay:.3s}

/* ---------- v14: full-bleed module features, the outputs wall ---------- */
.mod.full{position:relative;min-height:96svh;display:flex;align-items:center;overflow:hidden;padding:130px 0 110px}
.mod.full .mod-bg{position:absolute;inset:0;z-index:0}
.mod.full canvas.mod-holo{position:absolute;right:0;top:0;width:78%;height:100%;display:block;cursor:grab;-webkit-mask:linear-gradient(90deg,transparent 0,#000 28%,#000 100%);mask:linear-gradient(90deg,transparent 0,#000 28%,#000 100%)}
.mod.full .mod-veil{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.92) 20%,rgba(var(--bg-rgb),.55) 40%,rgba(var(--bg-rgb),.08) 58%,transparent 70%),linear-gradient(180deg,var(--bg) 0%,rgba(var(--bg-rgb),.25) 16%,rgba(var(--bg-rgb),0) 36%,rgba(var(--bg-rgb),0) 70%,var(--bg) 100%)}
.mod.full .wrap{position:relative;z-index:2;pointer-events:none}
.mod.full .mod-copy{max-width:600px;pointer-events:auto}
.mod.full .mod-copy .status{display:inline-block;margin-bottom:18px}
.mod.full .mod-copy .h-l{text-shadow:0 4px 40px rgba(var(--bg-rgb),.9)}
.mod.full .mod-copy .lead,.mod.full .feat li{text-shadow:0 2px 20px rgba(var(--bg-rgb),.9)}
.mod.full .kv div{background:rgba(var(--pane-rgb),.7)}
.mod.full .hint{position:absolute;right:var(--gutter);bottom:26px;z-index:2;font-family:var(--font-m);font-size:9px;letter-spacing:.24em;color:var(--muted);opacity:.8;pointer-events:none}
@media (max-width:1000px){.mod.full canvas.mod-holo{width:100%;opacity:.55;-webkit-mask:none;mask:none}.mod.full .mod-veil{background:linear-gradient(180deg,rgba(var(--bg-rgb),.78),rgba(var(--bg-rgb),.6) 55%,var(--bg) 100%)}.mod.full .hint{display:none}.mod.full{min-height:0;padding:100px 0 80px}}
/* outputs: the pack first, formats coloured, the wall breathes */
.outs{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.outs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.outs{grid-template-columns:1fr 1fr}}
.out{position:relative;overflow:hidden}
.out::before{content:"";position:absolute;inset:0;background:radial-gradient(120px circle at 20% 30%,rgba(34,211,238,.12),transparent 60%);opacity:0;transition:opacity .4s}
.out:hover::before{opacity:1}
.out[data-fmt=pack] i{color:var(--mint);border-color:rgba(52,211,153,.5);box-shadow:0 0 14px rgba(52,211,153,.25)}
.out[data-fmt=pack]{border-color:rgba(52,211,153,.35)}
.out[data-fmt=cad] i{color:var(--cyan-2);border-color:rgba(34,211,238,.5)}
.out[data-fmt=3d] i{color:var(--silver);border-color:rgba(226,232,240,.4)}
.out[data-fmt=pdf] i{color:var(--blue-2)}

/* ---------- v15: the full-bleed features read; the scene is the light ---------- */
.mod.full{border-top:0;padding:150px 0 140px}
.mod.full canvas.mod-holo{width:84%;-webkit-mask:linear-gradient(90deg,transparent 0,#000 22%,#000 100%);mask:linear-gradient(90deg,transparent 0,#000 22%,#000 100%)}
.mod.full .mod-veil{background:linear-gradient(90deg,rgba(var(--bg-rgb),.96) 0%,rgba(var(--bg-rgb),.78) 22%,rgba(var(--bg-rgb),.32) 40%,rgba(var(--bg-rgb),.04) 54%,transparent 62%),linear-gradient(180deg,var(--bg) 0%,rgba(var(--bg-rgb),.55) 10%,rgba(var(--bg-rgb),0) 26%,rgba(var(--bg-rgb),0) 72%,rgba(var(--bg-rgb),.6) 90%,var(--bg) 100%)}
.mod.full+.mod{border-top:0}
.mod.full .mod-copy .h-l{font-size:clamp(34px,4.2vw,62px)}
@media (max-width:1000px){.mod.full canvas.mod-holo{width:100%;opacity:.7}.mod.full .mod-veil{background:linear-gradient(180deg,var(--bg) 0%,rgba(var(--bg-rgb),.7) 30%,rgba(var(--bg-rgb),.55) 60%,var(--bg) 100%)}}

/* ---------- v17: the full-bleed features take the sub-page hero treatment, verbatim ---------- */
.mod.full{min-height:88svh;padding:170px 0 120px;display:flex;align-items:center;overflow:hidden}
.mod.full canvas.mod-holo{left:auto;right:0;width:72%;height:100%;opacity:1;-webkit-mask:linear-gradient(90deg,transparent 0,#000 32%,#000 100%);mask:linear-gradient(90deg,transparent 0,#000 32%,#000 100%)}
.mod.full .mod-veil{background:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.9) 20%,rgba(var(--bg-rgb),.5) 40%,transparent 58%),linear-gradient(180deg,var(--bg) 0%,rgba(var(--bg-rgb),.35) 12%,rgba(var(--bg-rgb),0) 30%,rgba(var(--bg-rgb),0) 62%,var(--bg) 100%)}
.mod.full .mod-copy{max-width:560px}
.mod.full .mod-copy .h-l{font-size:clamp(40px,5vw,72px);text-shadow:0 4px 40px rgba(var(--bg-rgb),.85)}
.mod.full .mod-copy .lead{max-width:540px;text-shadow:0 2px 24px rgba(var(--bg-rgb),.9)}
.mod.full .feat li{text-shadow:0 2px 20px rgba(var(--bg-rgb),.9)}
.mod.full .kv div{background:rgba(var(--pane-rgb),.62)}
@media (max-width:1000px){.mod.full{min-height:0;padding:110px 0 80px}.mod.full canvas.mod-holo{width:100%;opacity:.6;-webkit-mask:none;mask:none}.mod.full .mod-veil{background:linear-gradient(180deg,rgba(var(--bg-rgb),.72),rgba(var(--bg-rgb),.55) 55%,var(--bg) 100%)}}

/* v18 — the horizontal fade of every wide hero canvas is drawn inside the 3D composite pass; no compositor mask */
@media (min-width:1001px){.hero canvas.hero-holo,.mod.full canvas.mod-holo{-webkit-mask:none;mask:none}}

/* v19 — the hero ticker states one whole fact at a time.
   The narrow-screen stack at the top of this file was being overridden by the later unconditional .hero-grid rule,
   which left a phone with a 96px-wide ticker showing a fragment of one number. The stack is restored here, after it. */
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr}.hero-side{width:100%}}
.ticker .line{animation:none;-webkit-mask:none;mask:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
/* the fact never blinks out: a long fade left the pill empty for a fifth of a second at a time, which is what a
   first glance -- or a screenshot -- lands on often enough to matter. It hands over quickly and never reaches zero. */
.ticker .line.swap{opacity:.05;transform:translateY(-6px)}
@media (max-width:520px){.ticker .line{white-space:normal;text-overflow:clip}}

/* v20 — what comes out, as a pack you can turn over.
   Eleven identical cards said "eleven files" and nothing else. The same eleven, grouped by who opens them and set
   beside the pack itself in 3D, say "one run, four audiences" — and hovering a line turns the pack to that document. */
.pack-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(28px,5vw,70px);align-items:start}
/* the pack stays with the reader while they work down the list, rather than floating in the middle of it */
@media (min-width:1001px){.pack-art{position:sticky;top:clamp(104px,20vh,168px)}}
@media (max-width:1000px){.pack-grid{grid-template-columns:1fr;gap:34px}}
.docset{display:flex;flex-direction:column;gap:22px}
.docgrp{display:flex;flex-direction:column;gap:2px}
.docgrp .gl{font-family:var(--font-m);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  padding:0 0 9px 2px;border-bottom:1px solid var(--line);margin-bottom:8px}
.docrow{display:flex;gap:14px;align-items:center;padding:9px 12px;border-radius:12px;border:1px solid transparent;
  position:relative;transition:border-color .3s,background .3s,transform .4s var(--ease)}
.docrow i{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);display:grid;place-items:center;
  font-family:var(--font-m);font-size:10px;letter-spacing:.06em;color:var(--blue-2);font-style:normal;transition:color .3s,border-color .3s,box-shadow .3s}
.docrow b{display:block;font-family:var(--font-d);font-weight:600;font-size:15px}
.docrow span{font-size:12px;color:var(--muted)}
.docrow[data-fmt=pack] i{color:var(--mint);border-color:rgba(52,211,153,.5)}
.docrow[data-fmt=cad] i{color:var(--cyan-2);border-color:rgba(34,211,238,.5)}
.docrow[data-fmt="3d"] i{color:var(--silver);border-color:rgba(226,232,240,.4)}
.docrow:hover{background:var(--panel);border-color:var(--line)}
/* only the lines that have an object in the scene offer to turn it */
.docrow[data-focus]{cursor:pointer}
.docrow[data-focus]::after{content:"";position:absolute;right:12px;width:5px;height:5px;border-radius:50%;
  background:var(--blue-2);opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s var(--ease)}
.docrow[data-focus]:hover::after{opacity:.9;transform:scale(1)}
.docrow[data-focus]:hover i{box-shadow:0 0 16px rgba(34,211,238,.28)}
.pack-art{aspect-ratio:1/.76;border-radius:var(--r);border:1px solid var(--line-2);position:relative;overflow:hidden;cursor:grab;
  background:radial-gradient(72% 62% at 50% 54%,rgba(34,211,238,.09),transparent 70%),linear-gradient(180deg,rgba(var(--fg-rgb),.03),rgba(var(--fg-rgb),.01))}
.pack-art canvas{width:100%;height:100%;display:block;position:relative;z-index:0}
.pack-art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(85% 80% at 50% 46%,transparent 54%,rgba(var(--bg-rgb),.55) 100%)}
.pack-art .lbl{position:absolute;left:16px;top:14px;z-index:2;font-family:var(--font-m);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.pack-art::after{content:"DRAG TO ORBIT · HOVER TO INSPECT · CLICK TO FOCUS";position:absolute;left:16px;bottom:14px;z-index:2;
  font-family:var(--font-m);font-size:9px;letter-spacing:.24em;color:var(--muted);pointer-events:none;opacity:.8}
@media (max-width:520px){.pack-art::after{content:"DRAG TO ORBIT"}}

/* v21 — on a phone the full-bleed scene stops being a backdrop the copy has to fight.
   At 390px the desktop composition collapses: the horizontal veil that keeps the text column clear on a wide
   screen has no column to keep clear, so it fell back to a flat 55-72% wash and the lead, the feature list and
   half the heading were read straight off a lattice of nodes, houses and trees. Dropping the canvas opacity
   further would only have traded an unreadable scene for a dull one.
   So the scene becomes what it already is on every other section of the site: its own framed band, at the top,
   at full strength -- and the copy below it sits on the page, on nothing. Both get to be legible. The veil now
   only has to land the band's two edges into the background, and the text shadows that were propping the copy
   up over the scene come off, which is what makes it read as typeset rather than composited. */
@media (max-width:1000px){
  /* the band clears the fixed nav rather than running under it: a scene that fills its own frame was still
     losing its top edge -- a graph's outer lobes, a ledger board's header -- to 66px of translucent bar */
  .mod.full{display:block;min-height:0;padding:64px 0 86px;align-items:stretch}
  .mod.full .mod-bg{position:relative;inset:auto;height:42svh;min-height:272px;max-height:400px;overflow:hidden}
  .mod.full canvas.mod-holo{position:absolute;inset:0;width:100%;height:100%;opacity:1;-webkit-mask:none;mask:none}
  .mod.full .mod-veil{background:linear-gradient(180deg,var(--bg) 0%,rgba(var(--bg-rgb),.34) 16%,rgba(var(--bg-rgb),0) 44%,rgba(var(--bg-rgb),.34) 82%,var(--bg) 100%)}
  .mod.full .wrap{margin-top:-30px}
  .mod.full .mod-copy .h-l,.mod.full .mod-copy .lead,.mod.full .feat li{text-shadow:none}
  .mod.full .kv div{background:rgba(var(--pane-rgb),.5)}
}

/* ---------- v22 — a sustainable development platform ----------
   The site stops being about one kind of asset. Fifteen modules sit in five pillars of sustainable development,
   and the home page explains them the way the platform's own Home does: a dial of models, one at a time.
   The models are the platform's dioramas, baked to images for every still copy and drawn live only where they
   move. Everything below keeps the house rules: dark, no purple, no pink, no yellow, no radar. */

/* the pillar palette: five hues from the site's own family, legible on the dark */
:root{--p-power:#38bdf8;--p-access:#2dd4bf;--p-land:#4ade80;--p-trade:#60a5fa;--p-intel:#e2e8f0}

/* nav: the module menu becomes a map of the platform, one column per pillar */
.nav .wrap{position:relative}
.links .has-menu.mega-host{position:static}
.links .menu.mega{left:50%;right:auto;top:calc(100% + 6px);width:min(1080px,calc(100vw - 40px));transform:translate(-50%,8px);
  grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:14px;border-radius:20px}
.links .has-menu:hover .menu.mega,.links .has-menu:focus-within .menu.mega,.links .has-menu.open .menu.mega{transform:translate(-50%,0)}
.links .menu.mega::before{top:-26px;height:26px}
.mm-col{display:flex;flex-direction:column;gap:2px;min-width:0;padding:4px 2px}
.mm-h{display:flex;align-items:center;gap:8px;padding:6px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mm-h::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc);box-shadow:0 0 10px var(--pc);flex:none}
.links .menu.mega a{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:7px 8px;border-radius:12px;white-space:normal}
.links .menu.mega a img{grid-row:span 2;width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(var(--sh-rgb),calc(.5*var(--sh-k))));transition:transform .4s var(--ease)}
.links .menu.mega a:hover img{transform:translateY(-2px) scale(1.08)}
.links .menu.mega a b{font-family:var(--font-d);font-weight:600;font-size:13.5px;color:var(--ink);line-height:1.15}
.links .menu.mega a small{grid-column:2;margin:2px 0 0;padding:0;font-family:var(--font-b);font-size:11.5px;letter-spacing:0;color:var(--muted);line-height:1.3}
.links .menu.mega a small em{font-style:normal;font-family:var(--font-m);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-2);margin-left:6px}
.links .menu.mega a small em.dev{color:var(--muted)}
.mm-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;padding:12px 10px 4px;border-top:1px solid var(--line);
  font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.links .menu.mega .mm-foot a{display:inline-flex;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);font-family:var(--font-m);font-size:10px;letter-spacing:.16em}
.links .menu.mega .mm-foot a:hover{border-color:var(--cyan);color:var(--cyan-2)}
@media (max-width:1180px){.links .menu.mega a small{display:none}.links .menu.mega a{grid-template-columns:34px 1fr}.links .menu.mega a img{width:34px;height:34px;grid-row:auto}}

/* hero: the pillar line under the lead */
.hero-pillars{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.hero-pillars span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(var(--pane-rgb),.6);
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.hero-pillars span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc);box-shadow:0 0 8px var(--pc)}

/* ---------- the wheel ---------- */
.wheel-sec{--c:var(--p-power);position:relative;overflow:hidden}
.wheel-sec::before{content:"";position:absolute;right:-18vw;top:6%;width:min(92vw,1300px);aspect-ratio:1;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 11%,transparent),color-mix(in srgb,var(--c) 4%,transparent) 55%,transparent)}
.wheel-sec .wrap{position:relative;z-index:1}
.wheel-sec .head{margin-bottom:clamp(20px,3vw,36px)}
.sw-grid{display:grid;grid-template-columns:minmax(330px,.8fr) 1.2fr;gap:clamp(28px,4vw,64px);align-items:center}
.sw-stage{display:grid;place-items:center;padding:4.5% 4%}
.sw-stage>[data-wheel]{width:100%;display:grid;place-items:center}
.sw{position:relative;width:min(100%,80svh,780px);aspect-ratio:1;outline:none;user-select:none;-webkit-user-select:none}
.sw-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sw-rings circle,.sw-rings path,.sw-rings line{fill:none;vector-effect:non-scaling-stroke}
.sw-bezel{stroke:rgba(var(--fg-rgb),.07);stroke-width:1}
.sw-tick{stroke:rgba(var(--fg-rgb),.09);stroke-width:1}
.sw-tick.maj{stroke:rgba(var(--fg-rgb),.3);stroke-width:1.4}
.sw-parc{stroke:var(--pc);stroke-width:2;stroke-linecap:round;opacity:.26;transition:opacity .6s,stroke-width .6s}
.sw-sel-glow{stroke:var(--c);stroke-width:12;stroke-linecap:round;opacity:.16;transition:stroke .8s}
.sw-sel-arc{stroke:var(--c);stroke-width:3.5;stroke-linecap:round;transition:stroke .8s}
.sw-track{stroke:rgba(var(--fg-rgb),.06);stroke-width:1}
.sw-inner{stroke:rgba(var(--fg-rgb),.08);stroke-width:1;stroke-dasharray:1 6}
.sw-rings .sw-mark{fill:var(--ink)}
.sw-plabels text{font-family:var(--font-m);font-size:1.42px;font-weight:500;letter-spacing:.34px;fill:rgba(var(--lab-rgb),.5);transition:fill .6s}
/* the selected module's pillar is lit on the bezel: its arc and its printed name */
.sw[data-pillar=power] .sw-parc[data-p=power],.sw[data-pillar=access] .sw-parc[data-p=access],.sw[data-pillar=land] .sw-parc[data-p=land],
.sw[data-pillar=trade] .sw-parc[data-p=trade],.sw[data-pillar=intel] .sw-parc[data-p=intel]{opacity:.9}
.sw[data-pillar=power] text[data-p=power],.sw[data-pillar=access] text[data-p=access],.sw[data-pillar=land] text[data-p=land],
.sw[data-pillar=trade] text[data-p=trade],.sw[data-pillar=intel] text[data-p=intel]{fill:var(--pc)}
.sw-center{position:absolute;inset:19%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 17%,transparent) 0%,color-mix(in srgb,var(--c) 6%,transparent) 50%,transparent 100%)}
.sw-center::after{content:"";position:absolute;left:14%;right:14%;bottom:10%;height:16%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 30%,transparent),transparent)}
.sw-hero{position:absolute;inset:0 2% 5%;display:block;cursor:pointer;perspective:1400px;z-index:2;animation:sw-hero-in .85s var(--ease) both}
.sw-hero.is-out{animation:sw-hero-out .45s ease both;pointer-events:none}
@keyframes sw-hero-in{from{opacity:0;transform:translateY(22px) scale(.92)}to{opacity:1;transform:none}}
@keyframes sw-hero-out{to{opacity:0;transform:translateY(-12px) scale(1.04)}}
.sw-tilt{width:100%;height:100%;transition:transform .5s var(--ease);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--hs,1))}
.sw-hero:hover .sw-tilt{--hs:1.05;transition:transform .25s ease-out}
.sw-big{width:100%;height:100%;display:block;filter:drop-shadow(0 34px 34px rgba(var(--sh-rgb),calc(.6*var(--sh-k)))) drop-shadow(0 6px 10px rgba(var(--sh-rgb),calc(.35*var(--sh-k))));
  animation:sw-float 7s ease-in-out infinite alternate;will-change:transform}
@keyframes sw-float{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.sw-open{position:absolute;left:50%;bottom:3%;transform:translate(-50%,8px);display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;
  background:rgba(var(--pane-rgb),.9);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);font-family:var(--font-d);font-weight:600;font-size:13px;color:var(--ink);
  opacity:0;transition:opacity .3s,transform .4s var(--ease);pointer-events:none;white-space:nowrap}
.sw-open svg{width:14px;height:14px}
.sw-hero:hover .sw-open,.sw-hero:focus-visible .sw-open{opacity:1;transform:translate(-50%,0)}
.sw-node{position:absolute;width:14.2%;transform:translate(-50%,-46%);padding:0;border:0;background:none;cursor:pointer;z-index:1;
  display:flex;flex-direction:column;align-items:center;transition:opacity .35s}
.sw-node:hover,.sw-node.is-sel{z-index:3}
.sw-art{position:relative;display:block;width:100%;margin-bottom:-10%;transition:transform .5s var(--ease)}
.sw-art::before{content:"";position:absolute;inset:24% 6% 0;border-radius:50%;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 34%,transparent),transparent)}
.sw-art img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 10px rgba(var(--sh-rgb),calc(.55*var(--sh-k)))) brightness(.8) saturate(.82);transition:filter .45s}
.sw-node:hover .sw-art{transform:translateY(-7%) scale(1.18)}
.sw-node:hover .sw-art::before,.sw-node.is-sel .sw-art::before{opacity:1}
.sw-node:hover .sw-art img,.sw-node.is-sel .sw-art img{filter:drop-shadow(0 16px 16px rgba(var(--sh-rgb),calc(.6*var(--sh-k)))) brightness(1) saturate(1)}
.sw-node.is-sel .sw-art{transform:translateY(-4%) scale(1.24)}
.sw-node.is-sel:hover .sw-art{transform:translateY(-9%) scale(1.36)}
.sw-lbl{font-family:var(--font-m);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .3s,transform .5s var(--ease)}
.sw-node:hover .sw-lbl,.sw-node.is-sel .sw-lbl{color:var(--ink);transform:translateY(6px)}
.sw-node.is-sel .sw-lbl::after{content:"";display:block;width:5px;height:5px;border-radius:50%;background:var(--c);margin:6px auto 0;box-shadow:0 0 10px var(--c)}
.sw-tag{position:absolute;left:50%;top:100%;padding:4px 9px;border-radius:999px;border:1px solid var(--line-2);background:rgba(var(--pane-rgb),.92);
  font-size:11px;color:var(--ink-2);white-space:nowrap;opacity:0;transform:translate(-50%,2px);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.sw-node:not(.is-sel):hover .sw-tag{opacity:1;transform:translate(-50%,12px)}
.sw-soon{margin-top:4px;padding:1px 7px;border-radius:999px;border:1px dashed rgba(var(--fg-rgb),.2);font-family:var(--font-m);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sw-node.is-soon .sw-art img{opacity:.72}
.sw-node:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:14px}
.sw[data-focus] .sw-node{opacity:.22}
.sw[data-focus=power] .sw-node[data-p=power],.sw[data-focus=access] .sw-node[data-p=access],.sw[data-focus=land] .sw-node[data-p=land],
.sw[data-focus=trade] .sw-node[data-p=trade],.sw[data-focus=intel] .sw-node[data-p=intel]{opacity:1}
.sw[data-focus=power] .sw-parc[data-p=power],.sw[data-focus=access] .sw-parc[data-p=access],.sw[data-focus=land] .sw-parc[data-p=land],
.sw[data-focus=trade] .sw-parc[data-p=trade],.sw[data-focus=intel] .sw-parc[data-p=intel]{opacity:1;stroke-width:3.5}
/* the copy column */
.sw-copy{min-height:520px;display:flex;flex-direction:column;justify-content:center}
.sw-c{animation:sw-c-in .55s var(--ease)}
@keyframes sw-c-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sw-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sw-idx{font-family:var(--font-m);font-size:12px;font-weight:600;color:var(--ink)}
.sw-of{font-family:var(--font-m);font-size:12px;color:var(--muted);margin-right:6px}
.sw-pill{font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);padding:6px 11px;border-radius:999px;
  background:color-mix(in srgb,var(--c) 9%,transparent);border:1px solid color-mix(in srgb,var(--c) 38%,transparent)}
.chip.dev{border-style:dashed;color:var(--ink-2)}
.sw-name{font-size:clamp(46px,5vw,80px);letter-spacing:-.045em;line-height:.95;margin:22px 0 10px}
.sw-tagline{font-family:var(--font-m);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.sw-pitch{font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--ink-2);margin:18px 0 22px;max-width:34em}
.sw-does{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.sw-does li{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 11px;border-radius:999px;border:1px solid var(--line-2);background:rgba(var(--fg-rgb),.03);font-size:13px;color:var(--ink)}
.sw-does li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);flex:none}
.sw-sdgs{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 30px;padding-top:18px;border-top:1px solid var(--line)}
.sdg{display:inline-flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink-2)}
.sdg b{font-family:var(--font-m);font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--c,var(--cyan))}
.sw-actions{display:flex;align-items:center;gap:12px}
.sw-actions .btn{flex:none}
.sw-step{display:flex;gap:8px;margin-left:auto}
.sw-step button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);transition:border-color .25s,color .25s,background .25s,transform .25s}
.sw-step button:hover{border-color:var(--c);color:var(--ink);background:rgba(var(--fg-rgb),.04);transform:translateY(-1px)}
.sw-step svg{width:17px;height:17px}
.sw-progress{height:2px;margin-top:30px;background:var(--line);border-radius:2px;overflow:hidden}
.sw-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 30%,transparent),var(--c));transform-origin:left;animation:sw-prog 7s linear forwards}
@keyframes sw-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.wheel-sec.is-idle .sw-progress i,.sw-grid:hover .sw-progress i{animation-play-state:paused}
/* the five pillars, under the dial */
.sw-pillars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:clamp(28px,4vw,44px)}
.sw-pbtn{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);text-align:left;
  transition:border-color .35s,background .35s,transform .35s var(--ease)}
.sw-pbtn i{width:9px;height:9px;border-radius:50%;background:var(--pc);box-shadow:0 0 12px var(--pc);flex:none}
.sw-pbtn span{display:flex;flex-direction:column;gap:3px;min-width:0}
.sw-pbtn b{font-family:var(--font-d);font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.sw-pbtn em{font-style:normal;font-family:var(--font-m);font-size:9.5px;letter-spacing:.14em;color:var(--muted)}
.sw-pbtn small{margin-left:auto;font-family:var(--font-m);font-size:11px;color:var(--muted)}
.sw-pbtn:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-2px)}
.sw-pbtn[aria-pressed=true]{border-color:color-mix(in srgb,var(--pc) 55%,transparent);background:color-mix(in srgb,var(--pc) 7%,transparent)}
.sw-pbtn[aria-pressed=true] small{color:var(--pc)}
.sw-noscript{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:1100px){.sw-pillars{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.sw-grid{grid-template-columns:1fr}.sw-stage{order:-1;padding:6% 2%}.sw-copy{min-height:0}}
@media (max-width:640px){
  .sw-plabels{display:none}
  .sw-lbl{font-size:7.5px;letter-spacing:.1em}
  .sw-node:not(.is-sel) .sw-lbl,.sw-soon,.sw-tag,.sw-open{display:none}
  .sw-pillars{grid-template-columns:1fr 1fr}
  .sw-step button{width:42px;height:42px}
}
@media (max-width:400px){.sw-pillars{grid-template-columns:1fr}}

/* the models come alive under the pointer: the platform's diorama motion, only inside .hx-anim */
.hx-anim .hx-pulse{transform-box:fill-box;transform-origin:center;animation:hx-pulse 2.4s ease-in-out infinite}
.hx-anim .hx-blink{animation:hx-blink 1.6s steps(1) infinite}
.hx-anim .hx-flow{animation:hx-flow 1.4s linear infinite}
.hx-anim .hx-spin{animation:hx-flow 6s linear infinite}
.hx-anim .hx-bob{animation:hx-bob 3.6s ease-in-out infinite alternate}
.hx-anim .hx-rise{transform-box:fill-box;transform-origin:center;animation:hx-rise 3.2s ease-out infinite}
.hx-anim .hx-shimmer{animation:hx-shimmer 2.8s ease-in-out infinite}
.hx-rotor{transform-box:view-box;transform-origin:0 0}
.hx-anim .hx-rotor{animation-name:hx-rot;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes hx-rot{to{transform:rotate(360deg)}}
@keyframes hx-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.78}}
@keyframes hx-blink{0%{opacity:1}50%{opacity:.15}}
@keyframes hx-flow{to{stroke-dashoffset:-24}}
@keyframes hx-bob{from{transform:translateY(0)}to{transform:translateY(-2.2px)}}
@keyframes hx-rise{0%{transform:translateY(2px) scale(.8);opacity:0}25%{opacity:.95}100%{transform:translateY(-9px) scale(1.25);opacity:0}}
@keyframes hx-shimmer{0%,100%{opacity:.2}50%{opacity:.95}}

/* ---------- the goals: where the modules land against the SDGs ---------- */
.goal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.goal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.goal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.goal-grid{grid-template-columns:1fr}}
.goal{position:relative;display:flex;flex-direction:column;min-height:250px;padding:24px 22px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);
  transition:border-color .4s,background .4s,transform .5s var(--ease)}
.goal::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(420px circle at 20% 0%,rgba(34,211,238,.10),transparent 55%)}
.goal:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-3px)}
.goal:hover::before{opacity:1}
.goal-n{font-family:var(--font-d);font-weight:600;font-size:clamp(40px,3.6vw,56px);line-height:.9;letter-spacing:-.05em;
  background:linear-gradient(160deg,var(--hi),var(--cyan-2) 45%,var(--blue-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.goal-k{margin-top:6px;font-family:var(--font-m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.goal h3{margin:14px 0 8px;font-size:18px;letter-spacing:-.015em;line-height:1.2}
.goal p{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.goal-mods{display:flex;flex-wrap:wrap;gap:2px;margin-top:auto;padding-top:16px}
.goal-mods a{position:relative;display:block;width:40px;height:40px;border-radius:10px;transition:transform .35s var(--ease),background .3s}
.goal-mods a img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(var(--sh-rgb),calc(.55*var(--sh-k))))}
.goal-mods a:hover{transform:translateY(-3px) scale(1.12);background:rgba(var(--fg-rgb),.05)}
.goal-mods a span{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,4px);padding:4px 8px;border-radius:8px;background:rgba(var(--pane-rgb),.95);border:1px solid var(--line-2);
  font-family:var(--font-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--ease);z-index:3}
.goal-mods a:hover span,.goal-mods a:focus-visible span{opacity:1;transform:translate(-50%,0)}
.goal-note{margin-top:22px;font-family:var(--font-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- modules page: every module, in its pillar ---------- */
.mx-grp{display:grid;grid-template-columns:220px 1fr;gap:clamp(18px,3vw,40px);padding:28px 0;border-top:1px solid var(--line)}
.mx-grp:first-child{border-top:0;padding-top:0}
.mx-grp-h{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.mx-grp-h .k{font-family:var(--font-m);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--pc)}
.mx-grp-h h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em}
.mx-grp-h p{font-size:13.5px;color:var(--muted);line-height:1.5}
.mx-grp-h .sdgs{font-family:var(--font-m);font-size:10px;letter-spacing:.14em;color:var(--ink-2)}
.mx-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1180px){.mx-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.mx-grp{grid-template-columns:1fr}.mx-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.mx-row{grid-template-columns:1fr}}
.mx{--c:var(--pc);position:relative;display:flex;flex-direction:column;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s,background .4s}
.mx:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 40%,var(--line-2));background:var(--panel-2)}
.mx-stage{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(70% 62% at 50% 58%,color-mix(in srgb,var(--c) 14%,transparent),transparent 72%)}
.mx-stage img{position:absolute;left:50%;top:52%;width:92%;transform:translate(-50%,-50%);filter:drop-shadow(0 14px 14px rgba(var(--sh-rgb),calc(.55*var(--sh-k)))) brightness(.92);transition:transform .6s var(--ease),filter .5s}
.mx:hover .mx-stage img{transform:translate(-50%,-54%) scale(1.06);filter:drop-shadow(0 22px 20px rgba(var(--sh-rgb),calc(.6*var(--sh-k)))) brightness(1)}
.mx-stage .chip{position:absolute;right:12px;top:12px;background:rgba(var(--pane-rgb),.8)}
.mx-no{position:absolute;left:14px;top:14px;font-family:var(--font-m);font-size:10px;letter-spacing:.2em;color:var(--muted)}
.mx-foot{display:flex;align-items:flex-end;gap:10px;padding:14px 16px 16px}
.mx-foot .t{display:flex;flex-direction:column;gap:3px;min-width:0}
.mx-foot b{font-family:var(--font-d);font-weight:600;font-size:17px;letter-spacing:-.01em}
.mx-foot .t span{font-size:12.5px;color:var(--muted);line-height:1.35}
.mx-foot svg{flex:none;margin-left:auto;width:16px;height:16px;color:var(--ink-2);transition:transform .35s var(--ease),color .3s}
.mx:hover .mx-foot svg{transform:translateX(4px);color:var(--c)}
.mx.is-soon .mx-stage img{opacity:.75}
.mx-layer{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px;padding:18px 20px;border-radius:var(--r);border:1px dashed var(--line-2);color:var(--ink-2);font-size:14.5px}
.mx-layer b{color:var(--ink);font-family:var(--font-d);font-weight:600}
.mx-layer a{margin-left:auto;flex:none;font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);border-bottom:1px solid rgba(52,211,153,.4);padding-bottom:2px}

/* a pillar band between the module features */
.pband{position:relative;padding:clamp(56px,7vw,90px) 0 0;border-top:1px solid var(--line)}
.pband .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pband .k{font-family:var(--font-m);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--pc)}
.pband h2{margin-top:10px;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.03em}
.pband p{max-width:52ch;color:var(--ink-2);font-size:15px}
.pband+.mod{border-top:0}

/* a module told with its model: the diorama on a lit stage */
.mod .art.stage{cursor:default;aspect-ratio:1/.92;background:radial-gradient(62% 56% at 50% 60%,color-mix(in srgb,var(--sc,#38bdf8) 16%,transparent),transparent 72%),linear-gradient(180deg,rgba(var(--fg-rgb),.03),rgba(var(--fg-rgb),.008))}
.mod .art.stage::after{content:"HOVER TO RUN THE MODEL"}
.mod .art.stage .stage-model{position:absolute;inset:6% 5% 4%;z-index:1;perspective:1400px;transition:transform .5s var(--ease);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.mod .art.stage .stage-model>img,.mod .art.stage .stage-svg{width:100%;height:100%;display:block;object-fit:contain;
  filter:drop-shadow(0 34px 30px rgba(var(--sh-rgb),calc(.6*var(--sh-k)))) drop-shadow(0 6px 8px rgba(var(--sh-rgb),calc(.3*var(--sh-k))));animation:sw-float 7s ease-in-out infinite alternate}
.mod .art.stage:hover .stage-model{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.04)}
.mod .art.stage.is-soon .stage-model{opacity:.86;filter:saturate(.8)}
.mod .art.stage .roadmap{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);z-index:2;padding:7px 14px;border-radius:999px;border:1px dashed var(--line-2);background:rgba(var(--pane-rgb),.82);
  font-family:var(--font-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
@media (hover:none){.mod .art.stage::after{content:"THE PLATFORM\2019S OWN MODEL"}}
.mod.soon .feat li svg{color:var(--muted)}
.mod .note{margin-top:18px;font-size:13px;color:var(--muted);max-width:60ch}

/* footer: the platform in five columns */
.foot-grid.wide{grid-template-columns:1.3fr repeat(4,1fr)}
@media (max-width:1100px){.foot-grid.wide{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:640px){.foot-grid.wide{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.foot-grid.wide{grid-template-columns:1fr}}
/* the phone drawer carries the modules too, so it scrolls */
.mobile{overflow-y:auto;padding-top:96px;padding-bottom:40px;justify-content:flex-start}
.mobile .m-mods{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;padding:12px 0 16px;border-bottom:1px solid var(--line)}
.mobile .m-mods a{display:flex;align-items:center;gap:10px;padding:6px 0;border:0;font-family:var(--font-b);font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.mobile .m-mods a img{width:28px;height:28px;flex:none}
.mobile.open .m-mods a{transform:none;opacity:1}
/* long staggered grids (the goals) keep their cadence past the eighth item */
.stagger.in>*:nth-child(9){transition-delay:.6s}.stagger.in>*:nth-child(10){transition-delay:.64s}.stagger.in>*:nth-child(11){transition-delay:.68s}.stagger.in>*:nth-child(12){transition-delay:.72s}
.pband .more-link{color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:1px;transition:border-color .3s,color .3s}
.pband .more-link:hover{color:var(--cyan-2);border-color:var(--cyan)}
/* module features: the heading gets air above and below, as the section heads do elsewhere */
.mod .eyebrow+.h-l{margin-top:18px}
.mod .h-l+.lead{margin-top:22px}
/* the index cards: the whole model on its stage, never cropped, chips above it */
.mx-stage img{width:auto;height:108%;top:51%}
.mx:hover .mx-stage img{transform:translate(-50%,-53%) scale(1.05)}
.mx-stage .chip,.mx-no{z-index:2}
/* sub-page heroes: the goals the module serves, under its lead */
.hero-sdgs{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px}
.hero-sdgs .sdg{text-shadow:0 2px 14px rgba(var(--bg-rgb),.9)}
/* a row of neighbouring modules on a sub-page: the full width, four across */
.mx-row.rel{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.mx-row.rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.mx-row.rel{grid-template-columns:1fr}}

/* ---------- v23 — day and night ----------
   Night is the site as it has always been. Day is a white page: every colour above resolves through the tokens
   below, so a component written once reads on both. The 3D scenes are lit for the dark (additive light, bloom, fog
   that fades into black), so by day they are not re-lit: each one keeps its night and sits on the white page as a
   framed stage. The same token set that makes the page dark is re-declared on those stages. */
:root,
:root[data-theme="light"] :is(.hero,.pipe-stage,.hs-pin,.mod.full,.card.big,.proof,.prail,.pack-art,.mod .art:not(.stage)){
  color-scheme:dark;
  --bg:#04060c;--bg-2:#070b14;--bg-3:#0b1020;
  --ink:#eaf0f8;--ink-2:#aab4c6;--muted:#6f7b91;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --panel:rgba(255,255,255,.028);--panel-2:rgba(255,255,255,.05);
  --cyan:#22d3ee;--cyan-2:#67e8f9;--amber:#3b82f6;--amber-2:#93c5fd;--blue:#3b82f6;--blue-2:#60a5fa;
  --violet:#cbd5e1;--green:#34d399;--rose:#2dd4bf;
  --bg-rgb:4,6,12;--pane-rgb:6,9,18;--fg-rgb:255,255,255;--sh-rgb:0,0,0;--sh-k:1;--lab-rgb:170,180,198;
  --hi:#fff;--lead:#b6c0d2;--silver:#e2e8f0;--mint:#a7f3d0;--mint-2:#d1fae5;--ice:#bfdbfe;--grad-end:#6ee7b7;
  --gc0:#a5f3fc;--gv0:#f8fafc;--gv1:#94a3b8;--gr0:#99f6e4;--on-accent:#03131a;
  --p-power:#38bdf8;--p-access:#2dd4bf;--p-land:#4ade80;--p-trade:#60a5fa;--p-intel:#e2e8f0;
  --elev:none;--elev-2:none;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#fbfcfe;--bg-2:#f3f6fa;--bg-3:#e9eef5;
  --ink:#0b1324;--ink-2:#3d4a5f;--muted:#64728a;
  --line:rgba(15,23,42,.09);--line-2:rgba(15,23,42,.16);
  --panel:#fff;--panel-2:#fff;
  --cyan:#0891b2;--cyan-2:#0e7490;--amber:#2563eb;--amber-2:#1d4ed8;--blue:#2563eb;--blue-2:#1d4ed8;
  --violet:#64748b;--green:#059669;--rose:#0d9488;
  --bg-rgb:251,252,254;--pane-rgb:255,255,255;--fg-rgb:15,23,42;--sh-rgb:15,23,42;--sh-k:.3;--lab-rgb:71,85,105;
  --hi:#0b1324;--lead:#3d4a5f;--silver:#475569;--mint:#047857;--mint-2:#065f46;--ice:#1d4ed8;--grad-end:#059669;
  --gc0:#0e7490;--gv0:#0f172a;--gv1:#64748b;--gr0:#0f766e;--on-accent:#fff;
  --p-power:#0284c7;--p-access:#0d9488;--p-land:#16a34a;--p-trade:#2563eb;--p-intel:#475569;
  --elev:0 1px 2px rgba(15,23,42,.04),0 8px 24px -14px rgba(15,23,42,.16);
  --elev-2:0 2px 4px rgba(15,23,42,.04),0 22px 44px -22px rgba(15,23,42,.26);
  --frame:clamp(8px,1.1vw,16px);--frame-r:clamp(18px,2vw,30px);--nav-h:72px;
}
/* the stages carry their own ink: whatever sits inside one is set in the night palette */
:root[data-theme="light"] :is(.hero,.pipe-stage,.hs-pin,.mod.full,.card.big,.proof,.prail,.pack-art,.mod .art:not(.stage)){color:var(--ink)}

/* ---- the switch ---- */
.theme-toggle{position:relative;display:inline-flex;align-items:center;justify-content:space-between;flex:none;width:64px;height:34px;padding:0 8px;
  border-radius:999px;border:1px solid var(--line-2);background:rgba(var(--fg-rgb),.04);color:var(--muted);cursor:pointer;
  transition:border-color .3s,background .3s,box-shadow .3s}
.theme-toggle:hover{border-color:rgba(var(--fg-rgb),.3);background:rgba(var(--fg-rgb),.07)}
.theme-toggle svg{position:relative;z-index:1;width:15px;height:15px;transition:color .4s,transform .7s var(--ease)}
.theme-toggle .knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));
  box-shadow:0 2px 10px rgba(59,130,246,.35);transform:translateX(30px);transition:transform .55s var(--ease),background .4s}
.theme-toggle .i-moon{color:var(--on-accent)}
.theme-toggle:hover .i-sun{transform:rotate(45deg)}
.theme-toggle:hover .i-moon{transform:rotate(-18deg)}
:root[data-theme="light"] .theme-toggle .knob{transform:none;box-shadow:0 2px 10px rgba(8,145,178,.3)}
:root[data-theme="light"] .theme-toggle .i-sun{color:var(--on-accent)}
:root[data-theme="light"] .theme-toggle .i-moon{color:var(--muted)}
.theme-toggle:focus-visible{outline-offset:3px;border-radius:999px}
@media (max-width:900px){.nav-cta{gap:8px}}
/* the view transition does the cross-over; nothing else animates while it runs */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* ---- the brand in ink by day ---- */
.wm-l,.lk-l{display:none!important}
:root[data-theme="light"] .wm-d,:root[data-theme="light"] .lk-d{display:none!important}
:root[data-theme="light"] .wm-l,:root[data-theme="light"] .lk-l{display:block!important}
:root[data-theme="light"] .brand img{filter:none}
:root[data-theme="light"] .foot-word{background-image:url(/assets/wordmark-ink.webp)}
:root[data-theme="light"] .foot-word{-webkit-mask:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.06) 62%,transparent 100%);mask:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.06) 62%,transparent 100%)}

/* ---- the page by day ---- */
:root[data-theme="light"] body::before{opacity:.025}
:root[data-theme="light"] .orbs{opacity:.55}
:root[data-theme="light"] ::selection{background:rgba(8,145,178,.18)}
:root[data-theme="light"] .nav.scrolled{background:rgba(251,252,254,.9);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(15,23,42,.35)}
:root[data-theme="light"] .links a:hover{background:rgba(15,23,42,.05)}
:root[data-theme="light"] .links a.active::after{box-shadow:none}
:root[data-theme="light"] .links .menu{background:rgba(255,255,255,.98);border-color:var(--line);box-shadow:0 1px 2px rgba(15,23,42,.06),0 30px 60px -20px rgba(15,23,42,.28)}
:root[data-theme="light"] .links .menu.mega a img{filter:drop-shadow(0 3px 5px rgba(15,23,42,.18))}
:root[data-theme="light"] .mm-h::before,:root[data-theme="light"] .links .menu a i,:root[data-theme="light"] .marquee span::after,
:root[data-theme="light"] .aud .card li::before{box-shadow:none}
:root[data-theme="light"] .mobile{background:rgba(251,252,254,.98)}
:root[data-theme="light"] .btn.primary:hover{box-shadow:0 12px 30px -8px rgba(37,99,235,.45)}
:root[data-theme="light"] .btn.ghost{background:#fff;border-color:var(--line-2);box-shadow:var(--elev)}
:root[data-theme="light"] .btn.ghost:hover{background:#fff;border-color:rgba(15,23,42,.3)}
:root[data-theme="light"] :is(.hero,.pipe-stage,.hs-pin,.mod.full,.card.big,.pack-art) .btn.ghost{background:rgba(255,255,255,.03);box-shadow:none}
:root[data-theme="light"] :is(.card:not(.big),.out,.stats,.kv div,.goal,.mx,.sw-pbtn){box-shadow:var(--elev)}
:root[data-theme="light"] :is(.card:not(.big),.goal,.mx,.sw-pbtn,.out):hover{box-shadow:var(--elev-2)}
:root[data-theme="light"] .stats{background:#fff}
:root[data-theme="light"] .stat b{background:linear-gradient(180deg,#0b1324,#3d4a5f);-webkit-background-clip:text;background-clip:text}
:root[data-theme="light"] .cta{background:linear-gradient(135deg,rgba(8,145,178,.07),rgba(37,99,235,.06) 55%,rgba(5,150,105,.07)),#fff;border-color:var(--line);box-shadow:var(--elev-2)}
:root[data-theme="light"] .chip.on{border-color:rgba(5,150,105,.4)}
:root[data-theme="light"] .subnav a:hover,:root[data-theme="light"] .subnav a.active{background:rgba(8,145,178,.07)}
:root[data-theme="light"] footer{background:linear-gradient(180deg,var(--bg),var(--bg-2))}

/* ---- the stages: framed, inset from the edge of the page, lit for the night ---- */
:root[data-theme="light"] :is(.hero,.mod.full){margin-inline:var(--frame);border-radius:var(--frame-r);background:var(--bg);isolation:isolate;
  box-shadow:0 30px 60px -40px rgba(15,23,42,.55)}
:root[data-theme="light"] .hero{margin-top:var(--nav-h);min-height:calc(100svh - var(--nav-h) - var(--frame));padding-top:clamp(70px,9vh,110px)}
:root[data-theme="light"] .hero.sub{min-height:calc(84svh - var(--nav-h));padding-top:clamp(90px,11vh,130px)}
:root[data-theme="light"] .mod.full{margin-block:var(--frame)}
:root[data-theme="light"] :is(.pipe-stage,.hs-pin){top:var(--nav-h);height:calc(100svh - var(--nav-h) - var(--frame));width:auto;margin-inline:var(--frame);
  border-radius:var(--frame-r);background:var(--bg);isolation:isolate}
:root[data-theme="light"] .card.big{background:var(--bg);border-color:transparent;box-shadow:0 24px 48px -30px rgba(15,23,42,.6)}
:root[data-theme="light"] .card.big:hover{background:var(--bg)}
:root[data-theme="light"] .proof{background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),var(--bg);border-color:transparent}
:root[data-theme="light"] .prail{background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),var(--bg);border-color:transparent}
:root[data-theme="light"] .pack-art{background-color:var(--bg);border-color:transparent;box-shadow:0 24px 48px -30px rgba(15,23,42,.6)}
:root[data-theme="light"] .mod .art:not(.stage){background:radial-gradient(70% 60% at 50% 55%,rgba(59,130,246,.10),transparent 70%),var(--bg);border-color:transparent;
  box-shadow:0 24px 48px -30px rgba(15,23,42,.6)}
@media (max-width:900px){
  :root[data-theme="light"]{--nav-h:68px}
}
/* ---- finish: type that breaks where a reader would, labels a reader can read ---- */
h1,h2,h3,h4,.statement h2 .l i,.cta h2{text-wrap:balance}
p,.lead,.faq details p{text-wrap:pretty}
.hero .hint,.mod.full .hint,.pack-art::after,.mod .art::after,.pipe-vis::after{font-size:10px}
.links .menu.mega a small em{font-size:9.5px}
.prail s{font-size:9.5px}
.mm-h,.sw-pbtn em,.goal-k,.pipe-rail i b{font-size:10px}
:root[data-theme="light"] .hero{margin-top:calc(var(--nav-h) + 12px)}
:root[data-theme="light"] .prail{margin-top:0;padding-top:1px}
:root[data-theme="light"] .subnav{margin-top:14px}
@media (max-width:900px){:root[data-theme="light"] .hero{margin-top:calc(var(--nav-h) + 4px)}}