/* SUPERINDEX — cartoon sticker landing (Solana gradient, thick outlines, halftone) */
:root{
  --ink:#0B0B0F; --ink2:#121218; --text:#F4F1EA; --muted:#A79FB5; --dim:#6E677C;
  --bg-dark:#08080C; --line:#241F2E;
  --sol:linear-gradient(120deg,#00E28A 0%,#22B8EE 28%,#2E7BFF 48%,#7A5CFA 72%,#E040FB 100%);
  --sol2:linear-gradient(120deg,#00FFA3,#7C5CFF 55%,#DC1FFF);
  --r:26px; --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg-dark);color:var(--text);font:400 16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.grad-text{background:var(--sol);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}

/* ---------------------------------------------------------- bubble wordmark */
.bub{position:relative;display:inline-block;line-height:.9;font-family:"Archivo Black",Inter,sans-serif;letter-spacing:-.01em;transform:skewX(-4deg)}
.bub .out{position:absolute;left:0;top:0;-webkit-text-stroke:14px #fff;color:#fff;filter:drop-shadow(0 8px 0 rgba(11,11,15,.45))}
.bub .in{position:relative;background:var(--sol);-webkit-background-clip:text;background-clip:text;color:transparent}
.bub.big{font-size:clamp(46px,9vw,124px)}
.bub.mid{font-size:clamp(30px,5.2vw,72px)}
.bub.mid .out{-webkit-text-stroke:11px #fff;filter:drop-shadow(0 6px 0 rgba(11,11,15,.5))}
.pillraw{display:inline-block;font:800 13px/1 "Baloo 2",Inter,sans-serif;letter-spacing:.18em;color:var(--ink);
  background:#fff;border:5px solid var(--ink);border-radius:999px;padding:12px 20px;box-shadow:0 6px 0 rgba(11,11,15,.35);white-space:nowrap}
.tl{font:800 clamp(11px,1.2vw,14px)/1 Inter,sans-serif;letter-spacing:.26em;color:#141019;margin-top:16px;text-transform:uppercase}
.sec-tag{font:800 13px/1 Inter,sans-serif;letter-spacing:.24em;color:#CBB9FF;margin-top:14px}
.brandbub{font-family:"Archivo Black",Inter,sans-serif;font-size:19px;letter-spacing:.01em;color:#fff}
.brandbub.small{font-size:16px}

/* ------------------------------------------------------------------ header */
.hdr{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;padding:12px clamp(14px,4vw,38px);
  background:rgba(8,8,12,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;gap:20px;margin-left:auto;font:700 11px/1 Inter,sans-serif;letter-spacing:.2em;color:var(--muted)}
.nav a:hover{color:#fff}
.hdr-cta{display:flex;align-items:center;gap:10px}
.iconbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:3px solid #fff;background:var(--ink);color:#fff}
.iconbtn:hover{background:#fff;color:var(--ink)}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border:5px solid var(--ink);
  font:800 13px/1 "Baloo 2",Inter,sans-serif;letter-spacing:.12em;padding:15px 24px;border-radius:999px;
  transition:transform .14s,box-shadow .18s}
.btn.ink{background:var(--ink);color:#fff;border-color:#fff;box-shadow:0 6px 0 rgba(255,255,255,.25)}
.btn.white{background:#fff;color:var(--ink);box-shadow:0 6px 0 rgba(11,11,15,.45)}
.btn.grad{background:var(--sol);color:var(--ink);border-color:#fff;box-shadow:0 6px 0 rgba(11,11,15,.45)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(1px)}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;overflow:hidden;background:var(--sol)}
.dots{position:absolute;inset:0;background-image:radial-gradient(rgba(8,8,12,.22) 2.6px,transparent 3.2px);background-size:20px 20px;opacity:.55}
.dots.dark{background-image:radial-gradient(rgba(255,255,255,.08) 2.4px,transparent 3px)}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(26px,4vw,52px) clamp(14px,4vw,38px) clamp(30px,5vw,58px)}
.hero-top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;justify-content:space-between}
.hero-top .pillraw{align-self:center}

.stickers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,30px);margin:clamp(24px,4vw,46px) 0}
.st{display:flex;align-items:center;gap:16px;background:#fff;border:6px solid var(--ink);border-radius:var(--r);
  padding:14px 22px;box-shadow:0 12px 0 rgba(11,11,15,.28)}
.st .nm{font-family:"Archivo Black",Inter,sans-serif;font-size:clamp(17px,2.1vw,29px);color:var(--ink);letter-spacing:.01em}
.st.r1{transform:rotate(-7deg)}.st.r2{transform:rotate(5deg) translateY(-10px)}.st.r3{transform:rotate(-4deg) translateY(6px)}
.st.r4{transform:rotate(6deg)}.st.r5{transform:rotate(-6deg) translateY(-8px)}.st.r6{transform:rotate(4deg)}
.st{transition:transform .18s}
.st:hover{transform:rotate(0deg) translateY(-6px)}

.badge{flex:0 0 auto;width:clamp(52px,6vw,72px);height:clamp(52px,6vw,72px);border-radius:50%;background:#F4F4F6;
  border:5px solid var(--ink);display:grid;place-items:center;position:relative}
.badge::after{content:"";position:absolute;inset:4px;border-radius:50%;border:2px dashed rgba(11,11,15,.22)}
.badge i{width:52%;height:52%;background:var(--c);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.badge.big{width:clamp(64px,7vw,96px);height:clamp(64px,7vw,96px)}

.hero-bottom{display:grid;gap:14px;justify-items:start;max-width:860px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chipw{font:800 12px/1 "Baloo 2",Inter,sans-serif;letter-spacing:.14em;background:#fff;border:4px solid var(--ink);
  border-radius:999px;padding:9px 16px;color:var(--ink);box-shadow:0 5px 0 rgba(11,11,15,.3)}
.chipw b{color:#E040FB}
.lead{font-size:clamp(15px,1.7vw,19px);color:#141019;font-weight:500;max-width:70ch;background:rgba(255,255,255,.55);
  padding:12px 16px;border-radius:16px;border:3px solid rgba(11,11,15,.15)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.camin{display:flex;align-items:center;gap:12px;background:#fff;border:4px solid var(--ink);border-radius:999px;
  padding:10px 18px;font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 5px 0 rgba(11,11,15,.3);max-width:100%}
.ca-cap{font:800 10px/1 "Baloo 2",Inter,sans-serif;letter-spacing:.2em;color:#7A5CFA}
.camin code{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-state="soon"] code[data-ca]::before{content:"CA SOON";color:#8A83A0;letter-spacing:.14em}

/* ------------------------------------------------------------------- dark sections */
.wrap{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(38px,6vw,78px) clamp(14px,4vw,38px)}
.chartsec,.toksec,.absec,.cabsec{position:relative;overflow:hidden;background:var(--bg-dark)}
.chartsec::before,.toksec::before,.absec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 520px at 12% 8%, rgba(0,226,138,.16), rgba(0,0,0,0) 70%),
             radial-gradient(900px 620px at 88% 92%, rgba(224,64,251,.18), rgba(0,0,0,0) 70%)}
.chartsec .wrap,.toksec .wrap,.absec .wrap{display:grid;justify-items:center;text-align:center}

/* --------------------------------------------------------------- the chart */
.chartbox{position:relative;width:100%;height:clamp(360px,46vw,560px);margin-top:clamp(18px,3vw,34px)}
.chartline{position:absolute;inset:0;width:100%;height:100%}
.moon{position:absolute;right:0.5%;top:-3%;width:clamp(90px,11vw,150px);aspect-ratio:1;border-radius:50%;background:#fff;
  border:6px solid var(--ink);box-shadow:0 10px 0 rgba(0,0,0,.45)}
.moon::before,.moon::after{content:"";position:absolute;border-radius:50%;background:#0B0B0F;opacity:.13}
.moon::before{width:34%;height:34%;left:20%;top:22%}
.moon::after{width:22%;height:22%;left:56%;top:54%}
.rdot{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:8px}
.rlabel{font:800 12px/1 Inter,sans-serif;letter-spacing:.16em;color:var(--ink);background:#fff;border:4px solid var(--ink);
  border-radius:999px;padding:8px 14px;box-shadow:0 5px 0 rgba(0,0,0,.4)}

/* --------------------------------------------------------------- token row */
.circles{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.8vw,22px);align-items:end;
  width:100%;margin-top:clamp(20px,3vw,36px)}
.cd{display:grid;justify-items:center;gap:10px}
.cd.up{transform:translateY(-24px)}
.cd b{font:800 11px/1 Inter,sans-serif;letter-spacing:.16em;color:var(--ink);background:#fff;border:4px solid var(--ink);
  border-radius:999px;padding:7px 12px;box-shadow:0 5px 0 rgba(0,0,0,.4)}
.cd .badge{box-shadow:0 10px 0 rgba(0,0,0,.35)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;margin-top:clamp(30px,4vw,50px)}
.stat{background:#fff;border:5px solid var(--ink);border-radius:20px;padding:18px;box-shadow:0 8px 0 rgba(0,0,0,.4);text-align:left}
.stat span{display:block;font:800 10px/1 Inter,sans-serif;letter-spacing:.2em;color:#8A83A0;margin-bottom:10px}
.stat b{font-family:"Archivo Black",Inter,sans-serif;font-size:clamp(14px,1.5vw,20px);color:var(--ink);overflow-wrap:anywhere}
.dist{width:100%;margin-top:18px;background:#fff;border:5px solid var(--ink);border-radius:20px;padding:20px;box-shadow:0 8px 0 rgba(0,0,0,.4)}
.dist-head{display:flex;justify-content:space-between;font:800 11px/1 Inter,sans-serif;letter-spacing:.2em;color:#8A83A0;margin-bottom:14px}
.dist-bar{display:flex;gap:6px}
.dist-bar i{height:16px;border-radius:8px;flex:1;background:var(--c);border:3px solid var(--ink)}
.dist-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font:700 12px/1.6 Inter,sans-serif;color:#5C5570}
.dist-legend b{color:var(--ink)}

/* ------------------------------------------------------------- contract card */
.cabsec .wrap{display:grid;justify-items:center}
.card-ca{display:grid;gap:14px;width:100%;max-width:900px;text-align:left;border-radius:26px;transform:none}
.card-ca .ca-head{display:flex;justify-content:space-between;align-items:center}
.cst{width:12px;height:12px;border-radius:50%;background:#C9C3D6}
[data-state="ready"] .cst{background:#19E08A;box-shadow:0 0 14px #19E08A}
.ca-big{font:600 clamp(14px,2.3vw,24px)/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);word-break:break-all}
[data-state="soon"] .ca-big::before{content:"CA SOON";color:#8A83A0}
.ca-bot{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ca-hint{color:#5C5570;font-size:13px;font-weight:500}

/* -------------------------------------------------------------------- about */
.absec .about{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;text-align:left;justify-items:start}
.about p{color:#C9C2D6;margin-top:14px;max-width:62ch}
.sixmini{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ------------------------------------------------------------------- footer */
.ftr{position:relative;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:26px clamp(14px,4vw,38px) 54px;border-top:1px solid var(--line);
  font:800 12px/1 Inter,sans-serif;letter-spacing:.16em}
.ftr-l,.ftr-r{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.ftr-r a:hover{color:#CBB9FF}

/* -------------------------------------------------------------------- toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:#fff;color:var(--ink);border:5px solid var(--ink);font:800 13px/1 "Baloo 2",Inter,sans-serif;
  padding:14px 22px;border-radius:999px;box-shadow:0 8px 0 rgba(0,0,0,.5);transition:.25s;z-index:40}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1000px){
  .stickers{grid-template-columns:repeat(2,1fr)}
  .circles{grid-template-columns:repeat(3,1fr);row-gap:26px}
  .cd.up{transform:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .absec .about{grid-template-columns:1fr}
  .nav{display:none}
  .rdot{transform:translate(-50%,-50%) scale(.86)}
}
@media (max-width:620px){
  .stickers{grid-template-columns:1fr}
  .st{transform:none !important}
  .circles{grid-template-columns:repeat(2,1fr)}
  .hero-top{justify-content:center;text-align:center}
  .bub{transform:none}
  .chartbox{height:420px}
  .rdot{transform:translate(-50%,-50%) scale(.62)}
  .moon{width:70px}
  .pillraw{font-size:11px;padding:10px 14px}
  .lead{font-size:14px}
}

/* --------------------------------------------------- company links (tap → X) */
.st{position:relative;cursor:pointer}
.st .go{position:absolute;right:12px;top:9px;font:800 14px/1 Inter,sans-serif;color:#B6AFC6}
.st:hover .go{color:#7A5CFA}
.rdot,.cd,.badge{transition:transform .16s,background .16s}
.cd:hover{transform:translateY(-5px)}
.cd.up:hover{transform:translateY(-29px)}
.sixmini a:hover{transform:translateY(-5px)}
.hintline{margin-top:18px;font:700 11px/1 Inter,sans-serif;letter-spacing:.2em;color:var(--dim)}

/* ------------------------------------------------------------- how to buy */
.howsec{position:relative;overflow:hidden;background:var(--bg-dark)}
.howsec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 480px at 10% 6%, rgba(0,226,138,.16), rgba(0,0,0,0) 70%),
             radial-gradient(860px 600px at 90% 94%, rgba(224,64,251,.18), rgba(0,0,0,0) 70%)}
.howsec .wrap{display:grid;justify-items:center;text-align:center}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,26px);width:100%;
  margin-top:clamp(26px,3.6vw,46px);text-align:left}
.step{position:relative;background:#fff;border:5px solid var(--ink);border-radius:24px;padding:28px 20px 22px;
  box-shadow:0 10px 0 rgba(0,0,0,.42)}
.step .num{position:absolute;top:-17px;left:16px;background:var(--sol2);color:var(--ink);border:4px solid var(--ink);
  border-radius:999px;padding:7px 13px;font:800 12px/1 "Baloo 2",Inter,sans-serif;letter-spacing:.08em}
.step h3{font-family:"Archivo Black",Inter,sans-serif;font-size:clamp(15px,1.6vw,19px);color:var(--ink);margin:6px 0 10px}
.step p{font-size:14px;line-height:1.62;color:#4B4560}
.step a{color:#5B3BE0;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.step a:hover{color:#E040FB}
.howcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);width:100%;margin-top:clamp(22px,3vw,36px)}
.hcard{position:relative;display:grid;gap:5px;justify-items:start;background:#fff;border:5px solid var(--ink);
  border-radius:20px;padding:18px 20px;box-shadow:0 8px 0 rgba(0,0,0,.4);text-align:left;transition:transform .16s}
.hcard:hover{transform:translateY(-5px)}
.hcard b{font-family:"Archivo Black",Inter,sans-serif;font-size:clamp(15px,1.7vw,20px);color:var(--ink)}
.hcard span{font-size:13px;color:#5C5570;font-weight:500}
.hcard i{position:absolute;right:16px;top:14px;font-style:normal;font-weight:800;color:#B6AFC6}
.how-note{margin-top:clamp(22px,3vw,34px);color:#C9C2D6;font-size:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;padding:14px 18px;max-width:820px}
.gradchip{background:var(--sol2);color:var(--ink)}
.stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stat.wide{grid-column:span 2}
@media (max-width:1000px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .stats,.steps,.howcards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}