body {
  font-family: 'Poppins', sans-serif;
  margin: 0; padding: 0;
  background: linear-gradient(180deg, #101820, #1a1f2b);
  color: #fff;
  animation: fadeIn 1s ease-in;
}
header {
  background: #0f172a;
  padding: 1em 2em;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 1000;
}
header h1 { color: #38bdf8; }
nav a { color: #94a3b8; margin-left: 1em; text-decoration: none; transition: .3s; }
nav a:hover { color: #38bdf8; }
.hero {
  text-align: center; padding: 4em 2em;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  animation: slideUp 1s ease-in-out;
}
button {
  background: #38bdf8; color: #000; border: none;
  padding: 0.8em 1.5em; border-radius: 8px;
  cursor: pointer; font-weight: bold; transition: .3s;
}
button:hover { background: #0ea5e9; transform: scale(1.05); }
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1em; padding: 2em;
}
.card {
  background: #1e293b; border-radius: 10px; overflow: hidden;
  transition: transform .3s ease;
}
.card:hover { transform: scale(1.05); }
.card img { width: 100%; display: block; }
footer {
  background: #0f172a; text-align: center; padding: 1em; margin-top: 3em;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }