@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Public+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Exo+2:wght@500;600;700;800&display=swap');

:root{
  --bg:#EEEAE0;
  --surface:#FBF9F3;
  --surface-2:#E4DECC;
  --ink:#20242B;
  --ink-dim:#565C63;
  --line:#D6CDB4;
  --brass:#0082F0;
  --brass-strong:#0046BE;
  --brass-soft:#D8ECFE;
  --brass-light:#14BEFA;
  --brass-deep:#0046BE;
  --level:#2E5F4F;
  --level-soft:#D9E7DF;
  --danger:#8A3B2E;
  --shadow: 0 1px 2px rgba(32,36,43,0.06), 0 8px 24px -12px rgba(32,36,43,0.18);
  --bezel: 0 0 0 1px var(--line), 0 0 0 4px var(--bg), 0 0 0 5px color-mix(in srgb, var(--line) 55%, transparent), var(--shadow);
  --radius-s:6px;
  --radius-m:12px;
  --radius-l:20px;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2.25rem; --sp-7:3.25rem; --sp-8:4.75rem; --sp-9:6.5rem;
  --maxw:1180px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171B21;
    --surface:#1E242B;
    --surface-2:#262D35;
    --ink:#ECE7DA;
    --ink-dim:#A9AFB8;
    --line:#333B45;
    --brass:#3FC0FF;
    --brass-strong:#8FDDFF;
    --brass-soft:#123049;
    --brass-light:#7FD8FF;
    --brass-deep:#0058C8;
    --level:#6FBFA3;
    --level-soft:#1E332C;
    --danger:#E39485;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -14px rgba(0,0,0,0.55);
    --bezel: 0 0 0 1px var(--line), 0 0 0 4px var(--bg), 0 0 0 5px color-mix(in srgb, var(--line) 55%, transparent), var(--shadow);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#171B21;
  --surface:#1E242B;
  --surface-2:#262D35;
  --ink:#ECE7DA;
  --ink-dim:#A9AFB8;
  --line:#333B45;
  --brass:#3FC0FF;
  --brass-strong:#8FDDFF;
  --brass-soft:#123049;
  --brass-light:#7FD8FF;
  --brass-deep:#0058C8;
  --level:#6FBFA3;
  --level-soft:#1E332C;
  --danger:#E39485;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -14px rgba(0,0,0,0.55);
  --bezel: 0 0 0 1px var(--line), 0 0 0 4px var(--bg), 0 0 0 5px color-mix(in srgb, var(--line) 55%, transparent), var(--shadow);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; overflow-x:hidden;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Public Sans", -apple-system, "Segoe UI", sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-inline:clamp(18px, 4vw, 48px);
  overflow-x:hidden;
}
img{max-width:100%;}
[hidden]{display:none!important;}
a{color:inherit;}
h1,h2,h3{
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
.wrap{max-width:var(--maxw); margin-inline:auto;}
.eyebrow{
  font-family:"Exo 2", "JetBrains Mono", ui-monospace, sans-serif;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex; align-items:center; gap:.6em;
  margin-bottom:var(--sp-3);
}
.eyebrow::before{
  content:"";
  width:1.4em; height:1px;
  background:var(--brass);
  display:inline-block;
}
.accent{
  background:linear-gradient(100deg, var(--brass-strong), var(--brass));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
section{padding-block: var(--sp-8) var(--sp-8);}
.lede{
  font-size:clamp(1.05rem, .95rem + .5vw, 1.25rem);
  color:var(--ink-dim);
  max-width:62ch;
}
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:"Exo 2", "Public Sans", sans-serif; font-weight:700; font-size:.98rem; letter-spacing:.01em;
  padding:.85em 1.5em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:focus-visible{ outline:3px solid var(--level); outline-offset:2px; }
.btn-primary{
  background:linear-gradient(155deg, var(--brass-light) 0%, var(--brass) 52%, var(--brass-deep) 100%);
  color:#20140A;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 10px 24px -10px color-mix(in srgb, var(--brass) 55%, transparent);
}
.btn-primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 16px 30px -10px color-mix(in srgb, var(--brass) 65%, transparent);
}
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass); }
.btn-block{width:100%; justify-content:center;}

/* ===== header ===== */
header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding-block:.9rem;
  gap:var(--sp-4) var(--sp-3);
}
.brand{ display:flex; align-items:center; gap:.65em; text-decoration:none; color:var(--ink); }
.brand-mark{
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--brass);
  display:block;
  object-fit:cover;
  background:#0A1318;
  flex-shrink:0;
}
.brand-word{ font-family:"Fraunces", serif; font-weight:600; font-size:1.05rem; letter-spacing:.01em; white-space:nowrap; }
.brand-word small{ display:block; font-family:"JetBrains Mono",monospace; font-weight:500; font-size:.6rem; letter-spacing:.13em; color:var(--ink-dim); text-transform:uppercase; }
.logo-badge{
  display:inline-flex; align-items:center; justify-content:center;
  background:#0A1318; border-radius:var(--radius-m);
  box-shadow:0 0 0 1px var(--line);
  flex-shrink:0;
}
.logo-badge-h{ padding:.4rem .65rem; }
.logo-badge-h img{ display:block; height:34px; width:auto; }
.logo-badge-stacked{ padding:.85rem; }
.logo-badge-stacked img{ display:block; height:150px; width:auto; }
@media (max-width:480px){ .logo-badge-h img{ height:28px; } }
.navlinks{ display:flex; gap:var(--sp-5); list-style:none; margin:0; padding:0; }
.navlinks a{ text-decoration:none; font-size:.92rem; font-weight:600; color:var(--ink-dim); }
.navlinks a:hover{ color:var(--brass); }
@media (max-width:860px){ .navlinks{display:none;} }

/* ===== hero ===== */
.hero{
  --ink:#F3EFE4;
  --ink-dim:#C7BFA9;
  --line:#454C56;
  --brass:#3FC0FF;
  --brass-strong:#8FDDFF;
  width:100vw;
  position:relative;
  left:50%; right:50%;
  margin-inline:-50vw;
  padding-inline:clamp(18px, 4vw, 48px);
  padding-block: var(--sp-8) var(--sp-7);
  background: linear-gradient(160deg, #1B2731 0%, #0A1318 100%);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:-2rem -4vw auto -4vw; height:640px;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(560px 360px at 12% 8%, color-mix(in srgb, var(--brass) 32%, transparent), transparent 70%),
    radial-gradient(480px 420px at 92% 30%, color-mix(in srgb, var(--level) 26%, transparent), transparent 70%),
    radial-gradient(700px 300px at 50% 90%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 75%);
}
.hero > .wrap{ position:relative; z-index:1; }
.hero-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8);
  align-items:center;
}
@media (max-width:920px){ .hero-grid{grid-template-columns:1fr; gap:var(--sp-7);} }
.hero h1{
  font-size:clamp(2.1rem, 1.6rem + 2.4vw, 3.55rem);
  letter-spacing:-.01em;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-6); align-items:center; }
.hero-sub{ margin-top:var(--sp-4); }
.microcopy{ font-size:.85rem; color:var(--ink-dim); }

.statbar{
  margin-top:var(--sp-7);
  display:flex; flex-wrap:wrap; row-gap:var(--sp-3);
  border-top:1px solid var(--line);
  padding-top:var(--sp-4);
}
.statbar .stat{
  font-size:.87rem; color:var(--ink-dim);
  padding-inline:var(--sp-5);
  border-left:1px solid var(--line);
  line-height:1.4;
}
.statbar .stat:first-child{ border-left:none; padding-left:0; }
@media (max-width:700px){
  .statbar{flex-direction:column; row-gap:var(--sp-3);}
  .statbar .stat{ border-left:none; padding-left:0; padding-inline:0; border-top:1px solid var(--line); padding-top:var(--sp-3); }
  .statbar .stat:first-child{ border-top:none; padding-top:0; }
}

/* balance diagram */
.balance-wrap{ display:flex; justify-content:center; align-self:start; }
.balance{ width:100%; max-width:600px; height:auto; }
.balance text{ font-family:"JetBrains Mono", monospace; fill:var(--ink-dim); }
.balance .hub-label{ font-family:"Fraunces", serif; font-style:italic; }
.balance .arm{ stroke:var(--line); stroke-width:1.5; }
.balance .node{ fill:var(--surface); stroke:var(--brass); stroke-width:1.6; }
.balance .hub-ring{ fill:none; stroke:var(--level); stroke-width:2; }
.balance .hub-fill{ fill:#0A1318; }

/* section dividers reuse a mini balance rule */
.divider{
  display:flex; align-items:center; gap:var(--sp-3);
  color:var(--ink-dim); margin-bottom:var(--sp-6);
}
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.divider svg{ flex-shrink:0; }

h2.h2{ font-size:clamp(1.65rem,1.4rem + 1vw,2.35rem); max-width:20ch; }
.section-head{ display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-7); max-width:64ch; }

/* ===== audience fork ===== */
.fork-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
@media (max-width:920px){ .fork-grid{grid-template-columns:1fr;} }
.fork-card{
  background:var(--surface); border:none; border-radius:var(--radius-l);
  padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4);
  box-shadow:var(--bezel);
}
.fork-card .tag{
  align-self:flex-start;
  font-family:"Exo 2","JetBrains Mono",monospace; font-weight:700; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--level); background:var(--level-soft); border-radius:999px; padding:.35em .8em;
}
.fork-card h3{ font-size:1.35rem; }
.fork-card p{ color:var(--ink-dim); margin:0; font-size:.96rem; }
.fork-card .pain{ color:var(--ink); }
.fork-card .solve{
  border-top:1px solid var(--line); padding-top:var(--sp-4); margin-top:auto;
}
.fork-card .btn{ margin-top:var(--sp-3); }

/* ===== mechanism / claim types ===== */
.mech-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:start; }
@media (max-width:920px){ .mech-grid{grid-template-columns:1fr;} }
.chipboard{
  background:var(--surface); border:none; border-radius:var(--radius-l);
  padding:var(--sp-6);
  box-shadow:var(--bezel);
}
.chipboard h4{
  font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); margin:0 0 var(--sp-3);
}
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--sp-5); }
.chip-row:last-child{ margin-bottom:0; }
.chip{
  font-family:"JetBrains Mono",monospace; font-size:.82rem;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:999px; padding:.4em .95em; white-space:nowrap;
}
.chip.primary{ border-color:var(--brass); color:var(--brass-strong); background:var(--brass-soft); }
.mech-steps{ list-style:none; margin:var(--sp-5) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); max-width:52ch; }
.mech-steps li{ display:flex; gap:var(--sp-3); align-items:flex-start; }
.mech-steps p{ margin:0; font-size:.96rem; color:var(--ink-dim); }
.mech-steps .step-num{
  flex-shrink:0; width:1.9em; height:1.9em; border-radius:50%;
  background:var(--brass-soft); color:var(--brass-strong);
  font-family:"Exo 2",sans-serif; font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
}
.mech-steps p.step-title{ font-weight:600; color:var(--ink); }

/* ===== value stack ===== */
.value-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.value-row{
  display:grid; grid-template-columns:2.4rem 1fr; gap:var(--sp-4);
  padding-block:var(--sp-5); border-bottom:1px solid var(--line);
}
.value-row .num{ font-family:"JetBrains Mono",monospace; color:var(--brass); font-weight:600; }
.value-row h4{ margin:0 0 .3em; font-family:"Public Sans",sans-serif; font-weight:700; font-size:1.05rem; }
.value-row p{ margin:0; color:var(--ink-dim); font-size:.96rem; max-width:60ch; }

/* ===== proof ===== */
.proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); margin-bottom:var(--sp-6); }
@media (max-width:920px){ .proof-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .proof-grid{grid-template-columns:1fr;} }
.proof-tile{ background:var(--surface); border:none; border-radius:var(--radius-m); padding:var(--sp-5); box-shadow:var(--bezel); }
.proof-tile b{ display:block; font-family:"Exo 2","JetBrains Mono",monospace; font-weight:800; font-variant-numeric:tabular-nums; font-size:1.55rem; color:var(--ink); }
.proof-tile span{ font-size:.85rem; color:var(--ink-dim); }
.proof-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); max-width:74ch; }
.proof-list li{ display:flex; gap:var(--sp-4); }
.proof-list li::before{
  content:"σ"; font-family:"Fraunces",serif; font-style:italic; color:var(--brass);
  font-size:1.1rem; line-height:1.6; flex-shrink:0;
}

/* ===== offer / form ===== */
.offer{ background:var(--surface); border:none; border-radius:var(--radius-l); box-shadow:var(--bezel); overflow:hidden; }
.offer-inner{ display:grid; grid-template-columns:.9fr 1.1fr; }
@media (max-width:920px){ .offer-inner{grid-template-columns:1fr;} }
.offer-copy{ padding:var(--sp-7); border-right:1px solid var(--line); }
@media (max-width:920px){ .offer-copy{border-right:none; border-bottom:1px solid var(--line);} }
.offer-copy ul{ margin:var(--sp-5) 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.6em; }
.offer-copy ul li{ display:flex; gap:.6em; font-size:.94rem; color:var(--ink-dim); }
.offer-copy ul li::before{ content:"✓"; color:var(--level); font-weight:700; }
.offer-form{ padding:var(--sp-7); }
.field{ margin-bottom:var(--sp-4); display:flex; flex-direction:column; gap:.4em; }
.field label{ font-size:.82rem; font-weight:600; color:var(--ink-dim); }
.field input, .field select, .field textarea{
  font-family:"Public Sans",sans-serif; font-size:.96rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:.7em .85em; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brass); box-shadow:0 0 0 3px color-mix(in srgb, var(--brass) 22%, transparent);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); margin-top:var(--sp-5); flex-wrap:wrap; }
#form-note{ margin-top:var(--sp-4); font-size:.88rem; color:var(--level); }
#form-note.err{ color:var(--danger); }
.consent-row{ margin-bottom:var(--sp-4); }
.consent-label{ display:flex; align-items:flex-start; gap:.6em; font-size:.82rem; color:var(--ink-dim); line-height:1.5; cursor:pointer; }
.consent-label input[type="checkbox"]{ margin-top:.2em; flex-shrink:0; width:1.1em; height:1.1em; accent-color:var(--brass); cursor:pointer; }
.consent-label a{ color:var(--brass-strong); text-decoration:underline; }

/* ===== faq ===== */
.faq-list{ display:flex; flex-direction:column; gap:var(--sp-3); max-width:74ch; }
details{ border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); padding:var(--sp-4) var(--sp-5); }
summary{ cursor:pointer; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:var(--sp-4); align-items:center; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-family:"JetBrains Mono",monospace; color:var(--brass); font-size:1.2rem; flex-shrink:0; }
details[open] summary::after{ content:"–"; }
details p{ color:var(--ink-dim); margin:.9em 0 0; max-width:64ch; }

/* ===== final cta ===== */
.final-cta{
  text-align:center; border-radius:var(--radius-l);
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); padding:var(--sp-8) var(--sp-5);
}
.final-cta h2{ max-width:22ch; margin-inline:auto; }
.final-cta .lede{ margin-inline:auto; }
.final-cta .hero-actions{ justify-content:center; margin-top:var(--sp-6); }

/* ===== footer ===== */
footer{ border-top:1px solid var(--line); padding-block:var(--sp-7) var(--sp-6); }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--sp-6); }
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr; gap:var(--sp-5);} }
.foot-grid h5{ font-family:"Exo 2","JetBrains Mono",monospace; font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 var(--sp-3); }
.foot-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55em; }
.foot-grid a{ text-decoration:none; color:var(--ink-dim); font-size:.92rem; }
.foot-grid a:hover{ color:var(--brass); }
.legal{ margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.legal p{ font-size:.8rem; color:var(--ink-dim); max-width:90ch; margin:0 0 .8em; }
.legal .copyright{ font-size:.78rem; color:var(--ink-dim); }