
:root{
  --bg:#070b09;
  --panel:#0b1310;
  --panel2:#0f1b16;
  --ink:#e8f5ee;
  --muted:#9CB3A5;
  --green:#14f195;
  --greenGlow:#14f19599;
  --ring:#164d35;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
a{color:#b9f6ca;text-decoration:none}
a:hover,a:focus{text-shadow:0 0 .6rem var(--greenGlow)}
img,video,svg{max-width:100%;height:auto;display:block}

.container{width:min(1120px,92vw);margin-inline:auto}

.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(7,11,9,.85),rgba(7,11,9,.55) 60%,transparent);backdrop-filter:blur(6px);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand-icon{border-radius:999px;border:1px solid rgba(20,241,149,.45);box-shadow:0 0 18px rgba(20,241,149,.2)}
.brand-name{letter-spacing:.28em;font-weight:800}
.brand-ticker{color:var(--green);font-weight:800;margin-left:6px}

.desktop-nav{display:flex;gap:16px;align-items:center}
.desktop-nav .btn{margin-left:6px}

.hamburger{display:none;border:0;background:transparent;width:40px;height:32px;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);margin:3px 0;border-radius:2px}
@media (max-width: 1024px){
  .desktop-nav{display:none}
  .hamburger{display:block}
}

.mobile-drawer{position:fixed;inset:64px 10px auto 10px;background:var(--panel2);border:1px solid rgba(20,241,149,.2);border-radius:14px;padding:14px;z-index:60;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.mobile-drawer a{display:block;padding:10px 12px;border-radius:10px}
.mobile-drawer a:hover{background:rgba(255,255,255,.04)}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:55}

.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--ring);background:var(--panel2);color:var(--ink);border-radius:12px;padding:.72rem 1rem}
.btn.primary{background:linear-gradient(180deg,#12e18c,#0dcf78);color:#04110a;border-color:#0dcf78;font-weight:800;box-shadow:0 10px 26px rgba(20,241,149,.25)}
.btn:hover,.btn:focus{box-shadow:0 0 0 2px var(--ring),0 0 14px rgba(20,241,149,.4)}

.section{padding:48px 0}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding-top:20px}
@media (max-width:1024px){.hero{grid-template-columns:1fr}}
.hero .lead{color:var(--muted);overflow-wrap:anywhere;word-break:normal;hyphens:auto;max-width:100%}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 10px}

.video-circle{width:min(560px,92vw);aspect-ratio:1/1;border-radius:50%;border:1px solid rgba(20,241,149,.45);box-shadow:0 0 40px rgba(20,241,149,.18), inset 0 0 0 2px #1a3f2f;overflow:hidden;background:radial-gradient(60% 60% at 50% 50%, rgba(20,241,149,.06), transparent)}
.hero-video{width:100%;height:100%;object-fit:cover;border-radius:50%}

.ca-pill{display:flex;align-items:center;gap:.75rem;background:var(--panel);border:1px solid #163d2f;border-radius:14px;padding:.6rem .8rem;width:100%}
.ca-pill .label{color:#9be7c4;font-weight:800;letter-spacing:.04em}
.ca-pill code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ca-pill .copy{border:1px solid var(--ring);background:var(--panel2);color:var(--ink);border-radius:10px;padding:.45rem .7rem}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:1024px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid #123828;border-radius:16px;padding:16px;box-shadow:0 0 40px rgba(20,241,149,.12)}

details{background:var(--panel);border:1px solid #123828;border-radius:12px;padding:12px 14px;box-shadow:0 0 28px rgba(20,241,149,.08);margin:10px 0}
details summary{cursor:pointer;font-weight:700}

.token-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
@media (max-width:720px){.token-grid{grid-template-columns:1fr}}
.metric{background:var(--panel);border:1px solid #123828;border-radius:12px;padding:14px;box-shadow:0 0 24px rgba(20,241,149,.08)}
.metric .label{display:block;color:var(--muted);letter-spacing:.06em;margin-bottom:6px}
.metric .value{font-size:22px;font-weight:800}

.links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.links-grid{grid-template-columns:1fr}}
.tile{background:var(--panel);border:1px solid #123828;border-radius:12px;padding:16px;text-align:center;box-shadow:0 0 24px rgba(20,241,149,.08)}

.holders-card{background:var(--panel);border:1px solid #123828;border-radius:16px;padding:28px;box-shadow:0 0 40px rgba(20,241,149,.12);display:grid;place-items:center;width:min(520px,100%)}
.holders-number{font-size:72px;font-weight:900;text-shadow:0 0 26px rgba(20,241,149,.45);color:#effff6}
.holders-note{color:var(--muted);margin-top:6px}

.site-footer{margin-top:48px;padding:24px 0 40px;background:linear-gradient(0deg,rgba(0,0,0,.35),transparent)}
.site-footer .legal{max-width:900px;margin:0 auto 8px;text-align:center;opacity:.85}
.site-footer .foot-row{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;align-items:center}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}

/* === Patch: mobile overflow fixes for lead text and CA pill === */
html, body { overflow-x: hidden; }

.container { width: min(1120px, 100%); padding-inline: clamp(16px, 6vw, 24px); box-sizing: border-box; }

.hero-copy h1 { 
  text-wrap: balance;
}

.hero-copy .lead {
  font-size: clamp(16px, 4.2vw, 20px);
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: anywhere;
  margin-right: 0;
}

.ca-pill { 
  display: flex; align-items: center; gap: .75rem; 
  min-width: 0; /* allow flex children to shrink */
}

.ca-pill .label { flex: 0 0 auto; }

.ca-pill code, .ca-pill .hash { 
  flex: 1 1 auto; 
  min-width: 0; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.ca-pill .copy { flex: 0 0 auto; }

/* Ensure media scales within screen */
img, video, svg { max-width: 100%; height: auto; }

/* Reduce left/right gutters on very small screens */
@media (max-width: 380px){
  .container { padding-inline: 14px; }
}

/* Make hero grid stack on narrow widths with adequate gap */
@media (max-width: 1024px){
  .hero { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 28px); }
  .hero-media { order: 2; }
  .hero-copy { order: 1; }
}

/* Prevent any cards from exceeding viewport */
.card, .section, .hero { max-width: 100%; }


/* --- Mobile overflow & flex-shrink fixes (2025-02-12) --- */
*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: hidden; }

.container { width: min(1120px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }

/* Ensure hero text never overflows */
.hero-copy h1,
.hero-copy p { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; text-wrap: balance; }

/* Make sure flex children inside the CA pill can shrink on mobile */
.ca-pill { max-width: 100%; }
.ca-pill code { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* Guard layout wrappers */
.hero, .cta-row { max-width: 100%; }

/* Video container is capped to viewport width on small screens */
.hero-media, .hero-video { max-width: 100%; width: min(560px, 100%); height: auto; display: block; }

/* Avoid any rogue negative margins causing side scroll */
section, header, footer { margin-left: max(0px, min(0px, 0px)); margin-right: max(0px, min(0px, 0px)); }

html,body{overflow-x:hidden}
*{min-width:0}

@media (max-width: 420px){
  .lead{font-size: clamp(16px, 4.2vw, 18px);}
  .ca-pill{padding:.6rem .7rem}
  .ca-pill code{font-size: 0.9rem; line-height:1.2}
}
