:root{
  --lime:#ccff00; --green:#164d24; --deep:#0b2816; --yellow:#ffd82e;
  --orange:#ff7b21; --cream:#fff8dc; --ink:#101510; --white:#fff;
  --radius:28px; --shadow:0 22px 60px rgba(10,30,15,.20);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Fredoka",system-ui,sans-serif;overflow-x:hidden}
body.party{background:#f7ffd9}
a{color:inherit;text-decoration:none}
button{font:inherit}
.noise{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:30}
.confetti:before,.confetti:after{content:"";position:absolute;width:10px;height:10px;border-radius:2px;animation:fall 7s linear infinite}
.confetti:before{left:12%;top:-20px;background:var(--orange);box-shadow:170px 130px var(--green),330px 10px var(--yellow),520px 230px var(--lime),760px 80px var(--orange),940px 320px var(--green),1100px 40px var(--yellow)}
.confetti:after{left:72%;top:-40px;background:var(--yellow);box-shadow:-190px 190px var(--orange),-420px 70px var(--green),-90px 390px var(--lime),190px 260px var(--orange)}
@keyframes fall{to{transform:translateY(110vh) rotate(520deg)}}

.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;background:rgba(255,248,220,.88);backdrop-filter:blur(16px);border-bottom:2px solid rgba(16,21,16,.08)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.05em}
.brand-dot{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green);color:var(--lime);border:3px solid var(--ink);font-weight:800;transform:rotate(-8deg);overflow:hidden}
.brand-dot img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.nav nav{display:flex;gap:26px;font-size:13px;font-weight:700;letter-spacing:.08em}
.nav nav a:hover{color:var(--orange)}
.pill-btn,.main-btn,.ghost-btn{border:2px solid var(--ink);border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer;transition:.2s}
.pill-btn{background:var(--lime);box-shadow:4px 4px 0 var(--ink)}
.pill-btn:hover,.main-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.hero{min-height:760px;padding:70px 7vw 90px;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;background:linear-gradient(135deg,var(--lime),#efff72 48%,#d7ff15)}
.hero-copy{position:relative;z-index:2}
.eyebrow,.kicker{font-size:12px;font-weight:800;letter-spacing:.18em}
.eyebrow{display:inline-block;background:var(--ink);color:var(--lime);padding:9px 13px;border-radius:9px;transform:rotate(-2deg)}
h1,h2,h3,p{margin-top:0}
h1{font-family:"Baloo 2",sans-serif;font-size:clamp(72px,10vw,150px);line-height:.75;margin:28px 0 25px;letter-spacing:-.06em}
h1 span,h2 em{color:var(--green);font-style:normal;text-shadow:4px 4px 0 var(--white)}
.hero-text{font-size:20px;line-height:1.5;max-width:590px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}
.main-btn{display:inline-block;background:var(--orange);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.ghost-btn{display:inline-block;background:rgba(255,255,255,.5)}
.tiny-note{font-size:11px;max-width:550px;opacity:.7}
.hero-art{min-height:560px;position:relative;display:grid;place-items:center}
.sunburst{position:absolute;width:510px;height:510px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.48) 0 8deg,transparent 8deg 16deg);animation:spin 28s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mascot-card{position:relative;width:min(460px,80vw);border:5px solid var(--ink);border-radius:45px;overflow:hidden;background:var(--green);box-shadow:16px 18px 0 var(--ink);animation:bob 3.6s ease-in-out infinite;transform:rotate(2deg)}
.mascot-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.card-shine{position:absolute;inset:-30% -60%;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4) 48%,transparent 60%);animation:shine 5s ease-in-out infinite;z-index:2}
@keyframes shine{0%,55%{transform:translateX(-60%)}80%,100%{transform:translateX(60%)}}
@keyframes bob{50%{transform:rotate(-2deg) translateY(-12px)}}
.card-caption{display:flex;justify-content:space-between;align-items:center;color:var(--lime);padding:12px 20px;font-family:"Baloo 2";font-size:25px}
.sticker{position:absolute;z-index:3;border:3px solid var(--ink);background:var(--orange);padding:10px 14px;border-radius:16px;font-weight:800;box-shadow:5px 5px 0 var(--ink);animation:wobble 2.4s ease-in-out infinite}
.sticker-one{top:8%;left:0;transform:rotate(-8deg)}
.sticker-two{right:0;bottom:10%;background:var(--white);color:var(--green);transform:rotate(7deg)}
@keyframes wobble{50%{transform:rotate(7deg) translateY(-6px)}}
.orbit{position:absolute;border:3px dashed var(--green);border-radius:50%;animation:spin 18s linear infinite}
.orbit-a{width:560px;height:250px;transform:rotate(20deg)}
.orbit-b{width:260px;height:560px;transform:rotate(-25deg);animation-direction:reverse}

.ticker{display:flex;gap:42px;overflow:hidden;white-space:nowrap;background:var(--ink);color:var(--lime);padding:14px 0;font-weight:800;letter-spacing:.06em}
.ticker div{animation:marquee 14s linear infinite}
@keyframes marquee{to{transform:translateX(-500px)}}

.section{padding:110px 7vw}
.section-head{max-width:780px;margin-bottom:45px}
.section-head h2,.chain-copy h2,.manifesto h2{font-family:"Baloo 2";font-size:clamp(48px,7vw,90px);line-height:.85;letter-spacing:-.04em;margin:16px 0}
.story{background:#fff}
.story-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px}
.story-card{padding:32px;border:3px solid var(--ink);border-radius:var(--radius);background:var(--cream);box-shadow:8px 8px 0 var(--ink);min-height:270px}
.story-card.big{background:var(--green);color:white}
.story-card.lime{background:var(--lime)}
.number{font-family:"Baloo 2";font-size:50px;color:var(--orange);line-height:1}
.story-card h3{font-size:27px}
.story-card p{line-height:1.6}
.text-link{font-weight:800;color:var(--lime)}
.story-card:not(.big) .text-link{color:var(--green)}

.memes{background:var(--green);color:white}
.memes .section-head h2{color:white}
.memes .section-head h2 em{color:var(--lime);text-shadow:4px 4px 0 var(--ink)}
.meme-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.meme-card{background:white;color:var(--ink);border:4px solid var(--ink);border-radius:24px;overflow:hidden;box-shadow:8px 8px 0 var(--ink)}
.meme-card.wide{grid-row:span 2}
.meme-card img{display:block;width:100%;height:100%;object-fit:cover;min-height:250px}
.meme-card.wide img{min-height:620px}
.meme-card.neon{background:var(--lime)}
.meme-card.orange{background:var(--orange)}
.meme-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-top:3px solid var(--ink);font-size:11px;font-weight:800}
.meme-meta button{border:2px solid var(--ink);background:var(--cream);border-radius:999px;padding:7px 10px;cursor:pointer;font-size:10px;font-weight:800}
.generated-meme{height:100%;min-height:250px;padding:25px;position:relative;overflow:hidden;background:radial-gradient(circle at 70% 20%,#fff 0 7%,transparent 8%),linear-gradient(145deg,#d7ff15,#ccff00 50%,#8dcf1d)}
.generated-meme .speech{font-size:18px;font-weight:800;background:white;border:3px solid var(--ink);display:inline-block;padding:6px 10px;border-radius:12px;transform:rotate(-4deg)}
.generated-meme h3{font-family:"Baloo 2";font-size:42px;line-height:.85;margin:25px 0}
.coin{position:absolute;right:20px;top:75px;width:82px;height:82px;border:5px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:var(--yellow);font-family:"Baloo 2";font-size:30px;animation:spin 4s linear infinite}
.chain-road{position:absolute;bottom:25px;left:0;right:0;height:75px;background:var(--green);border-top:3px solid var(--ink);transform:skewY(-5deg);display:flex;align-items:center;gap:12px;padding:10px 20px}
.chain-road span{font-size:10px;color:var(--lime);font-weight:800}
.chain-road i{width:28px;height:8px;border-radius:10px;background:var(--lime);display:block}
.cat-mini{position:absolute;right:24px;bottom:22px;font-size:42px;transform:rotate(-5deg)}
.rocket{min-height:250px;display:grid;place-items:center;position:relative;background:repeating-linear-gradient(135deg,#ff9f35 0 18px,#ff7b21 18px 36px)}
.rocket-cat{font-size:70px;animation:bob 1.8s ease-in-out infinite}
.rocket-body{font-family:"Baloo 2";font-size:48px;font-weight:800;background:var(--cream);border:4px solid var(--ink);padding:0 15px;border-radius:18px;transform:rotate(-8deg);position:absolute;bottom:65px}
.rocket-flame{position:absolute;bottom:15px;font-size:38px;animation:flame .4s infinite alternate}
@keyframes flame{to{transform:scale(1.3) translateY(5px)}}
.rocket-text{position:absolute;top:15px;left:15px;font-weight:800;font-size:12px}

.randomizer{margin-top:55px;padding:30px;border:3px solid var(--ink);background:var(--lime);color:var(--ink);border-radius:var(--radius);display:grid;grid-template-columns:1fr 1.3fr auto;gap:20px;align-items:center;box-shadow:8px 8px 0 var(--ink)}
.randomizer h3{font-family:"Baloo 2";font-size:32px;line-height:.9;margin:8px 0}
.caption-output{background:white;border:3px solid var(--ink);border-radius:16px;padding:20px;font-size:20px;font-weight:700;min-height:72px;display:flex;align-items:center}

.chart-section{background:var(--deep);color:white}
.chart-section .kicker{color:var(--lime)}
.chart-section .section-head h2{color:white}
.chart-section .section-head h2 em{color:var(--lime);text-shadow:4px 4px 0 var(--ink)}
.chart-sub{margin-top:14px;font-size:16px;line-height:1.6;opacity:.8;max-width:560px}
.chart-stats{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.stat-pill{background:#123a1c;border:3px solid var(--ink);border-radius:16px;padding:12px 18px;min-width:130px;display:flex;flex-direction:column;gap:6px;box-shadow:5px 5px 0 var(--ink)}
.stat-pill span{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--lime);opacity:.85}
.stat-pill b{font-family:"Baloo 2";font-size:22px;font-weight:700;color:white}
.stat-pill.buy{background:#154a24}
.stat-pill.buy b{color:var(--lime)}
.stat-pill.sell{background:#4a1815}
.stat-pill.sell b{color:#ff8a70}
.chart-frame{position:relative;border:5px solid var(--ink);border-radius:32px;overflow:hidden;box-shadow:14px 14px 0 var(--lime);background:#0b2816;height:min(640px,80vh)}
.chart-frame iframe{display:block;width:100%;height:100%;border:0}
.chart-badge{position:absolute;left:20px;top:16px;z-index:5;background:var(--lime);color:var(--ink);border:3px solid var(--ink);padding:7px 12px;border-radius:12px;font-size:11px;font-weight:800;box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg);pointer-events:none}
.chart-note{margin-top:16px;font-size:11px;opacity:.65}
.chart-note a{text-decoration:underline;color:var(--lime)}

.chain{background:#e9f4dc}
.chain-panel{background:var(--cream);border:4px solid var(--ink);border-radius:38px;box-shadow:12px 12px 0 var(--ink);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.chain-copy{padding:55px}
.chain-copy h2 em{color:var(--orange)}
.chain-copy p{line-height:1.7;max-width:650px}
.chain-stats{display:flex;gap:10px;margin:30px 0}
.chain-stats div{background:white;border:3px solid var(--ink);border-radius:15px;padding:12px 16px;display:flex;flex-direction:column}
.chain-stats b{font-family:"Baloo 2";font-size:28px}
.chain-stats span{font-size:9px;font-weight:800;letter-spacing:.12em}
.chain-art{min-height:450px;background:var(--lime);position:relative;overflow:hidden}
.road{position:absolute;inset:0;background:linear-gradient(155deg,transparent 0 32%,var(--green) 32% 68%,transparent 68%);display:flex;align-items:center;justify-content:center}
.road:before,.road:after{content:"";position:absolute;width:80%;height:5px;background:var(--lime);border-top:3px dashed white}
.road:before{transform:rotate(27deg)} .road:after{transform:rotate(-27deg)}
.road-label{position:absolute;top:28px;right:30px;background:var(--ink);color:var(--lime);padding:9px 12px;border-radius:10px;font-weight:800;transform:rotate(5deg)}
.block{position:absolute;border:4px solid var(--ink);background:white;color:var(--green);font-family:"Baloo 2";font-size:30px;padding:8px 14px;border-radius:14px;box-shadow:5px 5px 0 var(--ink);animation:float 3s ease-in-out infinite}
.b1{left:18%;top:30%}.b2{right:18%;top:45%;animation-delay:.6s}.b3{left:35%;bottom:18%;animation-delay:1.1s}
.cat-rider{font-size:90px;position:absolute;animation:ride 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px) rotate(4deg)}} @keyframes ride{0%{left:-20%;transform:rotate(-5deg)}50%{left:50%;transform:rotate(5deg)}100%{left:110%;transform:rotate(-5deg)}}

.manifesto{background:var(--orange)}
.manifesto-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
.giant-p{font-family:"Baloo 2";font-size:clamp(170px,25vw,360px);font-weight:800;line-height:.65;color:var(--lime);-webkit-text-stroke:7px var(--ink);transform:rotate(-9deg);text-shadow:15px 15px 0 var(--ink)}
.manifesto p{font-size:20px;max-width:650px;line-height:1.6}

footer{padding:35px 7vw;background:var(--ink);color:white;display:flex;align-items:center;justify-content:space-between;gap:25px;flex-wrap:wrap}
footer p{margin:0;opacity:.7;font-size:12px}
.footer-links{display:flex;gap:20px;font-size:12px;font-weight:700;color:var(--lime)}

.reveal{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:none}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:var(--ink);color:var(--lime);padding:13px 18px;border:3px solid var(--lime);border-radius:999px;font-weight:800;opacity:0;pointer-events:none;transition:.25s;z-index:100}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:900px){
  .nav nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:50px}
  .hero-art{min-height:520px}
  .story-grid,.meme-grid,.chain-panel,.manifesto-inner,.randomizer{grid-template-columns:1fr}
  .meme-card.wide{grid-row:auto}
  .meme-card.wide img{min-height:0}
  .chain-art{min-height:380px}
  .giant-p{text-align:center}
}
@media(max-width:560px){
  .nav{padding:10px 4vw}.pill-btn{font-size:11px;padding:9px 12px}
  .hero{padding-left:5vw;padding-right:5vw}
  .section{padding:75px 5vw}
  .hero-art{min-height:430px}
  .mascot-card{width:84vw}
  .orbit-a{width:90vw}.orbit-b{height:90vw;width:42vw}
  .story-grid{gap:14px}
  .chain-copy{padding:35px 25px}
  .chain-stats{flex-wrap:wrap}
  .randomizer{padding:22px}
}

.video-section{background:#fff8dc}
.video-layout{display:grid;grid-template-columns:1.35fr .8fr;gap:40px;align-items:center}
.video-frame{position:relative;background:var(--ink);border:5px solid var(--ink);border-radius:32px;padding:12px;box-shadow:12px 12px 0 var(--lime);overflow:hidden}
.video-frame video{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain;border-radius:20px;background:#07130b}
.video-glow{position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent,var(--lime),transparent,var(--orange),transparent);opacity:.18;animation:spin 14s linear infinite;pointer-events:none}
.video-badge{position:absolute;left:28px;top:28px;background:var(--lime);color:var(--ink);border:3px solid var(--ink);padding:8px 12px;border-radius:12px;font-size:11px;font-weight:800;box-shadow:4px 4px 0 var(--ink);transform:rotate(-3deg)}
.video-copy h3{font-family:"Baloo 2";font-size:clamp(40px,5vw,65px);line-height:.9;margin:15px 0}
.video-copy h3 span{color:var(--orange)}
.video-copy p{font-size:17px;line-height:1.6}
.video-actions{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}
.video-note{font-size:11px;opacity:.65}

@media(max-width:900px){
  .video-frame{padding:8px;box-shadow:8px 8px 0 var(--lime)}
  .video-frame video{width:100%;height:auto;max-height:none}
  .video-badge{left:18px;top:18px;font-size:9px;padding:6px 9px}
}

.contract-bar{
  position:relative;z-index:60;display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;padding:9px 5vw;background:var(--ink);color:white;
  border-bottom:3px solid var(--lime);font-size:11px
}
.contract-label{font-weight:800;color:var(--lime);letter-spacing:.12em}
.ca-copy{
  display:flex;align-items:center;gap:12px;max-width:min(620px,85vw);border:2px solid var(--lime);
  background:#18361f;color:white;border-radius:999px;padding:7px 8px 7px 14px;cursor:pointer
}
.ca-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace;font-size:10px}
.ca-copy b{background:var(--lime);color:var(--ink);border-radius:999px;padding:5px 9px;font-size:9px}
.contract-links{display:flex;gap:8px}
.contract-links a{border:2px solid white;border-radius:999px;padding:6px 11px;font-weight:800}
.contract-links a:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}

.narrative-main{background:var(--lime);padding-top:80px;padding-bottom:80px}
.narrative-card{
  position:relative;overflow:hidden;display:grid;grid-template-columns:.45fr 1.5fr .45fr;
  align-items:center;gap:30px;background:var(--green);color:white;border:4px solid var(--ink);
  border-radius:38px;padding:45px;box-shadow:12px 12px 0 var(--ink)
}
.narrative-card:before{
  content:"";position:absolute;width:500px;height:500px;border-radius:50%;
  right:-180px;top:-180px;background:var(--lime);opacity:.18
}
.narrative-mascot{position:relative;z-index:2;width:145px;height:145px;border-radius:50%;display:grid;place-items:center;
  font-size:78px;background:var(--lime);border:4px solid var(--ink);box-shadow:7px 7px 0 var(--ink);
  animation:bob 3s ease-in-out infinite
}
.narrative-copy{position:relative;z-index:2}
.narrative-copy h2{font-family:"Baloo 2";font-size:clamp(45px,6vw,78px);line-height:.84;letter-spacing:-.04em;margin:12px 0 20px}
.narrative-copy h2 em{color:var(--lime);text-shadow:4px 4px 0 var(--ink)}
.narrative-copy p{font-size:18px;line-height:1.6;max-width:760px}
.accuracy{font-size:12px!important;opacity:.7;font-style:italic}
.gold-coin{
  position:relative;z-index:2;width:145px;height:145px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 25%,#fff4a3 0 8%,#ffd82e 9% 52%,#c68b00 53% 100%);
  border:6px solid var(--ink);box-shadow:8px 8px 0 var(--ink);font-family:"Baloo 2";font-size:40px;color:var(--green);
  transform:rotate(8deg);animation:coinFloat 2.5s ease-in-out infinite
}
@keyframes coinFloat{50%{transform:rotate(-8deg) translateY(-12px)}}

@media(max-width:900px){
  .contract-bar{justify-content:flex-start}
  .ca-copy{max-width:100%;flex:1}
  .narrative-card{grid-template-columns:1fr;text-align:center;padding:32px}
  .narrative-mascot,.gold-coin{margin:auto}
  .chart-frame{height:520px;border-radius:24px}
  .stat-pill{min-width:calc(50% - 6px);flex:1}
}
