/* Cleaned & Mobile-Responsive 3D Carousel */
.stats3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 10px;
    background: white;
    margin: -30px auto 0;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    max-width: 1200px;
    position: relative;
    z-index: 10;
    width: 92%;
    overflow: hidden;
}

.scene, .a3d {
    display: grid;
}

.scene {
    overflow: hidden;
    perspective: px; /* Scaled down perspective for stable mobile rendering */
    mask: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    width: 100%;
    padding: 20px 0;
}

.a3d {
    place-self: center;
    transform-style: preserve-3d;
    animation: ry 90s infinite linear;
}

@keyframes ry {
    to {
        transform: rotateY(1turn);
    }
}

.card {
    /* Fluid responsiveness: card width scales with viewport width on mobile */
    --w: clamp(140px, 35vw, 280px);
    --ba: calc(1turn / var(--n));
    grid-area: 1/1;
    width: var(--w);
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 0.5em;
    backface-visibility: hidden;
    transform: rotateY(calc(var(--i) * var(--ba))) translateZ(calc((-1) * (0.5 * var(--w) + 0.5em) / tan(0.5 * var(--ba))));
}