body {
    font-family: 'Inter', sans-serif;
}
html {
    scroll-behavior: smooth;
}

/* Animations for the Hero Section */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
    opacity: 0; 
}

/* For staggered animations */
.animation-delay-3000 {
    animation-delay: 3s;
}

/* Optional: a subtle pulse for the background blobs */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.4;
    }
}

.animate-pulse {
    animation: pulse 8s infinite ease-in-out;
}
/* ENHANCED Animation & Style for Hero Image Frame */
@keyframes hero-image-pop-in {
    from {
        opacity: 0;
        transform: translateY(60px) rotateX(-20deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg) scale(1);
    }
}

.browser-window-container {
    perspective: 1500px; /* Creates the 3D space */
}

.browser-window {
    transform: rotateX(10deg); /* Initial slight tilt */
    transition: transform 0.5s ease-out;
    opacity: 0;
    animation: hero-image-pop-in 1s ease-out forwards;
    animation-delay: 0.4s; /* Should match the delay in the HTML */
}

.browser-window-container:hover .browser-window {
    transform: rotateX(0deg); /* Flattens on hover */
}

/* Animation for Feature Cards */
.feature-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-in-up 0.6s ease-out forwards;
}

/* ENHANCED Animation for "How It Works" Section */
@keyframes pop-in {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }
    70% {
        opacity: 1;
        transform: translateY(-5px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.workflow-step {
    opacity: 0;
}

.workflow-step.is-visible {
    animation: pop-in 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: var(--delay, 0ms);
}

.workflow-step .step-circle {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 200ms;
}

.workflow-step.is-visible .step-circle {
    background-color: #DBEAFE; /* bg-blue-100 */
    border-color: #60A5FA;   /* border-blue-400 */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
    transform: scale(1.05);
}

/* On mobile, stack the connecting lines */
@media (max-width: 767px) {
    .workflow-step:not(:last-child) {
        position: relative;
        padding-bottom: 2rem; /* space for the line */
    }
    .workflow-step:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 2rem; /* length of the line */
        background-color: #e5e7eb; /* border-gray-200 */
    }
}
/* Animation for Integrations Scroller */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.scroller-inner {
    animation: scroll 40s linear infinite;
}

/* Grayscale and hover effect for logos */
.scroller-inner img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.scroller-inner:hover img {
    filter: grayscale(50%);
    opacity: 0.8;
}

.scroller-inner img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}
/* Animation for Finance Section */
.finance-section-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--delay, 0ms);
}

.finance-section-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation for API Section */
.api-section-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--delay, 0ms);
}

.api-section-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Animation for CTA Section */
.cta-section-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--delay, 0ms);
}

.cta-section-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* --- START: FINAL Geometric Shapes Background --- */

/* Keyframes for the floating and rotating animation */
@keyframes float-shape {
    0% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3; /* A solid starting opacity */
    }
    50% {
        transform: translateY(-40px) rotate(90deg);
        opacity: 0.5; /* More visible at the peak */
    }
    100% {
        transform: translateY(0px) rotate(180deg);
        opacity: 0.3; /* Return to base opacity */
    }
}

/* Base styles for all shapes */
.shape {
    position: absolute;
    border-radius: 30%;
    filter: blur(100px);
    /* Apply the animation directly */
    animation: float-shape 25s infinite ease-in-out;
}

/* Individual shape positions, sizes, and animation timings */
.shape-1 {
    width: 450px;
    height: 450px;
    top: -100px;
    left: -150px;
    animation-duration: 28s;
}

.shape-2 {
    width: 350px;
    height: 350px;
    top: 50%;
    right: -150px;
    animation-duration: 22s;
    animation-delay: -5s;
}

.shape-3 {
    width: 300px;
    height: 300px;
    bottom: -120px;
    left: 20%;
    animation-duration: 32s;
    animation-delay: -10s;
}

.shape-4 {
    width: 200px;
    height: 200px;
    bottom: 30%;
    left: 45%;
    filter: blur(90px);
    animation-duration: 38s;
    animation-delay: -3s;
}
/* --- END: FINAL Geometric Shapes Background --- */