/* ==========================================================================
   ABELIA SOLUTION — Responsive rules
   Breakpoints: >1024 desktop · 721-1024 tablet · <=720 mobile · <=420 small
   ========================================================================== */

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; aspect-ratio: 16 / 10; max-width: 640px; margin: 0 auto var(--space-8); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Nav collapse --------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile { display: block; }
}
@media (min-width: 901px) {
  .nav-mobile { display: none !important; }
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --container-padding: 20px; }

  .scroll-rail { display: none; }

  .section { padding: var(--space-16) 0; }
  .hero { padding: var(--space-16) 0 var(--space-12); }
  .section-head { margin-bottom: var(--space-10); gap: var(--space-4); }

  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
  .method { grid-template-columns: 1fr; }
  .ppt-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  .btn { width: 100%; }
  .hero-content .btn-row .btn,
  .cta-banner .btn { width: 100%; }
  .btn-row { flex-direction: column; }

  .cta-banner { flex-direction: column; align-items: flex-start; padding: var(--space-8); }
  .cta-banner .btn-row { width: 100%; }

  .navbar-inner { height: 64px; }
  .brand-text { font-size: 11px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
}