/* ============================================
   RESPONSIVE - V6
   ============================================ */

@media (max-width: 1024px) {
  :root {
    --container-padding: 1.5rem;
    --spacing-3xl: 4rem;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 1rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 3rem;
  }

  .section-title {
    font-size: var(--font-size-3xl);
  }

  .section-subtitle {
    font-size: var(--font-size-base);
  }

  .btn {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 0.75rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
  }

  .section-title {
    font-size: var(--font-size-2xl);
  }

  .category-title {
    font-size: var(--font-size-xl);
  }
}

/* Mobile: turn horizontal AOS animations into vertical ones. Their
   sideways translate created off-screen overflow that briefly shifted
   the whole page left and flashed the dark background. */
@media (max-width: 768px) {
  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: translate3d(0, 40px, 0);
  }

  [data-aos="fade-left"].aos-animate,
  [data-aos="fade-right"].aos-animate {
    transform: translateZ(0);
  }

  /* backdrop-filter blur is a heavy repaint on mobile (notably Firefox);
     the backgrounds below are nearly opaque, so dropping it is invisible
     but much smoother. */
  .navbar.scrolled,
  .nav-menu,
  .hero-cta .btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}