/* Homepage hero composition: grow the content together, reserve room for the scroll cue. */
.hero { position: relative; padding: 40px 32px 76px; }
.hero-inner { max-width: 1460px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); }
.hero-title { font-size: clamp(88px, 9.2vw, 136px); line-height: .9; margin-bottom: 30px; }
.hero-morph { height: 1em; margin-top: .02em; }
.hero-announcement { padding: 10px 18px; font-size: 16px; margin-bottom: 38px; }
.hero-description { font-size: 21px; max-width: 610px; line-height: 1.55; }
.hero-actions { margin-top: 38px; gap: 24px; flex-wrap: wrap; }
.hero-button { min-height: 56px; font-size: 18px; }
.hero-button-primary { padding: 17px 28px; }
.hero-button-secondary { padding: 17px 16px; }
.hero-dither {
  width: 100%; max-width: 760px; max-height: min(850px, calc(100svh - 210px));
  aspect-ratio: 4 / 5; justify-self: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.7) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.7) 78%, transparent 100%);
}
.hero-scroll {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  color: #bcbcc3; text-decoration: none;
}
.hero-scroll svg { width: 16px; height: 24px; animation: hero-scroll-pulse 3s ease-in-out infinite; }
@keyframes hero-scroll-pulse { 0%,100% { opacity: .35; transform: translateY(-2px); } 50% { opacity: .75; transform: translateY(2px); } }
@media (min-width: 721px) and (max-width: 1100px) {
  .hero { padding: 36px 24px 72px; }
  .hero-title { font-size: clamp(72px, 8.8vw, 100px); }
  .hero-inner { gap: 24px; }
  .hero-description { font-size: 20px; }
  .hero-button { font-size: 16px; }
  .hero-actions { gap: 10px; }
  .hero-button-primary { padding-inline: 22px; }
  .hero-button-secondary { padding-inline: 10px; }
}
@media (min-width: 721px) and (max-height: 800px) {
  .hero { padding-top: 24px; padding-bottom: 64px; }
  .hero-announcement { margin-bottom: 26px; }
  .hero-actions { margin-top: 26px; }
  .hero-title { margin-bottom: 24px; }
}
@media (max-width: 720px) {
  .hero { padding: 48px 24px 72px; }
  .hero-inner { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .hero-title { font-size: clamp(58px, 14vw, 92px); }
  .hero-description { font-size: 18px; }
  .hero-announcement { font-size: 14px; margin-bottom: 28px; }
  .hero-button { font-size: 16px; }
  .hero-actions { gap: 10px; margin-top: 28px; }
  .hero-button-primary { padding: 15px 22px; }
  .hero-button-secondary { padding: 15px 8px; }
  .hero-dither { max-height: none; max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) { .hero-scroll svg { animation: none; opacity: .6; } }