::-webkit-scrollbar { display: none; }
:root {
    --background: #F8FAFC;
    --foreground: #1B1F24;
    --card: #ffffff;
    --card-foreground: #1B1F24;
    --primary: #0A66C2;
    --primary-foreground: #ffffff;
    --secondary: #00C4FF;
    --secondary-foreground: #0A192F;
    --muted: #F8FAFC;
    --muted-foreground: #1B1F24;
    --accent: #0369A1;
    --accent-foreground: #ffffff;
    --destructive: #DC2626;
    --destructive-foreground: #ffffff;
    --border: #E2E8F0;
    --input: #FFFFFF;
    --ring: #00C4FF;
    --font-sans: 'Plus Jakarta Sans', sans-serif;
    --font-serif: 'Merriweather', serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 12px;
    --shadow: 12px 4px 12px 4px rgba(10,25,47,0.08);
}

.gradient-primary {
    background: linear-gradient(90deg, #00C4FF 0%, #0369A1 100%);
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

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

.animate-slide-up {
    opacity: 0;
    transform: translateY(30px);
    animation: slideUp 0.6s ease-out forwards;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.process-step {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.process-icon {
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.process-step.animate .process-icon {
    transform: scale(1);
}

.process-line {
    width: 0;
    transition: width 0.8s ease-out;
}

.process-step.animate .process-line {
    width: 100%;
}

.glow-effect-light {
    box-shadow: 0 0 20px rgba(10, 102, 194, 0.3);
}

.why-card-shadow {
    box-shadow: 0 10px 30px rgba(0, 196, 255, 0.15);
    transition: all 0.3s ease-in-out;
}

.why-card-shadow:hover {
    box-shadow: 0 20px 60px rgba(0, 196, 255, 0.25);
    transform: translateY(-5px);
}

.services-card-shadow {
    box-shadow: 0 10px 30px rgba(0, 196, 255, 0.1);
    transition: all 0.3s ease-in-out;
}

.services-card-shadow:hover {
    box-shadow: 0 20px 60px rgba(0, 196, 255, 0.2);
    transform: translateY(-5px);
}