:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #081118;
  color: #e7eef0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; min-width: 320px; background: #081118; }

a { color: inherit; text-decoration: none; }

.site-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  border-bottom: 1px solid #233841;
  background: #0c181e;
}

.brand { font-weight: 800; letter-spacing: 0; font-size: 0.94rem; }
.brand span { color: #70e5bf; margin-left: 0.45rem; font-weight: 600; }
.portfolio-link { color: #b8ccd0; font-size: 0.94rem; }
.portfolio-link:hover { color: #70e5bf; }

.hero {
  min-height: min(740px, calc(100vh - 72px));
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border-bottom: 1px solid #233841;
}

.hero-copy {
  max-width: 700px;
  align-self: center;
  padding: 9vw 5vw;
  position: relative;
  z-index: 1;
}

.eyebrow, .game-label {
  color: #70e5bf;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 600px; font-size: clamp(3rem, 6vw, 6.6rem); line-height: 0.94; letter-spacing: 0; margin-bottom: 1.4rem; }
.intro { color: #b8ccd0; font-size: 1.15rem; line-height: 1.65; max-width: 490px; margin-bottom: 2rem; }

.primary-action, .play-action {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 1.15rem;
  color: #06100d;
  background: #70e5bf;
  font-weight: 800;
  border: 1px solid #70e5bf;
}

.primary-action:hover, .play-action:hover { background: #b6f6db; border-color: #b6f6db; }

.hero-art { position: relative; min-height: 460px; overflow: hidden; background: #0e2630; }
.hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.art-grid { position: absolute; inset: 0; background-image: linear-gradient(#70e5bf30 1px, transparent 1px), linear-gradient(90deg, #70e5bf30 1px, transparent 1px); background-size: 48px 48px; mix-blend-mode: screen; }

.games { max-width: 1280px; margin: 0 auto; padding: 7rem 5vw; }
.section-heading { margin-bottom: 2.3rem; }
h2 { font-size: clamp(2.3rem, 4vw, 4.4rem); letter-spacing: 0; margin-bottom: 0; }

.game-feature { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(340px, 1.12fr); border: 1px solid #2c4b53; background: #0d1b22; }
.game-feature + .game-feature { margin-top: 1rem; }
.game-copy { padding: clamp(2rem, 5vw, 5rem); }
h3 { font-size: clamp(2rem, 4vw, 4.6rem); letter-spacing: 0; margin-bottom: 1rem; }
.game-copy > p:not(.game-label), .next-game p { color: #b8ccd0; line-height: 1.65; max-width: 440px; }
.game-meta { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.8rem 0; }
.game-meta span { border: 1px solid #38555b; color: #d2e0e2; padding: 0.35rem 0.55rem; font-size: 0.8rem; }

.game-image { position: relative; min-height: 420px; display: block; overflow: hidden; background: #12303a; }
.game-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 240ms ease; }
.game-image:hover img { transform: scale(1.035); }
.game-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #071117d9, transparent 60%); }
.game-image span { position: absolute; z-index: 1; bottom: 1.8rem; left: 1.8rem; font-weight: 800; font-size: 1.15rem; }

.next-game { margin-top: 1rem; padding: 2rem; border: 1px dashed #39565d; background: #0b171d; max-width: 460px; }
.next-game h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }

footer { min-height: 82px; border-top: 1px solid #233841; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 5vw; color: #9eb4b9; font-size: 0.9rem; }
footer a:hover { color: #70e5bf; }

@media (max-width: 760px) {
  .site-header { min-height: 64px; }
  .hero { min-height: 0; grid-template-columns: 1fr; }
  .hero-copy { padding: 5rem 5vw; }
  .hero-art { min-height: 300px; }
  .games { padding: 4.5rem 5vw; }
  .game-feature { grid-template-columns: 1fr; }
  .game-image { min-height: 290px; order: -1; }
  footer { min-height: 70px; }
}