/* Social Proof / Stats Section */
.social-proof-container {
    padding-top: var(--spacing-sm);
    /* Reduced from lg */
    text-align: center;
    position: relative;
    z-index: 10;
}

/* 1. CTA Button Wrapper */
.sp-cta-wrapper {
    margin-top: 5rem;
    /* Increased spacing above CTA */
    margin-bottom: var(--spacing-sm);
}

/* 2. Animated Arrows */
.sp-arrows {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: var(--spacing-sm);
    /* Reduced from md */
    color: var(--color-text-muted);
    font-size: 24px;
}

.sp-arrow-icon {
    display: block;
    animation: bounceArrow 2s infinite;
    opacity: 0.6;
}

.sp-arrow-icon:nth-child(2) {
    animation-delay: 0.2s;
}

.sp-arrow-icon:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounceArrow {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* 3. Stats Grid */
.sp-stats-grid {
    display: flex;
    flex-direction: row !important;
    /* Explicitly set to row for desktop */
    justify-content: center;
    gap: 4rem;
    margin-bottom: var(--spacing-lg);
    /* Reduced from xl */
    flex-wrap: wrap;
    /* Reset List Styles just in case */
    list-style: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

.sp-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Reset List Item Styles */
    margin: 0 !important;
    padding: 0 !important;
}

.sp-stat-number {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: white;
    /* Fallback */
    /* Gradient: Grey to White (similar to hero but bolder) */
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
}

/* The Blue Plus/Suffix */
.sp-stat-suffix {
    color: #3b82f6;
    /* Blue-500 */
    vertical-align: top;
    font-size: 0.8em;
    margin-left: 2px;
}

/* Specific coloring for "M" and "K" if splitting is needed interaction-wise, 
   but gradient usually covers it. 
   User image shows "2.7M+" where M is blue? 
   Let's check image... yes. 2.7 is grey/white, M+ is blue. 
*/
.sp-accent-text {
    color: #3b82f6;
    background: none;
    -webkit-text-fill-color: #3b82f6;
    /* Override gradient */
}

.sp-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #000;
    /* Dark Text */
    text-transform: capitalize;
    /* User design has dark text on light bg? No, site is dark. 
       Wait, the uploaded image has WHITE background design. 
       But our site is DARK mode. 
       We must adapt to DARK mode. 
       Label should be Light Grey.
    */
    color: var(--color-text-muted);
}

/* 4. Badges Grid (Dark Minimalist - Fancier) */
.sp-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
}

.sp-badge {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    /* Top highlight */
    border-radius: 16px;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    clip-path: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.sp-badge:hover {
    transform: translateY(-5px);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15);
    /* Subtle glow on hover */
}

/* Badge Content Layout */
.badge-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 1. Logo Container (Top) */
.badge-logo {
    margin-bottom: 1rem;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. Text Content */
.badge-title {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.4;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 3. Platform Pill */
.badge-ribbon {
    width: auto;
    position: relative;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    display: inline-block;
}

/* Green Variant (Upwork) */
.badge-green .badge-ribbon {
    background-color: rgba(22, 163, 74, 0.1);
    color: #4ade80;
    border: 1px solid rgba(22, 163, 74, 0.25);
    box-shadow: 0 0 15px rgba(22, 163, 74, 0.1);
    /* Glow */
}

/* Red Variant (Klaviyo) */
.badge-red .badge-ribbon {
    background-color: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.25);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.1);
    /* Glow */
}

/* 4. Year */
.badge-year {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* Mobile */
@media (max-width: 768px) {
    .sp-stats-grid {
        gap: 2rem;
        flex-direction: column;
    }

    /* .sp-badges-grid scrolling rules disabled to allow centered grid in decay.css to work */
    /*
    .sp-badges-grid {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 1.5rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        width: calc(100% + 3rem);
        padding-left: 2rem;
    } 
    */
    .sp-badges-grid {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        overflow: visible !important;
    }


    .sp-badges-grid>* {
        flex: 0 0 auto;
        /* Prevent shrinking */
        width: 200px;
        /* Fixed width for cards */
        scroll-snap-align: center;
    }
}