/* =========================================================
   Responsive overrides — AmbiSecure / eSIM Initiative
   ========================================================= */

@media (max-width: 1280px) {
  .ecosystem-bar-inner { padding: 9px 40px; }
  .navbar { padding: 16px 40px; }
  .hero { padding: 60px 40px 100px; }
  section { padding: 80px 40px; }
  .footer { padding: 70px 40px 24px; }
  .trust-strip { padding: 18px 40px; }
  .page-header { padding: 70px 40px 60px; }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer-grid > :nth-child(5) { grid-column: 1 / -1; border-top: 1px solid #4a5051; padding-top: 30px; margin-top: 8px; }
}

@media (max-width: 1024px) {
  .hero-container { flex-direction: column; text-align: center; gap: 40px; }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-cta-row, .hero-creds { justify-content: center; }
  .hero-tag { justify-content: center; }
  .hero-title { font-size: 40px; }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .feature-row { grid-template-columns: 1fr; gap: 30px; }
  .feature-row.reverse > :first-child { order: 0; }

  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stat { border-left: none; border-top: 1px solid var(--line); padding-top: 20px; }
  .stat:first-child, .stat:nth-child(2) { border-top: none; padding-top: 0; }

  .callout { flex-direction: column; align-items: flex-start; padding: 40px 30px; }

  .nav-links { gap: 18px; }
  .page-header h1 { font-size: 34px; }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
  .footer-grid > :nth-child(5) { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .ecosystem-bar-inner { padding: 9px 22px; gap: 14px; }
  .ecosystem-bar .ecosystem-label { display: none; }
  .ecosystem-bar .meta { display: none; }
  .ecosystem-bar a { font-size: 12px; }

  .navbar { padding: 14px 22px; }
  .brand-tag { display: none; }
  .brand-logo { height: 30px; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 18px 22px;
    gap: 14px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.06);
  }
  .nav-links.open { display: flex; }
  .nav-actions .nav-btn { display: none; }
  .hamburger { display: flex; }

  .hero { padding: 50px 22px 70px; min-height: 60vh; }
  .hero-title { font-size: 32px; }
  .hero-desc { font-size: 16px; }

  section { padding: 60px 22px; }
  .section-title { font-size: 28px; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

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

  .footer { padding: 50px 22px 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; align-items: center; }

  .arch-node { flex: 1 1 100%; min-width: 100%; }
  .arch-arrow { transform: rotate(90deg); }

  .page-header { padding: 50px 22px 50px; }
  .page-header h1 { font-size: 28px; }

  .prose h1 { font-size: 30px; }
  .prose h2 { font-size: 22px; }
}

@media (max-width: 480px) {
  .ecosystem-bar-inner { padding: 8px 18px; gap: 10px; }
  .ecosystem-bar a { font-size: 11.5px; }
  .navbar { padding: 12px 18px; }
  .brand-logo { height: 26px; }
  .brand-line { font-size: 14px; }
  .hero-title { font-size: 28px; }
  .section-title { font-size: 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .btn { padding: 12px 20px; font-size: 13px; }
  .callout { padding: 30px 20px; }
  .callout h2 { font-size: 22px; }
}