/* =====================================================
   DEMO — sección demo en vivo
   ===================================================== */
#demo{padding:110px 0}
.demoinner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.democ h2{font-size:clamp(26px,3.5vw,42px);font-weight:700;margin-bottom:16px}
.democ p{font-size:15px;color:var(--t2);line-height:1.8;margin-bottom:32px}
.btndemo{display:inline-flex;align-items:center;gap:11px;padding:17px 34px;background:linear-gradient(135deg,var(--ap),var(--as));color:#050810;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.02em;border-radius:var(--r-md);cursor:pointer;border:none;transition:all var(--ts);box-shadow:0 4px 30px rgba(0,229,160,.26)}
.btndemo:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 46px rgba(0,229,160,.36)}
.btico{width:30px;height:30px;background:rgba(0,0,0,.2);border-radius:50%;display:flex;align-items:center;justify-content:center}
.vplayer{background:var(--bgc);border:1px solid var(--b);border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.vpph{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;height:100%;background:linear-gradient(135deg,rgba(0,229,160,.04),rgba(91,110,245,.04))}
.vpbtn{width:68px;height:68px;background:var(--ap);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--ts);box-shadow:0 0 28px rgba(0,229,160,.38)}
.vpbtn:hover{transform:scale(1.1);box-shadow:0 0 48px rgba(0,229,160,.55)}
.vpbtn svg{width:26px;height:26px;fill:#050810;margin-left:3px}
.vplbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--tm);text-transform:uppercase}