/* Hide mobile-only elements on desktop by default */
.nav__toggle { display: none; }
.nav__drawer  { display: none; }

@media (max-width: 768px) {
  /* Force hide links and CTA immediately — no waiting for scroll */
  .navbar__links,
  .navbar__cta {
    display: none !important;
  }

  /* Force show hamburger immediately */
  .nav__toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 200;
  }

  .nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

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

  .nav__drawer {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: rgba(10,10,10,0.97);
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
  }

  .nav__drawer.is-open { display: flex; }
  .nav__drawer a { color: #fff; font-size: 1.5rem; font-weight: 600; text-decoration: none; }
  .nav__drawer .btn { margin-top: 1rem; font-size: 1rem; padding: 0.75rem 2rem; }
}

/* ── 2. HERO ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-sequence { height: 400vh; }
  .hero-panel__content { max-width: 100%; padding: 0 var(--gutter); }
  .hero-panel__content h1,
  .hero-panel__content h2 { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-panel__content p { max-width: 100%; font-size: clamp(0.95rem, 3.5vw, 1.1rem); }
}

/* ── 3. STICKY SECTIONS ─────────────────────────────────── */
@media (max-width: 768px) {
  .sticky-section__label { position: relative; padding: 2rem var(--gutter); }
  .sticky-section__heading { font-size: clamp(1.5rem, 6vw, 2rem); margin-bottom: 0.75rem; }
  .sticky-section__desc { max-width: 100% !important; font-size: 0.9rem; }
  .sticky-section__image-wrap { height: 60vh; }
  .image-overlay-tl, .image-overlay-tr, .image-overlay-br { max-width: 48%; }
}

/* ── 4. ACCORDION ───────────────────────────────────────── */
@media (max-width: 768px) {
  .process__inner { padding: 4rem var(--gutter); }
  .process__heading { font-size: clamp(1.5rem, 5vw, 2rem); }
  .accordion-card__header { padding: 1.25rem 0; gap: 1rem; }
  .accordion-card__title { font-size: 1rem; }
}

/* ── 5. STATS / SPEEDOMETER ─────────────────────────────── */
@media (max-width: 768px) {
  .stats__card { flex-direction: column; padding: 2.5rem 1.5rem; gap: 2.5rem; }
  .stats__card-right { flex: 0 0 auto; width: 100%; }
  .speedometer svg { width: 180px; height: 105px; }
  .stats__cols { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── 6. LOGOS ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .proof__inner { padding: 5rem var(--gutter); }
  .proof__logos { gap: 1.75rem; }
  .proof__logos img { height: 28px; }
}

/* ── 7. CTA ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cta__inner { padding: 8rem var(--gutter); }
  .cta__inner h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
}

/* ── 8. FOOTER ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer__inner { flex-direction: column; gap: 2rem; text-align: center; }
  .footer__links { flex-wrap: wrap; justify-content: center; gap: 1rem; }
}