@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

html{scroll-behavior:smooth}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#3b82f6,#06b6d4);border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:#2563eb}
img[alt="logo"]{object-fit:contain}
.service-card-anim{animation:slideUp .6s cubic-bezier(.16,1,.3,1) both}

/* ═══ 3D Card Effect ═══ */
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
}
.card-3d:hover {
    transform: translateY(-12px) rotateX(6deg) rotateY(-6deg);
    box-shadow: 0 30px 60px -20px rgba(37,99,235,.5);
}
.card-3d-inner { transform-style: preserve-3d; }

/* ═══ 3D Tilt on scroll ═══ */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.16,1,.3,1);
}

/* ═══ Parallax ═══ */
.parallax-layer {
    transition: transform .3s ease-out;
}

/* ═══ Reveal on scroll ═══ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ═══ Gradient animated bg ═══ */
@keyframes gradientShift {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.animated-gradient {
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* ═══ Floating orbs ═══ */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .5;
    pointer-events: none;
    animation: float 8s ease-in-out infinite;
}