/* AI ROLLUP. Color, radius and type tokens started from botitout/design-system/tokens.css.
   Mobile-first: base rules target phones; min-width queries enhance upward. Spacing sits on an 8px grid (4px half-steps). */
:root {
  --e-300: #6ee7b7;
  --e-500: #10b981;
  --e-700: #047857;
  --e-800: #065f46;
  --deep: #022c22;

  --paper: #f1f0ec;
  --paper-2: #e8e6e1;
  --surface: #ffffff;
  --ink: #0a1014;
  --ink-2: #27323b;
  --muted: #56626c;
  --line: rgb(10 16 20 / 0.1);
  --line-strong: rgb(10 16 20 / 0.16);
  --accent: #047857;
  --accent-ring: #059669;

  --band: #0b1216;
  --band-glass: rgb(11 18 22 / 0.72);
  --band-ink: #cfe0da;
  --band-ink-2: #a8c0bb;
  --band-accent: #34d399;
  --band-line: rgb(207 224 218 / 0.24);
  --band-line-soft: rgb(207 224 218 / 0.12);

  /* Primary button: both gradient stops keep white text above 4.5:1. */
  --btn-top: #0a7d5a;
  --btn-bottom: #036b4d;
  --mint-hover: #8af0c6;

  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-72: 72px;
  --sp-96: 96px;

  --control-sm: 40px;
  --control-md: 48px;
  --header-h: 76px;
  --brand-mark: 40px;
  --journey-head: 380px;
  --wrap: 1200px;
  --stage-phone: 360px;
  --stage-tablet: 440px;
  --hero-min: 520px;
  --hero-max: 640px;
  --thesis-h: 152px;
  --hud-w: 208px;

  --r-chip: 8px;
  --r-btn: 12px;
  --r-tile: 16px;
  --r-card: 24px;
  --r-band: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-base: 200ms;
  --t-reveal: 600ms;

  --font-d: "Exo 2", system-ui, sans-serif;
  --font-b: "Inter", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--sp-16)); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-b);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3 { margin: 0; font-family: var(--font-d); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }
::selection { background: var(--e-300); color: var(--deep); }
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 3px; border-radius: 6px; }

/* The sprite stays rendered (not display:none) so its gradients resolve. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-16); }
.skip { position: absolute; left: -9999px; top: var(--sp-12); z-index: 100; padding: var(--sp-8) var(--sp-12); border-radius: var(--r-chip); background: var(--surface); }
.skip:focus { left: var(--sp-16); }

/* ── Header ─────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgb(241 240 236 / .84);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); height: var(--header-h); }
.brand { display: flex; align-items: center; gap: var(--sp-12); text-decoration: none; white-space: nowrap; }
.brand svg { width: var(--brand-mark); height: var(--brand-mark); flex: none; }
.brand-text { display: grid; gap: var(--sp-4); }
.brand-word { font: 800 19px/1 var(--font-d); letter-spacing: .06em; color: var(--ink); }
.brand-word em { font-style: normal; color: var(--accent); }
.brand-tag { font: 600 10.5px/1 var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nav { display: none; gap: var(--sp-32); }
.nav a { text-decoration: none; font: 500 15px/1 var(--font-b); color: var(--ink-2); transition: color var(--t-base); }
.nav a:hover { color: var(--accent); }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  height: var(--control-md); padding: 0 var(--sp-24); border-radius: var(--r-btn);
  font: 600 15px/1 var(--font-b); text-decoration: none; white-space: nowrap;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base);
}
.btn svg { width: 16px; height: 16px; }
.btn-sm { height: var(--control-sm); padding: 0 var(--sp-16); font-size: 14px; }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bottom) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 0 0 1px rgba(2, 44, 34, .35), 0 12px 24px -12px rgba(4, 120, 87, .7);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-mint { color: var(--deep); background: var(--e-300); box-shadow: 0 0 0 1px rgb(110 231 183 / .4), 0 14px 28px -14px rgb(16 185 129 / .8); }
.btn-mint:hover { transform: translateY(-1px); background: var(--mint-hover); }
.btn-glass { color: var(--band-ink); background: rgb(255 255 255 / .06); box-shadow: 0 0 0 1px var(--band-line) inset; }
.btn-glass:hover { background: rgb(255 255 255 / .1); }
.btn:active { transform: none; }

/* ── Shared type ────────────────────────────────────── */
.eyebrow { display: inline-flex; align-items: center; gap: var(--sp-8); font: 600 12.5px/1.2 var(--font-b); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--e-500); box-shadow: 0 0 0 4px rgb(16 185 129 / .16); }
h1 em, h2 em { font-style: normal; color: var(--accent); }

.sec { padding: var(--sp-72) 0; }
.sec-alt { background: var(--paper-2); }
/* Small accent text on the darker alt background needs the deeper green for 4.5:1. */
.sec-alt .eyebrow, .sec-alt .fde .k { color: var(--e-800); }
.sec-head { max-width: 820px; }
.sec-head p { margin-top: var(--sp-16); max-width: 38em; font-size: 1.1rem; color: var(--ink-2); }
.sec-head h2 { margin-top: var(--sp-16); font-weight: 800; font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.03em; }

/* ── Hero ───────────────────────────────────────────── */
.hero { padding-top: var(--sp-16); }
.hero-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  color: var(--band-ink);
  background:
    radial-gradient(900px 480px at 70% 40%, rgb(16 185 129 / .16), transparent 70%),
    var(--band);
}
.hero-main { position: relative; }
.hero-stage { position: relative; height: var(--stage-phone); }
.hero-stage canvas { display: block; width: 100%; height: 100%; }
/* Without WebGL there is no scene, so phones skip the empty box above the copy. */
.hero-stage.is-fallback { height: var(--sp-32); }
/* Fades the scene into the copy below it (phones) or beside it (desktop). */
.hero-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--sp-96); background: linear-gradient(transparent, var(--band)); pointer-events: none; }

.core-label, .hud { position: absolute; z-index: 1; opacity: 0; transition: opacity var(--t-reveal) var(--ease); }
.is-live .core-label, .is-live .hud { opacity: 1; }
.core-label {
  display: none; left: 0; top: 0;
  padding: var(--sp-8) var(--sp-12); border-radius: var(--r-pill);
  background: var(--band-glass); box-shadow: 0 0 0 1px rgb(110 231 183 / .3) inset;
  font: 600 12px/1 var(--font-b); letter-spacing: .02em; color: var(--e-300); white-space: nowrap;
  will-change: transform;
}
/* Illustrative scoreboard: hero3d.js counts companies and widens the margin as they join. */
.hud {
  top: var(--sp-12); left: var(--sp-12);
  display: grid; gap: var(--sp-8); width: var(--hud-w);
  padding: var(--sp-12) var(--sp-16); border-radius: var(--r-tile);
  background: var(--band-glass); box-shadow: 0 0 0 1px var(--band-line) inset;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 12.5px/1.2 var(--font-b); color: var(--band-ink-2);
}
.hud-k { font: 600 10.5px/1.2 var(--font-b); letter-spacing: .08em; text-transform: uppercase; color: var(--band-accent); }
.hud-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-12); }
.hud-row b { font: 700 16px/1 var(--font-d); color: #fff; font-variant-numeric: tabular-nums; }
.hud-bar { display: block; height: 4px; overflow: hidden; border-radius: var(--r-pill); background: rgb(207 224 218 / .14); }
.hud-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--e-500), var(--e-300)); transform-origin: left; transform: scaleX(.2); }

.hero-copy { position: relative; z-index: 2; padding: 0 var(--sp-24) var(--sp-40); }
.hero-copy .eyebrow { color: var(--band-accent); }
.hero h1 { margin-top: var(--sp-16); font-weight: 800; font-size: clamp(2.5rem, 4.6vw, 3.9rem); line-height: .98; letter-spacing: -.035em; color: #fff; }
.hero h1 em { color: var(--band-accent); }
.lede { margin-top: var(--sp-24); max-width: 30em; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--band-ink-2); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-32); }
.ctas .btn { width: 100%; }

/* The idea in three moves, along the bottom of the hero. */
.thesis { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--band-line-soft); background: rgb(255 255 255 / .02); }
.thesis li { padding: var(--sp-24); }
.thesis li + li { border-top: 1px solid var(--band-line-soft); }
.thesis .k { font: 600 12px/1.2 var(--font-b); letter-spacing: .08em; text-transform: uppercase; color: var(--band-accent); }
.thesis b { display: block; margin-top: var(--sp-8); font: 700 1.15rem/1.25 var(--font-d); color: #fff; }
.thesis p { margin-top: var(--sp-8); font-size: 14.5px; line-height: 1.5; color: var(--band-ink-2); }

/* ── Journey ────────────────────────────────────────── */
.journey { display: grid; grid-template-columns: 1fr; gap: var(--sp-40); align-items: start; }
.journey-head h2 { margin-top: var(--sp-16); font-weight: 800; font-size: clamp(2.1rem, 3.6vw, 3.2rem); line-height: 1.02; letter-spacing: -.03em; }
.journey-head > p { margin-top: var(--sp-16); max-width: 32em; font-size: 1.1rem; color: var(--ink-2); }
.timeline { position: relative; display: grid; gap: var(--sp-16); }
.timeline::before { content: ""; position: absolute; left: 19px; top: var(--sp-24); bottom: var(--sp-24); width: 2px; background: linear-gradient(var(--e-500), rgb(16 185 129 / .12)); }
.stage { position: relative; display: grid; grid-template-columns: var(--control-sm) 1fr; gap: var(--sp-16); }
.stage .dot { position: relative; z-index: 1; display: grid; place-items: center; width: var(--control-sm); height: var(--control-sm); margin-top: var(--sp-24); border-radius: var(--r-btn); background: var(--band); color: var(--e-300); font: 800 15px/1 var(--font-d); box-shadow: 0 0 0 4px var(--paper); }
.stage-card { padding: var(--sp-24); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; }
.stage .when { font: 600 12px/1.2 var(--font-b); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.stage h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); margin-top: var(--sp-8); font-weight: 700; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.015em; }
.stage p { margin-top: var(--sp-8); font-size: 15.5px; color: var(--ink-2); }
.stage .get { margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.stage .get span { display: block; margin-bottom: var(--sp-4); font: 600 11px/1.2 var(--font-b); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.badge { padding: var(--sp-4) var(--sp-8); border-radius: var(--r-pill); background: var(--e-300); color: var(--deep); font: 700 11px/1.2 var(--font-b); letter-spacing: .08em; }
/* The FDE stage is the heart of the journey, so it is the one dark card. */
.stage-fde .dot { background: var(--e-300); color: var(--deep); }
.stage-fde .stage-card { background: var(--band); box-shadow: none; }
.stage-fde .when { color: var(--band-accent); }
.stage-fde h3 { color: #fff; }
.stage-fde p { color: var(--band-ink-2); }
.stage-fde .get { border-top-color: var(--band-line-soft); color: var(--band-ink); }
.stage-fde .get span { color: var(--band-ink-2); }

/* ── Forward-deployed engineers ─────────────────────── */
.fde-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-16); margin-top: var(--sp-40); }
.fde { padding: var(--sp-32) var(--sp-24); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; }
.fde .ic { display: grid; place-items: center; width: var(--control-md); height: var(--control-md); border-radius: var(--r-btn); background: var(--band); color: var(--e-300); }
.fde .ic svg { width: 24px; height: 24px; }
.fde .k { display: block; margin-top: var(--sp-24); font: 600 12px/1.2 var(--font-b); letter-spacing: .08em; text-transform: uppercase; }
.fde h3 { margin-top: var(--sp-8); font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.015em; }
.fde p { margin-top: var(--sp-8); font-size: 15px; color: var(--ink-2); }

.fit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); margin-top: var(--sp-32); }
.fit > span { font: 600 12px/1.2 var(--font-b); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fit ul { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.fit li { padding: var(--sp-8) var(--sp-16); border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; font: 500 14px/1.2 var(--font-b); }

/* ── FAQ ────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: 1fr; gap: var(--sp-40); align-items: start; }
.faq-list { display: grid; gap: var(--sp-12); }
.qa { border-radius: var(--r-tile); background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-24); border-radius: var(--r-tile);
  font: 700 1.1rem/1.3 var(--font-d); letter-spacing: -.01em; cursor: pointer; list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa .pm {
  display: grid; place-items: center; flex: none; width: var(--sp-32); height: var(--sp-32);
  border-radius: var(--r-chip); box-shadow: 0 0 0 1px var(--line-strong) inset; color: var(--accent);
  transition: background var(--t-base), color var(--t-base);
}
.qa .pm svg { width: var(--sp-16); height: var(--sp-16); transition: transform var(--t-base) var(--ease); }
.qa:not([open]) summary:hover .pm { background: var(--paper); }
.qa[open] .pm { background: var(--band); color: var(--e-300); box-shadow: none; }
.qa[open] .pm svg { transform: rotate(45deg); }
.qa p { padding: 0 var(--sp-24) var(--sp-24); max-width: 40em; font-size: 15.5px; color: var(--ink-2); }
/* Two sections on the same paper background share one gap instead of stacking two. */
.sec:not(.sec-alt) + .sec:not(.sec-alt) { padding-top: 0; }

/* ── Contact band ───────────────────────────────────── */
.band {
  padding: var(--sp-48) var(--sp-24); border-radius: var(--r-card);
  color: var(--band-ink);
  background:
    radial-gradient(640px 320px at 92% -12%, rgb(16 185 129 / .2), transparent 70%),
    var(--band);
}
.cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-32); }
.cta > div { flex: 1 1 480px; }
.cta h2 { font-weight: 800; font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.04; letter-spacing: -.03em; color: #fff; }
.cta h2 em { color: var(--band-accent); }
.cta p { margin-top: var(--sp-16); max-width: 32em; font-size: 1.1rem; color: var(--band-ink-2); }

/* ── Footer ─────────────────────────────────────────── */
.foot { padding-bottom: var(--sp-48); font-size: 14px; color: var(--muted); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-16); padding-top: var(--sp-24); border-top: 1px solid var(--line); }

/* ── Reveal on scroll (only when main.js runs) ──────── */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

/* ── Enhance upward ─────────────────────────────────── */
@media (min-width: 481px) {
  .ctas .btn { width: auto; }
}
@media (min-width: 641px) {
  .wrap { padding: 0 var(--sp-24); }
  .sec { padding: var(--sp-96) 0; }
  .top .btn-sm { height: var(--control-md); padding: 0 var(--sp-24); font-size: 15px; }
  .fde-grid { grid-template-columns: repeat(2, 1fr); margin-top: var(--sp-56); }
  .hero-stage { height: var(--stage-tablet); }
  .hero-copy { padding: 0 var(--sp-48) var(--sp-48); }
  .core-label { display: block; }
  .hud { top: auto; bottom: var(--sp-24); left: auto; right: var(--sp-24); }
  .thesis li { padding: var(--sp-24) var(--sp-48); }
  .band { padding: var(--sp-64); border-radius: var(--r-band); }
  .hero-band { border-radius: var(--r-band); }
  .qa summary { padding: var(--sp-16) var(--sp-24) var(--sp-16) var(--sp-32); }
  .qa p { padding: 0 var(--sp-32) var(--sp-24); }
}
@media (min-width: 861px) {
  .nav { display: flex; }
  .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-64); }
  .thesis { grid-template-columns: repeat(3, 1fr); padding: 0 var(--sp-16); }
  .thesis li { padding: var(--sp-32); }
  .thesis li + li { border-top: 0; border-left: 1px solid var(--band-line-soft); }
}
@media (min-width: 981px) {
  .hero-main { display: flex; align-items: center; min-height: clamp(var(--hero-min), calc(100vh - var(--header-h) - var(--sp-16) - var(--thesis-h)), var(--hero-max)); }
  .hero-stage, .hero-stage.is-fallback { position: absolute; inset: 0; height: auto; }
  .hero-stage::after { top: 0; height: auto; background: linear-gradient(90deg, var(--band) 0%, rgb(11 18 22 / .9) 40%, transparent 66%); }
  .hero-copy { max-width: 760px; padding: var(--sp-48) var(--sp-64); }
  .thesis { padding: 0 var(--sp-32); }
  .thesis li { padding: var(--sp-24) var(--sp-32); }
  .thesis p { font-size: 14px; }
  .journey { grid-template-columns: var(--journey-head) 1fr; gap: var(--sp-64); }
  .journey-head { position: sticky; top: calc(var(--header-h) + var(--sp-32)); }
}
@media (min-width: 1081px) {
  .fde-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .btn, .qa .pm, .qa .pm svg { transition: none; }
}