/* ============================================================
   Components — reusable UI primitives
   ============================================================ */

/* ── Gradient text utilities ─────────────────────────────── */
.gt{background:var(--g5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.gw{background:var(--g3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.gg{background:var(--g4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--r2);font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;transition:all .2s;min-height:44px;cursor:pointer;}
.bp{background:var(--g1);color:#fff;box-shadow:0 0 28px rgba(108,99,255,.35);}
.bp:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(108,99,255,.5);}
.bo{border:1.5px solid var(--b2);color:var(--t1);background:transparent;}
.bo:hover{border-color:var(--purple);background:rgba(108,99,255,.09);}
.bk{background:#0A0A0F;color:#fff;font-weight:700;}
.bk:hover{background:#14141E;transform:translateY(-2px);}
.bw{background:rgba(255,255,255,.18);color:#0A0A0F;font-weight:700;border:1.5px solid rgba(10,10,15,.15);}
.bw:hover{background:rgba(255,255,255,.32);}

/* ── Chips / tags ────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;font-family:'Space Grotesk',sans-serif;letter-spacing:.04em;text-transform:uppercase;}
.cg{background:rgba(0,255,163,.12);color:var(--green);}
.cp{background:rgba(108,99,255,.15);color:var(--purple);}
.co{background:rgba(247,147,26,.15);color:var(--orange);}
.ck{background:rgba(220,31,255,.15);color:var(--pink);}
.cc{background:rgba(62,207,207,.15);color:var(--cyan);}
.cm{background:rgba(255,255,255,.07);color:var(--t3);}

/* ── Card (glassmorphism) ────────────────────────────────── */
.card{background:rgba(17,17,24,.75);border:1px solid var(--b2);border-radius:var(--r3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .25s,transform .25s,box-shadow .25s;}
.card:hover{border-color:var(--ba);transform:translateY(-4px);box-shadow:0 20px 60px rgba(108,99,255,.13);}

/* ── Section headings ────────────────────────────────────── */
.sec-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;font-family:'Space Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);margin-bottom:10px;}
.sec-h{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.15;letter-spacing:-.02em;}
.sec-sub{color:var(--t2);font-size:16px;line-height:1.7;margin-top:10px;max-width:540px;}

/* ── Scroll-reveal (IntersectionObserver toggles .on) ────── */
.rv{opacity:0;transform:translateY(28px);transition:opacity .55s cubic-bezier(.25,.1,.25,1),transform .55s cubic-bezier(.25,.1,.25,1);}
.rl{opacity:0;transform:translateX(-28px);transition:opacity .55s cubic-bezier(.25,.1,.25,1),transform .55s cubic-bezier(.25,.1,.25,1);}
.rr{opacity:0;transform:translateX(28px);transition:opacity .55s cubic-bezier(.25,.1,.25,1),transform .55s cubic-bezier(.25,.1,.25,1);}
.rv.on,.rl.on,.rr.on{opacity:1;transform:none;}
.d1{transition-delay:.07s;} .d2{transition-delay:.14s;} .d3{transition-delay:.21s;}
.d4{transition-delay:.28s;} .d5{transition-delay:.35s;} .d6{transition-delay:.42s;}

/* ── Status badge (airdrop) ──────────────────────────────── */
.sbadge{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:700;font-family:'Space Grotesk',sans-serif;}
.sdot{width:6px;height:6px;border-radius:50%;}
.sl{background:rgba(0,255,163,.12);color:var(--green);}
.sl .sdot{background:var(--green);animation:blink 1.6s ease-in-out infinite;}
.su{background:rgba(108,99,255,.15);color:var(--purple);}
.su .sdot{background:var(--purple);}
.se{background:rgba(255,255,255,.06);color:var(--t3);}
.se .sdot{background:var(--t3);}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}}

/* ── Shared animations ───────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.75);}}