/* ═══════════════════════════════════════════════════════════════════════════
   keywordise — Neurobird brand design system.
   Flat, sharp, high-contrast, editorial. Satoshi type, solid lime/navy blocks,
   hairline rules, /01 section numbers. NOT glossy, NOT gradient, NOT glassy.
   Source of truth: Neurobird agency DESIGN.md. Keep both in sync.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Satoshi (self-hosted; 500 body, 700 bold, 900 black display) ── */
@font-face{font-family:'Satoshi';src:url('/static/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/static/fonts/satoshi-700.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/static/fonts/satoshi-900.woff2') format('woff2');font-weight:800 900;font-style:normal;font-display:swap}

:root{
  /* palette — the whole thing */
  --lime:#F5FFAB;          /* the one accent: solid blocks, CTAs, active states */
  --lime-hover:#eaff8a;
  --white:#FFFFFF;
  --navy:#17172B;          /* primary dark surface + text on lime */
  --blue:#3431A5;          /* rare secondary accent only */
  --ink:#0e0e1c;           /* near-black backings */
  --muted:rgba(255,255,255,.62);      /* body text on dark */
  --muted-2:rgba(255,255,255,.44);
  --muted-dark:rgba(23,23,43,.66);    /* body text on lime */
  --muted-dark-2:rgba(23,23,43,.42);
  --rule:rgba(255,255,255,.18);       /* hairline on dark */
  --rule-dark:rgba(23,23,43,.18);     /* hairline on lime */
  --radius:9px;
  --radius-sm:6px;
  --max:1320px;
  --pad:clamp(20px,4vw,64px);
  --good:#4bbf94; --warn:#e0b64a; --bad:#e07070;
  font-synthesis:none;
}

/* ── base ── */
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--navy);color:var(--white);line-height:1.4;overflow-x:clip;-webkit-font-smoothing:antialiased;margin:0;font-weight:500}
a{color:inherit;text-decoration:none}
img,canvas{max-width:100%;display:block}
.hide{display:none!important}
.muted{color:var(--muted)} .muted-dark{color:var(--muted-dark)}

/* ── type: editorial, Satoshi Black ── */
.display,h1.display{font-weight:900;letter-spacing:-.03em;line-height:.98;text-wrap:balance}
.eyebrow{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.eyebrow--slash::before{content:"/";opacity:.5;margin-right:2px}
.secnum{font-weight:700;font-size:14px;letter-spacing:.1em;opacity:.8}
.secnum::before{content:"/";opacity:.55}

/* ── buttons: solid lime / outline, uppercase, wide tracking ── */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;border:none;font-family:inherit;
  transition:transform .15s ease,background .2s ease,color .2s ease;white-space:nowrap}
.btn--lime{background:var(--lime);color:var(--navy);padding:16px 30px;border-radius:var(--radius)}
.btn--lime:hover{transform:translateY(-2px);background:var(--lime-hover)}
.btn--outline{background:transparent;color:var(--white);padding:15px 30px;border:1.5px solid var(--white);border-radius:var(--radius)}
.btn--outline:hover{background:var(--white);color:var(--navy)}
.btn--navy{background:var(--navy);color:var(--white);padding:16px 30px;border-radius:var(--radius)}
.btn--navy:hover{transform:translateY(-2px);opacity:.9}
.btn--sm{padding:11px 20px;font-size:12px}
.btn:disabled{opacity:.4;cursor:default;transform:none}

/* ── hairline rule ── */
.rule{border:none;border-top:1px solid var(--rule);margin:0}
.rule--dark{border-top-color:var(--rule-dark)}
.rule--thick{border-top:6px solid var(--navy)}

/* ── section shell: full-bleed alternating blocks ── */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding:clamp(56px,8vw,120px) 0}
.sec--lime{background:var(--lime);color:var(--navy)}
.sec--navy{background:var(--navy);color:var(--white)}
.sec--ink{background:var(--ink);color:var(--white)}

/* on lime, text tokens flip to dark */
.sec--lime .muted,.sec--lime .lede{color:var(--muted-dark)}
.sec--lime .eyebrow,.sec--lime .secnum{color:var(--navy)}