:root{
  --bg:#04050b;
  --fg:rgba(245,248,255,.96);
  --muted:rgba(245,248,255,.68);
  --stroke:rgba(255,255,255,.11);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow:hidden;
}

.bg{position:fixed; inset:0; z-index:0;}
.aurora{
  position:absolute; inset:-30%;
  background:
    radial-gradient(closest-side at 20% 25%, rgba(0,212,255,.28), transparent 60%),
    radial-gradient(closest-side at 80% 20%, rgba(138,43,226,.22), transparent 60%),
    radial-gradient(closest-side at 70% 80%, rgba(255,43,214,.17), transparent 62%),
    radial-gradient(closest-side at 25% 80%, rgba(0,255,179,.12), transparent 62%);
  filter: blur(24px) saturate(135%);
  animation: drift 10s ease-in-out infinite alternate;
  opacity:.95;
}
@keyframes drift{
  0%{transform:translate3d(-1.5%,-1%,0) scale(1.03) rotate(-1deg);}
  100%{transform:translate3d(1.5%,1%,0) scale(1.08) rotate(1deg);}
}

.beams{
  position:absolute; inset:-20%;
  background:
    conic-gradient(from 220deg,
      transparent 0 20%,
      rgba(0,212,255,.08) 20% 25%,
      transparent 25% 45%,
      rgba(255,43,214,.06) 45% 50%,
      transparent 50% 70%,
      rgba(138,43,226,.06) 70% 75%,
      transparent 75% 100%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity:.65;
  animation: spin 16s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

#starfield,#particles{
  position:absolute; inset:0; width:100%; height:100%;
  mix-blend-mode: screen;
}
#starfield{opacity:.85;}
#particles{opacity:.75;}

.scanlines{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03),
    rgba(255,255,255,.03) 1px,
    transparent 1px,
    transparent 7px
  );
  opacity:.35;
  pointer-events:none;
  mix-blend-mode: overlay;
}
.vignette{
  position:absolute; inset:-2px;
  background: radial-gradient(closest-side, transparent 55%, rgba(0,0,0,.75));
  pointer-events:none;
}
.grain{
  position:absolute; inset:-35%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.40'/%3E%3C/svg%3E");
  opacity:.07;
  animation: grain 7s steps(10) infinite;
  pointer-events:none;
}
@keyframes grain{to{transform:translate(-6%,4%) rotate(2deg)}}

.wrap{
  position:relative; z-index:1;
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
}

.stage{
  width:min(980px, 92vw);
  padding: 34px 28px 30px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.11);
  box-shadow: 0 22px 90px rgba(0,0,0,.62);
  backdrop-filter: blur(16px);
  position:relative;
  overflow:hidden;
}

.stage::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(closest-side at 15% 15%, rgba(0,212,255,.18), transparent 55%),
    radial-gradient(closest-side at 85% 25%, rgba(255,43,214,.14), transparent 58%),
    radial-gradient(closest-side at 50% 90%, rgba(138,43,226,.16), transparent 60%);
  filter: blur(18px);
  opacity:.9;
  pointer-events:none;
}

.hud{
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(245,248,255,.75);
}
.hud .dot{
  width:8px; height:8px; border-radius:99px;
  background: rgba(0,255,179,.85);
  box-shadow: 0 0 18px rgba(0,255,179,.45);
}
.hud .sep{opacity:.4}
.hud .muted{opacity:.85}

.orb{
  position:absolute;
  left:50%;
  top:52%;
  width: 520px;
  height: 520px;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 35%, rgba(0,212,255,.22), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(255,43,214,.18), transparent 62%),
    radial-gradient(circle at 50% 78%, rgba(138,43,226,.20), transparent 65%);
  filter: blur(10px);
  opacity:.85;
  animation: orb 4.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes orb{
  0%,100%{transform:translate(-50%,-50%) scale(1.00)}
  50%{transform:translate(-50%,-50%) scale(1.05)}
}

.logo{ margin: 18px 0 4px; text-align:center; }
.logo__glitch{
  position:relative;
  display:inline-block;
  font-weight: 950;
  letter-spacing:.09em;
  font-size: clamp(56px, 9vw, 112px);
  text-transform: uppercase;

  background: linear-gradient(90deg,
    rgba(255,255,255,.20),
    rgba(0,212,255,.85),
    rgba(255,43,214,.75),
    rgba(138,43,226,.80),
    rgba(255,255,255,.20)
  );
  background-size: 240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  filter: drop-shadow(0 0 14px rgba(0,212,255,.18))
          drop-shadow(0 0 22px rgba(255,43,214,.14))
          drop-shadow(0 0 34px rgba(138,43,226,.16));
  animation: shimmer 2.1s linear infinite, floaty 3.0s ease-in-out infinite;
}
@keyframes shimmer{to{background-position:240% 50%}}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

.logo__glitch::before,
.logo__glitch::after{
  content: attr(data-text);
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.9;
}
.logo__glitch::before{
  color: rgba(0,212,255,.85);
  transform: translate(-2px,0);
  clip-path: inset(0 0 55% 0);
  animation: glitchA 1.7s infinite linear alternate-reverse;
  text-shadow: 0 0 20px rgba(0,212,255,.30);
}
.logo__glitch::after{
  color: rgba(255,43,214,.70);
  transform: translate(2px,0);
  clip-path: inset(45% 0 0 0);
  animation: glitchB 2.0s infinite linear alternate;
  text-shadow: 0 0 20px rgba(255,43,214,.26);
}
@keyframes glitchA{
  0%{clip-path:inset(0 0 68% 0); transform:translate(-2px,-1px)}
  25%{clip-path:inset(12% 0 52% 0); transform:translate(-4px,1px)}
  50%{clip-path:inset(4% 0 74% 0); transform:translate(-2px,0)}
  75%{clip-path:inset(20% 0 48% 0); transform:translate(-5px,-1px)}
  100%{clip-path:inset(10% 0 60% 0); transform:translate(-3px,1px)}
}
@keyframes glitchB{
  0%{clip-path:inset(44% 0 0 0); transform:translate(2px,1px)}
  30%{clip-path:inset(58% 0 0 0); transform:translate(5px,-1px)}
  60%{clip-path:inset(36% 0 0 0); transform:translate(2px,0)}
  100%{clip-path:inset(52% 0 0 0); transform:translate(4px,1px)}
}

.subtitle{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.chip{
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  color: rgba(245,248,255,.84);
  font-size: 12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.chip.ghost{opacity:.72}

.meter{
  position:relative;
  width:min(680px, 82%);
  height: 10px;
  margin: 22px auto 12px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.meter__bar{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,212,255,.0), rgba(0,212,255,.6), rgba(255,43,214,.55), rgba(138,43,226,.60), rgba(0,255,179,.45), rgba(0,212,255,.0));
  transform: translateX(-35%);
  animation: sweep 2.2s ease-in-out infinite;
}
.meter__shine{
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.15), transparent 60%);
  animation: shine 2.2s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes sweep{
  0%{transform:translateX(-45%)}
  50%{transform:translateX(45%)}
  100%{transform:translateX(-45%)}
}
@keyframes shine{
  0%{transform:translate(-10%,0) scale(1.0)}
  50%{transform:translate(10%,0) scale(1.15)}
  100%{transform:translate(-10%,0) scale(1.0)}
}

.note{
  margin: 10px auto 0;
  max-width: 70ch;
  color: var(--muted);
  line-height:1.7;
  font-size: 14px;
  text-align:center;
}

.corner{
  position:fixed;
  right:18px;
  bottom:16px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 10px;
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  text-decoration:none;
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 34px rgba(0,0,0,.48);
  overflow:hidden;
  backdrop-filter: blur(16px);
  transition: transform .15s ease, border-color .15s ease;
}
.btn:hover{ transform: translateY(-2px); border-color: rgba(0,212,255,.40); }
.btn__bg{
  position:absolute; inset:-45%;
  background:
    radial-gradient(circle at 20% 35%, rgba(0,212,255,.35), transparent 60%),
    radial-gradient(circle at 75% 25%, rgba(255,43,214,.25), transparent 62%),
    radial-gradient(circle at 50% 85%, rgba(138,43,226,.28), transparent 62%);
  filter: blur(14px);
  opacity:.85;
  animation: btnGlow 3s ease-in-out infinite alternate;
}
@keyframes btnGlow{
  0%{transform:translate(-2%,-2%) scale(1.02)}
  100%{transform:translate(2%,2%) scale(1.10)}
}
.btn__txt{
  position:relative;
  font-weight: 900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size: 12px;
}
.btn__icon{ position:relative; font-weight: 900; opacity:.9; }

.powered{
  font-size: 12px;
  color: rgba(245,248,255,.65);
}
.powered span{
  color: rgba(245,248,255,.92);
  text-shadow: 0 0 16px rgba(0,212,255,.22);
}

@media (max-width:520px){
  .stage{padding:28px 18px;}
  .meter{width:92%;}
}