/* =========================================================================
   PUMPBALL — clean, fomoball-style, all green
   Space Grotesk + IBM Plex Mono · vibrant emerald · live callouts
   ========================================================================= */

:root{
  --bg-top:#0ba652;
  --bg-bot:#067a3a;
  --panel:rgba(255,255,255,.10);
  --panel-2:rgba(255,255,255,.16);
  --panel-line:rgba(255,255,255,.22);
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.82);
  --ink-3:rgba(255,255,255,.58);
  --hl:#eaff7d;             /* electric lime — the pop accent */
  --pump:#4ff56a;           /* pump green */
  --dark:#053018;           /* text on white surfaces */
  --f:"Space Grotesk",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --wrap:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f);color:var(--ink);line-height:1.5;
  font-size:clamp(15px,1.05vw,17px);-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 120% at 80% 0%, #12b85e 0%, var(--bg-top) 42%, var(--bg-bot) 100%);
  background-attachment:fixed;min-height:100vh;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
b{font-weight:700}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.hl{color:var(--hl)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
::selection{background:var(--hl);color:var(--dark)}
img{max-width:100%}
.pf-mark{height:18px;width:auto;display:inline-block;border-radius:5px;vertical-align:middle}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f);font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:100px;border:1.5px solid transparent;white-space:nowrap;cursor:pointer;
  transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--dark)}
.btn--white:hover{background:var(--hl)}
.btn--ghost{background:transparent;border-color:var(--panel-line);color:#fff}
.btn--ghost:hover{background:var(--panel);border-color:#fff}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;padding:14px clamp(12px,3vw,26px);transition:padding .3s}
.nav__inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(4,40,22,.34);backdrop-filter:blur(14px);border:1.5px solid var(--panel-line);
  border-radius:100px;padding:10px 10px 10px 22px}
.nav__brand{font-weight:700;font-size:19px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.nav__dot{width:11px;height:11px;border-radius:50%;background:var(--hl);box-shadow:0 0 0 0 var(--hl);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(234,255,125,.5)}70%{box-shadow:0 0 0 10px rgba(234,255,125,0)}100%{box-shadow:0 0 0 0 rgba(234,255,125,0)}}
.nav__links{display:flex;gap:26px;font-size:15px;color:var(--ink-2)}
.nav__links a{transition:color .2s}
.nav__links a:hover{color:#fff}
.nav .btn{font-size:14px;padding:10px 16px}
@media (max-width:860px){.nav__links{display:none}}

/* ---------- hero ---------- */
.hero{max-width:1320px;margin:0 auto;padding:clamp(120px,15vw,170px) clamp(18px,4vw,40px) clamp(40px,6vw,70px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.hero__col{min-width:0}
.hero__eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-size:12px;letter-spacing:.16em;color:var(--ink-2)}
.hero__title{font-weight:700;font-size:clamp(44px,6.4vw,86px);line-height:.98;letter-spacing:-.035em;margin-bottom:22px}
.hero__sub{max-width:540px;font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);margin-bottom:30px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:920px){.hero{grid-template-columns:1fr;gap:34px}.hero__right{order:2}}

/* ---------- live callouts feed (hero right) ---------- */
.feed{background:var(--panel);border:1.5px solid var(--panel-line);border-radius:22px;padding:18px;backdrop-filter:blur(8px);overflow:hidden}
.feed__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 4px}
.feed__live{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:#fff}
.feed__pulse{width:8px;height:8px;border-radius:50%;background:var(--hl);animation:pulse 1.8s infinite}
.feed__src{font-size:11px;color:var(--ink-3)}
.feed__stack{display:flex;flex-direction:column;gap:10px;min-height:280px}
.feed__loading{color:var(--ink-3);font-size:13px;padding:24px 8px;text-align:center}

.cocard{display:flex;align-items:center;gap:12px;background:var(--panel);border:1.5px solid transparent;border-radius:16px;
  padding:12px 14px;min-width:0;overflow:hidden;transition:transform .3s var(--ease),background .3s,border-color .3s,opacity .3s}
.cocard--hot{background:#fff;color:var(--dark);border-color:#fff;transform:scale(1.02)}
.cocard__av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:rgba(255,255,255,.2)}
.cocard__body{min-width:0;flex:1}
.cocard__name{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cocard__x{font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
.cocard--hot .cocard__x{color:rgba(5,48,24,.6)}
.cocard__thesis{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.cocard--hot .cocard__thesis{color:rgba(5,48,24,.75)}
.cocard__badge{font-family:var(--f-mono);font-weight:600;font-size:13px;color:var(--dark);background:var(--hl);border-radius:8px;padding:4px 8px;flex:0 0 auto}
.cocard__time{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);flex:0 0 auto;min-width:34px;text-align:right}
.cocard--hot .cocard__time{color:rgba(5,48,24,.55)}

/* ---------- stats ---------- */
.stats{max-width:1320px;margin:0 auto;padding:10px clamp(18px,4vw,40px) clamp(50px,7vw,90px)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);background:var(--panel);border:1.5px solid var(--panel-line);border-radius:20px;overflow:hidden}
.stat{padding:26px 24px;border-right:1.5px solid var(--panel-line)}
.stat:last-child{border-right:0}
.stat__num{font-family:var(--f-mono);font-weight:600;font-size:clamp(26px,3.4vw,44px);line-height:1;color:var(--hl)}
.stat__label{margin-top:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
@media (max-width:720px){.stats__grid{grid-template-columns:1fr 1fr}.stat{border-bottom:1.5px solid var(--panel-line)}.stat:nth-child(odd){border-right:1.5px solid var(--panel-line)}.stat:nth-child(even){border-right:0}}

/* ---------- shared section bits ---------- */
.kicker{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--hl);margin-bottom:14px}
.h2{font-weight:700;font-size:clamp(30px,4.6vw,60px);line-height:1;letter-spacing:-.03em;margin-bottom:14px}
.lead{max-width:600px;color:var(--ink-2);font-size:clamp(15px,1.4vw,19px);margin-bottom:40px}
section.mech,section.callouts,section.tok,section.faq{padding:clamp(60px,9vw,120px) 0}

/* ---------- mechanism ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:var(--panel);border:1.5px solid var(--panel-line);border-radius:18px;padding:22px;transition:transform .3s var(--ease),background .3s}
.step:hover{transform:translateY(-5px);background:var(--panel-2)}
.step__n{font-size:12px;color:var(--hl);letter-spacing:.1em}
.step h3{font-size:20px;font-weight:700;margin:12px 0 8px;letter-spacing:-.01em}
.step p{font-size:14px;color:var(--ink-2)}
.punch{margin-top:34px;font-weight:700;font-size:clamp(28px,5vw,64px);line-height:1;letter-spacing:-.03em}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.steps{grid-template-columns:1fr}}

/* ---------- callouts grid ---------- */
.calloutgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.calloutgrid .cocard{background:var(--panel);border-color:var(--panel-line)}
.calloutgrid .cocard:hover{background:var(--panel-2)}
@media (max-width:820px){.calloutgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.calloutgrid{grid-template-columns:1fr}}

/* ---------- tokenomics ---------- */
.tok__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tok__card{background:var(--panel);border:1.5px solid var(--panel-line);border-radius:18px;padding:22px;min-height:170px;display:flex;flex-direction:column;transition:transform .3s var(--ease),background .3s}
.tok__card:hover{transform:translateY(-5px);background:var(--panel-2)}
.tok__k{font-size:11px;letter-spacing:.12em;color:var(--ink-2);text-transform:uppercase}
.tok__v{font-weight:600;font-size:clamp(20px,2.2vw,28px);margin:12px 0 auto;color:#fff}
.tok__card p{font-size:13px;color:var(--ink-2)}
.ca{margin-top:20px;display:flex;flex-wrap:wrap;align-items:stretch;background:var(--panel);border:1.5px solid var(--panel-line);border-radius:14px;overflow:hidden}
.ca__label{display:flex;align-items:center;padding:14px 18px;background:var(--panel-2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ca__val{flex:1;min-width:200px;display:flex;align-items:center;padding:14px 18px;color:var(--hl);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca__copy{padding:14px 22px;background:#fff;color:var(--dark);border:0;font-family:var(--f-mono);font-weight:600;font-size:12px;cursor:pointer;transition:background .2s}
.ca__copy:hover{background:var(--hl)}
@media (max-width:820px){.tok__grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.tok__grid{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq__list{border-top:1.5px solid var(--panel-line)}
.faq__item{border-bottom:1.5px solid var(--panel-line)}
.faq__item summary{list-style:none;cursor:pointer;padding:22px 0;font-weight:700;font-size:clamp(18px,2.2vw,26px);letter-spacing:-.01em;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";color:var(--hl);transition:transform .3s var(--ease)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item div{padding:0 0 22px;color:var(--ink-2);max-width:70ch}

/* ---------- footer ---------- */
.foot{border-top:1.5px solid var(--panel-line);padding:44px 0;margin-top:20px}
.foot__inner{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between}
.foot__brand{font-weight:700;font-size:19px;display:flex;align-items:center;gap:9px}
.foot__links{display:flex;gap:22px;align-items:center;color:var(--ink-2);font-size:14px}
.foot__links a{display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.foot__links a:hover{color:var(--hl)}
.foot__disc{width:100%;color:var(--ink-3);font-size:11px;letter-spacing:.04em;border-top:1.5px solid var(--panel-line);padding-top:18px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}