* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { font-family:'Trebuchet MS','Segoe UI',Verdana,sans-serif; background:#03101a; color:#cfe7f3; overflow-x:hidden; }
h1,h2 { letter-spacing:.05em; }
.hero { position:relative; height:min(92svh,720px); min-height:480px; display:flex; align-items:center; justify-content:center; }
#hero-preview { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,16,26,.55),rgba(3,16,26,.15) 45%,rgba(3,16,26,.85)); }
.hero-text { position:relative; text-align:center; padding:0 18px; max-width:720px; }
.kicker { font-size:11px; letter-spacing:.28em; color:#5fd6c0; margin-bottom:10px; }
.hero-text h1 { font-size:clamp(38px,9vw,72px); color:#eaf7ff; text-shadow:0 0 30px rgba(31,189,216,.45); }
.hero-text h1 span { color:#47ffd2; }
.tagline { font-size:clamp(15px,3.4vw,20px); color:#a8d5e8; margin:12px auto 22px; max-width:520px; line-height:1.5; }
#play-now, #play-now-2 { display:inline-block; background:linear-gradient(90deg,#19c9a4,#2fbcd8); color:#03222e;
  text-decoration:none; font-weight:bold; font-size:19px; padding:15px 38px; border-radius:12px;
  box-shadow:0 6px 24px rgba(25,201,164,.4); letter-spacing:.04em; }
#play-now:hover, #play-now-2:hover { filter:brightness(1.15); transform:translateY(-2px); }
.hint { font-size:11px; color:#6f9ab0; margin-top:14px; letter-spacing:.12em; }
main { max-width:1060px; margin:0 auto; padding:0 20px; }
.band { padding:56px 0 30px; border-bottom:1px solid #0d2c3f; }
.band h2 { color:#7fdcff; font-size:clamp(22px,5vw,30px); margin-bottom:14px; }
.lead { font-size:15px; line-height:1.8; color:#a9cfd e0; max-width:640px; }
.lead { color:#a9cfd0; }
#features { list-style:none; margin:22px 0 6px; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px 18px; }
#features li { background:#07222f; border:1px solid #14405a; border-left:3px solid #2fbcd8; border-radius:8px; padding:12px 14px; font-size:13.5px; line-height:1.5; }
#features b { color:#47ffd2; }
#gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:8px; }
#gallery figure { background:#07222f; border:1px solid #14405a; border-radius:10px; padding:8px; }
#gallery img { width:100%; height:auto; display:block; border-radius:6px; aspect-ratio:8/5; background:#04141f; }
#gallery figcaption { font-size:12px; color:#6f9ab0; padding:7px 3px 2px; }
.tiny { font-size:11px; color:#4f7590; margin-top:10px; }
#controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px 18px; margin-top:6px; }
.ctl { background:#07222f; border:1px solid #14405a; border-radius:8px; padding:12px 14px; font-size:13px; }
.ctl b { display:block; color:#47ffd2; margin-bottom:4px; letter-spacing:.08em; }
.cta { text-align:center; padding-bottom:64px; }
.cta h2 { margin-bottom:22px; }
footer { text-align:center; font-size:12px; color:#3f6076; padding:26px 12px 34px; }
@media (max-width:640px) {
  .hero { height:auto; min-height:600px; padding:70px 0 40px; }
  .band { padding:40px 0 22px; }
  #play-now, #play-now-2 { font-size:17px; padding:14px 30px; }
}