/* ============================================
       GLOBAL VARIABLES & RESET
    ============================================ */
    :root {
      --primary-dark: #0A1931;
      --primary-blue: #1A3A6C;
      --accent-cyan: #00D4FF;
      --accent-teal: #2EC4B6;
      --neutral-light: #F8F9FA;
      --neutral-gray: #6C757D;
      --white: #FFFFFF;
      --gradient-primary: linear-gradient(135deg, #0A1931 0%, #1A3A6C 100%);
      --gradient-accent: linear-gradient(135deg, #00D4FF 0%, #2EC4B6 100%);
      --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
      --shadow-medium: 0 15px 40px rgba(0, 0, 0, 0.12);
      --border-radius: 12px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 80px; /* Add this for smooth scrolling to account for header */
    }

    body {
      font-family: 'Inter', sans-serif;
      color: var(--neutral-light);
      background: var(--neutral-light);
      line-height: 1.6;
      overflow-x: hidden;
    }