/*
  Theme: Midnight
  Description: Deep navy with an indigo-to-cyan glow. Confident, technical, premium.

  To tweak: change the colours and fonts below. Every page updates.
*/
:root {
  --bg: #0a0e1f;
  --bg-alt: #0e1430;
  --surface: #121a38;
  --surface-2: #18214a;
  --text: #c9d1ec;
  --muted: #8b95b8;
  --heading: #f3f5ff;
  --accent: #818cf8;
  --accent-2: #22d3ee;
  --on-accent: #0a0e1f;
  --border: rgba(148, 163, 255, 0.14);
  --gradient: linear-gradient(115deg, #818cf8 0%, #22d3ee 100%);
  --hero-bg:
    radial-gradient(60% 70% at 85% 0%, rgba(129, 140, 248, 0.22), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(34, 211, 238, 0.12), transparent 70%),
    var(--bg);
  --header-bg: rgba(10, 14, 31, 0.72);
  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;
  --heading-weight: 600;
  --heading-tracking: -0.03em;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}

/* Finishing touches */
.card { background: linear-gradient(180deg, var(--surface) 0%, rgba(18, 26, 56, 0.6) 100%); }
.btn { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
.btn:hover { box-shadow: 0 10px 40px -8px rgba(129, 140, 248, 0.7); }
.cta { box-shadow: 0 30px 80px -30px rgba(34, 211, 238, 0.5); }