/* ── Reset & Base ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  img { display: block; max-width: 100%; }
  select option { background: #fff; color: #0d1b2a; }

  /* ── Hero Gradient ── */
  .hero-gradient {
    background: 
      radial-gradient(ellipse 80% 60% at 20% 80%, rgba(27, 94, 62, 0.5) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(82, 183, 136, 0.35) 0%, transparent 55%),
      radial-gradient(ellipse 70% 70% at 50% 50%, rgba(13, 27, 42, 0.9) 0%, transparent 70%),
      linear-gradient(160deg, #040b14 0%, #0d1b2a 35%, #112240 60%, #1a365a 80%, #13442b 100%);
  }

  /* ── CTA Gradient ── */
  .cta-gradient {
    background:
      radial-gradient(ellipse 70% 50% at 30% 50%, rgba(82, 183, 136, 0.25) 0%, transparent 65%),
      radial-gradient(ellipse 60% 60% at 70% 40%, rgba(13, 27, 42, 0.6) 0%, transparent 60%),
      linear-gradient(135deg, #0a1628 0%, #112240 50%, #1b4332 100%);
  }

  /* ── Navbar States ── */
  #navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(13, 27, 42, 0.06);
  }
  #navbar.scrolled .nav-logo-color { color: #0d1b2a; }
  #navbar.scrolled .nav-link { color: #112240; }
  #navbar.scrolled .nav-btn { border-color: rgba(13, 27, 42, 0.15); }
  #navbar.scrolled .nav-btn svg { color: #0d1b2a; }

  /* ── Mobile Menu ── */
  #mobile-menu.open { opacity: 1; pointer-events: all; }

  /* ── Service Cards ── */
  .service-card {
    transition: background 0.4s ease;
  }
  .service-card:hover {
    background: #f8fffd;
  }

  /* ── FAQ ── */
  .faq-item { transition: opacity 0.3s ease; }
  .faq-answer p { animation: fadeIn 0.3s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

  /* ── Scroll Reveal ── */
  .reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(24px);
    }
    .reveal.revealed {
      opacity: 1;
      transform: none;
    }
  }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }

  /* ── Hero Animation (above fold, always visible) ── */
  @media (prefers-reduced-motion: no-preference) {
    .hero-badge { animation: heroFadeDown 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both; }
    .hero-title { animation: heroFadeUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both; }
    .hero-subtitle { animation: heroFadeUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s both; }
    .hero-cta { animation: heroFadeUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s both; }
  }
  @keyframes heroFadeDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }