* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Arial',sans-serif; background:#000; color:#fff; }

header { background:rgba(0,0,0,0.9); position:sticky; top:0; z-index:10; }
nav { max-width:1200px; margin:auto; display:flex; justify-content:space-between; align-items:center; padding:1rem; }
.logo { font-size:1.5em; font-weight:bold; }
nav input { padding:0.5rem; border-radius:20px; border:none; width:300px; }
nav ul { display:flex; list-style:none; gap:1rem; }
nav a { color:#fff; text-decoration:none; }

.hero { position:relative; height:60vh; overflow:hidden; }
.hero video { width:100%; height:100%; object-fit:cover; }
.hero-text { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.hero h1 { font-size:3em; margin-bottom:1rem; }
.hero button { background:#ff007a; border:none; padding:1rem 2rem; border-radius:30px; color:#fff; font-size:1.2em; cursor:pointer; }

.featured, .categories { max-width:1200px; margin:3rem auto; padding:0 1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.card { background:#111; border-radius:10px; overflow:hidden; cursor:pointer; transition:transform 0.3s; }
.card:hover { transform:scale(1.05); }
.card img { width:100%; height:200px; object-fit:cover; }
.card h3 { padding:1rem; }
.card span { padding:0 1rem 1rem; color:#ccc; font-size:0.9em; }

.tags { display:flex; flex-wrap:wrap; gap:1rem; }
.tags a { background:#333; padding:0.5rem 1rem; border-radius:20px; text-decoration:none; color:#fff; }

footer { background:#111; text-align:center; padding:2rem; }

/* Mobile */
@media (max-width:768px) { nav { flex-direction:column; gap:1rem; } nav input { width:100%; } .hero h1 { font-size:2em; } }