.hero-graphics {
      background: radial-gradient(circle at top left, rgba(175, 66, 235, 0.15), transparent 60%),
                  radial-gradient(circle at bottom right, rgba(107, 116, 240, 0.1), transparent 60%);
    }

    .span-bg-animate {
      animation: color-shift 15s ease infinite;
    }

    @keyframes fadeToTop {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-to-top {
  animation: fadeToTop 1.2s ease-out forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade-in-delayed {
  opacity: 0; /* Make sure it starts invisible */
  animation: fadeIn 1.2s ease-out;
  animation-delay: 1.3s;
  animation-fill-mode: forwards; /* Keeps final state (opacity: 1) */
}


.feature-card-hover h5,
.feature-card-hover p {
  transition: transform 0.4s ease, color 0.4s ease;
  display: inline-block; /* ensures transform works nicely */
}

.feature-card-hover:hover h5 {
  color: #6b21a8;
  transform: scale(1.2); /* scale up 20% */
}

.feature-card-hover:hover p {
  color: #4b5563;
  transform: scale(1.1); /* scale up 10% */
}