:root {
  --primary: #ff9f1c;
  --dark: #0f172a;
  --gray: #64748b;
  --bg: #f8fafc;
  --card: #ffffff;
  --radius: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont; background: var(--bg); color: var(--dark); line-height: 1.7; }
a { text-decoration: none; color: inherit; }

/* Hero Section */
header { height: 100vh; position: relative; background: url('../img/1024.webp') center/cover no-repeat; display: flex; align-items: center; color: #fff; }
header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(15,23,42,.9), rgba(15,23,42,.4)); }
.hero { position: relative; z-index: 1; max-width: 1200px; margin: auto; padding: 0 24px; }
.hero h1 { font-size: clamp(36px, 6vw, 64px); font-weight: 700; margin-bottom: 20px; max-width: 760px; }
.hero p { font-size: 18px; max-width: 620px; opacity: .9; margin-bottom: 32px; }
.hero a { display: inline-block; background: var(--primary); padding: 14px 30px; border-radius: 999px; font-weight: 600; color: #000; }

/* Sections */
section { max-width: 1200px; margin: auto; padding: 96px 24px; }
section h2 { font-size: 36px; margin-bottom: 18px; }
section p.lead { color: var(--gray); max-width: 720px; margin-bottom: 48px; }

/* Features */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.feature { background: var(--card); border-radius: var(--radius); padding: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.feature h3 { font-size: 20px; margin-bottom: 10px; }
.feature p { color: var(--gray); font-size: 15px; }

/* Modes */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.mode { background: linear-gradient(180deg, #ffffff, #f1f5f9); border-radius: var(--radius); padding: 32px; box-shadow: 0 12px 32px rgba(0,0,0,.05); }

/* Screenshots */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.shots img { width: 100%; border-radius: 16px; box-shadow: 0 14px 34px rgba(0,0,0,.15); }

/* Footer */
footer { background: var(--dark); color: #cbd5e1; padding: 64px 24px; }
footer .inner { max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
footer h4 { color: #fff; margin-bottom: 12px; }
footer p, footer a { font-size: 14px; color: #94a3b8; }

/* Animation */
.fade-up { opacity: 0; transform: translateY(30px); transition: all .8s ease; }
.fade-up.show { opacity: 1; transform: translateY(0); }

.other-games {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.other-games a img {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  transition: transform .3s;
}

.other-games a img:hover {
  transform: scale(1.1);
}