/* ==========================================================================
   Responsive
   ========================================================================== */

/* Navbar collapses to the hamburger menu earlier than the general content
   breakpoint (768px) so the logo/phone pill never get flex-squeezed trying
   to share the row with 8 nav links. Kept separate from the 768px block on
   purpose — widening this number must never affect unrelated grid/typography
   rules below. */
@media (max-width: 1150px) {
  .nav-menu {
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 2px solid var(--navy);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    display: none;
    padding: 8px 0;
  }

  .nav-menu.open { display: flex; }

  .nav-menu a {
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-gray);
    width: 100%;
  }

  .nav-menu a.active { border-bottom: 1px solid var(--border-gray); }

  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    display: none;
    padding-left: 12px;
  }

  .nav-dropdown.open .nav-dropdown-menu { display: block; }

  .nav-phone {
    display: none;
  }

  .hamburger { display: flex; }
}

@media (max-width: 992px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root {
    --section-pad: var(--section-pad-mobile);
  }

  h1 { font-size: 34px; }
  h2 { font-size: 27px; }
  h3 { font-size: 19px; }

  .page-hero {
    padding: 120px 0 40px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-content h1 { font-size: 36px; }

  .hero-image { order: -1; }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }

  .stat-item:nth-child(3) { border-left: none; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }

  .feature-grid { grid-template-columns: 1fr; }

  .spotlight,
  .spotlight.reverse {
    grid-template-columns: 1fr;
  }

  .spotlight.reverse .spotlight-image { order: 0; }

  .info-box-grid { grid-template-columns: 1fr; }

  .contact-strip-grid { grid-template-columns: 1fr; gap: 24px; }

  .tech-grid { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  .about-grid { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }

  .cta-bar { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }

  .btn { width: 100%; }
  .hero-buttons, .spotlight-buttons { flex-direction: column; }
  .hero-buttons .btn, .spotlight-buttons .btn { width: 100%; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .tech-grid { grid-template-columns: 1fr; }

  .navbar-logo .logo-main { font-size: 20px; }
  .navbar-logo img { height: 42px; }
}