:root {
  scroll-behavior: smooth;
}

body {
  background: radial-gradient(circle at 20% 20%, rgba(17, 24, 39, 0.04), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(17, 24, 39, 0.05), transparent 25%),
    #f5f7fb;
}

#grid .card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#grid .card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}

#modal.show {
  opacity: 1;
  pointer-events: auto;
}

#modal.hide {
  opacity: 0;
  pointer-events: none;
}

.badge {
  background: linear-gradient(135deg, #fef3c7, #ffedd5);
  color: #92400e;
}

@media (max-width: 640px) {
  .badge {
    font-size: 0.75rem;
  }
}