html {
  scroll-behavior: smooth; /* Enables smooth scrolling for anchor links */
}

/* HERO: tighter spacing for small viewports (CSS-only) */
:root {
  /* adjust only if your header is NOT 56px tall */
  --header-h: 56px;
  --hero-gap: 0.5rem; /* base gap under header (kept small) */
  --hero-offset: calc(var(--header-h) + var(--hero-gap));
}

/* apply computed offset; use safe-area for iOS */
#hero {
  padding-top: calc(
    var(--hero-offset) + env(safe-area-inset-top, 0px)
  ) !important;
  padding-bottom: 2.5rem !important;
}

/* specific badge selector (tighten) */
#hero .space-y-6 > .inline-flex {
  margin-top: clamp(
    0.8rem,
    calc(0.9rem + (var(--header-h) - 48px) * 0.01),
    1.6rem
  ) !important;
  position: relative !important;
  z-index: 3 !important;
}

/* smaller mockup previews on very small screens */
#hero figure img {
  transition: height 0.18s ease !important;
  object-position: top !important;
}

/* ---------- viewport fine-tuning (smaller gaps than before) ---------- */

/* Common small phones: 360 × ~740 (Galaxy S8+, many Android small phones) */
@media (width: 360px) and (orientation: portrait) {
  :root {
    --hero-gap: 0.35rem;
  }
  #hero {
    padding-top: calc(var(--header-h) + var(--hero-gap)) !important;
  }
  #hero .space-y-6 > .inline-flex {
    margin-top: 1.1rem !important;
  }
  #hero figure img {
    height: 140px !important;
  }
}

/* iPhone SE / 375 × 667-ish */
@media (width: 375px) and (orientation: portrait) {
  :root {
    --hero-gap: 0.4rem;
  }
  #hero .space-y-6 > .inline-flex {
    margin-top: 1.15rem !important;
  }
  #hero figure img {
    height: 150px !important;
  }
}

/* iPhone 12 / 12 Pro (390 × 844) */
@media (width: 390px) and (orientation: portrait) {
  :root {
    --hero-gap: 0.5rem;
  }
  #hero .space-y-6 > .inline-flex {
    margin-top: 1.25rem !important;
  }
  #hero figure img {
    height: 155px !important;
  }
}

/* iPhone XR / 11 (414 × 896) */
@media (width: 414px) and (orientation: portrait) {
  :root {
    --hero-gap: 0.55rem;
  }
  #hero .space-y-6 > .inline-flex {
    margin-top: 1.3rem !important;
  }
  #hero figure img {
    height: 160px !important;
  }
}

/* Landscape: very short heights (phones in landscape) — keep moderate offset but smaller than before */
@media (orientation: landscape) and (max-height: 460px) {
  :root {
    --hero-gap: 1.1rem;
  }
  #hero {
    padding-top: calc(var(--header-h) + var(--hero-gap)) !important;
  }
  #hero .space-y-6 > .inline-flex {
    margin-top: 1.6rem !important;
  }
  #hero figure img {
    height: 120px !important;
  }
}

/* Landscape medium-short (foldables / small tablets) */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 900px) {
  :root {
    --hero-gap: 0.9rem;
  }
  #hero .space-y-6 > .inline-flex {
    margin-top: 1.4rem !important;
  }
  #hero figure img {
    height: 140px !important;
  }
}

/* Fallback: ensure badge never goes above header visually */
@media (min-width: 320px) {
  #hero .space-y-6 > .inline-flex {
    margin-top: max(0.8rem, 1rem) !important;
  }
}