@font-face{font-family:Fredoka;src:url(/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Nunito;src:url(/fonts/nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{--cream:#fff4e3;--sand:#f3dfc1;--capy:#8a5a2e;--bark:#4a2e17;--terra:#d9653b;--yuzu:#ffab2e;--teal:#1fb5a8;--teal2:#14857c;--deep:#0f3d44;--ink:#2b1b0e;--sol1:#9945ff;--sol2:#14f195;--r:22px;--sh:0 18px 40px -18px rgba(74,46,23,.45)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}
html,body{overflow-x:clip}body{margin:0;font-family:Nunito,system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}h1,h2,h3{font-family:Fredoka,Nunito,sans-serif;line-height:1.05;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(2rem,4.6vw,3.4rem);color:var(--bark)}
.wrap{width:min(1180px,92vw);margin:auto}.c{text-align:center}.sub{font-size:1.15rem;opacity:.85;margin:0 auto 2rem;max-width:640px}
.eyebrow{font-family:Fredoka;font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.85rem;color:var(--terra);margin:0 0 .6rem}
#prog{position:fixed;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--yuzu),var(--terra),var(--teal));transform-origin:0 50%;transform:scaleX(0);z-index:60}
/* header */
header{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:1rem;padding:.8rem 4vw;transition:.35s}
header.scrolled{background:rgba(255,244,227,.86);backdrop-filter:blur(12px);box-shadow:0 6px 24px -14px rgba(74,46,23,.5);padding:.5rem 4vw}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:Fredoka}
.brand img{width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 6px 14px -6px rgba(0,0,0,.5);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.brand:hover img{transform:rotate(360deg)}
.brand b{font-size:1.35rem;color:var(--bark)}.brand span{font-size:.8rem;font-weight:700;background:var(--teal);color:#fff;padding:.1rem .5rem;border-radius:99px}
.nav{margin-left:auto;display:flex;gap:.3rem}
.nav a{text-decoration:none;font-weight:800;padding:.45rem .85rem;border-radius:99px;transition:.25s;color:var(--bark)}
.nav a:hover,.nav a.on{background:var(--bark);color:var(--cream)}
.burger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;padding:9px}.burger i{display:block;height:3px;background:var(--bark);border-radius:3px;margin:5px 0;transition:.3s}
/* buttons */
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0}.ctas.c{justify-content:center}
.btn{--b:var(--terra);position:relative;display:inline-flex;align-items:center;gap:.55rem;font-family:Fredoka;font-weight:600;font-size:1.08rem;text-decoration:none;padding:.85rem 1.35rem;border-radius:999px;background:var(--b);color:#fff;border:0;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.22),var(--sh);transition:transform .2s cubic-bezier(.3,1.7,.5,1),box-shadow .2s;overflow:hidden}
.btn svg{width:20px;height:20px}
.btn:hover{transform:translateY(-3px) scale(1.04)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.22)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:.7s}
.btn:hover::after{transform:translateX(120%)}
.btn.buy{background:linear-gradient(135deg,var(--yuzu),var(--terra))}.btn.teal{--b:var(--teal2)}
.btn.ghost{background:#fff;color:var(--bark);box-shadow:0 5px 0 rgba(74,46,23,.25),var(--sh)}
.btn.off{background:#e9e2d6;color:#8d8271;cursor:not-allowed;box-shadow:0 4px 0 rgba(0,0,0,.08)}.btn.off:hover{transform:none}
.btn.off em{font-style:normal;font-size:.72rem;background:#b9ae9d;color:#fff;padding:.08rem .45rem;border-radius:99px;text-transform:uppercase;letter-spacing:.08em}
.btn.sm{padding:.55rem 1rem;font-size:.95rem}
/* CA */
.ca{display:flex;align-items:center;gap:.6rem;background:#fff;border:2px dashed var(--capy);border-radius:18px;padding:.5rem .5rem .5rem 1rem;max-width:640px;box-shadow:var(--sh)}
.ca .lbl{font-family:Fredoka;font-weight:600;font-size:.78rem;color:#fff;background:var(--capy);padding:.15rem .55rem;border-radius:99px;white-space:nowrap}
.ca code{flex:1;font-size:.92rem;overflow-wrap:anywhere;font-weight:700;color:var(--bark)}
.ca button{font-family:Fredoka;font-weight:600;border:0;border-radius:12px;padding:.6rem 1rem;background:var(--teal);color:#fff;cursor:pointer;transition:.2s}
.ca button:hover{background:var(--deep);transform:scale(1.06)}
.c .ca,.join .ca{margin:1rem auto}
/* hero */
.hero{position:relative;min-height:100vh;padding:120px 0 170px;background:radial-gradient(120% 80% at 80% 0%,#ffd48a 0%,transparent 55%),linear-gradient(180deg,#ffe7c2 0%,#ffcf9a 45%,#ffb58a 100%);overflow:hidden}
.sun{position:absolute;width:520px;height:520px;right:-120px;top:-120px;border-radius:50%;background:radial-gradient(circle,#fff6c9 0%,#ffd36b 45%,rgba(255,180,80,0) 70%);animation:pulse 7s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.hero-in{position:relative;z-index:2;width:min(1180px,92vw);margin:auto;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;background:rgba(255,255,255,.7);padding:.35rem .9rem;border-radius:99px;font-size:.9rem;margin:0 0 1rem}
.dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--sol1),var(--sol2));box-shadow:0 0 0 0 rgba(20,241,149,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(20,241,149,0)}}
h1{font-size:clamp(3.2rem,9vw,7rem);color:var(--bark);margin:0}
h1 .w{display:inline-block;background:linear-gradient(180deg,var(--bark),var(--capy));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #fff)}
h1 .tk{display:inline-block;font-size:.42em;vertical-align:middle;background:var(--teal);color:#fff;padding:.15em .5em;border-radius:.6em;transform:rotate(-6deg);animation:wob 4s ease-in-out infinite;box-shadow:0 6px 0 var(--teal2)}
@keyframes wob{50%{transform:rotate(5deg) translateY(-4px)}}
.lead{font-family:Fredoka;font-size:clamp(1.3rem,2.6vw,1.9rem);margin:.6rem 0 .2rem;color:var(--bark)}.lead b{color:var(--terra)}
.tag{font-weight:800;opacity:.8;margin:0}
.hero-art{position:relative;display:grid;place-items:center}
.ring{position:absolute;width:min(480px,82vw);aspect-ratio:1;border-radius:50%;border:3px dashed rgba(138,90,46,.35);animation:spin 40s linear infinite}
.ring::before{content:"";position:absolute;inset:-26px;border-radius:50%;border:2px solid rgba(31,181,168,.35);animation:spin 25s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.coin{position:relative;border:0;background:none;padding:0;cursor:pointer;width:min(380px,70vw);aspect-ratio:1;border-radius:50%;animation:float 5s ease-in-out infinite;transition:transform .15s;perspective:800px}
.coin img{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 10px #fff,0 0 0 18px var(--yuzu),0 40px 60px -20px rgba(74,46,23,.6);transition:transform .2s}
.coin:active img{transform:scale(.94)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -18px}}
.pet{position:relative;margin-top:2.2rem;font-weight:800;background:#fff;padding:.4rem 1rem;border-radius:99px;box-shadow:var(--sh);font-size:.92rem}.pet b{color:var(--terra)}
.heart{position:fixed;pointer-events:none;z-index:70;font-size:24px;animation:rise 1.1s ease-out forwards}
@keyframes rise{to{transform:translate(var(--dx),-120px) scale(1.4) rotate(var(--r));opacity:0}}
.floaters{position:absolute;inset:0;z-index:1}
.yz{position:absolute;left:var(--x);top:var(--y);width:calc(56px*var(--s));height:calc(56px*var(--s));border:0;background:none;padding:0;cursor:pointer;animation:bob var(--t) ease-in-out infinite;transition:scale .2s}
.yz:hover{scale:1.25}.yz.pop{animation:pop .5s forwards}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(14deg)}}
@keyframes pop{to{transform:scale(2);opacity:0}}
.waves{position:absolute;left:0;bottom:-1px;width:100%;height:160px;z-index:3}
.waves path{fill:var(--teal)}.waves .w1{opacity:.35;animation:wave 9s linear infinite}.waves .w2{opacity:.55;animation:wave 6s linear infinite reverse}.waves .w3{fill:var(--deep);animation:wave 12s linear infinite}
@keyframes wave{0%,100%{transform:translateX(0)}50%{transform:translateX(-60px)}}
.steam{position:fixed;inset:auto 0 0;height:100vh;pointer-events:none;z-index:5;opacity:.55}
.steam i{position:absolute;bottom:-40px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%);animation:steam 14s linear infinite}
.steam i:nth-child(odd){animation-duration:18s}
.steam i:nth-child(1){left:3%;animation-delay:0s}.steam i:nth-child(2){left:10%;animation-delay:-3s}.steam i:nth-child(3){left:18%;animation-delay:-7s}.steam i:nth-child(4){left:26%;animation-delay:-11s}.steam i:nth-child(5){left:34%;animation-delay:-2s}.steam i:nth-child(6){left:42%;animation-delay:-9s}.steam i:nth-child(7){left:50%;animation-delay:-5s}.steam i:nth-child(8){left:58%;animation-delay:-13s}.steam i:nth-child(9){left:66%;animation-delay:-1s}.steam i:nth-child(10){left:74%;animation-delay:-8s}.steam i:nth-child(11){left:82%;animation-delay:-4s}.steam i:nth-child(12){left:90%;animation-delay:-12s}.steam i:nth-child(13){left:96%;animation-delay:-6s}.steam i:nth-child(14){left:46%;animation-delay:-15s}
@keyframes steam{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.7}100%{transform:translateY(-105vh) translateX(40px) scale(2.4);opacity:0}}
main,footer{position:relative;z-index:1}
/* marquee */
.marquee{background:var(--deep);color:var(--cream);overflow:hidden;padding:1rem 0;border-block:4px solid var(--yuzu);transform:rotate(-1.2deg) scale(1.02);position:relative;z-index:4;margin-top:-6px}
.track{display:flex;gap:2rem;width:max-content;animation:mq 34s linear infinite;align-items:center}
.marquee:hover .track{animation-play-state:paused}
.track span{font-family:Fredoka;font-weight:600;font-size:1.5rem;white-space:nowrap}.track i svg{width:30px;height:30px;animation:spin 6s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
/* sections */
.sec{padding:clamp(80px,11vw,140px) 0;position:relative}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.art{position:relative;border-radius:var(--r);transition:transform .25s}
.art img{border-radius:var(--r);box-shadow:0 0 0 8px #fff,var(--sh);width:100%;height:auto}
.sticker{position:absolute;top:-16px;right:-10px;background:var(--terra);color:#fff;font-family:Fredoka;font-weight:600;padding:.4rem .9rem;border-radius:99px;transform:rotate(8deg);box-shadow:var(--sh);animation:wob 3.5s ease-in-out infinite}
.copy p{font-size:1.08rem}
.about{background:var(--cream)}
.lore{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:800;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:14px;transition:.25s}
.lore svg{width:18px;height:18px}.lore em{font-style:normal;transition:.25s}.lore:hover{background:var(--teal2)}.lore:hover em{transform:translateX(6px)}
/* rivalry */
.rivalry{background:linear-gradient(180deg,var(--sand),#ffe2c0);overflow:hidden}
.rivalry::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,171,46,.25),transparent 40%),radial-gradient(circle at 80% 70%,rgba(31,181,168,.2),transparent 40%)}
.vs{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center}
.card{background:#fff;border-radius:var(--r);padding:2rem;box-shadow:var(--sh);transition:transform .25s}
.card h3{font-size:1.8rem}.card ul{list-style:none;padding:0;margin:0}.card li{padding:.55rem 0 .55rem 2rem;position:relative;font-weight:700;border-bottom:1px dashed #e8d6bd}
.card li::before{position:absolute;left:0}.doge li::before{content:"😰"}.capy li::before{content:"🍊"}
.doge{border-top:8px solid #e0a43a;opacity:.92}.capy{border-top:8px solid var(--teal);transform:scale(1.03)}
.vsb{font-family:Fredoka;font-weight:700;font-size:2rem;width:84px;height:84px;display:grid;place-items:center;border-radius:50%;background:var(--terra);color:#fff;box-shadow:0 0 0 8px #fff,var(--sh);animation:beat 1.6s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.12) rotate(-8deg)}}
.stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
.stat{background:var(--deep);color:var(--cream);border-radius:18px;padding:1.4rem;text-align:center}
.stat b{display:block;font-family:Fredoka;font-size:2.6rem;color:var(--yuzu)}.stat span{font-weight:700;opacity:.85}
/* howto */
.howto{background:linear-gradient(180deg,#e3f6f2,#c7ece6)}
.rev .copy{order:1}.rev .art{order:2}
.steps{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.9rem}
.steps li{display:flex;gap:1rem;align-items:flex-start;background:#fff;border-radius:18px;padding:1rem 1.2rem;box-shadow:var(--sh);transition:transform .25s}
.steps b{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;font-family:Fredoka;font-size:1.4rem}
.steps h3{font-size:1.25rem;margin:.1rem 0 .2rem;color:var(--bark)}.steps p{margin:0;font-size:.98rem}
/* memes */
.memes{background:var(--deep);color:var(--cream)}.memes h2{color:var(--cream)}.memes .eyebrow{color:var(--yuzu)}
.masonry{columns:3 300px;column-gap:1.2rem}
.tile{break-inside:avoid;margin:0 0 1.2rem;background:#fff;border-radius:18px;padding:8px;box-shadow:0 20px 40px -20px rgba(0,0,0,.7);transition:transform .25s}
.tile button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:12px;overflow:hidden}
.tile img{width:100%;height:auto;transition:transform .5s}.tile:hover img{transform:scale(1.04)}
.tile figcaption{color:var(--bark);font-weight:800;font-size:.92rem;padding:.55rem .4rem .2rem}
/* join */
.join{background:linear-gradient(180deg,var(--deep),#0a2a30);color:var(--cream);padding-top:60px;text-align:center}
.banner{width:min(1500px,96vw);margin:0 auto 2.5rem;border-radius:28px;overflow:hidden;box-shadow:0 0 0 6px var(--yuzu),0 30px 70px -20px rgba(0,0,0,.8)}
.banner img{width:100%;height:auto;transition:transform 1.2s}.banner:hover img{transform:scale(1.02)}
.join h2{color:var(--cream);font-size:clamp(2.4rem,6vw,4.4rem)}.join .ca{text-align:left}
footer{background:#08222a;color:#cfe5e1;padding:2.5rem 0;text-align:center;font-size:.9rem}
footer .brand{justify-content:center;margin-bottom:1rem}footer .brand b{color:var(--cream)}footer p{max-width:720px;margin:.4rem auto;opacity:.8}.sm{font-size:.8rem}
/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(8,30,34,.92);display:grid;place-items:center;padding:3vw}
.lb[hidden]{display:none}
.lb figure{margin:0;max-width:min(1100px,92vw);animation:zin .35s cubic-bezier(.3,1.5,.5,1)}
.lb img{max-height:82vh;width:auto;max-width:100%;margin:auto;border-radius:14px}
.lb figcaption{text-align:center;color:#fff;font-weight:800;margin-top:.8rem}
.lb button{position:absolute;border:0;background:#fff;color:var(--bark);width:52px;height:52px;border-radius:50%;font-size:2rem;cursor:pointer;line-height:1}
.lb-x{top:18px;right:18px}.lb-p{left:18px;top:50%}.lb-n{right:18px;top:50%}
@keyframes zin{from{transform:scale(.85);opacity:0}}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);background:var(--bark);color:#fff;font-weight:800;padding:.8rem 1.3rem;border-radius:99px;z-index:95;transition:.35s cubic-bezier(.3,1.5,.5,1)}
.toast{visibility:hidden;opacity:0}.toast.on{transform:translate(-50%,0);visibility:visible;opacity:1}
/* reveal */
.rv{opacity:0;transform:translateY(36px) scale(.98);transition:opacity .8s ease var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.ripple{position:fixed;pointer-events:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--teal);z-index:80;animation:rip .7s ease-out forwards}
@keyframes rip{to{transform:scale(6);opacity:0}}
@media (max-width:900px){
 .nav{position:fixed;inset:64px 4vw auto;flex-direction:column;background:var(--cream);padding:1rem;border-radius:18px;box-shadow:var(--sh);transform:translateY(-20px);opacity:0;pointer-events:none;transition:.3s}
 .nav.open{transform:none;opacity:1;pointer-events:auto}.burger{display:block}header .btn.sm{margin-left:auto}
 .hero-in,.grid2{grid-template-columns:1fr}.hero-art{order:-1}.rev .art{order:-1}
 .vs{grid-template-columns:1fr}.vsb{margin:auto}.stats{grid-template-columns:repeat(2,1fr)}
 .ca code{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}