/* Fluid mobile hero: adapt to both viewport width and the browser's real visible height. */
.headline-line {
  display: block;
}

.headline-primary {
  color: var(--text) !important;
}

.headline-secondary {
  color: #a5a5b0 !important;
}

@media (max-width: 800px) {
  body {
    overflow-x: hidden;
  }

  .topbar {
    padding-block: clamp(9px, 1.8dvh, 14px);
    padding-inline: clamp(16px, 4.5vw, 20px);
  }

  .hero {
    padding-top: clamp(4px, .8dvh, 10px);
    padding-bottom: clamp(24px, 3.6dvh, 38px);
  }

  .hero-copy .eyebrow {
    display: none;
  }

  .hero-copy h1.hero-motion-heading {
    max-width: none;
    width: 100%;
    margin: 0;
    line-height: .98;
  }

  .hero-motion-heading .headline-line {
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    letter-spacing: -.045em;
  }

  .hero-motion-heading .headline-primary {
    font-size: clamp(31px, min(8.6vw, 4.1dvh), 37px);
    animation: headline-from-right .72s cubic-bezier(.22,.72,.24,1) both;
  }

  .hero-motion-heading .headline-secondary {
    margin-top: 2px;
    font-size: clamp(25px, min(7.1vw, 3.45dvh), 31px);
    animation: headline-from-left .78s .12s cubic-bezier(.22,.72,.24,1) both;
  }

  /* Keep the reserved card area unchanged; only lift the stack by about one text line. */
  .hero-visual {
    min-height: clamp(334px, 43dvh, 386px);
    margin-top: clamp(12px, 1.8dvh, 18px);
    margin-bottom: clamp(6px, 1dvh, 10px);
  }

  .profile-stack {
    transform: translateY(clamp(12px, 2dvh, 18px));
  }

  /* Cards scale with the smaller of viewport width and visible viewport height. */
  .phone-card {
    width: clamp(178px, min(56vw, 26dvh), 220px);
    border-radius: clamp(21px, 5.8vw, 25px);
    padding: clamp(7px, 2vw, 9px);
  }

  .profile-photo {
    height: auto;
    aspect-ratio: .845 / 1;
    border-radius: clamp(15px, 4.6vw, 19px);
  }

  .photo-badge {
    left: clamp(13px, 4vw, 17px);
    top: clamp(13px, 4vw, 17px);
    padding: 4px 7px;
    font-size: clamp(8px, min(2.4vw, 1.35dvh), 10px);
  }

  .fake-caption {
    padding: clamp(7px, 1.7dvh, 10px) 6px 5px;
  }

  .fake-caption strong {
    font-size: clamp(14px, min(4.2vw, 2.25dvh), 17px);
  }

  .fake-caption span {
    font-size: clamp(9px, min(2.9vw, 1.55dvh), 11px);
    line-height: 1.25;
  }

  .fake-actions {
    gap: clamp(9px, 3vw, 12px);
    padding: 2px 0 clamp(4px, .8dvh, 7px);
  }

  .fake-actions button {
    width: clamp(31px, min(9.5vw, 4.8dvh), 39px);
    height: clamp(31px, min(9.5vw, 4.8dvh), 39px);
    font-size: clamp(17px, 5vw, 20px);
  }

  /* Keep description + CTAs at their current position. */
  .hero-text {
    margin: clamp(52px, 6dvh, 60px) 0 clamp(12px, 1.8dvh, 16px);
    font-size: clamp(14px, min(4vw, 2.05dvh), 16px);
    line-height: 1.34;
  }

  .hero-actions {
    gap: clamp(7px, 2vw, 10px);
  }

  .hero-actions .button {
    min-height: clamp(42px, 5.8dvh, 48px);
    padding-inline: clamp(15px, 4.5vw, 20px);
  }

  .microcopy {
    margin-top: clamp(9px, 1.4dvh, 12px);
  }

  .orb-one {
    width: clamp(170px, min(50vw, 24dvh), 210px);
    height: clamp(170px, min(50vw, 24dvh), 210px);
  }

  .orb-two {
    width: clamp(110px, min(34vw, 16dvh), 135px);
    height: clamp(110px, min(34vw, 16dvh), 135px);
  }
}

@keyframes headline-from-right {
  from { opacity: 0; transform: translate3d(105vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes headline-from-left {
  from { opacity: 0; transform: translate3d(-105vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Short browser viewports: preserve the same vertical relationships. */
@media (max-width: 800px) and (max-height: 720px) {
  .hero-motion-heading .headline-primary {
    font-size: clamp(28px, 7.8vw, 33px);
  }

  .hero-motion-heading .headline-secondary {
    font-size: clamp(23px, 6.6vw, 28px);
  }

  .hero-visual {
    min-height: clamp(302px, 41dvh, 336px);
    margin-top: 10px;
  }

  .profile-stack {
    transform: translateY(12px);
  }

  .phone-card {
    width: clamp(168px, min(52vw, 25dvh), 195px);
  }

  .hero-text {
    font-size: clamp(13px, 3.7vw, 15px);
    line-height: 1.3;
    margin-top: 50px;
  }

  .hero-actions .button {
    min-height: 42px;
  }
}

/* Very narrow phones: preserve comfortable side clearance without device-specific tuning. */
@media (max-width: 360px) {
  .hero {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero-motion-heading .headline-primary {
    font-size: clamp(27px, 8vw, 31px);
  }

  .hero-motion-heading .headline-secondary {
    font-size: clamp(22px, 6.7vw, 26px);
  }

  .phone-card {
    width: min(54vw, 190px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-motion-heading .headline-line {
    animation: none !important;
  }
}