/* --- Base resets --- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:#1e2a36;background:#fff;line-height:1.6}
a{color:#0a66c2;text-decoration:none}
a:hover{text-decoration:underline}

/* --- Header --- */
.topbar{padding:28px 20px 8px; display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto; position:relative}
.topbar .tag{font-weight:700;color:#92a0ad;font-size:26px;opacity:.12;letter-spacing:.3px;user-select:none}
@media(min-width:900px){
  .topbar .tag{font-size:32px}
}
.logo-wrap{display:flex; flex-direction:column; align-items:center; gap:12px; margin:10px auto 18px}
.logo-line{height:2px;background:#d6dde6; width:160px; opacity:.9; transition:width .9s ease}
.logo{width:72px;height:72px; border-radius:50%; display:grid; place-items:center; background:#f4f7fb; box-shadow:0 2px 10px rgba(22,36,56,.06)}
.logo svg{width:56px;height:56px; display:block}
/* subtle spin */
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.logo g[data-gear]{transform-origin:50% 50%; animation:spin 8s linear infinite}

/* grey subtitle */
.subtitle{color:#9aa8b4; text-align:center; margin:10px 0 4px}

/* nav strip */
.navstrip{background:#f7f9fb;border-top:1px solid #e6ebf1;border-bottom:1px solid #e6ebf1}
.nav{display:flex; gap:24px; justify-content:center; align-items:center; padding:16px 12px; font-weight:700}
.nav a{color:#243447}
.nav .sep{color:#91a3b3}

/* section heading */
.section{max-width:1180px; margin:40px auto; padding:0 18px}
.section h2{color:#738192; font-size:28px; margin:0 0 16px}
@media(min-width:900px){ .section h2{font-size:30px} }

/* --- Embed styles --- */
.embed-frame{position:relative;border:1px solid #e6ebf1;border-radius:14px;
  box-shadow:0 6px 28px rgba(22,36,56,.08);overflow:hidden;background:#fff}
.embed-crop{position:relative;overflow:hidden}
.embed-crop::before{content:"";display:block;padding-top:56.25%} /* 16:9 */
.embed-live{position:absolute;inset:0;width:100%;height:100%;border:0;
  transform:scale(var(--zoom,1.03));transform-origin:center}
.embed-frame::before,.embed-frame::after{
  content:"";position:absolute;left:0;right:0;height:var(--mask-size,9%);
  background:#fff;z-index:2;pointer-events:none}
.embed-frame::before{top:0}.embed-frame::after{bottom:0}

/* content area below */
.content{max-width:980px;margin:30px auto 80px;padding:0 18px;color:#364553}
.content h1{font-size:40px; line-height:1.2; margin:.4em 0 .3em}
.content p{font-size:18px; color:#435465}
ul.kb{padding-left:20px}
ul.kb li{margin:.4em 0}

/* footer */
.footer{background:#0e1720;color:#b6c2cf;margin-top:60px}
.footer .wrap{max-width:1180px;margin:0 auto;padding:26px 18px;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
.footer a{color:#cfe2ff}