:root {
    --brand-50: #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-300: #a5b4fc;
    --brand-400: #818cf8;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-800: #3730a3;
    --brand-900: #312e81;
    --brand-950: #1e1b4b;
}

body {
    font-family: 'Outfit', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-gradient {
    background: radial-gradient(circle at top right, var(--brand-600) 0%, var(--brand-950) 100%);
}

.ceo-gradient {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
}

@keyframes float {
    0%, 100% { transform: translateY(0px) scale(1.05); }
    50% { transform: translateY(-20px) scale(1.1); }
}

.floating-slow {
    animation: float 20s ease-in-out infinite;
}

.animate-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

[data-scroll] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-scroll].active {
    opacity: 1;
    transform: translateY(0);
}

.ceo-image-container {
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: var(--brand-600);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-700);
}
@keyframes bounce-slow {
    0%, 100% { transform: translateY(-3%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

.animate-bounce-slow {
    animation: bounce-slow 4s infinite;
}