/* Custom style for the logo "A" icon */
        .logo-icon {
            width: 24px;
            height: 24px;
            background: linear-gradient(45deg, #a100f2, #ff00e0);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }

          @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-slide-in {
            animation: slideInLeft 1s ease-out forwards;
        }

        .animate-fade-in-up {
            animation: fadeInUp 1s ease-out forwards;
        }

        .delay-200 {
            animation-delay: 0.2s;
            opacity: 0;
        }

        .delay-400 {
            animation-delay: 0.4s;
            opacity: 0;
        }

        .delay-600 {
            animation-delay: 0.6s;
            opacity: 0;
        }

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

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

        @keyframes pulse-slow {
            0%, 100% {
                opacity: 0.3;
            }
            50% {
                opacity: 0.6;
            }
        }

        .animate-pulse-slow {
            animation: pulse-slow 3s ease-in-out infinite;
        }

        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }


        @keyframes drop {
    0% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.animate-slide-in {
    animation: drop 0.5s ease forwards;
}


@media (prefers-reduced-motion: no-preference) {
@keyframes slideUpFade {
0% { opacity: 0; transform: translateY(18px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes floaty {
0% { transform: translateY(0); }
50% { transform: translateY(-8px); }
100% { transform: translateY(0); }
}


.reveal {
opacity: 0;
transform: translateY(18px);
will-change: opacity, transform;
}
.reveal.is-visible {
animation: slideUpFade 700ms cubic-bezier(.2,.9,.3,1) forwards;
}
.floaty { animation: floaty 4s ease-in-out infinite; }


/* Stagger helpers */
.reveal[data-stagger='1'].is-visible { animation-delay: 120ms; }
.reveal[data-stagger='2'].is-visible { animation-delay: 240ms; }
.reveal[data-stagger='3'].is-visible { animation-delay: 360ms; }
}


/* Simple focus-visible for keyboard users */
.focus-ring:focus { outline: none; box-shadow: 0 0 0 4px rgba(99,102,241,.12); border-radius: .5rem; }


/* Decorative SVG wave fix */
.wave { transform: translateY(2px); }


      /* Fade-up animation on scroll */
      .fade-up {
        opacity: 0;
        transform: translateY(60px);
        transition: all 0.8s ease-out;
      }
      .fade-up.active {
        opacity: 1;
        transform: translateY(0);
      }



       /* Card fade and slide animation */
      .fade-up {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease;
      }
      .fade-up.active {
        opacity: 1;
        transform: translateY(0);
      }

      /* Card hover lift */
      .testimonial-card {
        transition: transform 0.4s ease, box-shadow 0.4s ease;
      }
      .testimonial-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      }


       .fade-left, .fade-right {
      opacity: 0;
      transform: translateX(50px);
      transition: all 0.8s ease;
    }
    .fade-left.active {
      opacity: 1;
      transform: translateX(0);
    }
    .fade-right.active {
      opacity: 1;
      transform: translateX(0);
    }


    .fade-up {
      opacity: 0;
      transform: translateY(50px);
      transition: all 0.8s ease;
    }
    .fade-up.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* Card hover effect */
    .blog-card {
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .blog-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }