.nav-link {
  position: relative;
  color: #d1d5db; /* gray-300 */
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: #c084fc; /* purple-400 */
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #a855f7, #6b21a8);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: #c084fc;
}