
:root{
  --bg:#06060a;
  --bg-2:#0c0c14;
  --panel: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.14);
  --text:#f5f7ff;
  --muted:#b9b9cc;
  --pink:#ff1493;
  --magenta:#ff2bb7;
  --purple:#7a5cff;
  --cyan:#00e5ff;
  /* CHANGED: white->pink glow accent */
  --accent: linear-gradient(135deg, #ffffff, var(--pink));
  --radius:18px;
  --shadow: 0 10px 40px rgba(255,20,147,0.22), 0 20px 80px rgba(255,20,147,0.18);
  --focus: 0 0 0 2px rgba(255,20,147,0.9), 0 0 0 6px rgba(255,20,147,0.2);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:var(--text);text-decoration:none}
a.link{color:#ff9ed6; text-decoration:underline}
.container{width:min(1200px,92vw); margin:0 auto}
.code{font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background:rgba(255,255,255,0.06); padding:2px 6px; border-radius:6px}

/* Grain/Noise overlay */
.noise{position:fixed; inset:0; pointer-events:none; opacity:.05; background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.8\" numOctaves=\"4\" stitchTiles=\"stitch\"/></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23n)\" opacity=\"0.3\"/></svg>'); z-index:-1}

/* Header */
.site-header{ position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(6,6,10,.9), rgba(6,6,10,.6)); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,0.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding: 12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.5px}
.brand img{filter: drop-shadow(0 0 12px rgba(255,20,147,0.4))}
.brand-text{font-family:Orbitron, Inter; letter-spacing:1.2px}
.site-nav{display:flex; align-items:center; gap:14px}
.site-nav a{padding:8px 10px; border-radius:10px; transition: all .25s}
.site-nav a:hover{background: rgba(255,255,255,0.06); box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset}
.site-nav .sep{display:inline-block; width:1px; height:20px; background:rgba(255,255,255,0.12); margin:0 6px}
.icon-link svg{width:20px; height:20px}
.icon-link:focus{outline:none; box-shadow: var(--focus); border-radius:10px}

.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:26px; height:2px; background:#fff; margin:6px 0; transition:.25s}

/* Hero */
.hero{position:relative; display:grid; grid-template-columns: 1.2fr 1fr; gap:28px; align-items:center; padding: 56px 0}
#particles{position:absolute; inset:0; width:100%; height:100%; z-index:-1}
.title-hero{font-size:clamp(42px, 6vw, 78px); margin:0 0 6px 0}
/* CHANGED: stronger pink glow */
.glow{background:linear-gradient(135deg, #ffffff, var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 28px rgba(255,20,147,0.45)}
.glow-pink{background:linear-gradient(135deg, #ffffff, var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 32px rgba(255,20,147,0.6), 0 0 8px rgba(255,20,147,0.35)}
.subtitle{font-size:18px; color:var(--muted)}
.accent{color:#ff67d4}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}

.btn-primary, .btn-secondary, .btn-outline{
  padding:12px 18px; border-radius:14px; font-weight:700; transition:.25s; display:inline-flex; align-items:center; gap:8px
}
/* CHANGED: btn-primary uses white->pink gradient */
.btn-primary{background: var(--accent); color:#0b0b0f; box-shadow: var(--shadow)}
.btn-primary:hover{transform: translateY(-2px)}
.btn-primary:active{transform:translateY(0); box-shadow:0 0 0 2px rgba(255,20,147,0.5) inset}
.btn-secondary{background: var(--glass); border:1px solid var(--border)}
.btn-secondary:hover{box-shadow:0 6px 22px rgba(255,20,147,0.22)}
.btn-outline{border:1px solid rgba(255,255,255,0.2)}
.btn-outline:hover{border-color:transparent; background:rgba(255,255,255,0.06)}

.glass{background: var(--glass); border:1px solid var(--border); backdrop-filter: blur(10px); border-radius: var(--radius); position:relative; overflow:visible}
.card{padding:22px; box-shadow: var(--shadow)}

/* CHANGED: stronger pink glow frames for all glass cards */
/* .glass::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: radial-gradient(60% 90% at 50% -10%, rgba(255,20,147,0.45), transparent 70%),
              linear-gradient(135deg, rgba(255,20,147,0.55), rgba(255,255,255,0.15));
  filter: blur(14px); opacity:.95; z-index:-1; pointer-events:none;
}
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 1px rgba(255,20,147,0.25);
} */

.stats-card{margin-top:22px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; padding:16px}
.stat .label{display:block; font-size:12px; color:var(--muted)}
.stat .value{font-family:Orbitron, ui-monospace; font-size:20px}

.coin-wrap{perspective:1000px}
.coin-hero{filter: drop-shadow(0 20px 80px rgba(255,20,147,0.28)); transform-style:preserve-3d; border-radius:20px}

/* Ticker */
.ticker{margin-top:16px; overflow:hidden; border-top:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08)}
.ticker-track{display:inline-flex; gap:36px; padding:10px 0; white-space:nowrap; animation: marquee 22s linear infinite}
.ticker-track span{opacity:.92}
@keyframes marquee{ from{ transform: translateX(0)} to{ transform: translateX(-50%)} }

/* Progress bars (more pink) */
.progress.goals{margin-top:14px; padding:16px}
.progress-row{margin-top:10px}
.progress-label{display:flex; justify-content:space-between; align-items:baseline}
.bar{width:100%; background:rgba(255,255,255,0.06); border-radius:10px; height:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.1)}
.fill{height:100%; width:0%; background:linear-gradient(90deg, #ff6ddf, var(--pink), #ffd8f2); box-shadow:0 6px 18px rgba(255,20,147,0.35)}

/* Sections */
.section{padding: 56px 0}
.section-title{font-size:28px; margin:0 0 16px 0}
.center{text-align:center; margin-inline:auto}
.prose p{line-height:1.7; color:var(--text); opacity:.95}
.card-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}
.info-card{padding:22px}

/* Tokenomics layout */
.tokenomics-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px}

/* Chart embed */
.chart-embed{padding:10px}
.chart-embed iframe{width:100%; height:520px; border:0; border-radius:16px; background:#0f0f16}

/* Steps (indented more) */
.steps{padding:28px; line-height:1.7}
.steps li{margin-bottom:8px; padding-left:4px}

/* Donations */
.donate .lead{font-weight:600; opacity:.95}
.donate .cta-row{justify-content:center}

/* Footer */
.site-footer{margin-top:56px; background: var(--bg-2); border-top:1px solid rgba(255,255,255,0.06)}
.footer-grid{display:grid; grid-template-columns: .9fr 1.1fr; gap:20px; padding: 24px 0}
.footer-col .small{font-size:11px; color:#c8c8d6; opacity:.85}
.footer-bottom{padding: 12px 0; border-top:1px solid rgba(255,255,255,0.05); text-align:center; color:var(--muted)}
.brand-row{display:flex; align-items:center; gap:10px}
.socials{display:flex; gap:10px; margin-top:10px}

/* Accessibility: focus */
a:focus, button:focus{outline:none; box-shadow: var(--focus)}

/* Reveal animation class (used with GSAP) */
.reveal{opacity:0; transform: translateY(12px)}

/* Mobile */
@media (max-width: 960px){
  .hero{grid-template-columns: 1fr; text-align:center}
  .stats-card{grid-template-columns: 1fr}
  .card-grid{grid-template-columns: 1fr}
  .tokenomics-grid{grid-template-columns: 1fr}
  .site-nav{position:fixed; inset:64px 16px auto 16px; background:var(--bg-2); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:12px; display:none; flex-direction:column}
  .nav-toggle{display:block}
  .site-nav.open{display:flex}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none}
  .reveal{opacity:1; transform:none}
}
