/* Large desktop container cap */
@media (min-width: 1600px) {
  .container {
    max-width: 1500px;
  }
}

/* ---------------- Laptop / below xl ---------------- */
@media (max-width: 1199.98px) {
  :root {
    --section-py: 80px;
  }
  /* Hide the decorative illustration below xl — panels are narrower here. */
  .service-panel-art {
    display: none;
  }
  .mega-promo {
    display: none;
  }
  .mega-link {
    font-size: 0.9rem;
  }
  .mega-cat-title {
    font-size: 1rem;
  }
  .site-header .brand-logo {
    height: 30px;
  }
  .site-header .nav-link {
    font-size: 0.9rem;
  }
  .site-btn,
  .site-btn-secondary,
  .site-btn-outline {
    padding: 10px 20px;
    font-size: 1rem;
  }
  .mega-cat {
    padding: 10px 14px;
  }

  .card {
    padding: 20px;
  }

  .card h3 {
    font-size: 1rem;
  }
}

/* ---------------- Tablet (below lg) ---------------- */
@media (max-width: 991.98px) {
  :root {
    --section-py: 64px;
  }

  /* Services tabs become a horizontal swipe slider (all tabs visible).
     The vertical-carousel viewport is neutralised — no clipping, no track
     transform (cleared in JS), so the list scrolls horizontally instead.
     !important overrides the inline height/transform JS sets for desktop. */
  .service-tabnav {
    overflow: visible;
    height: auto !important;
  }
  .service-tablist {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: none !important;
    transition: none;
  }
  .service-tablist::-webkit-scrollbar {
    display: none;
  }
  .service-tab {
    flex: 0 0 auto;
    width: auto;
    padding: 12px 16px;
    gap: 12px;
    scroll-snap-align: start;
  }
  .service-tab-arrow {
    display: none;
  }
}

/* ---------------- Mobile ---------------- */
@media (max-width: 767.98px) {
  :root {
    --section-py: 52px;
  }
  .hero-inner {
    min-height: auto;
    padding-block: 60px 130px;
  }
  .hero-partners {
    bottom: 24px;
  }
  .service-panel-wrap {
    padding: 26px 22px;
  }
}

/* ---------------- Small mobile ---------------- */
@media (max-width: 575.98px) {
  .mega-grid {
    grid-template-columns: 1fr;
  }

  .site-header .brand-logo {
    height: 28px;
  }

  .card-icon {
    width: 36px;
    height: 36px;
  }

  .tech-card {
    width: 110px;
    padding: 14px 14px;
    background: #fff;
    border-radius: 20px;
  }

  .tech-tablist .nav-link {
    gap: 8px;
    padding: 10px 10px;
    font-size: 0.9rem;
  }

  .tech-card-ico {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .tech-card-name {
    font-size: 1rem;
    color: #333;
  }

  .faq-accordion .accordion-button {
    padding: 15px 22px;
    font-size: 1rem;
  }
}

@media (max-width: 479.98px) {
  .hero-actions .site-btn,
  .hero-actions .site-btn-secondary {
    flex: 1 1 auto;
    justify-content: center;
  }

  .m-nav-cta {
    height: 32px;
    padding: 0 10px;
    font-size: 0.85rem;
  }

  .m-nav-burger {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
}