/* ===== CSS ===== */
body {margin:0;font-family:Inter;background:#050505;color:#fff}
.container{max-width:1200px;margin:auto;padding:60px 20px}
.row{display:flex;justify-content:space-between;align-items:center}
.header{position:fixed;width:100%;backdrop-filter:blur(10px)}
.hero{height:100vh;position:relative}
.hero video{position:absolute;width:100%;height:100%;object-fit:cover}
.overlay{position:absolute;width:100%;height:100%;background:rgba(0,0,0,.6)}
.hero-content{position:relative;top:40%;text-align:center}
.btn{padding:12px 30px;background:#fff;color:#000;border:none}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.work video{width:100%;border-radius:10px;transition:.4s}
.work:hover video{transform:scale(1.05)}
.case{margin:20px 0;padding-left:20px;border-left:2px solid #fff}

/* MODAL */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;display:none;justify-content:center;align-items:center}
.modal video{max-width:80%}

/* SCROLL ANIMATION */
.fade-up{opacity:0;transform:translateY(40px);transition:1s}
.fade-up.show{opacity:1;transform:translateY(0)}

.messengers a{margin-right:15px}