:root{
  --space:#070d1d; --space2:#0b1024; --ink:#e6edf7; --muted:#9fb2d6;
  --purple:#7c5cff; --indigo:#4e46e5; --gold:#ffcc4d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(var(--space2), #0a0f22 60%, var(--space2)); color:#fff}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; letter-spacing:.15px}
a{color:#cbd1ff;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

.top{position:sticky;top:0;z-index:20;background:rgba(11,16,33,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{font-family:"Space Grotesk",Inter,sans-serif;font-weight:800}

nav a{margin:0 10px;color:#e6edf7;font-weight:600}
nav .btn{margin-left:8px}

.hero{position:relative;overflow:hidden;padding:120px 0 80px;background:radial-gradient(800px 500px at 20% -20%, rgba(124,92,255,.18), transparent 60%), radial-gradient(700px 600px at 110% 120%, rgba(255,204,77,.14), transparent 60%)}
.space-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.title{font-family:"Space Grotesk",Inter,sans-serif;font-weight:800;font-size:clamp(36px,5.5vw,66px);line-height:1.08;margin:0 0 10px}
.shine{background:linear-gradient(90deg,#fff,#fde68a 40%,#c4b5fd); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:var(--ink);max-width:740px;margin:0 0 16px}

.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;background:linear-gradient(90deg,var(--purple),var(--indigo));color:#0b1020;font-weight:800;box-shadow:0 10px 24px rgba(124,92,255,.28);transition:transform .18s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(124,92,255,.35)}
.btn.gold{background:linear-gradient(90deg,var(--gold),#ffd86a); box-shadow:0 10px 24px rgba(255,204,77,.28)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff}

.hero-mascot{width:clamp(320px, 44vw, 820px); border-radius:16px; filter:drop-shadow(0 16px 34px rgba(0,0,0,.55))}

.section{padding:90px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.section h2{font-family:"Space Grotesk",Inter,sans-serif;font-size:28px;margin:0 0 10px;color:#fff}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:rgba(17,24,39,.55);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);backdrop-filter:blur(6px);color:#e6edf7}
.list{padding-left:18px}
.steps{padding-left:18px}
.steps li{margin:8px 0}

.bars .bar{position:relative;height:34px;background:#132036;border-radius:18px;overflow:hidden;margin:14px 0;border:1px solid rgba(255,255,255,.06);box-shadow: inset 0 2px 6px rgba(0,0,0,.45)}
.bars .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold) 0%, #f7d77a 35%, var(--purple) 100%); box-shadow:0 0 18px rgba(251,191,36,.25)}
.bars .bar label{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:#eaf1ff;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.8);letter-spacing:.2px;pointer-events:none}

.foot{padding:40px 0;border-top:1px solid rgba(255,255,255,.06);background:rgba(11,16,33,.85);backdrop-filter:blur(12px)}
.footgrid{display:grid;grid-template-columns:1.1fr .6fr .6fr;gap:22px}
.copy{margin-top:18px;text-align:center;color:#9fb2d6;font-size:.9rem}

@media (max-width: 900px){
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  nav{display:none}
  .hero-grid{grid-template-columns:1fr}
  .hero{padding:100px 0 60px}
}


/* Premium polish */
.small{padding:8px 12px;border-radius:10px;font-size:.85rem}
.hero .title{letter-spacing:.2px;text-shadow:0 6px 30px rgba(0,0,0,.35)}
.card{transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 24px 70px rgba(0,0,0,.45)}
.btn{position:relative; overflow:hidden}
.btn::after{content:""; position:absolute; inset:-1px; background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform:translateX(-120%); transition:transform .7s ease}
.btn:hover::after{transform:translateX(120%)}

/* Parallax tilt for hero image */
.hero-art{perspective:900px}
.hero-mascot{transform:rotateY(0deg) translateZ(0); transition:transform .2s ease}

/* Gradient borders for bars card */
.bars{border:1px solid transparent; background:linear-gradient( rgba(17,24,39,.6), rgba(17,24,39,.6)) padding-box, radial-gradient(circle at 20% 10%, #7c5cff, #ffcc4d ) border-box}

/* Token bars animated fill */
.bars .bar span{width:0}
.bars.revealed .bar:nth-child(1) span{width:10%; transition:width 900ms ease}
.bars.revealed .bar:nth-child(2) span{width:5%; transition:width 900ms ease .1s}
.bars.revealed .bar:nth-child(3) span{width:20%; transition:width 900ms ease .2s}
.bars.revealed .bar:nth-child(4) span{width:15%; transition:width 900ms ease .3s}
.bars.revealed .bar:nth-child(5) span{width:15%; transition:width 900ms ease .4s}
.bars.revealed .bar:nth-child(6) span{width:20%; transition:width 900ms ease .5s}
.bars.revealed .bar:nth-child(7) span{width:15%; transition:width 900ms ease .6s}

/* Section fade-in */
.section{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
.section.show{opacity:1; transform:none}

/* Floating back-to-top */
.totop{position:fixed; right:18px; bottom:18px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(20,28,48,.65); color:#fff; font-weight:900; box-shadow:0 12px 38px rgba(0,0,0,.4); display:none; align-items:center; justify-content:center; backdrop-filter:blur(6px); z-index:50}
.totop.show{display:flex}

/* Contract row */
.contract{display:flex; align-items:center; gap:10px; margin-top:12px}
.contract code{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:10px; color:#e6edf7}


/* Ultra nebula overlay for hero */
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 80% 20%, rgba(124,92,255,.15), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(255,204,77,.12), transparent 60%);
  pointer-events:none; z-index:0;
}


/* Surprise countdown */
.counter{
  font-size:2rem;
  margin-top:1rem;
  font-weight:700;
  background:linear-gradient(90deg,#ffcc4d,#7c5cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}