/* --- Social Proof Section (The Echoes - Creative Rewrite) --- */
.social-proof-section {
    width: 100%;
    max-width: 1400px;
    margin: 4rem auto;
    padding: 2rem;
    position: relative;
    font-family: 'Outfit', sans-serif;
    perspective: 1000px;
    /* For 3D Tilt touches if needed */
}

/* Background "Resonance" Circles */
.social-proof-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.social-proof-section::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.voices-container {
    padding: 2rem 0;
    position: relative;
    z-index: 2;
}

.voices-header {
    text-align: center;
    margin-bottom: 4rem;
}

.voices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
}

/* --- Holographic Audio Card --- */
.voice-card {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: default;
}

/* Hover Effects: Glow & Lift */
.voice-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
    /* Cyan Glow */
}

/* Header Row: Live Indicator & Code */
.voice-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
}

.voice-live-indicator {
    color: #00ffcc;
    /* Cyan */
    text-shadow: 0 0 5px #00ffcc;
    animation: blink 2s infinite;
}

.voice-date {
    color: #444;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* --- Waveform Visualization --- */
.voice-wave-container {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.voice-wave-bar {
    width: 4px;
    background: #333;
    border-radius: 2px;
    height: 100%;
    transition: all 0.3s;
}

/* Animation on Hover */
.voice-card:hover .voice-wave-bar {
    background: white;
    /* Active state color */
    animation: equalizer 1s infinite alternate ease-in-out;
}

/* Staggered Animations for bars */
.voice-card:hover .voice-wave-bar:nth-child(1) {
    animation-delay: 0.0s;
}

.voice-card:hover .voice-wave-bar:nth-child(2) {
    animation-delay: 0.1s;
}

.voice-card:hover .voice-wave-bar:nth-child(3) {
    animation-delay: 0.2s;
}

.voice-card:hover .voice-wave-bar:nth-child(4) {
    animation-delay: 0.3s;
}

.voice-card:hover .voice-wave-bar:nth-child(5) {
    animation-delay: 0.1s;
}

.voice-card:hover .voice-wave-bar:nth-child(6) {
    animation-delay: 0.4s;
}

.voice-card:hover .voice-wave-bar:nth-child(7) {
    animation-delay: 0.2s;
}

.voice-card:hover .voice-wave-bar:nth-child(8) {
    animation-delay: 0.0s;
}

.voice-card:hover .voice-wave-bar:nth-child(9) {
    animation-delay: 0.3s;
}

.voice-card:hover .voice-wave-bar:nth-child(10) {
    animation-delay: 0.1s;
}

@keyframes equalizer {
    0% {
        height: 20%;
        opacity: 0.5;
    }

    100% {
        height: 100%;
        opacity: 1;
        box-shadow: 0 0 5px white;
    }
}

/* Text Content */
.voice-text {
    font-size: 1.1rem;
    color: #bbb;
    margin-bottom: 2rem;
    line-height: 1.7;
    position: relative;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 1rem;
}

.voice-card:hover .voice-text {
    color: white;
    border-left-color: #00ffcc;
}

/* Author Section */
.voice-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    /* Push to bottom */
}

.voice-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    /* Techy square-ish */
    background: #222;
    border: 1px solid #444;
}

.voice-meta h4 {
    color: white;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.voice-meta span {
    display: block;
    color: #666;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Trust Bar Refined --- */
.trust-bar {
    margin-top: 6rem;
    text-align: center;
    position: relative;
}

.trust-title {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: #444;
    letter-spacing: 2px;
    margin-bottom: 3rem;
    text-transform: uppercase;
}

.logos-track {
    display: flex;
    justify-content: center;
    gap: 5rem;
    flex-wrap: wrap;
    align-items: center;
}

.client-logo {
    height: 28px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.3;
    transition: all 0.4s;
    mix-blend-mode: screen;
    /* Blends nicely on dark */
    /* Note: If the BG is white in some themes, this needs check. But Contact/Echoes is seemingly dark themed now? */
    /* Wait, the main body BG is #f0f0f0 (Light). 
       BUT 'The Path' was dark. 'Contact' is Dark.
       'The Echoes' is sitting in the main flow.
       Let's FORCE 'The Echoes' to be Dark to match Contact and The Path vibes?
       User didn't specify, but "Social Proof not creative" suggests a stark white section looks boring.
       Let's wrap Social Proof in a dark container or make the section dark.
    */
}

/* Assuming we want a dark/creative section */
.social-proof-section {
    background: #050505;
    background-image: radial-gradient(circle at 50% 50%, #111 0%, #050505 60%);
    border-radius: 40px;
    /* Matching app frame style */
    color: white;
    /* Force text white */
    margin-bottom: 2rem;
    overflow: hidden;
    border: 1px solid #222;
}

/* Fix logo visibility on dark */
.client-logo {
    filter: brightness(0) invert(1);
    /* Force white */
    opacity: 0.3;
}

.client-logo:hover {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 5px white);
}

@media (max-width: 1024px) {
    .social-proof-section {
        margin: 2rem auto;
        padding: 1.5rem;
    }

    .voices-container {
        padding: 1.5rem 0;
    }

    .voices-header {
        margin-bottom: 2.5rem;
    }

    .voices-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .trust-bar {
        margin-top: 4rem;
    }

    .logos-track {
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .social-proof-section {
        margin: 1.5rem auto;
        padding: 1rem;
        border-radius: 24px;
    }

    .voices-header {
        margin-bottom: 2rem;
    }

    .voices-header .section-title {
        font-size: 2rem;
    }

    .voice-card {
        padding: 1.5rem;
    }

    .voice-text {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .trust-bar {
        margin-top: 3rem;
    }

    .logos-track {
        gap: 2rem;
    }

    .client-logo {
        height: 22px;
    }
}