/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

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

  .nav-menu { display: none; }
  .nav-toggle { display: flex; }

  .hero-content { text-align: center; }
  .hero-stats { flex-wrap: wrap; justify-content: center; }
  .hero-cta { justify-content: center; }

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

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

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

/* ===== LARGE MOBILE ===== */
@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
    --space-section: clamp(3rem, 6vw, 5rem);
  }

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

  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }

  .hero { min-height: auto; padding-top: calc(var(--nav-height) + 3rem); }

  .section-header { margin-bottom: var(--space-2xl); }

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

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

  .footer-bottom { flex-direction: column; gap: var(--space-md); text-align: center; }

  .process-timeline::before { left: 20px; }
  .process-step { padding-left: 60px; }

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

/* ===== SMALL MOBILE ===== */
@media (max-width: 480px) {
  .container { padding-inline: var(--space-md); }

  h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 1.85rem); }

  .btn { padding: 12px 24px; font-size: var(--fs-xs); }

  .card { padding: var(--space-lg); }

  .hero-typed { font-size: clamp(1.1rem, 4vw, 1.3rem); }

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

/* ===== LANDSCAPE MOBILE ===== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding: calc(var(--nav-height) + 1rem) 0 2rem; }
  section { padding: 3rem 0; }
}

/* ===== LARGE DESKTOP ===== */
@media (min-width: 1600px) {
  .container { max-width: 1400px; }
}