:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}

/* Layout: icy sky band with the clown-faced mascot, a scrolling ticker, then stacked plain sections. Single committed light look. */
:root{
  --ice:#E4F3FA; --peng:#8AB4F8; --navy:#14213D; --clown:#D7262E; --diamond:#2347C8; --snow:#FFFFFF; --beak:#F5B547;
  --display:"Lilita One","Arial Black",system-ui,sans-serif;
  --body:"Nunito",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--ice);color:var(--navy);font-family:var(--body);font-size:17px;line-height:1.55}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2{font-family:var(--display);font-weight:400;line-height:1;text-wrap:balance;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--diamond);outline-offset:3px}

nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--ice);border-bottom:3px solid var(--navy)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.logo{font-family:var(--display);font-size:1.5rem;display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{width:40px;height:40px;border-radius:50%;border:3px solid var(--navy)}
.navlinks{display:flex;gap:18px;font-weight:800;flex-wrap:wrap}
.navlinks a{text-decoration:none}
.navlinks a:hover{color:var(--clown)}
@media(max-width:560px){.navlinks{display:none}}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:1.15rem;padding:12px 22px;border:3px solid var(--navy);border-radius:999px;background:var(--clown);color:var(--snow);text-decoration:none;box-shadow:4px 4px 0 var(--navy);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--navy)}
.btn.ghost{background:var(--snow);color:var(--navy)}

.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:56px 64px}
.hero h1{font-size:clamp(3.2rem,10vw,7rem);letter-spacing:-.01em}
.hero h1 .d{color:var(--clown)}
.hero h1 .t{display:block;color:var(--diamond);-webkit-text-stroke:0}
.tag{font-size:1.25rem;font-weight:700;max-width:30ch;margin:18px 0 26px}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.mascot{position:relative;max-width:100%}
.mascot img{display:block;width:100%;border:4px solid var(--navy);border-radius:28px;box-shadow:10px 10px 0 var(--navy);transform:rotate(2deg);animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(-1.5deg) translateY(-8px)}}
.sticker{position:absolute;left:-14px;bottom:-18px;background:var(--beak);border:3px solid var(--navy);border-radius:14px;padding:6px 14px;font-family:var(--display);font-size:1.1rem;transform:rotate(-6deg)}
@media(max-width:760px){.hero .wrap{grid-template-columns:1fr;padding-block:32px 48px}.mascot{max-width:420px;margin:0 auto 10px}}

.ticker{background:var(--navy);color:var(--snow);overflow:hidden;border-block:3px solid var(--navy)}
.track{display:flex;width:max-content;animation:scroll 22s linear infinite;padding-block:12px}
.track span{font-family:var(--display);font-size:1.3rem;white-space:nowrap;padding-right:28px}
.track span:nth-child(3n+2){color:var(--beak)}
.track span:nth-child(3n){color:var(--peng)}
@keyframes scroll{to{transform:translateX(-50%)}}

section{padding-block:72px}
.eyebrow{font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--clown);margin-bottom:10px}
h2{font-size:clamp(2.2rem,6vw,3.6rem);margin-bottom:22px}
.lede{max-width:62ch;font-size:1.1rem}

.ca{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;max-width:760px}
.ca code{flex:1 1 280px;min-width:0;font-family:var(--mono);font-size:.95rem;background:var(--snow);border:3px solid var(--navy);border-radius:14px;padding:14px 16px;overflow-wrap:anywhere;user-select:all}
.ca .btn{font-size:1rem}

#lore{background:var(--snow);border-block:3px solid var(--navy)}
.lore{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.lore div{border-top:4px solid var(--navy);padding-top:14px}
.lore b{font-family:var(--display);font-weight:400;font-size:1.5rem;display:block;margin-bottom:6px}
.lore div:nth-child(1) b{color:var(--clown)}.lore div:nth-child(2) b{color:var(--diamond)}.lore div:nth-child(3) b{color:#C27C0E}
@media(max-width:760px){.lore{grid-template-columns:1fr}}

.toks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.tok{background:var(--snow);border:3px solid var(--navy);border-radius:18px;padding:18px}
.tok .k{font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;opacity:.7}
.tok .v{font-family:var(--display);font-size:2rem;margin-top:6px;font-variant-numeric:tabular-nums}
.tok:nth-child(1){background:var(--peng)}.tok:nth-child(2){background:var(--beak)}
.note{font-size:.9rem;margin-top:14px;opacity:.75}
@media(max-width:820px){.toks{grid-template-columns:repeat(2,1fr)}}

.steps{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps li{counter-increment:s;background:var(--snow);border:3px solid var(--navy);border-radius:18px;padding:20px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--clown);color:var(--snow);font-family:var(--display);font-size:1.4rem;border:3px solid var(--navy);margin-bottom:12px}
.steps b{display:block;font-size:1.1rem;margin-bottom:4px}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

#join{background:var(--diamond);color:var(--snow);border-top:3px solid var(--navy)}
#join .eyebrow{color:var(--beak)}
.socials{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
footer{background:var(--navy);color:#C9D6EE;font-size:.85rem}
footer .wrap{padding-block:28px}
footer p{max-width:80ch;margin:0}

@media(prefers-reduced-motion:reduce){.track,.mascot img{animation:none}}
.toks.nft{grid-template-columns:repeat(3,1fr)}
.toks.nft .v{font-size:1.6rem;overflow-wrap:anywhere}
@media(max-width:820px){.toks.nft{grid-template-columns:1fr}}
.artist{margin-top:28px;max-width:720px;background:var(--snow);border:3px solid var(--navy);border-left:10px solid var(--clown);border-radius:18px;padding:20px 22px}
.artist b{font-family:var(--display);font-weight:400;font-size:1.4rem}
.artist p{margin:6px 0 0}
#nfts{background:var(--snow);border-top:3px solid var(--navy)}
#nfts .tok:nth-child(3){background:var(--ice)}
#nfts .artist{background:var(--ice)}