/* Preserve the complete cover rather than cropping it to fill the viewport. */
.hero{min-height:760px;min-height:max(760px,100svh);padding:142px 0 88px;align-items:flex-start;background:#08131b}
.hero-backdrop{position:absolute;inset:88px 0 0;z-index:0;pointer-events:none}
.hero-backdrop img{width:100%;height:100%;object-fit:contain;object-position:center}
.hero-backdrop::after{display:none}
.hero-scenery{z-index:1;opacity:.45}
.hero>.container{position:relative;z-index:2;display:block;max-width:1440px;margin:0 auto}
.hero-content{position:relative;max-width:390px;isolation:isolate}
.hero-content::before{display:block;content:'';position:absolute;inset:-38px -64px;z-index:-1;pointer-events:none;filter:blur(18px);background:radial-gradient(ellipse at 32% 42%,#06131cf2 18%,#06131bcc 49%,#06131b00 78%)}
.hero-title{font-size:clamp(4rem,5.3vw,4.8rem);line-height:.86;text-shadow:0 2px 16px #02080d}
.hero-title .outline{color:#b4cedb}
.hero .eyebrow{color:#d0e1e9;margin-bottom:24px;text-shadow:0 1px 8px #000}
.hero-tagline{max-width:350px;color:#e5edf1;font-size:.9rem;line-height:1.8;margin-top:24px;text-shadow:0 1px 8px #000}
.hero-actions{gap:12px;margin-top:24px}
.hero-actions .btn{gap:12px;font-size:.78rem;padding:12px 15px}
.hero-actions .btn-ghost{background:#08151df2;border-color:#a4becb}
.hero-game-details{margin-top:24px;color:#d0e1e9;font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.9;text-shadow:0 1px 8px #000}
.hero-game-details span{display:block;font-size:.6rem;letter-spacing:.02em}
@media(max-width:1100px) and (min-width:861px){.hero-content{max-width:340px}.hero-title{font-size:4.2rem}.hero-actions .btn{font-size:.73rem;padding:11px 12px;gap:10px}}
@media(max-width:860px){
  .hero{min-height:0;padding:calc(72px + 56.25vw + 34px) 0 72px;align-items:flex-start}
  .hero-backdrop{inset:72px 0 auto;height:auto;aspect-ratio:16/9}
  .hero-backdrop img{object-fit:contain;object-position:center}
  .hero-content{max-width:620px}
  .hero-content::before{display:none}
  .hero-title{font-size:clamp(3.5rem,9vw,5.5rem);line-height:.9}
  .hero-title span:first-child,.hero-title span:nth-child(2){display:inline}
  .hero-title span:first-child::after{content:' '}
  .hero-tagline{max-width:480px}
}
@media(max-width:520px){
  .hero-title{font-size:clamp(3.1rem,13vw,4.6rem)}
  .hero .eyebrow{margin-bottom:20px}
  .hero-tagline{font-size:.88rem}
  .hero-actions{gap:14px}
  .hero-actions .btn{font-size:.75rem;gap:12px;padding:12px 15px}
  .hero-game-details{font-size:.62rem}
  .hero-game-details span{font-size:.58rem}
}