/* body{margin:0;background:#0b0f12;color:#fff;font-family:Arial} */
.upx-video-portfolio{padding:80px 8%;background:#0b0f12}
.upx-video-header{text-align:center;margin-bottom:40px}
.upx-video-header h2{font-size:42px;margin:0}
.upx-video-header p{color:#9ba3af}
.upx-video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.upx-video-card{cursor:pointer;background:#12171c;border:1px solid #222;border-radius:18px;overflow:hidden;transition:.3s}
.upx-video-card:hover{transform:translateY(-6px)}
.upx-video-card img{width:100%;display:block}
.upx-video-overlay{position:relative;margin-top:-56px;height:56px;background:linear-gradient(transparent,rgba(0,0,0,.75));display:flex;align-items:center;justify-content:center;opacity:0;transition:.3s}
.upx-video-card:hover .upx-video-overlay{opacity:1}
.upx-video-card h3{padding:18px}
.upx-video-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);justify-content:center;align-items:center;z-index:999}
.upx-video-modal.active{display:flex}
.upx-video-box{width:min(1000px,92vw);aspect-ratio:16/9;position:relative}
.upx-video-box iframe{width:100%;height:100%;border:none;border-radius:16px}
.upx-close{position:absolute;top:-42px;right:0;background:none;border:none;color:#fff;font-size:34px;cursor:pointer}