:root {
  --bg: #050914;
  --glow-a: rgba(56, 168, 255, 0.22);
  --glow-b: rgba(255, 152, 0, 0.16);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 45%), var(--glow-a), transparent 30rem),
    radial-gradient(circle at calc(100% - var(--mx, 50%)) 22%, var(--glow-b), transparent 34rem),
    linear-gradient(135deg, #02040a 0%, var(--bg) 48%, #0c1225 100%);
}

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px;
  pointer-events: none;
  transform: translateY(-7.5vh);
}

.wordmark {
  display: block;
  width: min(760px, 78vw);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.16))
    drop-shadow(0 0 46px rgba(85, 243, 255, 0.18));
  opacity: 0.98;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media (max-width: 640px) {
  .hero { padding: 20px; }
  .wordmark { width: min(92vw, 520px); }
}