/* ==========================================================================
   RESPONSIVE.CSS — breakpoints: desktop > 1200, laptop 1024, tablet 768, mobile 480
   ========================================================================== */

/* Laptop */
@media (max-width: 1200px){
  .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .footer-grid .footer-col:nth-child(5){ grid-column: 1 / -1; max-width: 320px; }
  .hero-grid{ gap: 40px; }
}

/* Tablet / small laptop */
@media (max-width: 1024px){
  .container{ padding: 0 24px; }
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .hero{ padding: 160px 0 100px; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ height: 380px; margin-top: 40px; order: -1; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .grid-2{ grid-template-columns: 1fr; }
  .service-detail-grid, .service-detail-grid.reverse{ grid-template-columns: 1fr; direction: ltr; }
  .service-visual{ order: -1; }
  .contact-grid{ grid-template-columns: 1fr; }
  .blog-featured{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  section{ padding: 80px 0; }
}

/* Mobile */
@media (max-width: 640px){
  .container{ padding: 0 20px; }
  .hero{ padding: 140px 0 70px; }
  .hero-trust{ gap: 22px; }
  .hero-cta-row .btn{ width:100%; }
  .grid-4, .grid-3{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .cta-band{ padding: 40px 24px; }
  .footer-grid{ grid-template-columns: 1fr; gap: 30px; padding-bottom: 40px; }
  .footer-bottom{ flex-direction: column; align-items:flex-start; }
  section{ padding: 64px 0; }
  .whatsapp-float{ width:52px; height:52px; bottom:18px; right:18px; font-size:22px; }
  .back-to-top{ bottom:18px; left:18px; width:42px; height:42px; }
  .mega{ width: calc(100vw - 48px); }
}