:root{
  --bg:#08090B;
  --bg-2:#0C0E11;
  --panel:#101317;
  --panel-2:#14181D;
  --line:#1D2329;
  --line-hot:#2A333B;
  --ink:#F2F5F7;
  --ink-2:#A7B2BC;
  --ink-3:#6B7885;
  --amber:#00D6A1;
  --amber-dim:#0A6E55;
  --cyan:#4CC2FF;
  --red:#FF5C4D;
  --green:#3ED598;
  --gutter:clamp(20px,5vw,96px);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gutter)}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--amber);flex:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.04;margin:0}
h2{font-size:clamp(30px,4.2vw,54px)}
h3{font-size:clamp(20px,2.1vw,27px);letter-spacing:-.015em;line-height:1.15}
p{margin:0}
.lede{font-size:clamp(16px,1.35vw,19px);color:var(--ink-2);line-height:1.65;max-width:62ch}
.mono{font-family:var(--mono)}
.tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:2px;padding:4px 8px;display:inline-block;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:15px 24px;border-radius:2px;border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary{background:var(--amber);color:#0A0A0A;font-weight:700}
.btn-primary:hover{transform:translateY(-2px);background:#2FE9BC}
.btn-ghost{border-color:var(--line-hot);color:var(--ink)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-2px)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);
  background:rgba(8,9,11,.82);border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .dot{
  width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none;
  box-shadow:0 0 0 4px rgba(0,214,161,.14);animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(0,214,161,.14)}50%{box-shadow:0 0 0 9px rgba(0,214,161,.03)}}
.brand .name{font-family:var(--display);font-weight:700;font-size:18.5px;letter-spacing:-.02em}
.brand .name span{color:var(--amber)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;transition:color .16s ease;
}
.nav-links a:hover{color:var(--ink)}
.nav-cta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--line-hot);padding:9px 15px;border-radius:2px;
  transition:border-color .16s ease,color .16s ease;
}
.nav-cta:hover{border-color:var(--amber);color:var(--amber)}
@media(max-width:900px){.nav-links{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(28px,3.6vw,52px) 0 clamp(48px,6vw,88px);
}
/* fallback treatment — also what shows if the 3D scene can't load */
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.32;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 20%,transparent 78%);
}
.hero::after{
  content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:1100px;height:700px;z-index:1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,214,161,.10),transparent 70%);
}

/* ---- Spline 3D scene: centered stage at the top of the hero ---- */
.hero-3d{
  position:relative;z-index:2;
  width:min(880px,100%);margin:0 auto clamp(6px,1.4vw,18px);
  height:clamp(300px,46vh,500px);
  overflow:hidden;
  -webkit-mask-image:radial-gradient(72% 74% at 50% 46%,#000 52%,transparent 100%);
  mask-image:radial-gradient(72% 74% at 50% 46%,#000 52%,transparent 100%);
}
.hero-3d spline-viewer{display:block;width:100%;height:100%}
/* faint amber bloom behind the scene so it sits in the page rather than on it */
.hero-glow{
  position:absolute;top:clamp(40px,7vw,110px);left:50%;transform:translateX(-50%);
  width:min(900px,96vw);height:clamp(320px,48vh,520px);z-index:1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,214,161,.13),transparent 68%);
}

.hero-in{
  position:relative;z-index:3;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.hero-in .eyebrow{justify-content:center}
.hero h1{font-size:clamp(36px,5.4vw,72px);margin:22px 0 0;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .lede{margin-top:24px;font-size:clamp(16px,1.35vw,19px);max-width:64ch;text-wrap:balance}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px;justify-content:center}
.hero-note{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:20px;letter-spacing:.04em}
.scene-cap{
  position:relative;z-index:3;margin:0 auto clamp(18px,2.6vw,34px);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;gap:9px;pointer-events:none;opacity:.85;
}
.scene-cap::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--amber);opacity:.8}
@media(max-width:640px){.hero-3d{height:clamp(240px,38vh,320px)}}

.statstrip{
  position:relative;z-index:2;margin-top:clamp(48px,6vw,84px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.statstrip div{padding:24px 26px;border-right:1px solid var(--line)}
.statstrip div:last-child{border-right:0}
.statstrip .n{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.03em}
.statstrip .n.amber{color:var(--amber)}
.statstrip .n.cyan{color:var(--cyan)}
.statstrip .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:9px;line-height:1.5}
@media(max-width:820px){.statstrip{grid-template-columns:1fr 1fr}.statstrip div:nth-child(2){border-right:0}.statstrip div:nth-child(1),.statstrip div:nth-child(2){border-bottom:1px solid var(--line)}}

/* ---------- section frame ---------- */
section{position:relative}
.sec{padding:clamp(72px,8.5vw,132px) 0;border-top:1px solid var(--line)}
.sec-hd{max-width:70ch;margin-bottom:clamp(38px,4.6vw,62px)}
.sec-hd h2{margin-top:20px}
.sec-hd .lede{margin-top:22px}

/* ---------- problem / solution ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:920px){.vs{grid-template-columns:1fr}}
.col{background:var(--bg-2);padding:clamp(26px,3.2vw,42px)}
.col.bad{background:linear-gradient(180deg,rgba(255,92,77,.045),transparent 55%),var(--bg-2)}
.col.good{background:linear-gradient(180deg,rgba(62,213,152,.05),transparent 55%),var(--bg-2)}
.col-hd{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.col-hd .chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 8px;border-radius:2px;
}
.col.bad .chip{color:var(--red);background:rgba(255,92,77,.1);border:1px solid rgba(255,92,77,.28)}
.col.good .chip{color:var(--green);background:rgba(62,213,152,.1);border:1px solid rgba(62,213,152,.28)}
.col h3{margin:14px 0 20px}
.col p.sub{color:var(--ink-2);font-size:15px;margin-bottom:26px;max-width:46ch}
.rows{display:flex;flex-direction:column;gap:1px;background:var(--line)}
.row{background:var(--panel);padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.row .mk{font-family:var(--mono);font-size:12px;flex:none;line-height:1.5;width:14px}
.col.bad .row .mk{color:var(--red)}
.col.good .row .mk{color:var(--green)}
.row .tx{font-size:14.5px;line-height:1.55}
.row .tx b{font-weight:600;display:block;margin-bottom:3px;font-size:14.5px}
.row .tx span{color:var(--ink-3);font-size:13.5px}

/* ---------- toggle deep dive ---------- */
.switch{display:inline-flex;background:var(--panel);border:1px solid var(--line-hot);border-radius:3px;padding:4px;gap:4px;margin-bottom:38px}
.switch button{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  background:transparent;border:0;color:var(--ink-3);padding:11px 20px;border-radius:2px;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.switch button[aria-selected="true"]{background:var(--amber);color:#0A0A0A;font-weight:700}
.switch button:hover[aria-selected="false"]{color:var(--ink)}
.pane[hidden]{display:none}
.pane{animation:fade .32s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:980px){.cards{grid-template-columns:1fr}}
.card{background:var(--bg-2);padding:clamp(24px,2.6vw,34px);position:relative;transition:background .2s ease}
.card:hover{background:var(--panel-2)}
.card .idx{font-family:var(--mono);font-size:10.5px;color:var(--amber);letter-spacing:.14em}
.card h4{font-size:19px;margin:16px 0 12px;letter-spacing:-.015em;line-height:1.25}
.card p{color:var(--ink-2);font-size:14.5px;line-height:1.62}
.specs{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.specs div{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:11px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.specs .sk{color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.specs .sv{color:var(--ink);text-align:right}
.stackbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.chip2{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-2);
  border:1px solid var(--line-hot);background:var(--panel);padding:7px 12px;border-radius:2px;
}
.chip2 b{color:var(--amber);font-weight:500}

/* ---------- investor ---------- */
.inv{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,64px);align-items:start}
@media(max-width:980px){.inv{grid-template-columns:1fr}}
.tam{border:1px solid var(--line);background:var(--bg-2);padding:clamp(26px,3vw,40px)}
.tam .big{font-family:var(--display);font-size:clamp(48px,7.5vw,96px);font-weight:700;letter-spacing:-.04em;line-height:.92;color:var(--amber)}
.tam .bigsub{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:14px}
.bars{margin-top:34px;display:flex;flex-direction:column;gap:20px}
.bar .bl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.bar .bt{height:8px;background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.bar .bf{height:100%;width:0;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.bar .bf.a{background:linear-gradient(90deg,var(--amber-dim),var(--amber))}
.bar .bf.c{background:linear-gradient(90deg,#1E5A78,var(--cyan))}
.tam .fine{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:26px;line-height:1.7;letter-spacing:.02em}
.invlist{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.invitem{background:var(--bg-2);padding:24px 26px}
.invitem .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber)}
.invitem h4{font-size:17.5px;margin:12px 0 9px;letter-spacing:-.01em}
.invitem p{color:var(--ink-2);font-size:14px;line-height:1.6}

/* ---------- build with us ---------- */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
@media(max-width:980px){.roles{grid-template-columns:1fr}}
.role{background:var(--bg-2);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column}
.role .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.role h4{font-size:19.5px;margin:14px 0 12px;letter-spacing:-.015em;line-height:1.24}
.role p{color:var(--ink-2);font-size:14.5px;line-height:1.6;flex:1}
.role ul{list-style:none;padding:0;margin:20px 0 24px;display:flex;flex-direction:column;gap:9px}
.role li{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);display:flex;gap:9px;line-height:1.5}
.role li::before{content:'→';color:var(--amber);flex:none}
.role a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);text-decoration:none;border-top:1px solid var(--line);padding-top:18px;
  display:flex;justify-content:space-between;align-items:center;transition:color .16s ease;
}
.role a:hover{color:#2FE9BC}
.oss{
  margin-top:1px;border:1px solid var(--line);background:
   linear-gradient(120deg,rgba(0,214,161,.055),rgba(76,194,255,.03)),var(--bg-2);
  padding:clamp(28px,3.4vw,48px);display:grid;grid-template-columns:1.2fr auto;gap:32px;align-items:center;
}
@media(max-width:860px){.oss{grid-template-columns:1fr}}
.oss h3{margin-bottom:14px}
.oss p{color:var(--ink-2);max-width:60ch;font-size:15px}

/* ---------- closer + footer ---------- */
.closer{padding:clamp(80px,9vw,140px) 0;border-top:1px solid var(--line);text-align:center;position:relative;overflow:hidden}
.closer::after{
  content:'';position:absolute;bottom:-60%;left:50%;transform:translateX(-50%);
  width:900px;height:520px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,214,161,.10),transparent 70%);
}
.closer .mission{
  position:relative;font-family:var(--display);font-weight:500;
  font-size:clamp(23px,3.4vw,42px);line-height:1.24;letter-spacing:-.025em;
  max-width:23ch;margin:26px auto 0;
}
.closer .mission b{color:var(--amber);font-weight:500}
.closer .eyebrow{justify-content:center}
.closer .hero-cta{justify-content:center;margin-top:40px;position:relative}
footer{border-top:1px solid var(--line);padding:34px 0}
.ft{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ft .mono{font-size:11px;color:var(--ink-3);letter-spacing:.08em}
.ft a{color:var(--ink-2);text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.ft a:hover{color:var(--amber)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ================= multi-page additions ================= */
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{
  content:'';display:block;height:1px;background:var(--amber);margin-top:5px;
}

/* page hero for interior pages */
.phero{position:relative;padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,64px);overflow:hidden}
.phero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.34;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 15%,transparent 76%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 15%,transparent 76%);
}
.phero .wrap{position:relative;z-index:1}
.phero h1{font-size:clamp(34px,5vw,64px);margin:20px 0 0;max-width:20ch}
.phero h1 em{font-style:normal;color:var(--amber)}
.phero .lede{margin-top:22px}

/* imagery */
figure{margin:0}
.shot{
  position:relative;overflow:hidden;border:1px solid var(--line);background:var(--panel);
}
.shot img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82) contrast(1.04) brightness(.86)}
.shot::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,11,.10),rgba(8,9,11,.55));
}
figcaption{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-top:10px;
}

/* split: image + copy */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.split.flip .sp-img{order:2}
@media(max-width:900px){.split{grid-template-columns:1fr}.split.flip .sp-img{order:0}}
.sp-img .shot{aspect-ratio:4/3}
.split h3{margin-bottom:16px}
.split p{color:var(--ink-2);font-size:15px;line-height:1.65;max-width:52ch}
.split p + p{margin-top:14px}

/* three-up photo band */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
@media(max-width:900px){.band{grid-template-columns:1fr}}
.band .shot{aspect-ratio:5/4}
.band h4{font-size:17px;margin:16px 0 8px;letter-spacing:-.01em}
.band p{color:var(--ink-2);font-size:14px;line-height:1.6}

/* wide feature image */
.wideshot{border:1px solid var(--line);overflow:hidden;position:relative;aspect-ratio:21/8}
.wideshot img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.05) brightness(.72)}
.wideshot .ov{
  position:absolute;inset:0;display:flex;align-items:center;
  padding:clamp(24px,4vw,64px);
  background:linear-gradient(90deg,rgba(8,9,11,.94) 0%,rgba(8,9,11,.72) 45%,rgba(8,9,11,.25) 100%);
}
.wideshot .ov h3{max-width:20ch}
.wideshot .ov p{color:var(--ink-2);font-size:15px;max-width:44ch;margin-top:14px}
@media(max-width:760px){.wideshot{aspect-ratio:4/5}.wideshot .ov{background:linear-gradient(180deg,rgba(8,9,11,.55),rgba(8,9,11,.95))}}

/* cross-page CTA strip */
.next{
  border-top:1px solid var(--line);padding:clamp(56px,6vw,88px) 0;
}
.nextgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.nextgrid{grid-template-columns:1fr}}
.nextgrid a{
  background:var(--bg-2);padding:26px 28px;text-decoration:none;display:block;
  transition:background .18s ease;
}
.nextgrid a:hover{background:var(--panel-2)}
.nextgrid .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.nextgrid h4{font-size:18px;margin:12px 0 8px;letter-spacing:-.01em}
.nextgrid p{color:var(--ink-3);font-size:13.5px;line-height:1.55}

/* hero scene: reacts to cursor movement, but the camera is locked.
   Drag-to-orbit and wheel-to-zoom are swallowed in JS (see lockScene). */
.hero-3d{
  touch-action:pan-y;              /* vertical page scroll always wins on touch */
  -webkit-user-select:none;user-select:none;
  cursor:default;                  /* no grab cursor - nothing here is draggable */
  overscroll-behavior:contain;
}
.hero-3d spline-viewer{cursor:default}
.scene-cap{display:none !important}

/* hide the viewer's built-in badge (also removed from the shadow DOM in JS) */
spline-viewer::part(logo){display:none !important}

/* ---- neon wordmark over the scene ---- */
/* The scene is held invisible until the wordmark baked into it has been hidden.
   Without this gate the baked 3D logo paints the moment the scene loads and the
   HTML neon sits on top of it - two overlapping wordmarks - until the runtime
   becomes queryable. Gating removes the race instead of narrowing it. */
.hero-3d{position:relative;opacity:0;transition:opacity .45s ease}
.hero-3d.ready{opacity:1}
.neon{visibility:hidden}
.neon.on{visibility:visible}
.neon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;pointer-events:none;white-space:nowrap;
  font-family:'Poppins',var(--display),system-ui,sans-serif;
  font-weight:500;letter-spacing:-.005em;
  font-size:clamp(32px,4.8vw,62px);
  color:#EBFFF8;
  text-shadow:
    0 0 3px #B6FFEA,
    0 0 10px #3DEEC2,
    0 0 26px rgba(0,214,161,.85),
    0 0 58px rgba(0,214,161,.55),
    0 0 96px rgba(0,176,138,.32);
  animation:neonFlicker 9s infinite steps(1, end);
}
@keyframes neonFlicker{
  0%   {opacity:.06;text-shadow:none}
  2%   {opacity:.85}
  3%   {opacity:.10;text-shadow:none}
  5%   {opacity:1}
  6%   {opacity:.18;text-shadow:none}
  7%   {opacity:.92}
  9%   {opacity:.35;text-shadow:0 0 6px #3DEEC2}
  11%  {opacity:1}
  12%  {opacity:.55;text-shadow:0 0 8px #3DEEC2}
  13%  {opacity:1}
  62%  {opacity:1}
  63%  {opacity:.42;text-shadow:0 0 8px #3DEEC2}
  64%  {opacity:1}
  81%  {opacity:1}
  82%  {opacity:.30;text-shadow:none}
  83%  {opacity:1}
  100% {opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .neon{animation:none;opacity:1}
}

/* ---------- brand identity (from the supplied logo) ---------- */
:root{
  --mint:#00D6A1;        /* brand accent from the logo */
  --brand-ink:#F4F2ED;   /* logo off-white */
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;line-height:1}
.brand .mark{
  width:29px;height:auto;flex:none;display:block;
  fill:var(--brand-ink);
  transition:fill .18s ease;
}
.brand:hover .mark{fill:#fff}
.wordmark{
  font-family:'Poppins',var(--display),system-ui,sans-serif;
  font-weight:500;font-size:20.5px;letter-spacing:-.005em;
  color:var(--brand-ink);line-height:1;position:relative;top:.5px;
}
/* dotless i + the logo's mint square standing in for the tittle */
.wordmark .i{position:relative}
.wordmark .i::after{
  content:'';position:absolute;left:50%;top:.10em;
  width:.15em;height:.15em;transform:translateX(-50%);
  background:var(--mint);border-top-left-radius:1.5px;
}
footer .brand .mark{width:26px}
footer .wordmark{font-size:18.5px}

/* ---------- contact modal ---------- */
button.nav-cta{background:none;font-family:var(--mono);cursor:pointer}
.mdl{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:20px;
}
.mdl[open],.mdl.on{display:flex}
.mdl-bg{position:absolute;inset:0;background:rgba(4,5,6,.78);backdrop-filter:blur(6px)}
.mdl-panel{
  position:relative;width:min(560px,100%);max-height:90vh;overflow:auto;
  background:var(--bg-2);border:1px solid var(--line-hot);border-radius:3px;
  padding:clamp(24px,3.4vw,38px);box-shadow:0 40px 90px -24px rgba(0,0,0,.9);
}
.mdl-panel h3{margin:14px 0 10px}
.mdl-panel .sub{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin-bottom:26px;max-width:46ch}
.mdl-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;
  background:none;border:1px solid var(--line);border-radius:2px;color:var(--ink-3);
  cursor:pointer;font-size:15px;line-height:1;transition:color .16s ease,border-color .16s ease;
}
.mdl-close:hover{color:var(--ink);border-color:var(--line-hot)}
.fld{margin-bottom:16px}
.fld label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}
.fld input,.fld select,.fld textarea{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:2px;
  color:var(--ink);font-family:var(--body);font-size:14.5px;padding:11px 13px;
  transition:border-color .16s ease;
}
.fld textarea{min-height:104px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--amber)}
.fld input:user-invalid{border-color:var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mdl .btn{width:100%;justify-content:center;margin-top:8px;border:0;cursor:pointer;font-size:12.5px}
.mdl-note{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:14px;line-height:1.6;text-align:center}
.mdl-msg{font-size:13.5px;line-height:1.6;margin-top:14px;display:none}
.mdl-msg.err{display:block;color:var(--red)}
.mdl-done{display:none;text-align:center;padding:14px 0}
.mdl-done .tick{
  width:46px;height:46px;margin:0 auto 18px;border-radius:50%;
  border:1px solid var(--amber);color:var(--amber);display:grid;place-items:center;font-size:20px;
}
.mdl.sent .mdl-form{display:none}
.mdl.sent .mdl-done{display:block}


/* ═══════════════════ 2026 platform features ═══════════════════ */

/* --- OKLCH palette -------------------------------------------------
   The same colours re-expressed in a perceptually uniform space. Each
   value was converted from the sRGB hex it replaces, so the brand does
   not shift; what we gain is predictable derived states (nudging L keeps
   contrast stable) and Display-P3 headroom. The hex declarations above
   remain the fallback wherever oklch() is unsupported. ---------------- */
@supports (color: oklch(0% 0 0)) {
  :root {
    --bg:oklch(13.95% 0.0048 262.80);   /* was #08090B */
    --bg-2:oklch(16.29% 0.0071 258.37);   /* was #0C0E11 */
    --panel:oklch(18.53% 0.0095 255.64);   /* was #101317 */
    --panel-2:oklch(20.71% 0.0117 254.09);   /* was #14181D */
    --line:oklch(25.28% 0.0143 248.39);   /* was #1D2329 */
    --line-hot:oklch(31.60% 0.0189 245.27);   /* was #2A333B */
    --ink:oklch(96.84% 0.0042 236.50);   /* was #F2F5F7 */
    --ink-2:oklch(75.81% 0.0189 245.46);   /* was #A7B2BC */
    --ink-3:oklch(56.65% 0.0254 248.28);   /* was #6B7885 */
    --amber:oklch(77.75% 0.1592 167.05);   /* was #00D6A1 */
    --amber-dim:oklch(47.99% 0.0927 169.55);   /* was #0A6E55 */
    --cyan:oklch(77.30% 0.1357 235.15);   /* was #4CC2FF */
    --red:oklch(68.87% 0.2009 28.61);   /* was #FF5C4D */
    --green:oklch(77.97% 0.1536 161.64);   /* was #3ED598 */
    --mint:oklch(77.75% 0.1592 167.05);   /* was #00D6A1 */
    --brand-ink:oklch(96.13% 0.0070 88.64);   /* was #F4F2ED */
  }
}

/* P3 headroom applied only to the neon halo, so brand surfaces stay
   exactly on-brand while the glow picks up the extra chroma. */
@media (color-gamut: p3) {
  @supports (color: oklch(0% 0 0)) {
    .neon{
      text-shadow:
        0 0 3px oklch(95% 0.09 168),
        0 0 10px oklch(86% 0.17 168),
        0 0 26px oklch(80% 0.20 168 / .85),
        0 0 58px oklch(76% 0.20 168 / .55),
        0 0 96px oklch(72% 0.19 168 / .32);
    }
  }
}

/* --- Cross-document view transitions -------------------------------
   Real URLs let a multi-page site get SPA-grade continuity for free:
   the browser snapshots the outgoing document and morphs it into the
   incoming one. Shared names keep the logo and nav persistent instead
   of crossfading with the rest of the page. */
@view-transition { navigation: auto; }
.brand .mark{view-transition-name:brandmark}
.brand .wordmark{view-transition-name:brandword}
header.nav{view-transition-name:sitenav}
main{view-transition-name:pagebody}
::view-transition-old(pagebody){animation:vtOut .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(pagebody){animation:vtIn .32s cubic-bezier(0,0,.2,1) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(pagebody),::view-transition-new(pagebody){animation:none}
}

/* --- WCAG 2.2 ------------------------------------------------------ */
/* 2.4.11 Focus Not Obscured - the header is sticky, so reserve space. */
html{scroll-padding-top:86px}
/* Keyboard-only focus ring, 3:1 against its surroundings. */
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.btn:focus-visible,.nav-cta:focus-visible{outline-offset:4px}
/* 2.5.8 Target Size (Minimum) - every interactive target clears 24x24. */
.nav-links a{padding:6px 2px;min-height:24px;display:inline-flex;align-items:center}
.ft-nav a,.ft > a{min-height:24px;display:inline-flex;align-items:center}
.mdl-close{min-width:32px;min-height:32px}
.role a{min-height:24px}
.skip{
  position:absolute;left:50%;top:0;transform:translate(-50%,-140%);
  z-index:400;background:var(--amber);color:#08090B;font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:12px 20px;border-radius:0 0 3px 3px;text-decoration:none;
  transition:transform .18s ease;
}
.skip:focus{transform:translate(-50%,0)}

/* --- Container queries ---------------------------------------------
   Components respond to their own container rather than the viewport,
   so the same card works in a grid cell, a sidebar, or full width with
   no breakpoint being told about it. */
.cards,.band,.roles,.nextgrid,.invlist{container-type:inline-size}
.card,.band figure,.role,.invitem{container-type:inline-size}
@container (max-width: 330px){
  .card h4,.role h4{font-size:17px}
  .specs div{flex-direction:column;gap:3px}
  .specs .sv{text-align:left}
}
@container (min-width: 560px){ .band figure h4{font-size:19px} }

/* --- Bento rhythm: lead tile carries more weight than its siblings - */
@media(min-width:981px){ .cards{grid-template-columns:1.22fr 1fr 1fr} }

.ft-nav{display:flex;gap:22px;flex-wrap:wrap}
.imgnote{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);
  opacity:.75;margin-top:26px;line-height:1.6;
}

/* canonical brand token; --amber is retained as an alias for existing rules */
:root{--accent:#00D6A1}