/* =====================================================================
   NostalgicVerse - main.css
   Dark theme + neon accents (purple / blue) + glassmorphism
   Phase 9 visual refresh
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* surfaces */
  --nv-bg-0: #05060d;
  --nv-bg-1: #0a0c1c;
  --nv-bg-2: #0f1228;
  --nv-surface: rgba(20, 22, 48, 0.55);
  --nv-surface-2: rgba(28, 31, 64, 0.75);
  --nv-surface-solid: #14163a;
  --nv-surface-elev: #1a1d44;

  /* borders */
  --nv-border: rgba(255, 255, 255, 0.08);
  --nv-border-strong: rgba(150, 130, 255, 0.35);

  /* text */
  --nv-text: #f1f3ff;
  --nv-text-2: #c7cae5;
  --nv-muted: #8b8fb3;

  /* neon accents (purple + blue) */
  --nv-neon-purple: #8a5cff;
  --nv-neon-purple-2: #b388ff;
  --nv-neon-blue: #4f8bff;
  --nv-neon-blue-2: #67e8f9;
  --nv-neon-pink: #ff6cab;
  --nv-accent: var(--nv-neon-purple);
  --nv-accent-2: var(--nv-neon-blue);
  --nv-gradient: linear-gradient(135deg, #8a5cff 0%, #4f8bff 100%);
  --nv-gradient-hot: linear-gradient(135deg, #b388ff 0%, #67e8f9 60%, #ff6cab 100%);
  --nv-gradient-soft: linear-gradient(160deg, rgba(138,92,255,0.18), rgba(79,139,255,0.12));

  /* radii + shadow */
  --nv-r-sm: 8px;
  --nv-r-md: 12px;
  --nv-r-lg: 18px;
  --nv-r-xl: 24px;
  --nv-shadow-1: 0 6px 24px rgba(0, 0, 0, 0.35);
  --nv-shadow-2: 0 18px 60px rgba(8, 6, 30, 0.55);
  --nv-shadow-neon: 0 0 0 1px rgba(138,92,255,0.45), 0 12px 40px rgba(138,92,255,0.25);
  --nv-glow: 0 0 30px rgba(138, 92, 255, 0.35);

  /* fonts */
  --nv-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nv-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --nv-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* layout */
  --nv-container: 1280px;
  --nv-radius-pill: 999px;
  --nv-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { padding-left: 1.2em; }
img, picture, video, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: var(--nv-neon-purple-2); text-decoration: none; transition: color var(--nv-transition); }
a:hover, a:focus-visible { color: var(--nv-neon-blue-2); text-decoration: none; }
:focus-visible { outline: 2px solid var(--nv-neon-blue-2); outline-offset: 3px; border-radius: 4px; }

/* base body */
html, body {
  background: var(--nv-bg-0);
  color: var(--nv-text);
  font-family: var(--nv-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.nv-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(138, 92, 255, 0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(79, 139, 255, 0.15), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(255, 108, 171, 0.10), transparent 65%),
    var(--nv-bg-0);
  overflow-x: hidden;
}

/* selection */
::selection { background: rgba(138, 92, 255, 0.45); color: #fff; }

/* skip link */
.nv-skip { position: absolute; left: -9999px; top: 0; }
.nv-skip:focus { left: 1rem; top: 1rem; background: var(--nv-neon-purple); color: #fff; padding: 0.5rem 1rem; border-radius: 6px; z-index: 999; }

/* container */
.nv-container, .nv-main, .nv-header-inner, .nv-footer-inner, .nv-hero-inner {
  max-width: var(--nv-container);
  margin: 0 auto;
  width: 100%;
}
.nv-main { flex: 1; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 1.5rem) 3rem; }

/* typography */
h1, h2, h3, h4, h5 { font-family: var(--nv-font-display); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; color: var(--nv-text); }
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 0.75em; }
h3 { font-size: 1.15rem; font-weight: 700; }
h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--nv-muted); font-weight: 700; }
p { margin: 0 0 1em; color: var(--nv-text-2); }
small { color: var(--nv-muted); }

.nv-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--nv-radius-pill);
  background: var(--nv-gradient-soft);
  border: 1px solid var(--nv-border-strong);
  color: var(--nv-neon-purple-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.nv-eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--nv-neon-purple);
  box-shadow: 0 0 10px var(--nv-neon-purple);
}

.nv-lede {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--nv-text-2);
  max-width: 62ch;
}

/* glass utility */
.nv-glass {
  background: var(--nv-surface);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--nv-border);
  border-radius: var(--nv-r-lg);
}

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--nv-neon-purple), var(--nv-neon-blue)); border-radius: 8px; }