/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablet (max 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-inner        { grid-template-columns: 1fr; gap: 52px; }
    .hv-side           { display: none; }
    .hv-main img       { height: 360px; }

    .svc-grid          { grid-template-columns: 1fr; }
    .steps             { grid-template-columns: repeat(2, 1fr); }
    .cases-grid        { grid-template-columns: repeat(2, 1fr); }
    .why-inner         { grid-template-columns: 1fr; gap: 48px; }
    .team-img-wrap     { max-width: 480px; }
    .testi-grid        { grid-template-columns: repeat(2, 1fr); }
    .price-grid        { grid-template-columns: 1fr; max-width: 440px; }
    .footer-top        { grid-template-columns: 1fr 1fr; gap: 32px; }
    .hero-trust        { gap: 12px; }
}

/* ── Mobiel (max 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
    section            { padding: 72px 0; }
    .nav-links         { display: none; }
    .hamburger         { display: flex; }
    .cases-grid        { grid-template-columns: 1fr; }
    .testi-grid        { grid-template-columns: 1fr; }
    .steps             { grid-template-columns: 1fr; }
    .hero              { padding: 96px 0 60px; }
    .case-row          { grid-template-columns: 1fr; }
    .team-card         { display: none; }
    .hero-trust        { flex-wrap: wrap; gap: 10px; }
    .trust-divider     { display: none; }
}

/* ── Klein mobiel (max 480px) ─────────────────────────────── */
@media (max-width: 480px) {
    .hero-btns,
    .cta-btns          { flex-direction: column; align-items: stretch; }
    .btn-primary,
    .btn-secondary     { justify-content: center; }
    .footer-top        { grid-template-columns: 1fr; }
    .footer-btm        { flex-direction: column; align-items: flex-start; }
    .proof-items .dot  { display: none; }
}

/* Contact */
@media (max-width: 1200px) {
    .contact-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
    .contact-left  { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .contact-inner { grid-template-columns: 1fr; gap: 28px; }
    .contact-left  { grid-column: auto; }
}
@media (max-width: 480px) {
    .cf-row        { grid-template-columns: 1fr; }
    .cf            { padding: 24px; }
    .cal-card      { padding: 20px; }
}