.demo-hero-bg{background-image:linear-gradient(135deg,#002e5b 0,#0f172a 100%);position:relative;overflow:hidden}.demo-hero-bg::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml,%3Csvgwidth='60'height='60'viewBox='006060'xmlns='http://www.w3.org/2000/svg'%3E%3Cgfill='none'fill-rule='evenodd'%3E%3Cgfill='%23ffffff'fill-opacity='0.05'%3E%3Cpathd='M3634v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM634v-4H4v4H0v2h4v4h2v-4h4v-2H6zM64V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:.4}@keyframes pulse-ring{0%{transform:scale(0.8);box-shadow:0 0 0 0 rgba(225,29,72,0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(225,29,72,0)}100%{transform:scale(0.8);box-shadow:0 0 0 0 rgba(225,29,72,0)}}.play-btn-pulse{animation:pulse-ring 2s infinite}.video-card{background:white;border-radius:1.25rem;overflow:hidden;border:1px solid #f1f5f9;transition:all .3s cubic-bezier(0.4,0,0.2,1);position:relative;cursor:pointer;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}.video-card:hover{transform:translateY(-8px);box-shadow:0 25px 50px -12px rgba(0,0,0,0.15);border-color:#fda4af}.thumbnail-wrapper{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}.thumbnail-wrapper img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .6s ease,opacity .5s ease}.video-card:hover .thumbnail-wrapper img{transform:scale(1.05);opacity:.7}.overlay-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.2);transition:background .3s ease}.video-card:hover .overlay-play{background:rgba(0,0,0,0.4)}.play-icon-lg{width:64px;height:64px;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#e11d48;transform:scale(0.9);transition:transform .3s cubic-bezier(0.34,1.56,0.64,1),background .3s;box-shadow:0 10px 25px rgba(0,0,0,0.3)}.video-card:hover .play-icon-lg{transform:scale(1.1);background:#e11d48;color:white}.duration-badge{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,0.75);color:white;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:4px;backdrop-filter:blur(2px)}.filter-chip{padding:.6rem 1.5rem;border-radius:999px;font-size:.95rem;font-weight:600;border:1px solid #e2e8f0;color:#64748b;background:white;cursor:pointer;transition:all .2s ease;user-select:none}.filter-chip:hover{border-color:#e11d48;color:#e11d48;background:#fff1f2;transform:translateY(-1px)}.filter-chip.active{background:#e11d48;border-color:#e11d48;color:white;box-shadow:0 4px 12px rgba(225,29,72,0.25)}.video-modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;backdrop-filter:blur(8px)}.video-modal.open{opacity:1;pointer-events:auto}.modal-content{width:90%;max-width:900px;aspect-ratio:16/9;background:black;border-radius:1rem;overflow:hidden;position:relative;box-shadow:0 25px 50px -12px rgba(0,0,0,0.7);transform:scale(0.95);transition:transform .3s cubic-bezier(0.34,1.56,0.64,1)}.video-modal.open .modal-content{transform:scale(1)}.modal-close{position:absolute;top:20px;right:30px;color:white;cursor:pointer;opacity:.6;transition:opacity .2s,transform .2s;background:rgba(255,255,255,0.1);padding:8px;border-radius:50%;z-index:110}.modal-close:hover{opacity:1;transform:rotate(90deg);background:rgba(255,255,255,0.2)}