.logiss-achievements{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:18px 20px 26px;
    box-sizing:border-box;
    text-align:center;
}
.logiss-ach-grid{
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
    gap:18px;
    width:100%;
    margin:0 auto;
    overflow-x:auto;
    overflow-y:hidden;
    padding:8px 4px 18px;
    box-sizing:border-box;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:#176b21 rgba(255,255,255,.35);
}
.logiss-ach-grid::-webkit-scrollbar{height:5px}
.logiss-ach-grid::-webkit-scrollbar-thumb{background:#176b21;border-radius:10px}
.logiss-ach-grid::-webkit-scrollbar-track{background:rgba(255,255,255,.32);border-radius:10px}

.logiss-ach-card{
    flex:0 0 calc((100% - 54px)/4);
    min-width:0;
    max-width:260px;
    box-sizing:border-box;
    scroll-snap-align:center;
    padding:18px 10px 16px;
    border:1px solid rgba(23,107,33,.22);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,250,244,.88));
    box-shadow:
        0 9px 0 rgba(15,85,24,.12),
        0 15px 24px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.95);
    color:#333;
    transition:transform .2s ease,box-shadow .2s ease;
}
.logiss-ach-card:hover{
    transform:translateY(-3px);
    box-shadow:
        0 11px 0 rgba(215,163,21,.30),
        0 18px 28px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,1);
}
.logiss-ach-icon{
    width:54px;
    height:54px;
    margin:0 auto 8px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:27px;
    line-height:1;
    color:#fff;
    background:linear-gradient(145deg,#176b21,#0f5518);
    border:2px solid rgba(215,163,21,.55);
    box-shadow:0 5px 10px rgba(15,85,24,.25),inset 0 1px 0 rgba(255,255,255,.25);
    text-shadow:0 2px 3px rgba(0,0,0,.25);
}
.logiss-ach-value{
    font-size:37px;
    font-weight:800;
    line-height:1;
    color:#176b21;
    text-shadow:0 1px 0 #fff;
}
.logiss-ach-label{
    margin-top:8px;
    min-height:1.3em;
    font-size:15px;
    font-weight:700;
    line-height:1.25;
    color:#333;
}

/* Four items stay on one centered row on mobile.
   Additional items keep the same size and become horizontally scrollable. */
@media(max-width:700px){
    .logiss-achievements{
        padding:10px 10px 18px;
        overflow:visible;
    }
    .logiss-ach-grid{
        justify-content:flex-start;
        gap:7px;
        padding:6px 1px 14px;
    }
    .logiss-ach-card{
        flex:0 0 calc((100% - 21px)/4);
        width:calc((100% - 21px)/4);
        min-width:calc((100% - 21px)/4);
        max-width:none;
        padding:12px 3px 11px;
        border-radius:12px;
        box-shadow:
            0 5px 0 rgba(15,85,24,.12),
            0 8px 13px rgba(0,0,0,.12),
            inset 0 1px 0 rgba(255,255,255,.95);
    }
    .logiss-ach-icon{
        width:34px;
        height:34px;
        margin-bottom:6px;
        font-size:17px;
        border-width:1px;
    }
    .logiss-ach-value{
        font-size:clamp(20px,6vw,27px);
    }
    .logiss-ach-label{
        margin-top:5px;
        font-size:clamp(8px,2.45vw,11px);
        line-height:1.15;
        min-height:2.3em;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow-wrap:anywhere;
    }
}
@media(max-width:390px){
    .logiss-achievements{padding-left:7px;padding-right:7px}
    .logiss-ach-grid{gap:5px}
    .logiss-ach-card{
        flex-basis:calc((100% - 15px)/4);
        width:calc((100% - 15px)/4);
        min-width:calc((100% - 15px)/4);
        padding-left:2px;
        padding-right:2px;
    }
    .logiss-ach-icon{width:30px;height:30px;font-size:15px}
    .logiss-ach-value{font-size:clamp(18px,5.8vw,23px)}
    .logiss-ach-label{font-size:clamp(7px,2.35vw,9.5px)}
}