/* =====================================================
   SEEK — RESPONSIVE (responsive.css)
   All @media queries in one place.
   Covers: tablet (≤1024px) and mobile (≤640px).
   RULE: No content, color, font, or design changes —
         layout & sizing fixes only.
===================================================== */

/* ---- Hamburger button (hidden on desktop) ---- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  z-index: 900;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ======================================================
   TABLET  ≤ 1024px
====================================================== */
@media (max-width: 1024px) {

  /* --- Navbar --- */
  #nav     { padding: 1.4rem 2.5rem; }
  #nav.s   { padding: .9rem 2.5rem; }

  /* --- Hero --- */
  .hero {
    grid-template-columns: 1fr;
    padding: 8rem 3rem 4rem;
    gap: 3rem;
  }
  .hero-right { max-width: 380px; margin: 0 auto; }

  /* --- Features --- */
  .feat-grid  { grid-template-columns: 1fr 1fr; }
  .feat-sec   { padding: 6rem 3rem; }

  /* --- How it works --- */
  .how-grid   { grid-template-columns: 1fr; }
  .how-sec    { padding: 6rem 3rem; }

  /* --- Stats --- */
  .stats-sec  { grid-template-columns: 1fr 1fr; }

  /* --- Matching / Cards --- */
  .match-sec  { grid-template-columns: 1fr; padding: 6rem 3rem; }
  .cards-stack { margin: 0 auto; }

  /* --- Early Access --- */
  .ea-sec     { grid-template-columns: 1fr; padding: 6rem 3rem; gap: 3rem; }

  /* --- Testimonials --- */
  .testi-grid { grid-template-columns: 1fr; }
  .testi-sec  { padding: 6rem 3rem; }

  /* --- App banner --- */
  .app-banner { padding: 5rem 3rem; }

  /* --- CTA / Kinetic sections --- */
  .cta-sec    { padding: 6rem 3rem; }
  .kinetic-sec { padding: 3rem 0; }
}

/* ======================================================
   MOBILE  ≤ 640px
====================================================== */
@media (max-width: 640px) {

  /* ---- Cursor: hide on touch devices ---- */
  #cur, #curR { display: none !important; }
  body { cursor: auto; }
  a, button { cursor: pointer; }

  /* ---- Eye watermark: smaller on mobile ---- */
  #eyeWatermark { width: 80px; bottom: 1rem; right: 1rem; opacity: 0.14; }

  /* ---- Navbar ---- */
  #nav         { padding: 1.2rem 1.5rem; }
  #nav.s       { padding: .85rem 1.5rem; }

  .nav-hamburger { display: flex; }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--cream);
    padding-top: 90px;
    z-index: 800;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.23,1,.32,1);
    list-style: none;
  }
  .nav-links.open { transform: translateX(0); }

  .nav-links li { width: 100%; text-align: center; }
  .nav-links a {
    display: block;
    padding: 1.1rem 2rem;
    font-size: 1.05rem;
    opacity: 1;
    border-bottom: 1px solid rgba(0,0,0,.06);
    cursor: pointer;
  }
  .nav-links a:hover { opacity: .7; }
  .nav-links a::after { display: none; }

  .nav-cta {
    margin: 1.5rem auto 0 !important;
    display: inline-flex !important;
    border-bottom: none !important;
    padding: .65rem 1.8rem !important;
    font-size: .88rem !important;
  }

  /* ---- Hero ---- */
  .hero {
    padding: 7rem 1.5rem 3.5rem;
    gap: 2.5rem;
  }
  .h-title { font-size: clamp(2.4rem, 10vw, 3.5rem); }
  .h-sub   { font-size: .95rem; }
  .h-actions { gap: .8rem; }
  .h-actions .btn-primary,
  .h-actions .btn-outline { padding: .75rem 1.5rem; font-size: .84rem; }

  .h-stats    { flex-wrap: wrap; gap: 1.5rem; }
  .h-stat-num { font-size: 1.6rem; }

  .hero-right { max-width: 320px; }
  .hero-people-wrap { max-width: 300px; }
  .hero-people-img  { max-width: 300px; }

  /* Floating tags: keep visible but scale down */
  .ftag { font-size: .68rem; padding: .55rem .9rem; border-radius: 10px; }
  .ftag-a { right: -2%; }
  .ftag-b { left: -2%; }

  /* ---- Ticker ---- */
  .ticker-item { font-size: .76rem; padding: 0 1.8rem; gap: 1rem; }

  /* ---- Features ---- */
  .feat-sec  { padding: 4.5rem 1.5rem; }
  .feat-grid { grid-template-columns: 1fr; margin-top: 3rem; }
  .feat-card { padding: 2rem 1.8rem; }

  /* ---- Stats bar ---- */
  .stats-sec { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 2rem 1.2rem; }
  .stat-num  { font-size: clamp(2.2rem, 9vw, 3.4rem); }

  /* ---- Matching / Cards ---- */
  .match-sec  { padding: 4.5rem 1.5rem; }
  .match-desc { max-width: 100%; }
  .cards-stack  { width: 280px; height: 280px; }
  .profile-card { width: 170px; padding: 1.2rem; }

  /* ---- How It Works ---- */
  .how-sec  { padding: 4.5rem 1.5rem; }
  .how-grid { margin-top: 3rem; border-radius: 16px; }
  .how-card { padding: 2.2rem 1.8rem; }
  .how-num  { font-size: 3.5rem; }

  /* ---- Kinetic ---- */
  .k-item { font-size: clamp(1.3rem, 6vw, 2rem); padding: .3rem 1.2rem; }

  /* ---- CTA ---- */
  .cta-sec   { padding: 5rem 1.5rem; }
  .cta-title { font-size: clamp(2.4rem, 10vw, 4rem); }
  .cta-sub   { font-size: .93rem; }
  .cta-actions { gap: .8rem; }
  .cta-actions .btn-gold,
  .cta-actions .btn-ghost { padding: .75rem 1.6rem; font-size: .86rem; }

  /* ---- Early Access ---- */
  .ea-sec    { padding: 4.5rem 1.5rem; gap: 2.5rem; }
  .ea-title  { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .ea-card   { padding: 1.8rem; border-radius: 18px; }
  .ea-input  { font-size: .88rem; padding: .82rem 1rem; }

  /* ---- App Banner ---- */
  .app-banner {
    padding: 4rem 1.5rem;
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  .app-eyebrow   { justify-content: center; }
  .app-title     { font-size: clamp(2rem, 9vw, 3rem); }
  .app-banner-right {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .badge-link    { width: 200px; height: 66px; flex: unset; }
  .store-badge   { width: 200px; height: 66px; }
  #btnPlay .store-badge { width: 200px; height: 66px; margin: 0; transform: scale(1.38); }
  .app-deco      { display: none; }

  /* ---- Footer ---- */
  .footer-bottom-bar {
    padding: 1rem 1.5rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
  }
  .footer-bar-legal { gap: 1.2rem; }

  /* ---- Section titles ---- */
  .section-title { font-size: clamp(1.9rem, 8vw, 2.8rem); }
}

/* ======================================================
   EXTRA SMALL  ≤ 380px  (very small phones)
====================================================== */
@media (max-width: 380px) {
  .hero           { padding: 6.5rem 1.2rem 3rem; }
  .h-title        { font-size: clamp(2rem, 11vw, 2.8rem); }
  .ea-sec, .feat-sec, .how-sec, .match-sec,
  .testi-sec, .cta-sec { padding-left: 1.2rem; padding-right: 1.2rem; }
  .stats-sec      { grid-template-columns: 1fr; }
  .stat-card      { padding: 1.8rem 1.2rem; }
  .cards-stack    { width: 240px; height: 260px; }
  .profile-card   { width: 148px; padding: 1rem; }
  .ea-card        { padding: 1.4rem; }
  .badge-link     { width: 180px; height: 60px; }
  .store-badge    { width: 180px; height: 60px; }
}

/* ---- Logo size on mobile ---- */
@media (max-width: 640px) {
  .nav-logo-img { height: 52px; }
}