:root{
  --bg:#0b0b10; --card:#12121a; --muted:#9aa0b4;
  --brand1:#8b5cf6; /* purple */
  --brand2:#10b981; /* green */
  --text:#eef1ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans',sans-serif}
a{color:#b8ffde;text-decoration:none} a:hover{text-decoration:underline}
.section{max-width:1100px;margin:0 auto;padding:60px 20px}
.site-header{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:rgba(10,10,14,.65);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid #1a1a25}
.brand img{height:36px;width:auto}
.nav{display:flex;gap:14px;align-items:center}
.nav a{padding:6px 10px;border-radius:8px}
.btn{padding:8px 12px;border-radius:10px;border:1px solid #2a2a3e;background:#0f0f18;color:#eaeaff;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#0b0b10;border:0;font-weight:700}
.btn.ghost{background:transparent;border:1px solid #2a2a3e}
.menu-toggle{display:none}
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url('assets/img/hero-bg.jpg') center/cover no-repeat;filter:blur(6px) brightness(.55);transform:scale(1.05);z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.45))}
.hero-content{max-width:1100px;margin:0 auto;padding:90px 20px}
.hero h1{font-size:42px;margin:0 0 10px}
.subhead{opacity:.95;margin:0 0 18px}
.cta-row{display:flex;gap:10px;margin-bottom:10px}
.badges{display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:12px 0;list-style:none}
.badges li{background:#12121a;border:1px solid #22233a;border-radius:999px;padding:6px 10px;color:#cfd3ff}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(4,1fr)}
.demos{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid #1d1d2a;border-radius:14px;padding:16px}
.demo{background:var(--card);border:1px solid #1d1d2a;border-radius:14px;padding:16px}
.price-card{background:var(--card);border:1px solid #1d1d2a;border-radius:14px;padding:16px}
.price{font-size:28px;font-weight:800}
.price small{font-weight:400;margin-left:6px;color:#c6c9df}
.note{opacity:.85;margin-top:10px}
.site-footer{border-top:1px solid #1a1a25;padding:30px 20px;text-align:center;color:#c6c9df}

@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .demos{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .nav{display:none}
  .menu-toggle{display:block}
}
/* Sub demos (audio) */
.sub-demos{margin-top:10px;background:#1a1a26;border:1px solid #2a2a3e;border-radius:12px;padding:8px 12px}
.sub-demos>summary{cursor:pointer;font-weight:600;list-style:none;outline:none;user-select:none}
.sub-demos[open]>summary{opacity:.95}
.sublist{margin-top:10px;display:grid;gap:10px}
.sub-item{background:#0f0f18;border:1px solid #27273a;border-radius:10px;padding:10px}
.sub-meta{font-size:14px;margin-bottom:6px;color:#cfd3ff}
.sub-item audio{width:100%;height:36px;border-radius:8px}

/* Video demos */
.video-families{display:flex;gap:10px;margin-bottom:10px}
.vfam{padding:10px 14px;border-radius:999px;border:1px solid #2f2f47;background:#1a1a26;color:#e9e9f2;cursor:pointer}
.vfam.active{background:linear-gradient(90deg,var(--brand1),var(--brand2));color:#0b0b10;border:0;font-weight:700}
.video-langs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.vlang{padding:8px 12px;border-radius:999px;border:1px solid #2a2a3e;background:#0f0f18;color:#cfd3ff;cursor:pointer}
.vlang.active{background:#2a2a3e;color:#fff}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vcard{background:#12121a;border:1px solid #1d1d2a;border-radius:14px;padding:12px}
.vtitle{font-weight:600;margin-bottom:8px}
.vcard video{width:100%;border-radius:10px}
.vempty{opacity:.8;padding:10px}
@media (max-width:980px){.video-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.video-grid{grid-template-columns:1fr}}