/* ═══════════════════════════════════════════════════════════
   PUMPNUTS $PNUTS — cartoon-sharp sticker brutalism
   Light pump.fun palette: white + mint green, hard ink outlines.
   Each section sets its own --bg / --fg / --soft via a sec-- class.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ink */
  --ink:#0C1711;
  --ink-2:#132218;
  --ink-3:#1B2E22;

  /* paper & mint */
  --paper:#FFFFFF;
  --cream:#F6FFFA;
  --mint:#DFF9EC;
  --mint-2:#BFF0D8;
  --mint-3:#9DE7C3;

  /* brand */
  --green:#22C77B;
  --green-lt:#5BE3A4;
  --green-dk:#0E8A50;
  --gold:#FFC93C;
  --gold-dk:#D99B00;
  --hot:#FF4D6D;
  --grape:#8B5CF6;
  --ice:#41D8F0;

  /* per-section, overridden below */
  --bg:var(--paper);
  --fg:var(--ink);
  --soft:#5A6B61;
  --hair:rgba(12,23,17,.12);
  --tint:rgba(12,23,17,.04);

  --dsp:'Bungee','Impact','Haettenschweiler',system-ui,sans-serif;
  --ui:'Space Grotesk','Helvetica Neue',system-ui,sans-serif;

  --bw:3px;
  --sh:6px 6px 0 var(--ink);
  --sh-sm:4px 4px 0 var(--ink);
  --sh-lg:10px 10px 0 var(--ink);
  --maxw:1240px;
}

/* ── section themes ───────────────────────────────────────── */
.sec--paper{--bg:var(--paper);--fg:var(--ink);--soft:#5A6B61;--hair:rgba(12,23,17,.12);--tint:rgba(12,23,17,.04);
  --b1:rgba(34,199,123,.24);--b2:rgba(255,201,60,.22);--b3:rgba(139,92,246,.15);--b4:rgba(65,216,240,.18);
  --bh1:rgba(34,199,123,.34);--bh2:rgba(255,77,109,.20);--bh3:rgba(65,216,240,.22)}
.sec--mint {--bg:var(--mint); --fg:var(--ink);--soft:#4B6357;--hair:rgba(12,23,17,.14);--tint:rgba(12,23,17,.05);
  --b1:rgba(34,199,123,.32);--b2:rgba(65,216,240,.26);--b3:rgba(255,201,60,.24);--b4:rgba(139,92,246,.16);
  --bh1:rgba(14,138,80,.30);--bh2:rgba(139,92,246,.22);--bh3:rgba(255,77,109,.20)}
.sec--hero {--bg:var(--cream);--fg:var(--ink);--soft:#4B6357;--hair:rgba(12,23,17,.12);--tint:rgba(12,23,17,.04);
  --b1:rgba(34,199,123,.38);--b2:rgba(255,201,60,.34);--b3:rgba(65,216,240,.26);--b4:rgba(139,92,246,.20);
  --bh1:rgba(91,227,164,.44);--bh2:rgba(255,77,109,.24);--bh3:rgba(139,92,246,.26)}
.sec--green{--bg:var(--green);--fg:var(--ink);--soft:#0B3F27;--hair:rgba(12,23,17,.22);--tint:rgba(255,255,255,.22);
  --b1:rgba(255,255,255,.36);--b2:rgba(255,201,60,.38);--b3:rgba(14,138,80,.50);--b4:rgba(65,216,240,.26);
  --bh1:rgba(255,224,122,.40);--bh2:rgba(255,255,255,.42);--bh3:rgba(12,23,17,.22)}
.sec--ink  {--bg:var(--ink); --fg:var(--cream);--soft:#8FA79A;--hair:rgba(255,255,255,.14);--tint:rgba(255,255,255,.05);
  --b1:rgba(34,199,123,.30);--b2:rgba(139,92,246,.28);--b3:rgba(65,216,240,.20);--b4:rgba(255,201,60,.16);
  --bh1:rgba(91,227,164,.34);--bh2:rgba(255,77,109,.24);--bh3:rgba(255,201,60,.22)}

/* isolation:isolate makes every section its own stacking context, which is
   what lets .blobs live at z-index:-1 — painted over the section's own
   background but under all of its content, with no z-index on the content. */
.sec{background:var(--bg);color:var(--fg);position:relative;isolation:isolate}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:17px;line-height:1.62;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}   /* height:auto so attrs never fight aspect-ratio */
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--ink)}

.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem,840px)}

/* ── film grain ───────────────────────────────────────────── */
.grain{
  position:fixed;inset:-100%;z-index:9998;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}      16%{transform:translate(-6%,-3%)}
  33%{transform:translate(4%,-6%)}        50%{transform:translate(-3%,5%)}
  66%{transform:translate(6%,3%)}         83%{transform:translate(-5%,-5%)}
}

/* ── scroll progress ──────────────────────────────────────── */
.scroll-rail{position:fixed;top:0;left:0;right:0;height:5px;z-index:9997;background:rgba(12,23,17,.10)}
.scroll-rail i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--green),var(--gold),var(--hot));
}

/* ── peanut cursor trail ──────────────────────────────────── */
.nut-trail{position:fixed;inset:0;pointer-events:none;z-index:9996}
.nut-trail span{position:absolute;font-size:20px;line-height:1;animation:trail .85s ease-out forwards;will-change:transform,opacity}
@keyframes trail{
  0%{opacity:.95;transform:translate(-50%,-50%) scale(.4) rotate(0deg)}
  100%{opacity:0;transform:translate(-50%,40px) scale(1.15) rotate(220deg)}
}

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  --bbg:var(--paper);--bfg:var(--ink);
  display:inline-flex;align-items:center;gap:.55em;justify-content:center;
  background:var(--bbg);color:var(--bfg);
  font-family:var(--dsp);font-size:.82rem;letter-spacing:.02em;
  padding:.85em 1.35em;border:var(--bw) solid var(--ink);border-radius:999px;
  box-shadow:var(--sh-sm);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .14s,filter .14s;
}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:-60%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 30% 120%,rgba(255,255,255,.85),transparent 58%),
             radial-gradient(circle at 85% -20%,rgba(255,201,60,.7),transparent 55%);
  opacity:0;scale:.6;
  transition:opacity .35s ease,scale .55s cubic-bezier(.22,1,.36,1);
}
.btn:hover::before{opacity:.55;scale:1}
.btn:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink);filter:saturate(1.12)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--gold {--bbg:linear-gradient(160deg,#FFE07A,var(--gold) 48%,var(--gold-dk))}
.btn--green{--bbg:linear-gradient(160deg,var(--green-lt),var(--green) 48%,var(--green-dk))}
.btn--ink  {--bbg:var(--ink);--bfg:var(--cream)}
.btn--ghost{--bbg:transparent;--bfg:var(--fg);border-color:var(--fg);box-shadow:4px 4px 0 var(--hair)}
.btn--ghost:hover{--bbg:var(--fg);--bfg:var(--bg)}
.btn--ghost-ink{--bbg:transparent;--bfg:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 rgba(12,23,17,.28)}
.btn--ghost-ink:hover{--bbg:var(--ink);--bfg:var(--paper)}
.btn--lg{font-size:.95rem;padding:1em 1.7em}
.btn--xl{font-size:1.05rem;padding:1.1em 2em}
.btn--icon{padding:.85em 1.05em}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:var(--sh-sm)}

/* ── section heading ──────────────────────────────────────── */
.shead{text-align:center;max-width:780px;margin:0 auto 3.5rem}
.shead__kicker{
  display:inline-block;font-family:var(--dsp);font-size:.66rem;letter-spacing:.18em;
  color:var(--ink);background:var(--gold);padding:.45em 1em;border:var(--bw) solid var(--ink);
  border-radius:999px;box-shadow:var(--sh-sm);transform:rotate(-2deg);margin-bottom:1.3rem;
}
.shead__title{
  font-family:var(--dsp);font-size:clamp(2.3rem,7vw,4.6rem);line-height:.94;margin:0 0 1rem;
  letter-spacing:-.01em;color:var(--fg);
  text-shadow:4px 4px 0 var(--green),8px 8px 0 var(--hair);
}
.sec--ink .shead__title{text-shadow:4px 4px 0 var(--green-dk),8px 8px 0 rgba(255,201,60,.3)}
.sec--green .shead__title{text-shadow:4px 4px 0 var(--paper),8px 8px 0 rgba(12,23,17,.22)}
.shead__sub{color:var(--soft);margin:0;font-size:1.06rem}
.shead__sub strong{color:var(--fg)}

[data-split] .wd{display:inline-block;white-space:nowrap}
[data-split] .ch{display:inline-block;will-change:transform,opacity}
[data-split].is-in .ch{animation:pop .5s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes pop{
  0%{opacity:0;transform:translateY(.5em) rotate(-8deg) scale(.7)}
  100%{opacity:1;transform:none}
}

/* ── reveal on scroll ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .blobs i{animation:none;transition:none}
  .nftwall__col{animation:none}
  .nftwall__slab{transition:none}
  .blobs__spot{display:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
}

/* ═══════════ AMBIENT BLOB FIELD ═══════════
   Three slow, morphing gradient blobs per section. The colours come from the
   section theme (--b1..--b4, --bh1..--bh3), so one set of rules dresses the
   whole page. Drift is animated with `translate` and hover reacts with
   `scale`, so the two never fight over the transform property. */
.blobs{
  position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 87%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 87%,transparent 100%);
}
.blobs i{
  position:absolute;display:block;aspect-ratio:1;
  border-radius:44% 56% 61% 39% / 43% 45% 55% 57%;
  filter:blur(54px) saturate(1.1);
  transition:scale 1s cubic-bezier(.22,1,.36,1),opacity .8s ease,
             filter .8s ease,background .8s ease;
  animation-play-state:paused;
}
.sec.is-near .blobs i{animation-play-state:running}
.blobs i:nth-child(1){
  width:clamp(280px,46vw,680px);top:-16%;left:-12%;
  background:radial-gradient(circle at 34% 32%,var(--b1),transparent 68%);
  animation:blobA 24s ease-in-out infinite alternate;
}
.blobs i:nth-child(2){
  width:clamp(300px,52vw,760px);top:14%;right:-18%;
  background:radial-gradient(circle at 62% 42%,var(--b2),transparent 70%);
  animation:blobB 31s ease-in-out infinite alternate;
}
.blobs i:nth-child(3){
  width:clamp(240px,40vw,600px);bottom:-20%;left:24%;
  background:radial-gradient(circle at 46% 56%,var(--b3),transparent 66%);
  animation:blobC 27s ease-in-out infinite alternate;
}
@keyframes blobA{
  0%  {translate:0 0;      border-radius:44% 56% 61% 39% / 43% 45% 55% 57%}
  50% {translate:6% 8%;    border-radius:63% 37% 40% 60% / 57% 63% 37% 43%}
  100%{translate:-5% 14%;  border-radius:36% 64% 55% 45% / 63% 37% 63% 37%}
}
@keyframes blobB{
  0%  {translate:0 0;      border-radius:58% 42% 39% 61% / 51% 58% 42% 49%}
  50% {translate:-8% 10%;  border-radius:38% 62% 66% 34% / 40% 45% 55% 60%}
  100%{translate:4% -8%;   border-radius:66% 34% 47% 53% / 59% 36% 64% 41%}
}
@keyframes blobC{
  0%  {translate:0 0;      border-radius:40% 60% 54% 46% / 62% 41% 59% 38%}
  50% {translate:10% -6%;  border-radius:55% 45% 33% 67% / 38% 63% 37% 62%}
  100%{translate:-9% -12%; border-radius:47% 53% 62% 38% / 55% 49% 51% 45%}
}

/* hover the section and the wash re-mixes — colours swap, one blob swells,
   another retreats, and the blur tightens so the edges read sharper */
.sec:hover > .blobs i{filter:blur(46px) saturate(1.45)}
.sec:hover > .blobs i:nth-child(1){scale:1.16;background:radial-gradient(circle at 34% 32%,var(--bh1),transparent 68%)}
.sec:hover > .blobs i:nth-child(2){scale:1.26;background:radial-gradient(circle at 62% 42%,var(--bh2),transparent 70%)}
.sec:hover > .blobs i:nth-child(3){scale:.86;opacity:.72;background:radial-gradient(circle at 46% 56%,var(--bh3),transparent 66%)}

/* the hero runs a fourth blob plus a blob that trails the cursor */
.blobs--hero i{filter:blur(64px) saturate(1.15)}
.sec--hero:hover > .blobs i{filter:blur(56px) saturate(1.5)}
.blobs--hero i:nth-child(4){
  width:clamp(220px,34vw,500px);top:42%;left:4%;
  background:radial-gradient(circle at 50% 50%,var(--b4),transparent 68%);
  animation:blobB 21s ease-in-out infinite alternate-reverse;
}
.blobs__spot{
  top:0;left:0;width:clamp(260px,36vw,560px);
  background:radial-gradient(circle at 50% 50%,var(--gold),transparent 64%);
  opacity:0;filter:blur(58px) saturate(1.2);
  /* translate percentages resolve against the blob's own box, so this centres
     it on the pointer position that hero.js writes into --mx / --my */
  translate:calc(var(--mx,50vw) - 50%) calc(var(--my,42vh) - 50%);
  transition:translate .55s cubic-bezier(.22,1,.36,1),opacity .5s ease;
  animation:none;
}
.hero:hover .blobs__spot{opacity:.5}
.sec--hero:hover > .blobs .blobs__spot{scale:1;filter:blur(58px) saturate(1.2)}

/* ═══════════ WAVE SECTION ENDS ═══════════
   Each divider is two stacked waves — a translucent one riding slightly
   higher for depth, then the solid one carrying the ink seam. The fill is
   always the NEXT section's colour, so the wave reads as that section
   bleeding upward into this one. non-scaling-stroke keeps the 3px seam
   even after preserveAspectRatio:none stretches the path. */
.wave{
  position:absolute;left:-1px;right:-1px;bottom:-1px;z-index:6;
  line-height:0;pointer-events:none;
  --wave-fill:var(--paper);--wave-stroke:var(--ink);
}
.wave--top{top:-1px;bottom:auto;transform:scaleY(-1)}
.wave svg{display:block;width:100%;height:clamp(46px,7.2vw,104px)}
.wave__back{fill:var(--wave-fill);opacity:.32}
.wave__fill{fill:var(--wave-fill)}
.wave__line{fill:none;stroke:var(--wave-stroke);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wave--paper{--wave-fill:var(--paper)}
.wave--cream{--wave-fill:var(--cream)}
.wave--mint {--wave-fill:var(--mint)}
.wave--green{--wave-fill:var(--green)}
.wave--ink  {--wave-fill:var(--ink);--wave-stroke:var(--green-lt)}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:900;
  width:min(100% - 1.6rem,var(--maxw));
  display:flex;align-items:center;gap:1rem;padding:.5rem .5rem .5rem .75rem;
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.5);
  border:var(--bw) solid var(--ink);border-radius:999px;
  box-shadow:0 8px 0 -4px rgba(12,23,17,.18);
  transition:box-shadow .3s,background .3s;
}
.nav.is-stuck{background:rgba(255,255,255,.96);box-shadow:0 10px 28px -12px rgba(12,23,17,.4),0 8px 0 -4px rgba(12,23,17,.18)}
.nav__logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:0 0 auto}
.nav__logo-mark{
  width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:radial-gradient(circle at 40% 30%,var(--green-lt),var(--green-dk));
  border:var(--bw) solid var(--ink);display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.nav__logo:hover .nav__logo-mark{transform:rotate(-14deg) scale(1.08)}
.nav__logo-mark img{width:100%;height:100%;max-width:none;object-fit:cover;margin:0}
.nav__logo-txt{font-family:var(--dsp);font-size:1.02rem;letter-spacing:-.01em;color:var(--ink)}
.nav__logo-txt em{font-style:normal;color:var(--green-dk)}
.nav__links{display:flex;gap:.2rem;margin-left:auto}
.nav__links a{
  position:relative;text-decoration:none;font-size:.9rem;font-weight:600;
  padding:.5rem .8rem;border-radius:999px;color:#42564B;transition:color .2s;
}
.nav__links a::after{
  content:"";position:absolute;left:50%;bottom:.28rem;width:0;height:3px;border-radius:2px;
  background:var(--green);transform:translateX(-50%);transition:width .25s cubic-bezier(.34,1.56,.64,1);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-active::after{width:38%}
.nav__links a.is-active{color:var(--green-dk)}
.nav__cta{font-size:.76rem;padding:.7em 1.1em}
.nav__burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer}
.nav__burger i{display:block;width:22px;height:3px;background:var(--ink);border-radius:2px;margin:4px 0;transition:.25s}
.nav__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════ HERO ═══════════ */
.hero{
  min-height:100svh;display:grid;align-items:center;padding:7rem 0 9rem;overflow:hidden;
  /* pools into mint at the foot so the paper wave has something to cut into */
  background:linear-gradient(168deg,var(--cream) 0%,var(--paper) 38%,var(--mint) 100%);
}
.hero__inner{
  position:relative;z-index:2;width:min(100% - 2.5rem,1340px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:2.5rem;align-items:center;
}
.eyebrow{
  display:inline-block;font-family:var(--dsp);font-size:.68rem;letter-spacing:.14em;
  background:var(--hot);color:var(--paper);padding:.5em 1.05em;border:var(--bw) solid var(--ink);
  border-radius:999px;box-shadow:var(--sh-sm);transform:rotate(-2.5deg);margin-bottom:1.4rem;
  animation:wobble 4s ease-in-out infinite;
}
.eyebrow--ink{background:var(--ink);color:var(--gold)}
@keyframes wobble{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2deg)}}

.hero__title{font-family:var(--dsp);margin:0;line-height:.82;font-size:clamp(3.6rem,12.5vw,9.2rem);letter-spacing:-.02em}
.hero__word{display:block}
.hero__word .ch{
  color:var(--ink);
  text-shadow:5px 5px 0 var(--green),10px 10px 0 rgba(12,23,17,.16);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),color .25s;
}
.hero__word .ch:hover{transform:translateY(-10px) rotate(-6deg) scale(1.08);color:var(--green-dk)}
.hero__word--green .ch{color:var(--green-dk);text-shadow:5px 5px 0 var(--gold),10px 10px 0 rgba(12,23,17,.16)}
.hero__word--green .ch:hover{color:var(--ink)}

.hero__sub{max-width:44ch;color:#3E5248;font-size:1.1rem;margin:1.6rem 0 2rem}
.hero__sub strong{color:var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem}

.ca{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;max-width:100%;
  background:var(--paper);border:2px dashed rgba(12,23,17,.28);border-radius:14px;
  padding:.5rem .8rem;cursor:pointer;transition:.2s;
}
.ca:hover{border-color:var(--green);background:var(--mint)}
.ca__label{font-family:var(--dsp);font-size:.6rem;letter-spacing:.1em;background:var(--gold);color:var(--ink);padding:.25em .6em;border-radius:6px}
.ca__val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:#3E5248;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca__icon{color:var(--green-dk);font-size:1rem}
.ca--big{margin:2rem auto 0;padding:.7rem 1.1rem}

.hero__stats{list-style:none;display:flex;gap:2rem;padding:0;margin:2.4rem 0 0;flex-wrap:wrap}
.hero__stats b{display:block;font-family:var(--dsp);font-size:1.9rem;color:var(--ink);line-height:1;text-shadow:3px 3px 0 var(--green-lt)}
.hero__stats span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#6B7D73}

.hero__art{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:660px;justify-self:end}
.hero__nut{
  position:relative;z-index:3;width:100%;aspect-ratio:1;cursor:pointer;
  filter:drop-shadow(0 22px 34px rgba(12,23,17,.28));
  animation:bob 5.5s ease-in-out infinite;will-change:transform;
}
.hero__nut:focus-visible{outline:3px dashed var(--green-dk);outline-offset:12px;border-radius:24px}
.hero__nut img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 62%}
.hero__nut img.is-pop{animation:traitPop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes traitPop{
  0%{opacity:0;transform:scale(.72) rotate(-9deg)}
  55%{opacity:1;transform:scale(1.06) rotate(2deg)}
  100%{opacity:1;transform:none}
}
.hero__nut.is-rolling{animation:bob 5.5s ease-in-out infinite,rollShake .3s ease-out}
@keyframes rollShake{
  0%{filter:drop-shadow(0 22px 34px rgba(12,23,17,.28)) brightness(1)}
  40%{filter:drop-shadow(0 22px 34px rgba(12,23,17,.28)) brightness(1.35) saturate(1.3)}
  100%{filter:drop-shadow(0 22px 34px rgba(12,23,17,.28)) brightness(1)}
}
@keyframes bob{0%,100%{transform:translateY(-10px) rotate(-1.2deg)}50%{transform:translateY(14px) rotate(1.6deg)}}
.hero__reroll{
  position:absolute;left:50%;bottom:-.4rem;transform:translateX(-50%);z-index:5;
  font-family:var(--dsp);font-size:.58rem;letter-spacing:.1em;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:.35em .8em;
  white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:var(--sh-sm);
}
.hero__art:hover .hero__reroll{opacity:1}

.tag{
  position:absolute;z-index:4;font-family:var(--dsp);font-size:.6rem;letter-spacing:.06em;
  background:var(--paper);color:var(--ink);padding:.45em .8em;border:2px solid var(--ink);
  border-radius:999px;box-shadow:var(--sh-sm);white-space:nowrap;
  opacity:0;animation:tagIn .5s cubic-bezier(.34,1.56,.64,1) forwards;transition:background .3s;
}
/* opacity is re-asserted because this replaces the tagIn entry animation, and
   `scale` is used instead of `transform` so each tag keeps its own rotation */
.tag.is-pop{opacity:1;animation:tagPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes tagPop{0%{scale:.82}60%{scale:1.08}100%{scale:1}}
.tag--1{top:8%;right:-2%;animation-delay:.9s;transform:rotate(6deg)}
.tag--2{top:46%;left:-6%;background:var(--gold);animation-delay:1.15s;transform:rotate(-7deg)}
.tag--3{bottom:12%;right:2%;background:var(--green-lt);animation-delay:1.4s;transform:rotate(4deg)}
@keyframes tagIn{from{opacity:0;transform:scale(.4) rotate(-20deg)}to{opacity:1}}

/* ═══════════ MARQUEE ═══════════ */
.marquee{
  overflow:hidden;border-block:var(--bw) solid var(--ink);
  padding:.75rem 0;transform:rotate(-1.1deg) scale(1.03);position:relative;z-index:5;
}
.marquee--gold{background:linear-gradient(180deg,#FFE07A,var(--gold));color:var(--ink);margin:0 0 5rem}
.marquee--green{background:linear-gradient(180deg,var(--green-lt),var(--green));color:var(--ink);transform:rotate(1.1deg) scale(1.03);margin-bottom:5rem}
.marquee--foot{background:var(--ink-3);color:var(--green-lt);transform:none;border-bottom:0;padding:.6rem 0}
.marquee__track{display:flex;align-items:center;gap:2rem;width:max-content;animation:march 34s linear infinite}
.marquee__track--rev{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{font-family:var(--dsp);font-size:1.02rem;letter-spacing:.02em;white-space:nowrap}
.marquee b{font-size:1.1rem}
@keyframes march{to{transform:translateX(-50%)}}

/* ═══════════ MINT ═══════════ */
.mint{padding:8.5rem 0 9rem;overflow:hidden}
.mint__nuts{position:absolute;inset:0;pointer-events:none}
.mint__nuts img{position:absolute;width:190px;opacity:.24}
.mint__nuts img:nth-child(1){top:6%;right:3%;transform:rotate(12deg)}
.mint__nuts img:nth-child(2){bottom:4%;left:2%;width:160px;transform:rotate(-10deg)}
.mint__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:3rem;align-items:start}
.mint__title{
  font-family:var(--dsp);font-size:clamp(2.4rem,6.4vw,4.4rem);line-height:.92;margin:0 0 1.4rem;
  color:var(--ink);text-shadow:5px 5px 0 var(--paper),10px 10px 0 rgba(12,23,17,.2);
}
.mint__lead{margin:0 0 1.1rem;font-size:1.06rem;color:#0D3D26;max-width:60ch}
.mint__lead strong{color:var(--ink);background:var(--paper);padding:0 .28em;border-radius:5px;box-shadow:2px 2px 0 rgba(12,23,17,.2)}
.mint__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

.lmnft{
  display:inline-flex;align-items:center;gap:.85rem;margin-top:1.8rem;text-decoration:none;
  background:var(--ink);color:var(--cream);border:var(--bw) solid var(--ink);border-radius:16px;
  padding:.7rem 1.1rem;box-shadow:var(--sh-sm);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
}
.lmnft:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 rgba(12,23,17,.35)}
.lmnft__mark{width:26px;height:26px;flex:0 0 auto;color:var(--paper)}
.lmnft__mark svg{width:100%;height:100%;display:block}
.lmnft__txt{display:grid;line-height:1.25}
.lmnft__txt small{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#8FA79A}
.lmnft__txt b{font-family:var(--dsp);font-size:.86rem;letter-spacing:.01em}
.lmnft__go{margin-left:.2rem;color:var(--green-lt);font-size:1rem}

.mint__dot{width:10px;height:10px;border-radius:50%;background:var(--green-lt);position:relative;flex:0 0 auto}
.mint__dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--green-lt);animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
.mint__warn{
  margin:0;padding:.85rem 1.2rem;font-size:.76rem;line-height:1.55;color:#5A3B00;
  background:#FFF3D0;border-top:var(--bw) solid var(--ink);
}

/* ═══════════ 3D NFT WALL ═══════════
   Four columns of shells drifting in alternating directions inside a tipped-back
   slab. Every column sits at its own translateZ, so the wall parallaxes for real
   instead of looking like a flat image someone rotated. */
.nftwall{position:relative}
.nftwall__stage{
  position:relative;overflow:hidden;height:clamp(460px,52vw,640px);
  border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:var(--sh-lg);
  background:linear-gradient(165deg,var(--ink-3),#050B08);
  perspective:1100px;perspective-origin:52% 46%;
}
.nftwall__slab{
  position:absolute;inset:-14% -20%;display:flex;gap:.85rem;
  transform-style:preserve-3d;
  transform:rotateX(7deg) rotateY(-17deg) rotateZ(1.5deg);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
}
/* hovering straightens the wall toward the viewer */
.nftwall__stage:hover .nftwall__slab{transform:rotateX(3deg) rotateY(-7deg) scale(1.04)}

.nftwall__col{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.85rem;
  /* must NOT stretch to the slab: the marquee translates by -50% of the
     column, which only equals one lap if the column is as tall as its stack */
  align-self:flex-start;
  transform-style:preserve-3d;
  animation:wallUp 46s linear infinite;animation-play-state:paused;
}
.nftwall__col:nth-child(1){transform:translateZ(-70px);animation-duration:52s}
.nftwall__col:nth-child(2){transform:translateZ(10px);animation-name:wallDown;animation-duration:43s}
.nftwall__col:nth-child(3){transform:translateZ(-34px);animation-duration:58s}
.nftwall__col:nth-child(4){transform:translateZ(26px);animation-name:wallDown;animation-duration:39s}

/* each column renders its set twice, so half the stack (plus half a gap) is
   exactly one seamless lap */
@keyframes wallUp  {from{translate:0 0}                    to{translate:0 calc(-50% - .425rem)}}
@keyframes wallDown{from{translate:0 calc(-50% - .425rem)} to{translate:0 0}}

.sec.is-near .nftwall__col{animation-play-state:running}
.nftwall__stage:hover .nftwall__col{animation-play-state:paused}

.nftwall__tile{
  position:relative;flex:0 0 auto;width:100%;aspect-ratio:1;margin:0;overflow:hidden;
  border:2px solid var(--ink);border-radius:14px;background:var(--mint);
  box-shadow:0 16px 26px -12px rgba(0,0,0,.75);
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,filter .45s;
}
.nftwall__tile img{width:100%;height:100%;object-fit:cover;display:block}
.nftwall__tile:hover{transform:translateZ(64px) scale(1.03);box-shadow:0 30px 46px -14px rgba(0,0,0,.85);filter:saturate(1.15)}
.nftwall__tile figcaption{
  position:absolute;left:.4rem;bottom:.4rem;
  font-family:var(--dsp);font-size:.52rem;letter-spacing:.06em;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);
  border-radius:7px;padding:.22em .5em;
  opacity:0;translate:0 6px;
  transition:opacity .3s ease,translate .3s cubic-bezier(.34,1.56,.64,1);
}
.nftwall__tile:hover figcaption{opacity:1;translate:0 0}
/* a thumb that fails to load keeps its box, so the loop stays seamless */
.nftwall__tile.is-empty{display:grid;place-items:center}
.nftwall__tile.is-empty::before{content:"🥜";font-size:1.7rem;opacity:.45}

/* glass over the whole case: the stack fades out top and bottom and darkens
   toward the corners, so the columns read as receding into the box */
.nftwall__stage::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg,#050B08 0%,rgba(5,11,8,0) 22%,rgba(5,11,8,0) 78%,#050B08 100%),
    radial-gradient(130% 85% at 50% 45%,rgba(5,11,8,0) 40%,rgba(5,11,8,.72) 100%);
}
.nftwall__badge{
  position:absolute;z-index:4;left:.9rem;top:.9rem;
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--dsp);font-size:.62rem;letter-spacing:.1em;
  background:var(--ink);color:var(--cream);
  border:2px solid var(--green-lt);border-radius:999px;padding:.45em .9em;
}
.nftwall .mint__warn{
  margin-top:1rem;border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--sh-sm);
}

/* ═══════════ LORE ═══════════ */
.lore{padding:5.5rem 0 9rem}
.lore__scroll{position:relative;width:min(100% - 2.5rem,1100px);margin-inline:auto;display:grid;gap:5.5rem}
.chap{display:grid;grid-template-columns:340px 1fr;gap:3rem;align-items:center}
.chap--flip{grid-template-columns:1fr 340px}
.chap--flip .chap__art{order:2}
.chap__art{position:relative;display:grid;place-items:center}
.chap__art img{width:100%;filter:drop-shadow(0 16px 22px rgba(12,23,17,.22));transition:transform .5s cubic-bezier(.34,1.56,.64,1);will-change:transform}
.chap:hover .chap__art img{transform:scale(1.07) rotate(-3deg)}
.chap__num{
  position:absolute;inset:auto auto -6% -4%;font-family:var(--dsp);
  font-size:8.5rem;line-height:1;color:transparent;
  -webkit-text-stroke:3px rgba(34,199,123,.5);z-index:0;pointer-events:none;
}
.chap--flip .chap__num{inset:auto -4% -6% auto;-webkit-text-stroke-color:rgba(255,201,60,.75)}
.chap__txt h3{font-family:var(--dsp);font-size:clamp(1.5rem,3.4vw,2.3rem);margin:0 0 .9rem;color:var(--ink);text-shadow:3px 3px 0 var(--green-lt)}
.chap--flip .chap__txt h3{text-shadow:3px 3px 0 var(--gold)}
.chap__txt p{color:#41564B;margin:0 0 1rem;max-width:58ch}
.chap__txt strong{color:var(--ink)}
.chap__txt em{color:var(--green-dk);font-style:italic}
.chap__txt a{color:var(--green-dk);font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px}
.chap__txt a:hover{color:var(--hot)}

/* ═══════════ LIBRARY ═══════════ */
.coll{padding:5.5rem 0 9rem}
.lib__bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.2rem}
.lib__search{
  display:flex;align-items:center;gap:.55rem;flex:0 1 320px;
  background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:.45rem .95rem;
  box-shadow:var(--sh-sm);transition:box-shadow .2s;
}
.lib__search:focus-within{box-shadow:6px 6px 0 var(--ink)}
.lib__search span{opacity:.5;font-size:.9rem}
.lib__search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font-family:var(--ui);font-size:.92rem;font-weight:600;padding:.2rem 0}
.lib__search input::placeholder{color:#8A9B91;font-weight:500}
.lib__count{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-left:.4rem}

.chip{
  font-family:var(--dsp);font-size:.68rem;letter-spacing:.06em;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;
  padding:.55em 1.05em;cursor:pointer;box-shadow:var(--sh-sm);
  transition:.18s cubic-bezier(.34,1.56,.64,1);
}
.chip:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.chip.is-on{background:var(--gold)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.4rem}
.grid--lib{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.1rem}
.card{
  position:relative;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:16px;
  overflow:hidden;box-shadow:var(--sh);cursor:pointer;transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.card:hover{box-shadow:11px 11px 0 var(--ink),0 26px 46px -20px rgba(34,199,123,.75)}
.card__img::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(120% 90% at 18% 115%,var(--green-lt),transparent 62%),
             radial-gradient(95% 85% at 92% -12%,var(--gold),transparent 58%);
  opacity:0;transition:opacity .4s ease;
}
.card:hover .card__img::before{opacity:1}
.card__img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--mint)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.card:hover .card__img img{transform:scale(1.09)}
.card__rank{
  position:absolute;top:.55rem;left:.55rem;font-family:var(--dsp);font-size:.58rem;
  background:var(--paper);color:var(--ink);padding:.3em .6em;border-radius:8px;border:2px solid var(--ink);
}
.card__zoom{
  position:absolute;right:.55rem;bottom:.55rem;width:30px;height:30px;
  display:grid;place-items:center;font-size:.85rem;
  background:var(--gold);color:var(--ink);border:2px solid var(--ink);border-radius:9px;
  opacity:0;transform:translateY(8px) scale(.8);
  transition:opacity .25s,transform .25s cubic-bezier(.34,1.56,.64,1);
}
.card:hover .card__zoom{opacity:1;transform:none}

.lib__foot{display:grid;justify-items:center;gap:.9rem;margin-top:2.6rem;text-align:center}
.lib__note{margin:0;font-size:.8rem;color:var(--soft);letter-spacing:.04em}
.lib__cta-txt{margin:0;color:var(--soft);font-size:.95rem}
.coll__foot{display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap;margin-top:3.2rem;text-align:center}

/* lightbox */
.lb{position:fixed;inset:0;z-index:9990;display:grid;place-items:center;padding:1.5rem;
  background:rgba(12,23,17,.82);backdrop-filter:blur(10px);animation:fadeIn .25s ease}
.lb[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lb__close,.lb__nav{
  position:absolute;z-index:2;cursor:pointer;
  background:var(--paper);color:var(--ink);border:var(--bw) solid var(--ink);
  box-shadow:var(--sh-sm);transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s,opacity .2s;
}
.lb__close{top:1.2rem;right:1.2rem;width:46px;height:46px;border-radius:50%;font-size:1.1rem}
.lb__close:hover{transform:rotate(90deg) scale(1.08);background:var(--hot);color:var(--paper)}
.lb__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;font-size:1.7rem;line-height:1}
.lb__nav:hover:not(:disabled){background:var(--gold);transform:translateY(-50%) scale(1.12)}
.lb__nav:disabled{opacity:.25;cursor:default}
.lb__nav--prev{left:max(1.2rem,calc(50% - 560px))}
.lb__nav--next{right:max(1.2rem,calc(50% - 560px))}
.lb__card{
  width:min(100%,860px);max-height:88svh;overflow:auto;display:grid;grid-template-columns:1fr 1fr;
  background:var(--paper);border:var(--bw) solid var(--ink);border-radius:24px;box-shadow:var(--sh-lg);
  animation:lbIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lbIn{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:none}}
.lb__img{aspect-ratio:1;background:var(--mint)}
.lb__img img{width:100%;height:100%;object-fit:cover}
.lb__body{padding:1.7rem;color:var(--ink)}
.lb__body h3{font-family:var(--dsp);font-size:1.7rem;margin:.5rem 0 .3rem}
.lb__id{font-size:.7rem;letter-spacing:.16em;color:#6B7D73;text-transform:uppercase}
.lb__blurb{margin:.9rem 0 0;color:#4B6357;font-size:.92rem}
.lb__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.lb__acts .btn{font-size:.7rem;padding:.7em 1.1em}
.lb__hint{margin:1.1rem 0 0;font-size:.7rem;letter-spacing:.1em;color:#8A9B91;text-transform:uppercase}

/* ═══════════ TOKENOMICS ═══════════ */
.tok{padding:5.5rem 0 9rem}
.fly{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;margin-bottom:5rem}
.fly__wheel{position:relative;aspect-ratio:1;display:grid;place-items:center;max-width:460px;margin-inline:auto;width:100%}
.fly__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fly__ring{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2}
.fly__ring--dash{
  stroke:var(--green-lt);stroke-width:4;stroke-linecap:round;stroke-dasharray:22 26;
  transform-origin:200px 200px;transition:transform .1s linear;filter:drop-shadow(0 0 8px rgba(91,227,164,.6));
}
.fly__arrows path{fill:var(--gold)}
.fly__hub{
  position:relative;z-index:2;display:grid;place-items:center;gap:.2rem;
  width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,rgba(34,199,123,.28),rgba(12,23,17,.9));
  border:var(--bw) solid var(--green-lt);box-shadow:0 0 40px -6px rgba(34,199,123,.5);
}
.fly__hub img{width:56%;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6));animation:bob 4.5s ease-in-out infinite}
.fly__hub span{font-family:var(--dsp);font-size:.9rem;color:var(--green-lt)}
.fly__node{
  position:absolute;display:grid;justify-items:center;gap:.1rem;
  background:var(--paper);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:14px;
  padding:.5rem .8rem;box-shadow:var(--sh-sm);white-space:nowrap;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.fly__node b{font-family:var(--dsp);font-size:.6rem;color:#6B7D73}
.fly__node span{font-family:var(--dsp);font-size:.72rem}
.fly__node--1{top:-4%;left:50%;transform:translateX(-50%);background:var(--gold)}
.fly__node--2{top:50%;right:-8%;transform:translateY(-50%);background:var(--green-lt)}
.fly__node--3{bottom:-4%;left:50%;transform:translateX(-50%);background:var(--ice)}
.fly__node--4{top:50%;left:-8%;transform:translateY(-50%);background:var(--hot);color:var(--paper)}
.fly__node--4 b{color:rgba(255,255,255,.72)}
.fly__node--1:hover{transform:translateX(-50%) scale(1.1) rotate(-3deg)}
.fly__node--3:hover{transform:translateX(-50%) scale(1.1) rotate(3deg)}
.fly__node--2:hover{transform:translateY(-50%) scale(1.1) rotate(3deg)}
.fly__node--4:hover{transform:translateY(-50%) scale(1.1) rotate(-3deg)}

.fly__copy h3{font-family:var(--dsp);font-size:clamp(1.5rem,3.2vw,2.1rem);margin:0 0 1.2rem;color:var(--green-lt)}
.fly__list{margin:0;padding-left:0;list-style:none;counter-reset:f;display:grid;gap:.9rem}
.fly__list li{position:relative;padding-left:2.6rem;color:var(--soft);font-size:.98rem;counter-increment:f}
.fly__list li::before{
  content:counter(f,decimal-leading-zero);position:absolute;left:0;top:.05em;
  font-family:var(--dsp);font-size:.7rem;color:var(--ink);background:var(--green-lt);
  width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:8px;border:2px solid var(--ink);
}
.fly__list b{color:var(--cream)}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.3rem}
.pill{
  position:relative;padding:1.6rem 1.4rem 1.5rem;border-radius:20px;overflow:hidden;
  background:var(--paper);color:var(--ink);border:var(--bw) solid var(--ink);box-shadow:var(--sh);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.pill::before{content:"";position:absolute;inset:0 0 auto;height:7px;background:var(--pc)}
.pill::after{
  content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;
  border-radius:56% 44% 38% 62% / 49% 61% 39% 51%;
  background:radial-gradient(circle at 42% 40%,var(--pc),transparent 70%);
  opacity:.3;filter:blur(12px);
  transition:scale .55s cubic-bezier(.22,1,.36,1),opacity .45s ease,border-radius .55s ease;
}
.pill:hover{box-shadow:12px 14px 0 var(--ink)}
.pill:hover::after{scale:2;opacity:.5;border-radius:38% 62% 58% 42% / 63% 37% 63% 37%}
.pill__ico,.pill__pct,.pill h4{position:relative;z-index:1}
.pill__ico{font-size:1.7rem;margin-bottom:.4rem}
.pill__pct{font-family:var(--dsp);font-size:2.5rem;line-height:1;color:var(--ink);text-shadow:3px 3px 0 var(--pc)}
.pill h4{font-family:var(--dsp);font-size:.95rem;margin:.55rem 0 .5rem}
.pill p{margin:0;font-size:.88rem;color:#4B6357;position:relative;z-index:1}
.tok__note{text-align:center;max-width:60ch;margin:2rem auto 0;color:var(--soft);font-size:.9rem}
.tok__note strong{color:var(--green-lt)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:3.5rem}
.fact{
  position:relative;overflow:hidden;text-align:center;padding:1.4rem 1rem;border-radius:18px;
  background:var(--tint);border:2px dashed var(--hair);transition:.25s;
}
.fact::before{
  content:"";position:absolute;inset:auto -25% -70%;height:150%;pointer-events:none;
  border-radius:50% 50% 42% 58% / 60% 55% 45% 40%;
  background:radial-gradient(circle at 50% 70%,var(--green-lt),transparent 66%);
  opacity:0;filter:blur(22px);translate:0 30%;
  transition:opacity .45s ease,translate .6s cubic-bezier(.22,1,.36,1);
}
.fact:hover::before{opacity:.4;translate:0 0}
.fact:hover{border-color:var(--green-lt);transform:translateY(-4px)}
.fact b,.fact span{position:relative;z-index:1}
.fact b{display:block;font-family:var(--dsp);font-size:1.5rem;color:var(--cream)}
.fact span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}

/* ═══════════ ROADMAP ═══════════ */
.road{padding:5.5rem 0 9rem}
.road__list{list-style:none;margin:0 auto;padding:0;position:relative;max-width:820px}
.road__list::before{
  content:"";position:absolute;left:15px;top:12px;bottom:12px;width:3px;
  background:linear-gradient(180deg,var(--green),var(--gold) 46%,var(--hot) 82%,rgba(255,77,109,0));
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 9px,transparent 9px 17px);
  mask-image:repeating-linear-gradient(180deg,#000 0 9px,transparent 9px 17px);
}
.phase{position:relative;padding:0 0 2.4rem 3.6rem}
.phase__dot{position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:var(--paper);border:var(--bw) solid var(--hair);z-index:1}
.phase.is-done .phase__dot{background:var(--green);border-color:var(--ink)}
.phase.is-live .phase__dot{background:var(--gold);border-color:var(--ink)}
.phase.is-live .phase__dot::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--gold);animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.phase__tag{font-family:var(--dsp);font-size:.6rem;letter-spacing:.12em;color:var(--soft);text-transform:uppercase}
.phase.is-live .phase__tag{color:var(--gold-dk)}
.phase.is-done .phase__tag{color:var(--green-dk)}
.phase h4{font-family:var(--dsp);font-size:1.25rem;margin:.3rem 0 .4rem;color:var(--fg)}
.phase p{margin:0;color:var(--soft);font-size:.95rem;max-width:56ch}
.phase strong{color:var(--fg)}

/* ═══════════ FAQ ═══════════ */
.faq{padding:5.5rem 0 9rem}
.acc{display:grid;gap:.8rem}
.acc details{position:relative;background:var(--paper);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--sh-sm);overflow:hidden;transition:box-shadow .25s}
.acc details::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;pointer-events:none;
  background:linear-gradient(180deg,var(--green-lt),var(--green) 40%,var(--gold));
  scale:1 0;transform-origin:50% 0;
  transition:scale .45s cubic-bezier(.22,1,.36,1);
}
.acc details:hover::before,.acc details[open]::before{scale:1 1}
.acc details[open]{box-shadow:var(--sh)}
.acc summary{list-style:none;cursor:pointer;padding:1.05rem 3rem 1.05rem 1.2rem;position:relative;font-family:var(--dsp);font-size:.88rem;color:var(--ink);transition:color .2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--green-dk)}
.acc summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--green-dk);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.acc details[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.acc p{margin:0;padding:0 1.2rem 1.2rem;color:#4B6357;font-size:.95rem;animation:accIn .3s ease}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acc strong{color:var(--ink)}

/* ═══════════ CTA ═══════════ */
.cta{position:relative;text-align:center;padding:7rem 0 9.5rem;overflow:hidden}
.cta__nuts{position:absolute;inset:0;pointer-events:none}
.cta__nuts img{position:absolute;width:150px;opacity:.28}
.cta__nuts img:nth-child(1){top:8%;left:4%;transform:rotate(-14deg)}
.cta__nuts img:nth-child(2){bottom:6%;left:14%;width:120px;transform:rotate(10deg)}
.cta__nuts img:nth-child(3){top:12%;right:7%;width:130px;transform:rotate(12deg)}
.cta__nuts img:nth-child(4){bottom:8%;right:16%;width:110px;transform:rotate(-9deg)}
.cta .wrap{position:relative;z-index:2}
.cta__title{font-family:var(--dsp);font-size:clamp(2.5rem,9vw,6rem);margin:0;line-height:.9;color:var(--ink);text-shadow:5px 5px 0 var(--paper),10px 10px 0 rgba(12,23,17,.2)}
.cta__sub{color:#0D3D26;font-size:1.15rem;margin:1.2rem 0 2.4rem;font-weight:500}
.cta__btns{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* ═══════════ FOOTER ═══════════ */
.foot{padding-top:3.5rem}
.foot__inner{display:grid;gap:1.6rem;text-align:center;padding-bottom:2.5rem}
.foot .nav__logo-txt{color:var(--cream)}
.foot .nav__logo-txt em{color:var(--green-lt)}
.foot__brand p{color:var(--soft);font-size:.9rem;max-width:46ch;margin:.6rem auto 0}
.foot__links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:center}
.foot__links a{font-size:.85rem;color:var(--cream);text-decoration:none;transition:color .2s;opacity:.85}
.foot__links a:hover{color:var(--green-lt);opacity:1}
.foot__legal{font-size:.74rem;color:#8FA79A;max-width:70ch;margin:1rem auto 0;line-height:1.6;opacity:.75}

/* ═══════════ TOAST ═══════════ */
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translate(-50%,calc(100% + 3rem));z-index:9995;
  background:var(--gold);color:var(--ink);font-family:var(--dsp);font-size:.78rem;
  padding:.8rem 1.3rem;border:var(--bw) solid var(--ink);border-radius:999px;box-shadow:var(--sh);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none;
}
.toast.is-on{transform:translate(-50%,0)}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:2rem}
  .hero__art{max-width:min(520px,80vw);margin-inline:auto;justify-self:center;order:-1}
  .hero__stats{gap:1.6rem}
  .mint__inner{grid-template-columns:1fr;gap:2.2rem}
  .nftwall{width:100%;max-width:560px;margin-inline:auto}
  .fly{grid-template-columns:1fr;gap:3rem}
}
@media (max-width:860px){
  .nav__links{
    position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;gap:.2rem;
    background:rgba(255,255,255,.98);backdrop-filter:blur(14px);border:var(--bw) solid var(--ink);
    border-radius:20px;padding:.7rem;box-shadow:var(--sh);
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:.25s;
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:none}
  .nav__links a{padding:.7rem 1rem;text-align:center}
  .nav__burger{display:block;order:3}
  .nav__cta{margin-left:auto;order:2}
  .chap,.chap--flip{grid-template-columns:1fr;gap:1.4rem;text-align:center}
  .chap--flip .chap__art{order:0}
  .chap__art{max-width:230px;margin-inline:auto}
  .chap__num{inset:auto auto -14% 50%;transform:translateX(-50%);font-size:6rem}
  .chap--flip .chap__num{inset:auto auto -14% 50%}
  .chap__txt p{margin-inline:auto}
  .lb__card{grid-template-columns:1fr;max-height:80svh}
  .lb__nav{width:44px;height:44px;font-size:1.4rem;top:auto;bottom:1.2rem;transform:none}
  .lb__nav:hover:not(:disabled){transform:scale(1.12)}
  .lb__nav--prev{left:1.2rem}
  .lb__nav--next{right:1.2rem}
  .mint__nuts img{width:120px !important;opacity:.16}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero{padding-top:6.5rem}
  .hero__title{font-size:clamp(3rem,17vw,5rem)}
  .hero__word .ch{text-shadow:4px 4px 0 var(--green)}
  .hero__word--green .ch{text-shadow:4px 4px 0 var(--gold)}
  .shead__title{text-shadow:3px 3px 0 var(--green)}
  .sec--green .shead__title,.cta__title,.mint__title{text-shadow:4px 4px 0 var(--paper)}
  .marquee--gold,.marquee--green{margin-bottom:3.5rem}
  .shead{margin-bottom:2.5rem}
  .mint,.lore,.coll,.tok,.road,.faq{padding-top:4rem;padding-bottom:6rem}
  .mint{padding-top:5.5rem}
  .hero{padding-bottom:7rem}
  .lore__scroll{gap:3.5rem}
  .grid--lib{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem}
  .lib__search{flex:1 1 100%}
  .lib__count{width:100%;text-align:center;margin:.2rem 0 0}
  .fly__node{font-size:.9em;padding:.4rem .6rem}
  .fly__node--2{right:-4%}.fly__node--4{left:-4%}
  .cta{padding:4.5rem 0 6.5rem}
  .cta__nuts img{width:90px !important}
  .btn--xl{font-size:.86rem;padding:.95em 1.4em}
  .mint__cta .btn{flex:1 1 auto}
}