/* ==========================================================
   MILSEC · STATS SECTION
   components/stats/stats.css
========================================================== */

.stats-section{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(circle at top left,
            rgba(19,131,128,.08),
            transparent 35%),
        linear-gradient(180deg,#ffffff 0%,#f7fbfb 100%);
}

/*==================================================
GRID
==================================================*/

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(220px,1fr));

    gap:28px;

    margin-top:60px;

}

/*==================================================
CARD
==================================================*/

.stat-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    text-align:center;

    padding:42px 30px;

    background:#fff;

    border-radius:28px;

    border:1px solid rgba(18,35,39,.08);

    box-shadow:
        0 18px 45px rgba(15,23,42,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    overflow:hidden;

    isolation:isolate;

}

.stat-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    right:-120px;
    top:-120px;

    border-radius:50%;

    background:
        radial-gradient(circle,
            rgba(19,131,128,.10),
            transparent 70%);

    transition:.4s;

}

.stat-card:hover{

    transform:translateY(-10px);

    border-color:rgba(19,131,128,.18);

    box-shadow:
        0 30px 70px rgba(15,23,42,.10);

}

.stat-card:hover::before{

    transform:scale(1.15);

}

/*==================================================
ICON
==================================================*/

.stat-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:160px;

    margin-bottom:24px;

}

.stat-icon img{

    width:auto;

    height:auto;

    max-width:120px;

    max-height:120px;

    object-fit:contain;

    display:block;

    transition:
        transform .35s ease;

}

.stat-card:hover .stat-icon img{

    transform:scale(1.08);

}

/*==================================================
NUMBER
==================================================*/

.stat-card strong{

    display:block;

    margin:0;

    font-size:3.4rem;

    line-height:1;

    font-weight:800;

    letter-spacing:-.04em;

    color:#118b8b;

}

/*==================================================
TITLE
==================================================*/

.stat-card span{

    margin-top:14px;

    font-size:1.05rem;

    font-weight:600;

    line-height:1.6;

    color:#344054;

}

/*==================================================
TABLET
==================================================*/

@media (max-width:992px){

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .stat-card{

        padding:36px 28px;

    }

}

/*==================================================
MOBILE
==================================================*/

@media (max-width:640px){

    .stats-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .stat-card{

        padding:32px 22px;

        border-radius:22px;

    }

    .stat-icon{

        height:120px;

        margin-bottom:18px;

    }

    .stat-icon img{

        max-width:90px;

        max-height:90px;

    }

    .stat-card strong{

        font-size:2.7rem;

    }

    .stat-card span{

        font-size:1rem;

    }

}

/*==================================================
REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    .stat-card,
    .stat-card::before,
    .stat-icon img{

        transition:none;

    }

}