body, html { margin: 0; padding: 0; font-family: 'Helvetica Neue', sans-serif; background-color: #0a0a0a; color: #eee; line-height: 1.6; }
header { background: rgba(0,0,0,0.9); padding: 20px 50px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; }
.logo { font-size: 1.5em; font-weight: bold; letter-spacing: 2px; color: #fff; text-decoration: none; }
nav a { color: #888; text-decoration: none; margin-left: 30px; transition: color 0.3s; text-transform: uppercase; font-size: 0.9em; letter-spacing: 1px; }
nav a:hover, nav a.active { color: #fff; }
.hero { height: 70vh; background-size: cover; background-position: center; display: flex; align-items: center; padding: 0 10%; }
.hero h1 { font-size: 4em; margin: 0; text-shadow: 2px 2px 10px rgba(0,0,0,0.8); }
.content { padding: 50px 10%; max-width: 1200px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.card { background: #111; padding: 20px; border-radius: 8px; border: 1px solid #222; }
.card img { width: 100%; border-radius: 4px; margin-bottom: 15px; }
footer { text-align: center; padding: 40px; color: #555; border-top: 1px solid #222; margin-top: 50px; font-size: 0.8em; }