/* ============================================================
   RESPONSIVE — mobile-first breakpoints
   Base targets desktop; these scale it down cleanly.
   ============================================================ */

/* ===== Large tablet / small laptop (≤1100px) ===== */
@media (max-width: 1100px) {
  .problem__grid { grid-template-columns: repeat(2, 1fr); }
  .exp-grid      { grid-template-columns: repeat(4, 1fr); }
  .safety__grid  { grid-template-columns: repeat(3, 1fr); }
  .nav__menu a:not(.btn) { font-size: var(--fs-xs); }

  .match-showcase { grid-template-columns: 380px 1fr; gap: var(--s5); }
  .hero .badge-float--7,
  .hero .badge-float--8 { display: none; }
}

/* ===== Tablet (≤900px) ===== */
@media (max-width: 900px) {
  .hero { padding-top: 120px; }
  .hero .badge-float--3,
  .hero .badge-float--4 { display: none; }

  .match-showcase { grid-template-columns: 1fr; gap: var(--s5); }
  .match-card     { max-width: 460px; margin-inline: auto; }

  .steps { flex-direction: column; align-items: center; gap: var(--s3); }
  .step__connector { width: 2px; height: 48px; margin-top: 0; margin-inline: auto;
    background: repeating-linear-gradient(180deg, var(--border) 0, var(--border) 8px, transparent 8px, transparent 16px); }

  .exp-grid { grid-template-columns: repeat(3, 1fr); }

  .wingman__grid        { grid-template-columns: 1fr; gap: var(--s5); }
  .matchmaking__grid    { grid-template-columns: 1fr; gap: var(--s5); }
  .matchmaking__card    { max-width: 520px; margin-inline: auto; aspect-ratio: 16/9; }

  .founding-box { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s5); }
  .safety__grid { grid-template-columns: repeat(3, 1fr); }
  .testimonials__grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
}

/* ===== Mobile nav (≤780px) ===== */
@media (max-width: 780px) {
  /* Hide desktop menu links + cta button */
  .nav__menu { display: none; }
  .nav__cta .btn { display: none; }
  .nav__toggle { display: inline-flex; }

  /* Open state: slide-down drawer */
  .nav__menu {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(1.6) blur(20px);
    -webkit-backdrop-filter: saturate(1.6) blur(20px);
    padding: var(--s2) var(--gutter) var(--s4);
    box-shadow: 0 20px 48px rgba(14,25,41,.10);
    border-top: 1px solid var(--border);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav.open .nav__menu {
    display: flex; transform: none; opacity: 1; pointer-events: auto;
  }
  .nav__menu a:not(.btn) {
    padding: 15px 2px;
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--fs-base); color: var(--text);
  }
  .nav__menu .btn { display: inline-flex; margin-top: var(--s3); justify-content: center; }
}

/* ===== Mobile (≤640px) ===== */
@media (max-width: 640px) {
  :root { --gutter: 22px; }

  .section { padding-block: var(--s6); }

  /* Hero */
  .hero { padding-top: 100px; padding-bottom: var(--s7); }
  .hero .badge-float--1,
  .hero .badge-float--2 { display: none; }
  .hero h1 { font-size: clamp(2.25rem, 5vw + 1rem, 3rem); }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .hero__stats { flex-direction: column; gap: var(--s3); }
  .stat__divider { display: none; }

  /* Problem */
  .problem__grid { grid-template-columns: 1fr 1fr; }

  /* Experiences */
  .exp-grid { grid-template-columns: repeat(2, 1fr); }

  /* Safety */
  .safety__grid { grid-template-columns: 1fr 1fr; }

  /* Founding */
  .founding-box { padding: var(--s4); border-radius: var(--r-xl); }

  /* Testimonials */
  .tcard { padding: var(--s3); }

  /* Form */
  .form-shell { padding: var(--s4) var(--s3); border-radius: var(--r-xl); }
  .checks  { grid-template-columns: 1fr 1fr; }
  .row-2   { grid-template-columns: 1fr; }

  /* Final */
  .final__card { padding: var(--s7) var(--s3); border-radius: var(--r-xl); }
  .final__cta  { flex-direction: column; }
  .final__cta .btn { width: 100%; }

  /* Phone mockup */
  .phone-mockup { max-width: 100%; }

  /* FAQ */
  .faq__q { padding: var(--s2) var(--s3); }
  .faq__a { padding: 0 var(--s3) var(--s3); }

  /* Footer */
  .footer__inner { flex-direction: column; text-align: center; gap: var(--s2); }
  .footer nav    { flex-wrap: wrap; justify-content: center; }

  /* Stats in matchmaking */
  .matchmaking__stats { gap: var(--s3); }
}

/* ===== Small phones (≤400px) ===== */
@media (max-width: 400px) {
  :root { --gutter: 18px; }

  .problem__grid,
  .exp-grid,
  .safety__grid,
  .checks { grid-template-columns: 1fr; }

  .hero__stats { gap: var(--s2); }
}

/* ===== Form modal — mobile bottom sheet ===== */
@media (max-width: 640px) {
  .fmodal { padding: 0; align-items: flex-end; }
  .fmodal__panel {
    max-width: 100%; max-height: 94vh;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    box-shadow: 0 -8px 48px rgba(0,0,0,.14), inset 0 4px 0 var(--brand);
    animation: fmodalSlideUp .45s var(--ease-spring);
  }
  @keyframes fmodalSlideUp {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: none; }
  }
  .fmodal__body { padding: var(--s3); }
  .fmodal__body .checks  { grid-template-columns: 1fr 1fr; }
  .fmodal__body .row-2   { grid-template-columns: 1fr; }
  .fmodal__body .form-nav .btn { flex: 1; }
}

/* ===== Reduced motion — ensure all animations skip ===== */
@media (prefers-reduced-motion: reduce) {
  .badge-float,
  .founding-box::before,
  .form-shell::before {
    animation: none !important;
  }
  .bar-fill { transition: none !important; }
}