:root {
  --teal: #2ee6c8; --mag: #ff4f6e; --amber: #ffc65c;
  --ink: #0b0f2a; --ink2: #11163a; --panel: #151b42; --line: #2c3a6e;
  --text: #dfe6ff; --dim: #93a0cf;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: radial-gradient(1200px 600px at 70% -10%, #1b2358 0%, var(--ink) 55%);
  color: var(--text); font-family: "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
}
#nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 5vw; position: sticky; top: 0; z-index: 10;
  background: rgba(11, 15, 42, 0.82); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.logo { font-weight: 800; letter-spacing: 3px; }
.logo span { color: var(--teal); }
.nav-play {
  color: #fff; text-decoration: none; border: 1px solid var(--teal);
  border-radius: 10px; padding: 8px 18px; background: rgba(46, 230, 200, 0.12);
}
#hero { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 48px 5vw 40px; }
#hero-text { flex: 1 1 340px; min-width: 300px; }
#hero h1 {
  font-size: clamp(40px, 7vw, 76px); letter-spacing: 4px; line-height: 1.05;
  background: linear-gradient(90deg, var(--amber), var(--teal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { color: var(--dim); font-size: clamp(15px, 2vw, 20px); margin: 14px 0 22px; }
#play-now, #play-now-2 {
  display: inline-block; text-decoration: none; color: #fff; font-size: 20px; font-weight: 700;
  padding: 15px 38px; border-radius: 14px; letter-spacing: 1px;
  background: linear-gradient(135deg, #16a37f, #0f6fb8);
  border: 1px solid var(--teal); box-shadow: 0 0 26px rgba(46, 230, 200, 0.35);
}
#play-now:hover, #play-now-2:hover { filter: brightness(1.2); transform: translateY(-2px); }
.micro { margin-top: 14px; font-size: 12px; color: var(--dim); }
#hero-preview {
  flex: 1 1 420px; min-width: 280px; width: 100%; max-width: 720px;
  height: 400px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--ink2); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
main { padding: 0 5vw; max-width: 1200px; margin: 0 auto; }
section { margin: 46px 0; }
h2 { font-size: clamp(22px, 3.4vw, 34px); margin-bottom: 18px; letter-spacing: 1px; }
h2::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 8px;
  background: linear-gradient(90deg, var(--teal), transparent); }

#gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
#gallery img {
  width: 100%; aspect-ratio: 8/5; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel);
}
#features { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; padding: 0; }
#features li {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; font-size: 14px; line-height: 1.6; color: var(--dim);
}
#features b { color: var(--teal); }
#controls {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 24px; line-height: 1.75; font-size: 15px; color: var(--dim);
}
#controls h3 { color: var(--amber); font-size: 15px; margin: 14px 0 4px; letter-spacing: 1px; }
#controls h3:first-child { margin-top: 0; }
#controls b { color: var(--text); }
#play-now-2 { margin-top: 20px; }
footer { text-align: center; padding: 30px 5vw 40px; color: var(--dim); font-size: 13px; border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  #hero { padding: 28px 5vw; }
  #hero-preview { height: 250px; }
  #play-now { font-size: 17px; padding: 13px 28px; }
  #nav { padding: 10px 5vw; }
}