.custom-badge {
  display: inline-block;
  background: linear-gradient(to right, #2e2eff, #ec2aa7); /* Blue to pink */
  color: white;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-align: center;
  margin-bottom: 1rem;
}

/* Smooth, slow slide-in animation */
@keyframes badge-in {
  from {
    transform: translateY(60px) scale(.96);
    opacity: 0;
    filter: blur(3px);
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* Class to trigger the animation */
.slide-in-up {
  animation: badge-in 6s cubic-bezier(.25, 1, .30, 1) both;
  will-change: transform, opacity, filter;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .slide-in-up {
    animation: none !important;
  }
}