/* KhidaFX — responsive.css */

/* ── 1100px ─────────────────────────────────────────── */
@media(max-width:1100px) {
  :root {
    --gx: 32px
  }

  .hero-wrap {
    gap: 40px;
    padding: 110px 32px 60px
  }

  .hero-title {
    font-size: clamp(44px, 7vw, 72px)
  }

  .about-grid {
    grid-template-columns: 280px 1fr;
    gap: 48px
  }

  .results-grid {
    grid-template-columns: 1fr 1fr
  }

  .result-big {
    grid-column: span 2
  }

  .prog-grid {
    max-width: 100%
  }

  .faq-layout {
    grid-template-columns: 220px 1fr;
    gap: 48px
  }
}

/* ── 900px (tablet) ──────────────────────────────────── */
@media(max-width:900px) {
  :root {
    --gx: 24px
  }

  /* Nav */
  .nav-links,
  .nav-cta {
    display: none
  }

  .nav-burger {
    display: flex
  }

  /* Hero: stack terminal below copy */
  .hero-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 96px 24px 56px
  }

  .hero-sub {
    max-width: 100%
  }

  .hero-right {
    order: 2
  }

  .hero-left {
    order: 1
  }

  /* About */
  #about .sw {
    padding: 72px 24px
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .about-frame {
    max-width: 300px
  }

  /* HIW */
  .hiw-row {
    grid-template-columns: 1fr;
    gap: 0
  }

  .hiw-arr {
    transform: rotate(90deg);
    font-size: 22px;
    text-align: center;
    padding: 4px 0;
    display: block
  }

  /* Results */
  .results-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px
  }

  .result-big {
    grid-column: span 2
  }

  /* Proof */
  .masonry {
    columns: 2
  }

  /* Programs */
  .prog-grid {
    grid-template-columns: 1fr;
    max-width: 440px
  }

  /* FAQ */
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 32px
  }

  /* CTA */
  .cta-btns {
    flex-direction: column;
    align-items: center
  }

  .cta-btns a {
    width: 100%;
    justify-content: center;
    max-width: 380px
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start
  }

  /* scroll-top */
  .scroll-top {
    right: 80px
  }

  /* ticker */
  .ticker-bar::before,
  .ticker-bar::after {
    width: 40px
  }

  /* sw */
  .sw {
    padding: 72px 24px
  }
}

/* ── 640px (mobile) ─────────────────────────────────── */
@media(max-width:640px) {
  .hero-wrap {
    padding: 84px 20px 40px;
    gap: 32px
  }

  .hero-title {
    font-size: clamp(38px, 12vw, 56px)
  }

  .hero-sub {
    font-size: 14px
  }

  .hero-stats {
    flex-wrap: wrap
  }

  .hs {
    width: 50%;
    min-width: 0
  }

  .hs-divider:nth-child(4) {
    display: none
  }

  /* hide 3rd divider on mobile wrap */
  .hero-actions {
    flex-direction: column;
    gap: 12px
  }

  .hero-actions a {
    width: 100%;
    justify-content: center;
    text-align: center
  }

  /* About */
  .about-frame {
    max-width: 220px;
    margin: 0 auto
  }

  /* Results */
  .results-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .result-big,
  .result-quote {
    grid-column: span 1
  }

  .result-quote {
    padding: 24px 20px
  }

  /* Proof */
  .masonry {
    columns: 1
  }

  .proof-tabs {
    width: 100%
  }

  .ptab {
    flex: 1;
    padding: 9px 14px;
    font-size: 12px;
    text-align: center
  }

  /* Programs */
  .prog-card {
    padding: 28px 20px
  }

  .prog-price {
    font-size: 42px
  }

  /* Reviews */
  .rv {
    width: 270px;
    padding: 20px
  }

  /* FAQ */
  .fq {
    font-size: 13px;
    padding: 16px 0
  }

  /* CTA */
  .cta-h {
    font-size: clamp(24px, 7.5vw, 38px)
  }

  /* FAB + scroll-top */
  .fab {
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    padding: 10px 14px
  }

  .fab span {
    display: none
  }

  .scroll-top {
    bottom: 20px;
    right: 68px;
    width: 38px;
    height: 38px
  }

  /* Footer */
  .footer-inner {
    padding: 28px 20px
  }

  .footer-nav {
    gap: 12px
  }

  .footer-disc {
    padding: 16px 20px
  }

  /* sw */
  .sw {
    padding: 56px 20px
  }

  .sh {
    font-size: clamp(24px, 6.5vw, 36px)
  }
}

/* ── 420px ───────────────────────────────────────────── */
@media(max-width:420px) {
  .hero-title {
    font-size: 36px
  }

  .hero-badge {
    font-size: 9px;
    letter-spacing: 1.5px
  }

  .nav-wrap {
    padding: 0 16px
  }

  .hs-num {
    font-size: 18px
  }

  .rv {
    width: 250px
  }
}

/* ── Touch: hide cursor ──────────────────────────────── */
@media(hover:none), (pointer:coarse) {
  body {
    cursor: auto
  }

  .cur-glow,
  .cur-ring,
  .cur-dot {
    display: none !important
  }
}

/* ── Landscape mobile ────────────────────────────────── */
@media(max-width:900px) and (orientation:landscape) {
  #hero {
    min-height: auto
  }

  .hero-wrap {
    padding-top: 80px
  }
}

/* ── Large ≥1400px ───────────────────────────────────── */
@media(min-width:1400px) {
  :root {
    --max: 1320px
  }

  .hero-title {
    font-size: 96px
  }
}

/* ── Reduced motion ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce) {

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none
  }

  .marquee-track {
    animation-play-state: paused
  }

  .ticker-track {
    animation-play-state: paused
  }

  .live-pulse {
    animation: none
  }
}