.home-page { background: #0c171e; color: #f7eee0; }
.home-page .site-header {
  position: sticky; top: 0; z-index: 30; min-height: 76px;
  width: 100%; max-width: none;
  padding-inline: max(40px, calc((100vw - 1320px) / 2));
  background: #0c171ef2; border-bottom: 1px solid #42545c; backdrop-filter: blur(18px);
}
.game-mark { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; font-family: var(--display); font-size: 1.04rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.game-mark img { width: 39px; height: 39px; border-radius: 9px; }
.home-page .desktop-nav a, .home-page .header-action { color: #f7eee0; }
.home-page .desktop-nav a:hover, .home-page .header-action:hover { color: #5bd6e8; }
.home-page .header-action { border-bottom-color: #f5a93d; }
.home-page .hero { padding-block: 36px 74px; }
.home-page .hero-kicker { color: #71dcea; padding-bottom: 22px; border-bottom: 1px solid #334d58; }
.home-page .hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 50px; align-items: center; padding-top: 46px; }
.home-page .hero-copy { padding: 0; }
.home-page .hero h1 { margin: 0 0 25px; font-size: clamp(2.8rem, 5vw, 5.6rem); line-height: .95; letter-spacing: -.075em; }
.home-page .hero h1 span { color: #f5a93d; }
.home-page .hero-tagline { font-size: clamp(1.1rem, 1.7vw, 1.8rem); line-height: 1.25; letter-spacing: -.025em; }
.home-page .hero-tagline span { color: #72dce8; }
.home-page .hero-description { margin-top: 22px; max-width: 49ch; color: #c0d0d0; font-size: .97rem; line-height: 1.8; }
.home-page .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 27px; }
.home-page .hero-copy .button { margin-top: 0; }
.home-page .hero-text-link { font-size: .78rem; color: #c0d0d0; }
.home-page .hero-art { margin: 0; padding: 10px; border: 1px solid #7096a1; background: #192b35; box-shadow: 10px 10px 0 #213843; }
.home-page .hero-art::after { display: none; }
.home-page .hero-art img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; filter: none; }
.home-page .hero-art figcaption { position: static; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; padding-top: 12px; color: #e6e3d9; font-size: .55rem; }
.home-page .hero-art figcaption span:last-child { color: #9cc3c8; }
.home-page .loop-strip { background: #f5a93d; color: #0c171e; }
.home-page .loop-strip > div { justify-content: center; gap: 0; }
.home-page .loop-strip span { justify-content: center; flex: 1; padding-inline: 18px; font-size: clamp(.8rem, 1.3vw, 1.2rem); text-align: center; }
.home-page .loop-strip span + span { border-left: 1px solid #754b1f; }
.home-page .section-aside { max-width: 360px; color: #c0d0d0; }
.clip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.gameplay-clip { min-width: 0; }
.gameplay-clip video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #03090e; border: 1px solid #7096a1; }
.gameplay-clip video:focus-visible { outline: 3px solid #f5a93d; outline-offset: 5px; }
.gameplay-clip figcaption { color: #f7eee0; }
.clip-description { margin-top: 12px; color: #b8cdd0; font-size: .8rem; line-height: 1.7; max-width: 65ch; }
.screenshots-section { padding-block: 76px; background: #172d38; border-block: 1px solid #42545c; }
.screenshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.screenshot-grid figure { min-width: 0; }
.screenshot-grid a { display: block; border: 1px solid #7096a1; }
.screenshot-grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.screenshot-grid figcaption { color: #c8d7d7; font-size: .6rem; }
.updates-section { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 80px; }
.updates-copy { color: #c0d0d0; max-width: 45ch; margin-block: 24px; }
.release-note { border-left: 2px solid #f5a93d; padding: 15px 0 15px 30px; }
.release-note .eyebrow { color: #72dce8; }
.release-note h3 { font-size: 1.5rem; margin-block: 14px; }
.release-note > p:not(.eyebrow) { color: #c0d0d0; font-size: .9rem; max-width: 45ch; }
.release-note .text-link { display: block; width: fit-content; margin-top: 18px; font-size: .85rem; }
.home-page .button-dark:hover { color: #0c171e; background: #72dce8; }
.home-page .skip-link { z-index: 50; }
@media (max-width: 1000px) {
  .home-page .site-header { padding-inline: 36px; }
  .home-page .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .home-page .hero h1 { font-size: clamp(3rem, 8vw, 6rem); }
  .home-page .hero-art { width: min(760px, 100%); }
  .updates-section { gap: 40px; }
}
@media (max-width: 850px) {
  .home-page .site-header { flex-wrap: wrap; padding-block: 9px 0; }
  .home-page .desktop-nav { display: flex; order: 3; justify-content: center; width: 100%; gap: 28px; border-top: 1px solid #38535d; }
  .home-page .desktop-nav a { display: inline-flex; min-height: 42px; align-items: center; }
  .clip-grid, .updates-section { grid-template-columns: 1fr; }
  .screenshot-grid { grid-template-columns: 1fr; gap: 28px; }
  .release-note { padding-left: 24px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 130px; }
  .home-page .site-header { padding-inline: 18px; gap: 0 10px; }
  .game-mark { font-size: .85rem; gap: 7px; }
  .game-mark img { width: 32px; height: 32px; }
  .home-page .header-action { font-size: .61rem; }
  .home-page .desktop-nav { justify-content: space-between; gap: 8px; }
  .home-page .desktop-nav a { font-size: .72rem; }
  .home-page .hero { padding-block: 25px 50px; }
  .home-page .hero-kicker { gap: 12px; padding-bottom: 16px; }
  .home-page .hero-kicker .eyebrow:first-child { max-width: 170px; }
  .home-page .hero-grid { padding-top: 28px; }
  .home-page .hero h1 { font-size: clamp(2.65rem, 12.8vw, 5rem); }
  .home-page .hero-tagline { font-size: 1.25rem; }
  .home-page .hero-description { font-size: .91rem; }
  .home-page .hero-art { padding: 7px; box-shadow: 5px 5px 0 #213843; }
  .home-page .hero-art figcaption { font-size: .48rem; }
  .home-page .loop-strip > div { display: grid; grid-template-columns: 1fr; gap: 0; padding-block: 0; }
  .home-page .loop-strip span { min-height: 40px; padding-block: 9px; font-size: .79rem; }
  .home-page .loop-strip span + span { border-left: 0; border-top: 1px solid #754b1f; }
  .home-page .section, .screenshots-section { padding-block: 55px; }
  .gameplay-clip figcaption { flex-wrap: wrap; }
}