/* ============================================================
   Payout Hub — variant C: loud typography.
   One stylesheet. No external requests, no web fonts, no images.
   Order: tokens -> base -> type -> components -> sections -> a11y
   ============================================================ */

/* ---------- 1. Tokens: light ---------- */
:root{
  color-scheme:light;

  /* surfaces */
  --c-canvas:#fcfcf7;
  --c-surface:#ffffff;
  --c-mint:#e2f6d5;
  --c-mint-2:#f1fbec;
  --c-deep:#0e0f0c;

  /* ink on light */
  --c-ink:#0e0f0c;
  --c-ink-2:#33342f;
  --c-muted:#5f605b;
  --c-gray:#868685;

  /* ink on deep */
  --c-on-deep:#ffffff;
  --c-on-deep-2:#d8dad3;
  --c-on-deep-muted:#a9aba4;

  /* accent */
  --c-lime:#9fe870;
  --c-lime-ink:#163300;
  --c-lime-veil:rgba(159,232,112,.30);
  --c-lime-veil-2:rgba(159,232,112,.14);

  /* lines */
  --c-line:rgba(14,15,12,.13);
  --c-line-2:rgba(14,15,12,.26);
  --c-line-3:rgba(14,15,12,.44);
  --c-deep-line:rgba(255,255,255,.20);
  --c-deep-line-2:rgba(255,255,255,.38);
  --c-deep-node:rgba(255,255,255,.07);
  --c-shade:rgba(14,15,12,.55);

  /* focus */
  --c-focus:#0e0f0c;

  /* elevation: rings only, never blurred */
  --elev-1:0 0 0 1px var(--c-line);
  --elev-2:0 0 0 1px var(--c-line-2),0 4px 0 -1px var(--c-line);
  --elev-3:0 0 0 1px var(--c-line-2),0 0 0 7px var(--c-lime-veil-2);
  --elev-4:0 0 0 1px var(--c-lime-ink),0 0 0 9px var(--c-lime-veil-2);
  --elev-deep:0 0 0 1px var(--c-deep-line),0 0 0 3px rgba(255,255,255,.05);

  /* type stacks — system only */
  --ff-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --ff-mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;

  /* type scale: 9 clamp steps */
  --fs-hero:clamp(1.95rem,calc(1.02rem + 4.35vw),5.6rem);
  --fs-mega:clamp(2.05rem,calc(1.35rem + 3.1vw),4.2rem);
  --fs-h2:clamp(1.7rem,calc(1.15rem + 2.35vw),3.4rem);
  --fs-h3:clamp(1.28rem,calc(1.1rem + .8vw),1.75rem);
  --fs-metric:clamp(1.42rem,calc(1.1rem + 1.05vw),2.6rem);
  --fs-lead:clamp(1.05rem,calc(.96rem + .55vw),1.4rem);
  --fs-body:clamp(.94rem,calc(.9rem + .2vw),1.06rem);
  --fs-meta:clamp(.82rem,calc(.78rem + .16vw),.94rem);
  --fs-label:clamp(.69rem,calc(.66rem + .14vw),.81rem);

  /* rhythm */
  --lh-display:.85;
  --lh-tight:1.02;
  --lh-body:1.62;
  --tr-display:-.045em;
  --tr-tight:-.02em;
  --tr-label:.14em;

  /* space */
  --sp-1:clamp(.5rem,calc(.45rem + .2vw),.75rem);
  --sp-2:clamp(.75rem,calc(.65rem + .4vw),1.15rem);
  --sp-3:clamp(1.1rem,calc(.9rem + .8vw),1.75rem);
  --sp-4:clamp(1.6rem,calc(1.2rem + 1.6vw),3rem);
  --sp-5:clamp(2.4rem,calc(1.6rem + 3vw),5rem);
  --sp-6:clamp(3.4rem,calc(2.2rem + 5vw),7rem);

  /* shape + motion */
  --radius-pill:999px;
  --radius-card:34px;
  --radius-band:40px;
  --radius-md:20px;
  --radius-sm:14px;
  --wrap:1240px;
  --gutter:clamp(1rem,4vw,2rem);
  --ease:cubic-bezier(.2,.72,.28,1);
  --dur:.2s;
}

/* ---------- 2. Tokens: dark (system + manual) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --c-canvas:#0e0f0c;
    --c-surface:#191b14;
    --c-mint:#1e2a15;
    --c-mint-2:#182013;
    --c-deep:#191b14;
    --c-ink:#f4f6ee;
    --c-ink-2:#d2d5cc;
    --c-muted:#a9aba4;
    --c-gray:#9d9f98;
    --c-on-deep:#ffffff;
    --c-on-deep-2:#d8dad3;
    --c-on-deep-muted:#a9aba4;
    --c-line:rgba(255,255,255,.15);
    --c-line-2:rgba(255,255,255,.30);
    --c-line-3:rgba(255,255,255,.48);
    --c-deep-line:rgba(255,255,255,.22);
    --c-deep-line-2:rgba(255,255,255,.40);
    --c-deep-node:rgba(255,255,255,.08);
    --c-shade:rgba(0,0,0,.6);
    --c-focus:#9fe870;
    --elev-1:0 0 0 1px var(--c-line);
    --elev-2:0 0 0 1px var(--c-line-2),0 4px 0 -1px var(--c-line);
    --elev-3:0 0 0 1px var(--c-line-2),0 0 0 7px var(--c-lime-veil-2);
    --elev-4:0 0 0 1px var(--c-lime),0 0 0 9px var(--c-lime-veil-2);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --c-canvas:#0e0f0c;
  --c-surface:#191b14;
  --c-mint:#1e2a15;
  --c-mint-2:#182013;
  --c-deep:#191b14;
  --c-ink:#f4f6ee;
  --c-ink-2:#d2d5cc;
  --c-muted:#a9aba4;
  --c-gray:#9d9f98;
  --c-on-deep:#ffffff;
  --c-on-deep-2:#d8dad3;
  --c-on-deep-muted:#a9aba4;
  --c-line:rgba(255,255,255,.15);
  --c-line-2:rgba(255,255,255,.30);
  --c-line-3:rgba(255,255,255,.48);
  --c-deep-line:rgba(255,255,255,.22);
  --c-deep-line-2:rgba(255,255,255,.40);
  --c-deep-node:rgba(255,255,255,.08);
  --c-shade:rgba(0,0,0,.6);
  --c-focus:#9fe870;
  --elev-1:0 0 0 1px var(--c-line);
  --elev-2:0 0 0 1px var(--c-line-2),0 4px 0 -1px var(--c-line);
  --elev-3:0 0 0 1px var(--c-line-2),0 0 0 7px var(--c-lime-veil-2);
  --elev-4:0 0 0 1px var(--c-lime),0 0 0 9px var(--c-lime-veil-2);
}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--c-canvas);
  color:var(--c-ink);
  font-family:var(--ff-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
a{color:inherit}
:where(h1,h2,h3,h4){margin:0;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0}
svg{display:block}
::selection{background:var(--c-lime);color:var(--c-lime-ink)}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sp-5)}
.sec-lg{padding-block:var(--sp-6)}
.deep{background:var(--c-deep);color:var(--c-on-deep)}
.deep ::selection{background:var(--c-lime);color:var(--c-lime-ink)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:fixed;inset:0 auto auto 0;z-index:200;
  display:inline-flex;align-items:center;min-height:48px;
  padding:0 1.4rem;border-radius:0 0 var(--radius-sm) 0;
  background:var(--c-ink);color:var(--c-canvas);
  font-weight:800;text-decoration:none;
  transform:translateY(-130%);
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.skip:focus-visible{transform:translateY(0)}

/* ---------- 5. Type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--c-lime);color:var(--c-lime-ink);
  border-radius:var(--radius-pill);
  padding:.45rem .9rem;margin:0 0 var(--sp-2);
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--tr-label);text-transform:uppercase;
}
.kicker{
  display:flex;align-items:center;gap:.7rem;margin:0 0 var(--sp-2);
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--tr-label);text-transform:uppercase;
  color:var(--c-muted);
}
.kicker::before{content:"";width:clamp(24px,3vw,44px);height:2px;background:var(--c-lime)}
.deep .kicker{color:var(--c-on-deep-muted)}
.sec-title{font-size:var(--fs-h2);font-weight:900;line-height:.9;letter-spacing:var(--tr-display)}
.sec-title-lg{font-size:var(--fs-mega);font-weight:900;line-height:.88;letter-spacing:var(--tr-display)}
.lead{font-size:var(--fs-lead);color:var(--c-ink-2);max-width:46ch}
.deep .lead{color:var(--c-on-deep-2)}
.nums{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;padding:.95rem 1.7rem;
  border:0;border-radius:var(--radius-pill);
  font-family:inherit;font-size:var(--fs-body);font-weight:800;line-height:1;
  text-decoration:none;cursor:pointer;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn-primary{background:var(--c-lime);color:var(--c-lime-ink);box-shadow:var(--elev-1)}
.btn-primary:hover{transform:scale(1.05)}
.btn-primary:active{transform:scale(.95)}
.btn-ghost{background:transparent;color:var(--c-ink);box-shadow:inset 0 0 0 1.5px var(--c-line-3)}
.btn-ghost:hover{transform:scale(1.05);background:var(--c-mint)}
.btn-ghost:active{transform:scale(.95)}
.deep .btn-ghost{color:var(--c-on-deep);box-shadow:inset 0 0 0 1.5px var(--c-deep-line-2)}
.deep .btn-ghost:hover{background:var(--c-deep-node)}
.btn .ar{width:18px;height:18px;flex:none;transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:hover .ar{transform:translateX(3px)}

/* ---------- 7. Header ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--c-canvas);border-bottom:1px solid var(--c-line)}
.topbar-in{display:flex;align-items:center;gap:var(--sp-2);min-height:78px;padding-block:.55rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;text-decoration:none;flex:none}
.brand-dot{width:14px;height:14px;border-radius:50%;background:var(--c-lime);box-shadow:0 0 0 4px var(--c-lime-veil-2);flex:none}
.brand-name{font-weight:900;font-size:1.1rem;letter-spacing:var(--tr-tight)}
.brand-lang{font-size:var(--fs-label);font-weight:800;letter-spacing:var(--tr-label);color:var(--c-muted);padding-top:.2rem}
.nav{display:none;margin-inline:auto}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;
  border-radius:var(--radius-pill);text-decoration:none;
  font-size:var(--fs-meta);font-weight:700;color:var(--c-ink-2);
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav a:hover{background:var(--c-mint);color:var(--c-ink)}
.tools{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.langs{display:none;gap:.15rem;padding:.2rem;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--c-line)}
.langs a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 .55rem;border-radius:var(--radius-pill);
  font-size:var(--fs-label);font-weight:800;letter-spacing:.06em;text-decoration:none;color:var(--c-muted);
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.langs a:hover{background:var(--c-mint);color:var(--c-ink)}
.langs a[aria-current="true"]{background:var(--c-ink);color:var(--c-canvas)}
.theme{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;
  border:0;border-radius:50%;background:transparent;color:var(--c-ink);
  box-shadow:inset 0 0 0 1.5px var(--c-line-2);cursor:pointer;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.theme:hover{transform:scale(1.05);background:var(--c-mint)}
.theme:active{transform:scale(.95)}
.theme .ic{width:20px;height:20px}
.theme .ic-moon{display:none}
:root[data-theme="dark"] .theme .ic-sun{display:none}
:root[data-theme="dark"] .theme .ic-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme .ic-sun{display:none}
  :root:not([data-theme="light"]) .theme .ic-moon{display:block}
}
@media (min-width:900px){.nav{display:flex;gap:.1rem}}
@media (min-width:700px){.langs{display:flex}}

/* ---------- 8. Hero ---------- */
.hero{padding-block:var(--sp-5) var(--sp-4);overflow:hidden}
.hero-grid{display:grid;gap:var(--sp-4);align-items:center}
.hero h1{
  font-size:var(--fs-hero);font-weight:900;
  line-height:var(--lh-display);letter-spacing:var(--tr-display);
  margin:0 0 var(--sp-2);
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--sp-3)}
.hero-art{
  position:relative;width:100%;max-width:720px;justify-self:center;
  align-self:stretch;display:grid;place-items:center;min-width:0;
}
.art{width:100%;height:auto;max-height:100%}
.a-orbit{fill:none;stroke:var(--c-line-2);stroke-width:1.5;stroke-dasharray:2 11;stroke-linecap:round}
.a-arc{fill:none;stroke:var(--c-lime);stroke-width:5;stroke-linecap:round}
.a-arc-2{stroke:var(--c-ink);stroke-width:2;stroke-dasharray:3 9}
.a-disc{fill:var(--c-lime)}
.a-pct{fill:var(--c-lime-ink);font-family:var(--ff-sans);font-size:186px;font-weight:900;letter-spacing:-.07em}
.a-node circle{fill:var(--c-surface);stroke:var(--c-line-2);stroke-width:2}
.a-node text{fill:var(--c-ink);font-family:var(--ff-sans);font-size:22px;font-weight:900;text-anchor:middle}
.a-node-hot circle{fill:var(--c-ink);stroke:var(--c-ink)}
.a-node-hot text{fill:var(--c-canvas)}
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3)}
}

/* ---------- 9. Metrics strip ---------- */
.strip{background:var(--c-mint);border-block:1px solid var(--c-line)}
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);padding-block:var(--sp-4)}
.metric{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.metric + .metric{padding-left:var(--sp-3);border-left:1px solid var(--c-line-2)}
.metric-v{
  display:block;font-size:var(--fs-metric);font-weight:900;
  line-height:.92;letter-spacing:var(--tr-display);
  font-variant-numeric:tabular-nums;
  overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;
}
.metric-l{font-size:var(--fs-meta);color:var(--c-ink-2);font-weight:600;max-width:18ch}
@media (max-width:559px){
  .metric:nth-child(3){padding-left:0;border-left:0}
}
@media (min-width:860px){.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- 9b. Section index rail ---------- */
.rail{border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.rail-list{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.rail-item{min-width:0;border-top:1px solid var(--c-line)}
.rail-item:first-child{border-top:0}
.rail-link{
  display:flex;align-items:center;gap:var(--sp-2);
  min-height:64px;padding:var(--sp-2) var(--sp-1);
  text-decoration:none;color:var(--c-ink);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.rail-link:hover{background:var(--c-mint)}
.rail-n{
  flex:none;font-size:var(--fs-h3);font-weight:900;line-height:.8;
  letter-spacing:var(--tr-display);color:var(--c-ink);
  font-variant-numeric:tabular-nums;
}
.rail-l{
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--c-muted);
  overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;
}
@media (min-width:820px){
  .rail-list{grid-template-columns:repeat(5,minmax(0,1fr))}
  .rail-item{border-top:0;border-left:1px solid var(--c-line)}
  .rail-item:first-child{border-left:0}
  .rail-link{
    flex-direction:column;align-items:flex-start;justify-content:space-between;
    gap:var(--sp-3);min-height:clamp(140px,12vw,176px);padding:var(--sp-3) var(--sp-2);
  }
  .rail-n{font-size:var(--fs-h2)}
}

/* ---------- 10. About ---------- */
.about{display:grid;gap:var(--sp-3)}
.prose{max-width:66ch}
.prose p{font-size:var(--fs-lead);color:var(--c-ink-2);line-height:1.5}
.prose p + p{font-size:var(--fs-body);color:var(--c-muted);line-height:var(--lh-body);max-width:60ch}
.deep .prose p{color:var(--c-on-deep-2)}
.deep .prose p + p{color:var(--c-on-deep-muted)}
@media (min-width:900px){
  .about{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-5);align-items:start}
  .about .sec-head{position:sticky;top:calc(78px + var(--sp-2))}
}

/* ---------- 11. Process ---------- */
.steps{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
.step{border-top:2px solid var(--c-line-2);padding-top:var(--sp-2);min-width:0}
.step-n{
  display:block;font-size:var(--fs-mega);font-weight:900;line-height:.78;
  letter-spacing:var(--tr-display);color:var(--c-gray);
  font-variant-numeric:tabular-nums;margin-bottom:var(--sp-2);
}
.step-t{font-size:var(--fs-h3);font-weight:800;letter-spacing:var(--tr-tight);margin:0 0 .5rem;line-height:1.1}
.step-d{margin:0;font-size:var(--fs-meta);color:var(--c-muted);line-height:1.55}
@media (min-width:820px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- 12. Program cards ---------- */
.cards{display:grid;gap:var(--sp-2);margin-top:var(--sp-4)}
.card{
  display:flex;flex-direction:column;gap:.7rem;
  background:var(--c-surface);border-radius:var(--radius-card);
  padding:var(--sp-3);box-shadow:var(--elev-1);
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--elev-3);background:var(--c-mint-2)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.card-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:32px;padding:0 .6rem;border-radius:var(--radius-pill);
  background:var(--c-lime);color:var(--c-lime-ink);
  font-size:var(--fs-label);font-weight:900;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.card h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:var(--tr-tight);line-height:1.1}
.card p{font-size:var(--fs-meta);color:var(--c-ink-2);line-height:1.6}
@media (min-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 13. Tree ---------- */
.tree-grid{display:grid;gap:var(--sp-4);align-items:center;margin-top:var(--sp-4)}
.tree-fig{margin:0;min-width:0}
.tree-svg{width:100%;height:auto}
.t-edge{fill:none;stroke:var(--c-deep-line);stroke-width:2;stroke-linecap:round}
.t-edge-hot{fill:none;stroke:var(--c-lime);stroke-width:3;stroke-linecap:round}
.t-node{fill:var(--c-deep-node);stroke:var(--c-deep-line);stroke-width:1.5}
.t-node-hot{fill:var(--c-lime);stroke:var(--c-lime)}
.t-num{fill:var(--c-on-deep);font-family:var(--ff-sans);font-size:19px;font-weight:900;text-anchor:middle;letter-spacing:.02em}
.t-num-hot{fill:var(--c-lime-ink)}
.t-sub{fill:var(--c-on-deep-muted);font-family:var(--ff-sans);font-size:11px;font-weight:700;text-anchor:middle;letter-spacing:.1em}
.t-dot{fill:var(--c-lime)}
.t-legend{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;margin:var(--sp-2) 0 0;padding:0;list-style:none;font-size:var(--fs-meta);color:var(--c-on-deep-2)}
.t-legend li{display:flex;align-items:center;gap:.5rem}
.t-legend i{width:10px;height:10px;border-radius:50%;background:var(--c-lime);flex:none}
.t-legend i.dim{background:transparent;box-shadow:inset 0 0 0 2px var(--c-deep-line-2)}
.tree-cap{margin-top:var(--sp-2);font-size:var(--fs-meta);color:var(--c-on-deep-muted);max-width:44ch}
@media (min-width:900px){
  .tree-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--sp-5)}
}

/* ---------- 14. FAQ ---------- */
.faq{display:grid;gap:.6rem;margin-top:var(--sp-4);max-width:920px}
.faq details{
  background:var(--c-surface);border-radius:var(--radius-md);
  box-shadow:var(--elev-1);overflow:hidden;
}
.faq details[open]{box-shadow:var(--elev-3)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:64px;padding:1rem 1.3rem;cursor:pointer;
  font-size:var(--fs-body);font-weight:800;line-height:1.35;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq .ans{padding:0 1.3rem 1.2rem;color:var(--c-ink-2);font-size:var(--fs-meta);line-height:1.6;max-width:70ch}

/* ---------- 15. CTA band ---------- */
.cta-band{
  background:var(--c-deep);color:var(--c-on-deep);
  border-radius:var(--radius-band);
  padding:var(--sp-4);
  display:grid;gap:var(--sp-3);align-items:center;
  box-shadow:var(--elev-deep);
}
.cta-band h2{font-size:var(--fs-mega);font-weight:900;line-height:.86;letter-spacing:var(--tr-display);margin:0 0 .6rem}
.cta-band p{margin:0;color:var(--c-on-deep-2);font-size:var(--fs-meta);max-width:44ch}
@media (min-width:860px){
  .cta-band{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4);padding:var(--sp-5)}
}

/* ---------- 16. Footer ---------- */
.foot{padding-block:var(--sp-4) var(--sp-3);border-top:1px solid var(--c-line);margin-top:var(--sp-5)}
.foot-grid{display:grid;gap:var(--sp-3)}
.foot-brand{display:flex;align-items:center;gap:.6rem;font-weight:900;font-size:var(--fs-h3);letter-spacing:var(--tr-tight);margin:0 0 .5rem}
.disclaimer{font-size:var(--fs-meta);color:var(--c-muted);max-width:48ch;margin:0}
.foot-langs{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0}
.foot-langs a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .95rem;
  border-radius:var(--radius-pill);text-decoration:none;
  font-size:var(--fs-meta);font-weight:700;color:var(--c-ink-2);
  box-shadow:inset 0 0 0 1px var(--c-line);
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.foot-langs a:hover{background:var(--c-mint);color:var(--c-ink)}
.foot-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:var(--sp-3);padding-top:var(--sp-2);border-top:1px solid var(--c-line);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
@media (min-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr) auto;align-items:start}}

/* ---------- 17. Root (language selector) ---------- */
.root-hero{padding-block:var(--sp-6) var(--sp-5)}
.root-hero h1{font-size:var(--fs-hero);font-weight:900;line-height:var(--lh-display);letter-spacing:var(--tr-display);margin:0 0 var(--sp-2);hyphens:auto}
.root-sub{font-size:var(--fs-lead);color:var(--c-ink-2);max-width:44ch;margin:0}
.lang-grid{display:grid;gap:var(--sp-2);margin-top:var(--sp-5)}
.lang-card{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  min-height:132px;padding:var(--sp-3);
  background:var(--c-surface);border-radius:var(--radius-card);
  box-shadow:var(--elev-1);text-decoration:none;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.lang-card:hover{transform:translateY(-4px);box-shadow:var(--elev-3);background:var(--c-mint-2)}
.lang-card b{display:block;font-size:var(--fs-h2);font-weight:900;line-height:.92;letter-spacing:var(--tr-display)}
.lang-card span{display:block;margin-top:.45rem;font-size:var(--fs-meta);color:var(--c-muted)}
.lang-card .ar{width:26px;height:26px;flex:none;color:var(--c-lime-ink)}
.lang-card .badge{
  display:inline-flex;align-items:center;height:26px;padding:0 .6rem;margin-bottom:.7rem;
  border-radius:var(--radius-pill);background:var(--c-mint);color:var(--c-ink);
  font-size:var(--fs-label);font-weight:900;letter-spacing:.1em;
}
@media (min-width:820px){.lang-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- 18. 404 ---------- */
.err{padding-block:var(--sp-6) var(--sp-5);display:grid;gap:var(--sp-3);align-items:center}
.err-code{font-size:var(--fs-hero);font-weight:900;line-height:.82;letter-spacing:var(--tr-display);color:var(--c-lime-ink);margin:0;font-variant-numeric:tabular-nums}
.err h1{font-size:var(--fs-h2);font-weight:900;line-height:.95;letter-spacing:var(--tr-tight);margin:0 0 var(--sp-1)}
.err p{color:var(--c-muted);max-width:46ch;margin:0}
@media (min-width:820px){.err{grid-template-columns:auto minmax(0,1fr);gap:var(--sp-5)}}

/* ---------- 19. Accessibility ---------- */
:where(a,button,summary):focus-visible{outline:3px solid var(--c-focus);outline-offset:3px}
.deep :where(a,button,summary):focus-visible{outline-color:var(--c-lime)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
  html{scroll-behavior:auto}
  .btn:hover,.btn:active,.card:hover,.lang-card:hover,.theme:hover,.theme:active,.btn:hover .ar{transform:none !important}
}