/* ==========================================================================
   SPURDO — one-pager memecoin site (Robinhood Chain)
   ========================================================================== */

/* Simpsonfont by Dennis Ludlow (Sharkshock) — see assets/fonts/LICENSE-simpsonfont.txt
   DEMO cut: basic latin + digits + limited punctuation. Single weight. */
@font-face{
  font-family:"Simpsonfont";
  src:url("../fonts/simpsonfont.woff2") format("woff2"),
      url("../fonts/simpsonfont.woff")  format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  /* the OTF ships with a 1.16em ascender + 0.11em line gap — trimming it here
     keeps line-height values behaving like a normal webfont */
  ascent-override:104%;
  descent-override:24%;
  line-gap-override:0%;
  /* CRITIQUE — la version DEMO déclare la ponctuation dans sa cmap mais les glyphes
     sont VIDES (aucun contour) : virgule, apostrophe, tiret, deux-points, $, %, &, ?...
     s'affichaient donc en blanc. On limite la police aux 104 codepoints réellement
     dessinés ; tout le reste retombe automatiquement sur la police suivante du stack. */
  unicode-range:U+0021, U+002E, U+0030-0039, U+0041-005A, U+0060-007A,
                U+00A8, U+00B4, U+00B8, U+00C0, U+00C6-00C8, U+00CF, U+00D3,
                U+00D6, U+00D8, U+00DF-00E0, U+00E6-00E8, U+00EF, U+00F3,
                U+00F6, U+00F8, U+02C6-02C7, U+02C9, U+02D8-02DD,
                U+0410-0414, U+0430-0434;
}

:root{
  --lime:        #bbf124;
  --lime-deep:   #2f7d1e;
  --lime-mid:    #7dcc1c;
  --lime-soft:   #d3f95f;
  --yellow:      #ffe24b;
  --ink:         #0d0d0d;
  --text:        #272727;
  --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:   "Simpsonfont", "Comic Sans MS", system-ui, sans-serif;
  --font-display:"Simpsonfont", "Comic Sans MS", system-ui, sans-serif;
  --wrap:        1250px;
  --nav-h:       92px;
}

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

*,*::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(--lime);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  letter-spacing:.012em;
  overflow-x:hidden;
  /* Simpsonfont ships a single weight — block the browser from faking bold/italic,
     which smears the hand-drawn strokes */
  font-synthesis:none;
}

/* single-weight font: express emphasis with colour, not with weight */
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(--white);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:var(--radius);
  font-family:var(--font-body);font-size:15px;letter-spacing:.02em;
  padding:11px 20px;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:9px 18px;font-size:14px;border-radius:var(--radius-sm);box-shadow:0 4px 0 var(--ink)}
.btn--lg{padding:15px 34px;font-size:18px;box-shadow:var(--shadow-lg)}
.btn--yellow{background:var(--yellow)}
.btn--yellow:hover{background:#ffd60d}
.btn--green{background:var(--lime-deep);color:var(--white)}
.btn--green:hover{background:#276b18}

/* ─────────────────────────  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-body);
  font-size:26px;line-height:1;color:var(--ink);
}
.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:11px 22px;line-height:1.15}
.nav__links .btn:hover{background:var(--lime)}
.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(--lime);
  overflow:hidden;
  padding:calc(var(--nav-h) + 24px) 0 0;
}
.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(70svh, 620px);
}
.hero__copy{display:grid;gap:22px;justify-items:start}
.hero__title{
  font-family:var(--font-body);
  font-size:clamp(64px, 12vw, 150px);
  line-height:.95;color:var(--ink);
  letter-spacing:-.01em;
}
.hero__sub{
  font-size:clamp(16px, 1.7vw, 20px);
  line-height:1.5;max-width:30ch;color:var(--text);
}
.hero__sub strong{color:var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* personnage brut : ni ombre portée, ni flottement, ni parallaxe.
   `max-width:none` annule le garde-fou global sur <img> — sans lui le
   personnage restait bridé à la largeur de sa colonne. */
.hero__char{
  width:min(116%, 690px);max-width:none;
  justify-self:end;align-self:end;
  margin-right:-56px;   /* déborde dans la marge droite */
  margin-bottom:-6px;   /* tuck the character behind the social bar */
}

/* 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  ───────────────────────── */

.socialbar{
  background:var(--lime-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(50px, 6vw, 66px);height:auto;
  transition:transform .16s ease;
}
.socialbar__list a:hover img{transform:translateY(-4px) scale(1.06)}

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

.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(--lime-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:.01em;
  white-space:nowrap;
}
.marquee i{font-style:normal;font-size:clamp(13px,1.4vw,19px);color:var(--lime-mid);-webkit-text-stroke:1.5px var(--ink)}
@keyframes slide{to{transform:translateX(-50%)}}

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

.about{padding:80px 0 90px;background:var(--lime)}
.about__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;gap:clamp(24px, 4vw, 56px);
}
/* personnage brut : ni ombre portée, ni parallaxe */
.about__char{
  width:min(118%, 585px);max-width:none;
  justify-self:start;margin-left:-90px;
}
.about__card{
  background:var(--white);
  border:var(--border-mid);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:clamp(26px, 3.4vw, 44px);
  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:.01em;
}
.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-size:13px;letter-spacing:.18em;color:var(--ink)}
.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%;
}
.ca__addr{
  font-size:14px;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(62vw,430px);
}
/* le bouton COPY passe au vert fluo au survol, comme les liens du menu */
.ca__copy:hover{background:var(--lime)}
.ca__toast{
  position:absolute;top:-30px;
  background:var(--ink);color:var(--lime);
  font-family:var(--font-display);font-size:18px;letter-spacing:.05em;
  padding:6px 18px;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(--lime);padding:clamp(90px,8vw,125px) 0 clamp(100px,9vw,140px);position:relative;overflow:hidden}
/* le contenu reste centré dans le wrap comme partout ailleurs ;
   le personnage vit dans la marge droite de la fenêtre */
.how .wrap{position:relative;z-index:1}
/* Spurdo décoratif collé au bord droit de la fenêtre.
   `scale` (et pas `transform`) le retourne : la classe .reveal pilote transform. */
.how__char{
  position:absolute;right:0;bottom:-20px;z-index:0;
  width:clamp(260px, 31vw, 480px);
  scale:-1 1;
  pointer-events:none;user-select:none;
}

/* cartes un peu plus compactes, mais toujours centrées dans le wrap :
   ça laisse respirer le personnage 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))}}
.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(--yellow);border:var(--border);border-radius:var(--radius-sm);
  padding:2px 16px;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)}
/* même police dessinée à la main que le reste du site */
.step p{
  font-family:var(--font-body);
  font-size:17px;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;margin-top:56px}

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

.tokenomics{background:var(--lime);padding:clamp(90px,8vw,125px) 0 clamp(100px,9vw,135px)}

.tokenomics__grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:center;gap:clamp(24px,4vw,60px);
}
/* retourné pour qu'il regarde vers les chiffres de la tokenomics.
   `scale` (et non `transform`) : la classe .reveal pilote déjà `transform`
   et écraserait un scaleX() posé ici. */
.tk__char{
  width:min(128%, 590px);max-width:none;justify-self:center;
  scale:-1 1;
}

.tk{display:grid;gap:clamp(14px,1.8vw,20px);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)}
.tk__row--fill{background:var(--lime-deep)}
.tk__row--fill .tk__k,.tk__row--fill .tk__v{color:var(--white)}
.tk__k{
  font-family:var(--font-display);
  font-size:clamp(18px,2.2vw,28px);line-height:1.2;color:var(--ink);
  letter-spacing:.02em;
}
.tk__v{font-size:clamp(14px,1.7vw,20px);color:var(--text);text-align:right;overflow-wrap:anywhere}

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

.memes{padding:60px 0 100px;background:var(--lime);overflow:hidden}

.h-title{
  font-family:var(--font-display);
  font-size:clamp(38px, 7vw, 78px);
  line-height:1.1;text-align:center;color:var(--ink);
  margin-bottom:38px;
}

.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(--lime-soft);
  box-shadow:0 12px 26px rgba(0,0,0,.25);
  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;
}
.carousel__nav:hover{transform:translateY(2px) translateY(-50%);box-shadow:0 1px 0 var(--ink)}
.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(--ink);transform:scale(1.25)}

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

.footer{background:var(--lime);padding:60px 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(--ink)}
.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(--lime)}

/* Spurdo qui fait un câlin — décor de fond calé en bas à droite,
   sa base passe DERRIÈRE le bandeau de copyright (z-index inférieur). */
.footer__hug{
  position:absolute;right:clamp(0px, 3vw, 60px);bottom:0;z-index:0;
  width:clamp(240px, 30vw, 460px);
  pointer-events:none;user-select:none;
}

.footer__bar{
  position:relative;z-index:2;
  background:var(--lime-deep);color:var(--white);
  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(--lime)}

/* ─────────────────────────  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:9px 13px;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;margin-left:0}
  .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){
  :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) + 28px)}
  .hero__inner{grid-template-columns:1fr;min-height:0;gap:0;text-align:center}
  .hero__copy{justify-items:center;padding-bottom:32px}
  .hero__sub{max-width:38ch}
  .hero__cta{justify-content:center}
  .hero__char{width:min(96%, 560px);justify-self:center;margin-right:0}

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

  /* décors de fond : réduits, ils restent derrière le contenu (z-index 0) */
  .how__char{width:clamp(150px, 38vw, 250px);right:-8px;bottom:-10px}
  .footer__hug{width:clamp(170px, 44vw, 300px)}

  .about{padding:60px 0 70px}
  .how,.tokenomics{padding:60px 0 70px}
  .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}

  .ca__box{padding:8px 8px 8px 16px}
  .ca__addr{font-size:12px;max-width:52vw}

  .tk__row{flex-direction:column;align-items:flex-start;gap:2px}
  .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%}

  /* le décor du How To Buy passerait sous les CTA pleine largeur */
  .how__char{display:none}
  .footer .wrap{padding-bottom:clamp(56px,22vw,96px)}
}

/* 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:22px 18px 24px}
  .footer__hug{width:52vw}
}

@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}
}