:root {
 --primary: #032541;
 --secondary: #01b4e4;
 --dark: #0d253f;
 --light: #fff;
}
body { margin: 0; font-family: sans-serif; background: #f8f9fa; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.navbar { background: var(--primary); padding: 15px 0; color: var(--secondary); }
.logo { margin: 0; font-size: 24px; font-weight: 800; }
.hero { 
 background: linear-gradient(to right, rgba(3,37,65,0.8), rgba(3,37,65,0)), url('hero-bg.jpg');
 background-size: cover;
 color: white;
 padding: 80px 0;
}
.movie-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 gap: 25px;
 padding: 20px 0;
}
.card {
 background: white;
border-radius: 10px;
 box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 overflow: hidden;
 transition: 0.3s;
}
.card:hover { transform: translateY(-5px); }
.card img { width: 100%; height: auto; }
.card .info { padding: 10px; }
.card h4 { margin: 5px 0; font-size: 14px; }
.card p { font-size: 12px; color: #666; }