:root{ --ink:#f7f0ff; --dim:#b9a8d0; --accent:#ffd166; --teal:#2f9e8f; --rose:#f0648c; }
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:"Trebuchet MS", Verdana, sans-serif; background:#1b1330; color:var(--ink); }
.hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:26px;
  align-items:center; padding:34px 5vw 26px; max-width:1250px; margin:0 auto; }
.kicker{ color:var(--teal); letter-spacing:.22em; font-size:13px; text-transform:uppercase; }
h1{ font-size:clamp(42px, 6.5vw, 76px); letter-spacing:.1em; line-height:1.05;
  background:linear-gradient(100deg,#ffd166,#f0648c 60%,#4fc1e9);
  -webkit-background-clip:text; background-clip:text; color:transparent; margin:6px 0 10px; }
.tagline{ color:var(--dim); font-size:17px; max-width:34ch; }
#play-now{ display:inline-block; margin-top:22px; padding:14px 36px; font-size:19px; font-weight:bold;
  color:#241b38; text-decoration:none; letter-spacing:.05em; border-radius:12px;
  background:linear-gradient(180deg,#ffd166,#f0a24a); box-shadow:0 8px 28px #ff884433; }
#play-now:hover{ filter:brightness(1.13); transform:translateY(-1px); }
.hero-frame{ position:relative; border-radius:18px; overflow:hidden; border:1px solid #ffffff26;
  box-shadow:0 24px 70px #00000066; background:#2a1e3f; }
#hero-preview{ display:block; width:100%; height:auto; }
main{ max-width:1150px; margin:0 auto; padding:10px 5vw 40px; }
h2{ font-size:24px; letter-spacing:.08em; color:var(--accent); margin-bottom:14px; }
#gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; }
#gallery img{ width:100%; height:auto; border-radius:12px; border:1px solid #ffffff22; display:block; }
#gallery figure figcaption{ color:var(--dim); font-size:12px; margin-top:6px; text-align:center; }
#gallery-caption, #gallery figure{ margin-bottom:0; }
#gallery-caption{ color:var(--dim); margin-bottom:14px; font-size:14px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:34px; }
#features{ list-style:none; }
#features li{ margin:10px 0; padding-left:22px; position:relative; color:#e7dcf5; line-height:1.55; }
#features li::before{ content:"◆"; color:var(--teal); position:absolute; left:0; top:2px; font-size:12px; }
#controls p{ margin:9px 0; color:#e7dcf5; line-height:1.55; }
#controls b{ color:var(--accent); }
footer{ text-align:center; padding:22px; color:#8f7fa8; font-size:13px; border-top:1px solid #ffffff14; }
footer a{ color:var(--teal); }
@media (max-width:840px){
  .hero{ grid-template-columns:1fr; padding-top:20px; }
  .two-col{ grid-template-columns:1fr; }
  .tagline{ max-width:none; }
}