::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #e5e7eb;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #032244;
    border-radius: 10px;
    border: 2px solid #e5e7eb;
}

::-webkit-scrollbar-thumb:hover {
    background: #0b4dbb;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #032244 #e5e7eb;
}

/* Footer animations */
.footer-anim {
    position: relative;
    overflow: hidden;
}

/* .footer-glow {
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%);
    opacity: 0.9;
    animation: footerGlow 6s ease-in-out infinite;
} */

.footer-particles {
    background-image: radial-gradient(circle, rgba(255,255,255,0.35) 0.8px, transparent 1px);
    background-size: 18px 18px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    opacity: 0.35;
    animation: footerFloat 8s linear infinite;
}

@keyframes footerGlow {
    0%, 100% { transform: translateY(0); filter: blur(0px); }
    50% { transform: translateY(10px); filter: blur(1px); }
}

@keyframes footerFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(30px); }
}

/* Extra: hover glow + subtle lift */
/* .footer-anim:hover .footer-glow {
    opacity: 1;
    animation-duration: 3.8s;
} */

.footer-anim {
    transition: transform 300ms ease, filter 300ms ease;
}

.footer-anim:hover {
    transform: translateY(-2px);
    filter: saturate(1.05);
}

/* Variant: slow sideways drift for more “alive” feel */
.footer-particles {
    animation: footerFloat 5s linear infinite, footerSide 7s ease-in-out infinite;
}

@keyframes footerSide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(12px); }
}

/* Hero animations (glow + float) */
.hero-anim {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(3,34,68,0.06), rgba(3,34,68,0) 70%);
}

.hero-bg {
    /* extra soft gradient background for hero */
    background-image:
        radial-gradient(circle at 15% 10%, rgba(3,34,68,0.18), rgba(3,34,68,0) 45%),
        radial-gradient(circle at 85% 20%, rgba(3,34,68,0.12), rgba(3,34,68,0) 50%),
        linear-gradient(180deg, rgba(3,34,68,0.05), rgba(3,34,68,0) 65%);
}


.hero-anim::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    width: 700px;
    height: 220px;
    transform: translateX(-50%);
    background: radial-gradient(circle at center, rgba(3,34,68,0.18), rgba(3,34,68,0) 60%);
    animation: heroGlow 6s ease-in-out infinite;
    pointer-events: none;
}

.hero-mockup {
    animation: heroFloat 3.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes heroGlow {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) translateY(0); }
    50% { opacity: 1; transform: translateX(-50%) translateY(8px); }
}

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

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .footer-glow,
    .footer-particles,
    .footer-anim,
    .hero-anim,
    .hero-mockup {
        animation: none !important;
        transition: none !important;
    }
}