:root{
  --bg:#15171a; --panel:#111; --text:#fff; --muted:#ddd;
  --neon:#34a1eb; --border:#2a2f36; --radius:12px; --maxw:1200px;
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--bg);color:var(--text);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}

/* NAV */
.nav{position:sticky;top:0;z-index:1000;background:rgba(17,17,17,.85);
  backdrop-filter:saturate(1.05) blur(8px);border-bottom:1px solid rgba(52,161,235,.25)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{width:28px;height:28px}
.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:.5rem .8rem;border-radius:999px;
  border:1px solid rgba(52,161,235,.35);background:rgba(52,161,235,.08);color:#e8f3ff;
  text-decoration:none;font-weight:600;font-size:.95rem;transition:all .15s ease}
.chip:hover{border-color:var(--neon);box-shadow:0 6px 24px rgba(52,161,235,.15)}
.chip img{width:16px;height:16px}
.chip.active{border-color:var(--neon);background:rgba(52,161,235,.16)}

/* HERO (Home only: video/image pinned top-left) */
#media-container{position:relative;width:100%;z-index:1;overflow:hidden}
#video{width:100%;height:clamp(420px,62vh,820px);display:block;object-fit:cover;object-position:left top;background:#000}
.background-image{display:none;position:absolute;inset:0;z-index:1;background-size:cover;background-position:left top;background-repeat:no-repeat}
#playButton{position:absolute;bottom:16px;right:16px;z-index:2;display:none;padding:.7rem 1rem;border-radius:10px;cursor:pointer;border:1px solid rgba(52,161,235,.35);color:#fff;background:rgba(21,23,26,.8)}
#playButton:hover{border-color:var(--neon)}

/* CONTENT */
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.section{width:100%;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}
.btn{background:#15171a;border:1px solid var(--border);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:border-color .15s ease,transform .15s ease}
.btn:hover{border-color:var(--neon);transform:translateY(-1px)}
.btn img{display:block;height:28px}

/* PANELS */
.panel{background-color:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin:16px 0}
.faqs{background-color:var(--panel);padding:20px;border-radius:10px;border:2px solid var(--neon);margin:20px auto;max-width:var(--maxw)}
.faqs h3{color:var(--neon);font-size:20px;margin-bottom:10px}
.faqs p,.faqs ol{color:var(--muted)} .faqs ol{padding-left:20px}

/* DEMOS modal */
.video-grid{display:flex;flex-wrap:wrap;gap:16px}
.video-item{flex:0 1 280px}
.modal{display:none;position:fixed;inset:0;z-index:1001;background:rgba(0,0,0,.55)}
.modal-content{background:#0f1216;border:1px solid var(--border);margin:7vh auto;width:min(92%,980px);border-radius:12px;overflow:hidden}
.modal-content header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.modal-content iframe{width:100%;height:56vh;border:0}
.close{color:#9fb6cc;font-size:26px;cursor:pointer}.close:hover{color:#fff}

/* UTIL */
h1{font-size:32px;margin:16px 0}
h2{font-size:24px;margin:14px 0 8px}
ul{margin:0 0 0 18px}
@media (max-width:600px){#video{height:clamp(360px,48vh,520px)}.faqs{margin:14px}}