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

/* ---------- Laptops / small desktops ---------- */
@media (max-width: 1199.98px) {
  .container-xl { padding: 0 26px; }
  .nav-menu { gap: 30px; }
  .hero-visual .frame img { height: 520px; }
  .cta-band { padding: 64px 40px; }
}

/* ---------- Tablets ---------- */
@media (max-width: 991.98px) {
  .nav-menu, .nav-cta .btn-lux { display: none; }
  .hamburger { display: block; }

  .hero { padding-top: 140px; text-align: center; }
  .hero .hero-btns { justify-content: center; }
  .hero p.lead-text { margin-left: auto; margin-right: auto; }
  .hero-visual { margin-top: 60px; }
  .hero-visual .frame img { height: 420px; }

  .split-section .row { flex-direction: column-reverse; }
  .split-section .img-col { margin-bottom: 60px; }
  .split-section .stat-chip { right: 12px; bottom: -22px; padding: 18px 22px; }

  .section-pad { padding: 90px 0; }
  .section-pad-sm { padding: 70px 0; }

  .biz-section .row { flex-direction: column; }
  .biz-section .biz-img { margin-bottom: 40px; }
  .biz-section .biz-content { text-align: center; }
  .biz-section .feature-list li { text-align: left; }

  .process-row { flex-wrap: wrap; row-gap: 40px; }
  .process-step { flex: 0 0 50%; }
  .process-step::after { display: none; }

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

  .footer-lux .row > div { margin-bottom: 40px; }
}

/* ---------- Mobile landscape / large phones ---------- */
@media (max-width: 767.98px) {
  .container-xl { padding: 0 20px; }
  .display-xl { font-size: 40px; }
  .display-lg { font-size: 30px; }

  .hero-badge { left: 50%; transform: translateX(-50%); bottom: 16px; }
  .hero-shape, .hero-particles { display: none; }

  .cta-band { padding: 50px 24px; }
  .cta-band h2 { font-size: 26px; }

  .form-lux { padding: 30px 22px; }

  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }

  .why-card { padding: 10px; }
  .timeline { padding-left: 36px; }
  .timeline-item::before { left: -36px; }
}

/* ---------- Mobile portrait ---------- */
@media (max-width: 575.98px) {
  .navbar-lux { padding: 18px 0; }
  .brand img { width: 38px; height: 38px; }
  .brand-text { font-size: 12.5px; }

  .hero { padding-top: 120px; min-height: auto; padding-bottom: 80px; }
  .hero-visual .frame img { height: 320px; }

  .page-hero { padding: 150px 0 70px; }

  .vertical-card { padding: 30px 24px; }

  .process-step { flex: 0 0 100%; }

  .split-section .stat-chip .num { font-size: 24px; }

  .counter-item .count-num { font-size: 34px; }

  .mobile-menu a { font-size: 24px; }

  .footer-lux { padding-top: 60px; }
}

/* ---------- Landscape orientation safety ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 130px 0 60px; }
  .page-hero { padding: 120px 0 60px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}