:root{--y:#ffd600;--y2:#ffe94d;--k:#0d0d0d;--m:#fffdf4;--o:#ff7a00;--r:22px;--sh:6px 6px 0 var(--k)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:Inter,system-ui,sans-serif;background:var(--y);color:var(--k);overflow-x:hidden;line-height:1.6}
img{max-width:100%;display:block}
svg{width:1.2em;height:1.2em;flex:none}
a{color:inherit}
.speedlines{position:fixed;inset:-50%;z-index:-1;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(0,0,0,.07) 0 2deg,transparent 2deg 7deg);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:999}
.wrap{max-width:1180px;margin:auto;padding:0 20px}
.center{text-align:center}
/* nav */
.nav{position:fixed;top:12px;left:12px;right:12px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--m);border:3px solid var(--k);border-radius:999px;box-shadow:var(--sh);transition:transform .3s}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Luckiest Guy',cursive;font-size:1.5rem}
.brand img{border-radius:50%;border:3px solid var(--k)}
.links{display:flex;gap:22px;align-items:center}
.links a{text-decoration:none;font-weight:800}
.links a:not(.btn):hover{color:var(--o)}
.burger{display:none;background:var(--y);border:3px solid var(--k);border-radius:12px;width:46px;height:42px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{width:22px;height:3px;background:var(--k);border-radius:3px;transition:.3s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:14px 24px;font-family:'Luckiest Guy',cursive;font-size:1.15rem;letter-spacing:.5px;text-decoration:none;border:3px solid var(--k);border-radius:999px;box-shadow:var(--sh);transition:transform .2s cubic-bezier(.3,1.8,.5,1),box-shadow .2s;cursor:pointer;isolation:isolate}
.btn:hover{transform:translate(-3px,-3px) scale(1.04);box-shadow:9px 9px 0 var(--k)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--k)}
.btn.small{padding:8px 16px;font-size:1rem;box-shadow:3px 3px 0 var(--k)}
.btn-goo{background:var(--o);color:var(--m)}
.btn-goo::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:999px;background:var(--o);filter:url(#goo);transition:.4s}
.btn-goo::after{content:"";position:absolute;left:20%;bottom:-10px;width:16px;height:16px;border-radius:50%;background:var(--o);z-index:-1;transition:.4s cubic-bezier(.3,1.8,.5,1);transform:scale(0)}
.btn-goo:hover::after{transform:scale(1) translateY(6px)}
.btn-ghost{background:var(--m)}
.btn-ghost:hover{background:var(--k);color:var(--y)}
/* hero */
.hero{position:relative;padding:100px 0 120px;overflow:hidden}
.hero-banner{max-width:1180px;margin:0 auto;padding:0 20px}
.hero-banner img{width:100%;border:4px solid var(--k);border-radius:var(--r);box-shadow:10px 10px 0 var(--k)}
.hero-grid{max-width:1180px;margin:40px auto 0;padding:0 20px;display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.hero-logo{position:relative}
.hero-logo img{border:5px solid var(--k);border-radius:30px;box-shadow:12px 12px 0 var(--k);animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(-1.5deg)}}
.sticker{position:absolute;top:-16px;right:-10px;background:var(--k);color:var(--y);font-family:'Luckiest Guy';padding:8px 16px;border-radius:12px;transform:rotate(8deg);border:3px solid var(--m)}
.kicker{display:inline-flex;gap:8px;align-items:center;background:var(--k);color:var(--y);padding:6px 14px;border-radius:999px;font-weight:800;font-size:.9rem}
h1{font-family:Bangers,cursive;font-size:clamp(3rem,8vw,6.4rem);line-height:.9;letter-spacing:2px;margin:14px 0 6px;color:var(--m);-webkit-text-stroke:3px var(--k);text-shadow:6px 6px 0 var(--k)}
.wobble .ch{display:inline-block;animation:wob 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*60ms)}
@keyframes wob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-6px) rotate(-3deg)}75%{transform:translateY(3px) rotate(2deg)}}
.symbol{font-family:'Luckiest Guy';font-size:clamp(2rem,5vw,3.4rem);color:var(--o);-webkit-text-stroke:2px var(--k);text-shadow:4px 4px 0 var(--k)}
.lead{font-size:1.1rem;max-width:560px;margin:10px 0 20px;font-weight:600}
.ca{display:flex;align-items:center;gap:10px;background:var(--m);border:3px solid var(--k);border-radius:16px;padding:8px 8px 8px 14px;box-shadow:var(--sh);max-width:560px;margin-bottom:24px}
.ca-label{font-family:'Luckiest Guy';background:var(--y);border:2px solid var(--k);border-radius:8px;padding:2px 8px}
.ca code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:1rem}
.ca-copy{display:flex;gap:6px;align-items:center;background:var(--k);color:var(--y);border:0;border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.drip{position:absolute;bottom:-1px;left:0;width:100%;height:110px}
/* marquee */
.marquee{background:var(--k);color:var(--y);border-block:4px solid var(--k);overflow:hidden;transform:rotate(-1.5deg);margin:-30px -20px 0;position:relative;z-index:3}
.track{display:flex;align-items:center;gap:30px;width:max-content;padding:14px 0;animation:mq 22s linear infinite;font-family:Bangers;font-size:2rem;letter-spacing:2px;white-space:nowrap}
.track svg{color:var(--m)}
@keyframes mq{to{transform:translateX(-50%)}}
/* sections */
.section{padding:110px 0;position:relative}
.milk{background:var(--m)}
.yellow{background:transparent}
.dark{background:var(--k);color:var(--m)}
.title{font-family:Bangers;font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:2px;line-height:1;margin-bottom:18px}
.title em{font-style:normal;color:var(--o);-webkit-text-stroke:2px var(--k)}
.title.light em{-webkit-text-stroke:0}
.sub{font-weight:600;margin-bottom:40px;font-size:1.1rem}
.about{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about p{margin-bottom:14px;font-size:1.08rem}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.pills span{background:var(--y);border:3px solid var(--k);border-radius:999px;padding:6px 14px;font-weight:800;box-shadow:3px 3px 0 var(--k)}
.about-cards{display:grid;gap:18px}
.card,.step,.tok-card{background:var(--m);border:4px solid var(--k);border-radius:var(--r);padding:24px;box-shadow:var(--sh);transform-style:preserve-3d;transition:transform .15s}
.card{background:var(--y)}
.card svg,.step svg{width:42px;height:42px;color:var(--o)}
.card h3,.step h3{font-family:'Luckiest Guy';font-size:1.5rem;margin:6px 0}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.meme{grid-column:span 2;background:var(--m);border:4px solid var(--k);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:transform .15s}
.meme:nth-child(4){grid-column:2/span 2}
.meme button.view{display:block;border:0;padding:0;cursor:zoom-in;width:100%;background:none;overflow:hidden}
.meme img{aspect-ratio:1;height:auto;object-fit:cover;width:100%;transition:transform .5s}
.meme:hover img{transform:scale(1.07)}
.meme-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border-top:4px solid var(--k)}
.meme-foot span{font-family:'Luckiest Guy';font-size:1.05rem;line-height:1.1}
.dl{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--o);color:var(--m);border:3px solid var(--k);box-shadow:3px 3px 0 var(--k);flex:none;transition:transform .2s}
.dl:hover{transform:rotate(-12deg) scale(1.1)}
/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:40px 0}
.step{color:var(--k);position:relative}
.step b{position:absolute;top:-20px;right:16px;font-family:Bangers;font-size:2.6rem;color:var(--y);-webkit-text-stroke:2px var(--k)}
/* tokenomics */
.tok{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tok-card{text-align:center;background:var(--y)}
.tok-card small{font-weight:800;text-transform:uppercase;letter-spacing:1px}
.tok-card strong{display:block;font-family:Bangers;font-size:2.4rem;letter-spacing:1px;line-height:1.2;word-break:break-word}
.tok-card span{font-size:.85rem;opacity:.7}
.bar{display:flex;margin-top:30px;border:4px solid var(--k);border-radius:999px;overflow:hidden;box-shadow:var(--sh);font-weight:800}
.bar span{flex:1 1 var(--w);min-width:max-content;padding:12px 16px;background:var(--o);color:var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar span+span{background:var(--k);color:var(--y)}
/* community */
.comm-logo{margin:0 auto 20px;border-radius:50%;border:5px solid var(--k);box-shadow:var(--sh);animation:float 4s ease-in-out infinite}
.socials{display:flex;justify-content:center;flex-wrap:wrap;gap:20px}
.social{display:flex;flex-direction:column;align-items:center;gap:10px;width:180px;padding:26px 10px;background:var(--m);border:4px solid var(--k);border-radius:var(--r);box-shadow:var(--sh);text-decoration:none;font-family:'Luckiest Guy';font-size:1.2rem;transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.social svg{width:48px;height:48px}
.social:hover{transform:translateY(-8px) rotate(-3deg);background:var(--k);color:var(--y)}
/* footer */
.footer{background:var(--k);color:var(--m);padding:50px 0 30px;text-align:center}
.foot-brand{display:flex;justify-content:center;align-items:center;gap:10px;font-family:'Luckiest Guy';font-size:1.3rem;margin-bottom:16px}
.foot-brand img{border-radius:50%}
.foot-brand b{color:var(--y)}
.disclaimer{max-width:780px;margin:0 auto 14px;font-size:.85rem;opacity:.75}
.copy{font-size:.8rem;opacity:.5}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(13,13,13,.92);display:flex;align-items:center;justify-content:center;gap:12px;padding:20px}
.lightbox[hidden]{display:none}
.lightbox figure{max-width:min(86vw,720px);animation:pop .35s cubic-bezier(.3,1.8,.5,1)}
.lightbox img{max-height:76vh;border:4px solid var(--y);border-radius:var(--r);margin:auto}
.lightbox figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--y);font-family:'Luckiest Guy';font-size:1.2rem;margin-top:12px}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.lb-btn{background:var(--y);border:3px solid var(--k);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.lb-close{position:absolute;top:16px;right:16px}
.lb-next svg{transform:scaleX(-1)}
/* reveal + tilt */
.reveal{opacity:0;transform:translateY(40px) scale(.97);transition:opacity .7s,transform .7s cubic-bezier(.2,1.4,.4,1)}
.reveal.in{opacity:1;transform:none}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--k);color:var(--y);padding:12px 22px;border-radius:999px;font-weight:800;z-index:200;border:3px solid var(--y)}
/* responsive */
@media (max-width:980px){
  .steps,.tok{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}.meme,.meme:nth-child(4){grid-column:auto}.meme:nth-child(5){grid-column:1/-1;max-width:calc(50% - 11px);justify-self:center}
}
@media (max-width:820px){
  .burger{display:flex}
  .links{position:fixed;top:78px;left:12px;right:12px;flex-direction:column;background:var(--m);border:3px solid var(--k);border-radius:24px;padding:24px;box-shadow:var(--sh);transform:translateY(-20px) scale(.95);opacity:0;pointer-events:none;transition:.3s}
  .links.open{transform:none;opacity:1;pointer-events:auto}
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-logo{max-width:320px;margin:auto}
  .ca,.lead{margin-inline:auto}.cta{justify-content:center}
}
@media (max-width:560px){
  .steps,.tok,.gallery{grid-template-columns:1fr}.meme:nth-child(5){max-width:none}
  .hero{padding-top:90px}
  h1{-webkit-text-stroke:2px var(--k);text-shadow:4px 4px 0 var(--k)}
  .btn{padding:12px 18px;font-size:1rem}
  .lb-prev,.lb-next{position:absolute;bottom:20px}.lb-prev{left:20px}.lb-next{right:20px}
  .bar{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
.wobble .w{display:inline-block;white-space:nowrap}

/* full-body poses */
.hero{padding-top:110px}
.hero-grid{margin-top:0;grid-template-columns:1.15fr .85fr}
.hero-copy{position:relative;z-index:2}
.hero-pose{position:relative;z-index:4;align-self:end;margin-bottom:-150px;display:flex;justify-content:center}
.hero-pose .pose{position:relative;z-index:2;height:min(820px,92vh);width:auto;filter:drop-shadow(10px 10px 0 #0d0d0d);animation:bob 4.5s ease-in-out infinite;transition:filter .3s;will-change:transform}
.hero-pose:hover .pose{filter:drop-shadow(14px 14px 0 #ff7a00)}
.hero-pose .splash{position:absolute;z-index:1;width:115%;height:auto;top:8%;left:50%;transform:translateX(-50%);animation:blob 7s ease-in-out infinite}
.hero-pose .sticker{top:14%;right:2%;z-index:3}
@keyframes bob{50%{transform:translateY(-18px) rotate(1.2deg)}}
@keyframes blob{50%{transform:translateX(-50%) scale(1.06) rotate(6deg)}}
.hero-banner{position:relative;z-index:1;margin-top:40px}
.edge{overflow:hidden}
.edge .wrap{position:relative;z-index:2}
.edge-pose{position:absolute;z-index:1;bottom:18px;height:min(600px,76%);width:auto;max-width:none;filter:drop-shadow(8px 8px 0 #0d0d0d);transition:transform .9s cubic-bezier(.2,1.5,.4,1),opacity .6s;opacity:0;pointer-events:auto}
.edge-pose.right{right:18px;transform:translateX(70%) rotate(8deg)}
.edge-pose.left{left:18px;height:min(540px,72%,calc(50vw * 1.395 - 541px));transform:translateX(-70%) rotate(-8deg)}
.edge-pose.in{opacity:1;transform:none}
.edge-pose.in:hover{transform:translateY(-14px) rotate(-3deg) scale(1.03)}
.edge-pose.low{height:min(500px,78%);bottom:28px}
#about .wrap{padding-right:300px}
#buy .steps{margin-left:220px}
#buy .wrap{padding-bottom:0}
@media (max-width:1200px){#about .wrap{padding-right:20px}#buy .steps{margin-left:0}.edge-pose{opacity:.0}.edge-pose.in{opacity:.25}}
@media (max-width:820px){
  .hero-pose{margin:10px auto -90px;max-width:100%}
  .hero-pose .pose{height:min(560px,70vh)}
  .hero-grid{grid-template-columns:1fr}
  .edge-pose,.edge-pose.left,.edge-pose.low{height:280px;bottom:10px}.edge-pose.in{opacity:.18}
}
@media (prefers-reduced-motion:reduce){.edge-pose{opacity:1;transform:none}}