html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Inter', sans-serif; background: #fff; color: #333; }

/* Links with animated underline */
.nav-link { position: relative; font-weight: 600; transition: color .2s; }
.nav-link::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 50%; height: 2px;
  background: #000; transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform .3s;
}
.nav-link:hover::after, .nav-link.active::after { transform: translateX(-50%) scaleX(1); }

/* Dropdown visibility */
.dropdown-menu, .backdrop { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.dropdown-menu.active, .backdrop.active { opacity: 1; visibility: visible; }
.dropdown-menu { position: absolute; top: 0; left: 0; right: 0; transform: translateY(-10px); transition: opacity .3s, visibility .3s, transform .3s; }
.dropdown-menu.active { transform: translateY(0); }

/* Gradient text hovers */
@keyframes scrollGrad { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.grad-blue:hover {
  color: transparent; background: linear-gradient(90deg,#0a84ff 0%,#4f6dff 33%,#7c3aed 66%,#0a84ff 100%); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; animation: scrollGrad 6s linear infinite;
}
.grad-orange:hover {
  color: transparent; background: linear-gradient(90deg,#ec4899 0%,#f97316 50%,#ec4899 100%); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; animation: scrollGrad 6s linear infinite;
}

/* Backdrop used when dropdown opens (created if missing) */
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.05); z-index: 20; pointer-events: none; }

/* Logo shimmer */
.logo-anim { position: relative; height: 56px; flex-shrink: 0; }
@media (min-width:768px) { .logo-anim { height: 80px; } }
.logo-anim img { height: 100%; width: auto; display: block; }
.logo-anim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,#0a84ff 0%,#5e5ce6 33%,#bf5af2 66%,#0a84ff 100%); background-size: 300% 100%;
  mask: url('/assets/img/logo.png') center/contain no-repeat; -webkit-mask: url('/assets/img/logo.png') center/contain no-repeat;
  opacity: 0; transition: opacity .25s;
}
.logo-anim:hover::after { opacity: 1; animation: scrollGrad 10s linear infinite; }

@media (max-width: 767px) {
  #mobile-menu .nav-link::after { display: none; }
}