*{box-sizing:border-box}
:root{
  --bg:#070b12;
  --ink:#d9efff;
  --accent:#63c8ff;
  --glow:#3bd2ff;
  --mint:#21e6a2;
  --pf:#ffd166;
  --x:#1d9bf0;
}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 600px at 50% -10%, #0d1423 0%, #070b12 60%, #05070c 100%);
  overflow-x:hidden;
}
#stars{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  background: linear-gradient(180deg, rgba(7,11,18,.9) 0%, rgba(7,11,18,.6) 60%, rgba(7,11,18,0) 100%);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; gap:12px; align-items:center}
.brand-avatar{width:40px; height:40px; border-radius:10px; box-shadow:0 0 18px #1e90ff55}
.brand-text h1{margin:0; letter-spacing:.2rem; font-weight:800; font-size:18px}
.brand-text p{margin:0; opacity:.7; font-size:12px; letter-spacing:.12rem}

.cta-bar{display:flex; gap:10px}
.btn{
  --c: var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 14px; border-radius:12px; text-decoration:none; color:#001019;
  background: linear-gradient(180deg, var(--c), color-mix(in oklab, var(--c) 70%, black));
  box-shadow: 0 0 24px color-mix(in oklab, var(--c) 40%, transparent);
  font-weight:700; letter-spacing:.06rem;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
.btn-mint{--c: var(--mint);}
.btn-x{--c: var(--x);}
.btn-pf{--c: var(--pf);}
.btn.big{padding:14px 20px; font-size:18px; border-radius:14px}

.hero{position:relative; padding:54px 22px 12px; z-index:1; overflow:hidden}
.hero-banner{
  width:min(1200px, 92vw); display:block; margin:40px auto 0; border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  animation: float 7s ease-in-out infinite;
}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

.hero .hero-inner{max-width:1100px; margin:0 auto; text-align:center}
.glow-title{font-size:44px; margin:10px 0 6px; text-shadow:0 0 16px var(--glow)}
.sub{opacity:.9; max-width:820px; margin:0 auto 18px; line-height:1.6}

.gradient-auras::before,
.gradient-auras::after{
  content:""; position:absolute; inset:auto; border-radius:50%;
  filter: blur(80px); opacity:.55; animation: pulse 8s ease-in-out infinite;
}
.gradient-auras::before{width:360px; height:360px; left:10%; top:-60px; background: radial-gradient(#5bffde,#00d5ff22)}
.gradient-auras::after{width:420px; height:420px; right:6%; top:20px; background: radial-gradient(#ff7ad1,#7a5bff22); animation-delay:1.7s}
@keyframes pulse{0%,100%{transform:scale(.95)}50%{transform:scale(1.05)}}

.about, .gallery, .roadmap{position:relative; z-index:1; padding:32px 22px}
.about h3, .gallery h3, .roadmap h3{font-size:28px; margin:6px 0 12px}
.about p{max-width:900px; line-height:1.8; opacity:.92}

.gallery .grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap:16px; max-width:1100px; margin:10px auto 0;
}
.card{
  position:relative; overflow:hidden; border-radius:16px; background:#0a1220;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 26px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.5)}
.card img{width:100%; display:block}
.card .tag{
  position:absolute; left:10px; top:10px; padding:6px 10px; border-radius:12px; font-weight:700; font-size:12px;
  background:rgba(0,0,0,.45); color:#bde7ff; backdrop-filter: blur(4px); border:1px solid rgba(255,255,255,.08);
}

.roadmap .steps{display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; max-width:1100px; margin:6px auto 0}
.step{background:#0a1220; border-radius:16px; padding:18px; border:1px solid rgba(255,255,255,.07)}
.step span{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#0f1b2d; color:#8ad5ff; font-weight:800; margin-bottom:8px}
.step h4{margin:6px 0 6px}

.site-footer{
  margin-top:28px; padding:20px 22px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; z-index:1; position:relative;
}
.site-footer a{color:#79d6ff; text-decoration:none}
@media (max-width:700px){
  .glow-title{font-size:32px}
  .btn.big{font-size:16px}
  .brand-text h1{font-size:16px}
}