* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  background: radial-gradient(1200px 700px at 70% -10%, #16255c 0%, #0a1030 45%, #05070f 100%);
  color: #dfeaff; min-height: 100vh; overflow-x: hidden;
}
#nav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 5vw; background: rgba(6, 9, 24, 0.8);  border-bottom: 1px solid rgba(53, 224, 255, 0.2);
}
.logo { font-weight: 900; letter-spacing: 4px; color: #35e0ff; text-shadow: 0 0 18px rgba(53, 224, 255, 0.5); }
.navplay { color: #ffe08a; text-decoration: none; font-weight: 700; letter-spacing: 2px; border: 1px solid rgba(255, 224, 138, 0.5); padding: 8px 18px; border-radius: 10px; }
.navplay:hover { background: rgba(255, 224, 138, 0.12); }
#hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center;
  padding: 46px 5vw 30px; max-width: 1280px; margin: 0 auto;
}
#hero h1 {
  font-size: clamp(38px, 7vw, 72px); letter-spacing: 6px; line-height: 1.05;
  background: linear-gradient(100deg, #35e0ff, #7aa8ff 55%, #ff5c7a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(53, 224, 255, 0.35));
}
.tagline { margin: 14px 0 26px; font-size: clamp(15px, 2.2vw, 20px); color: #9fb4e8; max-width: 34ch; }
#play-now {
  display: inline-block; text-decoration: none; font-weight: 900; letter-spacing: 3px; font-size: clamp(16px, 2.4vw, 22px);
  color: #06122b; background: linear-gradient(135deg, #35ffd2, #35e0ff);
  padding: 16px 42px; border-radius: 16px; box-shadow: 0 0 34px rgba(53, 255, 210, 0.45);
  transition: transform 0.15s, box-shadow 0.15s;
}
#play-now:hover { transform: scale(1.05); box-shadow: 0 0 54px rgba(53, 255, 210, 0.7); }
#hero-preview {
  width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 20px;
  border: 1px solid rgba(53, 224, 255, 0.35); box-shadow: 0 10px 50px rgba(6, 12, 40, 0.9), 0 0 40px rgba(53, 224, 255, 0.12);
  background: #05070f;
}
main { max-width: 1080px; margin: 0 auto; padding: 10px 5vw 50px; }
section { margin: 46px 0; }
h2 {
  font-size: clamp(22px, 3.6vw, 34px); letter-spacing: 3px; color: #ffe08a; margin-bottom: 22px;
  text-shadow: 0 0 16px rgba(255, 201, 74, 0.35);
}
#gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
#gallery img {
  width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(53, 224, 255, 0.25);
  background: #0a1030; box-shadow: 0 8px 24px rgba(0, 0, 20, 0.6);
}
#features { list-style: none; display: grid; gap: 12px; }
#features li {
  padding: 14px 18px; border-radius: 12px; border: 1px solid rgba(122, 168, 255, 0.22);
  background: linear-gradient(120deg, rgba(21, 34, 78, 0.7), rgba(10, 16, 40, 0.7));
  font-size: clamp(14px, 2vw, 17px);
}
#controls {
  border: 1px solid rgba(255, 224, 138, 0.3); border-radius: 16px; padding: 22px 26px;
  background: linear-gradient(120deg, rgba(40, 26, 60, 0.55), rgba(10, 16, 40, 0.7));
}
#controls p { margin-bottom: 12px; color: #ffd9a8; }
#controls ul { list-style: none; display: grid; gap: 8px; }
#controls li { color: #c6d6f5; font-size: clamp(13px, 2vw, 16px); }
#controls b { color: #35e0ff; }
footer {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
  padding: 22px 5vw; border-top: 1px solid rgba(53, 224, 255, 0.15); color: #6f83b8; font-size: 13px;
}
@media (max-width: 760px) {
  #hero { grid-template-columns: 1fr; padding-top: 26px; }
  #hero-preview { order: 2; }
  .tagline { max-width: none; }
}