#page-home {
    #one {
        padding: 160px 0 140px;
        background: #000;
        width: calc(100% - 30px);
        margin: 0 auto;
        margin-top: 15px;
        border-radius: 12px;
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        color: #fff;
        background-image: url('https://plus.unsplash.com/premium_photo-1661932015882-c35eee885897?q=80&w=1906&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        position: relative;
        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 75%;
            background: -webkit-gradient(
                linear,
                left top, left bottom,
                from(#000),
                color-stop(rgba(0, 0, 0, 0.84)),
                to(rgba(0, 0, 0, 0))
            );
            background: linear-gradient(
                180deg,
                #000,
                rgba(0, 0, 0, 0.84),
                rgba(0, 0, 0, 0)
            );
            opacity: 0.5;
            z-index: 1;
        }
        .video {
            video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                -o-object-fit: cover;
                object-fit: cover;
                -o-object-position: center center;
                object-position: center center;
                pointer-events: none;
            }
        }
        .wrapper {
            position: relative;
            z-index: 2;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
        }
        .left {
            h1 {
                color: var(--accent);
                line-height: 0.8;
                margin-bottom: 12px;
            }
            .discount {
                display: inline-block;
                margin: 24px 0 14px;
                background: rgba(17, 11, 51, 0.3);
                backdrop-filter: blur(12px);
                padding: 20px;
                border-radius: 10px;
                p {
                    margin-top: 8px;
                    color: var(--grey);
                }
            }
        }
    }
    #partners {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 40px;
        p {
            color: var(--grey);
            font-weight: 600;
            margin-bottom: 20px;
        }
        .wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            grid-gap: 24px;
            gap: 24px;
            width: 100%;
            img {
                width: 60px;
                -webkit-filter: saturate(0);
                filter: saturate(0);
                -webkit-transition: 0.3s ease;
                transition: 0.3s ease;
                &:hover {
                    -webkit-filter: saturate(1);
                    filter: saturate(1);
                }
            }
        }
    }
    #about {
        color: #fff;
        background: var(--dark);
        .containers {
            width: 100%;
        }
        ul,
        li {
            color: #fff;
        }
        .wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
        .one {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            grid-gap: 24px;
            .item {
                &:nth-child(1) {
                    background-color: transparent;
                    h4 {
                        max-width: 30ch;
                    }
                    ul,
                    li {
                        list-style: none;
                        padding-left: 0;
                        margin-left: 0;
                    }
                    ul {
                        margin-bottom: 24px;
                    }
                    li {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        grid-gap: 20px;
                        gap: 20px;
                        border-bottom: 1px solid #fff;
                        padding: 10px 0;
                        &:last-child {
                            border-bottom: none;
                            padding-bottom: 0;
                            margin-bottom: 0;
                        }
                    }
                }
                &:nth-child(2),
                &:nth-child(3) {
                    overflow: hidden;
                    color: var(--corp);
                    background-color: #fff;
                    padding: 25px 20px;
                    border-radius: 12px;
                    position: relative;
                    img {
                        position: absolute;
                        z-index: 1;
                    }
                    dd {
                        position: relative;
                        z-index: 2;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-orient: vertical;
                        -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                        flex-direction: column;
                    }
                    h5 {
                        margin-bottom: 3px;
                    }
                    button {
                        margin-top: 8px;
                    }
                    p {
                        color: var(--grey);
                        max-width: 80%;
                    }
                }
                &:nth-child(2) {
                    img {
                        bottom: -5%;
                        right: -12%;
                        height: 65%;
                    }
                }
                &:nth-child(3) {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    -webkit-box-pack: end;
                    -ms-flex-pack: end;
                    justify-content: flex-end;
                    background: #fff;
                    img {
                        top: 0;
                        left: 0;
                    }
                }
            }
        }
        .two {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-auto-rows: 174px;
            gap: 10px;
            grid-gap: 10px;
            .item,
            a {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-box-align: start;
                -ms-flex-align: start;
                align-items: flex-start;
                background-color: #fff;
                color: var(--corp);
                padding: 18px;
                p {
                    margin-top: 6px;
                    line-height: 1.2;
                }
                &:nth-child(1) {
                    background-color: var(--accent);
                    color: var(--corp);
                    grid-column: 1/3;
                }
                &:last-child {
                    grid-column: 4/6;
                    position: relative;
                    img {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                    }
                }
            }
        }
    }
    #achievements {
        background: var(--corp);
        color: #fff;
        position: relative;
        width: calc(100% - 40px);
        margin: 0 auto;
        border-radius: 12px;
        overflow: hidden;
        img {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            background: -webkit-gradient(
                linear,
                left top, right top,
                from(rgba(18, 30, 63, 0.63)),
                to(rgba(18, 30, 63, 1))
            );
            background: linear-gradient(
                90deg,
                rgba(18, 30, 63, 0.63),
                rgba(18, 30, 63, 1)
            );
        }
        .heading {
            text-align: left;
            position: relative;
            z-index: 3;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
        }
        .wrapper {
            position: relative;
            z-index: 3;
            padding-top: 100px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 60px 40px;
            gap: 60px 40px;
            h4 {
                color: var(--accent);
            }
            p {
                margin-top: 4px;
                color: #d9d9d9;
                font-size: 14px;
            }
        }
    }
    #gallery {
        .wrapper {
            display: grid;
            grid-template-columns: 1fr;
            grid-gap: 24px;
            gap: 24px;
            .item {
                border-radius: 12px;
                background-color: var(--bg);
                padding: 15px;
                cursor: pointer;
                -webkit-transition: 0.3s ease;
                transition: 0.3s ease;
                &:hover {
                    background-color: var(--dark);
                    color: #fff;
                    img {
                    }
                }
                div {
                    margin-top: 15px;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    p {
                        color: var(--grey);
                        max-width: 60%;
                        margin-top: 3px;
                    }
                }
                .preview {
                    width: 100%;
                    -o-object-fit: cover;
                    object-fit: cover;
                    height: 200px !important;
                }
            }
        }
    }
    #reviews-mobile,
    #reviews {
        background: var(--corp);
        color: #fff;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;

        .wrapper {
            position: relative;
            .left,
            .right {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
            .right {
                padding: 80px 0;
                margin-left: calc(50% + 24px);
                p {
                    margin: 12px 0 24px;
                    max-width: 70%;
                    color: var(--grey);
                }
                h3 {
                    margin-bottom: 12px;
                }
                iframe {
                    width: 100%;
                    height: 100%;
                    min-height: 500px;
                }
            }
        }
    }
    #reviews {
        .left {
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 20px;
            gap: 20px;
            display: grid;
            position: absolute;
            width: calc(50% - 24px);
            .reviews-left,
            .reviews-right {
                padding-top: 24px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                -webkit-box-align: start;
                -ms-flex-align: start;
                align-items: flex-start;
                grid-gap: 20px;
                gap: 20px;
                &:hover {
                    -webkit-animation-play-state: paused;
                    animation-play-state: paused;
                }
            }
            .reviews-left {
                margin-bottom: 200%;
                -webkit-animation: reviews-left 60s infinite;
                animation: reviews-left 60s infinite;
            }
            .reviews-right {
                margin-bottom: 200%;
                -webkit-animation: reviews-left 60s infinite 3s;
                animation: reviews-left 60s infinite 3s;
            }
            .item {
                background: #fff;
                padding: 20px;
                border-radius: 12px;
                .item-top {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    .avatar {
                        width: 50px;
                        height: 50px;
                        border-radius: 100px;
                        margin-right: 12px;
                    }
                    dd {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-orient: vertical;
                        -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                        flex-direction: column;
                        -webkit-box-align: start;
                        -ms-flex-align: start;
                        align-items: flex-start;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        span {
                            color: #000;
                            margin-bottom: 3px;
                            font-weight: 600;
                            display: block;
                        }
                    }
                }
                p {
                    margin-top: 8px;
                    font-size: 14px;
                    color: var(--grey);
                }
            }
        }
    }
    #process {
        background: var(--bg);
        position: relative;
        .preview {
            position: absolute;
            right: -5%;
            top: 50%;
            z-index: 1;
            -webkit-transform: translateY(-30%);
            transform: translateY(-30%);
        }
        .wrapper {
            .list {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-gap: 40px 60px;
                gap: 40px 60px;
                .item {
                    &:last-child {
                        grid-row: 3/4;
                        grid-column: 1/2;
                    }
                }
            }
            .list,
            .title {
                position: relative;
                z-index: 2;
            }
            .title {
                padding-top: 230px;
                button {
                    margin-top: 12px;
                }
            }
        }
    }
}

@-webkit-keyframes reviews-left {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(calc(-100% + 70vh - 24px));
        transform: translateY(calc(-100% + 70vh - 24px));
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes reviews-left {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50% {
        -webkit-transform: translateY(calc(-100% + 70vh - 24px));
        transform: translateY(calc(-100% + 70vh - 24px));
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes reviews-left-mobile {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(calc(-100% + 70vw - 24px));
        transform: translateX(calc(-100% + 70vw - 24px));
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes reviews-left-mobile {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    50% {
        -webkit-transform: translateX(calc(-100% + 70vw - 24px));
        transform: translateX(calc(-100% + 70vw - 24px));
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* затемнённый фон */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.5);
    .modal-content {
        /* background: #fff; */
        position: relative;
        max-width: 90%;
        max-height: 80%;
        margin: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    .modal-content img {
        width: 100%;
        height: auto;
        display: block;
        max-width: 50vw;
    }

    .buttons {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        padding: 12px 0;
    }

    .modal-content img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Кнопки навигации */
    .prev,
    .next {
        font-size: 40px;
        font-weight: bold;
        color: #000;
        background-color: var(--bg);
        cursor: pointer;
        padding: 10px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none; /* чтобы текст не выделялся */
        border-radius: 4px;
    }
    .prev {
        left: 10px;
    }
    .next {
        right: 10px;
    }

    /* При наведении делаем стрелки чуть ярче */
    .prev:hover,
    .next:hover,
    .close:hover {
        color: #ccc;
    }
}

.partners-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #fff; /* при желании убери/замени */
    padding: 16px 0;
}

.partners-track {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 48px; /* расстояние между логотипами */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    -webkit-animation: marquee var(--marquee-duration, 30s) linear infinite;
    animation: marquee var(--marquee-duration, 30s) linear infinite;
}

.partners-track img {
    height: 40px; /* подгони под дизайн */
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); /* стиль — можно убрать */
    opacity: 0.9;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
.partners-track img:hover {
    opacity: 1;
    -webkit-filter: saturate(1);
    filter: saturate(1);
}

/* Бесшовная прокрутка первой половины (оригинал), затем вторая (клон) */
@-webkit-keyframes marquee {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}
@keyframes marquee {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

/* Пауза при ховере (опционально) */
.partners-marquee:hover .partners-track {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

/* Уважение системных настроек анимации */
@media (prefers-reduced-motion: reduce) {
    .partners-track {
        -webkit-animation: none;
        animation: none;
    }
}

@media only screen and (max-width: 1300px) {
    html {
        body {
            header {
                .wrapper {
                    padding-left: 40px !important;
                    padding-right: 40px !important;
                    .left {
                        img {
                            margin-right: 20px;
                        }
                        .list {
                            gap: 12px;
                            grid-gap: 12px;
                        }
                    }
                }
            }
            .inner {
                padding: 60px 0;
            }
            .partners-track img {
                height: 32px;
            }
            #process {
                .wrapper {
                    display: grid;
                    grid-template-columns: 1fr;
                    .title {
                        grid-row: 1/2;
                        padding-top: 24px !important;
                        padding-bottom: 24px;
                    }
                    .list {
                        grid-template-columns: 1fr 1fr !important;
                        gap: 24px !important;
                    }
                    .preview {
                        margin-top: 44px;
                        -webkit-transform: none !important;
                        transform: none !important;
                        position: static !important;
                        width: 100%;
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 800px) {
    p.big {
        font-size: 16px !important;
    }
    html {
        #page-home {
            .modal-content {
                height: 300px;
            }
            #one {
                padding: 60px 0 !important;
                margin-top: 90px !important;
                .wrapper {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    .discount {
                        padding: 12px;
                    }
                    .right {
                        display: none;
                    }
                }
            }
            #partners {
                padding: 0 !important;
                .partners-track {
                    gap: 18px;
                    img {
                        height: 18px;
                    }
                }
            }
            #about {
                .heading {
                    padding-right: 15px !important;
                    padding-left: 15px !important;
                }
                .width {
                    padding-right: 0 !important;
                    padding-left: 0 !important;
                }
                .wrapper {
                    &.one {
                        grid-template-columns: 1fr 1fr !important;
                        grid-gap: 12px !important;
                        padding-right: 15px !important;
                        padding-left: 15px !important;
                        .item:first-child {
                            grid-column: 1/3;
                        }
                        .item {
                            p {
                                width: 100% !important;
                                max-width: 100% !important;
                            }
                            &:nth-child(2) {
                                padding-bottom: 150px !important;
                                padding: 15px !important;
                                img {
                                    width: 100% !important;
                                    height: auto !important;
                                }
                            }
                            &:nth-child(3) {
                                padding: 15px !important;
                                padding-top: 150px !important;
                                img {
                                    width: 100%;
                                }
                            }
                        }
                    }
                    &.two {
                        overflow-x: scroll;
                        padding-right: 15px !important;
                        padding-left: 15px !important;
                        grid-auto-rows: auto;
                        .item,
                        a {
                            padding: 12px !important;
                            min-width: 160px !important;
                            &:last-child {
                                img {
                                    height: 110%;
                                }
                            }
                        }
                    }
                }
            }
            #achievements {
                width: calc(100% - 20px) !important;
                .wrapper {
                    padding-top: 0 !important;
                    grid-template-columns: 1fr 1fr !important;
                    gap: 24px !important;
                    grid-gap: 24px !important;
                }
            }

            #reviews-mobile {
                .wrapper {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: reverse;
                    -ms-flex-direction: column-reverse;
                    flex-direction: column-reverse;
                }
                .left {
                    overflow-x: scroll;
                    padding-left: 15px;
                    padding-right: 15px;
                    .reviews-left,
                    .reviews-right {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        width: -webkit-max-content;
                        width: -moz-max-content;
                        width: max-content;
                        gap: 12px;
                        grid-gap: 12px;
                        margin-bottom: 12px;
                        .item {
                            width: -webkit-max-content;
                            width: -moz-max-content;
                            width: max-content;
                            overflow: hidden;
                            background: #fff;
                            padding: 12px;
                            border-radius: 12px;
                            .item-top {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                            }
                            span {
                                color: rgb(0, 0, 0);
                                margin-bottom: 3px;
                                font-weight: 600;
                                display: block;
                            }
                            p {
                                margin-top: 8px;
                                max-width: 40ch;
                                font-size: 14px;
                                color: var(--grey);
                            }
                        }
                    }
                }
                .right {
                    padding-left: 15px !important;
                    padding-right: 15px !important;
                    margin-left: 0 !important;
                    padding-top: 0 !important;
                    margin-bottom: 40px !important;
                    padding-bottom: 0 !important;
                    iframe {
                        height: 250px !important;
                        min-height: 250px !important;
                    }
                }
            }
            footer {
                padding-bottom: 120px;
                .preview {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                }
                nav {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    .item {
                        width: 100%;
                        .form-classic {
                            width: 100%;
                        }
                        span {
                            margin-top: 12px;
                        }
                        b {
                            margin-bottom: 12px;
                        }
                        a {
                            margin-bottom: 8px;
                        }
                    }
                }
                .logo {
                    height: 50px;
                }
            }
        }
    }
}

@media (max-width: 600px) {
    body {
        .modal-content img {
            max-width: 90vw !important;
        }
    }
}