*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#050816;
color:white;
min-height:100vh;
}

.navbar{
position:sticky;
top:0;
z-index:999;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px;
background:rgba(5,8,22,.95);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,.08);
}

.logo{
font-size:28px;
font-weight:700;
background:linear-gradient(90deg,#ff4d4d,#ff7b54);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:1px;
}

.search-box{
width:220px;
}

.search-box input{
width:100%;
padding:12px;
border:none;
outline:none;
border-radius:14px;
background:#111827;
color:white;
}

.hero{
padding:20px;
max-width:900px;
margin:auto;
}

.video-card{
background:#0c1020;
border-radius:20px;
padding:18px;
box-shadow:0 0 30px rgba(255,80,80,.15);
}

video{
width:100%;
border-radius:16px;
background:black;
}

.btn-group{
display:flex;
gap:15px;
margin-top:15px;
}

.btn-group button{
flex:1;
padding:14px;
border:none;
border-radius:14px;
cursor:pointer;
font-size:15px;
font-weight:600;
color:white;
background:linear-gradient(90deg,#ff4d4d,#ff7b54);
}

.btn-group button:hover{
opacity:.9;
}

@media(max-width:600px){

.navbar{
flex-direction:column;
gap:12px;
}

.search-box{
width:100%;
}

.logo{
font-size:24px;
}

.btn-group{
flex-direction:column;
}

}