/* ==========================================================================
   PONKEI — one-pager memecoin site (Robinhood Chain)
   Rouge dynastie + touches de vert fluo Robinhood.
   ========================================================================== */

/* Polices chargees depuis Google Fonts dans index.html :
   Luckiest Guy (titres) · Chewy (corps) · ZCOOL KuaiLe (secours CJK).
   Les trois sont mono-graisse -> on bloque la synthese de gras plus bas. */

:root{
  /* rouge dynastie — fond du site */
  --red:         #d81f26;
  --red-deep:    #8c0f16;
  --red-mid:     #f24a50;
  --red-soft:    #ffbfae;
  /* vert fluo Robinhood Chain — reserve aux accents (hover, CTA, chiffres) */
  --rh-green:    #c6ff00;
  --gold:        #ffd447;
  --ink:         #0d0d0d;
  --text:        #2a1416;
  --cream:       #fff4e6;
  --white:       #ffffff;
  --shadow:      0 5px 0 var(--ink);
  --shadow-lg:   0 10px 0 var(--ink);
  /* carré arrondi partout — plus de pilules. Les cercles vrais (logo, puces,
     flèches du carrousel) gardent leur border-radius:50% en dur. */
  --radius-sm:   12px;
  --radius:      18px;
  --radius-lg:   28px;
  --border:      4px solid var(--ink);
  --border-mid:  5px solid var(--ink);
  --border-thick:6px solid var(--ink);
  --band:        7px;                 /* épaisseur des bandeaux pleine largeur */
  --font-body:   "Chewy", "ZCOOL KuaiLe", "Comic Sans MS", system-ui, sans-serif;
  --font-display:"Luckiest Guy", "ZCOOL KuaiLe", "Comic Sans MS", system-ui, sans-serif;
  --wrap:        1250px;
  --nav-h:       92px;
}

/* barre de défilement aux couleurs du site */
html{scrollbar-color:var(--rh-green) var(--ink);scrollbar-width:auto}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--rh-green);border:3px solid var(--ink);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust:100%;
  /* les banderoles inclinées débordent volontairement de 12% : on coupe au
     niveau du document pour qu'aucune barre de scroll horizontale n'apparaisse.
     `clip` (et pas `hidden`) préserve la navbar en position:fixed. */
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--red);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  letter-spacing:.012em;
  overflow-x:hidden;
  /* Chewy et Luckiest Guy n'existent qu'en une seule graisse — on empêche le
     navigateur de simuler gras/italique, ce qui baverait les contours */
  font-synthesis:none;
}

/* polices mono-graisse : l'emphase passe par la couleur, pas par le poids */
strong,b{font-weight:400;color:var(--ink)}

img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}

.wrap{width:min(100% - 40px, var(--wrap));margin-inline:auto}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ─────────────────────────  BUTTONS  ───────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--white);color:var(--ink);
  border:var(--border);border-radius:999px;
  font-family:var(--font-display);font-size:15px;letter-spacing:.05em;
  padding:13px 20px 10px;white-space:nowrap;cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, background .18s ease;
}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.btn--sm{padding:11px 18px 8px;font-size:14px;border-radius:999px;box-shadow:0 4px 0 var(--ink)}
.btn--lg{padding:17px 34px 13px;font-size:18px;box-shadow:var(--shadow-lg)}
.btn--yellow{background:var(--gold)}
.btn--yellow:hover{background:#ffc400}
/* CTA principal : le vert fluo Robinhood */
.btn--green{background:var(--rh-green);color:var(--ink)}
.btn--green:hover{background:#b2e600}

/* ─────────────────────────  BRAND  ───────────────────────── */

.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand__mark{
  width:42px;height:42px;border-radius:50%;object-fit:cover;
  border:var(--border);
}
.brand__name{
  font-family:var(--font-display);
  font-size:26px;line-height:1;color:var(--ink);letter-spacing:.03em;
}
.brand--lg .brand__mark{width:92px;height:92px;border-width:6px}
.brand--lg .brand__name{font-size:48px}

/* ─────────────────────────  NAVBAR  ───────────────────────── */

.nav{
  position:fixed;inset:14px 0 auto;z-index:100;
  display:flex;justify-content:center;pointer-events:none;
}
.nav__pill{
  pointer-events:auto;
  display:flex;align-items:center;gap:22px;
  width:min(100% - 24px, 1230px);
  background:var(--white);
  /* seule exception au « carré arrondi » : la navbar est une vraie pilule */
  border:var(--border);border-radius:999px;
  box-shadow:var(--shadow);
  padding:9px 18px;
  transition:box-shadow .2s ease;
}
.nav.is-stuck .nav__pill{box-shadow:0 6px 0 rgba(13,13,13,.85)}

/* liens centrés dans la pilule, plus gros, et vert fluo au survol */
.nav__links{display:flex;align-items:center;gap:10px;margin-inline:auto}
.nav__links .btn--sm{font-size:16px;padding:13px 22px 10px;line-height:1.15}
.nav__links .btn:hover{background:var(--rh-green)}
.nav__right{display:flex;align-items:center;gap:10px;margin-left:auto}

.socials{display:flex;gap:8px;margin-right:4px}
.social{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;border:var(--border);
  box-shadow:0 4px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.social:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.social svg{width:21px;height:21px;fill:var(--white)}
.social--tg{background:#2aabee}
.social--x{background:var(--ink)}

.nav__burger{
  display:none;flex-direction:column;gap:4px;
  width:44px;height:40px;border:var(--border);border-radius:var(--radius-sm);
  background:var(--white);box-shadow:0 4px 0 var(--ink);cursor:pointer;
  align-items:center;justify-content:center;padding:0;
}
.nav__burger span{width:18px;height:2.5px;background:var(--ink);border-radius:2px;transition:.2s}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ─────────────────────────  HERO  ───────────────────────── */

.hero{
  position:relative;
  background:var(--red);
  overflow:hidden;
  padding:calc(var(--nav-h) + 6px) 0 0;
}
/* rayons de soleil levant — clin d'œil aux affiches chinoises.
   Deux jeux de rayons décalés alternent : effet "jackpot" sans jamais
   toucher au rouge du fond. 1.1s par cycle = 0.9 Hz, très en dessous des
   3 Hz au-delà desquels un clignotement devient un risque d'accessibilité. */
.hero::before,
.hero::after{
  content:"";position:absolute;inset:-30% -25% auto;height:170%;z-index:0;
  pointer-events:none;
}
.hero::before{
  background:repeating-conic-gradient(from 0deg at 50% 20%,
             rgba(255,255,255,.085) 0deg 6deg, transparent 6deg 13deg);
  animation:jackpot-a 1.1s steps(1,end) infinite;
}
.hero::after{
  background:repeating-conic-gradient(from 6.5deg at 50% 20%,
             rgba(255,212,71,.10) 0deg 6deg, transparent 6deg 13deg);
  animation:jackpot-b 1.1s steps(1,end) infinite;
}
@keyframes jackpot-a{0%,49.99%{opacity:1}50%,100%{opacity:0}}
@keyframes jackpot-b{0%,49.99%{opacity:0}50%,100%{opacity:1}}
.hero__inner{
  position:relative;z-index:1;
  width:min(100% - 40px, var(--wrap));
  margin-inline:auto;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:20px;
  min-height:min(58svh, 560px);
}
.hero__copy{display:grid;gap:22px;justify-items:start}

.hero__badge{
  display:inline-flex;align-items:center;
  background:var(--ink);color:var(--rh-green);
  font-family:var(--font-display);
  font-size:clamp(12px, 1.35vw, 16px);letter-spacing:.16em;line-height:1;
  border:3px solid var(--ink);border-radius:999px;
  box-shadow:0 4px 0 rgba(0,0,0,.4);
  padding:10px 20px 7px;
  rotate:-1.6deg;
}

.hero__title{
  font-family:var(--font-display);
  font-size:clamp(64px, 12vw, 150px);
  line-height:.95;color:var(--cream);
  letter-spacing:.01em;
  text-shadow:5px 6px 0 var(--ink);
}
.hero__sub{
  font-size:clamp(16px, 1.7vw, 20px);
  line-height:1.5;max-width:32ch;color:var(--cream);
}
.hero__sub strong{color:var(--rh-green)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* les visuels sont des JPG pleins (pas des PNG détourés) : on les encadre
   comme des stickers — bordure noire épaisse, ombre dure, léger pivot.
   `max-width:none` annule le garde-fou global sur <img>. */
.hero__char{
  width:min(100%, 560px);max-width:none;
  justify-self:end;align-self:center;
  margin-bottom:clamp(16px, 3vw, 44px);
  border:var(--border-thick);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  rotate:2deg;
}

/* parallax uses the standalone `translate` property so it never fights
   with `transform` (float animation / reveal) */
.parallax{
  translate:var(--px,0px) var(--py,0px);
  transition:translate .28s cubic-bezier(.22,.75,.28,1);
  will-change:translate;
}

/* ─────────────────────────  SOCIAL BAR  ───────────────────────── */

/* hero + barre sociale = exactement un ecran sur desktop :
   la barre d'icones vient se caler sur le bas du viewport. */
.firstview{display:flex;flex-direction:column;min-height:100svh}
.firstview .hero{flex:1 1 auto}
.firstview .socialbar{flex:0 0 auto}

.socialbar{
  background:var(--red-deep);
  border-block:var(--band) solid var(--ink);
  padding:16px 20px;
  position:relative;z-index:6;
}
.socialbar__list{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(14px, 3vw, 34px);
}
.socialbar__list img{
  width:clamp(55px, 7vw, 70px);height:auto;
  transition:transform .16s ease;
}
.socialbar__list a:hover img{transform:translateY(-4px) scale(1.06)}

/* ─────────────────────────  MARQUEE  ───────────────────────── */

/* Bandeau porteur : la banderole étant inclinée, sa rotation libère deux
   triangles qui laissaient voir le fond du body — une bande rouge vif entre
   deux sections foncées. Le wrapper porte donc un dégradé dur qui reprend
   exactement la couleur de la section du dessus et celle du dessous ; la
   ligne de raccord à 50% est toujours masquée par la banderole elle-même. */
.band{position:relative}
.band--to-deep{background:linear-gradient(var(--red) 50%, var(--red-deep) 50%)}
.band--to-red{background:linear-gradient(var(--red-deep) 50%, var(--red) 50%)}

.marquee{
  position:relative;
  background:var(--white);
  border-block:5px solid var(--ink);   /* banderole : plus fine que les bandeaux pleins, sans être maigre */
  padding:13px 0;
  overflow:hidden;
  rotate:-2.2deg;
  width:112%;margin-left:-6%;
  z-index:5;
}
.marquee--rev{rotate:2.2deg}
/* fond blanc pour les deux variantes — on ne différencie plus que par la couleur du texte */
.marquee--deep span{color:var(--red-deep)}

/* La piste contient 4 groupes STRICTEMENT identiques et se translate de -50%,
   soit exactement 2 groupes : au bouclage le groupe 3 se retrouve à la place du
   groupe 1 → raccord invisible. Les 4 groupes garantissent aussi que la piste
   reste plus large que l'écran (y compris en 4K) : plus de blanc en fin de course. */
.marquee__track{display:flex;width:max-content;animation:slide 26s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse}
/* le défilement ne s'interrompt jamais, même au survol */
.marquee__group{display:flex;align-items:center;gap:18px;padding-right:18px;flex:none}
.marquee span{
  font-family:var(--font-display);
  font-size:clamp(22px, 2.6vw, 38px);
  line-height:1.2;color:var(--ink);letter-spacing:.03em;
  white-space:nowrap;
}
.marquee i{font-style:normal;font-size:clamp(13px,1.4vw,19px);color:var(--rh-green);-webkit-text-stroke:1.5px var(--ink)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ─────────────────────────  ABOUT  ───────────────────────── */

.about{padding:80px 0 90px;background:var(--red)}
.about__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;gap:clamp(24px, 4vw, 56px);
}
.about__char{
  width:min(100%, 520px);max-width:none;
  justify-self:center;
  border:var(--border-thick);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  rotate:-2.2deg;
}
.about__card{
  background:var(--white);
  border:var(--border-mid);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:clamp(30px, 4vw, 50px);
  rotate:1.4deg;
  display:grid;gap:16px;
}
.about__title{
  font-family:var(--font-display);
  font-size:clamp(28px, 3.4vw, 42px);
  line-height:1.15;color:var(--ink);letter-spacing:.02em;
}
.about__card p{font-size:clamp(15px,1.5vw,17px);line-height:1.6}

/* Contract */
/* un peu d'air sous la boîte du contrat avant la fin de la section */
.ca{position:relative;margin-top:56px;margin-bottom:clamp(30px,4vw,60px);display:grid;justify-items:center;gap:10px}
.ca__label{font-family:var(--font-display);font-size:14px;letter-spacing:.18em;color:var(--cream)}
.ca__box{
  display:flex;align-items:center;gap:10px;
  background:var(--white);border:var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:8px 8px 8px 22px;
  max-width:100%;
}
/* le CA en Chewy comme le reste du corps de page, volontairement gros :
   c'est l'information que tout le monde vient chercher en premier */
.ca__addr{
  font-family:var(--font-body);
  font-size:clamp(17px,2vw,23px);letter-spacing:.03em;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(68vw,560px);
}
/* le bouton COPY passe au vert fluo au survol, comme les liens du menu */
.ca__copy:hover{background:var(--rh-green)}
.ca__toast{
  position:absolute;top:-30px;
  background:var(--ink);color:var(--rh-green);
  font-family:var(--font-display);font-size:18px;letter-spacing:.05em;
  padding:8px 18px 5px;border-radius:var(--radius);
  opacity:0;translate:0 8px;pointer-events:none;transition:.22s ease;
}
.ca__toast.is-on{opacity:1;translate:0 0}

/* ─────────────────────────  HOW TO BUY  ───────────────────────── */

.how{background:var(--red-deep);padding:clamp(90px,8vw,125px) 0 clamp(80px,7vw,110px);position:relative;overflow:hidden}
/* le contenu reste centré dans le wrap comme partout ailleurs ;
   le visuel vit dans la gouttière droite de la fenêtre. Il est encadré comme
   un sticker : il doit rester ENTIÈREMENT visible, jamais rogné par le bord
   de la fenêtre ni recouvert par une carte — d'où la largeur contenue et la
   marge droite positive. */
.how .wrap{position:relative;z-index:1}
.how__char{
  flex:0 0 auto;
  width:clamp(250px, 28vw, 400px);height:auto;
  border:var(--border-thick);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  rotate:3deg;
  user-select:none;
}

/* cartes un peu plus compactes, mais toujours centrées dans le wrap :
   ça laisse respirer le visuel qui passe derrière, sans décaler le bloc */
.steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,30px);
  max-width:1080px;margin-inline:auto;
}
@media (max-width:900px){.steps{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:60px}}
.step{
  position:relative;
  background:var(--white);border:var(--border-mid);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:38px 26px 28px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.step__icon{
  display:block;width:clamp(46px,5.2vw,58px);height:auto;
  margin:0 0 14px;color:var(--ink);
}
.step--a{rotate:-2deg}
.step--b{rotate:1.4deg}
.step--c{rotate:-1.2deg}
.step:hover{rotate:0deg;transform:translateY(-4px);box-shadow:0 12px 0 var(--ink)}
.step__n{
  position:absolute;top:-20px;left:22px;
  font-family:var(--font-display);font-size:24px;
  background:var(--rh-green);border:var(--border);border-radius:var(--radius-sm);
  padding:5px 16px 2px;color:var(--ink);
}
.step h3{font-family:var(--font-display);font-size:clamp(20px,2.2vw,26px);line-height:1.2;margin-bottom:12px;color:var(--ink);letter-spacing:.02em}
.step p{
  font-family:var(--font-body);
  font-size:16px;line-height:1.55;letter-spacing:.01em;
}
.step a{text-decoration:underline;text-underline-offset:3px}

.how__cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;position:relative;z-index:1}
/* pied de section : les CTA d'un cote, le visuel de l'autre. Tout est dans
   le flux, donc l'image ne peut plus recouvrir une carte ni sortir du cadre. */
.how__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,64px);margin-top:clamp(48px,5vw,70px);
}
.how__foot .how__cta{flex:1 1 auto}

/* ─────────────────────────  TOKENOMICS  ───────────────────────── */

.tokenomics{
  background:var(--red);
  padding:clamp(90px,8vw,125px) 0 clamp(100px,9vw,135px);
  position:relative;overflow:hidden;
}
/* fond : Ponkei plante son drapeau sur la Lune, sous un voile rouge
   assez dense pour que les cartes de stats restent lisibles */
.tokenomics::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(140,15,22,.72), rgba(216,31,38,.66)),
    url("../img/bg-moon.jpg") center/cover no-repeat;
}
.tokenomics > .wrap{position:relative;z-index:1}

/* colonne des stats : simple conteneur, la liste occupe toute la largeur */
.tk__col{display:flex;flex-direction:column;min-width:0}
.tk__col .tk{width:100%}

.tokenomics__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;gap:clamp(24px,4vw,60px);
}
.tk__char{
  width:min(100%, 620px);max-width:none;justify-self:center;
  border:var(--border-thick);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  rotate:-2deg;
}

.tk{display:grid;gap:clamp(18px,2.2vw,24px);min-width:0}
.tk__row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--white);border:var(--border-mid);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(12px,1.6vw,18px) clamp(22px,3vw,38px);
  margin-left:auto;width:100%;
  transition:transform .16s ease, box-shadow .16s ease;
}
.tk__row:nth-child(2){width:94%}
.tk__row:nth-child(3){width:88%}
.tk__row:nth-child(4){width:82%}
.tk__row:nth-child(5){width:76%}
/* `translate` et non `transform` : .reveal.is-in force transform:none et
   écraserait le décalage au survol */
.tk__row:hover{translate:0 3px;box-shadow:0 1px 0 var(--ink)}
/* les lignes montent une par une (le retard est calculé dans main.js
   à partir de data-stagger sur la liste) */
.js .tk .reveal{transform:translateY(48px)}
/* la ligne mise en avant : noir + chiffre vert fluo Robinhood */
.tk__row--fill{background:var(--ink)}
.tk__row--fill .tk__k{color:var(--cream)}
.tk__row--fill .tk__v{color:var(--rh-green)}
.tk__k{
  font-family:var(--font-display);
  font-size:clamp(18px,2.2vw,28px);line-height:1.2;color:var(--ink);
  letter-spacing:.03em;
}
.tk__v{font-size:clamp(14px,1.7vw,20px);color:var(--text);text-align:right;overflow-wrap:anywhere}
/* la ligne CA porte une adresse de 42 caracteres : on lui rend toute la
   largeur et on l'empile, pour qu'elle se lise d'un bloc et jamais coupee */
.tk__row--ca{flex-direction:column;align-items:flex-start;gap:4px;width:100%}
.tk__row--ca .tk__v{
  text-align:left;width:100%;
  font-size:clamp(12px,1.3vw,16px);letter-spacing:.01em;
}

/* ─────────────────────────  MEMES CAROUSEL  ───────────────────────── */

.memes{padding:100px 0 120px;background:var(--red-deep);overflow:hidden}

.h-title{
  font-family:var(--font-display);
  font-size:clamp(38px, 7vw, 78px);
  line-height:1.1;text-align:center;color:var(--cream);
  letter-spacing:.02em;
  text-shadow:4px 5px 0 var(--ink);
  margin-bottom:50px;
}

.carousel{position:relative;padding:0 0 54px}
.carousel__stage{
  position:relative;
  height:clamp(360px, 46vw, 520px);
  display:grid;place-items:center;
  touch-action:pan-y;cursor:grab;
}
.carousel__stage:active{cursor:grabbing}

.slide{
  position:absolute;top:50%;left:50%;margin:0;
  width:clamp(300px, 34vw, 450px);
  height:clamp(300px, 34vw, 450px);
  border:var(--border-thick);border-radius:var(--radius);
  overflow:hidden;background:var(--red-soft);
  box-shadow:0 12px 26px rgba(0,0,0,.35);
  transition:transform .55s cubic-bezier(.22,.75,.28,1), filter .55s ease, opacity .45s ease;
  will-change:transform;
}
.slide img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.slide.is-active{z-index:6}

.carousel__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:20;
  width:50px;height:50px;border-radius:50%;
  background:var(--white);border:var(--border);box-shadow:0 4px 0 var(--ink);
  font-size:26px;line-height:1;color:var(--ink);cursor:pointer;
  display:grid;place-items:center;padding:0 0 4px;
  transition:transform .12s ease, box-shadow .12s ease, background .18s ease;
}
.carousel__nav:hover{transform:translateY(2px) translateY(-50%);box-shadow:0 1px 0 var(--ink);background:var(--rh-green)}
.carousel__nav--prev{left:0}
.carousel__nav--next{right:0}

.carousel__dots{position:absolute;bottom:6px;left:50%;translate:-50% 0;display:flex;gap:9px}
.carousel__dots button{
  width:13px;height:13px;padding:0;border-radius:50%;cursor:pointer;
  border:3px solid var(--ink);background:transparent;transition:.2s;
}
.carousel__dots button[aria-selected="true"]{background:var(--rh-green);transform:scale(1.25)}

/* ─────────────────────────  FOOTER  ───────────────────────── */

.footer{background:var(--red);padding:80px 0 0;text-align:center;position:relative;overflow:hidden}
.footer .wrap{display:grid;place-items:center;gap:24px;position:relative;z-index:1;padding-bottom:clamp(70px,10vw,150px)}
.footer__disc{max-width:760px;font-size:14px;line-height:1.55;color:var(--cream)}
.footer__nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* boutons du footer blancs, vert fluo au survol — comme ceux du menu */
.footer__nav .btn{background:var(--white);color:var(--ink)}
.footer__nav .btn:hover{background:var(--rh-green)}

/* visuel de fin calé en bas à droite, posé JUSTE AU-DESSUS du bandeau de
   copyright : encadré comme un sticker, il ne doit être tranché ni par le
   bandeau noir ni par le bord de la fenêtre. */
.footer__hug{
  position:absolute;right:clamp(10px, 3vw, 56px);bottom:clamp(96px, 10vw, 120px);z-index:0;
  width:clamp(180px, 19vw, 260px);
  border:var(--border-thick);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  rotate:2.5deg;
  pointer-events:none;user-select:none;
}

.footer__bar{
  position:relative;z-index:2;
  background:var(--ink);color:var(--cream);
  border-top:var(--band) solid var(--ink);
  display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;
  padding:18px 32px;font-size:17px;letter-spacing:.04em;
}
.footer__bar a:hover{color:var(--rh-green)}
#tgHandle{color:var(--rh-green)}

/* ─────────────────────────  REVEAL  ───────────────────────── */

/* hidden only when JS is running — content stays visible without it */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease, transform .6s cubic-bezier(.22,.75,.28,1)}
.js .reveal.is-in{opacity:1;transform:none}

/* ─────────────────────────  RESPONSIVE  ───────────────────────── */

@media (max-width:1080px){
  .nav__pill{gap:14px}
  .nav__links .btn--sm{padding:11px 13px 8px;font-size:13px}
  .brand__name{font-size:22px}

  .hero__inner{grid-template-columns:1fr .9fr}
  .about__grid{grid-template-columns:1fr}
  .about__char{width:min(80%, 480px);justify-self:center}
  .about__card{rotate:0deg}
  .tokenomics__grid{grid-template-columns:1fr;gap:34px}
  .tk__char{width:min(70%, 400px)}
  .tk__row,.tk__row:nth-child(n){width:100%}
}

@media (max-width:900px){
  /* sous 900px la barre sociale passe sur plusieurs lignes : on rend la
     hauteur au contenu plutot que de forcer un plein ecran */
  .firstview{display:block;min-height:0}
  :root{--nav-h:66px}

  .nav__burger{display:flex;order:2;margin-left:auto}
  .nav__links{
    position:absolute;top:calc(100% + 12px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:8px;
    background:var(--white);border:var(--border);border-radius:var(--radius-lg);
    box-shadow:var(--shadow);padding:14px;
    opacity:0;visibility:hidden;translate:0 -10px;transition:.22s ease;
  }
  .nav__links.is-open{opacity:1;visibility:visible;translate:0 0}
  .nav__links li{display:block !important}
  .nav__links .btn{width:100%;font-size:15px}
  .nav__pill{position:relative;padding:8px 10px;gap:10px}
  .nav__right{order:3;gap:8px;margin-left:0}

  .hero{padding-top:calc(var(--nav-h) + 60px)}
  .hero__inner{grid-template-columns:1fr;min-height:0;gap:0;text-align:center}
  .hero__copy{justify-items:center;padding-bottom:40px;margin-top:40px}
  .hero__sub{max-width:38ch;margin-top:8px}
  .hero__cta{justify-content:center;margin-top:16px}
  .hero__char{width:min(90%, 480px);justify-self:center;margin-bottom:48px}

  .marquee{rotate:-3deg}
  .marquee--rev{rotate:3deg}

  /* sous 900px les cartes passent sur 1-2 colonnes et occupent toute la
     largeur : plus de gouttière pour poser le sticker sans le recouvrir. */
  .how__foot{display:block}
  .how__char{display:none}
  .footer__hug{width:clamp(150px, 26vw, 210px);bottom:clamp(96px, 13vw, 118px)}

  .about{padding:100px 0 110px}
  .how,.tokenomics{padding:100px 0 110px}
  .step--a,.step--b,.step--c{rotate:0deg}

  .carousel__nav--prev{left:-4px}
  .carousel__nav--next{right:-4px}

  .footer__bar{justify-content:center;text-align:center;padding:16px 20px}
}

@media (max-width:560px){
  .brand__name{display:none}
  .brand--lg .brand__name{display:block;font-size:38px}
  .nav__right .socials{display:none}

  .hero__title{text-shadow:4px 4px 0 var(--ink)}
  /* en mobile on empile : le CA doit se lire en entier, quitte a passer
     sur deux lignes. Un CA tronque au milieu ne sert a rien. */
  .ca__box{flex-direction:column;align-items:stretch;gap:10px;padding:14px}
  .ca__addr{
    font-size:17px;max-width:100%;text-align:center;line-height:1.3;
    white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;
  }

  .tk__row{flex-direction:column;align-items:flex-start;gap:4px}
  .tk__v{text-align:left}

  .slide{width:min(80vw,320px);height:min(80vw,320px)}
  .carousel__stage{height:min(92vw,380px)}
  .how__cta .btn,.hero__cta .btn{width:100%}
  .how__cta{gap:12px}
  .hero__cta{gap:12px}

  /* six icônes : sous 560px une seule ligne se casse en 5+1, on force 3+3 */
  .socialbar__list{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:18px 22px}

  .footer .wrap{padding-bottom:clamp(215px, 52vw, 250px);gap:18px}
  .footer__nav{margin-top:0}
}

/* très petits écrans (≤ 380px) */
@media (max-width:380px){
  .wrap{width:min(100% - 24px, var(--wrap))}
  .hero__title{font-size:clamp(50px, 15vw, 72px)}
  .marquee span{font-size:19px}
  .marquee i{font-size:12px}
  .step{padding:42px 30px 32px}
  /* sous 380px la barre de copyright passe sur deux lignes : on remonte le
     sticker d'autant pour qu'il ne soit jamais tranché par le bandeau noir. */
  .footer__hug{width:44vw;right:10px;bottom:clamp(132px, 37vw, 152px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  /* aucun clignotement : un seul jeu de rayons, fixe */
  .hero::after{opacity:0}
}