/* =========================================================
   SP3 DIGITAL — RESPONSIVE
   ========================================================= */

/* -------------------- Large screens -------------------- */
@media (min-width: 1400px) {
  :root { --container: 1320px; }
}

/* -------------------- Tablet (≤1024px) -------------------- */
@media (max-width: 1024px) {
  :root { --fs-4xl: 3rem; --fs-3xl: 2.4rem; --fs-2xl: 1.9rem; --space-2xl: 4.5rem; --space-3xl: 6rem; }

  .nav-links { display: none; }
  .hamburger { display: flex; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; margin-inline: auto; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }

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

  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  .why-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* -------------------- Mobile (≤680px) -------------------- */
@media (max-width: 680px) {
  :root {
    --fs-4xl: 2.35rem;
    --fs-3xl: 1.9rem;
    --fs-2xl: 1.55rem;
    --fs-xl: 1.35rem;
    --space-2xl: 3.5rem;
    --space-3xl: 4.5rem;
    --header-h: 68px;
  }

  .container { padding-inline: var(--space-sm); }

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

  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .case-metrics { flex-wrap: wrap; gap: var(--space-md); }

  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .section { padding-block: var(--space-2xl); }

  .trust-strip { justify-content: center; text-align: center; }

  .brand-name span.tagline { display: none; }

  .nav-actions .btn-primary { display: none; }
  .brand-name { font-size: 1rem; white-space: nowrap; }
}

@media (max-width: 400px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
}