:root{--p:#9945FF;--g:#14F195;--n:#0b0b24;--n2:#15153a;--w:#fff;--ink:#0b0b24}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-weight:900;font-family:"Arial Black","Segoe UI Black",Impact,system-ui,sans-serif;background:var(--n);color:var(--w);overflow-x:hidden;
 background-image:radial-gradient(circle at 15% 10%,rgba(153,69,255,.35),transparent 45%),radial-gradient(circle at 85% 30%,rgba(20,241,149,.22),transparent 40%);}
a{color:var(--g)}
.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:rgba(11,11,36,.85);backdrop-filter:blur(8px);border-bottom:3px solid var(--p)}
.brand{display:flex;align-items:center;gap:8px;color:var(--w);text-decoration:none;font-size:20px}
.brand img{border-radius:50%;border:2px solid var(--g)}
.nav nav{display:flex;gap:12px}
.nav nav a{color:var(--w);text-decoration:none;font-size:13px;font-family:system-ui,sans-serif;font-weight:800}
.nav nav a:hover{color:var(--g)}
.hero{position:relative;text-align:center;padding:28px 16px 36px;max-width:900px;margin:0 auto}
.mascot{width:min(78vw,420px);height:auto;border-radius:32px;border:5px solid var(--w);box-shadow:10px 10px 0 var(--p),-10px -10px 0 var(--g);transform:rotate(-3deg);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(2deg) translateY(-8px)}}
h1{font-size:clamp(48px,14vw,110px);line-height:1;margin-top:28px;text-transform:uppercase;letter-spacing:-1px;
 -webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--p),9px 9px 0 var(--g)}
h1 span{display:block;font-size:.5em;color:var(--g);text-shadow:4px 4px 0 var(--p)}
.tag{font-size:clamp(18px,5vw,28px);margin:18px auto 0;max-width:22ch;background:var(--w);color:var(--ink);padding:10px 16px;border-radius:16px;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--g);transform:rotate(1deg)}
.btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:18px;padding:14px 24px;border-radius:999px;border:3px solid var(--ink);text-decoration:none;cursor:pointer;color:var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px)}
.btn:active{transform:translate(3px,3px);box-shadow:none!important}
.btn-buy{background:var(--g);box-shadow:5px 5px 0 var(--w)}
.btn-x{background:var(--w);box-shadow:5px 5px 0 var(--p)}
.btn.small{font-size:15px;padding:10px 18px;margin-top:8px}
.sticker{position:absolute;font-size:22px;background:var(--p);color:var(--w);padding:6px 12px;border-radius:12px;border:3px solid var(--w);z-index:2}
.s1{top:30px;left:6%;transform:rotate(-12deg)}
.s2{top:56%;right:6%;background:var(--g);transform:rotate(10deg);font-size:28px}
.marquee{overflow:hidden;background:var(--g);color:var(--ink);border-block:4px solid var(--ink);transform:rotate(-2deg);margin:16px -10px;padding:12px 0}
.marquee.alt{background:var(--p);color:var(--w);transform:rotate(1.5deg)}
.track{display:flex;gap:28px;width:max-content;animation:scroll 22s linear infinite;font-size:clamp(20px,5vw,32px);white-space:nowrap}
.track.rev{animation-direction:reverse}
@keyframes scroll{to{transform:translateX(-50%)}}
section h2{font-size:clamp(32px,9vw,56px);text-transform:uppercase;text-shadow:4px 4px 0 var(--p);margin-bottom:14px}
.card{max-width:760px;margin:48px auto;padding:24px 20px;background:var(--n2);border:4px solid var(--w);border-radius:24px;box-shadow:8px 8px 0 var(--g)}
@media (max-width:820px){.card{margin:40px 16px}}
.story p{font-weight:500;font-family:system-ui,sans-serif;font-size:18px;line-height:1.6;margin:10px 0}
.story .date{display:inline-block;font-family:inherit;background:var(--g);color:var(--ink);padding:4px 12px;border-radius:8px}
blockquote{font-size:clamp(26px,7vw,42px);color:var(--g);margin:14px 0;padding:12px 16px;border-left:8px solid var(--p);background:rgba(153,69,255,.15);border-radius:0 16px 16px 0}
.ca{box-shadow:8px 8px 0 var(--p)}
.ca-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#ca{flex:1 1 220px;min-width:0;font-family:ui-monospace,Menlo,monospace;font-size:16px;background:var(--n);border:3px dashed var(--g);padding:14px;border-radius:14px;word-break:break-all}
.btn-copy{background:var(--g);box-shadow:4px 4px 0 var(--w)}
.hint{font-weight:500;font-family:system-ui,sans-serif;font-size:14px;opacity:.8;margin-top:10px}
.how{max-width:1000px;margin:48px auto;padding:0 16px;text-align:center}
.steps{list-style:none;display:grid;grid-template-columns:1fr;gap:18px;text-align:left}
@media (min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{position:relative;background:var(--w);color:var(--ink);border:4px solid var(--ink);border-radius:20px;padding:22px 16px 18px;box-shadow:6px 6px 0 var(--p)}
.steps li:nth-child(even){box-shadow:6px 6px 0 var(--g)}
.steps span{position:absolute;top:-16px;left:14px;width:38px;height:38px;display:grid;place-items:center;background:var(--p);color:var(--w);border:3px solid var(--ink);border-radius:50%}
.steps h3{font-size:20px;margin:6px 0}
.steps p{font-weight:500;font-family:system-ui,sans-serif;font-size:15px;line-height:1.5}
.steps a{color:var(--p);font-weight:800}
footer{text-align:center;padding:40px 18px 48px;border-top:4px solid var(--p);margin-top:40px;background:#07071a}
footer img{border-radius:50%;border:3px solid var(--g)}
.disc{font-weight:400;font-family:system-ui,sans-serif;font-size:13px;line-height:1.6;max-width:640px;margin:14px auto;opacity:.8}
.copy{font-size:14px}
@media (prefers-reduced-motion:reduce){.track,.mascot{animation:none}}