.stats{
    width:100%;
    padding:120px 100px;
    overflow: hidden;
    background:#fff;
}

.stats-container{
    max-width:1335px;
    margin:0 auto;
    position:relative;
    overflow: visible;
    min-height:760px;
}
.stats__intro{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
    margin-bottom:210px;
}
.stats__watermark{
    position:absolute;
    left:50%;
    top:58%;
    width:min(1140px, 92vw);
    max-width:96%;
    opacity: 0.15;
    user-select:none;
    pointer-events:none;
    z-index:0;
    filter: contrast(1.2) saturate(0.9);
    mix-blend-mode: multiply;

    transform: translate(-50%, -50%); /* static centering only — no --wmY, no transition */
}
.stats__grid{

    list-style:none;

    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    gap:40px;

    margin:0;
    padding:0;

    position:relative;

    z-index:2;
}   
.stats__grid-wrap{
    position:relative;
    overflow:visible;
    margin-top:30px;
    z-index:2;
}
.stat-card{
    width:320px;
    height:240px;
    border-radius:16px;
    padding:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    will-change:transform;
   
}
.stat-card--blue{

    background: rgba(237, 242, 255, 1);

}
.stat-card--peach{

    background:#FFF4E8;
}
.stat-card--offset{

    margin-bottom:32px;
}
.stat-card__value{

    margin:0 0 8px;
    font-style: normal;
    line-height: 100%;

    letter-spacing: -4%;

    font-size:48px;
    font-weight:500;

    color:var(--color-text-dark);
}
.stat-card__label{

    margin:0;

    font-size:24px;
    line-height:34px;
    font-weight: 400;

    color:var(--color-text-dark);
}
/* ==========================================
   STATS RESPONSIVE
========================================== */


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

@media (max-width: 992px) {

    .stats {
        width: 100%;
        padding: 80px 30px;
        overflow: hidden;
    }

    .stats-container {
        width: 100%;
        max-width: 1335px;
        min-height: auto;
        margin: 0 auto;
    }

    .stats__intro {
        gap: 14px;
        margin-bottom: 50px;
    }

    .stats__watermark {
        display: none;
    }

    .stats__grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 24px;
    }

    .stat-card {
        width: 320px;
        height: 180px;
        padding: 24px;
        border-radius: 16px;
    }

    .stat-card__value {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .stat-card__label {
        font-size: 20px;
        line-height: 28px;
    }

    .stat-card--offset {
        margin-bottom: 0;
    }
}


/* ==========================================
   MOBILE
   Matches your reference image
========================================== */

@media (max-width: 768px) {

  .stats{
    width:100%;
    padding:20px;
    overflow:hidden;
  }

  .stats-container{
    width:100%;
    min-height:unset;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .stats__intro{
    margin-bottom:40px;
  }

  .stats__watermark{
    display:none;
  }

  .stats__grid{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:18px;
    width:100%;
    max-width:420px;
    margin:0 auto;
  }

  .stats__grid-wrap{
    margin-top:20px;
    width:100%;
    display:flex;
    justify-content:center;
  }

  .stat-card{
    width:min(100%, 320px);
    height:auto;
    min-width:280px;
    min-height:125px;
    padding:20px;
    border-radius:14px;

    transform:none;
    transition:none;
    animation:none;
    will-change:auto;
  }

  .stat-card--offset{
    margin-bottom:0;
  }

  /* alternating zigzag: odd cards left, even cards right */
  .stats__grid li:nth-child(2n){
    align-self:flex-end;
  }

  .stat-card__value{
    font-size:30px;
    line-height:36px;
  }

  .stat-card__label{
    font-size:19px;
    line-height:27px;
  }

}


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

@media (max-width: 480px) {

    .stats {
        padding: 40px 16px 40px 16px;
    }


    /* Intro */

    .stats__intro {
        margin-bottom: 20px;
        gap: 10px;
    }


    /* Cards */

    .stats__grid {
        gap: 16px;
    }

    .stat-card {

        max-width: 320px;

        height: 124px;
        min-height: 87px;

        padding: 16px;

        border-radius: 16px;
        transform: none;
        transition: none;
        animation: none;
        will-change: auto;
    }


    .stat-card__value {
        font-size: 24px;
        line-height: 34px;

        margin-bottom: 6px;
    }


    .stat-card__label {
        font-size: 24px;
        line-height: 34px;
    }
}


/* ==========================================
   VERY SMALL PHONES
========================================== */

@media (max-width: 360px) {

    .stats {
        padding: 24px 9px 25px;
    }

    .stats__intro {
        margin-bottom: 19px;
    }
    .stat-card {

        width: 79%;

        height: 84px;
        min-height: 84px;

        padding: 13px 15px;
    }

    .stat-card__value {
        font-size: 17px;
        line-height: 19px;
    }

    .stat-card__label {
        font-size: 15px;
        line-height: 20px;
    }
}