/* ============================================================
   SoftPulse Digital — responsive.css
   ============================================================ */

/* ---------- Tablets & small laptops ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .service-detail { grid-template-columns: 1fr; gap: 32px; }
  .service-detail.reverse .service-visual { order: 0; }
  .pricing-card.popular { transform: scale(1); }
  .pricing-card.popular:hover { transform: translateY(-6px); }
}

/* ---------- Mobile navigation breakpoint ---------- */
@media (max-width: 900px) {
  .hamburger { display: flex; }
  .nav-links {
    position: fixed; top: 78px; left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--bg-2); padding: 24px;
    transform: translateX(100%); transition: transform .35s ease;
    overflow-y: auto; z-index: 999;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { padding: 15px 18px; font-size: 1rem; }
  .dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent; padding-left: 16px;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .has-dropdown.open .dropdown-menu { max-height: 600px; }
  .nav-cta .btn { display: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  section { padding: 68px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero { padding: 120px 0 70px; }
  .hero-trust { gap: 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .testimonial { padding: 32px 24px; }
  .cta-band { padding: 52px 24px; }
  .filter-bar { gap: 8px; }
  .filter-btn { padding: 8px 16px; font-size: .82rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .whatsapp-float { width: 52px; height: 52px; bottom: 18px; left: 18px; }
  .back-to-top { bottom: 18px; right: 18px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .card-pad { padding: 28px 22px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 380px) {
  .container { padding-inline: 16px; }
  .hero h1 { font-size: 2rem; }
  .stat .num { font-size: 1.9rem; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .whatsapp-float, .back-to-top, .cookie-banner, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}