:root{--bg:#0f1420;--card:#171e2e;--tx:#eef1f7;--mut:#a9b2c6;--acc:#f6be8c;--acc-tx:#34221a;--line:rgba(255,255,255,.08)}
*{box-sizing:border-box}html,body{margin:0;background-color:var(--bg);color:var(--tx);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6}
a{color:var(--acc)}img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;font-weight:700;font-size:18px}
.brand img{width:36px;height:36px;border-radius:9px}
.links{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}.links a{color:var(--mut);text-decoration:none}.links a:hover{color:var(--tx)}
.hero{position:relative;border-radius:22px;overflow:hidden;margin:8px 0 40px}
.hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero .over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,4vw,48px);background:linear-gradient(transparent 35%,rgba(8,12,22,.85))}
h1{font-size:clamp(30px,5.4vw,58px);line-height:1.08;margin:0 0 10px;letter-spacing:-.02em}
.lead{font-size:clamp(16px,2vw,20px);color:#dfe4ee;margin:0 0 18px;max-width:640px}
.pill{display:inline-block;background:var(--acc);color:var(--acc-tx);font-weight:700;font-size:13px;letter-spacing:.06em;padding:7px 14px;border-radius:999px;align-self:flex-start}
.pill.store{pointer-events:auto;text-decoration:none;font-size:15px;padding:11px 20px;box-shadow:0 6px 24px rgba(0,0,0,.35);transition:transform .15s}.pill.store:hover,.pill.store:focus-visible{transform:translateY(-2px)}
h2{font-size:28px;margin:48px 0 18px;letter-spacing:-.01em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%}.card div{padding:14px 16px}.card h3{margin:0 0 4px;font-size:18px}.card p{margin:0;color:var(--mut);font-size:15px}
ul.feat{padding-left:20px;color:#dfe4ee}ul.feat li{margin:6px 0}
.doc{max-width:760px}.doc h1{font-size:36px;margin-top:20px}.doc h2{font-size:22px;margin-top:32px}.doc p,.doc li{color:#dfe4ee}
footer{border-top:1px solid var(--line);margin-top:64px;padding:24px 0 40px;color:var(--mut);font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:600px){.links{gap:12px;font-size:14px}.hero img{aspect-ratio:4/5}}
.video{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#000}.video video{display:block;width:100%;aspect-ratio:16/9}
.hero .live{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity 1.2s}
.hero.on .live{opacity:1}
.hero .over{pointer-events:none}
.hint{display:none;font-size:14px;color:#dfe4ee;margin:0 0 12px}
.hero.on .hint{display:block}
.hero.on .over{background:linear-gradient(transparent 50%,rgba(8,12,22,.72))}

/* dusk sky behind the whole site: sunset glow at the top, lake-green shimmer below */
body{background:
  radial-gradient(1100px 620px at 12% -8%, rgba(246,170,120,.42), transparent 70%),
  radial-gradient(900px 560px at 92% 4%, rgba(236,120,170,.32), transparent 70%),
  radial-gradient(1200px 700px at 50% 108%, rgba(70,170,150,.26), transparent 70%),
  radial-gradient(700px 500px at 80% 60%, rgba(120,110,230,.22), transparent 70%),
  linear-gradient(180deg,#2a2346 0%,#1a1c3a 30%,#111833 60%,#0b1020 100%);
  background-attachment:fixed;min-height:100%}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 34% 8%,#fff6,transparent),radial-gradient(1px 1px at 58% 14%,#fff7,transparent),radial-gradient(1px 1px at 76% 6%,#fff5,transparent),radial-gradient(1px 1px at 88% 22%,#fff6,transparent),radial-gradient(1px 1px at 22% 30%,#fff4,transparent),radial-gradient(1px 1px at 66% 28%,#fff4,transparent)}
nav{position:sticky;top:0;z-index:30;background:rgba(14,19,36,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);margin:0 -20px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.card{background:rgba(26,33,58,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(255,255,255,.09);transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-3px);border-color:rgba(246,190,140,.35)}
.hero{box-shadow:0 30px 80px -30px rgba(246,150,110,.35)}
.video{box-shadow:0 30px 80px -30px rgba(120,140,255,.3)}
h2{background:linear-gradient(90deg,#fff,#f6d2b0);-webkit-background-clip:text;background-clip:text;color:transparent}
ul.feat li::marker{color:var(--acc)}
.yt{margin:-8px 0 14px;font-weight:600}.yt a{text-decoration:none}