/* ==========================================================================
   QUICK ELITE — RESPONSIVE STYLESHEET
   Laptop (1024px) / Tablet (768px) / Mobile (480px) breakpoints.
   ========================================================================== */

/* ---------- Laptop: 1024px and below ---------- */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  section { padding: 90px 0; }

  .navbar__links { display: none; }
  .btn--nav { display: none; }

  .navbar__toggle { display: flex; }

  .hero { padding-top: 138px; padding-bottom: 76px; }
  .hero__globe { width: 480px; height: 480px; opacity: 0.6; }
  .route-marker--2 { display: none; }

  .ets-flow { flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .flow-connector { min-width: 20px; }

  .tech-grid { grid-template-columns: repeat(2, 1fr); }

  .hardware-card { grid-template-columns: 1fr; text-align: left; }
  .hardware-card__visual { order: -1; max-width: 320px; margin: 0 auto; }
  .hardware-split { grid-template-columns: repeat(3, 1fr); }

  .solutions-grid { grid-template-columns: repeat(2, 1fr); }

  .ets__grid { grid-template-columns: 1fr; gap: 40px; }
  .ets__visual { order: -1; }
  .phone-mockup { width: 200px; height: 400px; }

  .software-grid { grid-template-columns: repeat(2, 1fr); }

  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .why-grid { grid-template-columns: 1fr; }

  .quality-grid { grid-template-columns: repeat(3, 1fr); }

  .clients-grid { grid-template-columns: repeat(2, 1fr); }

  .partner__inner { grid-template-columns: 1fr; text-align: center; }
  .partner__content .section-title,
  .partner__content .section-subtitle--left { text-align: center; margin-left: auto; margin-right: auto; }
  .check-list--grid { grid-template-columns: 1fr; text-align: left; max-width: 420px; margin: 0 auto; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
}

/* ---------- Tablet: 768px and below ---------- */
@media (max-width: 768px) {
  section { padding: 70px 0; }

  .navbar__inner { height: 66px; }
  .navbar__logo { height: 32px; }

  .navbar__nav {
    position: fixed;
    top: 66px;
    left: 0;
    right: 0;
    background: rgba(7, 10, 18, 0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-color);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
  }

  .navbar__nav.is-open { max-height: 480px; }

  .navbar__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 10px 24px 24px;
  }

  .navbar__links li { width: 100%; }
  .nav-link { display: block; padding: 12px 0; width: 100%; }

  .navbar__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar__toggle.is-active span:nth-child(2) { opacity: 0; }
  .navbar__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero { padding-top: 120px; padding-bottom: 60px; }
  .hero__title { font-size: clamp(2rem, 6vw, 2.6rem); margin-bottom: 20px; }
  .hero__actions { margin-bottom: 32px; }
  .live-badge { margin-bottom: 20px; }
  .hero__globe { width: 340px; height: 340px; right: -20%; top: 2%; }
  .hero__stats { grid-template-columns: 1fr; gap: 20px; }
  .hero__actions .btn { width: 100%; }
  .hero__actions { flex-direction: column; }

  /* Trim decorative motion layers for performance on smaller devices */
  .hero__scanline { display: none; }
  .particle:nth-of-type(n+4) { display: none; }

  .ets-flow { flex-direction: column; align-items: flex-start; margin-top: 40px; }
  .flow-node { flex-direction: row; width: 100%; text-align: left; gap: 16px; }
  .flow-connector { width: 2px; height: 32px; min-width: 0; margin-left: 25px; background: linear-gradient(180deg, rgba(91,127,255,0.05), rgba(91,127,255,0.4), rgba(91,127,255,0.05)); }
  .flow-connector__pulse { top: 0; left: 50%; animation-name: flow-travel-vertical; }

  .dashboard-mock { padding: 24px 20px; }
  .dashboard-mock__body { flex-direction: column; align-items: stretch; }

  .trust-bar__inner { flex-direction: column; align-items: flex-start; gap: 16px; }

  .about__grid { text-align: left; }
  .about__intro { text-align: left; }
  .section-head { text-align: left; }
  .section-title { text-align: left; }
  .section-subtitle { text-align: left; margin: 0; }

  .tech-grid { grid-template-columns: 1fr; }

  .solutions-grid { grid-template-columns: 1fr; }

  .hardware-card { padding: 32px 24px; }
  .hardware-split { grid-template-columns: 1fr; }

  .software-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }

  .quality-grid { grid-template-columns: repeat(2, 1fr); }

  .clients-grid { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .contact-modal { padding: 32px 24px; max-width: 420px; }
  .contact-modal__title { font-size: 1.4rem; }
}

/* ---------- Mobile: 480px and below ---------- */
@media (max-width: 480px) {
  .container { padding: 0 18px; }
  section { padding: 56px 0; }

  .hero { padding-top: 100px; padding-bottom: 52px; }
  .hero__title { font-size: 2rem; margin-bottom: 18px; }
  .hero__subtitle { font-size: 0.98rem; margin-bottom: 24px; }
  .hero__globe { display: none; }

  /* Keep the hero light on very small screens: drop the route layer and
     extra particles, leave only the ambient grid + a couple of pins. */
  .route-svg { display: none; }
  .particle:nth-of-type(n+3) { display: none; }
  .hero__grid { animation: none; }

  .live-badge { font-size: 0.72rem; padding: 7px 12px; }

  .section-title { font-size: 1.55rem; }

  .tech-card, .hardware-mini, .software-card, .quality-card, .why-card, .client-chip, .service-pill {
    padding: 20px 18px;
  }

  .hardware-card { padding: 24px 18px; border-radius: var(--radius-md); }

  .quality-grid { grid-template-columns: 1fr; }

  .partner__badge { width: 160px; height: 160px; }

  .final-cta__actions { flex-direction: column; }
  .final-cta__actions .btn { width: 100%; }

  .footer__bottom { align-items: flex-start; }
  .footer__legal { flex-direction: column; gap: 8px; }

  .back-to-top { bottom: 18px; right: 18px; width: 42px; height: 42px; }

  .modal-overlay { padding: 16px; }
  .contact-modal { padding: 28px 20px; border-radius: var(--radius-md); }
  .contact-modal__head { padding-right: 20px; }
  .contact-modal__title { font-size: 1.3rem; }
}