.home-hero {
  --hero-overlay: linear-gradient(90deg,rgba(10,8,25,.86) 0%,rgba(10,8,25,.72) 38%,rgba(10,8,25,.22) 72%,rgba(10,8,25,.35));
  padding: 112px 0 48px;
  background:
    linear-gradient(180deg,rgba(16,13,31,.08) 50%,#100d1f 100%),
    var(--hero-overlay),
    url('games/agatio-hero-v2.webp') center / cover,
    #100d1f;
}
.home-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: center; gap: 36px; }
.home-hero h1 { font-size: clamp(2.8rem,4.5vw,4.3rem); }
.home-hero h1 span { color: var(--gold); }
.home-hero .hero-lead { font-size: 1.15rem; }
.hero-trailer { width: min(100%,260px); justify-self: center; border-color: #ffd65c55; box-shadow: 0 18px 50px #0005; }
.games { padding: 48px 0 60px; border-top: 1px solid var(--line); background: linear-gradient(180deg,#2c245050,transparent 200px),#100d1f; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-heading p { margin: 0 0 10px; color: var(--violet); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-heading .section-note { max-width: 290px; margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.game-list { display: grid; gap: 24px; }
.game-card { --accent: var(--gold); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #171226; }
.game-card.featured { border-color: #ffd65c66; }
.game-card#peasant-to-king { --accent: #8edb91; }
.game-card#kingdom-cutter { --accent: #71dbe0; }
.game-card#potion-brewer { --accent: #d7a6ff; }
.game-art { display: flex; align-items: center; background: #090713; }
.game-art img { width: 100%; height: auto; }
.game-content { position: relative; padding: 28px; }
.game-icon { position: absolute; top: 26px; right: 26px; width: 58px; height: 58px; border: 1px solid var(--line); border-radius: 14px; }
.game-content h3 { max-width: calc(100% - 60px); margin: 0; font-size: clamp(1.7rem,2.7vw,2.3rem); line-height: 1.05; letter-spacing: -.035em; }
.game-content h3 a { text-decoration: none; }
.game-content h3 a:hover { color: var(--accent); }
.tag { margin: 0 0 12px; color: var(--accent); font-size: .73rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.featured-label { display: inline-flex; margin: 0 0 12px; padding: 5px 9px; border-radius: 999px; color: #24172d; background: var(--gold); font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.game-content p:not(.tag) { margin: 16px 0 20px; color: var(--muted); line-height: 1.6; }
.store-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.store-button { font-size: .86rem; padding-inline: 14px; }
.game-content > .text-link { display: flex; width: max-content; }

@media (max-width: 760px) {
  .home-hero {
    --hero-overlay: linear-gradient(180deg,rgba(10,8,25,.82),rgba(10,8,25,.66) 48%,rgba(10,8,25,.3) 80%);
    padding: 94px 0 32px;
    background-position: center,center,62% center;
  }
  .home-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .home-hero h1 { font-size: clamp(2.65rem,10vw,3.6rem); }
  .home-hero .hero-lead { margin-top: 16px; font-size: 1.05rem; }
  .home-hero .hero-actions { margin-top: 20px; }
  .home-hero .hero-actions .button { flex-basis: 140px; padding-inline: 12px; font-size: .86rem; }
  .hero-trailer { width: min(100%,220px); }
  .games { padding: 32px 0 42px; }
  .section-heading { align-items: start; flex-direction: column; gap: 16px; }
  .game-card { grid-template-columns: 1fr; }
  .game-content { padding: 24px; }
  .store-buttons .store-button { flex: 1 1 160px; }

}
@media (max-width: 360px) {
  .home-hero .hero-actions .button { flex-basis: 100%; }
  .game-icon { width: 48px; height: 48px; right: 20px; }
}