:root{
  --blue:#0d6efd;
  --yellow:#ffc107;
  --gray:#6c757d;
  --bg:#ffffff;
  --text:#1a1a1a;
}

body{
  background:var(--bg);
  color:var(--text);
  padding-top:80px;
  transition:.3s;
}

body.dark{
  --bg:#0f172a;
  --text:#e2e8f0;
}

.navbar{transition:.3s;}

.hero{
  background:linear-gradient(135deg,var(--blue),#6610f2);
  color:#fff;
}

.card-modern{
  border:none;
  border-radius:16px;
  transition:.3s;
}
.card-modern:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 30px rgba(0,0,0,.1);
}

.fade-in{
  opacity:0;
  transform:translateY(20px);
}
.fade-in.show{
  opacity:1;
  transform:translateY(0);
  transition:.6s;
}