@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Brand colors (purple → pink) */
:root {
    --brand-primary: #8b5cf6; /* violet-500 */
    --brand-secondary: #ec4899; /* pink-500 */
}

/* Minimal utility fallbacks so we can reference Tailwind-like classes without a custom config */
.bg-primary { background-color: var(--brand-primary) !important; }
.text-primary { color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }

/* Gradient helpers compatible with Tailwind's bg-gradient-to-* utilities */
.from-primary {
    --tw-gradient-from: var(--brand-primary) !important;
    /* transparent stop for smoother gradient like Tailwind */
    --tw-gradient-to: rgb(139 92 246 / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-secondary {
    --tw-gradient-to: var(--brand-secondary) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: #1f2937;
}

::-webkit-scrollbar-thumb {
    background-color: #6b7280;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ensure Vanta.js canvas covers full section */
#vanta-bg {
    position: relative;
}

#vanta-bg canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}