/* === MEDIA QUERIES === */

/* Large desktop: up to 1280px */
@media (max-width: 1280px) {
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Small desktop / tablet landscape: up to 1024px */
@media (max-width: 1024px) {
  :root { --section-pad: 4rem; }

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

  .how__steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }

  .how__steps::before { display: none; }

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

  .about__inner,
  .why__inner,
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .contact__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Decor section */
  .decor-section { min-height: 600px; }

  .how .tag,
  .how .section-title,
  .how__intro {
    max-width: 100%;
    margin-left: 0;
  }

  .how {
    padding-top: 4rem;
  }

  .how__overlay {
    background: rgba(0, 0, 0, 0.75);
  }

  .about__media { order: -1; }

  .contact__right { padding-top: 0; }

  .why__img-wrap { aspect-ratio: 16 / 9; }
}

/* Tablet portrait: up to 991px */
@media (max-width: 991px) {
  :root { --section-pad: 3rem; }

  /* Mobile nav */
  .nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(22, 42, 56, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem 1.5rem 1.5rem;
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s ease, opacity 0.32s ease;
    z-index: 99;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }

  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav__list {
    flex-direction: column;
    gap: 0;
  }

  .nav__link {
    padding: 0.875rem 0.75rem;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
  }

  .burger { display: flex; }
  .header__phone { display: none; }

  .about__badge {
    left: 0;
  }

  .header__right {
    margin-left: auto;
  }

  .header .logo__name {
    font-size: 1.85rem !important;
  }

  .logo__tagline {
    font-size: 0.742rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  /* Hero */
  .hero__title { font-size: clamp(2.25rem, 8vw, 3.5rem); }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 50%; }

  .hero__tagline {
    font-size: clamp(0.65rem, 3vw, 1.15rem);
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  /* Products */
  .products__grid { grid-template-columns: 1fr; }

  .products__plans {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .products__plans-list {
    justify-content: flex-start;
  }

  .products__plans-list ul {
    flex-direction: column;
  }

  /* How */
  .how__steps { grid-template-columns: 1fr; gap: 1.25rem; }

  /* Team */
  .team__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  /* Stores */
  .stores__grid { grid-template-columns: 1fr; }

  /* CTA */
  .cta-strip__btns { flex-direction: column; align-items: center; }
  .cta-strip__btns .btn { width: 100%; max-width: 300px; }

  /* Contact form row */
  .form-row { grid-template-columns: 1fr; }

  /* Decor section */
  .decor-section { min-height: 600px; }

  /* Footer */
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .footer__nav { gap: 1rem; }

  /* Decor section */
  .decor-section { min-height: 400px; }
}

/* Mobile: up to 480px */
@media (max-width: 480px) {
  :root { --section-pad: 2.5rem; }

  .container { padding: 0 1rem; }

  .hero {
    min-height: 480px;
    background-position: center right -100px;
  }

  .logo__name {
    font-size: 1.5rem !important;
  }

  .hero__title { font-size: 2rem; }
  .hero__actions .btn { width: 100%; }

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

  .team-card__avatar { width: 80px; height: 80px; }

  .store-card { padding: 1.25rem; }

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

  /* Decor section */
  .decor-section { min-height: 300px; }
}