/* =============================================
   RESPONSIVE — tablet (≤1024px) & mobile (≤768px)
   ============================================= */

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  :root { --container-padding: var(--space-4); }

  h1 { font-size: var(--text-4xl); }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

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

  .package-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
  /* Remove scale transform on featured card at tablet */
  .package-card.featured { transform: none; }
  .package-card.featured:hover { transform: translateY(-4px); }

  .service-block {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .service-block.reverse { direction: ltr; }

  /* Intro 2-col → 1-col on tablet */
  .intro-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Medium screens: switch to hamburger menu ---- */
@media (max-width: 960px) {
  /* Hide desktop nav, show mobile toggle */
  nav               { display: none; }
  .mobile-menu-btn  { display: flex; }
  /* Hide header toggles — they live in the mobile nav instead */
  .header-controls  { display: none; }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  /* Section spacing — keep hamburger state from 960px block */
  .section { padding: var(--space-12) 0; }

  /* Hero */
  .page-hero { padding: var(--space-12) 0; }
  .page-hero h1 { font-size: var(--text-2xl); }
  .page-hero p  { font-size: var(--text-base); }

  /* Intro grid — single column, text then visual */
  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
  }

  /* Cards */
  .cards-grid { grid-template-columns: 1fr; }

  /* Why + approach */
  .why-grid      { grid-template-columns: 1fr; }
  .approach-item { flex-direction: column; gap: var(--space-3); }
  .approach-number { font-size: var(--text-3xl); }

  /* About story grid */
  .about-story-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
  }

  /* Service blocks */
  .service-block { grid-template-columns: 1fr; gap: var(--space-6); }
  .service-block.reverse { direction: ltr; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }
  .form-row     { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .footer-bottom { text-align: center; }

  /* Trust bar */
  .trust-bar-inner { gap: var(--space-4); }
  .trust-divider   { display: none; }

  /* CTA buttons */
  .cta-buttons { flex-direction: column; align-items: center; }

  /* Pricing tabs */
  .pricing-tabs { flex-direction: column; align-items: center; }

  /* Package grid single col */
  .package-grid { grid-template-columns: 1fr; }

  /* Section header */
  .section-header p { font-size: var(--text-base); }

  /* About facts panel */
  .about-facts-panel { padding: var(--space-6); }

  /* Switch & Save banner — icon + text same row, button below */
  .switch-banner {
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-6);
  }
  /* rocket + content share the first row naturally;
     actions gets its own full-width row */
  .switch-banner-actions {
    width: 100%;
  }
  .switch-banner-actions .btn-switch {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .switch-banner-headline { font-size: var(--text-xl); }
}

/* ---- Small mobile ---- */
@media (max-width: 480px) {
  :root { --container-padding: var(--space-4); }
  h1  { font-size: var(--text-2xl); }
  .btn { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
  /* Key facts panel on small screens */
  .service-info-panel { padding: var(--space-6); }
  /* Switch banner rocket — slightly smaller on very small screens */
  .switch-banner-rocket { font-size: 2.2rem; }
  /* About facts panel — tighter on very small screens */
  .about-facts-panel { padding: var(--space-4); }
  .about-facts-list  { gap: var(--space-4); }
  .about-fact-icon   { width: 40px; height: 40px; }
}