/* futuristic.css — shared neon / glass theme (animated backdrop + chrome).
   Pages that link this remap their own :root palette to the neon values below. */
:root { --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; }

/* Animated space backdrop: drifting glows + faint grid */
body::before { content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(60vw 50vh at 12% -8%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(55vw 50vh at 92% 4%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(60vw 60vh at 50% 120%, rgba(34,227,255,.10), transparent 60%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(120,170,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,.14) 1px, transparent 1px);
  background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 50% 25%, #000 0%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 25%, #000 0%, transparent 78%); }

/* Brand + live badge + nav chrome */
.fx-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 3px; font-size: 15px; color: #e9f1ff; }
.fx-brand .orb { width: 13px; height: 13px; border-radius: 50%; background: #22e3ff;
  box-shadow: 0 0 14px #22e3ff, 0 0 30px #22e3ff; animation: fxpulse 2s infinite; }
.fx-live { display: inline-flex; align-items: center; gap: 8px; font: 700 11px var(--mono); letter-spacing: 2px;
  color: #1dffa6; border: 1px solid rgba(29,255,166,.35); border-radius: 999px; padding: 6px 12px; background: rgba(29,255,166,.06); }
.fx-live .d { width: 7px; height: 7px; border-radius: 50%; background: #1dffa6; box-shadow: 0 0 10px #1dffa6; animation: fxpulse 1.4s infinite; }
.fx-nav { display: flex; gap: 8px; }
.fx-nav a { font: 600 12px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: #7c89a8; text-decoration: none;
  border: 1px solid rgba(120,170,255,.16); border-radius: 9px; padding: 9px 13px; min-height: 40px; display: inline-flex; align-items: center; transition: .2s; }
.fx-nav a:hover { color: #e9f1ff; border-color: rgba(120,170,255,.3); }
.fx-nav a.active { color: #06121f; background: linear-gradient(135deg, #22e3ff, #3b82f6); border-color: transparent; box-shadow: 0 0 20px rgba(34,227,255,.4); }

@keyframes fxpulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { body::before, body::after, .orb, .fx-live .d { animation: none !important; } }