*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#050816;color:#fff;line-height:1.7}
a{text-decoration:none;color:#fff}
header{position:sticky;top:0;background:rgba(5,8,22,.9);backdrop-filter:blur(10px);z-index:999}
.container{width:min(1200px,92%);margin:auto}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.logo{font-size:30px;font-weight:700;color:#ffd84d}
nav a{margin:0 10px;font-size:15px}
.hero{padding:100px 0;background:linear-gradient(135deg,#1b1f4d,#7f1dff)}
.hero h1{font-size:58px;line-height:1.2;margin-bottom:20px}
.hero p{max-width:700px;margin-bottom:25px}
.btn{display:inline-block;padding:14px 30px;border-radius:50px;background:#ffd84d;color:#000;font-weight:bold}
.search-box{margin:20px 0;display:flex}
.search-box input{flex:1;padding:14px;border:none;border-radius:30px 0 0 30px}
.search-box button{padding:14px 20px;border:none;background:#ffd84d;border-radius:0 30px 30px 0}
section{padding:80px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px}
.card{background:#12182e;padding:25px;border-radius:24px;transition:.3s}
.card:hover{transform:translateY(-8px)}
.video-card{position:relative;overflow:hidden}
.video-card img{width:100%;border-radius:18px}
.play{position:absolute;top:45%;left:45%;background:rgba(0,0,0,.7);padding:18px;border-radius:50%;opacity:0;transition:.3s}
.video-card:hover .play{opacity:1}
footer{background:#0d1324;padding:40px 0;margin-top:50px}
small{opacity:.8}
@media(max-width:768px){
.hero h1{font-size:38px}
nav{display:none}
}