:root{
  --bg:#08060F; --bg-2:#0d0a1a; --surface:#140F24; --surface-2:#1C1636;
  --hairline:#261F42; --hairline-2:#372C5A;
  --ink:#F3F1FB; --ink-2:#CDC7E8; --ink-3:#8E86B4; --ink-4:#5A5382;
  --accent:#9B8CFF; --accent-2:#6FC3FF; --accent-3:#C4B5FF; --accent-ink:#0a0716;
  --disp-w:900; --disp-track:-0.045em;
  --maxw:1080px; --radius:22px; --radius-sm:14px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.62; letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:var(--accent-ink); }
.display{ font-family:'Inter',sans-serif; font-weight:var(--disp-w); letter-spacing:var(--disp-track); line-height:1.0; }
.display em{ font-style:normal; color:var(--accent); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }

/* header */
header.site{ position:sticky; top:0; z-index:100; background:color-mix(in srgb,var(--bg) 74%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--hairline); }
.site .bar{ max-width:var(--maxw); margin:0 auto; padding:0 40px; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:nowrap; }
.back{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--ink-2); }
.back:hover{ color:var(--accent); }
.back svg{ transition:transform .16s; } .back:hover svg{ transform:translateX(-3px); }
.site nav{ display:flex; gap:6px; align-items:center; flex-wrap:nowrap; flex:0 0 auto; white-space:nowrap; }
.site nav a{ font-size:14px; font-weight:600; color:var(--ink-3); padding:8px 12px; border-radius:9px; }
.site nav a:hover{ color:var(--ink); background:var(--surface-2); }
.site nav a.navcta{ background:var(--accent); color:var(--accent-ink); }

/* progress bar */
#progress{ position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); z-index:200; }

.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--accent); }

/* HERO */
.hero{ padding:64px 0 40px; position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; top:-120px; right:-6%; width:520px; height:520px; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 62%); filter:blur(50px); z-index:0; pointer-events:none; }
.hero>*{ position:relative; z-index:1; }
.hero h1{ margin:22px 0 0; font-size:clamp(36px,6vw,68px); }
.hero .dek{ margin:24px 0 0; max-width:720px; font-size:20px; line-height:1.5; color:var(--ink-2); }
.hero .dek b{ color:var(--ink); font-weight:700; }

/* exec meta */
.meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius-sm); overflow:hidden; margin-top:40px; }
.meta .cell{ background:var(--bg); padding:18px 18px; }
.meta .k{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); margin-bottom:7px; }
.meta .v{ font-size:14.5px; color:var(--ink); font-weight:600; line-height:1.35; }
.meta .v small{ display:block; font-weight:500; color:var(--ink-3); font-size:12.5px; margin-top:2px; }

/* stat band */
.statband{ display:flex; flex-wrap:wrap; gap:26px 44px; margin-top:30px; padding:24px 26px; border:1px solid var(--hairline); border-radius:var(--radius-sm); background:var(--surface); }
.statband .s .n{ font-family:'Inter'; font-weight:900; letter-spacing:-0.04em; font-size:30px; color:var(--accent); }
.statband .s .l{ font-size:12.5px; color:var(--ink-3); margin-top:3px; max-width:190px; }

/* SECTIONS */
.sec{ padding:74px 0 0; }
.sec .kick{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; }
.sec h2{ font-family:'Inter'; font-weight:900; letter-spacing:-0.04em; font-size:clamp(26px,4vw,42px); line-height:1.02; margin:0 0 20px; }
.sec p{ font-size:17.5px; color:var(--ink-2); max-width:760px; }
.sec p b{ color:var(--ink); font-weight:650; }
.lead-quote{ font-size:clamp(21px,3vw,30px); line-height:1.3; color:var(--ink); max-width:820px; font-weight:600; letter-spacing:-0.02em; }
.lead-quote .accent{ color:var(--accent); }

/* why-hard grid */
.hard{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.hard .card{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:22px 22px; }
.hard .card h4{ margin:0 0 8px; font-size:16px; letter-spacing:-0.02em; }
.hard .card p{ margin:0; font-size:14.5px; color:var(--ink-3); }
.hard .card .no{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--accent); }

/* what Aaron led — 4 responsibility columns */
.led{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:10px; }
.led .col{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:20px; }
.led .col h4{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }
.led .col ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.led .col li{ font-size:14px; color:var(--ink-2); line-height:1.45; display:flex; gap:8px; }
.led .col li::before{ content:""; flex:none; width:4px; height:4px; border-radius:50%; background:var(--accent); margin-top:8px; }
.led .col.shared{ border-color:var(--hairline-2); }

/* DECISION LEDGER */
.ledger{ margin-top:10px; display:grid; gap:12px; }
.dec{ border:1px solid var(--hairline); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden; }
.dec>button{ width:100%; text-align:left; cursor:pointer; font:inherit; color:var(--ink); background:transparent; border:0; padding:20px 22px; display:flex; align-items:center; gap:16px; }
.dec .dn{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent); flex:none; }
.dec .dt{ font-size:17.5px; font-weight:650; letter-spacing:-0.02em; flex:1; }
.dec .chev{ flex:none; transition:transform .2s; color:var(--ink-3); }
.dec[open-state="1"] .chev{ transform:rotate(180deg); }
.dec .panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.dec[open-state="1"] .panel{ max-height:900px; }
.dec .panel-in{ padding:0 22px 22px; display:grid; grid-template-columns:1fr 1fr; gap:16px 26px; }
.dec .field{ }
.dec .field.full{ grid-column:1/-1; }
.dec .field .fk{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); margin-bottom:5px; }
.dec .field .fv{ font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.dec .field .fv b{ color:var(--ink); font-weight:650; }
.dec .rethink{ background:var(--bg-2); border:1px solid var(--hairline); border-radius:10px; padding:12px 14px; }

/* PRODUCT EVOLUTION */
.evo-toggle{ display:inline-flex; background:var(--surface); border:1px solid var(--hairline); border-radius:999px; padding:4px; margin:8px 0 20px; }
.evo-toggle button{ font:inherit; cursor:pointer; border:0; background:transparent; color:var(--ink-3); font-size:13.5px; font-weight:600; padding:9px 18px; border-radius:999px; transition:all .16s; }
.evo-toggle button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); }
.evo-panel{ border:1px solid var(--hairline); border-radius:var(--radius); background:var(--surface); padding:26px 28px; }
.evo-panel h4{ margin:0 0 8px; font-size:18px; letter-spacing:-0.02em; }
.evo-panel p{ margin:0 0 16px; font-size:15px; color:var(--ink-3); max-width:720px; }
.evo-panel .flow{ display:flex; flex-wrap:wrap; gap:8px; }
.evo-panel .chip{ font-family:'JetBrains Mono',monospace; font-size:12px; padding:8px 13px; border-radius:8px; border:1px dashed var(--hairline-2); color:var(--ink-3); }
.evo-panel.after .chip{ border-style:solid; border-color:color-mix(in srgb,var(--accent) 40%,transparent); color:var(--accent); }
.evo-panel .arrow{ color:var(--ink-4); align-self:center; }

/* prototype embed */
.proto{ margin-top:22px; border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.proto .pbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--hairline); }
.proto .pbar .t{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-3); }
.proto .pbar a{ font-size:13px; font-weight:600; color:var(--accent); }
.proto .frame{ position:relative; aspect-ratio:16/10; background:var(--bg-2); }
.proto iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.proto .loadhint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-4); font-family:'JetBrains Mono',monospace; font-size:12px; }

/* outcome */
.out{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.out .o{ background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:22px; }
.out .o h4{ margin:0 0 8px; font-size:16.5px; letter-spacing:-0.02em; color:var(--accent); }
.out .o p{ margin:0; font-size:14.5px; color:var(--ink-2); }

/* reflection */
.reflect{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:14px; }
.reflect .r{ border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:20px 22px; background:var(--surface); }
.reflect .r h4{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; }
.reflect .r p{ margin:0; font-size:14.5px; color:var(--ink-2); }

/* next / cta */
.cta{ margin-top:80px; background:radial-gradient(120% 130% at 100% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 55%),var(--surface); border:1px solid var(--hairline); border-radius:var(--radius); padding:44px 40px; }
.cta h3{ font-family:'Inter'; font-weight:900; letter-spacing:-0.04em; font-size:clamp(26px,4vw,40px); margin:0 0 12px; }
.cta p{ color:var(--ink-2); max-width:520px; margin:0 0 24px; }
.btn{ display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:15px; padding:13px 22px; border-radius:999px; }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--hairline-2); }
.btn-row{ display:flex; gap:11px; flex-wrap:wrap; }
footer{ margin:64px 0 44px; padding-top:24px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--ink-4); font-size:13px; }
footer a:hover{ color:var(--accent); }

@media (max-width:860px){
  .wrap,.site .bar{ padding:0 22px; }
  .meta{ grid-template-columns:1fr 1fr; }
  .hard,.led,.out,.reflect{ grid-template-columns:1fr; }
  .dec .panel-in{ grid-template-columns:1fr; }
  .site nav a:not(.cta){ display:none; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }