.demo{position:relative;overflow:hidden}.demo__bg{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 80%,rgba(99,102,241,.06) 0,transparent 60%);pointer-events:none}.demo__video-wrapper{max-width:900px;margin:0 auto var(--space-3xl)}.demo__video-frame{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg),0 0 80px rgba(99,102,241,.12);aspect-ratio:16/9;background:var(--bg-secondary)}.demo__video-poster{width:100%;height:100%;position:relative}.demo__video-grid,.demo__video-poster{display:flex;align-items:center;justify-content:center}.demo__video-grid{position:absolute;inset:0;padding:var(--space-xl)}.demo__video-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,11,15,.6);backdrop-filter:blur(4px);gap:var(--space-lg);z-index:2}.demo__play-btn{background:none;border:none;cursor:pointer;padding:0}.demo__play-icon{width:80px;height:80px;background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(99,102,241,.5);transition:all var(--transition-spring)}.demo__play-btn:hover .demo__play-icon{transform:scale(1.1);box-shadow:0 0 60px rgba(99,102,241,.7)}.demo__video-meta{display:flex;align-items:center;gap:var(--space-md)}.demo__video-duration{font-size:.85rem;color:var(--text-secondary)}.demo__mockup{width:100%;max-width:700px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.demo__mockup-header{display:flex;align-items:center;gap:var(--space-md);padding:10px 16px;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.demo__mockup-dots{display:flex;gap:5px}.demo__mockup-dots span{width:10px;height:10px;border-radius:50%;display:block}.demo__mockup-title{font-size:.75rem;color:var(--text-muted);font-weight:500}.demo__mockup-body{display:flex;height:200px}.demo__mockup-sidebar{width:48px;background:var(--bg-tertiary);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px}.demo__mockup-nav-item{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;transition:background var(--transition-fast)}.demo__mockup-nav-item--active{background:var(--accent-primary-muted)}.demo__mockup-content{flex:1;padding:12px;overflow:hidden}.demo__mockup-cards{display:flex;gap:8px;margin-bottom:12px}.demo__mockup-card{flex:1;padding:8px;background:var(--bg-elevated);border:1px solid;border-radius:8px;text-align:center}.demo__mockup-list{display:flex;flex-direction:column;gap:6px}.demo__mockup-list-item{display:flex;align-items:center;gap:8px;font-size:.65rem;color:var(--text-secondary);padding:4px 8px;background:var(--bg-elevated);border-radius:4px}.demo__mockup-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.demo__video-embed{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.demo__coming-soon{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.demo__coming-soon h3{font-size:1.5rem}.demo__coming-soon p{color:var(--text-secondary)}.demo__callouts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);max-width:900px;margin:0 auto}.demo__callout{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-full);text-align:center}.demo__callout-icon{font-size:1.1rem}.demo__callout-text{font-size:.82rem;color:var(--text-secondary);font-weight:500}@media (max-width:768px){.demo__callouts{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.demo__callouts{grid-template-columns:1fr}}