/* Keep the landscape visible and enough open sky for the compact copy on wide screens. */
.hero{min-height:max(520px,min(55.6641vw,calc(26.3672vw + 380px)));background:#0c0f21;overflow:hidden}
.hero::after{display:block;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 76%,var(--bg) 100%)}
.hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-scene .hero-art{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center bottom;z-index:auto;image-rendering:pixelated;pointer-events:none}
.hero-inner{position:relative;z-index:2;display:block;width:100%;padding:0}
.hero-content{width:clamp(310px,42vw,420px);max-width:calc(100% - 32px);margin-inline:auto;padding:clamp(28px,3.3vw,48px) 0 0;transform:translateX(4vw);text-align:center}
.hero .eyebrow{font-size:9px;line-height:1.6;letter-spacing:.1em;margin-bottom:12px}
.hero h1{font-size:clamp(30px,3.2vw,44px);line-height:1.08;margin-bottom:14px}
.hero-copy{font-size:14px;line-height:1.55;max-width:350px;margin:0 auto 18px}
.hero .buttons{justify-content:center;gap:8px;flex-wrap:wrap}
.hero .button{font-size:12px;min-height:40px;padding:9px 12px;gap:8px}
.hero .button .icon{width:14px;height:14px}
@media(max-width:760px){
  .hero-content{width:320px;transform:none;padding-top:28px}
  .hero h1{font-size:32px}
  .hero-copy{font-size:13px;max-width:290px;margin-bottom:16px}
  .hero .button{padding-inline:9px}
}
@media(max-width:360px){
  .hero .eyebrow{font-size:8px;letter-spacing:.07em}
  .hero h1{font-size:30px}
}