/* Mobile bugfixes — nav, hero order, about, CTA */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

@media (max-width: 768px) {
  .nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 10050 !important;
    transform: none !important;
    pointer-events: auto !important;
    background: rgba(10, 10, 12, 0.95) !important;
    backdrop-filter: blur(14px);
  }

  .nav.nav--hidden {
    transform: none !important;
  }

  .nav__toggle {
    display: inline-flex !important;
    position: relative !important;
    z-index: 10060 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    min-width: 52px !important;
    min-height: 44px !important;
    align-items: center;
    justify-content: center;
  }

  .nav__links {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    z-index: 10040 !important;
    background: #0a0a0b !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px !important;
    padding: 96px 24px 40px !important;
    margin: 0 !important;
    list-style: none !important;
    pointer-events: auto !important;
  }

  .nav__links.is-open {
    display: flex !important;
  }

  .nav__links a {
    font-size: 1.25rem !important;
    letter-spacing: 0.16em !important;
    padding: 14px 20px !important;
    color: #f0f0ea !important;
    pointer-events: auto !important;
  }

  body.nav-open {
    overflow: hidden !important;
  }

  .hero-float--web {
    display: none !important;
  }

  .about-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .about-image {
    width: 100% !important;
    max-width: 100% !important;
    height: min(52vw, 320px) !important;
    min-height: 220px !important;
  }

  .about-text {
    width: 100% !important;
  }

  .about-text p {
    font-size: 1.05rem !important;
  }

  .cta-clay {
    padding: 96px 0 !important;
  }

  .cta-clay h2,
  .cta-clay [data-home-cta-title] {
    font-size: clamp(2.4rem, 12vw, 3.6rem) !important;
    line-height: 0.95 !important;
    margin: 20px 0 36px !important;
  }

  .cta-clay .btn,
  .cta-clay [data-home-cta-button] {
    font-size: 1rem !important;
    padding: 16px 28px !important;
  }

  .cta-section {
    padding: 88px 0 !important;
  }

  .cta-content h2 {
    font-size: clamp(2.2rem, 11vw, 3.2rem) !important;
  }
}

@media (max-width: 1024px) {
  .hero.hero--stage .hero-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  .hero.hero--stage .hero-stage {
    order: 1 !important;
    width: 100% !important;
    height: min(340px, 70vw) !important;
    min-height: 260px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  .hero.hero--stage .hero-copy {
    order: 2 !important;
    width: 100% !important;
  }

  .hero-float--whatsapp {
    top: 4% !important;
    left: 2% !important;
  }

  .hero-float--ads {
    top: 4% !important;
    right: 2% !important;
  }
}

@media (max-width: 480px) {
  .about-image {
    height: 240px !important;
  }

  .cta-clay {
    padding: 72px 0 !important;
  }

  .cta-clay h2 {
    font-size: clamp(2.1rem, 11vw, 2.8rem) !important;
  }
}