/* =================================================================
   J.M.K Groupe — Responsive rules
   Breakpoints: 1024, 768, 600, 430/375/320 (fluid)
   ================================================================= */

@media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; gap: 2.25rem; }
    .hero-card { max-width: 460px; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    /* Mobile navigation */
    .nav-desktop { display: none; }
    .nav-toggle { display: flex; }
    .nav-cta { display: none; }

    .package { grid-template-columns: 1fr; }
    .form-wrap { grid-template-columns: 1fr; gap: 2rem; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    body { font-size: 16px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .portfolio-grid { grid-template-columns: 1fr; }
    .feature-list { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .hero-cta .btn, .cta-band .btn { width: 100%; }
    .hero-badges { gap: 1rem; }
    .whatsapp-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
}

@media (max-width: 380px) {
    :root { --gutter: 16px; }
    .hero-card .price-tag, .price-card .big { font-size: 2.6rem; }
    .brand-name { display: none; }
}