/* partners */
.partners{
    padding: 22px 0 44px;
    overflow: hidden;
}
.partners .container{
    overflow: hidden;
}
.partners__title{
    margin: 0 0 14px;
    font-family: var(--third-family), sans-serif;
    font-size: 18px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--black);
}
.partnersSwiper{
    position: relative;
    padding-bottom: 26px;
    overflow: hidden;
}
.partnersSlide{
    background: #f7f7f7;
    border-radius: 12px;
    height: 218px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.partnersSlide img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display:block;
}
/* стрелки */
.partnersNav{
    position:absolute;
    inset: 0;
    height: 100%;
    pointer-events:none;
}
.partnersPrev, .partnersNext{
    pointer-events:auto;
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.08);
    cursor:pointer;
    display: none;
}
.partnersPrev{ left: 8px; }
.partnersNext{ right: 8px; }
/* простые стрелочки */
.partnersPrev::before,
.partnersNext::before{
    content:"";
    position:absolute;
    inset: 0;
    margin:auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(0,0,0,.65);
    border-bottom: 2px solid rgba(0,0,0,.65);
    transform: rotate(135deg);
}
.partnersNext::before{ transform: rotate(-45deg); }
/* scrollbar */
.partnersScrollbar{
    /*height: 2px;*/
    /*background: rgba(0,0,0,.15);*/
    /*border-radius: 999px;*/
    display: none !important;
}
.partnersScrollbar .swiper-scrollbar-drag{
    /*background: var(--orange);*/
    /*border-radius: 999px;*/
    display: none;
    visibility: hidden;
}
/* responsive */
@media (max-width: 1024px){
    .partnersSlide{ height: 190px; }
    .partnersPrev{ left: 6px; }
    .partnersNext{ right: 6px; }
}
@media (max-width: 560px){
    .partnersSlide{ height: 160px; padding: 14px; }
    .partnersPrev, .partnersNext{ display:none; } /* на мобиле чаще свайпают */
}
.menuOverlay__consult{
    width: auto;
}
/* ===== Overlay ===== */
.menuOverlay{
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 9999;
}
.menuOverlay::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:150px;
    height:100%;
    background: url("/assets/glow_menu-DYzMvn5T.png") left center no-repeat;
    background-size: cover;
    pointer-events:none;
    z-index:0;
}
.menuOverlay.is-open{
    opacity: 1;
    pointer-events: auto;
}
body.menu-open{
    overflow: hidden;
}
/* ===== Panel ===== */
.menuOverlay__panel{
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    max-width: 100vw;
    --right-rail: 44px;
    --row-gap: 14px;

    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--white);
    padding: 48px 70px 30px 200px;
}
/* ===== Top bar ===== */
.menuOverlay__top{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 10px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.menuOverlay__title{
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.1em;
    text-transform: uppercase;
    color: var(--black);
}
.menuOverlay__close{
    grid-column: 2;
    grid-row: 1; /* хрестик вище */
    justify-self: end;
    align-self: start;

    display:flex;
    justify-content:center;
    align-items:center;
    width:36px;
    height:36px;
    border:0;
    padding:0;
    background:transparent;
    cursor:pointer;
    z-index:5;
}
.menuOverlay__close:hover{
    opacity: 1;
}
.menuOverlay__close svg,
.menuOverlay__close img{
    width:22px;
    height:22px;
    display:block;
}
.menuOverlay .menuOverlay__consult{
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding-inline: 44px;
    white-space: nowrap;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.1em;
    text-transform: uppercase;
    color: var(--black);
    transform: translateX(24px);
}
.menuOverlay .menuOverlay__consult.btn--drift::before{
    left: 30px;
    transform: translateY(-50%) translateX(0);
}
.menuOverlay .menuOverlay__consult.btn--drift::after{
    right: 30px;
    transform: translateY(-50%) translateX(0);
}
.menuOverlay .menuOverlay__consult.btn--drift:hover::before{
    transform: translateY(-50%) translateX(-10px);
}
.menuOverlay .menuOverlay__consult.btn--drift:hover::after{
    transform: translateY(-50%) translateX(10px);
}
.menuOverlay .menuOverlay__consult.btn--drift::before,
.menuOverlay .menuOverlay__consult.btn--drift::after{
    color: var(--orange);
}
/* ===== Divider ===== */
.menuOverlay__divider{
    height: 1px;
    background: rgba(0, 0, 0, .15);
    margin: 18px 0 28px;
    position: relative;
    z-index: 1;
}
/* ===== Nav scroll area ===== */
.menuOverlay__nav{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    position: relative;
    z-index: 1;
}
.menuOverlay__nav::-webkit-scrollbar{
    width: 4px;
}
.menuOverlay__nav::-webkit-scrollbar-track{
    background: transparent;
}
.menuOverlay__nav::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.05);
    border-radius: 10px;
}
.menuOverlay__nav::-webkit-scrollbar-thumb:hover{
    background: rgba(0,0,0,.1);
}
/* ===== Main rows ===== */
.menuRow{
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--right-rail);
    column-gap: var(--row-gap);
    align-items: center;
    padding: 10px 0;
}
.menuRow .menuItem{
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    padding: 8px 0;
    text-decoration: none;
}
.menuItem__text{
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--black);
}
.menuItem__num{
    color: var(--lightgrey);
    font-size: 16px;
    line-height: 1;
    transform: translateY(-2px);
}
.menuRow .menuItem--toggle,
.menuToggle--decor{
    width: var(--right-rail);
    height: var(--right-rail);
    display: grid;
    place-items: center;
    justify-self: center;
}
.menuRow .menuItem--toggle{
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.menuToggle--decor{
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
}
.menuItem__icon{
    width: 28px;
    height: 28px;
    transition: transform .25s ease, translate .2s ease, opacity .2s ease;
    transform-origin: 50% 50%;
}
.menuRow .menuItem--toggle:hover .menuItem__icon,
.menuToggle--decor:hover .menuItem__icon{
    translate: 2px -2px;
    opacity: .9;
}
.menuRow .menuItem--toggle[aria-expanded="true"] .menuItem__icon{
    transform: rotate(180deg);
}
/* ===== Submenu ===== */
.menuSub{
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    transform: translateY(-6px);
    transition: max-height .35s ease, opacity .2s ease, transform .2s ease;
    will-change: max-height, opacity, transform;
    pointer-events: none;
}
.menuGroup:has(.menuItem--toggle[aria-expanded="true"]) > .menuSub{
    max-height: 2000px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    margin: 10px 0 18px;
}
.menuSub__item{
    list-style: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .2s ease;
}
.menuGroup:has(.menuItem--toggle[aria-expanded="true"]) .menuSub__item{
    opacity: 1;
    transform: translateY(0);
}
.menuSub__item a{
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: rgba(0,0,0,.8);
    line-height: 1.25;
}
.menuSub__item a:hover{
    color: rgba(0,0,0,1);
}
/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
    .menuItem__icon,
    .menuSub,
    .menuSub__item{
        transition: none !important;
    }
}
/* ===== Mobile ===== */
@media (max-width: 769px){
    .menuOverlay{
        background: transparent;
    }

    .menuOverlay .menuOverlay__consult{
        display: none;
    }

    .menuOverlay::after{
        top: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 140px;
        background: url("/assets/eng-arc-glow-BIdP8gVe.png") center bottom no-repeat;
        background-size: cover;
        opacity: 1;
    }

    .menuOverlay__panel{
        --header-offset: 57px;
        --right-rail: 40px;
        --row-gap: 14px;
        --side-pad: 28px;
        --scroll-space: 4px;

        position: fixed;
        top: var(--header-offset);
        left: 0;
        right: 0;
        bottom: 0;

        height: calc(100dvh - var(--header-offset));
        min-height: calc(100dvh - var(--header-offset));
        padding: 18px var(--side-pad) 110px;
    }

    .menuOverlay__top{
        display: block;
        padding-right: 0;
        margin-right: 0;
    }

    .menuOverlay__title{
        font-size: 18px;
        letter-spacing: -0.06em;
    }

    .menuOverlay__close{
        display: none;
    }

    .menuOverlay__divider{
        margin: 18px 0 28px;
    }

    .menuOverlay__nav{
        padding-top: 0;
        padding-right: var(--scroll-space);
        padding-bottom: 24px;
    }

    .menuOverlay__nav::-webkit-scrollbar{
        width: 3px;
    }

    .menuOverlay__nav::-webkit-scrollbar-thumb{
        background: rgba(0,0,0,.22);
    }

    .menuRow{
        grid-template-columns: minmax(0, 1fr) var(--right-rail);
        column-gap: var(--row-gap);
        align-items: start;
        padding: 8px 0;
    }

    .menuRow .menuItem{
        gap: 10px;
        padding: 6px 0;
    }

    .menuItem__text{
        font-size: 18px;
        line-height: 1.08;
    }

    .menuItem__num{
        font-size: 14px;
        transform: translateY(-1px);
    }

    .menuItem__icon{
        width: 26px;
        height: 26px;
    }

    .menuSub{
        padding-right: 2px;
    }

    .menuGroup:has(.menuItem--toggle[aria-expanded="true"]) > .menuSub{
        margin: 6px 0 14px;
    }

    .menuSub__item a{
        padding: 9px 0;
        font-size: 14px;
        line-height: 1.25;
    }
}
/* PRODUCT DETAILS (under hero) */
.productDetails{
    padding: 0;
}
.productDetails__card{
    padding: 20px;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--black);
    color: rgba(255,255,255,.86);
    min-height: 520px;
    /*padding: 34px 40px 40px;*/
}
.productDetails__grid{
    position: relative;
    row-gap: 0;
}
.productDetails__grid > *{
    grid-column: 1 / -1;
    min-width: 0;
}
/* стрілка */
.productDetails__arrowSvg {
    display: block;
}
.productDetails__arrowSvg path{
    stroke: var(--grey-pale);
    stroke-width: 2;
    fill: none;
    stroke-linecap: butt;       /* прямий край */
    stroke-linejoin: miter;     /* гострий носик */
    stroke-miterlimit: 20;      /* щоб не обрізало кут */
}
/* badge */
.productDetails__badge{
    position: absolute;
    top: 18px;
    right: 18px;
    width: 290px;
    height: 344px;
    padding: 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.98);
    color: var(--black);
    border-radius: 14px;
    font-family: var(--font3), sans-serif;
    font-weight: 400;
    font-size: 542px;
    line-height: 82%;
    letter-spacing: -0.04em;
}
/* rows */
.productDetails__row{
    display: flex;
    gap: 56px;
    align-items: flex-start;
    padding-bottom: 54px;
}
.productDetails__card__header{
    margin-bottom: 45px;
}
.containerFlex{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 12px;
    width: 100%;
    align-items: start;
}
.productDetails_twoCols:first-child{
    grid-column: 1 / 7;
    flex: none;
    max-width: none;
    min-width: 0;
}
.productDetails_twoCols:last-child{
    grid-column: 7 / 13;
    flex: none;
    max-width: none;
    min-width: 0;
}
.productDetails__card__title{
    font-size: 24px;
    font-weight: bold;
    flex: 0 0 50%;
    max-width: 50%;
}
.productDetails__h{
    margin: 0;
    width: 240px;
    font-size: 34px;
    font-family: var(--font3), sans-serif;
    font-weight: 300;

    line-height: 1.2;

    color: rgba(255,255,255,.40);
}
/* benefits list */
.productDetails__benefits{
    list-style: none;
    padding: 0;
    margin: 0;
}
.productDetails__benefits li{
    position: relative;
    padding: 12px 0;
    font-size: 14px;
    color: var(--grey-pale);
    font-family: var(--third-family), sans-serif;
}
.productDetails__benefits li:not(:last-child)::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--grey);
}
/* divider */
.productDetails__divider{
    margin: 18px 0;
    height: 1px;
    background: var(--grey);
}
/* about row */
.productDetails__title{
    margin: 0;
    width: 320px;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.15;
    color: var(--grey);
}
.productDetails__text{
    margin: 0;
    max-width: 640px;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.55;
    color: var(--grey-pale);
}
/* bottom cols */
.productDetails__cols{
    display: flex;
    gap: 52px;
    padding-top: 14px;
}
.productDetails__col{
    flex: 1 1 0;
    min-width: 0;
}
.pr-16 { padding-right: 16px; }
.pr-24 { padding-right: 24px; }
.pr-32 { padding-right: 32px; }
.pr-40 { padding-right: 40px; }
.pr-64 { padding-right: 64px; }
.pl-16 { padding-left: 16px; }
.pl-24 { padding-left: 24px; }
.pl-32 { padding-left: 32px; }
.pl-40 { padding-left: 40px; }
.pl-64 { padding-left: 64px; }
.productDetails_badge{
    width: 100%;
    height: 340px;
    background: var(--white);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font3), sans-serif;
    font-size: 340px;
    font-weight: 400;
    letter-spacing: -4px;
    color: var(--black);
}
.productDetails__kicker{
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--orange);
    margin-bottom: 12px;
}
.productDetails__list{
    margin: 0;
    padding: 0;
    list-style: none;
}
.productDetails__list li{
    position: relative;
    padding: 8px 0 8px 0;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.35;
    color: var(--grey-pale);
}
.productDetails__list li::before{
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 6px;

}
.productDetails__ehz{
    color: var(--grey);
    white-space: nowrap;
}
.aboutGrid{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 0;
    margin: 40px 0;
    font-family: var(--third-family), sans-serif;
}
/* лівий заголовок займає обидва рядки, колонки 1-4 (≈33%) */
.aboutGrid__title{
    grid-column: 1 / 5;
    grid-row: 1 / 3;
    font-size: 32px;
    font-family: var(--font3), sans-serif;
    line-height: 0.85;
    font-weight: 500;
    opacity: .45;
    margin: 0;
    padding-right: 60px;
}
.t_font_tittle{
    font-family: Var(--font3), sans-serif;
    font-weight: 500;
    font-size: 32px;
}
/* правий верхній блок — починається з колонки 5 (37.5%) */
.aboutGrid__top{
    grid-column: 5 / 13;
    grid-row: 1;
    margin: 0;
    display: block;
    text-align: left;
    padding-left: 16%;
    font-size: 16px;
    line-height: 1.25;
    opacity: .9;
    width: 100%;
    color: var(--grey-pale)!important;
    font-family: var(--third-family), sans-serif;
}
/* правий нижній блок — теж з 5-ї колонки, без проміжку */
.aboutGrid__bottom{
    grid-column: 5 / 13;
    grid-row: 2;
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    padding-left: 6.25%; /* = 50% of column 5 in 12-col grid */
    padding-right: 20px;
    opacity: .9;
    width: 100%;
    color: var(--grey-pale);
    font-family: var(--third-family), sans-serif;
}
/* Стили для таблицы с характеристиками */
.productDetails__table{
    width: 100%;
    overflow-x: auto;
}
.specs-table{
    width: 100%;
    border-collapse: collapse;
    font-family: var(--third-family), sans-serif;
    background: transparent;
    color: var(--grey-pale);
}
.specs-table thead tr{
    background: rgba(255, 255, 255, 0.05);
}
.bg90{
    background: #D6D5D3;
    color:#413E39 !important;
}
.specs-table th{
    padding: 3px ;
    text-align: left;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.05em;

}
.specs-table tbody tr:hover{
    background: rgba(255, 122, 0, 0.05);
}
.specs-table td{
    padding: 3px ;
    font-size: 12px;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
}
/* p03 desktop about layout */
@media (min-width: 769px){
    .productDetails--p03 .aboutGrid{
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .productDetails--p03 .aboutGrid__title{
        grid-column: 1 / 7;
        grid-row: 1 / 3;
    }

    .productDetails--p03 .aboutGrid__top{
        grid-column: 7 / 11;
        grid-row: 1;
        padding-left: 0;
        width: auto !important;
    }

    .productDetails--p03 .aboutGrid__bottom{
        grid-column: 7 / 11;
        grid-row: 2;
        width: auto !important;
        padding-left: 0;
    }

}
/* responsive */
@media (max-width: 768px){
    .productDetails{
        padding: 16px 0 48px;
    }

    .productDetails__card{
        padding: 22px 18px 26px;
        min-height: 0;
        border-radius: 16px 16px 0 0;
    }

    .productDetails__back{
        top: 14px;
        left: 14px;
        width: 42px;
        height: 42px;
    }

    .productDetails__card__header .containerFlex{
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 12px;
        align-items: start;
    }

    .productDetails__card__header .productDetails_twoCols:first-child,
    .productDetails__card__header .productDetails_twoCols:last-child{
        flex: none;
        max-width: none;
    }

    .productDetails__card__header .productDetails_twoCols:first-child{ grid-column: 1; }

    /* Светлый блок с номером занимает колонки 3, 4 и 5 */
    .productDetails__card__header .productDetails_badge{
        grid-column: 3 / 6;
        width: unset;
        padding-left: 0;
        padding-right: 0;
    }

    .productDetails__card .productDetails__divider + .containerFlex{
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 12px;
        align-items: start;
    }

    .productDetails__card .productDetails__divider + .containerFlex .productDetails_twoCols:first-child,
    .productDetails__card .productDetails__divider + .containerFlex .productDetails_twoCols:last-child{
        flex: none;
        max-width: none;
    }

    .productDetails__card .productDetails__divider + .containerFlex .productDetails_twoCols:first-child{
        grid-column: 1 / 3;
        padding-left: 0;
    }

    .productDetails__card .productDetails__divider + .containerFlex .productDetails_twoCols:last-child{
        grid-column: 3 / 6;
    }

    .productDetails__badge{
        top: 12px;
        right: 12px;
        width: 170px;
        height: 92px;
        padding: 0 18px;
        font-size: 84px;
        border-radius: 12px;
        border-right: 1px solid var(--black);
    }

    .productDetails_badge{
        width: 100%;
        height: 200px;
        background: var(--grey-pale);
        font-family: var(--font3), sans-serif;
        font-weight: 400;
        font-size: 144px;
        line-height: 82%;
        letter-spacing: -0.04em;
        color: var(--black);
        justify-content: center;
        padding-right: 0;
    }

    .productDetails_badge > div{
        width: 100%;
        display: flex;
        justify-content: center;
    }

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

    .productDetails__row--benefits{
        padding-top: 110px;
        padding-right: 0;
    }

    .productDetails__h,
    .productDetails__title{
        width: auto;
    }

    .productDetails__specsRow{
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 10px;
        align-items: start;
    }

    .productDetails__specsRow .productDetails_twoCols:first-child{
        grid-column: 1 / 6;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 12px;
        padding-left: 0;
        position: relative;
    }

    .productDetails__specsRow .productDetails_twoCols:first-child::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--grey);
    }

    .productDetails__specsRow .productDetails_twoCols:last-child{
        grid-column: 1 / 6;
    }

    .productDetails__specsRow .productDetails__h{
        grid-column: 3 / 6;
        font-family: var(--font-family), sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: -0.03em;
        text-transform: uppercase;
        color: var(--lightgrey);
        margin: 14px 0 10px;
        padding: 12px 0 8px;
    }


    .productDetails__specsRow .productDetails__table{
        width: 100%;
    }

    .productDetails__card .productDetails__divider + .containerFlex .productDetails_twoCols.t_font_tittle .productDetails__h{
        font-weight: 100;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: -0.03em;
        color: var(--white);
        padding: 12px 0;
    }

    .productDetails__cols{
        flex-direction: column;
        gap: 18px;
    }

    .productDetails__card .productDetails__grid > .containerFlex:last-of-type,
    .productDetails__card > .containerFlex:last-of-type{
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 10px;
        align-items: start;
    }

    .productDetails__card .productDetails__grid > .containerFlex:last-of-type .productDetails_twoCols,
    .productDetails__card > .containerFlex:last-of-type .productDetails_twoCols{
        grid-column: 1 / 6;
        flex: none;
        max-width: none;
        width: 100%;
    }

    .productDetails__card .productDetails__grid > .containerFlex:last-of-type .productDetails_twoCols:first-child,
    .productDetails__card > .containerFlex:last-of-type .productDetails_twoCols:first-child{
        padding-left: 0;
    }

    /* тільки для p02: Параметр = колонки 1-3, Значення = колонки 4-5 */
    .productDetails--p02 .productDetails__cols{
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
        width: 100% !important;
    }

    .productDetails--p02 .productDetails__cols .productDetails__col{
        display: block !important;
        width: 100% !important;
    }

    .productDetails--p02 .productDetails__cols .productDetails__col:first-child{
        grid-column: 1 / 4 !important;
    }

    .productDetails--p02 .productDetails__cols .productDetails__col:last-child{
        grid-column: 4 / 6 !important;
    }

    .productDetails--p02 .productDetails__cols .productDetails__kicker,
    .productDetails--p02 .productDetails__cols .productDetails__list{
        grid-column: auto !important;
    }

    .productDetails__card .productDetails__grid > .containerFlex:last-of-type .productDetails__col,
    .productDetails__card > .containerFlex:last-of-type .productDetails__col{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 12px;
        align-items: start;
    }

    .productDetails__card .productDetails__grid > .containerFlex:last-of-type .productDetails__col[style*="width"],
    .productDetails__card > .containerFlex:last-of-type .productDetails__col[style*="width"]{
        width: 100% !important;
        max-width: none !important;
        flex-basis: auto !important;
    }

    .productDetails__card .productDetails__grid > .containerFlex:last-of-type .productDetails__kicker,
    .productDetails__card > .containerFlex:last-of-type .productDetails__kicker{
        grid-column: 1 / 3;
        margin: 0;
        padding-top: 10px;
    }

    .productDetails__card .productDetails__grid > .containerFlex:last-of-type .productDetails__list,
    .productDetails__card > .containerFlex:last-of-type .productDetails__list{
        grid-column: 3 / 6;
    }

    .productDetails__card .productDetails__grid > .containerFlex:last-of-type .productDetails__list li,
    .productDetails__card > .containerFlex:last-of-type .productDetails__list li{
        padding: 10px 0;
    }

    .productDetails__card .productDetails__grid > .containerFlex:last-of-type .productDetails__list li:not(:last-child)::after,
    .productDetails__card > .containerFlex:last-of-type .productDetails__list li:not(:last-child)::after{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--grey);
    }


    .aboutGrid{
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 0;
        margin: 28px 0;
    }

    .productDetails__row--about.pl-16{
        padding-left: 0;
    }

    .aboutGrid__title{
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        margin: 0;
        padding-right: 0;
        font-family: var(--font-family), sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--lightgrey);
        text-transform: uppercase;
    }

    .aboutGrid__top{
        grid-column: 3 / 6;
        grid-row: 1;
        margin: 0;
        display: block;
        width: 100% !important;
        padding: 0 !important;
        line-height: 1;
        text-align: right;
    }

    .aboutGrid__top::before{
        content: "";
        float: left;
        width: 20%;
        height: 5lh;
    }

    .aboutGrid__bottom{
        grid-column: 3 / 6;
        grid-row: 2;
        margin: 0;
        width: 100%;
        padding: 0 !important;
        text-align: justify;
        text-justify: inter-word;
    }

    .specs-table th,
    .specs-table td{
        padding: 10px 8px;
        font-size: 12px;
    }

    /* На мобильном: 1-я строка (thead) серая, дальше чередование строк в tbody */
    .specs-table thead tr > *{
        background: var(--lightgrey) !important;
        color: #413E39 !important;
    }

    .specs-table tbody tr:nth-child(odd) > *{
        background: transparent !important;
        color: var(--grey-pale) !important;
    }

    .specs-table tbody tr:nth-child(even) > *{
        background: var(--lightgrey) !important;
        color: #413E39 !important;
    }

    .specs-table td:first-child{
        font-size: 11px;
    }

    /* p05/p06 mobile: 1-я колонка = 2 из 5, 2-я = 3 из 5 */
    .productDetails--p05 .productDetails__specsRow .specs-table,
    .productDetails--p06 .productDetails__specsRow .specs-table{
        table-layout: fixed;
    }

    .productDetails--p05 .productDetails__specsRow .specs-table th:first-child,
    .productDetails--p06 .productDetails__specsRow .specs-table th:first-child,
    .productDetails--p05 .productDetails__specsRow .specs-table td:first-child,
    .productDetails--p06 .productDetails__specsRow .specs-table td:first-child{
        width: 40% !important;
    }

    .productDetails--p05 .productDetails__specsRow .specs-table th:last-child,
    .productDetails--p06 .productDetails__specsRow .specs-table th:last-child,
    .productDetails--p05 .productDetails__specsRow .specs-table td:last-child,
    .productDetails--p06 .productDetails__specsRow .specs-table td:last-child{
        width: 60% !important;
    }
}
/* responsive */
@media (min-width: 769px) and (max-width: 900px){
    .aboutGrid{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .aboutGrid__title{ grid-row:auto; grid-column:auto; padding-right:0; margin-bottom:18px; }
    .aboutGrid__top{ grid-row:auto; grid-column:auto; justify-content:flex-start; text-align:left; padding:0; }
    .aboutGrid__bottom{ grid-row:auto; grid-column:auto; padding:16px 0 0; }
}
/* tablet */
@media (min-width: 769px) and (max-width: 1024px){
    .productDetails__badge{ width: 240px; height: 124px; font-size: 110px; }
    .productDetails__row{ gap: 34px; }
    .productDetails__row--benefits{ padding-right: 270px; }
    .productDetails__cols{ gap: 28px; }
}
:root{
    --calc-radius: 28px;
    --calc-pad-x: 70px;
    --calc-pad-y: 62px;
    --calc-max-w: 860px;
}
/* lock scroll when modal open */
body.no-scroll{ overflow: hidden; }
/* ========== MODAL CONTAINER ========== */
.calc-modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    place-items: center;
    padding: 28px;
    pointer-events: none;
}
.calc-modal.is-open{
    display: grid;
    pointer-events: auto;
}
/* ========== MODAL OVERLAY ========== */
.calc-modal__overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
/* ========== MODAL DIALOG ========== */
.calc-modal__dialog{
    width: min(var(--calc-max-w), calc(100vw - 56px));
    background: #000;
    color: rgba(255,255,255,.86);
    border-radius: var(--calc-radius);
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: var(--calc-pad-y) var(--calc-pad-x) 56px;
}
/* ========== CLOSE BUTTON ========== */
.calc-modal__close{
    position: absolute;
    top: 26px;
    right: 28px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: .65;
    transition: opacity .15s ease, transform .15s ease;
    padding: 0;
}
.calc-modal__close:hover{ opacity: .9; }
.calc-modal__close:active{ transform: translateY(1px); }
.calc-modal__close span{
    position: absolute;
    width: 18px;
    height: 2px;
    background: rgba(255,255,255,.70);
    border-radius: 2px;
}
.calc-modal__close span:first-child{ transform: rotate(45deg); }
.calc-modal__close span:last-child{ transform: rotate(-45deg); }
/* ========== TITLE ========== */
.calc-modal__title{
    margin: 0;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: rgba(255,255,255,.90);
    max-width: 560px;
}
/* ========== SUBTITLE ========== */
.calc-modal__subtitle{
    margin: 12px 0 28px;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--orange);
}
/* ========== FORM ========== */
.calc-modal__form{
    margin: 0;
}
/* ========== FIELD ========== */
.calc-field{
    margin-top: 22px;
}
.calc-field label{
    display: block;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: -0.03em;
    color: rgba(255,255,255,.78);
    margin-bottom: 8px;
}
.calc-field__hint{
    margin: 0 0 12px;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,.38);
}
/* ========== INPUT ========== */
.calc-field input{
    width: 100%;
    height: 60px;
    padding: 0 22px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: #000;
    color: rgba(255,255,255,.88);
    outline: none;
    font-family: var(--font-family), sans-serif;
    font-size: 14px;
    letter-spacing: -0.02em;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Скрываем спиннер (стрелки) для Chrome, Safari, Edge, Opera */
.calc-field input[type="number"]::-webkit-outer-spin-button,
.calc-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Скрываем спиннер для Firefox */
.calc-field input[type="number"] {
    -moz-appearance: textfield;
}
.calc-field input::placeholder{
    color: rgba(255,255,255,.22);
    letter-spacing: -0.02em;
}
.calc-field input:focus{
    border-color: rgba(255,122,0,.55);
    box-shadow: 0 0 0 3px rgba(255,122,0,.12);
}
/* ========== BUTTON ========== */
.calc-modal__btn{
    height: 54px;
    padding: 0 34px;
    margin-top: 34px;
    margin-left: auto;
    display: block;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: var(--orange);
    color: #fff;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    white-space: nowrap;
    transition: filter .15s ease, transform .15s ease;
}
.calc-modal__btn--drift{
    position: relative;
    padding-left: 52px;
    padding-right: 52px;
}
.calc-modal__btn--drift::before,
.calc-modal__btn--drift::after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-weight: 400;
    line-height: 1;
    transition: transform .2s ease;
}
.calc-modal__btn--drift::before{
    content: "[";
    left: 20px;
}
.calc-modal__btn--drift::after{
    content: "]";
    right: 20px;
}
.calc-modal__btn--drift:hover::before{ transform: translate(-4px, -50%); }
.calc-modal__btn--drift:hover::after{ transform: translate(4px, -50%); }
.calc-modal__btn--drift:active::before{ transform: translate(-6px, -50%); }
.calc-modal__btn--drift:active::after{ transform: translate(6px, -50%); }
.calc-note{
    margin-top: 22px;
}
.calc-note__title{
    margin: 0 0 6px;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--orange);
}
.calc-note__text{
    margin: 0;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: -0.03em;
    color: rgba(255,255,255,.42);
}
.calc-modal__btn:hover{ filter: brightness(.96); }
.calc-modal__btn:active{
    transform: translateY(1px);
    background: var(--grey);
}
.calc-modal__btn:disabled{
    filter: grayscale(.4);
    opacity: .7;
    cursor: not-allowed;
}
/* ========== RESULT SECTION ========== */
.calc-result{
    margin-top: 28px;
}
/* label above value — orange */
.calc-result__label{
    margin: 0 0 14px;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--orange);
}
/* legacy UA selector — keep for UA modal */
.calc-result__text{
    margin: 0 0 16px;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: rgba(255,255,255,.78);
}
/* large value row */
.calc-result__value{
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: -0.04em;
    color: rgba(255,255,255,.94);
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-color: rgba(255,255,255,.30);
}
.calc-result__unit{
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: -0.04em;
    color: rgba(255,255,255,.94);
    text-transform: uppercase;
}
/* rounding note */
.calc-result__rounding{
    margin: 10px 0 0;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,.38);
}
/* important block */
.calc-result__important{
    margin-top: 28px;
}
.calc-result__important-title{
    margin: 0 0 6px;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--orange);
}
.calc-result__important-text{
    margin: 0;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,.52);
}
/* ========== RESPONSIVE ========== */
@media (max-width: 768px){
    :root{
        --calc-radius: 22px;
        --calc-pad-x: 22px;
        --calc-pad-y: 22px;
        --calc-max-w: 720px;
    }

    .calc-modal{
        padding: 16px;
    }

    .calc-modal__dialog{
        padding: var(--calc-pad-y) var(--calc-pad-x) 36px;
    }

    .calc-modal__title{
        font-size: 16px;
        max-width: none;
    }

    .calc-note__title{
        font-size: 14px;
    }

    .calc-note__text{
        font-size: 12px;
        line-height: 1.35;
    }

    .calc-field input{
        height: 54px;
    }

    .calc-modal__btn{
        width: auto;
        font-size: 12px;
        padding-left: 36px;
        padding-right: 36px;
    }

    .calc-modal__btn--drift{
        padding-left: 36px;
        padding-right: 36px;
    }
}
@media (max-width: 420px){
    .calc-modal__close{
        top: 16px;
        right: 16px;
    }

    .calc-modal__title{
        font-size: 14px;
    }

    .calc-modal__btn{
        font-size: 11px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .calc-modal__btn--drift{
        padding-left: 28px;
        padding-right: 28px;
    }
}
.footerPeg{
    background: var(--black);
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 0.9vw, 18px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--lightgrey);
    overflow: hidden;
}
.footerPeg__top{
    padding: 80px 20px 0;
    position: relative;
    z-index: 2;
}
.footerPeg__grid{
    align-items: start;
    column-gap: clamp(12px, 1.8vw, 24px);
    row-gap: 0;
    text-transform: uppercase;
}
.footerPeg__col{
    min-width: 0;
    width: 100%;
}
/* колонки по grid12 */
.footerPeg__grid > .footerPeg__col:nth-child(1){ grid-column: 1 / 3; }
.footerPeg__grid > .footerPeg__col:nth-child(2){ grid-column: 3 / 5; }
.footerPeg__grid > .footerPeg__col:nth-child(3){ grid-column: 5 / 8; }
.footerPeg__grid > .footerPeg__col:nth-child(4){ grid-column: 9 / 11; }
.footerPeg__grid > .footerPeg__col:nth-child(5){ grid-column: 11 / 13; }
.footerPeg__head{
    text-transform: none;
    margin-bottom: 10px;
    min-height: 14px;
}
.footerPeg__line{
    height: 1px;
    background: rgba(255,255,255,.28);
    margin-bottom: 18px;
}
.footerPeg__line1{
    height: 1px;
    background: rgba(255,255,255,.28);
    margin-bottom: 18px;
}
.footerPeg__col--contacts{
    padding-right: 24px;
}
.footerPeg__link{
    display: block;
    text-decoration: none;
    color: inherit;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.5;
    margin: 6px 0;
}
.footerPeg__grid > .footerPeg__col:nth-child(1) .footerPeg__link,
.footerPeg__grid > .footerPeg__col:nth-child(2) .footerPeg__link{
    white-space: nowrap;
}
.footerPeg__link:hover{
    opacity: 1;
}
/* contacts */
.footerPeg__muted{
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 4px;
    text-transform: none;
}
.footerPeg__text{
    font-size: 12px;
    line-height: 1.35;
    max-width: 520px;
    text-transform: uppercase;
}
.footerPeg__textRow{
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.footerPeg__textLink{
    text-decoration: none;
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    color: inherit;
}
.footerPeg__grid > .footerPeg__col:nth-child(5) .footerPeg__line{
    width: 100%;
    margin-right: 0;
}
.footerPeg__textLink:hover{
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 6px;
}
/* social */
.footerPeg__social{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 2px;
}
.footerPeg__socialLink{
    display: grid;
    grid-template-columns: 1fr 22px;
    column-gap: 14px;
    align-items: center;
    width: 100%;
    color: inherit;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footerPeg__socialText{
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footerPeg__socialLink:hover{
    opacity: 1;
}
.footerPeg__socialIcon{
    width: 18px;
    height: 18px;
    display: block;
    justify-self: end;
}
/* qr */
.footerPeg__qrStack{
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-end;
}
.footerPeg__qrItem{
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 14px;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
.footerPeg__qrLabel{
    justify-self: start;
    text-align: left;
    opacity: .9;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footerPeg__qrImg{
    width: 120px;
    height: auto;
    border-radius: 18px;
    display: block;
    justify-self: end;
}
/* brand image */
.footer__brandBleed{
    width: calc(100% + (var(--gutter) * 2));
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
}
.footer__brand{
    width: 100%;
    margin-top: 28px;
    line-height: 0;
}
.footer__brand picture{
    display: block;
    width: 100%;
}
.footer__brandImg{
    display: block;
    width: 100%;
    height: auto;
}
/* ---------- DESKTOP 1440 ---------- */
@media (max-width: 1440px) and (min-width: 769px){
    .footerPeg{
        font-size: clamp(13px, 0.85vw, 16px);
    }

    .footerPeg__link{
        font-size: 11px;
    }

    .footerPeg__muted,
    .footerPeg__text{
        font-size: 11px;
    }

    .footerPeg__textLink{
        font-size: 13px;
    }
}
@media (max-width: 1440px) and (min-width: 1201px){
    .footerPeg__grid > .footerPeg__col:nth-child(4){
        grid-column: 9 / 11;
    }

    .footerPeg__grid > .footerPeg__col:nth-child(5){
        grid-column: 11 / 13;
    }

    .footerPeg__col--contacts{
        margin-left: clamp(16px, 1.8vw, 28px);
    }
}
/* ---------- TABLET ---------- */
@media (max-width: 1200px){
    .footerPeg__top{
        padding-top: 46px;
    }
}
@media (max-width: 1200px) and (min-width: 769px){
    .footerPeg__top{
        padding-top: 24px;
    }

    .footerPeg__grid{
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 10px;
    }

    .footerPeg__line{
        display: block;
        margin-bottom: 12px;
    }

    .footerPeg__line1{
        display: none;
    }

    .footerPeg__grid > .footerPeg__col:nth-child(1){
        grid-column: 1 / 5;
        grid-row: 1;
    }

    .footerPeg__grid > .footerPeg__col:nth-child(2){
        grid-column: 1 / 5;
        grid-row: 2;
        transform: none;
        margin-top: -30px;
    }

    .footerPeg__grid > .footerPeg__col:nth-child(3){
        grid-column: 5 / 9;
        grid-row: 1 / 3;
    }

    .footerPeg__grid > .footerPeg__col:nth-child(4){
        grid-column: 9 / 13;
        grid-row: 1;
    }

    .footerPeg__grid > .footerPeg__col:nth-child(5){
        grid-column: 9 / 13;
        grid-row: 2;
        transform: none;
        margin-top: -46px;
    }

    .footerPeg__qrStack{
        align-items: flex-start;
    }

    .footerPeg__qrImg{
        justify-self: start;
    }

    .footerPeg__grid > .footerPeg__col:nth-child(1) .footerPeg__link,
    .footerPeg__grid > .footerPeg__col:nth-child(2) .footerPeg__link{
        white-space: normal;
        font-size: 12px;
        line-height: 1.42;
    }
}
/* ---------- MOBILE ---------- */
@media (max-width: 768px){
    .footerPeg__top{
        padding: 40px 16px 0;
    }

    .footerPeg__grid{
        display: flex;
        flex-direction: column;
        gap: 28px;
        row-gap: 28px;
        column-gap: 0;
        grid-template-columns: 1fr !important;
    }

    .footerPeg__grid > .footerPeg__col{
        grid-column: 1 / -1 !important;
        min-width: 0;
    }

    .footerPeg__col--contacts{
        padding-right: 0;
    }

    .footerPeg__text{
        max-width: 100%;
    }

    .footerPeg__textRow{
        flex-direction: column;
        gap: 6px;
    }

    .footerPeg__textLink{
        white-space: normal;
    }

    .footerPeg__grid > .footerPeg__col:nth-child(1) .footerPeg__link,
    .footerPeg__grid > .footerPeg__col:nth-child(2) .footerPeg__link{
        white-space: normal;
    }

    .footerPeg__socialLink{
        grid-template-columns: 1fr 22px;
    }

    .footerPeg__qrStack{
        flex-direction: column;
        gap: 18px;
        align-items: flex-end;
    }

    .footerPeg__qrItem{
        grid-template-columns: 1fr auto;
    }

    .footerPeg__qrImg{
        width: 120px;
    }

    .footerPeg__line{
        margin-bottom: 14px;
    }

    .footerPeg__line1{
        margin-bottom: 14px;
    }

    /* порядок блоків */
    .footerPeg__grid > .footerPeg__col:nth-child(1){ order: 1; }
    .footerPeg__grid > .footerPeg__col:nth-child(3){ order: 2; }
    .footerPeg__grid > .footerPeg__col:nth-child(2){ order: 3; }
    .footerPeg__grid > .footerPeg__col:nth-child(4){ order: 4; }
    .footerPeg__grid > .footerPeg__col:nth-child(5){ order: 5; }

    .footer__brand{
        margin-top: 24px;
    }
}
/* ---------- SMALL MOBILE ---------- */
@media (max-width: 420px){
    .footerPeg__qrImg{
        width: 108px;
    }
}
@font-face {
    font-family: "Bebas Neue";
    src: url("/assets/BebasNeue-Regular-5LZebNIn.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Supreme";
    src: url("/assets/Supreme-Regular-BBYex7lw.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Manrope";
    src: url("/assets/Manrope-Light-Da1J8AqR.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/Montserrat-Thin-cS4p7h4M.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/Montserrat-Light-BDXgMDtZ.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/Montserrat-Medium-Bv7av8qq.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/Montserrat-Regular-DLSKq2aI.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/Montserrat-Bold-CnhIhCuj.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("/assets/Montserrat-ExtraBold-DsEz0UwE.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Kaushan Script";
    src: url("/assets/KaushanScript-Regular-DfzBMzt-.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: "General Sans";
    src: url("/assets/GeneralSans-Bold-dlJ4aeRS.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/*Заміна Supreme Thin*/
@font-face{
    font-family: "General Sans";
    src: url("/assets/GeneralSans-Light-DM8dOCDz.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face{
    font-family: "Roboto";
    src: url("/assets/Roboto-Regular-CDA2nS6X.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root {
    --orange: #ff7a00;
    --orange-light: #FC944A;
    --black: #0A0606;
    --black-background: #191010;
    --grey-dark: #413E39;
    --grey: #727270;
    --lightgrey: #D6D5D3;
    --grey-pale: #FAF9F9;
    --text: #413E39;
    --white: #ffffff;
    --muted-on-dark: rgba(255, 255, 255, .65);

    --font-family: "Supreme", sans-serif; /*тільки400*/
    --font-family-Thin: "General Sans", sans-serif;
    --second-family: "Kaushan Script", sans-serif;
    --third-family: "Montserrat", sans-serif;/*основний, всі крім 400*/
    --font3: "Bebas Neue", sans-serif;
    --font4: "Roboto", sans-serif;
    --font5: "Gilroy", sans-serif;
    --font6: "Akira Expanded", sans-serif;

    --line:rgba(255,255,255,.12);
    --gridLine:rgba(0,0,0,.04);

    --header-h: 86px;

    --error: #bc0e0d;
    --success: #24590d;
    --pad-x: 48px;

    --gutter: clamp(16px, 4vw, 64px);
    --container: min(1320px, calc(100% - (var(--gutter) * 2)));
    --leftEdge: calc((100% - var(--container)) / 2);
    --lineW: 2px;
    --lineC: rgba(255,0,0,.45);
}
@media (max-width: 560px){
    :root{ --gutter: 16px; }
}
*, *::before, *::after { box-sizing: border-box; }
body{
    margin:0;
    color: var(--text);
    background:var(--white);
    font-family: var(--third-family), sans-serif;
}
body.menu-open{
    overflow: hidden;
}
/* Screen reader only - hide visually but keep accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.container{
    width: min(1440px, calc(100% - (var(--gutter) * 2)));
    margin: 0 auto;
}
.grid12{
    display:grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(12px, 1.8vw, 24px);
}
/* ---------- buttons ---------- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:44px;
    padding:0 22px;
    border-radius:999px;
    font-family: var(--font-family), sans-serif;
    font-weight:400;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-transform:uppercase;
    text-decoration:none;
    border:0;
    background: transparent;
    cursor:pointer;
    user-select:none;
}
.btn--primary{
    background: var(--orange);
    color:var(--white);
}
.btn--primary:hover{ filter: brightness(0.95); }
.btn--primary:active{
    position: relative;
    top: 1px;
    background: var(--grey);
}
.btn__label{ letter-spacing:-0.03em; }
.btn--secondary{
    background: transparent;
    color: var(--text);
    position: relative;
}
.btn--drift::before,
.btn--drift::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
    line-height: 1;
    transition: transform .18s ease, color .2s ease;
    color: var(--orange);
}
.btn--drift::before{
    content: "[";
    left: 18px;
}
.btn--drift::after{
    content: "]";
    right: 18px;
}
.btn--drift::before{ left: 18px; transform: translateY(-50%) translateX(0); }
.btn--drift::after { right:18px; transform: translateY(-50%) translateX(0); }
.btn--drift{ padding-left: 50px; padding-right: 50px; }
.btn--drift:hover::before{ transform: translateY(-50%) translateX(-18px); }
.btn--drift:hover::after { transform: translateY(-50%) translateX(18px); }
.btn--drift:disabled,
.btn--drift[aria-disabled="true"]{
    color: var(--grey);
    cursor: not-allowed;
}
.btn--drift:disabled::before,
.btn--drift:disabled::after,
.btn--drift[aria-disabled="true"]::before,
.btn--drift[aria-disabled="true"]::after{
    color: var(--grey);
}
/* ---------- header -початок --------- */
.header{
    position: sticky;
    top: 0;
    z-index: 1000;
    background:var(--white);
    border-bottom:1px solid rgba(0,0,0,.06);
    overflow: hidden;
}
.header__inner{
    align-items:center;
    height: var(--header-h);
}
.header__left{
    display: contents;
}
.header__burger{
    grid-column: 1 / 2;
    justify-self: start;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    padding:0;
}
.header__lang{
    grid-column: 2 / 3;
    justify-self: start;
}
.header__contacts{
    grid-column: 3 / 6;         /* 3,4,5 */
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-width: 0;
}
.header__logo{
    grid-column: 6 / 8;
    justify-self: center;
    z-index: 2;
}
/* right block (last 4 cols) */
.header__right{
    grid-column: 8 / 13;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    flex-wrap: nowrap;
    min-width: 0;
}
.header__ctaSecondary,
.header__right .btn{
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0;
}
.header__logo img{
    width: auto !important;
    height: 44px !important;
    max-height: 44px;
    object-fit: contain !important;
}
/* hide diag icon in header */
.header img[src*="arrow-diag-open"]{
    display: none !important;
}
.header__lang a{
    color: var(--lightgrey);
    text-decoration: none;
}
.header__lang a.is-active{
    color: var(--orange);
}
.header__contacts{
    color: var(--lightgrey);
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
}
.header__contacts a{
    color: var(--lightgrey);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
/* header contacts states: default/lightgrey, hover+focus/grey, pressed/grey-dark, clicked(light visited)/lightgrey */
.header__contacts a[href^="tel:"],
.header__contacts a[href^="mailto:"]{
    color: var(--lightgrey);
}
.header__contacts a[href^="tel:"]:visited,
.header__contacts a[href^="mailto:"]:visited{
    color: var(--lightgrey);
}
.header__contacts a[href^="tel:"]:hover,
.header__contacts a[href^="mailto:"]:hover,
.header__contacts a[href^="tel:"]:focus,
.header__contacts a[href^="mailto:"]:focus,
.header__contacts a[href^="tel:"]:focus-visible,
.header__contacts a[href^="mailto:"]:focus-visible{
    color: var(--grey);
}
.header__contacts a[href^="tel:"]:active,
.header__contacts a[href^="mailto:"]:active{
    color: var(--grey-dark);
}
.header__contacts a.is-underline{
    text-decoration: underline;
    text-transform: uppercase;
    text-underline-offset: 6px;
}
.header__ctaSecondary,
.header__right .btn--primary{
    font-size: clamp(16px, 1.2vw, 20px);
}
.header__ctaSecondary{
    padding-left: 36px;
    padding-right: 36px;
}
.header__ctaSecondary.btn--drift::before{ left: 12px;}
.header__ctaSecondary.btn--drift::after{ right: 12px;}
.header__ctaSecondary.btn--drift:hover::before{
    transform: translateY(-50%) translateX(-8px);
}
.header__ctaSecondary.btn--drift:hover::after{
    transform: translateY(-50%) translateX(8px);
}
.header__right .btn--primary.btn--brackets{
    padding-left: 30px;            /* більше місця під дужки */
    padding-right: 30px;
}
.header__right .btn--primary.btn--brackets::before{ left: 14px; }
.header__right .btn--primary.btn--brackets::after { right: 14px; }
@media (max-width: 1200px){
    .header__right{ gap: 12px; }
    .header__contacts{ gap: 14px; }
    .header__ctaSecondary{
        padding: 0 14px;
    }
    .header__right .btn--primary.btn--brackets{
        padding-left: 34px;
        padding-right: 34px;
    }
    .header__right .btn--primary.btn--brackets::before{ left: 12px; }
    .header__right .btn--primary.btn--brackets::after { right: 12px; }
}
@media (max-width: 1200px) and (min-width: 769px){
    .header{ font-size: 14px;}

    .header__logo{ grid-column: 6 / 8; }

    .header__right{ grid-column: 8 / 13;
        gap: 10px;
    }

    .header__ctaSecondary{
        padding-left: 26px;
        padding-right: 26px;
    }

    .header__ctaSecondary,
    .header__right .btn{
        font-size: 14px;
    }
}
@media (max-width: 1020px) and (min-width: 769px){
    .header__contacts a.is-underline{
        display: none;
    }

    .header__ctaSecondary{
        display: none;
    }
}
/*ХЕДЕР КІНЕЦЬ*/
/*ГОЛОВНА ПОЧАТОК*/
.hero{
    position: relative;
    overflow: hidden;
    display:block;
    background: var(--white);
}
.hero__bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("/assets/grid-home-DENO_oND.svg") no-repeat left center;
    background-size: cover;
    pointer-events: none;
    z-index: 1;
}
.hero__kicker{ grid-row: 1; z-index: 2; }
.hero__title{  grid-row: 2; z-index: 2; }
.hero__desc{   grid-row: 3; margin: 0; z-index: 2; }
/* важливо: прибрати старі margin:50px 0 */
.hero__cta{    grid-row: 4; margin-top: 12px; position: relative; z-index: 2; }
/* 3) шафа спанить 4 ряди і не “роздуває” тільки перший */
/* шафа сидить у першому рядку (не роздуває 3-4 ряд) */
.hero__right{
    grid-column: 9 / 13;
    grid-row: 1 / 4;         /* ВАЖЛИВО: не 1/5 */
    align-self: start;
    justify-self: start;
    position: relative;
    z-index: 2;
}
.hero__inner{
    align-items: start;
    align-content: start;
    grid-auto-rows: min-content;
    position: relative;
    padding-top: 80px; /* відступ для контенту зверху */
}
.hero__left{
    display: contents;
}
.hero__kicker{
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--black);
    grid-column: 3 / 7;
    margin: 0 0 20px;
    position: relative;
    z-index: 2;
}
.hero__kicker span{
    display:block;
}
.hero__title{
    font-family: var(--font3), sans-serif;
    font-weight: 400;
    color: var(--black);
    text-transform: uppercase;
    font-size: clamp(64px, 9vw, 180px);
    line-height: 0.85;
    letter-spacing: -0.05em;
    white-space: nowrap;
    grid-column: 2 / 7;
    margin: 0 0 10px;
    position: relative;
    z-index: 2;
}
.hero__desc{
    font-family: var(--font-family), sans-serif;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--black);
    font-weight: 100;
    grid-column: 2 / 7;
    margin: 0;
    position: relative;
    z-index: 2;
}
/* Перший рядок починається з 3-ї колонки */
.hero__desc::before{
    content:"";
    float:left;
    width: calc((100% / 5) * 1); /* відступ 1 колонка з 5-ти (grid 2/7), текст починається з 3-ї загальної */
    height: 1em; /* 1 рядок тексту */
}
.hero__desc-dark{
    display: inline;
}
.hero__inner,
.hero__left,
.hero__right{
    background: transparent !important;
}
.light-grey{
    color: var(--lightgrey);
}
.margin-left{
    margin-left: 15%;
}
.hero .hero__right{
    padding-top: 0;
    align-self: start;
    justify-self: start;
}
.hero__right{
    grid-column: 9 / 13;
    justify-self: start;
    align-self: start;
}
.hero__imgWrap{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 340px;
    max-width: 340px;
    z-index: 1;
    --hero-stand-width: 239px;
    --hero-stand-dot: 4px;
}
/* Окремий псевдоелемент краще за background секції: лінія завжди прив'язана до шафи */
.hero__imgWrap::after{
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    width: var(--hero-stand-width);
    height: var(--hero-stand-dot);
    transform: translateX(-5%);
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle, var(--lightgrey) 0 2px, transparent 2.1px) left center / var(--hero-stand-dot) var(--hero-stand-dot) no-repeat,
        radial-gradient(circle, var(--lightgrey) 0 2px, transparent 2.1px) right center / var(--hero-stand-dot) var(--hero-stand-dot) no-repeat,
        linear-gradient(var(--lightgrey), var(--lightgrey)) center / 100% 1px no-repeat;
}
/*
Ліва крапка на кінці лінії (тимчасово вимкнено)
.hero__imgWrap::before{
    content: "";
    position: absolute;
    bottom: -1px;
    left: 10%;
    width: 4px;
    height: 4px;
    background: transparent;
    border: 1px solid var(--grey);
    border-radius: 50%;
    z-index: 8;
}
*/
/*
Права крапка на кінці лінії (тимчасово вимкнено)
.hero__imgWrap::after{
    content: "";
    position: absolute;
    bottom: -1px;
    right: 10%;
    width: 4px;
    height: 4px;
    background: transparent;
    border: 1px solid var(--grey);
    border-radius: 50%;
    z-index: 8;
}
*/
.hero__image{
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
/*
Лінія під шафою, на якій вона стоїть (тимчасово вимкнено)
.hero__right::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--lightgrey) 2%, var(--lightgrey) 98%, transparent 100%);
    z-index: 6;
}
*/
/* кнопка реально по центру контейнера */
.hero__cta{
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 12px;
}
/* ---------- intro -блок з каскою--------- */
.intro{ padding: 34px 0 40px; }
.intro__text{
    text-transform: uppercase;
    padding: 80px 0 60px;
    color: var(--black);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
/* Engineering page styles moved to css/engineering.css (desktop/tablet)
   Mobile engineering styles are kept in css/mobile.css */
/* intro__inner має бути grid12 (як у hero/header) */
.intro__inner{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(12px, 1.8vw, 24px);
    row-gap: 26px;
    align-items: start;
}
/* робимо wrapper “невидимим” для гріда */
.intro__card{
    display: contents;
}
/* верхній рядок тексту — через всі колонки */
.intro__text{
    grid-column: 1 / -1;
}
/* ліва половина: каска (1–6) */
.intro__media{
    grid-column: 1 / 7;
}
/* права половина: картка (8–12) */
.intro__copy{
    grid-column: 7 / 13;
}
.intro__media{
    background:#111;
    border-radius: 10px;
    overflow:hidden;
}
.intro__media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Точкова стабілізація переносів у блоці з каскою */
@media (max-width: 1440px) and (min-width: 1241px){
    .intro__text{
        font-size: 24px;
        line-height: 1.22;
        padding: 68px 0 54px;
        text-wrap: balance;
    }

    .intro__text br{
        display: none;
    }
}
@media (max-width: 1240px) and (min-width: 769px){
    .intro__text{
        font-size: 22px;
        line-height: 1.2;
        padding: 56px 0 44px;
        text-wrap: balance;
    }

    .intro__text br{
        display: none;
    }

    .intro__text-top,
    .intro__text-bottom,
    .intro__text-bottomBlack,
    .intro__text .light-grey{
        display: inline;
    }
}
.intro__copy{
    padding: 28px 24px;
    border: 1px solid var(--lightgrey);
    border-radius: 12px;
    background: var(--white);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.intro__p{
    font-family: var(--font-family), sans-serif;
    font-weight: 100;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--orange);
    margin-top: 0;
}
.intro__content{
    font-family: var(--font-family),sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--grey);
}
.intro__aside{
    font-family: var(--font-family),sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--grey);
    padding: 20px 40px 10px;
}
.intro__actions{
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    font-family: var(--font-family),sans-serif;
    font-weight: 400;
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--grey);
    flex-wrap:nowrap;
    margin-top: auto;      /* ⬅️ притискає блок з кнопками вниз */
    padding-top: 18px;
    margin-left: 40px;

}
.intro__link{
    position: relative;
    display: inline-flex;
    padding: 0 18px;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    transition: color .2s ease;

}
/* дужки */
.intro__link::before,
.intro__link::after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--orange-light);
    transition: transform .18s ease;
    line-height: 1;
}
.intro__link::before{
    content: "[";
    left: 0;
}
.intro__link::after{
    content: "]";
    right: 0;
}
/* hover drift */
.intro__link:hover::before{
    transform: translateY(-50%) translateX(-8px);
}
.intro__link:hover::after{
    transform: translateY(-50%) translateX(8px);
}
.intro__link:hover{
    color: var(--black);
}
/* ---------- engineering ---------- */
.engineering{
    padding: 48px 0 66px;
    position: relative;
    overflow: hidden;
}
.engineering .container.grid12 { align-items: start; }
.engineering__top,
.engineering__content{
    display: contents;
}
.engineering .intro__p{
    grid-column: 1 / 3; /* старт з 1-ї, компактно */
    margin: 0 0 16px;
}
.engineering__bgText{
    position: absolute;
    left: -4%;
    top: 58%;
    transform: translateY(-50%);
    font-family: var(--font3), sans-serif;
    font-weight: 400;
    font-size: clamp(140px, 14vw, 320px);
    letter-spacing: -0.04em;
    line-height: 0.82;
    color: var(--grey-pale);
    white-space: nowrap;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
    z-index: -1;
    opacity: 1;
}
.engineering .container{
    position: relative;
    z-index: 2;
}
.engineering__inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.engineering__top .engineering__headline{
    padding: 0;
    margin: 0;
    max-width: 100%;                 /* під макет */
    font-family: var(--font-family), sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: clamp(17px, 4.5vw, 20px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--black);
}
.engineering__headline{
    display: contents;
    margin: 0;
    padding: 0;
}
.engineering__headline-main{
    display: block;
    grid-column: 1 / 6;
    overflow-wrap: normal;
    white-space: normal;
}
.engineering__headline-main br,
.engineering__headline-sub br{
    display: block;
}
/* сірий рядок з відступом вправо як у макеті */
.engineering__headline-sub{
    display: block;
    color: var(--lightgrey);
    margin-bottom: 30px;
    grid-column: 3 / 8;   /* 3..7 — як ти хочеш */
    padding-left: 0;      /* важливо */
}
.engineering__title {
    font-family: var(--third-family), sans-serif;
    font-size: clamp(28px, 2.2vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 20px 0 0;
    font-weight: 500;
    color: var(--black);
}
.engineering__left{
    max-width: 480px;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -0.03em;
    color: var(--black);
    grid-column: 3 / 7;    /* 3,4,5,6 */
    margin-left: 0;
    margin-top: 22px;
}
.engineering__left p{ margin: 0; }
.h2{
    font-family: var(--font-family), sans-serif;
    font-size: 22px;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin:0 0 12px;
    color: var(--black);
}
.engineering__right {
    grid-column: 7 / 13;   /* 7..12 */
    margin-top: 22px;
}
.muted{ color:#9e9e9e; font-size: 12px; line-height: 1.6; }
/* контейнер пункту */
.engItem {
    margin-bottom: 10px;
}
/* сам таб */
.engRow{
    display: flex;
    align-items: center;
    width:100%;
    gap: 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    padding: 14px 16px;
    background:var(--black);
    text-transform: uppercase;
    font-family: var(--font3), sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--lightgrey);
}
/* відкритий таб стає оранжевим */
.engRow.is-open{
    color: var(--orange);
}
/* кнопка-стрілка справа */
.engRow__arrowBtn{
    margin-left: auto;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 999px;
}
/* щоб було приємно наводити */
.engRow__arrowBtn:hover{
    background: rgba(255,255,255,.06);
}
/* іконка */
.engRow__arrowIcon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    max-width: none !important;
    max-height: none !important;
    transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(0deg);
    transform-origin: center;
}
.js-engRow.is-open .engRow__arrowIcon{
    transform: rotate(180deg);
}
/* панель опису (під табом) */
.engRowPanel{
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
    padding: 0 16px;
}
.engItem::after{
    content:"";
    display:block;
    height:1px;
    background:#dedede;
    margin-top: 14px;
}
.js-engPanel{

}
.engRowPanel.is-open{
    max-height: 600px;
}
.engRowPanel p{
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: 0.02em;
    background: var(--grey-pale);
    border-radius: 12px;
    padding: 10px 20px;
    margin: 20px 0 18px;
    font-family: var(--font-family),sans-serif;
    font-weight: 400;
    color: var(--grey-dark);
}
.engRow img{ width:18px; height:18px; }
.engineering__ctaLine{
    justify-content:space-between;
    gap: 30px;
    padding: 32px 0;
    grid-column: 7 / 13;      /* старт як акордіон */
    display: grid;
    grid-template-columns: 1fr auto;  /* зліва текст/кнопка, справа CTA */
    align-items: start;

}
.engCta{
    min-width: 0;
    display:flex;
    flex-direction:column;
    gap: 6px;
}
.engCta__title{
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0 18px;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--grey);
    text-decoration: none;
    transition: color .2s ease;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    border: none;
}
.engCta__title::before,
.engCta__title::after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    line-height: 1;
    color: var(--orange);
    transition: transform .18s ease;
    pointer-events: none;
}
.engineering__ctaLine .btn--drift{
    padding-left: 24px;
    padding-right: 24px;
    width: fit-content;
}
.engineering__ctaLine .btn--drift::before{
    left: 6px;
}
.engineering__ctaLine .btn--drift::after{
    right: 6px;
}
.engCta__title::before{ content:"["; left: 0; }
.engCta__title::after { content:"]"; right: 0; }
.engCta__title:hover::before{ transform: translateY(-50%) translateX(-8px); }
.engCta__title:hover::after { transform: translateY(-50%) translateX(8px); }
.engCta__sub{
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: -0.03em;
    color: var(--grey-dark);
    max-width: 320px;
}
.engineering__ctaLine .btn{
    justify-self: end;
}
/* Button brackets via pseudo + drift (no inner spans needed) */
.btn--bracketsPseudo{
    position: relative;
    padding-left: 52px;
    padding-right: 52px;
}
.btn--bracketsPseudo::before,
.btn--bracketsPseudo::after{
    position:absolute;
    top:50%;
    transform: translateY(-50%) translateX(0);
    line-height: 1;
    color: #fff;
    transition: transform .18s ease;
    pointer-events:none;
}
.btn--bracketsPseudo::before{ content:"["; left: 20px; }
.btn--bracketsPseudo::after { content:"]"; right: 20px; }
.btn--bracketsPseudo:hover::before{ transform: translateY(-50%) translateX(-10px); }
.btn--bracketsPseudo:hover::after { transform: translateY(-50%) translateX(10px); }
@media (max-width: 900px){
    .engineering__ctaLine{
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}
.engineering__ctaLine .muted{
    margin: 0;
}
.engineering__ctaLine > div{
    font-family: var(--font-family), sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: var(--grey-dark);
}
@media (max-width: 900px){
    .engineering__ctaLine{
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: start;
    }
    .engineering__ctaLine .btn{
        justify-self: start;
    }
}
/* ===== WHY US (as in mockup) ===== */
.whyus{
    padding: 56px 0 40px;
    background:#fff;
}
.whyus__inner{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(12px, 1.8vw, 24px);
    align-items:start;
}
.whyus{
    padding: 56px 0 40px;
    position: relative;
    overflow: hidden;
}
.whyus__left{
    grid-column: 1 / 7;
}
.whyus__tabs{
    grid-column: 7 / 13;  /* 7..12 */
}
.whyus .intro__p{
    margin-top: 0;
}
.whyus::before{
    content:"";
    position:absolute;
    inset:0;
    background:url('/assets/bg-circles-C9ujFKrU.svg') center center no-repeat;
    background-size: 70%;
    pointer-events:none;
    z-index:0;
}
.whyus > *{
    position:relative;
    z-index:1;
}
.whyus__text{
    font-family: var(--font-family), sans-serif;
    text-transform: uppercase;
    padding: 40px 0 60px;
    color: var(--black);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
/* На середніх та малих екранах br не працюють - текст переноситься природно */
@media (max-width: 1400px) {
    .whyus__text br {
        display: none;
    }
    .whyus__text {
        font-size: 14px;
        max-width: 520px;
    }
}
@media (max-width: 1024px) {
    .whyus__text {
        font-size: 13px;
        max-width: 450px;
    }
}
.whyReveal{
    --count: 10;            /* JS overwrite */
    --item-h: 76px;
    --gap: 1px;
    --expanded-step: calc(var(--item-h) + var(--gap));
    --collapsed-step: 26px; /* наскільки “стиснутий” стек у дефолті */
}
.whyPanel{
    width: 100%;
    border-radius: 22px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    /* min-height встановлює JS динамічно */
    min-height: calc(var(--item-h) + 40px);
}
.whyItem{
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    height: var(--item-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    padding: 20px;
    border-radius: 18px;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--lightgrey);
    color: var(--grey-dark);
    /* transform повністю керується JS */
    will-change: transform;
    opacity: 1;
}
.whyItem span{ min-width:0; }
.whyDot{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: var(--grey-dark);
    flex: 0 0 20px;
}
.whyItem.is-muted{
    background: var(--lightgrey);
    color: var(--grey-dark);
}
.whyItem.is-accent{
    background: var(--orange);
    border-color: transparent;
    color: var(--grey-dark);
}
.whyItem.is-accent .whyDot{
    background: rgba(10,6,6,.75);
}
/* ===== WHY US: remove "transparency" when stacked (desktop) ===== */
.whyPanel .whyItem{
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
    /* головне: непрозорий фон, бо елементи перекриваються */
    background: var(--grey-pale);
}
.whyPanel .whyItem.is-muted{
    background: var(--lightgrey);
}
.whyPanel .whyItem.is-accent{
    background: var(--orange);
}
/* текст завжди темний */
.whyPanel .whyItem,
.whyPanel .whyItem span{
    color: var(--grey-dark);
}
/* accessibility */
@media (prefers-reduced-motion: reduce){
    .whyItem{ will-change: auto; }
}
/* ---------- partners ---------- */
.partners__title{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 80px;
    width: fit-content;
    position: relative;
    padding: 0 18px;
    font-family: var(--font-family), sans-serif;
    font-weight: 100;
    font-size: 18px;
    line-height: 110%;
    letter-spacing: -0.03em;
    color: var(--orange);
    text-transform: none;
}
.partners__title::before,
.partners__title::after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    color: var(--lightgrey);
    pointer-events: none;
}
.partners__title::before{ content:"["; left: 0; }
.partners__title::after { content:"]"; right: 0; }
.partners__title::before{ transform: translateY(-50%) translateX(0); }
.partners__title::after { transform: translateY(-50%) translateX(0); }
.partners__title:hover::before{ transform: translateY(-50%) translateX(-8px); }
.partners__title:hover::after { transform: translateY(-50%) translateX(8px); }
.partners{
    padding: 56px 0 44px;
}
.partners__inner{
    display:flex;
    gap: 40px;
    align-items:start;
}
.partners__inner img{ height:218px; width:368px; opacity:.95; }
/* ===== початок - experience__content--секція з цифрами ===== */
.experience{
    position: relative;
    min-height: 1300px;
    padding-top: clamp(80px, 10vh, 140px);
    padding-bottom: clamp(80px, 10vh, 140px);
    background: var(--black);
    overflow: hidden;
}
.experience__bgGlow{
    position:absolute;
    left:0;
    right:0;
    bottom: -2px;
    height:400px;
    background: url("/assets/glow-D20zywQf.png") center  bottom no-repeat;
    background-size: cover;
    animation: waveMove 6s ease-in-out infinite;
    will-change: filter, background-position;
    pointer-events:none;
}
/** --- рух фону */
/*@keyframes waveMove{*/
/*    0%   { background-position: 25% 50%; filter: hue-rotate(0deg) saturate(1.05); }*/
/*    25%  { background-position: 35% 50%; filter: hue-rotate(25deg) saturate(1.15); }*/
/*    50%  { background-position: 45% 50%; filter: hue-rotate(60deg) saturate(1.15); }*/
/*    75%  { background-position: 35% 50%; filter: hue-rotate(60deg) saturate(1.15); }*/
/*    100% { background-position: 100% 100%; filter: hue-rotate(0deg) saturate(1.05); }*/
/*}*/
/*.experience__inner{*/
/*    align-items: start;*/
/*    row-gap: 26px;*/
/*    padding-top: clamp(56px, 9vh, 110px);*/
/*}*/
.experience__top{
    display: contents;
}
.experience__kicker{
    grid-column: 1 / 8;
    grid-row: 1;
    justify-self: start;
    font-size: 14px;
    letter-spacing: .08em;
    color: var(--orange);
    text-transform: uppercase;
    font-family: var(--third-family), sans-serif;
    font-weight: 100;
    line-height: 110%;
}
.experience__lead{
    grid-column: 7 / 12;  /* 8-11 */
    grid-row: 1;
    margin: 0;
    justify-self: start;
    max-width: 62ch;
    text-transform: uppercase;
    text-align: start;
    font-family: var(--third-family),sans-serif;
    font-weight: 300;
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: var(--lightgrey);
}
.experience__content--desktop{
    grid-column: 7 / 13;
    grid-row: 2;
    justify-self: start;
    padding-top: 18px;
}
.experience__content--mobile{display: none; }
/* ===== Stats композиція (як у макеті) ===== */
.expGrid{
    display: grid;
    grid-template-columns: 3fr 2fr;
    column-gap: clamp(18px, 2vw, 44px);
    row-gap: 26px;
    --numSize: 160px;               /* розмір цифр */
    --step: 92px;                   /* крок вниз між числами (менше numSize => overlap) */
    --rightW: 260px;
    --gapX: 56px;
    /* підгін вертикалі підписів відносно числа */
    --captionShift: 34px;
    /* ключ: контролюємо накладення через висоту рядка */
    grid-auto-rows: var(--step);
    width: 100%;
    align-items: start;
    overflow: visible;
}
.expRow{ display: contents; }
.expNum{
    grid-column: 1;
    align-self: start;

    font-family: var(--font3), sans-serif;
    font-weight: 400;
    font-size: var(--numSize);
    line-height: 1;
    letter-spacing: -0.04em;

    background: linear-gradient(180deg, #fff 0%, #161616 62.33%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    position: relative;
    z-index: 1;
}
.expNum::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 40%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
}
.expTxt{
    grid-column: 2;
    align-self: start;
    padding-top: 16px;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.35;
    max-width: 32ch;
    word-break: normal;
    letter-spacing: -0.09em;
    text-transform: uppercase;
    color: var(--lightgrey);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
/* ===== EXPERIENCE ANIMATION ===== */
.expNum {
    /* дефолт: скрыт, смещен ВНИЗ (для появления снизу вверх) */
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    -webkit-text-fill-color 0.5s ease;
    will-change: opacity, transform, -webkit-text-fill-color;

    /* эффект наезжания: отрицательный margin создает перекрытие */
    margin-bottom: -30px;
    position: relative;
    z-index: 1;
}
.expTxt {
    grid-column: 2;
    align-self: start;
    padding-top: 16px;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: clamp(15px, 1vw, 18px);
    max-width: 32ch;
    word-break: normal;
    letter-spacing: -0.09em;
    text-transform: uppercase;
    color: var(--lightgrey);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    /* плавне появлення текста */
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    will-change: opacity, transform;
}
/* коли активна: видима й на місці */
.expRow.is-active .expNum {
    opacity: 1;
    transform: translateY(0);
}
.expRow.is-active .expTxt {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width:1440px){
    .experience__lead{
        grid-column: 6 / 12;}
    .experience__content--desktop{
        grid-column: 6 / 13;}
}
@media (max-width:1200px){
    .experience__kicker{
        grid-column: 1 / 4;}
    .experience__lead{
        grid-column: 5 / 12;}
    .experience__content--desktop{
        grid-column: 5 / 13;}
}
@media (max-width:1024px){
    .experience__kicker{
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .experience__lead{
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .experience__content--desktop{
        grid-column: 1 / -1;
        grid-row: 3;
    }
}
/* ЦИФРИ — жёлтый highlight під час лічення */
.expNum.is-highlight {
    -webkit-text-fill-color: #FC944A;

    background: linear-gradient(180deg, #ffe436 0%, #e25021 62.33%);
    -webkit-background-clip: text;
    background-clip: text;
}
/* ===== EXPERIENCE MOBILE ANIMATION ===== */
.experienceStat {
    /* дефолт: скрыт, смещен ВНИЗ (для появления снизу вверх) */
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
/* коли активна: видима й на місці */
.experienceStat.is-active {
    opacity: 1;
    transform: translateY(0);
}
/* ЦИФРИ на мобілці — жёлтий highlight під час лічення */
.experienceStat .experience__big {
    transition: -webkit-text-fill-color 0.5s ease;
    will-change: -webkit-text-fill-color;
}
.experienceStat .experience__big.is-highlight {
    -webkit-text-fill-color: var(--orange);
    background: linear-gradient(180deg, var(--orange) 0%, var(--orange) 62.33%);
    -webkit-background-clip: text;
    background-clip: text;
}
/* ===== кінець - experience__content--секція з цифрами ===== */
/* ===== початок - contacts--остання секція з формою ===== */
.contacts {
    padding: 60px 0 76px;
    position: relative;
    overflow: hidden;
}
.contacts::before{
    content: "";
    position: absolute;
    inset: 0;
    background: url("/assets/word-DF-0SBCn.svg") no-repeat;
    background-position: center top;
    background-size: min(900px, 70vw) auto;

    pointer-events: none;
    z-index: 0;
}
.contacts .container{
    position: relative;
    z-index: 1;
}
.contacts__inner{
    display: contents;
}
/* Заголовок: 1–4 */
.contacts__tittle{
    grid-column: 1 / 5;
}
/* Оранжевий текст зліва: 1–3 */
.contacts__left{
    grid-column: 1 / 4;
}
/* Форма справа: 7–12 */
.contacts__form{
    grid-column: 7 / 13;
}
.contacts__tittle{
    font-family: var(--third-family), sans-serif;
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 80px;
}
.contacts__text{
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.03em;
    color: var(--orange);
}
.contacts__consent {
    display: grid;
    row-gap: 8px;
    gap: 10px;
    margin-top: 6px;
    font-family: var(--third-family), sans-serif;
    cursor: pointer;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: -0.03em;
    color: var(--grey-dark);
    grid-template-columns: 14px 1fr;
    column-gap: 10px;
    align-items: start;
}
.contacts__consent .contacts__radio{
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: 2px;
}
.contacts__consent span{
    grid-column: 2;
    display: block;
}
.contacts__consent span:first-of-type{
    font-weight: 500;
}
.contacts__consent .light-grey{
    font-size: 12px;
    line-height: 1.35;
    color: rgba(0,0,0,.45);
    letter-spacing: -0.01em;
}
.contacts__radio{
    appearance:none;
    width:12px;
    height:12px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    position:relative;
    display:inline-block;
}
.contacts__radio::after{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:50%;
    background:var(--orange);
    transform:scale(0);
    transition:transform .15s ease;
}
.contacts__radio:checked::after{
    transform:scale(1);
}
.contacts__error{
    min-height:16px;
    font-size:12px;
    color:#ff3b30;
    margin:2px 0 4px;
}
/* submit alignment */
.contacts__submit{
    justify-self:end;
    margin-top:4px;
}
.contacts__submit .contacts__submit-text--mobile{
    display: none;
}
.contacts__consult-mob{
    display: none;
}
/* form — прозора, тільки сітка */
.contacts__form{
    background: transparent;     /* важливо */
    padding: 0;                  /* важливо */
    border-radius: 0;
    display: grid;
    gap: 14px;                   /* відстань між темною панеллю і низом */
    justify-self: end;
    width: 100%;
}
.contacts__row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
/* темний блок тільки для полів */
.contacts__panel{
    background: #111;
    border-radius: 10px;
    padding: 18px;
    display: grid;
    gap: 10px;
}
/* низ — на світлому фоні */
.contacts__bottom{
    display: grid;
    gap: 6px;
    padding: 0 6px;              /* легке вирівнювання як у макеті */
}
.contacts__submit{
    justify-self: end;
    margin-top: 6px;
}
.contacts__radio{
    border: 1px solid rgba(0,0,0,.35);
}
.field_contact{
    width:100%;
    padding: 10px 12px;
    height:44px;
    border-radius:10px;
    background: var(--black-background);
    color:var(--white);
    border:1px solid #000;   /* чорний default */
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease;
    text-transform: uppercase;
}
.field_contact--area{
    height: 86px;
    padding: 10px 12px;
    resize: vertical;
}
.field_contact:focus{
    border-color: var(--orange);
}
.field_contact:required:invalid:not(:placeholder-shown){
    border-color: var(--error);
    box-shadow: 0 0 0 2px rgba(204, 22, 2, .22);
}
.field_contact:valid:not(:placeholder-shown){
    border-color: var(--success);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, .20);
}
.contacts__form.is-submitted .field_contact:invalid{
    border-color: var(--error);
    box-shadow: 0 0 0 2px rgba(204, 22, 2, .22);
}
/* Після "торкання" поля */
.field_contact.is-touched:invalid{
    border-color: var(--error);
    box-shadow: 0 0 0 2px rgba(204, 22, 2, .22);
}
.contacts__form.is-submitted .field_contact:valid{
    border-color: var(--success);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, .20);
}
.field_contact.is-touched:valid{
    border-color: var(--success);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, .20);
}
/* Прибираємо білий фон автозаповнення */
.field_contact:-webkit-autofill,
.field_contact:-webkit-autofill:hover,
.field_contact:-webkit-autofill:focus,
.field_contact:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    transition: background-color 9999s ease-in-out 0s;
}
/* ===== PRELOADER (image-based) ===== */
.preloader{
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #5b5b5b;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.preloader__card{
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.preloader__image{
    max-width: 90%;
    max-height: 70%;
    object-fit: contain;
    opacity: 0.08;
    transition: opacity 180ms linear;
}
.preloader__progress{
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 40px;
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: #413E39;
}
.preloader__spinner{
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(65,62,57,.25);
    border-top-color: #413E39;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.preloader--hide{
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}
.btn__bracket{
    opacity: .95;
    transform: translateY(-.5px);
}
.btn--primary:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 122, 26, .28);
}
.header404__ctaBtn{
    background: none;
    padding: 0;
    height: auto;
}
.btn--brackets{
    position: relative;
    padding-left: 38px;
    padding-right: 38px;
}
.btn--brackets::before,
.btn--brackets::after{
    content: "[";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: inherit;
    line-height: inherit;
    color: currentColor;
    transition: transform .2s ease, opacity .2s ease;
}
.btn--brackets::after{
    content: "]";
}
.btn--brackets::before{
    left: 14px;
}
.btn--brackets::after{
    right: 14px;
}
.btn--brackets:hover::before{
    transform: translateY(-50%) translateX(-4px);
}
.btn--brackets:hover::after{
    transform: translateY(-50%) translateX(4px);
}
.btn--brackets:focus-visible{
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,132,0,.35);
}
.btn--brackets:active{
    position: relative;
    top: 1px;
}
/*hero*/
.hero__frame{
    position:relative;
    border-radius: 20px;
    overflow:hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.hero__hit{
    position:absolute;
    border-radius: 999px;
    background: transparent;
}
.hero__hit--cta{
    left: 78%;
    top: 6%;
    width: 18%;
    height: 8%;
}
.hero__hit--consult{
    left: 86%;
    top: 6%;
    width: 12%;
    height: 8%;
}
.process__item{
    position: relative;
    background: #0b0b0b;
    border-radius: 8px;
    padding: 18px 56px 18px 20px;
    cursor: pointer;
}
.process__arrow{
    position: absolute;
    top: 16px;
    right: 16px;
    width: 18px;
    height: 18px;
    pointer-events: none; /* важливо */
}
/*Модалка калькулятор*/
.modal{position:fixed; inset:0; display:none; z-index:999;}
.modal[aria-hidden="false"]{display:block;}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.65);}
.modal__panel{
    position:relative;
    width:min(520px, calc(100% - 32px));
    margin: 80px auto;
    background: var(--black);
    color:#fff;
    border-radius:18px;
    padding:24px;
}
.modal__close{
    position:absolute; top:12px; right:12px;
    width:36px; height:36px; border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    background:transparent; color:#fff; cursor:pointer;
}
.field{display:grid; gap:8px; margin:14px 0;}
.field input{
    height:44px; padding:0 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.14);
    background: var(--black-background);
    color:#fff;
}
.field textarea{
    border:1px solid rgba(255,255,255,.14);
    background: var(--black-background);
    color:#fff;
}
.result{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12);}
.result__big{font-size:18px;}
.result__meta{opacity:.8; font-size:13px; margin-top:6px;}
.page404 { background:#fff; }
.notfound {
    position: relative;
    min-height: calc(100vh - 96px);
    padding-top: 12px;
    overflow: hidden;
    background: #fff;
}
.notfound__gridBg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("/assets/grid-404-DXaU8owx.svg");
    background-repeat: repeat;
    background-size: 1400px 1400px;
    background-position: 0 0;
    opacity: 1;
}
.notfound__inner {
    position: relative;
    min-height: calc(100vh - 96px);
}
.notfound__hero{
    position: absolute;
    top: 138px;
    left: 50%;
    transform: translateX(-50%);
    width: 575px;
    height: auto;
    pointer-events: none;
    z-index: 1;
}
.notfound__copy{
    z-index: 2;
    padding-top: 520px;
}
.notfound__label{
    color:#FF822C;
    font-size: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-left: 200px;
}
.notfound__title{
    margin-left: 200px;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color:var(--black);
}
.notfound__text{
    margin-left: 100px;
    color:var(--grey);
    line-height: 1.35;
    text-transform: uppercase;
}
/* ===== HEADER 404 ===== */
.header404{
    background:#fff;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.header404__inner{
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 86px;
    flex-wrap: nowrap;
}
.header404__left{
    display: flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
}
.header404__right{
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
    flex-wrap: nowrap;
}
.header404__ctaText{
    white-space: nowrap;
    position: relative;
    padding: 0 16px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #413E39;
}
.header404__ctaText::before,
.header404__ctaText::after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ff7a00;
    font-weight: 600;
    line-height: 1;
}
.header404__ctaText::before{ content: "["; left: 0; }
.header404__ctaText::after{ content: "]"; right: 0; }
.header404__burger{
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    outline:none;
    box-shadow:none;
    border-radius:0;
}
.header404__burger:focus,
.header404__burger:active,
.header404__burger:focus-visible{
    outline:none;
    box-shadow:none;
}
.header404__lang{
    display:flex;
    align-items:center;
    gap:10px;
    color:#b2b2b2;
}
.header404__lang a{ color:#b2b2b2; text-decoration:none; }
.header404__lang a.is-active{ color:#ff7a00; }
.header404__contacts{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 42px;
    color:#c9c9c9;
}
.header404__contacts a{
    color:#c9c9c9;
    text-decoration:none;
    white-space:nowrap;
}
.header404__contacts a.is-underline{
    text-decoration: underline;
    text-underline-offset: 6px;
}
.header404__logo{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.header404__logo img{
    height: 40px;
    width: auto;
    display: block;
}
.header404__cta{
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 22px;
}
.header404__ctaText{
    color:#2d2d2d;
    letter-spacing:.03em;
}
.header404__btn{
    background:var(--orange);
    color:var(--white);
    border-radius:999px;
    padding: 14px 22px;
    text-decoration:none;
    white-space:nowrap;
}
/* ===== FOOTER 404 (dark) ===== */
.footer404{
    background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,0.06), transparent 60%) #070707;
    color: rgba(255,255,255,0.85);
}
.footer404__top{
    display:grid;
    grid-template-columns: 260px 260px 520px 260px 180px;
    gap: 46px;
    align-items:start;
}
.footer404__title{
    opacity:.9;
    margin-bottom: 10px;
}
.footer404__line{
    height:1px;
    background: rgba(255,255,255,.35);
    margin-bottom: 18px;
}
.footer404 a{
    color: rgba(255,255,255,.85);
    text-decoration:none;
    display:block;
    margin: 8px 0;
}
.footer404 .is-underline{ text-decoration: underline; text-underline-offset: 6px; }
.footer404__meta{
    margin: 12px 0 0;
    opacity:.92;
}
.footer404__socialRow{
    display:flex;
    gap: 34px;
    margin-top: 14px;
}
.footer404__socialLink{
    display:flex;
    align-items:center;
    gap: 10px;
}
.footer404__socialLink img{ width:20px; height:20px; display:block; opacity:.95; }
.footer404__qr{
    display:grid;
    gap: 18px;
    justify-items:end;
}
.footer404__qr img{
    width: 120px;
    height:auto;
    border-radius: 18px;
}
.footer404__brand{
    margin-top: 24px;
    font-size: 180px;
    line-height: .85;
    letter-spacing: .02em;
    color:#ff8a1f;
    padding: 0 0 18px;
    transform: translateY(18px);
}
/* ---------- footer ---------- */
:root{
    --header-h: 86px;
}
/* ===== DOCUMENTATION (docs.html) ===== */
.docsHero{
    position: relative;
    overflow:hidden;
    padding: 0;
}
.docsHero__inner{
    display: grid;
    grid-template-rows: auto 1fr auto;
    row-gap: clamp(24px, 3vw, 44px);
    padding-bottom: 40px;
}
.docsHero__top{
    max-width: 1146px;
}
.docsHero .docsTop__tabs{
    align-self: end;
    justify-self: start;
}
.docsTop{
    margin-top: auto;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.docsHero__actions{
    margin-top: -16px;
}
.docs .docsHero__titleCol{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(12px, 1.8vw, 24px);
    align-content: start;
}
.docs .docHero__title,
.docs .docsHero__actions{
    grid-column: 2 / 13;
}
.docs .docsTop__tabs{
    grid-column: 1 / -1;
}
.docs .docsHero__inner{
    display: flex;
    flex-direction: column;
}
.docsHero__titleCol{
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    flex-direction: column;
    max-width: 1146px;
}
.docsTop__inner{
    min-height: inherit;
    display: flex;
    position: relative;
    overflow: hidden;
}
.docHero__title{
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family), sans-serif;
    font-weight: 700;
    font-size: 72px;
    line-height: 100%;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--black);
}
.docsTop__tabs{
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    width: 100%;
    gap: clamp(14px, 1.6vw, 40px);
    align-self: stretch;
    margin-top: auto;
    font-family: var(--font-family-Thin), sans-serif;
    font-weight: 100;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--orange);
    white-space: nowrap;
    overflow: visible;
}
.docsTop__tab:nth-child(3){
    margin-left: auto;
}
@media (max-width: 1100px){
    .docsTop__tabs{
        flex-wrap: wrap;
        row-gap: 14px;
        column-gap: 24px;
    }
    .docsTop__tab:nth-child(3){
        margin-left: 0;
    }
}
.docsTop__tab{
    position: relative;
    background: var(--white );
    overflow: hidden;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color:var(--orange);
    text-decoration:none;
    white-space:nowrap;
}
.docsTop::before{
    content:"";
    position:absolute;
    inset:0;
    background: url("/assets/grid-doc-BY025Cb_.svg") repeat;
    background-size: 1242px 958px;
    background-position: 0 0;
    pointer-events:none;
    z-index: 0;
}
/* щоб контент був поверх сітки */
.docsTop > .container{
    position: relative;
    z-index: 1;
}
@media (min-width: 993px){
    .docsTop::before{
        display: none;
    }

    .docs .docsHero__inner{
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: auto;
        column-gap: clamp(12px, 1.8vw, 24px);
        padding-bottom: clamp(40px, 5vh, 64px);
        position: relative;
        isolation: isolate;
    }

    .docs .docsTop__bg{
        grid-column: 1 / 8;
        grid-row: 1 / -1;
        background: url("/assets/grid-doc-BY025Cb_.svg") no-repeat left top;
        pointer-events: none;
        z-index: 0;
    }

    .docs .docsHero__inner > :not(.docsTop__bg){
        grid-column: 1 / -1;
        grid-row: 1;
        position: relative;
        z-index: 1;
    }

    .docs .docsHero__top.docsHero__titleCol{
        width: 100%;
        max-width: none;
    }


    .docs .docsTop__tabs{
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: clamp(12px, 1.8vw, 24px);
        align-items: end;
        margin-top: 0;
        padding-top: clamp(24px, 4vh, 48px);
    }

    .docs .docsTop__tab{
        display: block;
        justify-self: start;
    }

    .docs .docsTop__tab:nth-child(1){ grid-column: 1 / 2; }
    .docs .docsTop__tab:nth-child(2){ grid-column: 3 / 4; }
    .docs .docsTop__tab:nth-child(3){
        grid-column: 9 / 10;
        margin-left: 0;
    }
    .docs .docsTop__tab:nth-child(4){ grid-column: 11 / 13; }
}
@media (max-width: 992px){
    .docs .docsTop__tabs{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 10px;
        align-items: start;
        width: 100%;
        white-space: normal;
        margin-top: 0;
    }

    .docs .docsTop__tab{
        display: block;
        white-space: normal;
    }

    /* рядок 1: ІНСТРУКЦІЇ зліва, КАТАЛОГИ справа */
    .docs .docsTop__tab:nth-child(4){ grid-column: 1; grid-row: 1; justify-self: start; text-align: left; }
    .docs .docsTop__tab:nth-child(3){ grid-column: 2; grid-row: 1; justify-self: end;   text-align: right; }

    /* рядок 2: СЕРТИФІКАТИ зліва, ТЕХНІЧНІ ПАСПОРТИ справа */
    .docs .docsTop__tab:nth-child(1){ grid-column: 1; grid-row: 2; justify-self: start; text-align: left; }
    .docs .docsTop__tab:nth-child(2){ grid-column: 2; grid-row: 2; justify-self: end;   text-align: right; }
}
.docsTop__tab:hover{ opacity:.85; }
/* 2) BLACK LINKS */
.docsLinks{
    background: var(--black);
    color: rgba(255,255,255,.85);
}
/* 2) BLACK LINKS — layout як у макеті */
.docsLinks__inner{
    display: grid;
    gap: 0;
    align-items: start;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(12px, 1.8vw, 24px);
    row-gap: clamp(56px, 6vw, 140px);
    padding: clamp(48px, 6vw, 110px) 0;
}
/* важливо: min-width у grid часто ламає адаптив */
.docsLinks__col{ min-width: 0; }
.docsLinks__col{
    min-width: 0;
}
/* remove custom width override so docs section uses the same container/grid width as the rest */
.docsLinks__head{
    font-family: var(--font3), sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2; /* краще ніж 100% */
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 18px;
}
.docsLinks__head::after{
    content: "";
    display: block;
    width: 71px;
    margin-top: 12px;         /* відступ від тексту */
    border-top: 1px solid var(--grey);
}
.docsLink{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    padding: 14px 0;
    text-decoration:none;
}
.docsLink__text{
    font-family: var(--font-family), sans-serif;
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
}
.docsLinks__col#certs{
    grid-column: 9 / 13; /* старт з 9-ї колонки */
    grid-row: 1;
    width: 100%;
    max-width: none;
}
.docsLinks__col#manuals{
    grid-column: 3 / 6;  /* старт з 3-ї, покриває 3-5 */
    grid-row: 1;
    width: 100%;
    max-width: none;
}
.docsLinks__col#catalogs{
    grid-column: 10 / 13; /* трохи раніше лінії 11-12, але праворуч */
    grid-row: 2;
    width: 100%;
    max-width: none;
}
.docsLink__arrow{
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
.docsLink__arrow .docsArrow{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;

}
.docsArrow--orange{ opacity:0; }
.docsLink:hover .docsArrow--white{ opacity:0; }
.docsLink:hover .docsArrow--orange{ opacity:1; }
.docsLink:hover .docsLink__arrow{
    transform: translate(2px,-2px);
}
/* 3) FORM */
.docsForm{
    position: relative;
    overflow: hidden;
    background: var(--white);
    padding: 110px 0;
}
.docsForm::before{
    content: "";
    position: absolute;
    inset: 0;
    background: url("/assets/background-doc1-form-D7u_QYXE.svg") no-repeat center center;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
}
/* grid12 class provides 12-column grid */
.docsForm__inner{
    position: relative;
    z-index: 1;
    align-items: start;
    row-gap: 0;
}
.docsForm__title{
    grid-column: 1 / -1;
    margin: 0 0 50px;
    text-transform: uppercase;
    font-family: var(--font-family), sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--black);
}
.docsForm__left{
    grid-column: 1 / 7;
    align-self: start;
}
.docsForm__subtitle{
    margin: 0;
    align-self: start;
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -0.03em;
    color: var(--orange);
}
.docsForm__right{
    grid-column: 7 / 13;
    width: 100%;
    max-width: none;
}
.docsForm .reqForm,
.docsForm .reqForm__box{
    width: 100%;
    max-width: none;
}
.reqForm__box{
    border-radius: 14px;
    padding: 18px;
    background: #0A0606;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.reqField--full{ grid-column: 1 / -1; }
.reqField__input,
.reqField__textarea{
    width: 100%;
    border-radius: 8px;
    padding: 10px 12px;
    outline: none;
    font-family: var(--font-family-Thin),sans-serif;
    font-weight: 300;
    line-height: 100%;
    text-transform: uppercase;
    color: var(--white);
}
.reqField__input{ height: 34px; }
.reqField__textarea{ height: 62px; resize: none; }
/* form look */
.reqForm{ width: 100%; }
.reqForm__box{
    background: var(--black);
    border-radius: 14px;
    padding: 18px;
}
.reqForm__grid{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.reqField{ flex: 1 1 calc(50% - 6px); }
.reqField--full{ flex: 1 1 100%; }
.reqField__input,
.reqField__textarea{
    width:100%;
    border: 1px solid var(--black-background);
    background: var(--black-background);
    color:var(--white);
    border-radius: 8px;
    padding: 12px 12px;
    outline: none;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.reqField__textarea{
    min-height: 74px;
    resize: vertical;
}
.reqField__input::placeholder,
.reqField__textarea::placeholder{ color: rgba(255,255,255,.55); }
/* Keep docs form fields dark with light text even after browser autofill/paste helpers */
.docsForm .reqField__input,
.docsForm .reqField__textarea{
    color: var(--white);
    caret-color: var(--white);
    background: var(--black-background);
}
.docsForm .reqField__input:focus,
.docsForm .reqField__input:active,
.docsForm .reqField__textarea:focus,
.docsForm .reqField__textarea:active{
    color: var(--white);
    background: var(--black-background);
    border-color: var(--orange);
    box-shadow: 0 0 0 2px rgba(255,122,0,.55);
}
.docsForm .reqField__input:required:invalid:not(:placeholder-shown),
.docsForm .reqField__textarea:required:invalid:not(:placeholder-shown){
    border-color: var(--error);
    box-shadow: 0 0 0 2px rgba(204,22,2,.22);
}
.docsForm .reqField__input:valid:not(:placeholder-shown),
.docsForm .reqField__textarea:valid:not(:placeholder-shown){
    border-color: var(--success);
    box-shadow: 0 0 0 2px rgba(46,125,50,.20);
}
.docsForm .reqField__input:-webkit-autofill,
.docsForm .reqField__input:-webkit-autofill:hover,
.docsForm .reqField__input:-webkit-autofill:focus,
.docsForm .reqField__input:-webkit-autofill:active,
.docsForm .reqField__textarea:-webkit-autofill,
.docsForm .reqField__textarea:-webkit-autofill:hover,
.docsForm .reqField__textarea:-webkit-autofill:focus,
.docsForm .reqField__textarea:-webkit-autofill:active{
    -webkit-text-fill-color: var(--white);
    caret-color: var(--white);
    -webkit-box-shadow: 0 0 0 1000px var(--black-background) inset;
    box-shadow: 0 0 0 1000px var(--black-background) inset;
    border-color: rgba(255,255,255,.10);
    transition: background-color 5000s ease-in-out 0s;
}
.reqAgree{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 4px;
    font-size: 11px;
    font-family: var(--font-family), sans-serif;
    font-weight: 100;
    line-height: 110%;
    letter-spacing: -0.03em;
    color: var(--grey);
}
.reqAgree__check{ position: absolute; opacity: 0; pointer-events: none; }
.reqAgree__dot{
    position: relative;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(0,0,0,.35);
    border-radius: 50%;
    display: inline-block;
}
.reqAgree__dot::after{
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--orange);
    transform: scale(0);
    transition: transform .15s ease;
}
.reqAgree__check:checked + .reqAgree__dot{
    border-color: var(--orange);
}
.reqAgree__check:checked + .reqAgree__dot::after{
    transform: scale(1);
}
.reqGdpr{
    margin: 0 0 18px 20px;
    max-width: 640px;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--lightgrey);
    text-transform: none;
}
.reqBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: none;
    background: var(--orange);
    color: var(--white);
    border-radius: 999px;
    padding: 12px 36px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .2s ease;
}
.reqBtn::before,
.reqBtn::after {
    position: absolute;
    top: calc(50% - 1px);
    transform: translate3d(0, -50%, 0);
    color: var(--white);
    line-height: 1;
    font-size: inherit;
    transition: transform .18s ease;
    pointer-events: none;
}
.reqBtn::before {
    content: "[";
    left: 20px;
}
.reqBtn::after {
    content: "]";
    right: 20px;
}
.reqBtn:hover {
    filter: brightness(.95);
}
.reqBtn:hover::before {
    transform: translate3d(-6px, -50%, 0);
}
.reqBtn:hover::after {
    transform: translate3d(6px, -50%, 0);
}
.reqBtn:active {
    background: var(--grey);
    color: var(--white);
}
.reqBtn:active::before,
.reqBtn:active::after {
    color: currentColor;
}
.docsForm .reqForm{
    display: flex;
    flex-direction: column;
}
.docsForm .reqBtn{
    align-self: flex-end;
}
/* docs form success state (same behavior as technical library) */
.docsReqSuccess{
    display: none;
    margin-top: 32px;
    padding-left: 18px;
    position: relative;
}
.docsReqSuccess::before{
    content: "[";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--orange);
    font-family: var(--font-family), sans-serif;
    font-size: 14px;
    line-height: 1;
}
.docsReqSuccess__lead{
    margin: 0;
    font-family: var(--font-family), sans-serif;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.26);
}
.docsReqSuccess__note{
    margin: 10px 0 0;
    font-family: var(--font-family), sans-serif;
    font-size: 14px;
    line-height: 1.35;
    color: var(--grey-dark);
}
.docsReqSuccess[aria-hidden="false"]{
    display: block;
}
.uLinkBrackets{
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--grey-dark);
    text-decoration:none;
    font-size: clamp(18px, 1.2vw, 24px);
    line-height: 1.05;
    letter-spacing: -0.08em;
    text-transform:uppercase;
    white-space:nowrap;
    position: relative;
    padding: 0 18px;
}
.uLinkBrackets::before,
.uLinkBrackets::after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    transition: transform .18s ease;
    line-height: 1;
}
.uLinkBrackets::before{
    content: "[";
    left: 0;
    color: var(--orange);
}
.uLinkBrackets::after{
    content: "]";
    right: 0;
    color: var(--orange);
}
.uLinkBrackets:hover::before{
    transform: translateY(-50%) translateX(-8px);
}
.uLinkBrackets:hover::after{
    transform: translateY(-50%) translateX(8px);
}
.uLinkBrackets:hover{ opacity:.85; }
.uLinkBrackets--right{ justify-content:flex-end;
    width:fit-content; margin-left:auto; }
.uLinkDoc{
    font-family: var(--font-family), sans-serif;
    font-weight: 400;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--grey-dark);
    text-decoration:none;
    font-size: clamp(18px, 1.2vw, 24px);
    line-height: 1.05;
    letter-spacing: -0.08em;
    text-transform:uppercase;
    white-space:nowrap;
    position: relative;
    padding: 0 18px;
}
.uLinkDoc::before,
.uLinkDoc::after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    transition: transform .18s ease;
    line-height: 1;
}
.uLinkDoc::before{
    content: "[";
    left: 0;
    color: var(--orange);
}
.uLinkDoc::after{
    content: "]";
    right: 0;
    color: var(--orange);
}
.uLinkDoc:hover::before{
    transform: translateY(-50%) translateX(-8px);
}
.uLinkDoc:hover::after{
    transform: translateY(-50%) translateX(8px);
}
.uLinkDoc:hover{ opacity:.85; }
.pillBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--orange);
    color:var(--white);
    border:none;
    border-radius:999px;
    padding:12px 18px;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
}
.pillBtn:hover{ opacity:.92; }
.pillBtn--wide{ padding:14px 22px; width:max-content; }
/* ====== product details====== */
/* контейнер куди підвантажуємо */
#productDetails {
    display: none;
}
/* коли HTML підвантажено */
#productDetails.is-ready {
    display: block;
}
/* анімація: початковий стан */
#productDetails .productDetails {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .35s ease, transform .35s ease;
    will-change: opacity, transform;
}
/* активний стан */
#productDetails.is-open .productDetails {
    opacity: 1;
    transform: translateY(0);
}
/* ====== LIBRARY (library.html) ====== */
/* ====== 1) HERO WHITE ====== */
.techLibHero{
    position:relative;
    background:var(--white);
    padding: 0 0 43px;
    overflow:hidden;
}
/* background-lib фон */
.techLibHero::after{
    content:"";
    position:absolute;
    left: calc(var(--gutter, 12px) + (100% / 12 * 0));
    top: 0;
    width: calc(100% / 12 * 11);
    height: 100%;
    background: url("/assets/background-lib-C08l7wFZ.svg") no-repeat top center;
    background-size: contain;
    pointer-events:none;
    z-index: 0;
}
/* прибрано дублюючий шар сітки, лишаємо один фон у hero */
.techLibHero::before{
    content: none;
}
.techLibHero__inner{
    position: relative;
    z-index: 1;
    align-items: start;
}
/* верх */
.techLibHero__top{
    max-width: 980px;
}
.techLibHero__titleCol{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(12px, 1.8vw, 24px);
    align-items: start;
}
.techLibHero__title{
    grid-column: 1 / -1;
    margin: 150px 0 40px 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(12px, 1.8vw, 24px);
    row-gap: 12px;
    font-size: clamp(92px, 7.2vw, 111px);
    text-transform: uppercase;
    color: var(--black);
    position: relative;
    align-items: start;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: -0.01em;
}
.techLibHero__titleTop,
.techLibHero__titleBottom{
    display: block;
    font-family: var(--third-family), sans-serif;
    font-weight: 700;
}
.techLibHero__titleTop{
    grid-column: 1 / span 5;
    grid-row: 1;
}
.techLibHero__titleBottom{
    grid-column: 3 / span 7;
    grid-row: 2;
    margin: 0;
}
.techLibHero__brandInTitle{
    position: static;
    grid-column: 1 / span 2;
    grid-row: 2;
    align-self: start;
    padding-top: 14px;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-transform: none;
    color: var(--orange);
    opacity: 1;
    pointer-events: none;
    max-width: none;
    white-space: nowrap;
}
.techLibHero__brand{
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 24px;
    opacity: .7;
}
.techLibHero__actions{
    grid-column: 3 / span 4;
    display: grid;
    gap: 10px;
    margin-bottom: 100px;
    margin-left: 0;
    justify-items: start;
}
.techLibHero__actions .uLinkBrackets,
.techLibHero__actions .uLinkDoc{
    width: max-content;
    justify-self: start;         /* для grid */
}
.right{
    display: flex;
    justify-content: flex-end;
}
.techLibHero .uLinkBrackets{
    color: rgba(65,62,57,.82);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.techLibHero .uLinkBrackets::before,
.techLibHero .uLinkBrackets::after{
    color: var(--orange);
}
.techLibHero .uLinkBrackets:hover{ color: rgba(65,62,57,.95); }
/* низ: три колонки */
/* 3 колонки + 2 рядки: заголовки / тексти */
.techLibHero__bottom{
    grid-column: 1 / -1;
    margin-top: 120px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(12px, 1.8vw, 24px);
    row-gap: 18px;
    align-items: start;
}
/* 1) карточки */
.techLibHeroCard{ min-width:0; align-self:start; }
.techLibHeroCard--docs{
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
}
.techLibHeroCard--schemes{
    grid-column: 7 / span 2;
    grid-row: 1;
}
.techLibHeroCard--montage{
    grid-column: 10 / 13;
    grid-row: 1;
    justify-self: end;
    text-align: right;
}
.techLibHeroCard--montage .techLibHeroCard__titleLink{
    text-align: right;
}
/* заголовок у всіх карточках — у 1 рядку */
.techLibHeroCard__titleLink{
    display: inline-block;
    grid-row: 1;
}
/* 2) оранжевий текст тільки з 1-ї колонки — у 2 рядку */
.techLibHeroCard__text--orange{
    grid-row: 2;
    margin-top: 16px;
}
.techLibHeroCard__text{
    max-width: 520px;
}
.techLibHeroCard--docs .techLibHeroCard__text{
    max-width: 260px;        /* як в макеті: короткий оранжевий текст */
}
/* Порожній блок = третя колонка другого рядка */
.techLibHeroCard--spacer{
    flex: 0 0 25%;
    min-height: 1px;
}
/* Сірий текст під 2+3 (50%) */
.techLibHeroNote{
    grid-column: 7 / 13;
    grid-row: 2;
    margin-top: 0;
    max-width: none;
    width: 100%;
    justify-self: start;
    color: rgba(65,62,57,.42);
}
.techLibHeroNote p{
    margin: 0;
}
.techLibHeroNote p + p{
    margin-top: 18px;
}
.techLibHeroNote p{ margin: 0; }
.techLibHeroNote p + p{ margin-top: 18px; }
.techLibHeroCard__titleLink{
    display: inline-block;
    font-family: var(--third-family), sans-serif;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
    line-height: 100%;
    letter-spacing: -0.03em;
}
.techLibHeroCard__titleLink:hover{ color: var(--black); }
.techLibHeroCard__text{
    margin-top: 22px;
    font-size: 14px;
    line-height: 1;
    color: var(--orange);
    max-width: 520px;
    letter-spacing: -0.03em;
}
.techLibHeroCard__text--orange{
    color: var(--orange);
    max-width: 260px;
}
@media (max-width: 1024px){
    .techLibHero{
        padding: 112px 0 72px;
    }

    .techLibHero__title{
        font-size: clamp(72px, 8.8vw, 112px);
        row-gap: 8px;
    }

    .techLibHero__titleTop{
        grid-column: 1 / span 6;
    }

    .techLibHero__brandInTitle{
        grid-column: 1 / span 2;
        padding-top: 8px;
        font-size: 12px;
        max-width: none;
    }

    .techLibHero__titleBottom{
        grid-column: 3 / span 8;
    }

    .techLibHero__actions{
        grid-column: 3 / span 6;
        margin-top: 20px;
    }

    .techLibHero__bottom{
        margin-top: 120px;
        row-gap: 16px;
    }

    .techLibHeroCard--docs{
        grid-column: 1 / span 4;
    }

    .techLibHeroCard--schemes{
        grid-column: 7 / span 3;
    }

    .techLibHeroCard--montage{
        grid-column: 10 / 13;
    }

    .techLibHeroNote{
        grid-column: 6 / 13;
    }
}
@media (max-width: 768px){
    .techLibHero{
        padding: 96px 0 56px;
    }

    .techLibHero::before{
        content: none;
    }

    .techLibHero__titleCol,
    .techLibHero__title,
    .techLibHero__bottom{
        grid-template-columns: 1fr;
    }

    .techLibHero__title{
        font-size: clamp(46px, 16vw, 72px);
        line-height: .92;
        row-gap: 2px;
        margin: 0;
    }

    .techLibHero__titleTop,
    .techLibHero__titleBottom,
    .techLibHero__brandInTitle,
    .techLibHero__actions,
    .techLibHeroCard,
    .techLibHeroNote{
        grid-column: 1 / -1;
    }

    .techLibHero__brandInTitle{ display: none; }

    .techLibHero__titleBottom{
        grid-row: auto;
    }

    .techLibHero__actions{
        margin-top: 18px;
        margin-bottom: 0;
        justify-items: start;
        text-align: left;
    }

    .techLibHero__bottom{
        margin-top: 72px;
        gap: 18px;
    }

    .techLibHeroCard,
    .techLibHeroCard--docs,
    .techLibHeroCard--schemes,
    .techLibHeroCard--montage,
    .techLibHeroNote{
        grid-column: 1 / -1;
        justify-self: start;
        text-align: left;
    }

    .techLibHeroCard__titleLink,
    .techLibHeroCard__text,
    .techLibHeroCard__text--orange,
    .techLibHeroNote,
    .techLibHeroNote p{
        width: 100%;
        max-width: none;
        text-align: left;
    }

    .techLibHeroCard--montage{
        justify-self: start;
        text-align: left;
    }

    .techLibHeroCard--montage .techLibHeroCard__titleLink{
        text-align: left;
    }
}
/* ====== 2-4) BLACK BLOCKS ====== */
/* текст опису в чорних блоках */
.techLibBlock__desc::before{
    content: "[";
    position: absolute;
    left: -12px;
    top: 0;
    transform: none;
    font-family: var(--font-family-Thin), sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 1;
    color: rgba(255,255,255,.9);
    pointer-events: none;
}
.techLibBlock__desc{
    font-family: var(--font-family-Thin), sans-serif;
    font-weight: 300;
    position: relative;
    padding-left: 0;
}
/* пункти списку */
.techLib .techLibItem__text{
    font-family: var(--font-family-Thin), sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.techLibBlock{
    background: var(--black);
    color:#fff;
    padding:64px 0;
}
.techLibBlock__inner{
    display:grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(12px, 1.8vw, 24px);
    align-items:flex-start;
}
.techLibBlock__left{
    grid-column: 1 / 7;
    min-width: 0;
}
.techLibBlock__right{
    grid-column: 7 / 13;
    min-width: 0;
}
.techLibBlock__title{
    margin:0 0 18px;
    font-size:clamp(26px, 3vw, 40px);
    letter-spacing:.06em;
    text-transform:uppercase;
    line-height:1.15;
    color:var(--orange);
}
.techLibBlock__desc{
    margin:0 0 22px;
    max-width:620px;
    color:rgba(255,255,255,.75);
    font-size:12px;
    line-height:1.5;
}
.techLibBlock__art{
    margin-top:10px;
    opacity:.85;
    min-height: 360px;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
}
.artSvg{ width:100%; height:auto; display:block; }
/* 1. Типові монтажі */
.techLibBlock--montage .techLibBlock__art{
    background-image: url("/assets/lib1-nAsO4He9.svg");
}
/* 2. Принципові схеми */
.techLibBlock--schemes .techLibBlock__art{
    background-image: url("/assets/lib2-DK23tPPJ.svg");
}
/* 3. Документація */
.techLibBlock--docs .techLibBlock__art{
    background-image: url("/assets/lib3-C1X9033-.svg");
}
.techLibList{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:40px;
}
.techLibItem{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 0;
    text-decoration:none;
    color:#fff;
}
.techLibItem__text{
    font-size:12px;
    letter-spacing:.10em;
    text-transform:uppercase;
    opacity:.86;
}
.techLibCtas{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
}
/* ===== techLib: arrow swap (2 svg) ===== */
.techLibBlock .techLibItem__arrow,
.techLib .techLibItem__arrow{
    display: block;
    position: relative;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
.techLibBlock .techLibItem__arrow .techLibArrow,
.techLib .techLibItem__arrow .techLibArrow{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
/* дефолт: “сіра” */
.techLibBlock .techLibArrow--white,
.techLib .techLibArrow--white{
    opacity: 1;
}
.techLibBlock .techLibArrow--orange,
.techLib .techLibArrow--orange{
    opacity: 0;
}
.techLibBlock .techLibItem:hover .techLibArrow--white,
.techLib .techLibItem:hover .techLibArrow--white{
    opacity: 0;
}
.techLibBlock .techLibItem:hover .techLibArrow--orange,
.techLib .techLibItem:hover .techLibArrow--orange{
    opacity: 1;
    transform: translate(2px, -2px);
}
/* ===== techLib bracket links like in mockup ===== */
.techLibBlock .uLinkBrackets{
    color: rgba(255,255,255,.92);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    padding: 0 18px;              /* місце під дужки */
    transition: color .18s ease, opacity .18s ease;
}
.techLibBlock .uLinkBrackets::before,
.techLibBlock .uLinkBrackets::after{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    color: var(--orange);
    transition: transform .18s ease, color .18s ease, opacity .18s ease;
    line-height: 1;
}
.techLibBlock .uLinkBrackets::before{ content:"["; left: 0; }
.techLibBlock .uLinkBrackets::after { content:"]"; right: 0; }
.techLibBlock .uLinkBrackets:hover{
    color:#fff;
}
.techLibBlock .uLinkBrackets:hover::before{ transform: translateY(-50%) translateX(-10px); }
.techLibBlock .uLinkBrackets:hover::after { transform: translateY(-50%) translateX(10px); }
/* праве вирівнювання*/
.techLibBlock .uLinkBrackets--right{
    justify-content: flex-end;
}
/* techLib: primary button size tweak (same look, smaller) */
.techLibBlock .techLibPdfBtn.btn{
    height: 44px;
    padding: 0 20px;
    font-size: 12px;
    letter-spacing: .12em;
}
.techLibBlock .techLibPdfBtn .btn__bracket{
    transition: transform .18s ease, color .18s ease, opacity .18s ease;
}
.techLibBlock .techLibPdfBtn:hover .btn__bracket:first-child{
    transform: translateX(-8px);
}
.techLibBlock .techLibPdfBtn:hover .btn__bracket:last-child{
    transform: translateX(8px);
}
.techLibBlock .techLibPdfBtn:active{
    background: var(--grey);
    color: var(--white);
}
.techLibBlock .techLibPdfBtn:active .btn__bracket{
    color: currentColor;
}
.techLibBlock .techLibPdfBtn .btn__label{
    letter-spacing: .12em;
}
/* ===== techLibHero: brackets drift on hover (ONLY here) ===== */
.techLibHero .uLinkBrackets{
    position: relative;
    display: inline-flex;
    width: fit-content;
    align-self: flex-start;
    padding: 0 12px;
}
/* малюємо дужки як елементи */
.techLibHero .uLinkBrackets::before{
    content: "[";
    position: absolute;
    left: 0;
    top: 47%;
    transform: translateY(-50%) translateX(-2px);
    color: var(--orange);
    transition: transform .18s ease, opacity .18s ease;
    line-height: 1;
}
.techLibHero .uLinkBrackets::after{
    content: "]";
    position: absolute;
    right: 0;
    top: 47%;
    transform: translateY(-50%) translateX(2px);
    color: var(--orange);
    transition: transform .18s ease, opacity .18s ease;
    line-height: 1;
}
.techLibHero .uLinkBrackets:hover::before{
    transform: translateY(-50%) translateX(-6px);
}
.techLibHero .uLinkBrackets:hover::after{
    transform: translateY(-50%) translateX(6px);
}
/* ====== 5) FORM WHITE ====== */
.techLibForm{
    position:relative;
    background:#fff;
    padding:72px 0 92px;
    overflow:hidden;
}
.techLibForm::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            linear-gradient(var(--gridLine) 1px, transparent 1px) 0 0/120px 120px,
            linear-gradient(90deg, var(--gridLine) 1px, transparent 1px) 0 0/120px 120px;
    pointer-events:none;
}
.techLibForm__inner{
    position:relative;
    display:flex;
    gap:56px;
    justify-content:space-between;
    align-items:flex-start;
}
.techLibForm__left{ flex:0 0 44%; min-width:340px; }
.techLibForm__right{ flex:1 1 56%; min-width:320px; }
.techLibForm__title{
    margin:0 0 18px;
    font-size:clamp(18px, 2.2vw, 28px);
    font-weight:900;
    letter-spacing:.02em;
    text-transform:uppercase;
    line-height:1.05;
}
.techLibForm__note{
    margin: 0;
    color: var(--orange);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    max-width: 420px;
    line-height: 1.4;
}
.tForm__panel{
    background:
            radial-gradient(900px 260px at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,0)),
            var(--black);
    border-radius:14px;
    padding:18px;
    box-shadow:0 14px 40px rgba(0,0,0,.25);
}
.tForm__grid{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.tField{ flex:1 1 calc(50% - 6px); }
.tField--full{ flex:1 1 100%; }
.tField__input,
.tField__textarea{
    width:100%;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:#fff;
    border-radius:8px;
    padding:12px;
    outline:none;
    font-size:12px;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.tField__textarea{ min-height:78px; resize:vertical; }
.tField__input::placeholder,
.tField__textarea::placeholder{ color:rgba(255,255,255,.55); }
.tAgree{
    display:flex;
    align-items:center;
    gap:10px;
    margin:14px 0 22px;
    font-size:11px;
    color:rgba(0,0,0,.55);
}
.tAgree__check{ position:absolute; opacity:0; pointer-events:none; }
.tAgree__dot{
    width:10px; height:10px;
    border:1px solid rgba(0,0,0,.3);
    border-radius:50%;
    display:inline-block;
}
.tAgree__check:checked + .tAgree__dot{
    background:var(--orange);
    border-color:var(--orange);
}
.tForm__subLink{ margin-top:18px; }
/* ====== responsive ====== */
@media (max-width: 1024px) and (min-width: 769px) {
    .techLibHero__inner,
    .techLibBlock__inner,
    .techLibForm__inner{
        flex-direction:column;
    }
    .techLibHero__nav{ flex:1 1 auto; }
    .techLibBlock__left,
    .techLibForm__left{ flex:1 1 auto; min-width:0; }
    .techLibBlock__right,
    .techLibForm__right{ min-width:0; }
    .uLinkBrackets--right{ margin-left:0; }
}
@media (max-width: 560px){
    .container{ width:calc(100% - 32px); }
    .tField{ flex:1 1 100%; }
    .pillBtn--wide{ width:100%; }
}
/* ===== Responsive ===== */
@media (max-width: 1024px){
    .docsTop__inner{ flex-direction:column; }
    .docsTop__tabs{ flex: 1 1 auto; justify-content:flex-start; flex-wrap:wrap; }
}