:root {
    --orange: #fa4c17;
    --dark: #31363d;
    --gray: #5c5c5c;
    --white: #fff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    overflow-x: clip;
    font: 400 16px/1.55 Roboto, Arial, sans-serif;
    color: var(--dark);
    background: #fff;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

a {
    color: inherit;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    margin: 0;
    font-size: 50px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--dark);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 55px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: var(--dark);
    color: #fff;
    font: 600 16px/1 Roboto, Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.btn:hover {
    background: var(--orange);
}

.btn--orange {
    width: 280px;
    height: 60px;
    background: var(--orange);
    font-weight: 700;
}

.btn--orange:hover {
    background: var(--dark);
}

.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    height: 70px;
    background: #fff;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1440px;
    height: 70px;
    margin: 0 auto;
    padding: 0 40px;
}

.header__logo {
    display: block;
    flex: 0 0 auto;
}

.header__logo img {
    display: block;
    width: 150px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 29px;
    margin-left: auto;
}

.nav a {
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.nav a:hover,
.nav a.is-active {
    color: var(--orange);
    font-weight: 700;
}

.header__right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.header__phone {
    font-size: 18px;
    font-weight: 600;
    color: var(--orange);
    text-decoration: none;
    white-space: nowrap;
}

.burger {
    display: none;
    width: 28px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}

.burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--dark);
    transition: transform .25s ease, opacity .25s ease, top .25s ease;
}

.burger span:nth-child(1) {
    top: 0;
}

.burger span:nth-child(2),
.burger span:nth-child(3) {
    top: 8px;
}

.burger span:nth-child(4) {
    top: 16px;
}

.burger.is-open span:nth-child(1),
.burger.is-open span:nth-child(4) {
    top: 8px;
    opacity: 0;
}

.burger.is-open span:nth-child(2) {
    transform: rotate(45deg);
}

.burger.is-open span:nth-child(3) {
    transform: rotate(-45deg);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    right: 0;
    left: 0;
    z-index: 99;
    padding: 20px 24px 28px;
    background: #fff;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .12);
}

.mobile-menu.is-open {
    display: block;
}

.mobile-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-menu__list a {
    display: block;
    padding: 13px 0;
    font-size: 18px;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}

.mobile-menu__phone {
    display: inline-block;
    margin-top: 18px;
    font-size: 20px;
    font-weight: 600;
    color: var(--orange);
    text-decoration: none;
}

.mobile-menu__socials {
    margin-top: 16px;
}

.hero {
    padding-top: 70px;
}

.hero__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 122px 20px 0;
}

.hero__left {
    flex: 0 1 600px;
    max-width: 600px;
}

.hero__logo {
    display: block;
    width: 600px;
    max-width: 100%;
}

.hero__premium {
    margin: 6px 0 0;
    font-size: 53px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--orange);
}

.hero__kind {
    margin: 2px 0 0;
    font-size: 37px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--gray);
}

.hero__cta {
    margin-top: 34px;
}

.hero__right {
    position: relative;
    flex: 0 1 630px;
    max-width: 630px;
    margin-top: 128px;
}

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

.hero__energy {
    position: absolute;
    bottom: 62px;
    left: 25%;
    width: 340px;
    color: #fff;
    font-size: 41px;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
}

.hero__band {
    background: var(--orange);
    padding: 22px 0;
}

.hero__band-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero__band p {
    max-width: 900px;
    margin: 0 0 0 200px;
    color: #fff;
    font-size: 25px;
    font-weight: 300;
    line-height: 1.12;
}

.products {
    padding-top: 100px;
}

.products .section-title {
    position: relative;
    z-index: 2;
}

.products__grid {
    display: grid;
    grid-template-columns: repeat(3, 340px);
    justify-content: space-between;
    gap: 50px 60px;
    margin-top: 30px;
}

.product__media {
    margin-left: -63px;
}

.product__img {
    display: block;
    width: 360px;
    max-width: 100%;
}

.product__name {
    margin: -10px 0 0;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--orange);
}

.product__descr {
    max-width: 300px;
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
    color: var(--gray);
}

.product__cta {
    margin-top: 28px;
}

.cooperation {
    padding-top: 58px;
}

.cooperation__title {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 50px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--orange);
}

.cooperation__grid {
    display: grid;
    grid-template-columns: 600px 480px;
    justify-content: space-between;
    gap: 40px;
    align-items: start;
    margin-top: 24px;
}

.cooperation__media {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 600px;
    margin-left: -10px;
}

.cooperation__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.has-js [data-anim] {
    opacity: 0;
    will-change: transform, opacity;
}

.has-js .appear {
    opacity: 0;
}

.appear--up {
    transform: translateY(var(--dist, 100px));
}

.appear--down {
    transform: translateY(calc(var(--dist, 100px) * -1));
}

.appear--right {
    transform: translateX(var(--dist, 100px));
}

.appear.is-started {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur, 1s) cubic-bezier(.19, 1, .22, 1) var(--delay, 0s),
        transform var(--dur, 1s) cubic-bezier(.19, 1, .22, 1) var(--delay, 0s);
}

.blink {
    animation: cb-blink 2s linear infinite;
}

@keyframes cb-blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.cooperation__lists {
    margin-top: 240px;
}

.cooperation__group {
    margin: 0 0 13px;
    padding: 0;
    list-style: none;
    font-size: 20px;
    line-height: 1.3;
    color: var(--dark);
}

.cooperation__group:last-child {
    margin-bottom: 0;
}

.cooperation__group li::before {
    content: "• ";
}

.oem {
    position: relative;
    min-height: 530px;
    margin-top: 46px;
}

.oem__band {
    position: absolute;
    top: 123px;
    right: 0;
    left: 0;
    height: 204px;
    background: var(--orange);
}

.oem__inner {
    position: relative;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.oem__img {
    position: absolute;
    top: 0;
    right: 40px;
    z-index: 1;
    width: 590px;
}

.oem__content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 165px 0 0 60px;
}

.oem__title {
    margin: 0 0 26px;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.55;
    color: #fff;
}

.production {
    position: relative;
}

.production__intro {
    position: relative;
    max-width: 1200px;
    min-height: 594px;
    margin: 0 auto;
    padding: 0 20px;
}

.production__intro-col {
    max-width: 480px;
    padding-top: 160px;
}

.production__intro-title {
    margin: 0;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--orange);
}

.production__intro-text {
    margin: 100px 0 0;
    font-size: 20px;
    line-height: 1.55;
    color: var(--dark);
}

.production__intro-text p {
    margin: 0 0 1.2em;
}

.production__intro-text p:last-child {
    margin-bottom: 0;
}

.production__intro-img {
    position: absolute;
    top: 0;
    right: -120px;
    width: 950px;
}

.production__phases {
    position: relative;
    width: 100%;
    height: 1900px;
    margin-top: 100px;
    overflow: hidden;
}

.production__canvas {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1200px;
    height: 1900px;
    margin-left: -600px;
    transform-origin: top center;
}

.production__img {
    position: absolute;
}

.production__num {
    position: absolute;
    margin: 0;
    font-size: 77px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--orange);
}

.production__cap {
    position: absolute;
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: var(--dark);
}


.production-mobile__img {
    position: absolute;
    z-index: 0;
    max-width: none;
    height: auto;
}


.video {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 720px;
    margin-top: 120px;
    background: #000;
}

.video img {
    width: 800px;
    max-width: 80%;
}

.about {
    padding-top: 35px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 340px);
    justify-content: space-between;
    gap: 60px;
    margin-top: 37px;
}

.stats + .stats {
    margin-top: 60px;
}

.stats__value {
    margin: 0;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--orange);
}

.stats__line {
    height: 3px;
    margin: 14px 0;
    border: 0;
    background: var(--orange);
}

.stats__descr {
    margin: 0;
    font-size: 20px;
    line-height: 1.55;
    color: var(--dark);
}

.din {
    display: flex;
    align-items: center;
    width: calc(100% - 40px);
    max-width: 1400px;
    min-height: 283px;
    margin: 88px auto 0;
    padding: 24px 40px 24px 169px;
    background: var(--orange);
    color: #fff;
}

.din__logo {
    flex: 0 0 120px;
}

.din__table {
    flex: 0 1 736px;
    margin-left: 31px;
}

.din__head {
    display: grid;
    grid-template-columns: minmax(0, 491px) minmax(0, 245px);
    border-bottom: 2px solid #fff;
}

.din__head-title {
    font-size: 25px;
    line-height: 1.55;
}

.din__head-brand {
    display: flex;
    align-items: center;
    padding-left: 28px;
    border-left: 2px solid #fff;
}

.din__badge {
    display: block;
    width: 160px;
}

.din__body {
    display: grid;
    grid-template-columns: minmax(0, 491px) minmax(0, 245px);
}

.din__specs,
.din__values {
    margin: 0;
    padding: 10px 0 0;
    list-style: none;
    font-size: 25px;
    line-height: 1.55;
}

.din__values {
    padding-left: 28px;
    border-left: 2px solid #fff;
}

.din__foot {
    padding-top: 10px;
    border-top: 2px solid #fff;
    font-size: 25px;
    line-height: 1.55;
}

.about__promo {
    max-width: 960px;
    margin: 49px 0 0;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--orange);
}

.cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 52px;
}

.card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.card--reverse {
    flex-direction: row-reverse;
}

.card__media {
    flex: 0 1 560px;
    max-width: 56%;
}

.card__media img {
    display: block;
    width: 100%;
}

.card__body {
    flex: 0 1 500px;
    max-width: 44%;
}

.card__title {
    margin: 0 0 24px;
    font-size: 30px;
    font-weight: 400;
    color: var(--dark);
}

.card__descr {
    margin: 0;
    font-size: 20px;
    line-height: 1.55;
    color: var(--orange);
}

.contacts__band {
    background: var(--orange);
    padding: 38px 0;
}

.contacts__title {
    margin: 0;
    font-size: 50px;
    font-weight: 400;
    line-height: 1.55;
    color: #fff;
}

.contacts__grid {
    display: grid;
    grid-template-columns: minmax(0, 620px);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    /* The contacts follow the page content directly: no empty band above them. */
    padding: 32px 100px 0;
}

.contacts__map {
    margin-top: 50px;
}

.contacts__map iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
}

.footer {
    margin-top: 80px;
    background: var(--dark);
}

.footer__inner {
    display: flex;
    align-items: center;
    max-width: 1440px;
    min-height: 70px;
    margin: 0 auto;
    padding: 12px 40px;
}

.footer__logo {
    flex: 0 0 453px;
}

.footer__logo img {
    display: block;
    width: 150px;
}

.footer__copy {
    flex: 1 1 auto;
    font-size: 15px;
    font-weight: 300;
    color: #fff;
    text-align: center;
}

.footer__socials {
    flex: 0 0 453px;
    display: flex;
    justify-content: flex-end;
}

.footer__socials a {
    color: #fff;
}

@media (min-width: 1201px) {
    .hero__inner {
        justify-content: flex-start;
    }

    .hero__left {
        flex: 0 0 600px;
        max-width: 600px;
    }

    .hero__right {
        flex: 0 0 630px;
        max-width: 630px;
        margin-left: -70px;
    }

    .products__grid {
        margin-top: -160px;
    }

    .cooperation__grid {
        grid-template-columns: 600px 480px;
        justify-content: flex-start;
        gap: 70px;
    }
}

@media (max-width: 1280px) {
    .din {
        padding-left: 80px;
    }
}

@media (max-width: 1200px) {
    .products__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product__media {
        margin-left: 0;
    }

    .cooperation__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .cooperation__media {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .cooperation__lists {
        margin-top: 40px;
    }

    .contacts__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        justify-content: center;
        padding: 32px 40px 0;
    }

    .stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .production__intro {
        min-height: 0;
    }

    .production__intro-col {
        max-width: 100%;
        padding-top: 0;
    }

    .production__intro-img {
        position: static;
        width: 100%;
        margin-top: 30px;
    }

    .production__intro-text {
        margin-top: 30px;
        max-width: 640px;
    }
}

@media (max-width: 1100px) {
    .nav {
        display: none;
    }

    .burger {
        display: block;
        order: 3;
        margin-left: 10px;
    }

    .header__right {
        margin-left: auto;
    }

    .section-title,
    .cooperation__title,
    .contacts__title {
        font-size: 38px;
    }

    .din {
        flex-wrap: wrap;
        gap: 24px;
        padding: 32px 40px;
    }

    .din__table {
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
    }
}

@media (max-width: 980px) {
    .hero__inner {
        flex-direction: column;
        padding-top: 60px;
    }

    .hero__left,
    .hero__right {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .hero__right {
        margin-top: 24px;
    }

    .hero__energy {
        display: none;
    }

    .hero__premium {
        font-size: 42px;
    }

    .hero__kind {
        font-size: 28px;
    }

    .hero__band p {
        margin-left: 0;
        font-size: 20px;
    }

    .products {
        padding-top: 60px;
    }

    .products__grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .cooperation__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cooperation__media {
        margin: 0 auto;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .cooperation__lists {
        margin-top: 20px;
    }

    .oem {
        min-height: 0;
        margin-top: 40px;
    }

    .oem__band {
        display: none;
    }

    .oem__inner {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
    }

    .oem__content {
        order: 1;
        max-width: 100%;
        margin: 0 -20px;
        padding: 32px 20px;
        background: var(--orange);
    }

    .oem__img {
        order: 2;
        position: static;
        display: block;
        width: 100%;
        max-width: 590px;
        margin: 20px auto 0;
    }

    .video {
        height: 400px;
        margin-top: 60px;
    }

    .video img {
        width: 500px;
    }

    .stats {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 34px;
    }

    .din {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 32px 24px;
    }

    .din__logo {
        flex: 0 0 auto;
        align-self: flex-start;
    }

    .card,
    .card--reverse {
        flex-direction: column;
        align-items: stretch;
    }

    .card__media,
    .card__body {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .contacts__grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 40px 20px 0;
    }

    .contacts__map {
        margin-top: 30px;
    }

    .footer__inner {
        flex-direction: column;
        gap: 14px;
        padding: 20px;
        text-align: center;
    }

    .footer__logo,
    .footer__socials {
        flex: 0 0 auto;
    }

    .footer__socials {
        justify-content: center;
    }
}

@media (max-width: 760px) {

    .header__inner {
        padding: 0 20px;
    }

    .header__phone {
        font-size: 16px;
    }

    .section-title,
    .cooperation__title,
    .contacts__title {
        font-size: 30px;
    }

    .products__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero__premium {
        font-size: 34px;
    }

    .hero__kind {
        font-size: 22px;
    }

    .about__promo {
        font-size: 24px;
    }

    .fab {
        right: 20px;
        bottom: 90px;
        width: 56px;
        height: 56px;
    }

    .fab-menu {
        right: 23px;
        bottom: 154px;
    }

    .din__head,
    .din__body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 120px);
    }

    .din__head-title,
    .din__specs,
    .din__values,
    .din__foot {
        font-size: 18px;
    }

    .din__badge {
        width: 120px;
    }

    .din__head-brand,
    .din__values {
        padding-left: 14px;
    }
}

@media (max-width: 560px) {
    .header__phone,
    .header__socials {
        display: none;
    }

    .production__intro-title {
        font-size: 30px;
    }
}

/* The original page uses a separate, deliberately composed phone layout.
   Keep these rules isolated to the 320–480px version so tablet and desktop
   retain their fluid layouts. */
@media (max-width: 480px) {
    html { scroll-padding-top: 64px; }

    html,
    body { max-width: 100%; overflow-x: hidden; }

    body { font-size: 14px; line-height: 1.25; }

    .container { padding-right: 20px; padding-left: 20px; }

    .btn,
    .btn--orange { width: 100%; max-width: 300px; height: 48px; font-size: 13px; }

    .header,
    .header__inner { height: 64px; }

    .header { background: #111; }

    .header__inner { justify-content: flex-end; padding: 0 12px; }

    .header__logo,
    .header__right { display: none; }

    .burger { width: 18px; height: 16px; margin: 0; }

    .burger span { height: 2px; background: #fff; }

    .burger span:nth-child(2),
    .burger span:nth-child(3) { top: 7px; }

    .burger span:nth-child(4) { top: 14px; }

    .burger.is-open span:nth-child(1),
    .burger.is-open span:nth-child(4) { top: 7px; }

    .mobile-menu {
        top: 64px;
        padding: 12px 20px 24px;
        background: #111;
        box-shadow: 0 15px 25px rgba(0, 0, 0, .28);
        color: #fff;
    }

    .mobile-menu__list a { padding: 12px 0; font-size: 15px; border-color: rgba(255, 255, 255, .2); }

    .hero { position: relative; isolation: isolate; padding-top: 64px; overflow: hidden; }

    .hero::before {
        position: absolute;
        top: 308px;
        left: calc(50% - 367px);
        z-index: 0;
        width: 851px;
        height: 570px;
        background: var(--orange);
        transform: rotate(150deg);
        content: "";
    }

    .hero__inner { position: relative; z-index: 1; display: block; height: 340px; padding: 0; }

    .hero__left { max-width: none; }

    .hero__logo { position: absolute; top: 40px; left: calc(50% - 150px); width: 300px; max-width: none; margin: 0; }

    .hero__kind { position: absolute; top: 115px; left: calc(50% - 150px); width: 300px; margin: 0; font-size: 25px; line-height: 1.55; }

    .hero__premium { position: absolute; top: 140px; left: calc(50% - 150px); width: 300px; margin: 0; font-size: 40px; line-height: 1.55; }

    .hero__right { position: absolute; top: 210px; left: calc(50% - 165px); width: 330px; max-width: none; margin: 0; }

    .hero__img { width: 100%; }

    .hero__energy { display: block; top: 70px; bottom: auto; left: 70px; width: 260px; font-size: 30px; line-height: 1.55; }

    .hero__band { position: relative; z-index: 1; min-height: 360px; padding: 25px 0 78px; background: transparent; }

    .hero__band-inner { padding: 0 45px; }

    .hero__band p { max-width: 290px; margin: 0; font-size: 16px; line-height: 1.25; }

    .hero__cta { position: absolute; top: 605px; left: calc(50% - 150px); z-index: 2; width: 300px; max-width: none; height: 55px; margin: 0; }

    .cb-landing-embed .wp-block-buttons .hero__cta .wp-block-button__link { width: 300px; height: 55px; }

    .products { padding-top: 34px; }

    .section-title,
    .cooperation__title,
    .contacts__title { font-size: 30px; line-height: 1.05; }

    .products__grid { gap: 56px; margin-top: 26px; }

    .product__media { display: flex; justify-content: center; min-height: 240px; margin: 0; }

    .product__img { width: 300px; object-fit: contain; }

    .product__name { margin-top: 0; font-size: 30px; line-height: 1.05; }

    .product__descr { max-width: 260px; margin-top: 8px; font-size: 14px; line-height: 1.08; }

    .product__cta { width: 100%; max-width: none; height: 48px; margin-top: 16px; }

    .cb-landing-embed .wp-block-buttons .product__cta .wp-block-button__link { width: 100%; height: 48px; }

    .cooperation { padding-top: 28px; }

    .cooperation__title { margin: 0 -20px; padding: 20px; background: var(--orange); color: #fff; }

    .cooperation__grid { display: block; margin-top: 0; }

    .cooperation__media { display: none; }

    .cooperation__lists { margin-top: 0; padding: 26px 0 4px; }

    .cooperation__group { position: relative; margin: 0; padding: 0 0 34px; font-size: 14px; line-height: 1.04; }

    .cooperation__group + .cooperation__group { padding-top: 34px; }

    .cooperation__group:not(:last-child)::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 120px;
        height: 2px;
        background: var(--orange);
        content: "";
    }

    .oem { min-height: 590px; margin-top: 0; }

    .oem__band { display: block; top: 0; height: 330px; clip-path: polygon(0 0, 100% 0, 100% 67%, 0 100%); }

    .oem__inner { height: 590px; padding: 0 20px; }

    .oem__content { position: static; display: block; max-width: none; margin: 0; padding: 0; background: transparent; }

    .oem__title { position: absolute; top: 28px; left: 20px; width: 230px; margin: 0; font-size: 26px; line-height: .92; }

    .oem__img { top: 105px; right: -8px; width: 410px; max-width: none; margin: 0; }

    .oem__content .btn,
    .cb-landing-embed .oem__content .wp-block-button {
        position: absolute;
        right: 20px;
        bottom: 28px;
        left: 20px;
        width: auto;
        max-width: none;
        background: var(--orange);
    }

    .cb-landing-embed .oem__content .wp-block-buttons .wp-block-button__link { width: 100%; height: 55px; background: var(--orange); }

    .production__intro { display: flex; flex-direction: column; padding: 0 20px; }

    .production__intro-col { display: contents; }

    .production__intro-title { order: 1; margin-top: 0; font-size: 30px; line-height: 1.05; }

    .production__intro-img { order: 2; width: calc(100% + 40px); max-width: none; margin: 16px -20px 0; }

    .production__intro-text { order: 3; margin-top: 12px; font-size: 14px; line-height: 1.15; }

    .production__intro-text p:last-child { color: var(--orange); }


    .video { height: 210px; margin-top: 0; }

    .video img { width: 300px; }

    .about { padding-top: 28px; }

    .stats,
    .stats + .stats { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 22px; }

    .stats__item { padding: 14px 0; border-bottom: 1px solid #eee; }

    .stats__value { font-size: 30px; line-height: 1.1; }

    .stats__line { height: 2px; margin: 8px 0; }

    .stats__descr { font-size: 14px; line-height: 1.2; }

    .din { width: 100%; min-height: 0; margin-top: 28px; padding: 40px 20px; }

    .din__logo { width: 90px; }

    .din__head,
    .din__body { display: block; border: 0; }

    .din__head-title,
    .din__specs,
    .din__values,
    .din__foot { font-size: 14px; line-height: 1.2; }

    .din__head-title { padding-top: 22px; }

    .din__head-brand { padding: 24px 0 12px; border: 0; }

    .din__badge { width: 230px; }

    .din__specs,
    .din__values { padding: 12px 0 0; border: 0; }

    .din__foot { padding-top: 20px; border: 0; font-size: 22px; line-height: .95; }

    .about__promo { margin-top: 30px; font-size: 16px; line-height: 1.2; }

    .cards { gap: 34px; margin-top: 28px; }

    .card,
    .card--reverse { gap: 10px; }

    .card__title { margin: 0 0 6px; font-size: 16px; line-height: 1.1; }

    .card__descr { font-size: 14px; line-height: 1.08; }

    .contacts__band { margin-top: 0; padding: 27px 0; }

    .contacts__grid { gap: 35px; padding: 20px 20px 0; text-align: center; }

    .contacts__map { display: none; }

    .footer { display: flex; align-items: center; min-height: 294px; margin-top: 80px; }

    .footer__inner { width: 100%; gap: 18px; }

    .footer__copy { font-size: 11px; }

    .footer__logo img { width: 150px; }

    /*
     * The storefront fixes a 5-item navigation to the bottom of small screens;
     * keep the contact button and its menu above it using the shared inset.
     */
    .fab { right: 14px; bottom: calc(var(--cb-mobile-nav-height, 64px) + 16px); width: 48px; height: 48px; }

    .fab-menu { right: 14px; bottom: calc(var(--cb-mobile-nav-height, 64px) + 74px); }
}

/* The store header owns the page offset when the landing is embedded in About. */
.cb-landing-embed .hero { padding-top: 0; }
.page-template-page-about .cb-site-main > .cb-shell {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

.page-template-page-about .cb-landing-embed {
    width: 100%;
}

/* Core blocks own the About copy and images; layout/animation is presentation. */
:where(.cb-landing-embed .wp-block-group, .cb-landing-embed .wp-block-image, .cb-landing-embed .wp-block-buttons, .cb-landing-embed .wp-block-button) {
    margin-block: 0;
}
:where(.cb-landing-embed figure) { margin-inline: 0; }
.cb-landing-embed .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 55px;
    padding: 0;
    border-radius: 5px;
    background: var(--dark);
    color: #fff;
    font: 600 16px/1 Roboto, Arial, sans-serif;
    text-decoration: none;
    transition: background-color .2s ease;
}
.cb-landing-embed .wp-block-button__link:hover { background: var(--orange); }
/*
 * WordPress 6.6+ prints `.wp-block-buttons .wp-block-button__link{width:100%}`
 * as inline block-support CSS after the theme stylesheets. With equal
 * specificity the later inline rule wins and the landing CTAs collapse to the
 * width of their label. One extra class outranks it; the responsive overrides
 * below carry the same prefix so they still win inside their media query.
 */
.cb-landing-embed .wp-block-button > .wp-block-button__link { width: 200px; }
.hero__logo img, .hero__img img, .oem__img img,
.production__intro-img img, .din__logo img, .din__badge img {
    display: block;
    width: 100%;
}
.hero__logo { --dur: 2s; --delay: .3s; }
.hero__premium { --dur: 2s; --delay: .5s; }
.hero__kind { --dur: 2s; --delay: .7s; }
.hero__cta { --dur: 2s; --delay: .9s; }
.hero__img { --dur: 1s; }
.hero__band { --dur: 2s; --delay: 1.2s; }
.hero__band p { --dur: 2s; --delay: 1.1s; }
.product__img img { display: block; width: 100%; }
.cooperation__media .wp-block-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.cooperation__media .wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cooperation__media .wp-block-image:nth-child(1) { z-index: 3; }
.cooperation__media .wp-block-image:nth-child(2) { z-index: 2; }
.cooperation__media .wp-block-image:nth-child(3) { z-index: 1; }
.has-js .cb-landing-embed [class*="cb-anim-"] { opacity: 0; will-change: transform, opacity; }
.oem__content .wp-block-button__link:hover { background: var(--dark); }
.production__desktop-art .production__img img,
.production-mobile__art .production-mobile__img img {
    display: block;
    width: 100%;
    max-width: none;
}
.production-mobile__art { display: none; }
.production__desktop-art .production__img:nth-child(1) { top: -110px; left: -120px; width: 730px; }
.production__desktop-art .production__img:nth-child(2) { top: -80px; left: 380px; width: 880px; }
.production__desktop-art .production__img:nth-child(3) { top: 285px; left: -120px; width: 760px; }
.production__desktop-art .production__img:nth-child(4) { top: 325px; left: 370px; width: 870px; }
.production__desktop-art .production__img:nth-child(5) { top: 795px; left: -180px; width: 740px; }
.production__desktop-art .production__img:nth-child(6) { top: 790px; left: 330px; width: 980px; }
.production__desktop-art .production__img:nth-child(7) { top: 1260px; left: -60px; width: 850px; }
.production__desktop-art .production__img:nth-child(8) { top: 1320px; left: 450px; width: 910px; }
.production__step {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.production__step .production__num { top: var(--nt); left: var(--nl); }
.production__step .production__cap { top: var(--ct); left: var(--cl); width: var(--cw); }
.production__step:nth-child(1) { --nt: 263px; --nl: 60px; --ct: 285px; --cl: 110px; --cw: 260px; }
.production__step:nth-child(2) { --nt: 38px; --nl: 570px; --ct: 60px; --cl: 630px; --cw: 200px; }
.production__step:nth-child(3) { --nt: 273px; --nl: 870px; --ct: 295px; --cl: 930px; --cw: 200px; }
.production__step:nth-child(4) { --nt: 730px; --nl: 50px; --ct: 745px; --cl: 110px; --cw: 310px; }
.production__step:nth-child(5) { --nt: 813px; --nl: 430px; --ct: 835px; --cl: 490px; --cw: 240px; }
.production__step:nth-child(6) { --nt: 753px; --nl: 810px; --ct: 775px; --cl: 880px; --cw: 290px; }
.production__step:nth-child(7) { --nt: 1180px; --nl: 50px; --ct: 1200px; --cl: 110px; --cw: 270px; }
.production__step:nth-child(8) { --nt: 1305px; --nl: 260px; --ct: 1315px; --cl: 320px; --cw: 290px; }
.production__step:nth-child(9) { --nt: 1260px; --nl: 670px; --ct: 1270px; --cl: 740px; --cw: 390px; }
.production__step:nth-child(10) { --nt: 1656px; --nl: 40px; --ct: 1686px; --cl: 150px; --cw: 250px; }
.production__step:nth-child(11) { --nt: 1791px; --nl: 250px; --ct: 1813px; --cl: 350px; --cw: 270px; }
.production__step:nth-child(12) { --nt: 1791px; --nl: 820px; --ct: 1813px; --cl: 930px; --cw: 220px; }
.cb-landing-embed .stats__line {
    width: 100%;
    max-width: none;
}
.din__logo { width: 120px; margin: 0; }
.din__badge { width: 160px; }
.din__head-title, .din__foot { margin: 0; }
.card__media .wp-block-image img { display: block; width: 100%; }

@media (max-width: 760px) {
    .production__phases { display: block; height: 4100px; margin-top: 0; }
    .production__canvas { top: 40px; width: 390px; height: 4060px; margin-left: -195px; }
    .production__desktop-art { display: none; }
    .production-mobile__art { display: block; }
    .production-mobile__art .production-mobile__img:nth-child(1) { top: 0; left: -35px; width: 440px; }
    .production-mobile__art .production-mobile__img:nth-child(2) { top: 167px; left: -15px; width: 650px; }
    .production-mobile__art .production-mobile__img:nth-child(3) { top: 535px; left: -385px; width: 810px; }
    .production-mobile__art .production-mobile__img:nth-child(4) { top: 878px; left: -35px; width: 460px; }
    .production-mobile__art .production-mobile__img:nth-child(5) { top: 1190px; left: -15px; width: 410px; }
    .production-mobile__art .production-mobile__img:nth-child(6) { top: 1475px; left: -95px; width: 540px; }
    .production-mobile__art .production-mobile__img:nth-child(7) { top: 1790px; left: -95px; width: 550px; }
    .production-mobile__art .production-mobile__img:nth-child(8) { top: 1950px; left: -125px; width: 1210px; }
    .production-mobile__art .production-mobile__img:nth-child(9) { top: 2595px; left: -255px; width: 700px; }
    .production-mobile__art .production-mobile__img:nth-child(10) { top: 2890px; left: -45px; width: 970px; }
    .production-mobile__art .production-mobile__img:nth-child(11) { top: 3290px; left: -215px; width: 800px; }
    .production-mobile__art .production-mobile__img:nth-child(12) { top: 3725px; left: -65px; width: 530px; }
    .production__step .production__num, .production__step .production__cap { z-index: 2; }
    .production__step .production__cap { line-height: 1; }
    .production__step:nth-child(1) { --nt: 3px; --nl: 55px; --ct: 25px; --cl: 105px; --cw: 260px; }
    .production__step:nth-child(2) { --nt: 255px; --nl: 55px; --ct: 280px; --cl: 105px; --cw: 200px; }
    .production__step:nth-child(3) { --nt: 546px; --nl: 45px; --ct: 568px; --cl: 105px; --cw: 200px; }
    .production__step:nth-child(4) { --nt: 859px; --nl: 45px; --ct: 883px; --cl: 105px; --cw: 280px; }
    .production__step:nth-child(5) { --nt: 1158px; --nl: 45px; --ct: 1180px; --cl: 105px; --cw: 240px; }
    .production__step:nth-child(6) { --nt: 1433px; --nl: 45px; --ct: 1455px; --cl: 105px; --cw: 250px; }
    .production__step:nth-child(7) { --nt: 1804px; --nl: 45px; --ct: 1830px; --cl: 105px; --cw: 270px; }
    .production__step:nth-child(8) { --nt: 2085px; --nl: 45px; --ct: 2100px; --cl: 105px; --cw: 240px; }
    .production__step:nth-child(9) { --nt: 2569px; --nl: 43px; --ct: 2585px; --cl: 105px; --cw: 240px; }
    .production__step:nth-child(10) { --nt: 2985px; --nl: 35px; --ct: 3000px; --cl: 135px; --cw: 210px; }
    .production__step:nth-child(11) { --nt: 3388px; --nl: 45px; --ct: 3410px; --cl: 145px; --cw: 200px; }
    .production__step:nth-child(12) { --nt: 3708px; --nl: 35px; --ct: 3730px; --cl: 145px; --cw: 220px; }
}
@media (max-width: 480px) {
    .hero__logo { width: 300px; }
    .hero__img { width: 330px; }
    .hero__band p { color: var(--dark); }
    .product__cta { width: 100%; }
    .cb-landing-embed .wp-block-buttons .product__cta .wp-block-button__link { height: 48px; font-size: 13px; }
    .oem__content .wp-block-button { position: absolute; right: 20px; bottom: 28px; left: 20px; }
    .cb-landing-embed .oem__content .wp-block-buttons .wp-block-button__link { width: 100%; height: 48px; background: var(--orange); font-size: 13px; }
    .production__phases { height: 4076px; }
    .production__canvas { top: 16px; }
    .din__logo { width: 90px; }
    .din__badge { width: 230px; }
    .video .wp-block-image img { width: 300px; }
}