/* API Developer Page Specific Styles */

.api-page {
    font-family: 'Outfit', sans-serif;
}

/* Architecture Layer Animation */
.architecture-layer {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.architecture-layer:hover {
    transform: translateX(10px);
    background: white;
    box-shadow: 0 20px 40px -20px rgba(29, 75, 167, 0.15);
}

/* How It Works Indicators */
.step-number {
    position: relative;
}

.step-arrow {
    background: linear-gradient(to right, #1D4BA7, #5BCBFA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Pricing Card Glow */
.pricing-card-featured {
    box-shadow: 0 0 50px -10px rgba(29, 75, 167, 0.2);
}

/* Table Styles */
.cost-table tr {
    transition: background-color 0.3s ease;
}

.cost-table tr:hover {
    background-color: rgba(29, 75, 167, 0.02);
}

/* Custom Scrollbar for Marquee/Testimonials */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

.animate-fade-up {
    animation: fadeInUp 0.8s ease forwards;
}

/* Layer Connection Lines (Mobile) */
@media (max-width: 768px) {
    .step-arrow {
        transform: rotate(90deg);
        margin: 1rem 0;
    }
}