:root {
  --ink: #0b1226; --panel: #14213f; --gold: #ffd27a; --amber: #f2a94e;
  --paper: #e8f0ff; --dim: #9fb0d0; --teal: #3fd6c0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ink); color: var(--paper);
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif; overflow-x: hidden; }
body { max-width: 100%; }
a { text-decoration: none; }
.nav { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; position: sticky; top: 0; z-index: 10;
  background: rgba(11, 18, 38, 0.88); backdrop-filter: blur(6px); }
.mark { color: var(--gold); font-weight: 800; letter-spacing: 3px; }
.navplay { color: var(--paper); border: 1px solid var(--gold); padding: 7px 16px;
  border-radius: 9px; font-weight: 700; letter-spacing: 2px; font-size: 13px; }
.navplay:hover { background: var(--gold); color: #101a30; }

.hero { display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
  padding: 44px 6vw 36px; min-height: 72vh;
  background: radial-gradient(120% 90% at 18% 10%, #1b2c55 0%, var(--ink) 55%); }
.hero-text { flex: 1 1 340px; min-width: 300px; }
.hero h1 { font-size: clamp(42px, 8vw, 76px); letter-spacing: 10px; color: var(--gold);
  text-shadow: 0 0 34px rgba(255, 200, 110, 0.45); }
.tagline { font-size: clamp(15px, 2.4vw, 20px); color: var(--dim); margin: 10px 0 22px; }
.micro { font-size: 12px; color: var(--dim); margin-top: 12px; opacity: 0.8; }
#play-now, .bigplay { display: inline-block; font-size: 19px; font-weight: 800;
  letter-spacing: 3px; color: #101a30; border-radius: 14px; padding: 15px 38px;
  background: linear-gradient(180deg, #ffe08a, var(--amber));
  box-shadow: 0 10px 30px rgba(255, 190, 90, 0.35); }
#play-now:hover, .bigplay:hover { filter: brightness(1.12); transform: translateY(-2px); }
.hero-frame { flex: 1 1 420px; min-width: 300px; border: 1px solid rgba(255, 210, 122, 0.35);
  border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
#hero-preview { display: block; width: 100%; height: 340px; }

main { max-width: 1100px; padding: 0 6vw 30px; }
.block { margin: 44px 0; }
.block h2 { color: var(--gold); font-size: clamp(20px, 3.4vw, 28px); letter-spacing: 3px;
  margin-bottom: 16px; border-bottom: 1px solid rgba(255, 210, 122, 0.25); padding-bottom: 8px; }
.lede { line-height: 1.7; color: #cdd9f2; font-size: 15px; max-width: 720px; }
.lede b { color: var(--gold); }
#gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
#gallery img { width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid rgba(160, 200, 255, 0.22); background: #0a1226; }
#features { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
#features li { background: var(--panel); border: 1px solid rgba(160, 200, 255, 0.16);
  border-left: 3px solid var(--teal); border-radius: 10px; padding: 14px 16px;
  font-size: 14px; line-height: 1.55; color: #c3d1ec; }
#features b { color: var(--paper); }
#controls { display: grid; gap: 10px; }
.ctl { display: flex; gap: 14px; align-items: baseline; background: var(--panel);
  border-radius: 10px; padding: 11px 16px; font-size: 14px; color: #c3d1ec; }
.ctl b { color: var(--gold); white-space: nowrap; min-width: 168px; font-size: 13.5px; }
.goal { margin-top: 14px; line-height: 1.7; color: #cdd9f2; font-size: 15px; }
.goal b { color: var(--teal); }
.cta { text-align: center; padding: 46px 0 30px; }
.cta h2 { color: var(--paper); font-size: clamp(20px, 3.5vw, 30px); margin-bottom: 22px; letter-spacing: 2px; }
footer { text-align: center; color: var(--dim); font-size: 12px; padding: 26px 10px 34px;
  border-top: 1px solid rgba(160, 200, 255, 0.12); }

@media (max-width: 420px) {
  .hero { padding-top: 26px; min-height: 0; gap: 18px; }
  .hero-text { min-width: 0; }
  .hero-frame { min-width: 0; width: 100%; }
  #hero-preview { height: 240px; }
  .ctl { flex-direction: column; gap: 4px; }
  .ctl b { min-width: 0; }
  #play-now, .bigplay { padding: 13px 28px; font-size: 17px; }
}