/* === Hyperrealistic Neon Text === */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2.5rem;
}

.neon {
  position: relative;
  font-weight: 800;
  font-size: clamp(48px, 8vw, 128px);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  background: linear-gradient(180deg,#e9feff 0%, #c9f3ff 40%, #c2e7ff 60%, #eaffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 0.5px #aaf6ff,
    0 0 2px #aaf6ff,
    0 0 6px #88e6ff,
    0 0 14px #49d0ff,
    0 0 26px #22aaff,
    0 0 50px #0088ff;
  filter: saturate(1.1);
  animation: neonPulse 3.2s ease-in-out infinite, neonFlicker 8s linear infinite;
  will-change: transform;
}

.neon::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 10px rgba(255,255,255,.06);
  filter: blur(.8px);
  pointer-events: none;
}

.neon::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #7fe2ff;
  filter: blur(12px) saturate(1.3);
  opacity: .85;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: neonHalo 5s ease-in-out infinite;
}

.neon-sub {
  opacity: .8;
  letter-spacing: .25em;
  font-size: clamp(12px, 1.5vw, 16px);
  text-transform: uppercase;
  margin: 0;
}

@keyframes neonPulse {
  0%, 100% {
    text-shadow:
      0 0 0.5px #aaf6ff, 0 0 2px #aaf6ff, 0 0 6px #88e6ff,
      0 0 14px #49d0ff, 0 0 26px #22aaff, 0 0 50px #0088ff;
  }
  50% {
    text-shadow:
      0 0 1px #bff9ff, 0 0 4px #bff9ff, 0 0 12px #9beaff,
      0 0 24px #5ad8ff, 0 0 52px #22aaff, 0 0 80px #0088ff;
  }
}

@keyframes neonFlicker {
  0%, 1%, 2%, 55%, 56%, 100% { opacity: 1; }
  0.5% { opacity: .85; }
  1.5% { opacity: .6; }
  55.5% { opacity: .9; }
}

@keyframes neonHalo {
  0%, 100% { opacity: .8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}