:root{
  --bg:#0b0b0b;
  --core:#ffffff;
  --accent:#ff6b6b;
  --accent-2:#4be1ff;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body,#glow,main{height:100%}
body{
  height:100vh;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(75,225,255,0.06), transparent 10%),
    radial-gradient(1000px 500px at 90% 90%, rgba(255,107,107,0.06), transparent 10%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Stage centers content and contains subtle vignette */
.stage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* Bold glowing headline */
#glow{
  font-weight:800;
  letter-spacing:0.08em;
  font-size: clamp(48px, 18vw, 160px);
  color:var(--core);
  text-transform:uppercase;
  text-align:center;
  line-height:1;
  position:relative;
  transition:transform .2s ease;
  will-change:filter,text-shadow,transform;
  /* layered glow */
  text-shadow:
    0 0 6px rgba(255,255,255,0.14),
    0 0 18px rgba(75,225,255,0.06),
    0 0 28px rgba(255,107,107,0.06),
    0 6px 30px rgba(0,0,0,0.6);
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6));
  -webkit-font-smoothing:antialiased;
}

/* Animated neon pulsing and color sweep */
@keyframes neonPulse {
  0%{
    text-shadow:
      0 0 6px rgba(255,255,255,0.12),
      0 0 16px rgba(75,225,255,0.05),
      0 0 28px rgba(255,107,107,0.04),
      0 6px 30px rgba(0,0,0,0.6);
    transform:scale(1);
  }
  50%{
    text-shadow:
      0 0 12px rgba(255,255,255,0.18),
      0 0 36px rgba(75,225,255,0.12),
      0 0 48px rgba(255,107,107,0.10),
      0 18px 40px rgba(0,0,0,0.65);
    transform:scale(1.02);
  }
  100%{ 
    text-shadow:
      0 0 6px rgba(255,255,255,0.12),
      0 0 16px rgba(75,225,255,0.05),
      0 0 28px rgba(255,107,107,0.04),
      0 6px 30px rgba(0,0,0,0.6);
    transform:scale(1);
  }
}

@keyframes colorSweep {
  0%{ filter: hue-rotate(0deg) saturate(1); }
  50%{ filter: hue-rotate(20deg) saturate(1.05); }
  100%{ filter: hue-rotate(0deg) saturate(1); }
}

#glow.animate{
  animation: neonPulse 3s ease-in-out infinite, colorSweep 8s linear infinite;
  cursor:default;
}

/* subtle hover scale for desktop pointer */
@media (pointer: fine){
  #glow:hover{
    transform:scale(1.03);
  }
}

/* Subtext under the headline */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.subtext{
  font-weight:600;
  font-size:clamp(12px, 3.6vw, 20px);
  color: rgba(255,255,255,0.65);
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-top:6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  transition: color .18s ease, transform .18s ease;
  transform: translateY(0);
}

/* Background glow layers (soft orbs) */
.bg-glow{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0; /* behind content */
}
.bg-glow__orb{
  position: absolute;
  width: 400px;
  height: 400px;
  max-width: 40vmax;
  max-height: 40vmax;
  border-radius: 50%;
  filter: blur(60px) saturate(1.2);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0,0,0) scale(1);
  transition: opacity .8s ease, transform .9s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #glow.animate{ animation: none; }
  #glow{ transition:none; }
  .subtext{ transition:none; transform:none; }

  /* disable background glow for reduced-motion */
  .bg-glow, .bg-glow__orb{ display: none; }
}