.homepage-statistics {
    position: relative;
    background:linear-gradient(214deg,  #194886 19.05%, #122E52 88.31%);
    color: #fff;
}

.homepage-statistics .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

.homepage-statistics__intro {
    width: 100%;
    margin: 0 auto;
}

.homepage-statistics__intro,
.homepage-statistics__intro > * {
    color: #fff;
}

.homepage-statistics__intro h2 {
    padding-top: 0;
    margin-bottom: 0;
    text-transform: capitalize;
}

.homepage-statistics__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    width: 100%;
}

.homepage-statistics__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    text-align: center;
}

.homepage-statistics__value {
    font-family: "Rubik", sans-serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    background: linear-gradient(163deg, #4DC6EC 10.8%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.homepage-statistics__label {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: #fff;
}
.stat-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Top wave: when the statistics block follows the product-buttons block, clip the
   statistics top edge into the wave shape and pull it up so it overlaps the white
   product-buttons section. The statistics gradient + stat-bg image form the wave
   peaks, and the white product-buttons shows through the troughs, so the wave blends
   into the statistics with no color to match. Replaces the old gradient-filled
   .bottom-product-wave that floated over the white section. */
.homepage-product-buttons:has(+ .homepage-statistics) .bottom-product-wave {
    display: none;
}

.homepage-product-buttons + .homepage-statistics {
    --stat-top-wave: calc(100vw * 200 / 1920);
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--stat-top-wave) - 1px);
    padding-top: calc(var(--stat-top-wave) + var(--hr-section-gap));
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1920%2017.2092C1867.31%205.14973%201807.3%20-3.1725%201747.29%201.16332C1625.81%209.93948%201504.32%2068.9747%201382.84%2094.7424C1261.36%20120.032%201139.87%20112.053%201018.39%2090.5139C896.91%2068.9749%20775.425%2035.4687%20653.943%2035.2278C532.46%2035.4668%20410.977%2068.9738%20289.495%2094.7424C176.851%20118.194%2064.2208%20134.985%200%20143.857V200.002H1920V17.2092Z'%20fill='%23000'/%3E%3C/svg%3E") top / 100% var(--stat-top-wave) no-repeat,
        linear-gradient(#000, #000) bottom / 100% calc(100% - var(--stat-top-wave) + 2px) no-repeat;
    -webkit-mask-composite: source-over;
    mask:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%20200'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1920%2017.2092C1867.31%205.14973%201807.3%20-3.1725%201747.29%201.16332C1625.81%209.93948%201504.32%2068.9747%201382.84%2094.7424C1261.36%20120.032%201139.87%20112.053%201018.39%2090.5139C896.91%2068.9749%20775.425%2035.4687%20653.943%2035.2278C532.46%2035.4668%20410.977%2068.9738%20289.495%2094.7424C176.851%20118.194%2064.2208%20134.985%200%20143.857V200.002H1920V17.2092Z'%20fill='%23000'/%3E%3C/svg%3E") top / 100% var(--stat-top-wave) no-repeat,
        linear-gradient(#000, #000) bottom / 100% calc(100% - var(--stat-top-wave) + 2px) no-repeat;
    mask-composite: add;
}
.stat-bottom-wave {
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: auto;

}
/* Bottom clearance reserves the in-section stat bottom wave (217 tall at 1920w,
   scales fluidly with viewport width) plus one --hr-section-gap of breathing room
   so the content clears the wave consistently at every breakpoint. */
.homepage-statistics:has(+ .homepage-faq) {
    padding-bottom: calc(100vw * 217 / 1920 + var(--hr-section-gap));
}
/* The faq sits flush under the statistics bottom wave, so it only needs the
   standard --hr-section-gap of top breathing room. */
.homepage-statistics + .homepage-faq { 
    padding-top: var(--hr-section-gap);
}
.homepage-faq__subheading {
   padding-bottom: 0;
   margin-bottom: 0  !important;
}
.homepage-faq__subheading + h2 {
    padding-top: 0;
}
@media (min-width: 576px) {
    .homepage-statistics .container {
        gap: 50px;
    }

    .homepage-statistics__list {
        gap: 34px;
    }

    .homepage-statistics__item {
        width: calc(50% - 17px);
    }

    .homepage-statistics__value {
        font-size: 64px;
    }
}

@media (min-width: 992px) {
    .homepage-statistics__item {
        width: 289px;
    }

    .homepage-statistics__value {
        font-size: 90px;
    }
}


@media (min-width: 1366px) {
    .homepage-statistics__intro h2{
        font-size: 48px;
    }
        
}