/* Ultra Premium SaaS / Modern Aesthetic */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .glass-card {
        @apply bg-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-slate-100 rounded-[2rem] transition-all duration-300;
    }
    .glass-card:hover {
        @apply shadow-[0_20px_40px_rgb(0,0,0,0.08)] -translate-y-1;
    }
}

/* Base Styles */
body {
    overflow-x: hidden;
    background-color: #f8fafc; /* slate-50 */
    font-family: 'Inter', sans-serif;
}

/* Floating Navbar Transition */
#navbar {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#navbar.scrolled {
    @apply shadow-xl backdrop-blur-xl bg-white/95;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Mesh Gradient Backgrounds */
.mesh-bg {
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,7%,0.03) 0, transparent 50%), 
        radial-gradient(at 50% 0%, hsla(225,39%,30%,0.03) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(339,49%,30%,0.03) 0, transparent 50%);
}

.hero-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 15% 50%, rgba(79, 70, 229, 0.08), transparent 25%),
                radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.08), transparent 25%);
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Modern Button */
.btn-modern {
    @apply inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white transition-all duration-200 bg-indigo-600 rounded-full hover:bg-indigo-700 hover:shadow-lg hover:shadow-indigo-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600;
}
.btn-outline {
    @apply inline-flex items-center justify-center px-8 py-4 text-base font-bold text-slate-700 transition-all duration-200 bg-white border-2 border-slate-200 rounded-full hover:bg-slate-50 hover:border-slate-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-200;
}