/* V2: scaled composition and a background-only fade shared by every viewport. */
:root { --scene-width: 2600px; --scene-gutter: clamp(24px, 5vw, 140px); }
.site-header { justify-content: flex-end; padding: clamp(20px, 2vw, 36px) max(var(--scene-gutter), calc((100vw - var(--scene-width)) / 2)); border-bottom: 0; }
.wordmark { font-size: clamp(13px, .8vw, 21px); letter-spacing: .5px; }
nav { gap: clamp(20px, 2vw, 44px); font-size: clamp(13px, .75vw, 19px); }
.hero { min-height: 0; background: var(--bg); }
.hero-art { z-index: -3; }
.hero-art img { object-position: center bottom; }
.hero-shade { z-index: -2; background: linear-gradient(90deg, #030817c9 0%, #03081780 32%, #03081708 68%); }
.hero-fade { position: absolute; inset: auto 0 0; height: clamp(250px, 12vw, 350px); z-index: -1; pointer-events: none; background: linear-gradient(to bottom, #060b1400 0%, #060b1426 22%, #060b1473 48%, #060b14cc 73%, #060b14f5 91%, #060b14 100%); }
.hero-content { width: min(calc(100% - 2 * var(--scene-gutter)), var(--scene-width)); margin-inline: auto; padding: clamp(110px, 5vw, 180px) 0 clamp(100px, 7vw, 170px); }
.hero-content > * { max-width: clamp(600px, 34vw, 1080px); }
.hero h1 { width: clamp(600px, 34vw, 1080px); max-width: 100%; margin: 0 0 clamp(8px, 1vw, 28px); }
.tagline { font-size: clamp(50px, 3.4vw, 112px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 clamp(20px, 1.4vw, 38px); }
.hero-description { font-size: clamp(16px, 1vw, 25px); line-height: 1.6; max-width: 42ch; margin: 0 0 clamp(22px, 1.5vw, 40px); }
.game-tags { font-size: clamp(12px, .68vw, 18px); letter-spacing: .2px; text-transform: none; margin: 0 0 clamp(22px, 1.5vw, 40px); }
.hero-actions { gap: clamp(22px, 2vw, 46px); margin-top: 0; flex-wrap: wrap; }
.button { min-height: clamp(60px, 3.4vw, 88px); padding: clamp(18px, 1.2vw, 28px) clamp(24px, 1.8vw, 48px); font-size: clamp(16px, .95vw, 25px); gap: clamp(24px, 2vw, 48px); }
.unavailable { border-color: #66efffaa; color: #e7faff; background: #102434ed; box-shadow: 0 0 24px #66efff0d; }
.text-link { font-size: clamp(14px, .8vw, 21px); }
.release-label { font-size: clamp(11px, .6vw, 16px); letter-spacing: .4px; margin-top: clamp(20px, 1.2vw, 30px); }
.hero-bottom { width: min(calc(100% - 2 * var(--scene-gutter)), var(--scene-width)); left: 0; right: 0; margin-inline: auto; bottom: 24px; font-size: clamp(11px, .6vw, 15px); letter-spacing: .2px; }
.hero-bottom .art-label { color: #a6b5c8; }
.section-wrap { width: min(calc(100% - 2 * var(--scene-gutter)), 1800px); }
.about { padding-top: clamp(24px, 2vw, 52px); padding-bottom: clamp(56px, 4vw, 100px); }
.section-heading { margin-bottom: clamp(28px, 2.5vw, 60px); }
.eyebrow { font-size: clamp(12px, .65vw, 17px); letter-spacing: .5px; }
h2 { font-size: clamp(32px, 2.3vw, 68px); letter-spacing: -.025em; }
.section-heading > p:last-child, .trailer-heading > p { font-size: clamp(16px, .9vw, 23px); }
.features { border-top-color: #66efff45; border-bottom-color: #294355; }
.features article { padding: clamp(28px, 2.3vw, 56px) clamp(24px, 2vw, 48px) clamp(28px, 2.3vw, 56px) 0; }
.features article + article { padding-left: clamp(24px, 2vw, 48px); }
.feature-number { font-size: clamp(13px, .75vw, 20px); margin-bottom: clamp(20px, 1.5vw, 38px); }
h3 { font-size: clamp(23px, 1.45vw, 38px); }
.features p { font-size: clamp(16px, .9vw, 24px); line-height: 1.65; max-width: 35ch; }
.feature-tag { font-size: clamp(11px, .6vw, 16px); letter-spacing: .3px; }
.trailer-label { font-size: clamp(18px, 1.1vw, 28px); }
.trailer-note { font-size: clamp(12px, .65vw, 17px); }
.closing p { font-size: clamp(24px, 1.4vw, 36px); }
.footer-studio { font-size: clamp(13px, .75vw, 19px); letter-spacing: .6px; }
.site-footer p { font-size: clamp(12px, .7vw, 17px); margin: 0; font-weight: 400; line-height: 1.8; }
@media (min-width: 1600px) { .hero-content { padding-bottom: clamp(130px, 7vw, 190px); } }
@media (min-width: 1200px) {
  .hero-art { display: flex; justify-content: center; }
  .hero-art img { width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: center top; mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); }
}
@media (max-width: 900px) { .hero-content > * { max-width: 580px; } .hero h1 { width: 580px; } .hero-art img { object-position: 48% bottom; } }
@media (max-width: 600px) {
  .site-header { padding: 20px 24px; }
  nav { gap: 20px; font-size: 13px; }
  .wordmark { font-size: 13px; }
  .hero-content { padding: 120px 0 105px; }
  .hero-content > * { max-width: 100%; }
  .hero h1 { width: 100%; margin-bottom: 22px; }
  .hero-art img { object-position: 57% center; }
  .hero-shade { background: linear-gradient(90deg, #030817b3, #03081755), linear-gradient(0deg, #03081788, #03081722); }
  .tagline { font-size: clamp(43px, 12vw, 60px); }
  .hero-description { font-size: 16px; }
  .game-tags { font-size: 12px; gap: 8px 0; }
  .game-tags li + li:before { padding: 0 7px; }
  .hero-actions { gap: 18px; }
  .button { font-size: 16px; min-height: 60px; padding: 18px 22px; gap: 20px; }
  .release-label { font-size: 11px; }
  .hero-bottom { justify-content: flex-end; }
  .about { padding-top: 24px; }
  .features article, .features article + article { padding: 28px 0; }
  .feature-number { margin-bottom: 18px; }
}

/* Footer copy and hierarchy follow the supplied reference. */
.site-footer { align-items: flex-start; }
.site-footer p { margin: 0 0 8px; }
.site-footer .footer-game { font-weight: 700; color: var(--text); }
.site-footer .footer-contact { color: var(--cyan); }
.site-footer .footer-right { text-align: right; }
.site-footer .footer-copyright { font-size: clamp(11px, .6vw, 15px); }
@media (max-width: 600px) { .site-footer .footer-right { text-align: left; } }