body { font-family: 'Segoe UI', sans-serif; margin:0; background:#0a0a0a; color:#eee; transition: background 0.4s, color 0.4s; }
.light { background:#fff; color:#111; }

.navbar { display:flex; justify-content:space-between; align-items:center; padding:15px; background:#1a001f; color:white; }
.navbar .logo { font-size:1.5rem; color:#c77dff; }
.nav-links { display:flex; list-style:none; }
.nav-links li { margin:0 15px; }
.nav-links a { text-decoration:none; color:white; }
.nav-links a:hover { color:#c77dff; }
#theme-toggle { background:none; border:none; font-size:1.2rem; cursor:pointer; color:white; }

.hero { height:80vh; display:flex; flex-direction:column; justify-content:center; align-items:center; background:linear-gradient(135deg,#5a189a,#9d4edd); color:white; text-align:center; animation: fadeIn 1.2s; }

.btn { background:#c77dff; color:white; padding:12px 25px; border-radius:30px; text-decoration:none; font-weight:bold; }
.btn:hover { background:#9d4edd; }

.cards { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.card { background:#1e1e2f; border-radius:10px; padding:20px; max-width:300px; transition: transform 0.3s; }
.card:hover { transform:scale(1.05); }
.card img { width:100%; border-radius:8px; margin-bottom:10px; }

footer { text-align:center; padding:15px; background:#1a001f; color:white; }

@keyframes fadeIn { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }