/* Spacious white hero using the landing page's light palette. */
.home-page .hero { position: relative; isolation: isolate; padding: 76px 0 92px; background: var(--home-bg); }
.hero-grid { display: grid; grid-template-columns: 1.03fr 1fr; align-items: center; gap: 36px; }
.hero-copy { position: relative; z-index: 1; }
.home-page .hero h1 { max-width: 660px; font-size: clamp(2.9rem, 4.9vw, 4.5rem); font-weight: 750; line-height: 1.065; letter-spacing: -.055em; text-wrap: balance; }
.hero h1 span { color: var(--home-accent-light); }
.home-page .hero-description { max-width: 44ch; margin-top: 28px; font-size: 1.0625rem; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 32px; }
.hero-actions .text-link { color: var(--color-text); }
.home-page .hero-note { margin-top: 24px; color: var(--color-muted); font-size: .75rem; }
.home-page .hero-note a { text-decoration: underline; text-decoration-color: var(--home-line); text-underline-offset: 4px; }
.home-page .hero-note a:hover { color: var(--home-accent-light); text-decoration-color: currentColor; }
.hero-showcase { position: relative; min-width: 0; margin: 0 -24px 0 0; }
.hero-showcase > img { position: relative; width: 100%; height: auto; }
.showcase-outline { position: absolute; inset: 14% 10% 11% 13%; border: 1px solid var(--home-line); border-radius: 24px; transform: rotate(9deg); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .home-page .hero-showcase > img { animation: home-device-float 7s ease-in-out infinite; animation-play-state: paused; }
  .home-page .hero.is-in-view .hero-showcase > img { animation-play-state: running; }
  @keyframes home-device-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -6px, 0); }
  }
}
@media (max-width: 1100px) {
  .home-page .hero { padding-top: 56px; }
  .hero-grid { gap: 16px; }
  .home-page .hero h1 { font-size: 3.5rem; }
  .hero-actions { gap: 12px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy { max-width: 650px; }
  .home-page .hero h1 { font-size: clamp(3.2rem, 6.5vw, 4.5rem); }
  .hero-showcase { width: min(600px, 100%); margin: 0 auto; }
  .home-page .hero { padding-bottom: 50px; }
}
@media (max-width: 760px) {
  .home-page .hero { padding: 42px 0 44px; }
  .home-page .hero h1 { font-size: clamp(2.6rem, 10.5vw, 3.6rem); line-height: 1.1; }
  .home-page .hero-description { margin-top: 22px; font-size: 1rem; line-height: 1.75; }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 24px; gap: 12px; }
  .hero-actions .btn { width: 100%; min-height: 54px; padding-inline: 20px; font-size: 1rem; }
  .hero-actions .text-link { justify-self: start; }
  .home-page .hero-note { margin-top: 18px; font-size: .6875rem; }
}