/* ===== RESPONSIVE / MEDIA QUERIES =====
   Extracted from style.css so breakpoints live in one place.
   Load this AFTER style.css (and after admin.css on admin pages) so these
   overrides win the cascade, same as when they lived inline. ===== */

@media (max-width: 640px) {
  .end-cta-content h3 { font-size: 20px; }
  .end-cta-content p { font-size: 13px; margin-bottom: 16px; }
  .end-cta-icon { font-size: 42px; margin-bottom: 10px; }
  .end-cta-btns { flex-direction: column; gap: 8px; }
  .end-cta-btns .btn { width: 100%; justify-content: center; font-size: 13px; padding: 11px 16px; }
}

@media (max-width: 640px) {
  .crm-float-badge { display: none; }
}

@media (min-width: 901px) {
  .crm-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "intro visual"
      "actions visual"
      "cards cards"
      "closing closing";
    align-items: start;
    gap: 20px 60px;
  }
  .crm-features-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .crm-visual { align-items: flex-start; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .crm-features-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .faq-q { padding: 16px 18px; }
  .faq-q-text { font-size: 15px; }
  .faq-item.open .faq-a { padding: 0 18px 18px; }
  .faq-a p { font-size: 14px; }
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card-wide { grid-column: span 2; flex-direction: column; text-align: center; }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .testimonial-grid .testimonial-card:last-child { grid-column: span 2; max-width: 400px; margin: 0 auto; }
  .problem-grid { grid-template-columns: 1fr; }
  .booking-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }

  /* 4 step-cards + arrows don't fit an iPad/tablet-width row — go vertical here too */
  .steps-container { flex-direction: column; align-items: center; }
  .step-arrow { transform: rotate(90deg); }
}

@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .hero { padding: 100px 0 70px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { justify-content: center; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card-wide { grid-column: span 1; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-grid .testimonial-card:last-child { grid-column: span 1; max-width: none; }
  .strong-cta-btns { flex-direction: column; align-items: center; }
  .cta-strip-inner { flex-direction: column; text-align: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .form-card { padding: 24px 20px; }
  .sticky-whatsapp { bottom: 20px; right: 20px; width: 54px; height: 54px; }

  /* CRM CTA row: stack full-width like the other CTA sections */
  .crm-cta-btns { flex-direction: column; }
  .crm-cta-btns .btn { justify-content: center; }

  /* Badges are hidden below this width — drop their gutter so the product shot gets full room */
  .crm-stage { padding: 12px 18px; }

  /* Mobile nav — keep the consultation button visible, just compact */
  .nav-right { gap: 6px; }
  .nav-cta { padding: 7px 14px; font-size: 12.5px; }
  .lang-btn { padding: 5px 10px; font-size: 12px; }
  .logo-img { height: 30px; }
  .footer .logo-img { height: 36px; }
}

@media (max-width: 400px) {
  .container { padding: 0 14px; }

  .nav-inner { padding: 0 12px; }
  .nav-right { gap: 5px; }
  .nav-cta { padding: 6px 10px; font-size: 11.5px; }
  .lang-btn { padding: 4px 8px; font-size: 11px; }
  .logo-img { height: 26px; }

  .founder-card { gap: 12px; padding: 12px 14px; font-size: 13.5px; }
  .founder-avatar { width: 52px; height: 52px; min-width: 52px; }
}