/* ============ TOKENS ============ */
:root{
  --ink:#141414;
  --paper:#fff7e8;
  --paper-dim:#fdeecb;
  --green:#6fcf3d;
  --green-deep:#2e7d32;
  --green-dark:#1f6b3b;
  --hero-green:#ccff02;
  --hero-green-deep:#7a9900;
  --tan:#e8b87e;
  --cream:#fff3dd;
  --blue:#3ea8dc;
  --red:#c0392b;
  --gold:#f5c518;

  --border:3px;
  --border-sm:2px;
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:9px 9px 0 var(--ink);

  --font-display:'Luckiest Guy', cursive;
  --font-body:'Fredoka', sans-serif;
  --font-mono:'Space Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  max-width:100%;
}
body.is-loading{overflow:hidden;height:100vh;}

/* ============ PRELOADER ============ */
.preloader{
  position:fixed;inset:0;z-index:999;
  background:var(--hero-green);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
}
.preloader-logo{
  width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:var(--border) solid var(--ink);box-shadow:var(--shadow);
}
.preloader-label{
  font-family:var(--font-display);color:#fff;letter-spacing:2px;font-size:18px;
  -webkit-text-stroke:1.5px var(--ink);margin:0;
}
.preloader-bar{
  width:180px;height:10px;border:var(--border-sm) solid var(--ink);border-radius:20px;
  background:#fff;overflow:hidden;box-shadow:var(--shadow-sm);
}
.preloader-bar span{display:block;height:100%;width:0%;background:var(--gold);}

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed;top:0;left:0;height:4px;width:0%;
  background:linear-gradient(90deg,var(--gold),var(--red));
  z-index:200;
}

/* ============ FALLING LEAVES (hero background only) ============ */
.leaves-layer{
  position:absolute;inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.leaf{
  position:absolute;
  top:-64px;
  width:52px;height:52px;
  opacity:.55;
  animation:leaf-fall linear infinite;
  will-change:transform;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}
@keyframes leaf-fall{
  0%   { transform:translate(0,0) rotate(var(--r0,0deg)); }
  25%  { transform:translate(var(--sway,26px), 25vh) rotate(calc(var(--r0,0deg) + 20deg)); }
  50%  { transform:translate(calc(var(--sway,26px) * -1), 50vh) rotate(calc(var(--r0,0deg) + 40deg)); }
  75%  { transform:translate(var(--sway,26px), 75vh) rotate(calc(var(--r0,0deg) + 60deg)); }
  100% { transform:translate(0, 112vh) rotate(calc(var(--r0,0deg) + 80deg)); }
}
.leaf-1{ left:4%;  width:40px; --r0:-10deg; --sway:20px; opacity:.5;  animation-duration:11s;   animation-delay:-1s; }
.leaf-2{ left:16%; width:60px; --r0:16deg;  --sway:34px; opacity:.62; animation-duration:14.5s; animation-delay:-6s; }
.leaf-3{ left:28%; width:34px; --r0:22deg;  --sway:18px; opacity:.45; animation-duration:9s;    animation-delay:-3s; }
.leaf-4{ left:42%; width:48px; --r0:-18deg; --sway:26px; opacity:.55; animation-duration:13s;   animation-delay:-8s; }
.leaf-5{ left:56%; width:38px; --r0:8deg;   --sway:22px; opacity:.5;  animation-duration:10s;   animation-delay:-4s; }
.leaf-6{ left:68%; width:50px; --r0:-24deg; --sway:30px; opacity:.6;  animation-duration:15s;   animation-delay:-10s; }
.leaf-7{ left:78%; width:30px; --r0:12deg;  --sway:16px; opacity:.42; animation-duration:8s;    animation-delay:-2s; }
.leaf-8{ left:88%; width:58px; --r0:-6deg;  --sway:34px; opacity:.6;  animation-duration:16s;   animation-delay:-12s; }
.leaf-9{ left:94%; width:36px; --r0:18deg;  --sway:20px; opacity:.48; animation-duration:9.5s;  animation-delay:-5s; }

@media (prefers-reduced-motion: reduce){
  .leaf{ animation:none; opacity:.3; }
}
@media (max-width:640px){
  .leaf-3, .leaf-5, .leaf-7, .leaf-9{ display:none; }
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:.5px;margin:0;}

.section-inner{max-width:1120px;margin:0 auto;padding:0 24px;}
.section{padding:96px 0;}
.section-alt{background:var(--paper-dim);border-top:var(--border) solid var(--ink);border-bottom:var(--border) solid var(--ink);}
.section-title{font-size:clamp(32px,5vw,52px);text-align:center;margin-bottom:48px;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);
  font-size:16px;
  padding:14px 26px;
  border:var(--border) solid var(--ink);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  background:var(--cream);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  user-select:none;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink);}
.btn-buy{background:var(--gold);}
.btn-outline{background:var(--paper);}
.btn-lg{padding:16px 32px;font-size:18px;}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:var(--border) solid var(--ink);
}
.nav-inner{
  max-width:1200px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo{
  width:44px;height:44px;border-radius:50%;object-fit:cover;
  border:var(--border-sm) solid var(--ink);
  box-shadow:var(--shadow-sm);
}
.brand-word{font-family:var(--font-display);font-size:22px;letter-spacing:.5px;}

.nav-links{display:flex;gap:26px;}
.nav-links a{
  font-family:var(--font-display);
  font-size:14px;letter-spacing:.5px;
  position:relative;padding:4px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:3px;background:var(--red);
  transition:width .2s ease;
}
.nav-links a:hover::after{width:100%;}

.nav-actions{display:flex;align-items:center;gap:14px;}
.nav-buy{padding:10px 20px;font-size:14px;}

.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;border:var(--border-sm) solid var(--ink);border-radius:8px;
  background:var(--cream);box-shadow:var(--shadow-sm);
}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink);margin:0 auto;}

/* ============ HERO ============ */
.hero{
  position:relative;
  background:linear-gradient(180deg,var(--hero-green) 0%,var(--hero-green) 60%,var(--hero-green-deep) 100%);
  border-bottom:var(--border) solid var(--ink);
  overflow:hidden;
  padding-top:40px;
}
.hero-sky{position:absolute;inset:0;pointer-events:none;}
.cloud{
  position:absolute;background:#fff;border:var(--border-sm) solid var(--ink);border-radius:50px;
  opacity:.9;
}
.cloud-a{width:140px;height:50px;top:60px;left:8%;animation:drift 22s linear infinite;}
.cloud-b{width:100px;height:40px;top:130px;right:12%;animation:drift 28s linear infinite reverse;}
.cloud-c{width:80px;height:32px;top:40px;right:35%;animation:drift 18s linear infinite;}
@keyframes drift{
  0%{transform:translateX(0);}
  50%{transform:translateX(24px);}
  100%{transform:translateX(0);}
}

.hero-inner{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;padding:60px 24px 120px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
}
.kicker{
  font-family:var(--font-mono);font-size:13px;letter-spacing:1px;
  background:var(--ink);color:var(--paper);display:inline-block;
  padding:6px 12px;border-radius:8px;margin-bottom:18px;
}
.hero-title{font-size:clamp(48px,8vw,96px);line-height:.95;color:#fff;
  -webkit-text-stroke:3px var(--ink);
  text-shadow:6px 6px 0 var(--ink);
}
.hero-title .line{display:block;}
.hero-title .line-accent{color:var(--gold);}
.hero-sub{
  font-size:18px;line-height:1.5;max-width:480px;margin:22px 0 26px;
  background:var(--paper);border:var(--border-sm) solid var(--ink);border-radius:14px;
  padding:14px 18px;box-shadow:var(--shadow-sm);
}

.ca-box{
  display:flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper);
  border:var(--border) solid var(--ink);border-radius:12px;
  padding:10px 14px;margin-bottom:24px;max-width:520px;
  font-family:var(--font-mono);font-size:13px;
  box-shadow:var(--shadow-sm);
}
.ca-label{background:var(--red);color:#fff;padding:3px 8px;border-radius:6px;font-weight:700;flex-shrink:0;}
.ca-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ca-copy{
  font-family:var(--font-display);background:var(--gold);color:var(--ink);
  border:none;border-radius:6px;padding:6px 12px;cursor:pointer;flex-shrink:0;
}
.ca-copy:hover{filter:brightness(1.05);}

.hero-actions{display:flex;flex-wrap:wrap;gap:14px;}

.hero-art{position:relative;display:flex;justify-content:center;align-items:center;}
.hero-art-shadow{
  position:absolute;width:80%;height:24px;background:rgba(0,0,0,.25);
  border-radius:50%;bottom:0;filter:blur(4px);
}
.hero-img{
  width:100%;max-width:440px;border:var(--border) solid var(--ink);border-radius:24px;
  box-shadow:var(--shadow-lg);
  animation:float 4s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(-1deg);}
  50%{transform:translateY(-14px) rotate(1deg);}
}
.hero-bubble{
  position:absolute;top:0;right:0;
  background:#fff;border:var(--border-sm) solid var(--ink);border-radius:16px;
  padding:8px 14px;font-family:var(--font-display);font-size:14px;
  box-shadow:var(--shadow-sm);
  transform:rotate(6deg);
}

.hero-ground{
  position:relative;height:60px;background:var(--hero-green-deep);
  border-top:var(--border) solid var(--ink);
}

/* ============ TICKER ============ */
.ticker{
  background:var(--ink);color:var(--paper);
  border-bottom:var(--border) solid var(--ink);
  overflow:hidden;white-space:nowrap;padding:14px 0;
}
.ticker-track{
  display:inline-flex;gap:40px;
  font-family:var(--font-display);font-size:22px;letter-spacing:1px;
  animation:scroll-left 18s linear infinite;
  padding-left:100%;
}
.ticker-track span::after{content:"•";margin-left:40px;color:var(--gold);}
@keyframes scroll-left{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}

/* ============ STORY ============ */
.story-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.story-card{
  position:relative;background:#fff;border:var(--border) solid var(--ink);
  border-radius:16px;padding:28px 20px 20px;box-shadow:var(--shadow);
  transform:rotate(var(--rot,0deg));
  will-change:transform;
}
.story-num{
  position:absolute;top:-16px;left:-10px;
  background:var(--red);color:#fff;font-family:var(--font-mono);font-weight:700;
  border:var(--border-sm) solid var(--ink);border-radius:50%;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  font-size:13px;
}
.story-card p{margin:0;font-size:15px;line-height:1.5;}

/* ============ NUMBERS ============ */
.numbers-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
}
.numbers-copy .section-title{text-align:left;margin-bottom:20px;}
.lead{font-size:17px;line-height:1.6;margin-bottom:26px;}
.supply-box{
  display:inline-flex;flex-direction:column;gap:4px;
  background:var(--ink);color:var(--paper);border-radius:14px;
  padding:16px 22px;margin-bottom:24px;box-shadow:var(--shadow-sm);
}
.supply-label{font-family:var(--font-mono);font-size:12px;opacity:.8;}
.supply-value{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--gold);}
.legend li{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--font-mono);font-size:14px;}
.legend i{width:16px;height:16px;border-radius:4px;border:var(--border-sm) solid var(--ink);display:inline-block;}

.donut-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.donut{
  width:260px;height:260px;border-radius:50%;
  border:var(--border) solid var(--ink);
  background:conic-gradient(
    var(--green) 0% calc(var(--p1) * 1%),
    var(--paper-dim) calc(var(--p1) * 1%) 100%
  );
  box-shadow:var(--shadow-lg);
}
.donut-hole{
  position:absolute;width:130px;height:130px;border-radius:50%;background:var(--paper);
  border:var(--border-sm) solid var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.donut-hole span{font-family:var(--font-display);font-size:26px;}
.donut-hole small{font-family:var(--font-mono);font-size:11px;opacity:.7;}

/* ============ ROADMAP ============ */
.timeline{position:relative;padding:20px 0;overflow-x:hidden;}
.timeline-line{
  position:absolute;left:50%;top:0;bottom:0;width:4px;background:repeating-linear-gradient(180deg,var(--ink) 0 10px, transparent 10px 20px);
  transform:translateX(-50%);
}
.timeline-progress{
  position:absolute;left:50%;top:0;width:6px;height:0%;
  background:linear-gradient(180deg,var(--gold),var(--red));
  border-radius:6px;transform:translateX(-50%);
  box-shadow:0 0 0 2px var(--ink);
}
.phase{display:flex;margin-bottom:36px;position:relative;}
.phase-left{justify-content:flex-start;}
.phase-right{justify-content:flex-end;}
.phase-card{
  position:relative;width:44%;background:#fff;border:var(--border) solid var(--ink);
  border-radius:16px;padding:24px;box-shadow:var(--shadow);
}
.phase-card h3{font-size:22px;margin-bottom:10px;}
.phase-card p{margin:0;font-size:15px;line-height:1.5;}
.stamp{
  position:absolute;top:-18px;right:-14px;
  background:var(--red);color:#fff;font-family:var(--font-display);font-size:13px;
  padding:6px 12px;border-radius:8px;border:var(--border-sm) solid var(--ink);
  transform:rotate(12deg);
}

/* ============ HOW TO BUY ============ */
.howtobuy-head{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:48px;}
.howtobuy-head .section-title{margin-bottom:0;}
.chain-badge{
  font-family:var(--font-mono);font-size:13px;background:var(--green);
  border:var(--border-sm) solid var(--ink);border-radius:20px;padding:6px 16px;
  box-shadow:var(--shadow-sm);
}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.step{
  background:#fff;border:var(--border) solid var(--ink);border-radius:16px;
  padding:26px 20px;box-shadow:var(--shadow);position:relative;
}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--gold);
  border:var(--border-sm) solid var(--ink);font-family:var(--font-display);
  margin-bottom:14px;
}
.step h3{font-size:18px;margin-bottom:10px;}
.step p{font-size:14px;line-height:1.5;margin:0 0 14px;}
.step-cta{font-size:13px;padding:10px 16px;}

/* ============ COMMUNITY ============ */
.pack-grid{display:grid;grid-template-columns:1fr;max-width:340px;margin:0 auto;gap:24px;}
.pack-card{
  background:#fff;border:var(--border) solid var(--ink);border-radius:18px;
  padding:32px 24px;text-align:center;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.pack-icon{font-size:36px;}
.pack-card h3{font-size:22px;}
.pack-card p{margin:0;font-size:14px;}

/* ============ FAQ ============ */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.faq-item{
  background:#fff;border:var(--border) solid var(--ink);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--font-display);font-size:16px;padding:18px 20px;
  display:flex;justify-content:space-between;align-items:center;color:var(--ink);
}
.faq-toggle{font-size:20px;transition:transform .2s ease;}
.faq-item.open .faq-toggle{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{margin:0;padding:0 20px 18px;font-size:15px;line-height:1.55;}
.faq-item.open .faq-a{max-height:220px;}

/* ============ FOOTER ============ */
.footer{
  background:var(--ink);color:var(--paper);padding:48px 24px 28px;text-align:center;
}
.footer-inner{
  max-width:1000px;margin:0 auto 24px;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:20px;
}
.footer .brand-word{color:var(--paper);}
.footer-links{display:flex;gap:22px;font-family:var(--font-display);font-size:14px;}
.footer-made{font-family:var(--font-mono);font-size:13px;opacity:.75;margin:0 0 6px;}
.footer-copy{font-family:var(--font-mono);font-size:12px;opacity:.55;margin:0;}

/* ============ TOAST ============ */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,120%);
  background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:12px;
  font-family:var(--font-mono);font-size:14px;border:var(--border-sm) solid var(--gold);
  box-shadow:var(--shadow-sm);transition:transform .3s ease;z-index:100;
}
.toast.show{transform:translate(-50%,0);}

/* ============ GSAP HELPERS ============ */
.hero-title .line{overflow:hidden;padding:2px 0;}
.hero-title .char{display:inline-block;will-change:transform;}
.section-title .word{display:inline-block;will-change:transform;}
.btn,.story-card,.phase-card,.step,.pack-card{will-change:transform;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@media (hover:hover) and (pointer:fine){
  .story-card,.phase-card,.step,.pack-card{transform-style:preserve-3d;}
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .nav-links{
    position:fixed;top:69px;left:0;right:0;background:var(--paper);
    flex-direction:column;padding:20px 24px;gap:18px;
    border-bottom:var(--border) solid var(--ink);
    transform:translateY(-150%);transition:transform .3s ease;
  }
  .nav-links.open{transform:translateY(0);}
  .hamburger{display:flex;}
  .hero-inner{grid-template-columns:1fr;text-align:center;}
  .hero-sub{margin-left:auto;margin-right:auto;}
  .ca-box{margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .story-grid{grid-template-columns:repeat(2,1fr);}
  .numbers-grid{grid-template-columns:1fr;text-align:center;}
  .numbers-copy .section-title{text-align:center;}
  .supply-box,.ca-box{margin-left:auto;margin-right:auto;}
  .legend{display:inline-block;text-align:left;}
  .timeline-line,.timeline-progress{left:20px;}
  .phase-left,.phase-right{justify-content:flex-start;padding-left:44px;}
  .phase-card{width:100%;}
  .steps-grid{grid-template-columns:repeat(2,1fr);}
  .pack-grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .story-grid{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr;}
  .nav-buy{display:none;}
}