/* ==========================================
   STATS
========================================== */

.stats {
    position: relative;
    z-index: 3;

    max-width: 1200px;
    margin: -45px auto 0;
    padding: 0 50px 80px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    
}

.stat-card {
    min-height: 170px;
    padding: 30px 34px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;

    background: rgba(13, 10, 25, .92);
    border: 1px solid rgba(167, 139, 250, .32);
    border-radius: 22px;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .46),
        inset 0 1px 0 rgba(255, 255, 255, .06);

    backdrop-filter: blur(12px);
    overflow: hidden;

    align-items: center;
    text-align: center;
}

.stat-card h3,
.stat-card .stat-value {
    margin: 0;
    color: #8b5cf6;
    font-size: 2.2rem;
    font-weight: 800;
}

.stat-card p,
.stat-card .stat-label {
    margin: 0;
    color: #c4c1d2;
    font-size: 1rem;
}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:0 0 35px rgba(139,92,246,.18);

}

.stat-card h2{

    font-size:42px;

    color:var(--primary);

    margin-bottom:12px;

}

.stat-card p{

    color:var(--text-secondary);

    font-size:17px;

}

.online-stat {
    color: #58e892;
}

.offline-stat {
    color: #ff6b6b;
}