body { overflow-x: hidden; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 22px;
  border-bottom:1px solid #2c3060; position:sticky; top:0; background:#0d0f22ee; backdrop-filter:blur(6px); z-index:20; }
.logo { letter-spacing:.18em; font-weight:800; color:#e8b06a; }
.play-small { padding:6px 16px; border:1px solid #35e0c2; border-radius:999px; text-decoration:none; font-size:14px; }
.hero { display:grid; grid-template-columns:minmax(300px,460px) 1fr; gap:34px; align-items:center;
  padding:52px 30px; max-width:1180px; margin:0 auto; }
.hero h1 { font-size:clamp(40px,7vw,72px); margin:0; letter-spacing:.06em; line-height:1.02;
  background:linear-gradient(92deg,#e8b06a,#f7e3b0 55%,#35e0c2);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.tagline { color:#9aa1bd; font-size:18px; margin:14px 0 26px; max-width:34em; }
.cta-row { display:flex; }
#play-now { display:inline-block; padding:15px 34px; border-radius:999px; text-decoration:none;
  background:linear-gradient(90deg,#35e0c2,#2aa8e0); color:#0d0f22; font-weight:800; font-size:17px;
  box-shadow:0 8px 30px #35e0c255; transition:transform .15s ease, box-shadow .15s ease; }
#play-now:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 12px 40px #35e0c288; }
.fineprint { color:#5f6690; font-size:12px; margin-top:12px; }
.hero-frame { position:relative; border-radius:18px; padding:10px;
  background:linear-gradient(160deg,#232848,#141733); border:1px solid #35e0c233; box-shadow:0 30px 80px #00000088; }
#hero-preview { width:100%; height:auto; aspect-ratio:16/10; display:block; border-radius:10px; }
.frame-tag { display:block; text-align:center; color:#5f6690; font-size:11px; padding:8px 4px 2px; letter-spacing:.12em; }
.band { background:linear-gradient(180deg,#12142c,#0d0f22); border-top:1px solid #2c3060; border-bottom:1px solid #2c3060; }
#features { list-style:none; margin:0 auto; padding:44px 30px; max-width:1180px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
#features li { border:1px solid #2c3060; border-radius:14px; padding:16px 18px; color:#cfd3e6; font-size:14.5px;
  background:#14173366; }
#features b { color:#35e0c2; display:block; margin-bottom:6px; letter-spacing:.04em; }
h2 { font-size:26px; letter-spacing:.1em; color:#e8b06a; margin:0 0 18px; }
.controls { max-width:1180px; margin:0 auto; padding:48px 30px; }
.ctrl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.controls div { border-left:3px solid #35e0c255; padding-left:16px; }
.controls h3 { margin:0 0 8px; color:#f2ecdf; font-size:16px; }
.controls p { margin:0; color:#9aa1bd; font-size:14.5px; }
kbd { background:#232848; border:1px solid #3a3f70; border-bottom-width:3px; border-radius:6px;
  padding:2px 7px; font-size:12px; color:#f2ecdf; margin:1px; display:inline-block; }
.teal { color:#35e0c2; }
.gallery-sec { max-width:1180px; margin:0 auto; padding:10px 30px 50px; }
#gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
#gallery figure { margin:0; border-radius:14px; overflow:hidden; border:1px solid #2c3060; background:#141733; }
#gallery img { width:100%; height:auto; display:block; }
#gallery figcaption { padding:10px 14px; color:#9aa1bd; font-size:13px; }
footer { border-top:1px solid #2c3060; padding:26px 30px 40px; text-align:center; color:#5f6690; font-size:13px; }
@media (max-width:820px) {
  .hero { grid-template-columns:1fr; padding:34px 18px; gap:22px; }
  .hero-text { order:1; } .hero-frame { order:2; }
  h2 { font-size:22px; }
}