:root{
--bg:#0f172a;--card:#111827;--text:#f8fafc;--muted:#94a3b8;--line:#1e293b;--accent:#38bdf8;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#020617;color:var(--text);line-height:1.7}
.container{max-width:1200px;margin:auto;padding:24px}
header,footer{background:#020617;border-bottom:1px solid var(--line)}
nav{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.logo{font-size:28px;font-weight:bold}
.logo span{color:var(--accent)}
.nav-links a{margin:0 12px;color:#fff;text-decoration:none}
.hero{padding:90px 0;text-align:center}
.hero h1{font-size:52px;margin-bottom:20px}
.hero p{color:var(--muted);max-width:780px;margin:auto}
.btn{display:inline-block;background:var(--accent);padding:14px 30px;border-radius:50px;color:#000;font-weight:bold;text-decoration:none;margin-top:24px}
.search-box{margin:30px auto;max-width:700px}
.search-box input{width:100%;padding:16px;border-radius:14px;border:1px solid var(--line);background:#111827;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:40px}
.card{background:#111827;border:1px solid var(--line);padding:24px;border-radius:20px;transition:.3s}
.card:hover{transform:translateY(-6px)}
.video-card{position:relative;overflow:hidden}
.video-card img{width:100%;border-radius:16px}
.play{position:absolute;top:45%;left:45%;font-size:48px;opacity:0;transition:.3s}
.video-card:hover .play{opacity:1}
.section{padding:80px 0}
.faq details{background:#111827;margin-bottom:12px;padding:18px;border-radius:14px}
footer{margin-top:60px;padding:40px 0;text-align:center;color:var(--muted)}
@media(max-width:768px){
.hero h1{font-size:34px}
.nav-links{display:none}
}