/* ========== GRC Base ========== */
:root{
  --bg:#0e0f13; --fg:#f7f7f7; --muted:#a9adba;
  --gold:#f5d46b; --card:#151822; --border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:underline}

/* ========== Header ========== */
.header{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid #1f2431;background:#0f121a;position:sticky;top:0;z-index:20}
.header img.logo{width:44px;height:44px}
.header .brand{font-weight:800;letter-spacing:.3px}
.header nav{margin-left:auto;display:flex;gap:14px;font-size:14px}

/* ========== Hero (works for image OR video) ========== */
.hero{position:relative;height:60vh;min-height:420px;overflow:hidden;border-bottom:1px solid #1f2431}
.hero .banner,
.hero video#heroVideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 55%;
}
.hero .content{position:relative;z-index:3;text-align:center;padding:16px;background:rgba(0,0,0,.05);border-radius:12px;max-width:920px;margin:0 auto}
@media (max-width:900px){ .hero{height:54vh;min-height:380px} .hero .banner,.hero video#heroVideo{object-position:50% 60%} }
@media (max-width:600px){ .hero{height:50vh;min-height:340px} .hero .banner,.hero video#heroVideo{object-position:50% 65%} }

/* Optional subtle depth without darkening centre */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background: radial-gradient(60% 60% at 50% 55%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.18) 100%);
}

/* ========== Layout shells ========== */
.container{max-width:1100px;margin:0 auto;padding:24px 20px}
.card{background:var(--card);border:1px solid #232836;border-radius:14px;padding:18px;margin:18px 0;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:720px){.grid{grid-template-columns:1fr 1fr}}

/* Headings / helpers */
h1{font-size:clamp(28px,4vw,48px);margin:0 0 8px}
h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 8px}
.small,.muted{color:var(--muted)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.btn{background:var(--gold);color:#1b1200;font-weight:800;border-radius:10px;padding:10px 14px;border:0;cursor:pointer}
.btn.secondary{background:#232836;color:#e3e6ef;border:1px solid #2b3142}

/* ========== Countdown spacing fix ========== */
#launch{ margin: 20px 0 22px; }       /* ensures no overlap with About */
.countdown{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cd-box{min-width:88px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06);text-align:center}
.cd-num{font-size:26px;font-weight:800}
.cd-lbl{font-size:12px;color:var(--muted)}

/* ========== Tokenomics (CRISP, centred, compact) ========== */
/* Kill any darken/blur/vignette on the background image */
#tokenomics.cinematic-section{position:relative;overflow:hidden;border-radius:14px}
#tokenomics.cinematic-section::before{
  content:""; position:absolute; inset:0;
  background-size:cover; background-position:center;
  /* no filters: keep image sharp */
  filter:none !important; -webkit-filter:none !important; transform:none !important; opacity:1 !important;
}
#tokenomics.cinematic-section::after{ display:none !important; }
#tokenomics .cinematic-content{
  position:relative; z-index:1;
  background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  padding:18px; max-width:960px; margin:0 auto;
}

/* Layout wrapper that exists in your HTML */
#tokenomics .tokenomics{
  max-width:900px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:22px;
}

/* Pie size */
#tokenomics svg{ width:200px; height:200px; display:block }
@media (max-width:600px){ #tokenomics svg{ width:180px; height:180px } }

/* Legend with color chips */
#tokenomics .legend{ color:#e9ebf2; font-size:14px; line-height:1.5 }
#tokenomics .legend div{ margin:4px 0 }
#tokenomics .legend .sw{
  display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:8px; vertical-align:middle;
}

/* ========== Meme grid ========== */
.meme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:720px){.meme-grid{grid-template-columns:repeat(3,1fr)}}
.meme{background:#0c0d10;border-radius:10px;padding:6px;overflow:hidden}
.meme img{display:block;width:100%;height:160px;object-fit:cover}

/* ========== Footer & badges ========== */
footer{color:var(--muted);border-top:1px solid #1f2431;margin-top:24px}
footer .inner{max-width:1100px;margin:0 auto;padding:24px 20px;display:flex;gap:12px;align-items:center;justify-content:space-between}
footer .badge img{width:56px;height:auto;opacity:.95;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}