:root {
  font-family: ui-rounded, "Avenir Next", Avenir, system-ui, sans-serif;
  color: #203d36;
  background: #f6f3ec;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #bc642f; outline-offset: 6px; }
.page { max-width: 1120px; margin: auto; padding: 32px 48px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: 28px; font-weight: 900; letter-spacing: -2px; }
.brand span { color: #bc642f; }
nav a { display: inline-flex; gap: 16px; align-items: center; padding: 12px 0; font-size: 16px; font-weight: 650; }
nav a:hover { color: #bc642f; }
.home { padding: 100px 0 88px; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; }
h1 { margin: 24px 0; font-size: clamp(64px, 10vw, 112px); line-height: .99; letter-spacing: -.075em; font-weight: 850; }
h1 span { color: #bc642f; }
.intro { margin: 28px 0 36px; color: #58645d; font-size: 20px; line-height: 1.7; }
.button { display: inline-flex; align-items: center; gap: 28px; min-height: 52px; border-radius: 12px; padding: 16px 22px; background: #203d36; color: white; font-weight: 700; }
.button:hover { background: #31594e; }
footer { border-top: 1px solid #d9ded3; padding: 24px 0 8px; color: #657066; font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.games { padding: 72px 0; }
.games h1 { font-size: clamp(56px, 8vw, 84px); }
.game-card { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; margin-top: 40px; border: 1px solid #d9ded3; border-radius: 24px; background: #fffdf8; }
.game-image { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; background: #292442; overflow: hidden; }
.game-image img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.game-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, #1a153bb8); }
.game-image span { position: relative; z-index: 1; align-self: end; margin: 36px 24px; font-size: clamp(26px, 3.5vw, 40px); font-weight: 900; letter-spacing: -1.5px; color: #ffd982; text-shadow: 0 3px 0 #2d254f; }
.game-info { padding: 36px; }
h2 { font-size: 32px; letter-spacing: -1.3px; margin: 20px 0 12px; }
.game-info > p:not(.eyebrow) { color: #58645d; line-height: 1.7; margin: 0 0 28px; }
@media (max-width: 640px) {
  .page { padding: 24px; }
  .home { padding: 72px 0; }
  .intro { font-size: 18px; }
  .games { padding: 56px 0; }
  .game-card { grid-template-columns: 1fr; }
  .game-image { min-height: 220px; }
  .game-info { padding: 28px; }
}