/* =========================================================
   NEKO — chrome commune aux sous-pages (/token, /community...)
   Nav accrochee au viewport, hero de page, ossature de section.
   La landing garde sa propre chrome : son hero plein ecran porte
   deja la nav, elle n'a besoin de rien d'ici.
   ========================================================= */

.page-sub{ background:var(--ink); }

/* ---------- nav accrochee au viewport ---------- */
/* la pastille se retire quand on descend et revient quand on remonte :
   fixe en permanence, elle passait sur les titres de section */
.subnav{
  /* top:0 comme la nav de la landing (.ph__nav), sinon la pastille
     flotte a 16px du bord sur les sous-pages et pas sur la home */
  position:fixed; left:50%; top:0; z-index:60;
  transform:translateX(-50%);
  transition:transform .45s var(--ease), opacity .35s var(--ease);
}
.subnav.is-hidden{
  transform:translateX(-50%) translateY(calc(-100% - 8px));
  opacity:0; pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .subnav{ transition:none; } }

/* ---------- 01 hero ---------- */
.thero{
  padding:clamp(140px,22vh,230px) var(--gut) clamp(60px,9vh,110px);
}
.thero__inner{ max-width:1100px; margin:0 auto; }

.thero__eyebrow{
  margin:0 0 20px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--warm);
}
.thero__h{
  margin:0 0 28px;
  font-size:clamp(38px,7vw,86px); line-height:1.02;
  font-weight:700; letter-spacing:-.035em;
}
.thero__h em{ font-style:normal; color:var(--paper-mute); }

.thero__lede{
  margin:0 0 36px; max-width:54ch;
  font-size:clamp(15px,1.4vw,18px); line-height:1.6;
  color:var(--paper-dim);
}
.thero__stat{
  margin:0; display:inline-flex; align-items:baseline; gap:10px;
  padding:14px 24px;
  border:1px solid var(--line); border-radius:999px;
  font-size:clamp(13px,1.15vw,15px); color:var(--paper-dim);
}
.thero__stat b{ font-size:1.5em; font-weight:700; color:var(--paper); letter-spacing:-.02em; }

/* ---------- ossature des sections ---------- */
.tsec{ padding:clamp(64px,11vh,150px) var(--gut); border-top:1px solid var(--line); }
.tsec__inner{ max-width:1100px; margin:0 auto; }

.tsec__num{
  margin:0 0 16px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; color:var(--paper-mute);
}
.tsec__h{
  margin:0 0 12px;
  font-size:clamp(26px,3.6vw,44px); line-height:1.08;
  font-weight:700; letter-spacing:-.025em;
}
.tsec__sub{
  margin:0 0 clamp(36px,6vh,64px); max-width:58ch;
  font-size:clamp(14px,1.2vw,16px); line-height:1.55;
  color:var(--paper-dim);
}


/* ---------- reveal (l'etat cache n'existe que si le JS l'a arme) ---------- */
.tsec.js-reveal .tsec__num,
.tsec.js-reveal .tsec__h,
.tsec.js-reveal .tsec__sub{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.tsec.js-reveal.is-in .tsec__num,
.tsec.js-reveal.is-in .tsec__h,
.tsec.js-reveal.is-in .tsec__sub{ opacity:1; transform:none; }
.tsec.js-reveal.is-in .tsec__h{ transition-delay:.07s; }
.tsec.js-reveal.is-in .tsec__sub{ transition-delay:.14s; }

/* ---------- utilitaire ----------
   Visible des lecteurs d'ecran seulement. Sert aux blocs ou l'animation
   sert une information que le DOM ne raconte pas correctement. */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}