.hero { padding: 15px 20px 45px; }

.hero .container {
    max-width: 1850px;
    padding:   0;
}

.hero__wrp {
    display:       flex;
    flex-direction: row;
    gap:           20px;
    padding:       60px 70px;
    border-radius: 25px;
    background:    var(--hero-image, none) center center / cover no-repeat, var(--color-bg-alt);
}

.hero__main {
    display:        flex;
    flex-direction: column;
    gap:            100px;
    width:          60%;
    min-width:      0;
}

.hero__side {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    gap:             12px;
    width:           40%;
    min-width:       0;
}

.hero__side-image {
    position:   absolute;
    right:      -70px;
    bottom:     50px;
    display:    block;
    width:      100%;
    height:     auto;
    object-fit: contain;
}

.hero__stats {
    position:        relative;
    display:         flex;
    align-items:     flex-end;
    justify-content: flex-end;
    gap:             20px;
}

.hero__stat {
    width:      auto;
    height:     auto;
    min-width:  0;
    object-fit: fill;
}

.hero__title,
.hero__title-sub {
    text-transform: uppercase;
    letter-spacing: 0;
    color:          var(--color-heading);
}

.hero__title {
    font-size:   4vw;
    font-weight: 500;
    line-height: 110%;
}

.hero__title-sub {
    font-family:   var(--font-heading);
    font-size:     2.7vw;
    font-weight:   400;
    line-height:   110%;
    margin-bottom: 32px;
}

.hero__subtitle {
    font-size:     18px;
    font-weight:   500;
    line-height:   24px;
    color:         var(--color-heading);
    margin-bottom: 32px;
}

.hero__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       12px;
}

.hero__services {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

.hero__services-image {
    display: none;
    width:   100%;
    height:  auto;
}

.hero__services-title {
    display:        flex;
    align-items:    center;
    gap:            16px;
    font-size:      18px;
    line-height:    24px;
    font-weight:    500;
    text-transform: uppercase;
    color:          #ffffff;
}

.hero__services-title::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: rgba(255, 255, 255, .5);
}

.hero-services {
    display: flex;
    gap:     12px;
}

.hero-services__item {
    flex:      1 1 0;
    min-width: 0;
}

.hero-services__link {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    gap:             12px;
    height:          165px;
    padding:        16px;
    border:         1px solid rgba(255, 255, 255, .08);
    border-radius:  10px;
    background:     rgba(255, 255, 255, .15);
    backdrop-filter:         blur(8.5px);
    -webkit-backdrop-filter: blur(8.5px);
    color:          #ffffff;
    transition:     background var(--transition);
}

.hero-services__link:hover {
    background: #ffffff;
    color:      #3B3D42;
}

.hero-services__link:hover .hero-services__icon svg [fill="white"] { fill: #3B3D42; }

.hero-services__icon {
    display:     block;
    flex-shrink: 0;
    width:       40px;
    height:      40px;
    object-fit:  contain;
}

.hero-services__icon svg { display: block; }

.hero-services__title {
    font-size:   16px;
    font-weight: 400;
    line-height: 1.3;
}

.hero-services__arrow { display: none; }

@media (max-width: 1024px) {
    .hero__wrp {
        flex-direction: column;
        padding:        40px 28px;
    }

    .hero__main,
    .hero__side { width: 100%; }

    .hero__side { margin-top: 250px; }

    .hero__stats { justify-content: center; }

    .hero__side-image {
        right:      0;
        bottom:     0;
        width:      100%;
        height:     300px;
        object-fit: contain;
    }

    .hero__main { gap: 40px; }

    .hero__title,
    .hero__title-sub { font-size: 48px; line-height: 56px; }

    .hero-services__link { height: 140px; }
}

@media (max-width: 767px) {
    .hero { padding: 8px 0 24px; }

    .hero__wrp {
        gap:              16px;
        padding:          20px 16px 30px;
        border-radius:    0;
    }

    .hero__main { gap: 12px; }

    .hero__services-image { display: block; }

    .hero__side { display: none; }

    .hero__side-image { left: 0; right: 0; width: 100%; object-fit: contain; }

    .hero__title,
    .hero__title-sub { font-size: 28px; line-height: 32px; }

    .hero__title-sub { margin-bottom: 12px; }

    .hero__subtitle {
        font-size:     14px;
        line-height:   18px;
        margin-bottom: 12px;
    }

    .hero-services {
        flex-direction: column;
        gap:            4px;
    }

    .hero-services__link {
        flex-direction:  row;
        align-items:     center;
        justify-content: flex-start;
        text-align:      left;
        gap:             16px;
        height:          50px;
        padding:         12px 16px;
    }

}

.audience { padding: 45px 0; }

.audience .container { max-width: 1540px; }

.audience__wrp {
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

.audience__title {
    font-size:   48px;
    font-weight: 700;
    line-height: 52px;
    text-align:  center;
    color:       var(--color-secondary);
}

.audience-list {
    display: flex;
    gap:     30px;
}

.audience-card {
    display:        flex;
    flex-direction: column;
    flex:           1 1 0;
    min-width:      0;
    border:         1px solid var(--color-border);
    border-radius:  10px;
    overflow:       hidden;
}

.audience-card__image {
    display:    block;
    width:      100%;
    height:     170px;
    object-fit: fill;
}

.audience-card__body {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    flex:           1;
    padding:        24px;
}

.audience-card__title {
    font-size:   24px;
    font-weight: 700;
    line-height: 28px;
    color:       var(--color-heading);
}

.audience-card__copy {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.audience-card__text,
.audience-card__note {
    font-size:   16px;
    line-height: 20px;
    color:       var(--color-heading);
}

.audience-card__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    align-self:      flex-start;
    margin:          0 24px 24px;
    padding:         10px 16px;
    border:          1px solid var(--color-primary);
    border-radius:   8px;
    font-size:       14px;
    line-height:     16px;
    color:           var(--color-primary);
    transition:      background var(--transition), color var(--transition);
}

.audience-card__btn:hover {
    background: var(--color-primary);
    color:      #ffffff;
}

@media (max-width: 1024px) {
    .audience__wrp { gap: 20px; }

    .audience__title { font-size: 36px; line-height: 42px; }

    .audience-list {
        flex-wrap: wrap;
        gap:       20px;
    }

    .audience-card {
        flex:      1 1 calc(50% - 10px);
        min-width: 280px;
    }

    .audience-card__image {
        height:       auto;
        aspect-ratio: 326 / 170;
    }

    .audience-card__body { gap: 20px; padding: 20px; }

    .audience-card__title { font-size: 20px; line-height: 24px; }

    .audience-card__btn { margin: 0 20px 20px; }
}

@media (max-width: 767px) {
    .audience__title { font-size: 24px; line-height: 28px; }

    .audience-list {
        flex-wrap: wrap;
        gap:       20px;
    }

    .audience-card {
        flex:      1 1 100%;
        min-width: 100%;
    }

    .audience-card__image { height: auto; aspect-ratio: 326 / 170; }

    .audience-card__body { gap: 16px; padding: 16px; }

    .audience-card__title { font-size: 18px; line-height: 22px; }

    .audience-card__copy { display: none; }

    .audience-card__btn { margin: 0 16px 16px; }
}

.about { padding: 45px 0; }

.about .container { max-width: 1540px; }

.about__wrp {
    display:   flex;
    flex-wrap: wrap;
    gap:       60px;
}

.about__media { flex: 0 1 38.3%; }

.about__media img {
    display:      block;
    width:        100%;
    height:       auto;
    aspect-ratio: 1301 / 1444;
    object-fit:   fill;
}

.about__content {
    position:        relative;
    isolation:       isolate;
    display:         flex;
    flex-direction:  column;
    gap:             16px;
    flex:            1 1 320px;
    min-width:       0;
}

.about__content::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--about-content-bg, none) right bottom / auto no-repeat;
    z-index:    -1;
}

.about__title {
    font-size:   48px;
    font-weight: 700;
    line-height: 52px;
    color:       var(--color-secondary);
}

.about__text {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}

.about__text p {
    font-size:   16px;
    line-height: 20px;
    color:       var(--color-text);
}

.about__perks-label {
    font-size:      16px;
    font-weight:    600;
    line-height:    20px;
    text-transform: uppercase;
    color:          var(--color-text);
}

.perks-list {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.perks-list__item {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-size:   16px;
    line-height: 20px;
    color:       var(--color-text);
}

.perks-list__item .icon { flex-shrink: 0; }

.about__btn { align-self: flex-start; }

@media (max-width: 1024px) {
    .about__wrp { gap: 40px; }

    .about__title { font-size: 36px; line-height: 42px; }
}

@media (max-width: 767px) {
    .about__media,
    .about__content { flex-basis: 100%; }

    .about__title { font-size: 24px; line-height: 28px; }

    .about__btn { align-self: stretch; text-align: center; }
}

.products { padding: 50px 0; }

.products .container { max-width: 1540px; }

.products__wrp {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.products__label {
    align-self: center;
    color:      var(--color-heading);
}

.products__title {
    font-size:   48px;
    font-weight: 700;
    line-height: 52px;
    text-align:  center;
    color:       var(--color-secondary);
}

.products-slider-wrap {
    position:   relative;
    margin-top: 8px;
}

.products-slider { margin: 0 -10px; }

.products-slider .slick-track { display: flex; }

.products-slider .slick-slide {
    height:  auto;
    padding: 10px;
}

.products-slider__arrow {
    position:        absolute;
    top:             50%;
    z-index:         2;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           32px;
    height:          32px;
    padding:         0;
    border:          0;
    background:      rgba(0, 0, 0, .1);
    color:           var(--color-heading);
    transform:       translateY(-50%);
    cursor:          pointer;
}

.products-slider__arrow--prev { left: 0; }
.products-slider__arrow--next { right: 0; }

.products-slider__arrow--prev .icon { transform: scaleX(-1); }

@media (max-width: 1024px) {
    .products__title { font-size: 36px; line-height: 42px; }
}

@media (max-width: 767px) {
    .products__title { font-size: 24px; line-height: 28px; }
}

.video .container {
    max-width:      1540px;
    padding-top:    45px;
    padding-bottom: 45px;
}

.video__el {
    display: block;
    width:   100%;
}

@media (max-width: 767px) {
    .video .container { padding-top: 20px; padding-bottom: 20px; }
}

.process { padding: 50px 0 45px; }

.process .container { max-width: 1540px; }

.process__wrp {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.process__title {
    font-size:   48px;
    font-weight: 700;
    line-height: 52px;
    text-align:  center;
    color:       var(--color-secondary);
}

.process__subtitle {
    font-size:     16px;
    line-height:   20px;
    text-align:    center;
    color:         var(--color-heading);
    margin-bottom: 30px;
}

.process-timeline { position: relative; }

.process-timeline__line {
    position:   absolute;
    top:        25px;
    bottom:     25px;
    left:       50%;
    width:      2px;
    background: var(--color-accent);
    transform:  translateX(-50%);
    overflow:   hidden;
}

.process-timeline__progress {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     0;
    background: var(--color-primary-hov);
}

.process-timeline__list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.process-timeline__item {
    position:    relative;
    display:     flex;
    align-items: center;
}

.process-timeline__item:nth-child(2n) { flex-direction: row-reverse; }

.process-timeline__point {
    position:        relative;
    z-index:         1;
    display:         flex;
    flex-shrink:     0;
    align-items:     center;
    justify-content: center;
    width:           50px;
    height:          50px;
    margin:          0 20px;
    border-radius:   50%;
    background:      var(--color-accent);
    color:           #ffffff;
    font-size:       24px;
    font-weight:     700;
    line-height:     28px;
    transition:      background .3s;
}

.process-timeline__item.is--active .process-timeline__point { background: var(--color-primary-hov); }

.process-timeline__card {
    flex:          1 1 50%;
    min-width:     0;
    background:    #f7fcf8;
    border-radius: 16px;
    padding:       24px;
}

.process-timeline__spacer { flex: 1 1 50%; }

.process-timeline__card-title {
    font-size:     24px;
    font-weight:   700;
    line-height:   28px;
    color:         var(--color-secondary);
    margin-bottom: 24px;
}

.process-timeline__card-desc {
    font-size:   16px;
    line-height: 20px;
    color:       var(--color-heading);
}

@media (max-width: 1024px) {
    .process { padding: 40px 0; }

    .process__title { font-size: 36px; line-height: 42px; }

    .process__subtitle { margin-bottom: 24px; }

    .process-timeline__line {
        left:      25px;
        transform: none;
    }

    .process-timeline__list { gap: 24px; }

    .process-timeline__item,
    .process-timeline__item:nth-child(2n) { flex-direction: row; }

    .process-timeline__point { order: 0; margin: 0 20px 0 0; }

    .process-timeline__card { order: 1; }

    .process-timeline__card { flex: 1; margin-left: 10px; }

    .process-timeline__spacer { display: none; }
}

@media (max-width: 767px) {
    .process { padding: 20px 0; }

    .process__title { font-size: 24px; line-height: 28px; }

    .process-timeline__line { left: 16px; }

    .process-timeline__list { gap: 16px; }

    .process-timeline__point {
        width:  32px;
        height: 32px;
        margin: 0;
    }

    .process-timeline__card { padding: 16px; }
}

.stats .container { max-width: 1850px; }

.stats__wrp { padding: 45px 0 40px; }

.stats__panel {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            20px;
    padding:        90px 40px;
    background:     var(--stats-bg, none) center / cover no-repeat, #f2f0ec;
    border-radius:  25px;
}

.stats__label { align-self: center; }

.stats__title {
    font-size:     48px;
    font-weight:   700;
    line-height:   52px;
    text-align:    center;
    color:         var(--color-secondary);
    margin-bottom: 32px;
}

.stats-list {
    display:         flex;
    align-items:     stretch;
    justify-content: space-between;
    gap:             20px;
    width:           100%;
}

.stats-card {
    display:        flex;
    flex:           1 1 0;
    flex-direction: column;
    gap:            16px;
    padding:        24px;
    background:     #ffffff;
    border-radius:  16px;
}

.stats-card__number {
    font-size:   48px;
    font-weight: 500;
    line-height: 52px;
    text-align:  center;
    color:       var(--color-accent);
}

.stats-card__title {
    font-size:   16px;
    font-weight: 600;
    line-height: 20px;
    text-align:  center;
    color:       var(--color-heading);
}

.stats-card__text {
    font-size:   16px;
    line-height: 20px;
    color:       rgba(0, 0, 0, .5);
}

@media (max-width: 1024px) {
    .stats__wrp { padding: 40px 0; }

    .stats__panel { padding: 40px 28px; }

    .stats__title { font-size: 36px; line-height: 42px; margin-bottom: 28px; }

    .stats-list { flex-direction: column; }

    .stats-card { flex: none; }

    .stats-card__number { font-size: 36px; line-height: 42px; }
}

@media (max-width: 767px) {
    .stats__wrp { padding: 16px 0; }

    .stats__panel { gap: 16px; padding: 16px; }

    .stats__title { font-size: 24px; line-height: 28px; margin-bottom: 0; }

    .stats-card { padding: 16px; }

    .stats-card__number { font-size: 40px; line-height: 48px; }
}