:root{
  --bg-1:#0b0b10;
  --stroke:rgba(255,255,255,0.10);
  --text:#ffffff;
  --muted:rgba(255,255,255,0.65);
  --accent-1:#7e7af7;
  --accent-2:#ff7ad6;
  --radius:22px;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(126,122,247,.12), transparent 70%),
    radial-gradient(900px 500px at 20% -10%, rgba(255,122,214,.08), transparent 70%),
    linear-gradient(180deg, #0a0a0f 0%, #07070b 100%);
  background-color:var(--bg-1);
  overflow-x:hidden;
}

#particles{
  position:fixed; inset:0; z-index:0;
  opacity:.42;
  filter:none;
  pointer-events:none;
}

.page{
  position:relative;
  z-index:1;
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:48px;
}

.nav{
  max-width:1100px; width:92%;
  margin:24px auto 0;
  padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--stroke);
  border-radius:calc(var(--radius) + 8px);
  box-shadow:var(--shadow);
}

.brand{display:flex; align-items:center}
.brand img{
  height:34px; width:auto; display:block;
  transition:transform .25s ease, filter .25s ease;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}
.brand:hover img{
  transform:translateY(-1px);
  filter:
    drop-shadow(0 0 12px rgba(126,122,247,.55))
    drop-shadow(0 0 28px rgba(255,122,214,.35));
}

.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  color:#fff; text-decoration:none; font-weight:600;
  background:linear-gradient(90deg, var(--accent-1), var(--accent-2));
  box-shadow:0 8px 24px rgba(126,122,247,.35);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.chip:hover{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 8px rgba(126,122,247,.14),
    0 18px 40px rgba(126,122,247,.35),
    0 0 32px rgba(255,122,214,.25);
  filter:saturate(115%);
}

.hero{
  position:relative;
  max-width:1100px; width:92%;
  margin:0 auto;
  padding:0;
  border-radius:var(--radius);
  isolation:isolate;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  text-align:center;
}
.hero-inner{
  padding:84px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}
.hero::before{
  content:"";
  position:absolute; inset:1px; border-radius:inherit; z-index:-1;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(10,11,18,.40), transparent 65%),
    radial-gradient(140% 120% at 50% 100%, rgba(10,11,18,.55), transparent 70%),
    rgba(10,11,18,.28);
}
.hero .aura{
  position:absolute; inset:-2px; z-index:-2;
  border-radius:inherit;
  background:
    radial-gradient(500px 240px at 50% 0%, rgba(126,122,247,.22), transparent 60%),
    radial-gradient(600px 260px at 50% 100%, rgba(255,122,214,.16), transparent 70%);
}

.headline{
  margin:0;
  font-weight:800;
  font-size:clamp(40px, 7vw, 84px);
  line-height:1.05;
  letter-spacing:-0.02em;
  animation:fadeUp .9s ease both .2s;
}

.gradient{
  background:linear-gradient(90deg,#b7c2ff 0%,#7e7af7 22%,#b57cff 50%,#ff9b66 78%,#ffc266 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%;
  animation:headline-sheen 9s ease-in-out infinite;
}
@keyframes headline-sheen{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.lede{
  margin:0;
  max-width:760px;
  color:var(--muted);
  font-size:clamp(16px, 2.3vw, 20px);
  line-height:1.7;
  animation:fadeUp .9s ease both .35s;
}

.countdown{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  animation:fadeUp .9s ease both .5s;
}
.countdown .time{
  min-width:110px;
  padding:18px 16px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.countdown .time span{
  display:block;
  font-weight:800;
  font-size:38px;
  letter-spacing:.02em;
}
.countdown .time small{
  display:block;
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color:var(--muted);
  margin-top:6px; letter-spacing:.04em;
}

.footer{
  max-width:1100px; width:92%;
  margin:10px auto 40px;
  color:var(--muted);
  text-align:center;
  font-family:"Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:640px){
  .nav{padding:10px 14px}
  .chip{padding:9px 12px; font-size:14px}
  .countdown .time{min-width:96px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}