/* Variant: Neon — a glowing neon-sign headline in a neon frame on a dark wall. Dark only. */
:root {
  --bg: #0a0612; --surface: #140d22; --muted: #0f0919; --ink: #f6eefe; --ink-2: #ad9fc3; --line: #2a1e40;
  --accent: #ff4fd8; --accent-ink: #1a0618; --accent-soft: #3a1440; --green-soft: #1a1a3a; --amber-soft: #2e1a2a;
  --night: #140d22; --night-2: #1d1330; --night-line: rgba(255, 255, 255, 0.09); --night-ink: #f6eefe; --night-ink-2: #ad9fc3;
  --cyan: #4ff0ff; --pink: #ff4fd8;
  --ui-bg: #1b1230; --ui-line: #2c2048; --ui-fill: #3a2c5a; --ui-fill-2: #22173a; --ui-strong: #f6eefe;
  --ui-accent: #ff4fd8; --ui-img: #2a1840; --ui-tint-a: #4a1d55; --ui-tint-b: #173a4a; --ui-tint-c: #3a2a4a;
  color-scheme: dark;
}
.ne-hero { background: radial-gradient(60rem 30rem at 50% 30%, rgba(255, 79, 216, 0.12), transparent 70%), radial-gradient(40rem 24rem at 70% 70%, rgba(79, 240, 255, 0.08), transparent 70%); }
.ne-inner { display: flex; flex-direction: column; align-items: center; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2rem, 4vw, 3rem); text-align: center; }
.ne-frame {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4rem);
  border: 3px solid var(--cyan); border-radius: 36px;
  box-shadow: 0 0 6px var(--cyan), 0 0 24px rgba(79, 240, 255, 0.6), inset 0 0 18px rgba(79, 240, 255, 0.35);
}
.ne-title {
  max-width: 14ch; font-size: clamp(2.75rem, 6.6vw, 6.25rem); font-weight: 450; line-height: 1; letter-spacing: -0.035em; color: #ffe6fb;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--pink), 0 0 28px var(--pink), 0 0 60px rgba(255, 79, 216, 0.7);
}
@media (prefers-reduced-motion: no-preference) {
  .ne-title { animation: ne-flicker 4s linear 1; }
  @keyframes ne-flicker { 0%, 6%, 9%, 12% { opacity: 1; } 7%, 10% { opacity: 0.35; } 100% { opacity: 1; } }
}
.ne-hero .hero__lead { margin-top: 2rem; color: var(--ink-2); }
.ne-hero .hero__actions { justify-content: center; align-self: center; margin-top: 2rem; }
.ne-hero .pill--accent { background: transparent; color: #ffe6fb; border: 2px solid var(--pink); box-shadow: 0 0 10px rgba(255, 79, 216, 0.6), inset 0 0 8px rgba(255, 79, 216, 0.4); }
.tile--dark { background: #140d22; box-shadow: inset 0 0 0 1px var(--pink), 0 0 24px rgba(255, 79, 216, 0.25); }
.tile--dark .focus strong { color: var(--cyan); }
.section__head h2 { text-shadow: 0 0 18px rgba(255, 79, 216, 0.35); }
.steps li::before { background: transparent; border: 2px solid var(--cyan); color: var(--cyan); box-shadow: 0 0 10px rgba(79, 240, 255, 0.5); }