article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

ol, ul {
    list-style:none;
}

input, select {
    vertical-align:middle;
}
*,
*::after,
*::before{
    padding: 0;
    margin: 0;
    box-sizing: border-box;   
}
a{
    color: inherit;
    text-decoration: none;
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
html,body{
    color: #474B52;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    scroll-behavior: smooth;
    background-color: #22252A;
}
.body{
    min-width: 320px;
}
.body.no-scroll{
    overflow: hidden;
}
.container{
    width: 100%;
    max-width: 1202px;
    padding: 0 16px;
    margin: 0 auto;
}
/*.btn,
button{
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFF;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    max-width: max-content;
    width: 100%;
}
.btn{
    padding: 10px 16px;
    border-radius: 8px;
    background: #F7891B;
}*/
.btn:hover{
    background: #EE7700;
}
textarea,
textarea::placeholder,
input,
input::placeholder{
    color: #61656B;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
textarea,
input{
    color: #2D3239;
    border: none;
    outline: none;
    background-color: transparent;
    width: 100%;
}
textarea{
    resize: none;
    height: 150px;
}
.slider-pagination-second,
.slider-pagination{
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.slider-pagination span{
    opacity: 1;
    width: 100%;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.40);
    backdrop-filter: blur(2px);
    height: 2px;
}
.slider-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active{
    border-radius: 32px;
    border: 1px solid #F7891B;
    background: #F7891B;
}
.slider-pagination-second{
    flex-wrap: wrap;
}
.slider-pagination-second span{
    border-radius: 32px;
    width: 53px;
    background: #E1E6EB;
    backdrop-filter: blur(2px);
    height: 2px;
    min-width: 53px;
}
.slider-pagination-second span.swiper-pagination-bullet.swiper-pagination-bullet-active{
    border: 1px solid #151515;
    background: #151515;
}
.btn-slide{
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px 0 0 8px;
    background-color: #22252A;
    box-shadow: -4px 4px 16px 0 rgba(0, 0, 0, 0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 19L8 12L15 5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
}
.btn-slide.btn-slide-next{
    transform: scaleX(-1);
}
.btn-slide:hover{
    background-color: #878B91;
}
main {

}

main.main{
    overflow: hidden;
    background-color: #000 !important;
}
.name{
    border-radius: 8px;
    background: #FFEFDB;
    backdrop-filter: blur(16px);
    padding: 4px 8px;
    display: flex;
    align-items: center;
    max-width: max-content;
    color: #E70;
    text-align: center;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 120%; /* 26.4px */
    letter-spacing: -1.1px;
}
.breadcrumps{
    display: flex;
    align-items: center;
    gap: 4px;
}
.breadcrumps li{
    display: flex;
    align-items: center;
    gap: 4px;
}
.breadcrumps li a{
    display: flex;
    align-items: center;
    color: #878B91;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 150%;
    line-height: normal;
    transition: all .2s ease;
}
.breadcrumps li + li::before{
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 2.5L8 6L4.5 9.5' stroke='%23878B91' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 12px;
    height: 12px;
    min-width: 12px;
}
.breadcrumps li:last-child a,
.breadcrumps li a:hover,
.breadcrumps li a.active{
    color: #151515;
}
.breadcrumps.breadcrumps-white li a,
.breadcrumps.breadcrumps-white li + li::before{
    color: #D5D5D5;
}
.breadcrumps.breadcrumps-white li a:hover,
.breadcrumps.breadcrumps-white li a.active{
    color: #F9F9F9;
}
@media (max-width: 1280px) {
    .container{
        max-width: 1024px;
    }
}
@media (max-width: 1024px) {
    .container{
        max-width: 768px;
    }
}
@media (max-width: 768px) {
    .container{
        max-width: 480px;
    }
    .name{
        font-size: 18px;
        letter-spacing: -0.9px;
    }
    .slider-pagination-second span{
        min-width: 20px;
        width: 20px;
    }

}

/* hero */
.hero{
    position: relative;
}
.hero__slide .swiper-wrapper{
    align-items: stretch;
}
.hero__slide{
    height: auto;
    padding: 72px 0;
    position: relative;
    z-index: 1;
    min-height: 516px;
    display: flex;
    align-items: end;
    justify-content: start;
}
.hero__slide-bg{
    display: flex;
    align-items: center;
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero__slide-bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero__slide-bg::before{
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    max-width: 80%;
    background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
}
.hero__slide-content{
    max-width: 572px;
}
.hero__slide-title{
    color: #F5F7FA;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 120%; /* 57.6px */
    letter-spacing: -2.4px;
}
.hero__slide-descr{
    color: #C7CCD1;
    font-size: 20px;
    font-weight: 400;
    line-height: 130%; /* 26px */
    margin-top: 16px;
}
.hero__slide-btn{
    margin-top: 48px;
    margin-left: 106px;
}
.hero__inner .container{
    position: absolute;
    z-index: 10;
    bottom: 8px;
    left: 0;
    right: 0;
}
.hero__nav{
    display: flex;
    align-items: center;
    gap: 2px;
    position: absolute;
    top: -102px;
}
.hero__slide-center .hero__slide-content{
    margin: 0 auto;
    text-align: center;
}
.hero__slide-center .hero__slide-btn{
    margin: 48px auto 0;
}
.hero__slide-right .hero__slide-content{
    margin: 0 0 0 auto;
    text-align: right;
}
.hero__slide-right .hero__slide-btn{
    margin: 48px 0 0 auto;
}
.hero__slide-right .hero__slide-bg::before{
    transform: scaleX(-1);
    right: 0;
    left: initial;
}
.hero__slide-center .hero__slide-bg::before{
    inset: 0;
    max-width: 100%;
    background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
}
@media (max-width: 1280px) {

}
@media (max-width: 1024px) {

}
@media (max-width: 768px) {
    .hero__slide{
        padding: 40px 0;
    }
    .hero__slide-title {
        font-size: 32px;
        letter-spacing: -1.6px;
    }
    .hero__slide-descr{
        font-size: 16px;
    }
    .hero__slide-bg::before {
        top: 138px;
        max-width: 100%;
        background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);
    }
    .hero__slide-btn {
        margin-top: 24px;
        margin-left: 0;
    }
    .hero__nav {
        display: flex;
        align-items: center;
        gap: 2px;
        position: absolute;
        top: -70px;
        right: 16px;
    }
    .hero__slide-right .hero__slide-btn {
        margin: 48px 100px 0 auto;
    }
}
@media (max-width: 480px) {

}
/* categories */
.categories{
    padding: 104px 0;
    background: #F7F9FB;
}

.categories__title{
    font-family: "IBM Plex Mono", sans-serif;
    color: #61656B;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%; /* 19.2px */
    letter-spacing: -0.8px;
}
.categories__block{
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.categories__item{
    height: auto;
    overflow: hidden;
    border-radius: 8px;
    background: #E1E6EB;
    backdrop-filter: blur(16px);
    transition: all .2s ease;
}
.categories__item-content{
    padding: 7px 8px;
    display: flex;
    align-items: center;
    min-height: 66px;
}
.categories__item-image{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
}
.categories__item-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all .3s ease;
}
.categories__item:hover .categories__item-image img{
    transform: scale(1.1);
}
.categories__item-title{
    color: #151515;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 120%; /* 26.4px */
    letter-spacing: -1.1px;
}
.categories__item:hover{
    background-color: #D0D6DC;
}
.categories__item-list{
    background: rgba(21, 21, 21, 0.50);
    padding: 8px 64px 8px 8px;
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: start;
    opacity: 0;
    transition: all .2s ease;
    overflow: auto;
}
.categories__item-top{
    height: 254px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.categories__item-list li{
    border-radius: 8px;
    background: rgba(21, 21, 21, 0.70);
    backdrop-filter: blur(8px);
    padding: 1px 4px 3px;
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}
.categories__item:hover .categories__item-list{
    opacity: 1;
}
.categories__item-list::after{
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    top: 8px;
    right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M34 34V14H14M34 14L14 34' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
@media (max-width: 1280px) {
    .categories__block {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1024px) {

}
@media (max-width: 768px) {
    .categories{
        padding: 64px 0;
    }
    .categories__block {
        grid-template-columns: 1fr 1fr;
    }
    .categories__item-top {
        height: 112px;
        width: 100%;
        position: relative;
    }
    .categories__item-content {
        padding: 5px 8px;
        min-height: 48px;
    }
    .categories__item-title {
        font-size: 16px;
        letter-spacing: -0.8px;
    }
    .categories__item-list::after {
        width: 24px;
        height: 24px;
    }
    .categories__item-list li {
        font-size: 10px;
    }
}
@media (max-width: 480px) {

}
/* prodslider */
.prodslider{
    padding: 104px 0 56px;
}
.prodslider__title{
    color: #151515;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 120%; /* 24px */
    letter-spacing: -1px;
}
.prodslider__slider{
    margin-top: 16px;
}
.prodslider__slider .swiper-wrapper{
    align-items: stretch;
}
.prodslider__slide{
    border-radius: 8px;
    overflow: hidden;
    height: auto;
    display: flex;
    flex-direction: column;
}
.prodslider__slider-pagination{
    margin-top: 32px;
}
.prodslider__slide-top{
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    background-color: #F5F7FA;
    position: relative;
    height: 272px;
    width: 100%;
}
.prodslider__slide-top img{
    width: 100%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.prodslider__slide-top span{
    position: absolute;
    top: 8px;
    left: 8px;
    border-radius: 4px;
    background: #FFEFDB;
    padding: 1px 4px;
    color: #E70;
    font-size: 12px;
    font-weight: 400;
    line-height: 150%; /* 18px */
}
.prodslider__slide-content{
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.prodslider__slide-price{
    margin-top: auto;
    margin-bottom: 12px;
    color: #151515;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 130%; /* 20.8px */
    letter-spacing: -0.48px;
}
.prodslider__slide-title{
    display: inline-block;
    margin-bottom: 8px;
}
.prodslider__slide-title h3{
    color: #151515;
    font-size: 16px;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
}
.prodslider__slide-title h3:hover{
    color: #E70;
}
.prodslider__slide-btn{
    max-width: 100%;
}
@media (max-width: 1280px) {

}
@media (max-width: 1024px) {

}
@media (max-width: 768px) {
    .prodslider{
        padding: 64px 0;
    }
    .prodslider__title {
        font-size: 18px;
        font-weight: 400;
        letter-spacing: normal;
    }
    .prodslider__slide-content {
        padding: 9px 4px 4px;
    }
    .prodslider__slide-top{
        height: 164px;
    }
    .prodslider__slide-top span{
        top: 4px;
        left: 2px;
    }
    .prodslider__slide-title h3 {
        font-size: 14px;
        line-height: 150%;
    }
    .prodslider__slide-price{
        margin-bottom: 8px;
    }
    .prodslider__slider-pagination{
        margin-top: 24px;
    }
}
@media (max-width: 480px) {

}
/* reserv */
.reserv{
    padding: 56px 0 104px;
}
.reserv__content{
    min-height: 380px;
    background-image: url("data:image/svg+xml,%3Csvg width='498' height='380' viewBox='0 0 498 380' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3'%3E%3Cline x1='1.52557e-05' y1='253.5' x2='498' y2='253.5' stroke='%2361656B'/%3E%3Cline x1='3.05176e-05' y1='379.5' x2='498' y2='379.5' stroke='%2361656B'/%3E%3Cline x1='1.52557e-05' y1='152.5' x2='498' y2='152.5' stroke='%2361656B'/%3E%3Cline x1='1.52557e-05' y1='84.5' x2='498' y2='84.5' stroke='%2361656B'/%3E%3Cline x1='1.52557e-05' y1='32.5' x2='498' y2='32.5' stroke='%2361656B'/%3E%3Cline x1='1.52557e-05' y1='11.5' x2='498' y2='11.5' stroke='%2361656B'/%3E%3Cline x1='160.5' y1='9.96791e-09' x2='160.5' y2='380' stroke='%2361656B'/%3E%3Cline x1='0.5' y1='9.96791e-09' x2='0.499971' y2='380' stroke='%2361656B'/%3E%3Cline x1='288.5' y1='9.96791e-09' x2='288.5' y2='380' stroke='%2361656B'/%3E%3Cline x1='376.5' y1='9.96791e-09' x2='376.5' y2='380' stroke='%2361656B'/%3E%3Cline x1='442.5' y1='9.96791e-09' x2='442.5' y2='380' stroke='%2361656B'/%3E%3Cline x1='469.5' y1='9.96791e-09' x2='469.5' y2='380' stroke='%2361656B'/%3E%3Cline x1='484.5' y1='9.96791e-09' x2='484.5' y2='380' stroke='%2361656B'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    background-color: #151515;
    backdrop-filter: blur(16px);
    padding: 16px 64px 16px 16px;
    height: auto;
    display: flex;
    flex-direction: column;
}
.reserv__title{
    color: #FFF;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 120%; /* 48px */
    letter-spacing: -2px;
}
.reserv__descr{
    margin-bottom: 24px;
    margin-top: 16px;
    color: #C7CCD1;
    font-size: 18px;
    font-weight: 400;
    line-height: 150%; /* 27px */
}
.reserv__btn{
    max-width: 240px;
    margin-top: auto;
    height: 56px;
}
.reserv__image{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F7FA;
}
.reserv__image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.hide-pc{
    display: none;
}
.reserv__inner{
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    background-color: #F5F7FA;
}
@media (max-width: 1280px) {
    .reserv__inner {
        grid-template-columns: 1fr 1.7fr;
    }
}
@media (max-width: 1024px) {
    .reserv__inner{
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .reserv{
        padding: 32px 0 64px;
    }
    .reserv__title {
        font-size: 32px;
        letter-spacing: -1.6px;
    }
    .reserv__descr{
        font-size: 16px;
    }
    .reserv__content{
        min-height: auto;
    }
    .reserv__image img.hide-pc {
        display: inline-block;
    }
    .reserv__image img.hide-pc + img{
        display: none;
    }
}
@media (max-width: 480px) {

}
/* missions */
.missions{
    padding: 104px 0;
    background: #F7F9FB;
}
.missions__inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    max-width: 976px;
    margin: 0 auto;
    width: 100%;
}
.missions__name{
    text-align: center;
}
.missions__descr{
    text-align: center;
    color: #61656B;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -2px;
}
.missions__descr mark{
    color: #151515;
}
@media (max-width: 1280px) {

}
@media (max-width: 1024px) {

}
@media (max-width: 768px) {
    .missions{
        padding: 64px 0;
    }
    .missions__inner{
        gap: 16px;
    }
    .missions__descr {
        font-size: 22px;
        letter-spacing: -1.1px;
    }
}
@media (max-width: 480px) {

}
/* quality */
.quality{
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    height: 611px;
    background-color: #1A1A1A;
}
.quality__image{
    display: flex;
    align-items: center;
    overflow: hidden;
}
.quality__image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.quality__inner{
    padding: 104px 135px 104px 88px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.quality .container{
    padding: 0;
    height: auto;
    max-width: 100%;
}
.quality__name{
    padding: 4px 8px;
    max-width: max-content;
    display: flex;
    align-items: center;
    border-radius: 8px;
    background: #2D3239;
    backdrop-filter: blur(16px);
    color: #C7CCD1;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%; /* 19.2px */
    letter-spacing: -0.8px;
    margin-bottom: 8px;
}
.quality__title{
    max-width: 403px;
    color: #FFF;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 130%; /* 62.4px */
    letter-spacing: -2.4px;
}
.quality__descr{
    max-width: 403px;
    margin-top: 16px;
    margin-bottom: 24px;
    color: #C7CCD1;
    font-size: 18px;
    font-weight: 400;
    line-height: 150%; /* 27px */
}
.quality__btn{
    margin-top: auto;
    height: 56px;
    gap: 10px;
}
@media (max-width: 1280px) {

}
@media (max-width: 1024px) {

}
@media (max-width: 768px) {
    .quality {
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
    }
    .quality__image{
        height: 262px;
    }
    .quality__inner{
        padding: 64px 0;
    }
    .quality .container {
        padding: 0 16px;
        max-width: 480px;
    }
    .quality__title {
        max-width: 100%;
        font-size: 32px;
        letter-spacing: -1.6px;
    }
    .quality__descr {
        max-width: 100%;
        margin-top: 24px;
        margin-bottom: 24px;
        font-size: 16px;
    }
}
@media (max-width: 480px) {

}
/* advantages */
.advantages{
    padding: 104px 0;
}
.advantages__name{
    margin: 0 auto 16px;
}
.advantages__title{
    color: #151515;
    text-align: center;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 130%; /* 52px */
    letter-spacing: -2px;
}
.advantages__block{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 48px;
}
.advantages__block{
    counter-reset: advantages;
}
.advantages__item{
    counter-increment: advantages;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: start;
    border-radius: 8px;
    background: #F7F9FB;
}
.advantages__item::before{
    content: '[' counter(advantages, decimal-leading-zero) ']';
    color: #C7CCD1;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 120%; /* 19.2px */
    letter-spacing: -0.8px;
}
.advantages__item-title{
    color: #151515;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 120%; /* 28.8px */
    letter-spacing: -1.2px;
}
.advantages__item-descr{
    color: #474B52;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%; /* 21px */
    margin-top: auto;
}
@media (max-width: 1280px) {

}
@media (max-width: 1024px) {
    .advantages__block{
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 768px) {
    .advantages{
        padding: 64px 0;
    }
    .advantages__title {
        font-size: 28px;
        letter-spacing: -1.4px;
    }
    .advantages__block {
        grid-template-columns: 1fr;
        margin-top: 24px;
    }
    .advantages__item::before{
        content: none;
    }
    .advantages__item-title{
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: space-between;
        font-size: 20px;
        letter-spacing: -1px;
        width: 100%;
    }
    .advantages__item-title::after {
        content: '[' counter(advantages, decimal-leading-zero) ']';
        color: #C7CCD1;
        font-family: "IBM Plex Mono", sans-serif;
        font-size: 16px;
        font-weight: 300;
        line-height: 120%;
        letter-spacing: -0.8px;
    }
}
@media (max-width: 480px) {

}
/* videoblock */
.videoblock__start{
    position: relative;
    padding: 32px 0;
    z-index: 1;
}
.videoblock__inner{
    height: 580px;
}
.videoblock__image{
    display: flex;
    align-items: center;
    position: absolute;
    z-index: -1;
    inset: 0;
}
.videoblock__image::before{
    content: '';
    z-index: 1;
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(38, 30, 26, 0.20) 0%, rgba(38, 30, 26, 0.20) 100%);
}
.videoblock__image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.videoblock__top{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
}
.videoblock__title{
    color: #FFF;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 130%; /* 62.4px */
    letter-spacing: -2.4px;
}
.videoblock__link{
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px;
    border-radius: 4px;
    background: #1A1A1A;
    color: #F5F7FA;
    font-size: 20px;
    font-weight: 400;
    line-height: 120%; /* 24px */
}
.videoblock__link:not(:hover){
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
.videoblock__block{
    margin-top: -24px;
    padding: 40px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    border-radius: 8px;
    background: #F5F7FA;
    position: relative;
    z-index: 10;
}
.videoblock__item{
    border-radius: 4px;
    background: #EEF2F6;
    padding: 4px 16px;
    display: flex;
    align-items: center;
    color: #61656B;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 130%; /* 23.4px */
    letter-spacing: -0.9px;
}
@media (max-width: 1280px) {

}
@media (max-width: 1024px) {

}
@media (max-width: 768px) {
    .videoblock__inner{
        height: 480px;
    }
    .videoblock__start {
        padding: 16px 0 40px;
    }
    .videoblock__top{
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
    .videoblock__title {
        font-size: 32px;
        letter-spacing: -1.6px;
    }
    .videoblock__link{
        margin: 0 auto;
    }
    .videoblock__block {
        margin-top: -24px;
        padding: 24px 16px;
        flex-direction: column;
    }
}
@media (max-width: 480px) {

}
/* faq */
.faq{
    padding: 104px 0;   
}
.faq__inner{
    display: flex;
    align-items: start;
    gap: 24px;
    justify-content: space-between;
}
.faq__name{
    margin-bottom: 8px;
    color: #61656B;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%; /* 19.2px */
    letter-spacing: -0.8px;
}
.faq__title{
    color: #151515;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 130%; /* 62.4px */
    letter-spacing: -2.4px;   
}
.faq__content{
    max-width: 385px;
    width: 100%;
}
.faq__block{
    width: 100%;
    max-width: 679px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: advantages;
}
.faq__item{
    counter-increment: advantages;
    transition: all .2s ease;
    border-bottom: 1px solid #C7CCD1;
}
.faq__item-title{
    color: #151515;
    font-size: 20px;
    font-weight: 400;
    line-height: 120%; /* 24px */
    padding: 16px 8px 16px 24px;
    display: flex;
    align-items: start;
    gap: 40px;
    justify-content: start;
    user-select: none;
    cursor: pointer;
}
.faq__item-title::before{
    content: '[' counter(advantages, decimal-leading-zero) ']';
    color: #ACB3BB;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 14.4px */
}
.faq__item-title::after{
    content: '';
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M9.33337 9.3335L22.6667 22.6668M9.33337 22.6668H22.6667V9.3335' stroke='%23878B91' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 32px;
    height: 32px;
    aspect-ratio: 1/1;
    margin-left: auto;
    flex-shrink: 0;
}
.faq__item.is-active .faq__item-title::after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M22.6667 22.6668V9.3335H9.33337M22.6667 9.3335L9.33337 22.6668' stroke='%232D3239' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.faq__item-descr{
    color: #474B52;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%; /* 21px */
    display: none;
    padding: 0 80px 16px 88px;
}
.faq__item.is-active{
    border-radius: 8px;
    background: #F5F7FA;
    border-color: transparent;
}
@media (max-width: 1280px) {

}
@media (max-width: 1024px) {
    .faq__content{
        max-width: 265px;
    }
}
@media (max-width: 768px) {
    .faq{
        padding: 64px 0;
    }
    .faq__inner{
        flex-direction: column;
        gap: 24px;
    }
    .faq__title {
        font-size: 32px;
        letter-spacing: -1.6px;
    }
    .faq__item-title {
        font-size: 16px;
        line-height: 150%;
        padding: 8px 8px 8px 16px;
        gap: 16px;
    }
    .faq__item-title::after {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }
    .faq__item-descr {
        padding: 0 48px 12px 56px;
    }
}
@media (max-width: 480px) {

}
/* joinus */
.joinus{
    padding: 104px 0;
    background: #F7F9FB;
}
.joinus__top{
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: space-between;
}
.joinus__title{
    color: #151515;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 120%; /* 24px */
    letter-spacing: -1px;
}
.joinus__link{
    color: #151515;
    font-size: 20px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 16px;
    line-height: 120%; /* 24px */
}
.joinus__link:not(:hover){
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
.joinus__slider{
    margin-top: 32px;
}
.joinus__slide{
    display: flex;
    align-items: center;
    overflow: hidden;
}
.joinus__slide img{
    width: 100%;
    height: auto;
}
@media (max-width: 1280px) {

}
@media (max-width: 1024px) {

}
@media (max-width: 768px) {
    .joinus{
        padding: 64px 0;
    }
    .joinus__top{
        flex-direction: column;
        gap: 16px;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 480px) {

}
/* partners */
.partners{
    padding: 104px 0;
}
.partners__title{
    color: #151515;
    text-align: center;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 130%; /* 52px */
    letter-spacing: -2px;
}
.partners__block{
    margin-top: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.partners__item{
    display: flex;
    align-items: center;
    width: 20%;
}
.partners__item img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (max-width: 1280px) {

}
@media (max-width: 1024px) {
    .partners__item {
        width: 33.33%;
    }
}
@media (max-width: 768px) {
    .partners{
        padding: 64px 0;
    }
    .partners__title {
        font-size: 32px;
        letter-spacing: -1.6px;
    }
    .partners__block{
        margin-top: 24px;
    }
    .partners__item {
        width: 50%;
    }
}
@media (max-width: 480px) {

}


/* contacts */
.contacts{
    padding: 24px 0 120px;
}
.contacts__inner{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
}
.contacts__title{
    color: #151515;
    font-size: 40px;
    font-weight: 500;
    line-height: 140%; /* 56px */
}
.contacts__descr{
    margin-top: 16px;
    color: #61656B;
    font-size: 16px;
    line-height: 150%; /* 24px */
}
.contacts__box{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #EEF2F6;
}
.contacts__block{
    display: flex;
    flex-direction: column;
}
.contacts__name{
    font-weight: 400;
    color: #ACB3BB;
    font-size: 12px;
    line-height: 150%; /* 18px */
    margin-bottom: 8px;
}
.contacts__link{
    display: inline-block;
    max-width: max-content;
}
.contacts__link:hover{
    text-decoration: underline;
}
.contacts__link + .contacts__link{
    margin-top: 4px;
}
.contacts__socials{
    display: flex;
    gap: 16px;
}
.contacts__socials-link{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EEF2F6;
    transition: all .2s ease;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
}
.contacts__socials-link:hover{
    background-color: #EEF2F6;
}
.contacts__form{
    padding: 48px;
    width: 100%;
    max-width: 570px;
    border-radius: 4px;
    background: #F5F7FA;
}
.contacts__form-title{
    color: #052947;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    line-height: 150%; /* 33px */
    letter-spacing: -0.66px;
}
.contacts__form-box{
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.contacts__form-input,
.contacts__form-textarea{
    border-radius: 8px;
    border: 1px solid #E1E6EB;
    background-color: #fff;
    padding: 8px 16px;
    height: 56px;
}
.contacts__form-input::placeholder{
    color: #878B91;
}
.contacts__form-textarea{
    height: 120px;
}
.contacts__form-btn{
    height: 56px;
    width: 100%;
    max-width: 240px;
    margin: 16px auto 0;
}
.contacts__content{
    width: 100%;
    max-width: 470px;
}
@media (max-width: 768px) {
    .contacts__inner{
        flex-direction: column;
        gap: 40px;
        margin-top: 16px;
    }
    .contacts {
        padding: 16px 0 80px;
    }
    .contacts__title {
        font-size: 26px;
        line-height: 140%;
        letter-spacing: -0.78px;
    }
    .contacts__box {
        margin-top: 32px;
        padding-top: 32px;
    }
    .contacts__form-title {
        font-size: 20px;
        letter-spacing: -0.54px;
    }
    .contacts__form {
        padding: 32px 24px;
    }
}


/* login */
.login{
    padding: 24px 0 120px;
}
.login__back{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #151515;
    font-size: 14px;
    line-height: 150%; /* 24px */
    transition: all .2s ease;
}
.login__back svg path{
    transition: all .2s ease;
}
.login__back:hover{
    color: #EE7700;
}
.login__back:hover svg path{
    stroke: #EE7700;
}
.login__inner{
    width: 100%;
    max-width: 370px;
    margin: 24px auto 0;
}
.login__title{
    color: #151515;
    text-align: center;
    font-family: "IBM Plex Mono", sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 120%; /* 48px */
    letter-spacing: -0.84px;
}
.login__subtitle{
    margin-top: 8px;
    text-align: center;
    color: #474B52;
    font-size: 16px;
    line-height: 150%; /* 24px */
}
.login__subtitle-link{
    font-size: 14px;
    color: #151515;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: all .2s ease;
}
.login__subtitle-link:hover{
    color: #EE7700;
}
.login__google{
    margin-top: 32px;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    height: 56px;
    border-radius: 100px;
    background: #F5F7FA;
    color: #151515;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%; /* 24px */
}
.login__google:hover{
    background: #EEF2F6;
}
.login__google svg{
    min-width: 32px;
}
.login__divider{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    color: #878B91;
    font-size: 14px;
    line-height: 150%; /* 21px */
}
.login__divider::before,
.login__divider::after{
    content: '';
    height: 1px;
    width: 100%;
    background-color: #E1E6EB;
}
.login__form{
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.login__field{
    position: relative;
}
.login__input{
    border-radius: 8px;
    border: 1px solid #E1E6EB;
    background-color: #fff;
    padding: 8px 16px;
    height: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #151515;
    font-size: 16px;
    line-height: 150%; /* 24px */
    transition: all .2s ease;
}
.login__input::placeholder{
    color: #878B91;
    font-size: 16px;
    line-height: 150%;
}
.login__input:focus{
    border-color: #ACB3BB;
}
.login__field:has(.login__eye) .login__input{
    padding-right: 48px;
}
.login__input[type="password"]:not(:placeholder-shown){
    letter-spacing: 2px;
}
.login__eye{
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    min-width: 16px;
    max-width: 16px;
}
.login__eye svg + svg,
.login__eye.is-active svg{
    display: none;
}
.login__eye.is-active svg + svg{
    display: block;
}
.login__eye svg path{
    transition: all .2s ease;
}
.login__eye:hover svg path{
    stroke: #EE7700;
}
.login__hint{
    margin-top: 12px;
    color: #61656B;
    font-size: 16px;
    line-height: 150%; /* 24px */
}
.login__row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.login__check{
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: #151515;
    font-size: 14px;
    line-height: 150%; /* 22.5px */
    user-select: none;
}
.login__check input{
    display: none;
}
.login__check span{
    display: block;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 4px;
    border: 1px solid #E1E6EB;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
    transition: all .2s ease;
}
.login__check:hover span{
    border-color: #ACB3BB;
}
.login__check input:checked + span{
    border-color: #F7891B;
    background-color: #F7891B;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.3333 4L6.00001 11.3333L2.66667 8' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.login__forgot{
    color: #151515;
    font-size: 14px;
    line-height: 150%; /* 22.5px */
    transition: all .2s ease;
}
.login__forgot:hover{
    color: #EE7700;
}
.login__captcha{
    margin-top: 8px;
    display: flex;
    justify-content: center;
}
.login__submit{
    margin-top: 8px;
    height: 56px;
    width: 100%;
    max-width: 100%;
}
.login__submit:disabled{
    background: #F5F7FA;
    color: #ACB3BB;
    cursor: default;
}
.login__policy{
    margin-top: 4px;
    color: #878B91;
    font-size: 14px;
    line-height: 150%; /* 21px */
}
.login__policy a{
    color: #151515;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: all .2s ease;
}
.login__policy a:hover{
    color: #EE7700;
}
.login__guest{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 56px;
    border-radius: 8px;
    border: 2px solid #151515;
    background-color: #fff;
    color: #151515;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px; /* 125% */
    transition: all .2s ease;
}
.login__guest:hover{
    background-color: #151515;
    color: #fff;
}
@media (max-width: 768px) {
    .login{
        padding: 16px 0 56px;
    }
    .login__inner{
        margin-top: 16px;
    }
    .login__title{
        font-size: 20px;
        letter-spacing: -0.6px;
    }
}
@media (max-width: 480px) {
    .login__google,
    .login__divider,
    .login__form{
        margin-top: 24px;
    }
}
@media (max-width: 374px) {
    .login__captcha{
        transform: scale(0.9);
        transform-origin: center top;
    }
}
/* ==========================================================================
   Бонусна програма
   ========================================================================== */
.bonus{
    padding: 24px 0 120px;
}
.bonus__inner{
    max-width: 970px;
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.bonus__title{
    width: 100%;
    color: #151515;
    font-size: 40px;
    font-weight: 500;
    line-height: 140%; /* 56px */
    text-align: center;
}
.bonus__hero{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 30px;
    border-radius: 4px;
    background: #151515;
    overflow: hidden;
}
.bonus__hero-content{
    flex: 0 0 auto;
    width: 570px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 0 24px 24px;
}
.bonus__hero-title{
    color: #FFF;
    font-family: "IBM Plex Mono", monospace;
    font-size: 28px;
    font-weight: 500;
    line-height: 120%; /* 33.6px */
    letter-spacing: -0.84px;
}
.bonus__hero-descr{
    color: #E1E6EB;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%; /* 24px */
}
.bonus__hero-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 8px;
    background: #EE7700;
    color: #FFF;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    font-weight: 500;
    line-height: 130%; /* 18.2px */
    letter-spacing: -0.42px;
    white-space: nowrap;
}
.bonus__hero-media{
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    overflow: hidden;
}
/* 493 / 370 wide, offset -62 / -22 — as in the Figma frame */
.bonus__hero-img{
    position: absolute;
    display: block;
    width: 133.24%;
    height: auto;
    max-width: none;
    left: -16.76%;
    top: -9.91%;
    pointer-events: none;
}
.bonus__how{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.bonus__how-title{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 18px;
    font-weight: 400;
    line-height: 150%; /* 27px */
    letter-spacing: -0.54px;
    text-align: center;
}
.bonus__list{
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.bonus__item{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 4px;
    background: #F5F7FA;
}
.bonus__item-num{
    color: #ACB3BB;
    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    font-weight: 300;
    line-height: 120%; /* 19.2px */
    letter-spacing: -0.8px;
}
.bonus__item-title{
    width: 100%;
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 22px;
    font-weight: 400;
    line-height: 130%; /* 28.6px */
    letter-spacing: -0.66px;
}
.bonus__item-descr{
    width: 100%;
    color: #61656B;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%; /* 21px */
}
.bonus__note{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.bonus__note-icon{
    display: block;
    width: 16px;
    height: 16px;
}
.bonus__note-text{
    color: #151515;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%; /* 21px */
    text-align: center;
}

/* ==========================================================================
   Умови доставки та оплати
   ========================================================================== */
.delivery{
    padding: 24px 0 120px;
}
.delivery__inner{
    margin-top: 24px;
}
.delivery__title{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 28px;
    font-weight: 500;
    line-height: 120%; /* 33.6px */
    letter-spacing: -0.84px;
    margin-bottom: 24px;
}
.delivery__group-title{
    display: none; /* заголовок секції тільки в мобільному макеті */
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 20px;
    font-weight: 500;
    line-height: 120%; /* 24px */
    letter-spacing: -0.6px;
}
.delivery__group + .delivery__group{
    margin-top: 32px;
}
.delivery__row{
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.delivery__card{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    border-radius: 4px;
    background: #F5F7FA;
    overflow: hidden;
}
.delivery__card-head{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 8px;
}
.delivery__card--loose .delivery__card-head{
    margin-bottom: 16px;
}
.delivery__card-icon{
    display: block;
    width: 24px;
    height: 24px;
}
.delivery__card-title{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 22px;
    font-weight: 400;
    line-height: 150%; /* 33px */
    letter-spacing: -0.66px;
}
.delivery__card-body{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.delivery__card-body--shipping{
    gap: 32px;
}
.delivery__card-body--payment{
    gap: 16px;
}
.delivery__block{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.delivery__block--logo{
    gap: 12px;
}
.delivery__label{
    width: 100%;
    color: #151515;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%; /* 21px */
}
.delivery__text{
    width: 100%;
    color: #151515;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%; /* 21px */
}
.delivery__price{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.delivery__accent{
    color: #EE7700;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    font-weight: 600;
    line-height: 150%; /* 21px */
    letter-spacing: 0.28px;
    text-transform: uppercase;
}
.delivery__np-logo{
    display: block;
    width: 132px;
    height: 47px;
}
.delivery__pickup{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.delivery__specs{
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.delivery__spec{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.delivery__spec-key{
    color: #61656B;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%; /* 21px */
}
.delivery__spec-val{
    color: #151515;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%; /* 21px */
}
.delivery__spec-link:hover{
    text-decoration: underline;
}
.delivery__map{
    position: relative;
    width: 100%;
    /* у макеті 186px, але нижче ~205px Google віддає статичний прев'ю-режим
       (кліком відкриває maps.google.com). 220px — мінімум для інтерактивної карти */
    height: 220px;
    border: 1px solid #E1E6EB;
    border-radius: 4px;
    overflow: hidden;
}
.delivery__map-frame{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.delivery__link{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 1px;
    border-bottom: 1px solid #151515;
    color: #151515;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%; /* 21px */
    transition: all .2s ease;
}
.delivery__link:hover{
    color: #EE7700;
    border-bottom-color: #EE7700;
}
.delivery__methods{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.delivery__method{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.delivery__text--bullet{
    position: relative;
    padding-left: 21px;
}
.delivery__text--bullet::before{
    content: '';
    position: absolute;
    left: 7px;
    top: 8.5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}
.delivery__pays{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-left: 22px;
}
.delivery__pay{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 35px;
    border: 0.5px solid #E1E6EB;
    border-radius: 4px;
    background: #FFF;
}
.delivery__pay-img{
    display: block;
}
.delivery__pay-img--liqpay{
    width: 17.2032px;
    height: 17.5003px;
}
.delivery__pay-img--visa{
    width: 40.2097px;
    height: 12.7678px;
}
.delivery__pay-img--mastercard{
    width: 31.4999px;
    height: 19.4217px;
}
.delivery__pay-img--np{
    width: 24.9126px;
    height: 24.5px;
}

/* ---------- Адаптив: Бонусна програма + Доставка ---------- */
@media (max-width: 1280px) {
    .bonus__hero-content{
        width: 52%;
    }
}
@media (max-width: 1024px) {
    .bonus,
    .delivery{
        padding: 20px 0 100px;
    }
    .bonus__title{
        font-size: 34px;
    }
    .bonus__hero-title{
        font-size: 24px;
        letter-spacing: -0.72px;
    }
    .bonus__item-title{
        font-size: 20px;
        letter-spacing: -0.6px;
    }
    .delivery__title{
        font-size: 24px;
        letter-spacing: -0.72px;
    }
    .delivery__card{
        padding: 20px;
    }
    .delivery__card-title{
        font-size: 20px;
        letter-spacing: -0.6px;
    }
    .delivery__specs{
        flex-wrap: wrap;
        gap: 16px 8px;
    }
    .delivery__spec{
        flex: 1 1 45%;
    }
}
@media (max-width: 768px) {
    .bonus,
    .delivery{
        padding: 16px 0 80px;
    }
    .bonus__inner{
        max-width: none;
        margin-top: 16px;
        gap: 24px;
    }
    .bonus__title{
        font-size: 26px;
        letter-spacing: -0.78px;
    }
    .bonus__hero{
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }
    .bonus__hero-content{
        width: 100%;
        gap: 8px;
        padding: 16px 16px 0;
    }
    .bonus__hero-title{
        font-size: 20px;
        letter-spacing: -0.6px;
    }
    .bonus__hero-badge{
        margin-top: 8px;
    }
    .bonus__hero-media{
        flex: 0 0 auto;
        width: 100%;
        height: 222px;
    }
    /* 443 / 343 wide, offset -42 / -17 */
    .bonus__hero-img{
        width: 129.15%;
        left: -12.24%;
        top: -7.66%;
    }
    .bonus__how-title{
        font-size: 16px;
        letter-spacing: -0.48px;
    }
    .bonus__list{
        flex-direction: column;
        gap: 8px;
    }
    .bonus__item{
        gap: 12px;
    }
    .bonus__item-title{
        font-size: 18px;
        letter-spacing: -0.54px;
    }
    .bonus__note{
        width: 100%;
    }

    .delivery__inner{
        margin-top: 16px;
    }
    .delivery__title{
        display: none;
    }
    .delivery__group-title{
        display: block;
        margin-bottom: 16px;
    }
    .delivery__group + .delivery__group{
        margin-top: 40px;
    }
    .delivery__row{
        flex-direction: column;
        gap: 16px;
    }
    .delivery__card{
        flex: 0 0 auto;
        width: 100%;
        padding: 16px;
    }
    .delivery__card-head,
    .delivery__card--loose .delivery__card-head{
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }
    .delivery__card-head--tight{
        gap: 8px;
    }
    .delivery__card-icon{
        flex: 0 0 auto;
    }
    .delivery__card-title{
        font-size: 18px;
        letter-spacing: -0.54px;
    }
    .delivery__card-body--shipping{
        gap: 24px;
    }
    .delivery__card-body--guarantee{
        gap: 16px;
    }
    .delivery__pickup{
        gap: 8px;
    }
    .delivery__specs{
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 8px;
    }
    .delivery__spec{
        flex: 0 0 auto;
        flex-direction: row;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }
    .delivery__spec-key{
        flex: 0 0 120px;
        width: 120px;
    }
    .delivery__spec-val{
        flex: 1 1 0;
        min-width: 0;
    }
}
@media (max-width: 480px) {
    .delivery__spec-key{
        flex-basis: 108px;
        width: 108px;
    }
}

/* ==========================================================================
   Landing / Camouflage — Маскування транспорту, техніки, споруд та обладнання
   ========================================================================== */

.visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Загальні елементи лендінгу ---------- */
.camo__section + .camo__section{
    margin-top: 120px;
}
.camo-title{
    margin: 0 auto;
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 32px;
    font-weight: 500;
    line-height: 130%;
    text-align: center;
}
.btn-lg{
    display: inline-flex;
    max-width: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #F7891B;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    transition: background .2s ease;
}
.btn-lg:hover{
    background: #EE7700;
}
.camo-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.camo-tags--column{
    flex-direction: column;
    align-items: flex-start;
}
.camo-tag{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 2px 8px;
    border-radius: 8px;
    background: #F5F7FA;
    color: #474B52;
    font-size: 16px;
    line-height: 150%;
}
.camo-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    height: 24px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #F7891B;
    color: #FFF;
    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: -0.48px;
}
.camo-badge--soft{
    color: #FFEFDB;
}

/* ---------- Слайдери ---------- */
.camo-slider{
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}
/* слайдер живе в межах контейнера — краї не обрізаються */
.camo-slider__viewport{
    width: 100%;
    overflow: visible;
}
.camo-slider__track{
    display: flex;
    align-items: stretch;
}
.camo-dots{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.camo-dots__item{
    flex: 0 0 auto;
    max-width: none;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #E1E6EB;
    transition: width .2s ease, height .2s ease, background .2s ease;
}
.camo-dots__item.is-active{
    width: 10px;
    height: 10px;
    background: #474B52;
}

/* ---------- Хедер ---------- */
.camo-header{
    border-bottom: 1px solid #EEF2F6;
}
.camo-header__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 80px;
}
.camo-header__brand{
    display: flex;
    align-items: center;
    gap: 24px;
}
.camo-header__logo{
    display: block;
    flex: 0 0 auto;
}
.camo-header__logo img{
    display: block;
    width: 107px;
    height: 30.94px;
}
.camo-header__divider{
    flex: 0 0 1px;
    width: 1px;
    height: 24px;
    background: #C7CCD1;
}
.camo-header__tagline{
    color: #151515;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
}
.camo-header__phone{
    flex: 0 0 auto;
    color: #151515;
    font-size: 15px;
    line-height: normal;
    transition: color .2s ease;
}
.camo-header__phone:hover{
    color: #F7891B;
}

/* ---------- Hero ---------- */
.camo-hero{
    display: flex;
    align-items: stretch;
    background: #151515;
    overflow: hidden;
}
.camo-hero__content{
    position: relative;
    flex: 0 0 57.143%;
    max-width: 57.143%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 475px;
    padding: 24px 120px 24px max(16px, calc((100% - 1170px) / 2));
    overflow: hidden;
}
/* декоративна сітка променів: inset -267.79% / -154.57% / -167.73% / -54.57% */
.camo-hero__pattern{
    position: absolute;
    left: -54.57%;
    top: -267.79%;
    width: 309.14%;
    height: 535.52%;
    max-width: none;
    pointer-events: none;
}
.camo-hero__back{
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    color: #FFF;
    font-size: 14px;
    line-height: 150%;
    transition: color .2s ease;
}
.camo-hero__back img{
    display: block;
    width: 16px;
    height: 16px;
}
.camo-hero__back:hover{
    color: #F7891B;
}
.camo-hero__body{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}
.camo-hero__text{
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.camo-hero__title{
    color: #FFF;
    font-family: "IBM Plex Mono", monospace;
    font-size: 40px;
    font-weight: 400;
    line-height: 130%;
}
.camo-hero__descr{
    color: #ACB3BB;
    font-size: 16px;
    line-height: 150%;
}
.camo-hero__btn{
    width: 260px;
}
.camo-hero__media{
    flex: 0 0 42.857%;
    max-width: 42.857%;
    background: #F5F7FA;
    overflow: hidden;
}
.camo-hero__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

/* ---------- Вступний блок ---------- */
.camo-intro__inner{
    position: relative;
    max-width: 970px;
    height: 349px;
    margin: 0 auto;
}
.camo-intro__media{
    position: absolute;
    left: 100px;
    top: 37px;
    width: 470px;
    height: 312px;
    border-radius: 8px;
    background: #F5F7FA;
    overflow: hidden;
}
.camo-intro__img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.camo-intro__fade{
    position: absolute;
    left: 273px;
    top: 0;
    width: 197px;
    height: 100%;
    background: linear-gradient(to left, #EDEDED 0%, rgba(237, 237, 237, 0) 100%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 60%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 60%);
}
.camo-intro__text{
    position: absolute;
    left: 500px;
    top: 0;
    width: 470px;
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 24px;
    line-height: 140%;
}

/* ---------- Основні завдання ---------- */
.camo-tasks__title{
    max-width: 570px;
}
.camo-tasks__list{
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 48px;
}
.camo-tasks__item{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 160px;
    padding: 16px;
    border-radius: 8px;
    background: #F7F9FB;
}
.camo-tasks__num{
    color: #ACB3BB;
    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.8px;
}
.camo-tasks__text{
    color: #151515;
    font-size: 18px;
    line-height: 150%;
}

/* ---------- Кожне рішення проєктується під ---------- */
.camo-design__inner{
    max-width: 970px;
    margin: 0 auto;
}
.camo-design__title{
    max-width: 770px;
}
.camo-design__list{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 48px;
}
.camo-design__card{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border: 1px solid #E1E6EB;
    border-radius: 16px;
    background: #FFF;
}
.camo-design__body{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.camo-design__name{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 22px;
    font-weight: 400;
    line-height: 140%;
}
.camo-design__icon{
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background: #FFEFDB;
}
.camo-design__icon img{
    display: block;
    width: 24px;
    height: 24px;
}

/* ---------- Типи об'єктів ---------- */
.camo-types{
    overflow: hidden;
}
.camo-types__title{
    max-width: 570px;
}
.camo-types__body{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    user-select: none;
    margin-top: 48px;
}
.camo-type{
    flex-shrink: 0;
    width: 370px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
    border: 1px solid #EEF2F6;
    border-radius: 24px;
}
.camo-type__media{
    position: relative;
    pointer-events: none;
    height: 220px;
    border-radius: 12px;
    background: #F5F7FA;
    overflow: hidden;
    user-select: none;
}
/* кадрування відтворює видиму область із макета */
.camo-type__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.camo-type__img--1{
    object-position: center bottom;
}
.camo-type__body{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.camo-type__name{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 22px;
    font-weight: 400;
    line-height: 140%;
}
.camo-types__dots{
    display: none; /* у десктопному макеті пагінації немає */
}
.camo-types__btn{
    width: 370px;
}

/* ---------- Що отримує клієнт / об'єкт ---------- */
.camo-benefits{
    position: relative;
    padding: 80px 0;
    background: #151515;
    overflow: hidden;
}
.camo-benefits__pattern{
    position: absolute;
    left: 50%;
    top: -1287px;
    width: 2543.73px;
    height: 2543.73px;
    max-width: none;
    transform: translateX(-50%) translateX(299.86px);
    pointer-events: none;
}
.camo-benefits__inner{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.camo-benefits__col{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.camo-benefits__title{
    color: #FFF;
    font-family: "IBM Plex Mono", monospace;
    font-size: 32px;
    font-weight: 500;
    line-height: 130%;
}
.camo-benefits__list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.camo-benefits__item{
    display: flex;
    align-items: center;
    gap: 16px;
    color: #E1E6EB;
    font-size: 16px;
    line-height: 150%;
}
.camo-benefits__marker{
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.camo-benefits__marker img{
    display: block;
    width: 9px;
    height: 9px;
}

/* ---------- Формати співпраці ---------- */
.camo-formats__panel{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding: 64px 48px;
    border-radius: 8px;
    background: #F5F7FA;
}
.camo-formats__head{
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}
.camo-formats__title,
.camo-formats__subtitle{
    max-width: 770px;
}
.camo-formats__subtitle{
    color: #1C1E21;
    font-size: 16px;
    line-height: 150%;
}
.camo-formats__body{
    display: flex;
    align-items: stretch;
    gap: 30px;
    width: 100%;
}
.camo-formats__option{
    flex: 0 0 370px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.camo-formats__sep{
    flex: 0 0 1px;
    width: 1px;
    align-self: stretch;
    background: #E1E6EB;
}
.camo-formats__option--complex{
    flex: 1 1 0;
    min-width: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
}
.camo-formats__main{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.camo-formats__heading{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.camo-formats__name{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 24px;
    font-weight: 500;
    line-height: 140%;
}
.camo-formats__descr{
    color: #474B52;
    font-size: 16px;
    line-height: 150%;
}
.camo-formats__link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #474B52;
    font-size: 16px;
    line-height: 150%;
    transition: color .2s ease;
}
.camo-formats__link img{
    display: block;
    width: 24px;
    height: 24px;
}
.camo-formats__link:hover{
    color: #151515;
}
.camo-steps{
    flex: 0 0 245px;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 19px;
    border-left: 1px solid #E1E6EB;
}
.camo-steps__item{
    position: relative;
    color: #151515;
    font-size: 18px;
    line-height: 150%;
}
.camo-steps__item::before{
    content: '';
    position: absolute;
    left: -22px;
    top: 10.5px;
    width: 6px;
    height: 6px;
    border-radius: 100px;
    background: #151515;
    box-shadow: 0 0 0 3px rgba(225, 230, 235, 0.4);
}
.camo-steps__item--last::before{
    left: -24px;
    top: 9px;
    width: 10px;
    height: 10px;
}

/* ---------- Реалізовані проєкти ---------- */
.camo-cases{
    overflow: hidden;
}
.camo-cases__slider{
    margin-top: 48px;
}
.camo-cases__track{
    align-items: center;
}
.camo-dots__item{
    cursor: pointer;
}
.camo-case{
    position: relative;
    flex-shrink: 0;
    height: 384px;
    border-radius: 16px;
    overflow: hidden;
}
.camo-case--wide{
    width: 570px;
}
.camo-case--narrow{
    width: 260px;
}
/* кадрування відтворює видиму область із макета */
.camo-case__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.camo-case__img--2{
    object-position: center 77%;
}
.camo-case__img--3{
    object-position: 64.6% center;
}
.camo-case__label{
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 4px 8px;
    border-radius: 8px;
    background: #F5F7FA;
    color: #151515;
    font-size: 12px;
    line-height: 150%;
}

/* ---------- Відео ---------- */
.camo-video__frame{
    position: relative;
    max-width: 770px;
    margin: 0 auto;
    aspect-ratio: 770 / 430;
    border-radius: 11.55px;
    background: #151515;
    overflow: hidden;
}
.camo-video__player{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.camo-video__play{
    position: absolute;
    display: block;
    max-width: none;
    left: 50.498%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 13.209%;
    padding: 0;
    border: 0;
    line-height: 0;
    transition: transform .2s ease;
}
.camo-video__play img{
    display: block;
    width: 100%;
    height: auto;
}
.camo-video__play:hover{
    transform: translate(-50%, -50%) scale(1.06);
}
.camo-video__frame.is-playing .camo-video__play{
    display: none;
}

/* ---------- Контакти ---------- */
.contact-cta{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 686px;
}
.contact-cta__bg{
    width: 100%;
    padding: 80px 0;
    background: #F5F7FA;
}
.contact-cta__info{
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 470px;
}
.contact-cta__head{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.contact-cta__title{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.84px;
}
.contact-cta__descr{
    color: #474B52;
    font-size: 16px;
    line-height: 150%;
}
.contact-cta__list{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.contact-cta__row{
    display: flex;
    align-items: center;
    gap: 8px;
}
.contact-cta__row img{
    display: block;
    width: 24px;
    height: 24px;
}
.contact-cta__link{
    color: #1C1E21;
    font-size: 18px;
    line-height: 150%;
    transition: color .2s ease;
}
.contact-cta__link:hover{
    color: #F7891B;
}
.contact-socials{
    display: flex;
    align-items: center;
    gap: 16px;
}
.contact-socials__link{
    display: block;
    width: 40px;
    height: 40px;
    transition: opacity .2s ease;
}
.contact-socials__link img{
    display: block;
    width: 40px;
    height: 40px;
}
.contact-socials__link:hover{
    opacity: .75;
}
.contact-cta__layer{
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.contact-cta__layer .container{
    display: flex;
    justify-content: flex-end;
}
.contact-form{
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 571px;
    padding: 64px;
    border: 1px solid #EEF2F6;
    border-radius: 16px;
    background: #FFF;
}
.contact-form__head{
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 426px;
    text-align: center;
}
.contact-form__title{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.84px;
}
.contact-form__descr{
    color: #474B52;
    font-size: 16px;
    line-height: 150%;
}
.contact-form__fields{
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.contact-form__field{
    display: block;
    width: 100%;
}
.contact-form__input,
.contact-form__textarea{
    width: 100%;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #F5F7FA;
    color: #1C1E21;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 16px;
    line-height: 150%;
    transition: border-color .2s ease;
}
.contact-form__input{
    height: 56px;
}
.contact-form__textarea{
    height: 112px;
    resize: none;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder{
    color: #9BA4B1;
}
/* довгі плейсхолдери (нативний input їх не переносить) обрізаємо коректно */
.contact-form__input::placeholder{
    text-overflow: ellipsis;
}
.contact-form__input:focus,
.contact-form__textarea:focus{
    outline: none;
    border-color: #F7891B;
}
.contact-form__input.is-invalid,
.contact-form__textarea.is-invalid{
    border-color: #E5484D;
}
.contact-form__btn{
    width: 256px;
}
.contact-form__status{
    display: none;
    margin-top: -24px;
    color: #2F9457;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
}
.contact-form__status.is-visible{
    display: block;
}

/* ---------- Футер ---------- */
.camo-footer{
    margin-top: 120px;
    border-top: 1px solid #EEF2F6;
}
.camo-footer__inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 80px;
}
.camo-footer__brand{
    display: flex;
    align-items: center;
    gap: 24px;
}
.camo-footer__logo{
    display: block;
    flex: 0 0 auto;
}
.camo-footer__logo img{
    display: block;
    width: 107px;
    height: 30.94px;
}
.camo-footer__divider{
    flex: 0 0 1px;
    width: 1px;
    height: 24px;
    background: #C7CCD1;
}
.camo-footer__tagline{
    color: #151515;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
}
.camo-footer__copy{
    color: #ACB3BB;
    font-size: 12px;
    line-height: 150%;
    text-align: center;
}
.camo-footer__phone{
    color: #151515;
    font-size: 15px;
    line-height: normal;
    transition: color .2s ease;
}
.camo-footer__phone:hover{
    color: #F7891B;
}

/* ==========================================================================
   Landing / Camouflage — адаптив
   ========================================================================== */
@media (max-width: 1280px) {
    .camo-hero__content{
        padding-right: 80px;
        padding-left: max(16px, calc((100% - 1024px) / 2 + 16px));
    }
    .camo-hero__title{
        font-size: 34px;
    }
    .camo-formats__panel{
        padding: 48px 32px;
    }
    .camo-formats__option--complex{
        gap: 32px;
    }
}

@media (max-width: 1024px) {
    .camo__section + .camo__section{
        margin-top: 80px;
    }
    .camo-title{
        font-size: 26px;
    }

    /* Хедер */
    .camo-header__inner{
        flex-direction: column;
        gap: 12px;
        height: auto;
        padding: 16px 0;
    }
    .camo-header__brand{
        flex-direction: column;
        gap: 12px;
    }
    .camo-header__divider{
        display: none;
    }
    .camo-header__tagline{
        font-size: 16px;
        line-height: 150%;
        text-align: center;
    }
    .camo-header__phone{
        font-size: 16px;
    }

    /* Hero */
    .camo-hero{
        flex-direction: column;
    }
    .camo-hero__content{
        flex: 0 0 auto;
        max-width: none;
        gap: 16px;
        height: auto;
        padding: 24px;
    }
    .camo-hero__pattern{
        left: -304.99%;
        top: -318.39%;
        width: 809.79%;
        height: 636.63%;
    }
    .camo-hero__body{
        gap: 32px;
    }
    .camo-hero__title{
        font-size: 32px;
    }
    .camo-hero__btn{
        width: 100%;
    }
    .camo-hero__media{
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
        height: 336px;
    }

    /* Вступний блок */
    .camo-intro__inner{
        position: static;
        display: flex;
        flex-direction: column;
        gap: 32px;
        max-width: none;
        height: auto;
    }
    .camo-intro__text{
        position: static;
        order: -1;
        width: auto;
        font-size: 22px;
    }
    .camo-intro__media{
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: 228px;
    }
    .camo-intro__img{
        object-position: left center;
    }
    .camo-intro__fade{
        left: 72.6%;
        right: 0;
        width: auto;
    }

    /* Основні завдання */
    .camo-tasks__title,
    .camo-design__title,
    .camo-types__title,
    .camo-cases__title,
    .camo-formats__title{
        max-width: none;
    }
    .camo-tasks__list{
        flex-direction: column;
        margin-top: 32px;
    }
    .camo-tasks__item{
        flex: 0 0 auto;
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: space-between;
        min-height: 0;
    }
    .camo-tasks__text{
        flex: 1 1 0;
        min-width: 0;
    }

    /* Кожне рішення */
    .camo-design__inner{
        max-width: none;
    }
    .camo-design__list{
        flex-direction: column;
        align-items: stretch;
        margin-top: 32px;
    }
    .camo-design__card{
        flex: 0 0 auto;
        gap: 24px;
    }
    .camo-design__body{
        gap: 12px;
    }
    .camo-design__name{
        font-size: 20px;
        line-height: 130%;
    }

    /* Типи об'єктів */
    .camo-types__body{
        gap: 32px;
        margin-top: 32px;
    }
    .camo-type{
        width: 100%;
    }
    .camo-types__dots{
        display: flex;
    }
    .camo-types__btn{
        width: 100%;
    }

    /* Що отримує клієнт / об'єкт */
    .camo-benefits{
        padding: 64px 0;
    }
    .camo-benefits__inner{
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
        padding: 0 8px;
    }
    .camo-benefits__col{
        gap: 24px;
    }
    .camo-benefits__title{
        font-size: 26px;
    }

    /* Формати співпраці */
    .camo-formats__panel{
        gap: 32px;
        padding: 24px;
    }
    .camo-formats__head{
        gap: 8px;
    }
    .camo-formats__body{
        flex-direction: column;
        gap: 32px;
    }
    .camo-formats__option{
        gap: 12px;
    }
    .camo-formats__main{
        gap: 12px;
    }
    .camo-formats__name{
        font-size: 22px;
    }
    .camo-badge{
        font-size: 14px;
        letter-spacing: -0.42px;
        color: #FFEFDB;
    }
    .camo-formats__option{
        flex: 0 0 auto;
        width: 100%;
    }
    .camo-formats__sep{
        flex: 0 0 1px;
        width: 100%;
        height: 1px;
        align-self: auto;
    }
    .camo-formats__option--complex{
        flex-direction: column;
        gap: 24px;
    }
    .camo-formats__main{
        width: 100%;
    }
    .camo-steps{
        flex: 0 0 auto;
        align-self: stretch;
        width: 100%;
    }

    /* Реалізовані проєкти */
    .camo-cases__slider{
        gap: 32px;
        margin-top: 32px;
    }
    .camo-cases__track{
        gap: 30px;
    }
    .camo-case{
        height: 205px;
    }
    .camo-case--wide,
    .camo-case--narrow{
        width: 305px;
    }
    .camo-cases__track{
        align-items: stretch;
    }

    /* Контакти */
    .contact-cta{
        display: block;
        min-height: 0;
    }
    .contact-cta__bg{
        padding: 40px 0 240px;
    }
    .contact-cta__info{
        gap: 32px;
        max-width: none;
        padding: 0 8px;
    }
    .contact-cta__head{
        gap: 16px;
    }
    .contact-cta__title,
    .contact-form__title{
        font-size: 22px;
        line-height: 140%;
        letter-spacing: 0;
    }
    .contact-cta__layer{
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin-top: -200px;
        pointer-events: auto;
    }
    .contact-cta__layer .container{
        display: block;
    }
    .contact-form{
        gap: 32px;
        width: 100%;
        padding: 40px 16px;
    }
    .contact-form__head{
        max-width: none;
    }
    .contact-form__btn{
        width: 100%;
    }
    .contact-form__status{
        margin-top: -16px;
    }

    /* Футер */
    .camo-footer{
        margin-top: 80px;
    }
    .camo-footer__inner{
        flex-direction: column;
        gap: 24px;
        height: auto;
        padding: 32px 0 40px;
    }
    .camo-footer__brand{
        flex-direction: column;
        gap: 12px;
    }
    .camo-footer__divider{
        display: none;
    }
    .camo-footer__tagline{
        font-size: 18px;
        text-align: center;
    }
    .camo-footer__phone{
        order: 2;
        font-size: 15px;
    }
    .camo-footer__copy{
        order: 3;
        margin-top: 16px;
    }
}

@media (max-width: 374px) {
    /* дуже вузькі екрани: лише те, що інакше не вміщається */
    .camo-case--wide,
    .camo-case--narrow{
        width: 88%;
    }
}

/* ==========================================================================
   Співпраця
   ========================================================================== */
.coop{
    padding: 24px 0 120px;
}
.coop__title{
    margin-top: 24px;
    color: #151515;
    font-size: 40px;
    font-weight: 500;
    line-height: 140%; /* 56px */
    text-align: center;
}
.coop__body{
    margin-top: 32px;
}
.coop__body--second{
    margin-top: 80px;
}

/* ---------- Вступний блок ---------- */
.coop-intro{
    display: flex;
    align-items: center;
    gap: 30px;
    height: 352px;
    border-radius: 4px;
    background: #F5F7FA;
    overflow: hidden;
}
.coop-intro__content{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0 24px 24px;
}
.coop-intro__title{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.84px;
}
.coop-intro__text{
    color: #2D3239;
    font-size: 16px;
    line-height: 150%;
}
.coop-intro__media{
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    overflow: hidden;
}
/* кадрування відтворює видиму область із макета */
.coop-intro__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 39%;
}

/* ---------- Секція з картками ---------- */
.coop-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}
.coop-section--dist{
    margin-top: 80px;
}
.coop-section--b2b + .coop-faq{
    margin-top: 80px;
}
.coop-section__title{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 28px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.84px;
    text-align: center;
}
.coop-cards{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}
.coop-card{
    flex: 0 0 calc((100% - 16px) / 3);
    max-width: calc((100% - 16px) / 3);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 4px;
    background: #F5F7FA;
}
.coop-card__num{
    color: #ACB3BB;
    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: -0.8px;
}
.coop-card__name{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 22px;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.66px;
}
.coop-card__text{
    color: #61656B;
    font-size: 14px;
    line-height: 150%;
}
.coop-card--lg .coop-card__text{
    font-size: 16px;
}
.coop-cards--b2b{
    flex-wrap: nowrap;
    align-items: stretch;
}
.coop-cards__media{
    flex: 1 1 0;
    min-width: 0;
    border-radius: 4px;
    overflow: hidden;
}
/* кадрування відтворює видиму область із макета */
.coop-cards__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 19% center;
}

/* ---------- Карта присутності ---------- */
.coop-map{
    position: relative;
    width: 100%;
    height: 514px;
    margin-top: 48px;
    overflow: hidden;
}
.coop-map__frame,
.coop-map__canvas{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.coop-map__canvas[hidden],
.coop-map__frame[hidden]{
    display: none;
}
/* картка точки у вспливаючому вікні Google Maps */
.coop-map__popup{
    padding: 2px 4px 4px;
    font-family: "IBM Plex Sans", sans-serif;
}
.coop-map__popup-title{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.48px;
}
.coop-map__popup-text{
    margin-top: 4px;
    color: #61656B;
    font-size: 14px;
    line-height: 150%;
}

/* ---------- FAQ ---------- */
.coop-faq{
    display: flex;
    align-items: flex-start;
    gap: 106px;
    padding: 104px 0;
}
.coop-faq__aside{
    flex: 0 0 385px;
    max-width: 385px;
    position: sticky;
    top: 24px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.coop-faq__label{
    color: #61656B;
    font-family: "IBM Plex Mono", monospace;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.8px;
}
.coop-faq__title{
    color: #151515;
    font-family: "IBM Plex Mono", monospace;
    font-size: 48px;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -2.4px;
}
.accordion{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.accordion__item{
    border-radius: 8px;
    transition: background .2s ease;
}
.accordion__heading{
    font-weight: inherit;
}
.accordion__trigger{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
    width: 100%;
    max-width: none;
    padding: 16px 8px 16px 24px;
    border-bottom: 1px solid #C7CCD1;
    color: inherit;
    text-align: left;
}
.accordion__num{
    flex: 0 0 24px;
    width: 24px;
    color: #ACB3BB;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 120%;
    transition: color .2s ease;
}
.accordion__question{
    flex: 1 1 0;
    min-width: 0;
    padding-top: 4px;
    color: #151515;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 120%;
    text-align: left;
}
.accordion__icon{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    background: url("../img/cooperation/faq-closed.svg") center / contain no-repeat;
}
.accordion__panel{
    padding: 12px 8px 16px 88px;
}
.accordion__answer{
    color: #474B52;
    font-size: 14px;
    line-height: 150%;
}
.accordion__item.is-open{
    background: #F5F7FA;
}
.accordion__item.is-open .accordion__trigger{
    padding-bottom: 0;
    border-bottom-color: transparent;
}
.accordion__item.is-open .accordion__num{
    color: #878B91;
}
.accordion__item.is-open .accordion__icon{
    background-image: url("../img/cooperation/faq-open.svg");
}
.accordion__trigger:hover .accordion__question{
    color: #F7891B;
}

/* контактний блок цієї сторінки вищий — у формі чотири поля */
.contact-cta--lg{
    min-height: 732px;
    margin-top: 32px;
}
.contact-cta__bullets{
    padding-left: 24px;
    list-style: disc;
    color: #474B52;
    font-size: 16px;
    line-height: 150%;
}

/* ==========================================================================
   Співпраця — адаптив
   ========================================================================== */
@media (max-width: 1280px) {
    .coop-faq{
        gap: 60px;
        padding: 80px 0;
    }
    .coop-faq__aside{
        flex-basis: 320px;
        max-width: 320px;
    }
    .coop-faq__title{
        font-size: 40px;
        letter-spacing: -2px;
    }
    .coop-intro{
        height: auto;
        min-height: 320px;
    }
}

@media (max-width: 1024px) {
    .coop{
        padding: 16px 0 80px;
    }
    .coop__title{
        margin-top: 16px;
        font-size: 26px;
        letter-spacing: -0.78px;
    }
    .coop__body{
        margin-top: 24px;
    }
    .coop__body--second,
    .coop-section--dist{
        margin-top: 64px;
    }

    /* Вступний блок */
    .coop-intro{
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        height: auto;
        min-height: 0;
    }
    .coop-intro__content{
        flex: 0 0 auto;
        gap: 8px;
        padding: 16px 16px 0;
    }
    .coop-intro__title{
        font-size: 20px;
        letter-spacing: -0.6px;
    }
    .coop-intro__media{
        flex: 0 0 auto;
        align-self: auto;
        height: 222px;
    }
    .coop-intro__img{
        object-position: center 44%;
    }

    /* Секції з картками */
    .coop-section{
        gap: 24px;
    }
    .coop-section__title--sm{
        font-size: 20px;
        letter-spacing: -0.6px;
    }
    .coop-cards,
    .coop-cards--b2b{
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    .coop-card{
        flex: 0 0 auto;
        max-width: none;
        gap: 12px;
    }
    .coop-card__name{
        font-size: 18px;
        letter-spacing: -0.54px;
    }
    .coop-cards__media{
        flex: 0 0 auto;
        height: 218px;
    }
    .coop-cards__img{
        object-position: 22% center;
    }

    /* Карта */
    .coop-map{
        height: 504px;
        margin-top: 64px;
    }

    /* FAQ */
    .coop-section--b2b + .coop-faq{
        margin-top: 64px;
    }
    .coop-faq{
        flex-direction: column;
        gap: 24px;
        padding: 64px 0;
    }
    .coop-faq__aside{
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
        position: static;
    }
    .coop-faq__title{
        font-size: 32px;
        letter-spacing: -1.6px;
    }
    .accordion{
        flex: 0 0 auto;
        width: 100%;
    }
    .accordion__trigger{
        gap: 16px;
        padding: 8px 8px 8px 16px;
    }
    .accordion__question{
        font-size: 16px;
        line-height: 150%;
    }
    .accordion__icon{
        flex-basis: 24px;
        width: 24px;
        height: 24px;
    }
    .accordion__panel{
        padding: 8px 8px 12px 56px;
    }

    /* Контакти */
    .contact-cta--lg{
        min-height: 0;
        margin-top: 64px;
    }
}

/* ==========================================================================
   RAROG 427 — сторінка партнерства з 427-ю бригадою
   ========================================================================== */

/* темна тема сторінки: хедер із макета інвертований,
   решта хедера/футера — стандартні, взяті з інших сторінок */
.body--r427{
    background: #000;
}
.body--r427 .header__free{
    background: #000;
}
.body--r427 .header__free-title{
    color: #FFF;
}
.body--r427 .header__end{
    border-top-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(0, 0, 0, 0.95) !important;
}
.body--r427 .header__top-menu a,
.body--r427 .header__top-tel,
.body--r427 .header__lang-selected,
.body--r427 .header__lang-item,
.body--r427 .header__menu a,
.body--r427 .header__menu-open{
    color: #FFF;
}
.body--r427 .header__logo img{
    filter: brightness(0) invert(1);
}
.body--r427 .header__end svg path{
    stroke: #FFF;
}
.body--r427 .header__search-input{
    background: rgba(255, 255, 255, 0.08);
    color: #FFF;
}
.body--r427 .header__search-input::placeholder{
    color: rgba(255, 255, 255, 0.5);
}

/* ---------- Hero ---------- */
.r427-hero{
    position: relative;
    height: 604px;
    overflow: hidden;
}
/* кадрування відтворює видиму область із макета і не залежить від ширини екрана */
.r427-hero__bg{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}
.r427-hero__fade{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 137px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%);
}
.r427-hero__side{
    position: absolute;
    top: 0;
    bottom: 0;
}
.r427-hero__side--left{
    left: 0;
    width: 504px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
}
.r427-hero__side--right{
    right: 0;
    width: 501px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
}
.r427-hero__content{
    position: absolute;
    left: 136px;
    top: 72px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.r427-hero__content{
    left: 23%;
}
@media (max-width: 1921px) {
.r427-hero__content{
    left: 20%;
}
}
@media (max-width: 1450px) {
.r427-hero__content{
    left: 10%;
}
}
@media (max-width: 1350px) {
.r427-hero__content{
    left: 7%;
}
}
.r427-hero__tagline{
    color: #FFF;
    font-family: "IBM Plex Mono", monospace;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}
.r427-hero__brands{
    display: flex;
    align-items: center;
    gap: 24px;
}
.r427-hero__brand{
    display: flex;
    align-items: flex-end;
    height: 94.882px;
}
.r427-hero__brand img{
    display: block;
    width: 241px;
    height: auto;
}
.r427-hero__plus{
    display: block;
    width: 28px;
    height: 28px;
}
.r427-hero__partner{
    display: block;
    width: 310px;
    height: 42.508px;
}

/* ---------- Контент ---------- */
.r427-body{
    padding-bottom: 120px;
}
.r427-body .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 120px;
}

/* Про партнерство */
.r427-about{
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 2px;
}
.r427-about__pic{
    position: relative;
    height: 374px;
    overflow: hidden;
}
.r427-about__pic--drone{
    flex: 0 0 33.675%;   /* 394 / 1170 */
    margin-right: 8px;
}
.r427-about__pic--operator{
    flex: 1 1 0;
    min-width: 0;
}
/* кадрування відтворює видиму область із макета */
.r427-about__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.r427-about__pic--drone .r427-about__img{
    object-position: 28.7% center;
}
.r427-about__pic--operator .r427-about__img{
    object-position: 27.9% center;
}
.r427-about__text{
    flex: 0 0 48.718%;   /* 570 / 1170 */
    margin-left: -5.47% !important; /* -64 / 1170 — текст заходить на фото */
    position: relative;
    color: #FFF;
    font-family: "IBM Plex Mono", monospace;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0.4px;
}
.r427-about__text-muted{
    color: #878B91;
}
span.r427-about__text-muted  {
    font-family: "IBM Plex Mono", monospace;
}

/* Заклик */
.r427-cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 572px;
    max-width: 100%;
}
.r427-cta__note{
    max-width: 370px;
    color: #878B91;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0.28px;
    text-align: center;
}
.r427-cta__card{
    position: relative;
    display: block;
    width: 100%;
    height: 178px;
    overflow: hidden;
}
.r427-cta__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28.1%;
    transition: transform .4s ease;
}
.r427-cta__shade{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 122px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}
.r427-cta__title{
    position: absolute;
    left: 8px;
    top: 149.5px;
    transform: translateY(-50%);
    color: #FFF;
    font-family: "IBM Plex Mono", monospace;
    font-size: 24px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    white-space: nowrap;
}
.r427-cta__arrow{
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    padding: 8px;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: background .2s ease;
}
.r427-cta__arrow img{
    display: block;
    width: 24px;
    height: 24px;
}
.r427-cta__card:hover .r427-cta__img{
    transform: scale(1.03);
}
.r427-cta__card:hover .r427-cta__arrow{
    background: rgba(0, 0, 0, 0.6);
}

.r427__mark{
    display: block;
    width: 28px;
    height: 30.667px;
}

/* ==========================================================================
   RAROG 427 — адаптив
   ========================================================================== */
@media (max-width: 1280px) {
    .r427-hero__content{
        left: max(16px, calc((100% - 1170px) / 2));
    }
    .r427-hero__tagline{
        font-size: 18px;
        white-space: normal;
    }
    .r427-about__text{
        font-size: 18px;
    }
    .r427-cta__title{
        font-size: 20px;
        letter-spacing: 0.4px;
    }
}

@media (max-width: 1024px) {
    /* Контент */
    .r427-body{
        padding-bottom: 80px;
    }
    .r427-body .container{
        gap: 80px;
    }

    .r427-about{
        flex-direction: column;
        align-items: stretch;
    }
    .r427-about__pic{
        flex: 0 0 auto;
        height: 200px;
        margin-right: 0;
        margin-top: 10px;
    }
    .r427-about__pic--operator{
        order: 1;
    }
    .r427-about__text{
        order: 2;
        flex: 0 0 auto;
        margin-left: 0 !important;
        margin-top: -32px !important;
        padding: 0 24px;
        font-size: 14px;
        letter-spacing: 0.28px;
    }
    .r427-about__pic--drone{
        order: 3;
        margin-top: 32px;
    }
    .r427-about__pic--operator .r427-about__img{
        object-position: center 51.2%;
    }
    .r427-about__pic--drone .r427-about__img{
        object-position: center bottom;
    }

    .r427-cta{
        width: 288px;
    }
    .r427-cta__note{
        max-width: none;
    }
    .r427-cta__card{
        height: 145px;
    }
    .r427-cta__img{
        object-position: center 27.2%;
    }
    .r427-cta__shade{
        height: 86px;
    }
    .r427-cta__title{
        left: 8.5px;
        top: auto;
        bottom: 30px;
        transform: translateY(50%);
        font-size: 22px;
        letter-spacing: 0.44px;
        white-space: normal;
    }
}

@media (max-width: 768px) {
    main {
        margin-top: -35px;
    }

    .r427-hero{
        height: 516px;
    }
    .r427-hero__bg{
        object-position: 50% 30%;
    }
    /* на мобільному фото переходить у чорне ще до низу героя */
    .r427-hero__fade{
        bottom: 0;
        height: 360px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 47%);
    }
    .r427-hero__side--left,
    .r427-hero__side--right{
        width: 100px;
    }
    .r427-hero__content{
        left: 16px;
        right: 16px;
        top: auto;
        bottom: 113px;
        align-items: center;
    }
    .r427-hero__tagline{
        max-width: 303px;
        font-size: 16px;
        letter-spacing: 0.32px;
        text-align: center;
    }
    .r427-hero__brands{
        gap: 12px;
    }
    .r427-hero__brand{
        height: 49px;
    }
    .r427-hero__brand img{
        width: 125px;
    }
    .r427-hero__plus{
        width: 14px;
        height: 14px;
    }
    .r427-hero__partner{
        width: 154px;
        height: 21px;
    }
}

/* телефон: точна геометрія фону з мобільного макета —
   бокс 830 x 478 зі зсувом -233 / -99 у фреймі 375 x 516 */
@media (max-width: 480px) {
    .r427-hero__bg{
        inset: auto;
        left: -62.13%;
        top: -19.19%;
        width: 221.33%;
        height: auto;
        max-width: none;
        object-fit: fill;
    }
}

@media (max-width: 374px) {
    /* вузькі телефони: зменшуємо пару логотипів, щоб вона не виходила за екран */
    .r427-hero__tagline{
        max-width: 100%;
    }
    .r427-hero__brands{
        gap: 8px;
    }
    .r427-hero__brand{
        height: 44px;
    }
    .r427-hero__brand img{
        width: 112px;
    }
    .r427-hero__plus{
        width: 12px;
        height: 12px;
    }
    .r427-hero__partner{
        width: 138px;
        height: 19px;
    }
    .r427-cta{
        width: 100%;
    }
}



/* ---------- Футер: блок «Конфігуратор» + прямі посилання ----------
   Самостійний блок із власними класами. Сторінки без цієї розмітки
   не змінюються — щоб додати його ще десь, достатньо скопіювати markup. */
.footer__promo{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 32px;
}
.footer__promo-row{
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}
.footer__promo-list{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}
.footer__promo-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #EEF2F6;
    font-size: 16px;
    line-height: 150%;
    transition: color .2s ease;
}
.footer__promo-link img{
    display: block;
    width: 20px;
    height: 20px;
}
.footer__promo-link:hover{
    color: #F7891B;
}
.footer__badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px 4px;
    border-radius: 4px;
    background: #2F9457;
    color: #FFF;
    font-size: 10px;
    line-height: 1;
}

@media (max-width: 1024px) {
    .footer__promo{
        gap: 24px;
        margin-bottom: 24px;
    }
    .footer__promo-list{
        gap: 16px 24px;
    }
}

.mobile_logo img {
    filter: brightness(0) invert(1);
}