* {
    transition: background-color 0.4s, color 0.4s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link {
    @apply text-slate-400 hover:text-brand transition-colors relative;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #6366f1;
}

#typed-text::after {
    content: '|';
    animation: blink 0.8s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.vibe-btn {
    @apply w-full py-4 rounded-2xl bg-slate-50 dark:bg-slate-800 text-slate-900 dark:text-white font-bold uppercase text-[11px] tracking-[0.2em] border border-slate-100 dark:border-slate-700 hover:bg-brand hover:text-white hover:border-brand transition-all shadow-sm hover:shadow-indigo-500/20;
}

.form-input {
    @apply w-full px-6 py-4 rounded-2xl bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 focus:ring-4 ring-brand/10 focus:border-brand outline-none transition-all text-slate-900 dark:text-white placeholder-slate-400;
}