/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #06060f;
  --surface:    #0d0d1f;
  --surface2:   #12122a;
  --border:     rgba(153,69,255,.2);
  --purple:     #9945FF;
  --pink:       #e040fb;
  --green:      #14F195;
  --cyan:       #06b6d4;
  --gold:       #f59e0b;
  --red:        #f43f5e;
  --text:       #f0eeff;
  --muted:      #8b8ab8;
  --radius:     16px;
  --tr:         .3s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Utility ── */
.container { width: min(1200px, 100% - 2.5rem); margin-inline: auto; }
.gradient-text { background: linear-gradient(135deg, var(--purple), var(--pink), var(--green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.6rem; border-radius: 9999px; font-size: .9rem; font-weight: 600; letter-spacing: .04em; cursor: pointer; border: none; transition: var(--tr); font-family: 'Rajdhani', sans-serif; text-transform: uppercase; }
.btn--primary { background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; box-shadow: 0 4px 24px rgba(153,69,255,.5); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(153,69,255,.7); }
.btn--glass { background: rgba(255,255,255,.07); color: var(--text); border: 1.5px solid rgba(255,255,255,.15); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255,255,255,.12); }
.btn--neon { background: transparent; color: var(--green); border: 1.5px solid var(--green); box-shadow: 0 0 12px rgba(20,241,149,.3); }
.btn--neon:hover { background: var(--green); color: #000; box-shadow: 0 0 24px rgba(20,241,149,.6); }
.btn--lg { padding: .9rem 2.2rem; font-size: 1rem; }

/* ── Section ── */
.section { padding: 7rem 0; }
.section__header { text-align: center; margin-bottom: 4rem; }
.section__tag { display: inline-block; padding: .3rem 1rem; border-radius: 9999px; background: rgba(153,69,255,.15); border: 1px solid rgba(153,69,255,.35); color: var(--purple); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; font-family: 'Rajdhani', sans-serif; }
.section__title { font-family: 'Orbitron', sans-serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.15; margin-bottom: .75rem; }
.section__desc { color: var(--muted); max-width: 520px; margin-inline: auto; }
.section__desc strong { color: var(--text); }

/* ── Nav ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background var(--tr), box-shadow var(--tr); }
.nav.scrolled { background: rgba(6,6,15,.9); backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(255,255,255,.05); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; max-width: 1200px; margin-inline: auto; }
.nav__logo { display: flex; align-items: center; gap: .6rem; }
.nav__logo-img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; }
.nav__logo-text { font-family: 'Orbitron', sans-serif; font-size: .95rem; font-weight: 700; }
.nav__logo-text strong { color: var(--purple); }
.nav__links { display: flex; align-items: center; gap: 1.8rem; }
.nav__links a { font-size: .85rem; color: var(--muted); transition: color var(--tr); font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.nav__links a:hover { color: var(--text); }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: .5rem; }
.nav__burger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--tr); }
.nav__mobile { display: none; flex-direction: column; background: rgba(6,6,15,.97); padding: 1rem 2rem 1.5rem; }
.nav__mobile li a { display: block; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--muted); font-family: 'Rajdhani', sans-serif; font-weight: 600; }
.nav__mobile.open { display: flex; }

/* ── Hero ── */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
.hero__banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .35; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,6,15,.4) 0%, rgba(6,6,15,.6) 50%, rgba(6,6,15,1) 100%); }

/* Particles */
.particles { position: absolute; inset: 0; pointer-events: none; }
.particle { position: absolute; border-radius: 50%; animation: particle-float linear infinite; }

@keyframes particle-float { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100px) scale(1); opacity: 0; } }

.hero__content { position: relative; z-index: 1; padding: 6rem 1rem 2rem; }
.hero__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem 1rem; border-radius: 9999px; background: rgba(20,241,149,.1); border: 1px solid rgba(20,241,149,.4); color: var(--green); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2rem; font-family: 'Rajdhani', sans-serif; }
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse-dot 1.5s ease infinite; }
@keyframes pulse-dot { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.7); } }

.hero__title { font-family: 'Orbitron', sans-serif; font-weight: 900; line-height: .95; margin-bottom: 1rem; }
.hero__title-line1 { display: block; font-size: clamp(2.5rem, 9vw, 7.5rem); background: linear-gradient(135deg, #fff 40%, var(--muted) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero__title-line2 { display: block; font-size: clamp(3rem, 13vw, 10rem); background: linear-gradient(135deg, var(--purple), var(--pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 40px rgba(153,69,255,.6)); }

.hero__tagline { font-family: 'Rajdhani', sans-serif; font-size: clamp(1rem, 2.5vw, 1.4rem); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.hero__tagline em { font-style: normal; color: var(--green); text-shadow: 0 0 16px rgba(20,241,149,.6); }
.hero__sub { font-size: clamp(.9rem, 1.5vw, 1.05rem); color: var(--muted); max-width: 560px; margin: 0 auto 2.5rem; }
.hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.hero__powered { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--muted); font-size: .8rem; }
.solana-logo { width: 80px; }
.sol-text { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1rem; background: linear-gradient(135deg, #9945FF, #14F195); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); }
.scroll-line { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--purple), transparent); animation: scroll-anim 2s ease-in-out infinite; }
@keyframes scroll-anim { 0%{transform:scaleY(0);transform-origin:top;opacity:1;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;opacity:0;} }

/* ── Stats Bar ── */
.statsbar { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.5rem 0; }
.statsbar__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; max-width: 1200px; margin-inline: auto; padding: 0 2rem; }
.statitem { text-align: center; padding: .5rem 1.5rem; }
.statitem__val { display: block; font-family: 'Orbitron', sans-serif; font-size: 1.6rem; font-weight: 700; background: linear-gradient(135deg, var(--purple), var(--green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.statitem__lbl { font-size: .72rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-family: 'Rajdhani', sans-serif; font-weight: 600; }
.statitem__sep { width: 1px; height: 40px; background: var(--border); }

/* ── About ── */
.about { background: var(--surface); }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.about__text .section__tag { display: inline-block; }
.about__text h2 { text-align: left; margin-bottom: 1.25rem; }
.about__text p { color: var(--muted); margin-bottom: 1rem; font-size: .95rem; }
.about__text p strong { color: var(--text); }
.about__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.chip { padding: .35rem .9rem; border-radius: 9999px; background: rgba(153,69,255,.12); border: 1px solid rgba(153,69,255,.3); font-size: .8rem; color: var(--text); }

/* Orbit */
.about__visual { display: flex; justify-content: center; align-items: center; }
.orbit-card { position: relative; width: 260px; height: 260px; display: flex; align-items: center; justify-content: center; }
.orbit-card__logo { width: 90px; height: 90px; border-radius: 20px; position: relative; z-index: 2; animation: float 4s ease-in-out infinite; }
.orbit-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(153,69,255,.3); }
.orbit-ring--1 { width: 120px; height: 120px; border-color: rgba(153,69,255,.4); animation: spin-ring 8s linear infinite; }
.orbit-ring--2 { width: 200px; height: 200px; border-color: rgba(224,64,251,.25); animation: spin-ring 14s linear infinite reverse; }
.orbit-ring--3 { width: 260px; height: 260px; border-color: rgba(20,241,149,.15); animation: spin-ring 20s linear infinite; }
.orbit-dot { position: absolute; font-size: 1.4rem; animation: orbit-dot 8s linear infinite; }
.dot--1 { animation-duration: 8s; }
.dot--2 { animation-duration: 12s; animation-delay: -3s; }
.dot--3 { animation-duration: 10s; animation-delay: -5s; }
.dot--4 { animation-duration: 14s; animation-delay: -7s; }

@keyframes spin-ring { to { transform: rotate(360deg); } }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }
@keyframes orbit-dot {
  0%   { transform: rotate(0deg)   translateX(100px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

/* ── How to Play ── */
.how { background: var(--bg); }
.steps { display: flex; align-items: flex-start; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.step { flex: 1 1 260px; max-width: 300px; padding: 2.5rem 2rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); text-align: center; position: relative; transition: transform var(--tr), box-shadow var(--tr); }
.step:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(153,69,255,.2); }
.step__num { font-family: 'Orbitron', sans-serif; font-size: .7rem; color: var(--purple); letter-spacing: .2em; margin-bottom: .75rem; }
.step__icon { font-size: 2.5rem; margin-bottom: 1rem; }
.step h3 { font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 700; letter-spacing: .05em; margin-bottom: .5rem; text-transform: uppercase; }
.step p { color: var(--muted); font-size: .875rem; }
.step__arrow { font-size: 1.5rem; color: var(--border); align-self: center; margin-top: 0; }

/* ── Tokenomics ── */
.tokenomics { background: var(--surface); position: relative; overflow: hidden; }
.tokenomics__bg { position: absolute; inset: 0; pointer-events: none; }
.tok-orb { position: absolute; border-radius: 50%; filter: blur(100px); }
.tok-orb--1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(153,69,255,.25), transparent 70%); top: -100px; right: -100px; }
.tok-orb--2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(20,241,149,.15), transparent 70%); bottom: -100px; left: -100px; }

.tok__grid { display: grid; grid-template-columns: auto 1fr; gap: 4rem; align-items: start; margin-bottom: 4rem; }

/* Pie */
.tok__chart-wrap { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.tok__chart { position: relative; }
.pie-svg { width: 220px; height: 220px; }
.pie-seg { fill: none; transition: stroke-dasharray .8s ease; }
.pie-label-main { font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 900; fill: #fff; }
.pie-label-sub { font-family: 'Rajdhani', sans-serif; font-size: 14px; fill: var(--muted); }
.tok__legend { display: flex; flex-direction: column; gap: .6rem; min-width: 200px; }
.legend-item { display: flex; align-items: center; gap: .6rem; font-size: .85rem; }
.legend-item span:nth-child(2) { flex: 1; color: var(--muted); }
.legend-item strong { color: var(--text); font-family: 'Rajdhani', sans-serif; font-size: 1rem; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

/* Metrics Cards */
.tok__metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.tok-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); transition: transform var(--tr), box-shadow var(--tr); }
.tok-card:hover { transform: translateY(-3px); }
.tok-card__icon { font-size: 1.8rem; }
.tok-card__label { font-size: .7rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-family: 'Rajdhani', sans-serif; }
.tok-card__val { font-family: 'Orbitron', sans-serif; font-size: .95rem; font-weight: 700; }
.tok-card--purple { border-color: rgba(153,69,255,.4); box-shadow: 0 0 20px rgba(153,69,255,.08); }
.tok-card--purple .tok-card__val { color: var(--purple); }
.tok-card--green { border-color: rgba(20,241,149,.3); }
.tok-card--green .tok-card__val { color: var(--green); }
.tok-card--cyan { border-color: rgba(6,182,212,.3); }
.tok-card--cyan .tok-card__val { color: var(--cyan); }
.tok-card--pink { border-color: rgba(224,64,251,.3); }
.tok-card--pink .tok-card__val { color: var(--pink); }
.tok-card--gold { border-color: rgba(245,158,11,.3); }
.tok-card--gold .tok-card__val { color: var(--gold); }
.tok-card--red { border-color: rgba(244,63,94,.3); }
.tok-card--red .tok-card__val { color: var(--red); }

/* Vesting */
.vesting { padding: 3rem; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border); }
.vesting__title { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; margin-bottom: 2rem; }
.vesting__bars { display: flex; flex-direction: column; gap: 1.5rem; }
.vbar__label { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .4rem; display: flex; justify-content: space-between; }
.vbar__track { height: 8px; background: rgba(255,255,255,.06); border-radius: 9999px; overflow: hidden; margin-bottom: .3rem; }
.vbar__fill { height: 100%; border-radius: 9999px; width: 0; transition: width 1.2s ease; }
.vbar__note { font-size: .75rem; color: var(--muted); }

/* ── Roadmap ── */
.roadmap { background: var(--bg); }
.timeline { display: flex; gap: 0; position: relative; }
.timeline::before { content: ''; position: absolute; top: 28px; left: 28px; right: 28px; height: 2px; background: linear-gradient(90deg, var(--purple), var(--pink), var(--green)); opacity: .3; z-index: 0; }
.tl-item { flex: 1; padding: 0 1rem; position: relative; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); margin: 0 auto 1.5rem; position: relative; z-index: 1; }
.tl-item--done .tl-dot { background: var(--green); border-color: var(--green); box-shadow: 0 0 12px rgba(20,241,149,.6); }
.tl-item--active .tl-dot { background: var(--purple); border-color: var(--purple); box-shadow: 0 0 12px rgba(153,69,255,.7); animation: pulse-dot 2s ease infinite; }
.tl-content { padding: 1.5rem; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); }
.tl-item--done .tl-content { border-color: rgba(20,241,149,.25); }
.tl-item--active .tl-content { border-color: rgba(153,69,255,.4); background: rgba(153,69,255,.05); }
.tl-phase { font-family: 'Orbitron', sans-serif; font-size: .65rem; color: var(--muted); letter-spacing: .15em; margin-bottom: .5rem; text-transform: uppercase; }
.tl-item--done .tl-phase { color: var(--green); }
.tl-item--active .tl-phase { color: var(--purple); }
.tl-content h4 { font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .75rem; }
.tl-content ul { list-style: none; }
.tl-content li { font-size: .8rem; color: var(--muted); padding: .2rem 0; }
.tl-content li::before { content: '▸ '; color: var(--purple); }
.tl-item--done li::before { color: var(--green); }

/* ── CTA ── */
.cta { position: relative; overflow: hidden; text-align: center; }
.cta__bg { position: absolute; inset: 0; pointer-events: none; }
.cta-orb { position: absolute; border-radius: 50%; filter: blur(120px); }
.cta-orb--1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(153,69,255,.3), transparent 70%); top: -200px; left: 50%; transform: translateX(-50%); }
.cta-orb--2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(20,241,149,.2), transparent 70%); bottom: -100px; right: 5%; }
.cta__inner { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.cta__inner h2 { margin-bottom: .75rem; }
.cta__inner > p { color: var(--muted); margin-bottom: 2.5rem; }
.cta__form { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-bottom: .75rem; }
.input { flex: 1 1 280px; padding: .9rem 1.5rem; border-radius: 9999px; background: rgba(255,255,255,.06); border: 1.5px solid var(--border); color: var(--text); font-size: .95rem; outline: none; transition: border-color var(--tr); font-family: 'Inter', sans-serif; }
.input:focus { border-color: var(--purple); }
.input::placeholder { color: var(--muted); }
.cta__note { font-size: .78rem; color: var(--muted); margin-bottom: 2rem; }
.cta__success { display: none; padding: 1rem 2rem; border-radius: var(--radius); background: rgba(20,241,149,.1); border: 1px solid rgba(20,241,149,.4); color: var(--text); margin-bottom: 1.5rem; }
.cta__socials { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.social-btn { padding: .55rem 1.4rem; border-radius: 9999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: .85rem; font-family: 'Rajdhani', sans-serif; font-weight: 600; letter-spacing: .05em; transition: var(--tr); }
.social-btn:hover { background: rgba(153,69,255,.2); border-color: var(--purple); }

/* ── Footer ── */
.footer { padding: 3rem 0 2rem; border-top: 1px solid var(--border); background: var(--surface); }
.footer__top { display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; }
.footer__desc { color: var(--muted); font-size: .85rem; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer__emails { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: .75rem; }
.footer__emails a { font-size: .82rem; color: var(--muted); transition: color var(--tr); }
.footer__emails a:hover { color: var(--purple); }
.footer__copy { font-size: .8rem; color: var(--muted); }
.footer__links { display: flex; gap: 1.5rem; }
.footer__links a { font-size: .8rem; color: var(--muted); transition: color var(--tr); }
.footer__links a:hover { color: var(--text); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .tok__grid { grid-template-columns: 1fr; }
  .tok__chart-wrap { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .about__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about__visual { order: -1; }
  .timeline { flex-direction: column; }
  .timeline::before { top: 0; bottom: 0; left: 14px; right: auto; width: 2px; height: auto; }
  .tl-dot { margin: 0 0 1rem 7px; }
}
@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .steps { flex-direction: column; align-items: center; }
  .step__arrow { transform: rotate(90deg); }
  .tok__metrics { grid-template-columns: 1fr; }
  .statsbar__inner { gap: .5rem; }
  .statitem { padding: .5rem .75rem; }
  .statitem__sep { display: none; }
}
@media (max-width: 480px) {
  .cta__form { flex-direction: column; }
  .input, .cta__form .btn { width: 100%; }
  .footer__bottom { flex-direction: column; text-align: center; }
}