/* =========================================================
   RESPONSIVE.CSS — breakpoint overrides layered on style.css
   Breakpoints checked: 1440 / 1366 / 1200 / 992 / 768 / 576 / 480 / 375
   ========================================================= */

/* ----- Large desktop refinement (>1600) ----- */
@media (min-width: 1600px) {
  :root { --container-max: 1440px; }
}

/* ----- 1200px and below: tighten nav, reduce hero scale ----- */
@media (max-width: 1200px) {
  .nav-links { gap: 26px; }
  .hero-title { font-size: clamp(2.4rem, 6.5vw, 4.6rem); }
}

/* ----- 992px: switch to mobile nav, stack columns ----- */
@media (max-width: 991.98px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-cta .btn-line span { display: none; }
  .nav-cta .btn-line i { margin: 0; }

  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .process-line { display: none; }
  .cta-actions { flex-direction: column; align-items: center; }

  .configurator .row { flex-direction: column-reverse; }
}

/* ----- 768px: tablet ----- */
@media (max-width: 767.98px) {
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 40px; }
  .hero { align-items: flex-end; }
  .hero-content { padding-bottom: 70px; }
  .hero-title { max-width: 100%; }
  .scroll-cue { display: none; }

  /* Kill the heavy 3D canvas on touch/mobile — show static image instead */
  #hero-canvas { display: none; }
  .hero-mobile-fallback { display: block; }

  .filter-bar { gap: 8px; }
  .filter-btn { padding: 8px 16px; font-size: 0.68rem; }

  .cursor-dot, .cursor-ring { display: none; }

  .whatsapp-float { width: 50px; height: 50px; font-size: 1.3rem; right: 18px; bottom: 18px; }
  .whatsapp-tooltip { display: none; }

  .page-banner { padding: 150px 0 60px; }
}

/* ----- 576px: large phones ----- */
@media (max-width: 575.98px) {
  :root { --gutter: 20px; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .stat-box { padding: 20px 16px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-actions .btn-line, .hero-actions .btn-solid { width: 100%; justify-content: center; }
  .cta-band h2 { font-size: 1.9rem; }
  .footer-bottom { flex-direction: column; text-align: center; justify-content: center; }
  .style-switch { justify-content: center; }
}

/* ----- 480px / 375px: small phones ----- */
@media (max-width: 480px) {
  .brand { font-size: 1.1rem; }
  .eyebrow { font-size: 0.65rem; letter-spacing: 0.2em; }
  .section-head h2 { font-size: 1.7rem; }
  .service-card { padding: 30px 22px; }
  .testimonial-quote { font-size: 1.15rem; }
  .configurator { padding: 20px; }
}

/* Guard against any accidental horizontal overflow */
html, body { max-width: 100%; overflow-x: hidden; }