/* ==========================================================================
   Thinlab — visual system v4
   Palette: warm amber / gold (illumination), warm charcoal ink, warm
   neutrals. No blue. Light is the :root default; dark applies via
   prefers-color-scheme and an explicit [data-theme].
   ========================================================================== */

:root{
  /* neutrals (warm) --------------------------------------------------- */
  --bg:#f8f5ef;
  --bg-2:#efe9dd;
  --surface:#ffffff;
  --surface-2:#f5f1e8;
  --surface-3:#ece5d7;
  --border:#e7e0d1;
  --border-strong:#d4ccb7;

  --text:#1b1710;
  --text-soft:#4b463b;
  --text-muted:#7a7160;

  /* brand — amber / gold / ember ----------------------------------- */
  --brand:#d97706;
  --brand-strong:#b45309;
  --brand-bright:#f5b32d;
  --brand-ink:#2a1804;             /* dark ink for text on amber fills */
  --brand-grad:linear-gradient(118deg,#f4b12a 0%,#e07d0b 52%,#b5480b 100%);
  --brand-wash:rgba(217,119,6,.10);
  --brand-line:rgba(217,119,6,.26);

  --amber:#c2410c;                 /* deep ember — small secondary spark */
  --amber-ink:#2a1204;
  --ok:#3f8f3f;
  --danger:#d64545;

  /* effects ----------------------------------------------------------- */
  --ring:0 0 0 3px rgba(217,119,6,.32);
  --shadow-xs:0 1px 2px rgba(40,28,12,.06);
  --shadow-sm:0 4px 14px -6px rgba(40,28,12,.15);
  --shadow:0 14px 38px -16px rgba(40,28,12,.20);
  --shadow-lg:0 40px 80px -32px rgba(40,28,12,.30);
  --glow:0 20px 60px -18px rgba(224,125,11,.42);

  --r-sm:10px;
  --r:14px;
  --r-lg:22px;
  --r-xl:30px;
  --r-pill:999px;

  --font-display:'Fraunces','Iowan Old Style',ui-serif,Georgia,serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --maxw:1180px;
  --nav-h:66px;

  --ease:cubic-bezier(.22,1,.36,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c0a07;
    --bg-2:#110e0a;
    --surface:#171410;
    --surface-2:#201b15;
    --surface-3:#2a241c;
    --border:#2f2820;
    --border-strong:#473d2e;

    --text:#f7f2e8;
    --text-soft:#cdc4b3;
    --text-muted:#968d7b;

    --brand:#f6ad3c;
    --brand-strong:#fbc463;
    --brand-bright:#ffd558;
    --brand-ink:#2a1804;
    --brand-grad:linear-gradient(118deg,#ffd155 0%,#f4a72c 52%,#e0740f 100%);
    --brand-wash:rgba(246,173,60,.14);
    --brand-line:rgba(246,173,60,.30);

    --amber:#e8703b;
    --amber-ink:#2a1204;
    --ok:#5cc264;
    --danger:#f0776f;

    --ring:0 0 0 3px rgba(246,173,60,.40);
    --shadow-xs:0 1px 2px rgba(0,0,0,.45);
    --shadow-sm:0 6px 18px -8px rgba(0,0,0,.62);
    --shadow:0 20px 46px -18px rgba(0,0,0,.68);
    --shadow-lg:0 46px 90px -34px rgba(0,0,0,.74);
    --glow:0 24px 70px -20px rgba(246,173,60,.42);
  }
}

:root[data-theme="dark"]{
  --bg:#0c0a07;
  --bg-2:#110e0a;
  --surface:#171410;
  --surface-2:#201b15;
  --surface-3:#2a241c;
  --border:#2f2820;
  --border-strong:#473d2e;

  --text:#f7f2e8;
  --text-soft:#cdc4b3;
  --text-muted:#968d7b;

  --brand:#f6ad3c;
  --brand-strong:#fbc463;
  --brand-bright:#ffd558;
  --brand-ink:#2a1804;
  --brand-grad:linear-gradient(118deg,#ffd155 0%,#f4a72c 52%,#e0740f 100%);
  --brand-wash:rgba(246,173,60,.14);
  --brand-line:rgba(246,173,60,.30);

  --amber:#e8703b;
  --amber-ink:#2a1204;
  --ok:#5cc264;
  --danger:#f0776f;

  --ring:0 0 0 3px rgba(246,173,60,.40);
  --shadow-xs:0 1px 2px rgba(0,0,0,.45);
  --shadow-sm:0 6px 18px -8px rgba(0,0,0,.62);
  --shadow:0 20px 46px -18px rgba(0,0,0,.68);
  --shadow-lg:0 46px 90px -34px rgba(0,0,0,.74);
  --glow:0 24px 70px -20px rgba(246,173,60,.42);
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.62;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(46rem 46rem at 88% -8%, var(--brand-wash), transparent 62%),
    radial-gradient(38rem 38rem at -6% 4%, color-mix(in srgb, var(--brand-bright) 12%, transparent), transparent 60%),
    radial-gradient(50rem 30rem at 50% 120%, var(--brand-wash), transparent 70%);
  background-attachment:fixed;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::selection{background:color-mix(in srgb, var(--brand) 28%, transparent);}

h1,h2,h3{font-family:var(--font-display);font-weight:560;line-height:1.1;margin:0 0 .4em;text-wrap:balance;letter-spacing:-.018em;font-optical-sizing:auto;}
p{margin:0 0 1em;color:var(--text-soft);}
p:last-child{margin-bottom:0;}
sup{font-size:.6em;font-feature-settings:"sups" 1;vertical-align:super;}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px;}

/* thin, unobtrusive scrollbar */
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px;border:3px solid var(--bg);}

.skip-link{
  position:fixed;left:1rem;top:.6rem;z-index:100;
  background:var(--brand);color:var(--brand-ink);
  padding:.6rem 1rem;border-radius:var(--r-sm);
  font-weight:600;font-size:.9rem;
  transform:translateY(-160%);transition:transform .2s var(--ease);
}
.skip-link:focus{transform:none;}

/* ============ Type utilities ============ */
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  font-weight:500;
  color:var(--brand);
  margin:0 0 1.05rem;
  display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{
  content:"";width:1.5rem;height:2px;border-radius:2px;
  background:var(--brand-grad);
}
.h2{font-size:clamp(1.6rem,3.3vw,2.5rem);color:var(--text);letter-spacing:-.022em;}
.display{
  font-size:clamp(2.5rem,6.2vw,4.35rem);
  line-height:1.02;letter-spacing:-.032em;color:var(--text);font-weight:540;
}
.display-sm{font-size:clamp(2.05rem,4.7vw,3.25rem);letter-spacing:-.026em;}
.lede{font-size:clamp(1.06rem,1.55vw,1.26rem);color:var(--text-soft);max-width:46rem;line-height:1.6;}
.band-lede{max-width:44rem;font-size:1.08rem;color:var(--text-soft);}
.fineprint{font-size:.8rem;color:var(--text-muted);margin-top:1.2rem;}

/* ============ Layout shells ============ */
.page{display:none;}
.page.is-active{display:block;animation:pageIn .55s var(--ease) both;}
@keyframes pageIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.band{
  padding:clamp(2.5rem,5vw,4.25rem) clamp(1.25rem,5vw,3rem);
  max-width:var(--maxw);
  margin:0 auto;
}
.band-head{max-width:44rem;margin-bottom:clamp(1.6rem,2.6vw,2.2rem);}

/* Reveal-on-scroll — gated on .js so content is always visible without JS */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease), transform .6s var(--ease);}
.js [data-reveal].in-view{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none;}
  .page.is-active{animation:none;}
}

/* ============ Nav ============ */
.topnav{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid transparent;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  transition:border-color .2s ease, background .2s ease;
}
.topnav:has(~ main){border-bottom-color:var(--border);}
.topnav-inner{
  max-width:var(--maxw);margin:0 auto;
  min-height:var(--nav-h);
  display:flex;align-items:center;gap:1rem;
  padding:.65rem clamp(1.25rem,5vw,3rem);
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);flex:none;}
.brand-mark{width:35px;height:35px;flex:none;filter:drop-shadow(0 3px 12px rgba(224,125,11,.5));}
.brand-mark svg{width:100%;height:100%;display:block;}
.brand-word{font-family:var(--font-display);font-weight:600;font-size:1.38rem;letter-spacing:-.03em;color:var(--text);}
.brand-word em{
  font-style:normal;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}

.nav-links{display:flex;align-items:center;gap:.25rem;margin-left:auto;font-size:.93rem;}
.nav-links a{
  color:var(--text-soft);
  padding:.5rem .85rem;border-radius:var(--r-pill);
  font-weight:500;
  transition:color .16s ease, background .16s ease;
}
.nav-links a:hover{color:var(--text);background:var(--surface-2);}
.nav-links a.is-current{color:var(--brand);background:var(--brand-wash);}
.nav-cta{
  background:var(--brand-grad)!important;color:var(--brand-ink)!important;
  font-weight:700!important;
  padding:.58rem 1.15rem!important;
  box-shadow:0 10px 22px -10px rgba(224,125,11,.6);
}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.05);}
.nav-cta.is-current{color:var(--brand-ink)!important;}

.nav-tools{display:flex;align-items:center;gap:.45rem;}
.theme-toggle{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--border-strong);border-radius:var(--r-pill);
  background:var(--surface);color:var(--text-soft);
  cursor:pointer;transition:color .16s, border-color .16s, transform .16s, background .16s;
}
.theme-toggle:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-1px);}
.theme-toggle:active{transform:translateY(0) scale(.94);}
.theme-toggle svg{width:18px;height:18px;}
.icon-sun{display:none;}
.icon-moon{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .icon-sun{display:block;}
  :root:not([data-theme]) .icon-moon{display:none;}
}
:root[data-theme="dark"] .icon-sun{display:block;}
:root[data-theme="dark"] .icon-moon{display:none;}
:root[data-theme="light"] .icon-sun{display:none;}
:root[data-theme="light"] .icon-moon{display:block;}

.nav-toggle{
  display:none;width:38px;height:38px;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-pill);
  cursor:pointer;
}
.nav-toggle span{width:16px;height:2px;background:var(--text);border-radius:2px;}

/* ============ Buttons / pills / chips ============ */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 1.7rem;border-radius:var(--r-pill);
  font-weight:600;font-size:.96rem;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{
  background:var(--brand-grad);
  color:var(--brand-ink);
  box-shadow:var(--glow);
}
.btn-primary:hover{filter:brightness(1.05);box-shadow:0 26px 60px -20px rgba(224,125,11,.55);}
.btn-ghost{background:var(--surface);border-color:var(--border-strong);color:var(--text);}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);}
.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem;}

.pill-grid{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.7rem;}
.pill{
  font-family:var(--font-mono);font-size:.77rem;letter-spacing:.01em;
  background:var(--surface);border:1px solid var(--border);
  padding:.5rem .95rem;border-radius:var(--r-pill);color:var(--text-soft);
  transition:border-color .15s ease, color .15s ease;
}
.pill:hover{border-color:var(--brand-line);color:var(--text);}

.chip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem;}
.chip{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:1.05rem 1.2rem 1.05rem 2.5rem;font-weight:600;font-size:.94rem;color:var(--text);
  position:relative;
  transition:transform .16s var(--ease), border-color .16s ease, box-shadow .16s ease;
}
.chip::before{
  content:"";position:absolute;left:1.15rem;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--brand-grad);
  box-shadow:0 0 0 4px var(--brand-wash);
}
.chip:hover{transform:translateY(-2px);border-color:var(--brand-line);box-shadow:var(--shadow-sm);}

/* ============ Hero ============ */
.hero{
  position:relative;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem) clamp(2rem,5vw,4.5rem);
  align-items:center;
  padding:clamp(2.6rem,6.5vw,5rem) clamp(1.25rem,5vw,3rem) clamp(2.6rem,5vw,4rem);
  max-width:var(--maxw);margin:0 auto;
}
.hero-glow{
  position:absolute;right:-14%;top:-26%;
  width:48rem;height:48rem;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--brand-bright) 22%, transparent), transparent 70%);
  filter:blur(10px);
}
.hero-copy,.hero-art{position:relative;z-index:1;}
.hero-art{position:relative;}

.product-frame{overflow:visible;}
.hero-art .product-frame{padding-bottom:.9rem;}
.hero-float{
  position:absolute;left:-1.4rem;bottom:-1.4rem;z-index:3;
  display:flex;flex-direction:column;gap:.2rem;max-width:13rem;
  padding:.95rem 1.15rem;border-radius:var(--r);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.hero-float-k{
  font-family:var(--font-display);font-size:1.55rem;line-height:1;font-weight:560;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-float-v{font-size:.76rem;color:var(--text-muted);line-height:1.35;}

.hero-mini-stats{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 2.4rem;
  margin-top:clamp(1.6rem,3vw,2.6rem);
  padding-top:clamp(1.4rem,2.4vw,1.9rem);
  border-top:1px solid var(--border);
}
.hero-mini-stats div{display:flex;flex-direction:column;gap:.25rem;}
.hero-mini-stats strong{
  font-family:var(--font-display);font-size:clamp(1.7rem,2.4vw,2.05rem);line-height:1;font-weight:560;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-mini-stats span{font-size:.84rem;color:var(--text-muted);line-height:1.42;max-width:15rem;}

.product-frame{
  position:relative;
  margin:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:.9rem .9rem .75rem;box-shadow:var(--shadow-lg);
}
.product-frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .product-frame::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
}
:root[data-theme="dark"] .product-frame::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.product-frame img{border-radius:calc(var(--r-xl) - 12px);width:100%;height:auto;object-fit:cover;aspect-ratio:20/9;}
.product-frame figcaption{
  font-family:var(--font-mono);font-size:.71rem;color:var(--text-muted);
  margin-top:.7rem;letter-spacing:.01em;
}
.product-frame-wide{max-width:700px;margin:0 auto;transform:none;}

/* ============ Stats band ============ */
.band-stats{padding-top:0;}
.stat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
}
.stat-card{background:var(--surface);padding:1.8rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;transition:background .16s ease;}
.stat-card:hover{background:var(--surface-2);}
.stat-num{
  font-family:var(--font-display);font-size:2.25rem;line-height:1;font-weight:560;
  background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat-label{font-size:.85rem;color:var(--text-soft);line-height:1.5;}

/* ============ Cards / grids ============ */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem;}
.problem-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:1.6rem 1.7rem;
  position:relative;overflow:hidden;
  transition:transform .18s var(--ease), border-color .18s ease, box-shadow .18s ease;
}
.problem-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-grad);opacity:.9;}
.problem-card:hover{transform:translateY(-4px);border-color:var(--brand-line);box-shadow:var(--shadow);}
.problem-card h3{font-size:1.08rem;margin-bottom:.4rem;color:var(--text);}
.problem-card p{font-size:.94rem;margin:0;}

/* ============ CTA band ============ */
.band-cta{
  position:relative;overflow:hidden;
  text-align:center;
  background:
    radial-gradient(38rem 20rem at 16% -12%, rgba(255,214,153,.28), transparent 60%),
    radial-gradient(30rem 20rem at 100% 120%, rgba(0,0,0,.22), transparent 60%),
    linear-gradient(125deg,#c2410c 0%,#9a3110 52%,#6f2410 100%);
  color:#fff;
  border-radius:var(--r-xl);
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(2.8rem,6.5vw,4.4rem) clamp(1.5rem,5vw,3rem);
  box-shadow:var(--glow);
}
.band-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60rem 60rem at 50% -40%, rgba(255,255,255,.12), transparent 55%);
}
.band-cta h2{color:#fff;position:relative;}
.band-cta p{color:rgba(255,255,255,.85);max-width:34rem;margin:0 auto 1.8rem;position:relative;}
.band-cta .btn-primary{background:#fff;color:#9a3110;box-shadow:0 20px 44px -18px rgba(0,0,0,.5);position:relative;}
.band-cta .btn-primary:hover{background:#fff3e6;filter:none;}

/* ============ Page hero (sub-pages) ============ */
.page-hero{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,6.5vw,5rem) clamp(1.25rem,5vw,3rem) .5rem;}
.page-hero .lede{margin-top:.75rem;}

/* ============ Diagrams ============ */
.diagram-wrap{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.6rem clamp(.6rem,2vw,1.7rem);overflow-x:auto;margin-bottom:1.9rem;box-shadow:var(--shadow-sm);
}
.diagram-svg{width:100%;min-width:640px;height:auto;display:block;}
.dgm-links path{stroke:var(--text-muted);}
.dgm-node rect{fill:var(--surface-2);stroke:var(--border-strong);stroke-width:1.4;}
.dgm-cpu rect,.dgm-hub rect{fill:var(--brand-wash);stroke:var(--brand);}
.dgm-mcu rect{fill:color-mix(in srgb, var(--brand-bright) 16%, transparent);stroke:var(--brand-bright);}
.dgm-guard rect{fill:color-mix(in srgb, var(--amber) 15%, transparent);stroke:var(--amber);}
.dgm-io rect{fill:var(--surface-3);stroke:var(--border-strong);}
.dgm-node text{font-family:var(--font-mono);font-size:13px;fill:var(--text);text-anchor:middle;}
.dgm-node .dgm-sub{font-size:10.5px;fill:var(--text-muted);}
.dgm-caption{font-family:var(--font-mono);font-size:10.5px;fill:var(--text-muted);text-anchor:middle;}
.dgm-student rect{fill:var(--surface-2);}
.dgm-student text{text-anchor:start;}

.explain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;}
.explain-grid article{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem 1.6rem;
  transition:transform .18s var(--ease), box-shadow .18s ease, border-color .18s ease;
}
.explain-grid article:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand-line);}
.explain-grid h3{font-size:1rem;margin-bottom:.4rem;color:var(--text);}
.explain-grid p{font-size:.92rem;margin:0;}

.spec-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
}
.spec-card{background:var(--surface);padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;}
.spec-num{
  font-family:var(--font-display);font-size:1.8rem;line-height:1;font-weight:560;
  color:var(--brand-bright);font-variant-numeric:tabular-nums;
}
.spec-label{font-size:.82rem;color:var(--text-soft);}

/* ============ Table ============ */
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);}
.compare-table{border-collapse:collapse;width:100%;min-width:640px;font-size:.92rem;}
.compare-table th,.compare-table td{padding:.95rem 1.2rem;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
.compare-table thead th{
  font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);border-bottom:1.5px solid var(--border-strong);
}
.compare-table th[scope="row"]{font-weight:600;color:var(--text);}
.compare-table tbody tr:last-child td,.compare-table tbody tr:last-child th{border-bottom:none;}
.compare-table tbody tr{transition:background .14s ease;}
.compare-table tbody tr:hover{background:var(--surface-2);}
.col-highlight{background:var(--brand-wash);font-weight:600;color:var(--text);}
thead .col-highlight{color:var(--brand-ink);background:var(--brand-grad);}
.compare-table thead th.col-highlight span{display:block;font-weight:500;text-transform:none;letter-spacing:0;color:color-mix(in srgb, var(--brand-ink) 68%, transparent);}

/* ============ Motivation / market ============ */
.motivation-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2.4rem;align-items:start;}
.motivation-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.8rem 1.9rem;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.motivation-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand-grad);}
.motivation-card h3{font-size:1.14rem;color:var(--text);}

.rank-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem;}
.rank-list li{
  display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.2rem 1.5rem;position:relative;overflow:hidden;
  transition:transform .16s var(--ease), border-color .16s ease;
}
.rank-list li:hover{transform:translateX(3px);border-color:var(--brand-line);}
.rank-num{
  font-family:var(--font-mono);font-size:.85rem;color:var(--brand-ink);font-weight:600;
  background:var(--brand-grad);
  width:2rem;height:2rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.rank-list strong{display:block;margin-bottom:.15rem;color:var(--text);}
.rank-list p{margin:0;font-size:.88rem;}
.rank-bar{position:absolute;left:0;bottom:0;height:3px;background:var(--brand-grad);width:var(--w);}

/* ============ Steps ============ */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;margin-bottom:1.7rem;}
.step-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.7rem;
  transition:transform .18s var(--ease), box-shadow .18s ease, border-color .18s ease;
}
.step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand-line);}
.step-num{
  font-family:var(--font-mono);font-size:.8rem;font-weight:500;letter-spacing:.05em;
  color:var(--amber);
}
.step-card h3{margin-top:.55rem;font-size:1.1rem;color:var(--text);}
.step-card p{font-size:.92rem;margin:0;}

/* ============ Team ============ */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;}
.team-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.7rem;
  transition:transform .18s var(--ease), box-shadow .18s ease, border-color .18s ease;
}
.team-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--brand-line);}
.team-avatar{
  display:flex;align-items:center;justify-content:center;
  width:3.3rem;height:3.3rem;border-radius:var(--r);
  background:var(--brand-grad);color:var(--brand-ink);
  font-family:var(--font-mono);font-weight:700;font-size:.98rem;margin-bottom:1.1rem;
  box-shadow:0 10px 22px -10px rgba(224,125,11,.5);
}
.team-card h3{font-size:1.06rem;margin-bottom:.22rem;color:var(--text);}
.team-role{font-size:.85rem;font-weight:600;color:var(--brand);margin-bottom:.15rem;}
.team-focus{font-size:.82rem;color:var(--text-muted);margin:0;}

/* ============ Contact ============ */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;align-items:start;}
.member-form{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.3rem);display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;
  box-shadow:var(--shadow);
}
.form-row{display:flex;flex-direction:column;gap:.4rem;}
.form-row-wide{grid-column:1/-1;}
.form-row label{font-size:.82rem;font-weight:600;color:var(--text-soft);}
.form-row input,.form-row select,.form-row textarea{
  font-family:var(--font-body);font-size:.95rem;padding:.72rem .9rem;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--bg);color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:var(--ring);background:var(--surface);
}
.form-row textarea{resize:vertical;min-height:6rem;}
.form-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.form-status{font-size:.85rem;color:var(--ok);font-weight:500;}
.form-status.is-error{color:var(--danger);}

.contact-aside{display:flex;flex-direction:column;gap:1rem;}
.aside-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.6rem 1.7rem;}
.aside-card h3{font-size:1rem;margin-bottom:.6rem;color:var(--text);}
.aside-card p{font-size:.92rem;margin:0 0 .35rem;}
.aside-card a{color:var(--brand);font-weight:600;}
.aside-note{font-size:.76rem;color:var(--text-muted);margin-top:.6rem;}

.band-leads{padding-top:0;}
.admin-link{
  background:none;border:none;font-family:var(--font-mono);font-size:.76rem;
  color:var(--text-muted);cursor:pointer;padding:.3rem 0;text-decoration:underline;
  text-underline-offset:3px;
}
.admin-link:hover{color:var(--brand);}
.leads-admin{margin-top:1.4rem;}
.leads-table{width:100%;border-collapse:collapse;min-width:760px;font-size:.86rem;}
.leads-table th,.leads-table td{padding:.72rem .9rem;text-align:left;border-bottom:1px solid var(--border);}
.leads-table thead th{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);}
.leads-empty{padding:1.4rem;color:var(--text-muted);font-size:.9rem;}

/* ============ Footer ============ */
.site-footer{
  border-top:1px solid var(--border);
  padding:3rem clamp(1.25rem,5vw,3rem) 2.6rem;
  max-width:var(--maxw);margin:2.5rem auto 0;
}
.footer-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem;}
.footer-brand{display:flex;align-items:center;gap:.55rem;}
.footer-brand .brand-mark{width:24px;height:24px;}
.footer-brand .brand-word{font-size:1.1rem;font-family:var(--font-display);font-weight:600;letter-spacing:-.028em;}
.footer-brand .brand-word em{font-style:normal;color:var(--brand);}
.footer-tag{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);margin:0;}
.footer-links{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.86rem;margin-bottom:1.5rem;}
.footer-links a{color:var(--text-soft);transition:color .14s ease;}
.footer-links a:hover{color:var(--brand);}
.footer-fine{font-size:.76rem;color:var(--text-muted);margin:0;}
.footer-notes{margin-top:.5rem;}

/* ============ Responsive ============ */
@media (max-width:920px){
  .hero{grid-template-columns:1fr;}
  .hero-art{order:-1;}
  .product-frame{transform:none;}
  .hero-glow{right:-30%;top:-10%;}
  .hero-float{position:static;max-width:none;margin-top:.9rem;flex-direction:row;align-items:baseline;gap:.6rem;}
  .hero-float-v{flex:1;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .card-grid{grid-template-columns:1fr;}
  .explain-grid{grid-template-columns:1fr;}
  .spec-grid{grid-template-columns:repeat(2,1fr);}
  .motivation-grid{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .member-form{grid-template-columns:1fr;}
}

@media (max-width:760px){
  :root{--nav-h:58px;}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    margin-left:0;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    max-height:0;overflow:hidden;
    transition:max-height .28s var(--ease);
  }
  .nav-links.is-open{max-height:380px;}
  .nav-links a{padding:.95rem clamp(1.25rem,5vw,3rem);border-radius:0;border-bottom:1px solid var(--border);}
  .nav-links a.is-current{background:var(--brand-wash);border-left:3px solid var(--brand);}
  .nav-cta{border-radius:0!important;text-align:center;justify-content:center;box-shadow:none;}
  .nav-tools{margin-left:auto;}
  .nav-toggle{display:flex;}
  .topnav-inner{position:relative;flex-wrap:wrap;}
  .stat-grid{grid-template-columns:1fr;}
  .spec-grid{grid-template-columns:1fr;}
  .hero-mini-stats{gap:1.1rem 1.6rem;}
}