/* ===== ПОДКЛЮЧЕНИЕ ЛОКАЛЬНЫХ ШРИФТОВ ===== */

    /* Montserrat */
    @font-face {
        font-family: 'Montserrat';
        src: url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/Montserrat/Montserrat-Regular.woff2') format('woff2'),
        url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/Montserrat/Montserrat-Regular.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/Montserrat/Montserrat-Medium.woff2') format('woff2'),
        url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/Montserrat/Montserrat-Medium.woff') format('woff');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/Montserrat/Montserrat-SemiBold.woff2') format('woff2'),
        url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/Montserrat/Montserrat-SemiBold.woff') format('woff');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/Montserrat/Montserrat-Bold.woff2') format('woff2'),
        url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/Montserrat/Montserrat-Bold.woff') format('woff');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Montserrat';
        src: url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/Montserrat/Montserrat-ExtraBold.woff2') format('woff2'),
        url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/Montserrat/Montserrat-ExtraBold.woff') format('woff');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
    }

    /* Gotham Pro */
    @font-face {
        font-family: 'Gotham Pro';
        src: url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/GothamPro/GothamPro_regular.woff2') format('woff2'),
        url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/GothamPro/GothamPro_regular.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Gotham Pro';
        src: url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/GothamPro/GothamPro_medium.woff2') format('woff2'),
        url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/GothamPro/GothamPro_medium.woff') format('woff');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Gotham Pro';
        src: url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/GothamPro/GothamPro_bold.woff2') format('woff2'),
        url('/Modules/Ui/Layouts/PublicLayout/Static/Fonts/GothamPro/GothamPro_bold.woff') format('woff');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    /* ===== CSS ПЕРЕМЕННЫЕ ===== */
    :root {
        --app-color-theme: #d6861a;
        --color-accent: #d6861a;
        --color-bg-main: #f9f9fc;
        --color-text-primary: #1e1e1e;
        --color-text-tertiary: #7b7b7b;
        --color-ui-element: #1e1e1e;
        --color-ui-element-line: #d6d6d6;
        --color-ui-element-background: #1e1e1e;
        --color-ui-element-layer-first: #fff;
        --color-ui-element-faded-background: #e6e6e6;
        --color-ui-element-active-background: #1e1e1e;
        --color-ui-element-active-layer-first: #fff;
        --color-ui-component-background: #f4f4f8;
        --color-button-scroll-to-top-bg: #e6e6ef;
        --color-button-scroll-to-top-icon: #fff;
        --color-box-shadow-ui-component: rgba(0,0,0,.15);
        --font-size-heading: 3rem;
        --transition-properties: 1.25s cubic-bezier(0.62,0.05,0.01,0.99);

        /* Шрифты */
        --app-headings-font: 'Montserrat', sans-serif;
        --app-text-font: 'Montserrat', sans-serif;
        --app-secondary-font: 'Gotham Pro', 'Montserrat', sans-serif;
    }
[v-cloak] {
            display: none;
        }

        :root {
            --color-accent: #d6861a;
            --color-bg-main: #f9f9fc;
            --color-text-primary: #1e1e1e;
            --color-text-tertiary: #7b7b7b;
            --color-ui-element-line: #d6d6d6;
            --color-ui-element-secondary-line: #e6e6ef;
            --color-ui-element-background: #1e1e1e;
            --color-ui-element-layer-first: #fff;
            --color-ui-element-layer-second: #1e1e1e;
            --color-ui-component-background: #f4f4f8;
            --color-ui-component-additional-background: #fff;
            --color-ui-component-layer-first: #fff;
            --color-ui-component-layer-second: #1e1e1e;
            --color-ui-element-background-hover: rgba(30, 30, 30, 0.05);
            --color-text-reviews-card: #7b7b7b;
            --color-box-shadow-ui-component: rgba(0, 0, 0, .15);
            --color-button-scroll-to-top-bg: #e6e6ef;
            --color-button-scroll-to-top-icon: #fff;
            --color-RegionSelection-bg: #f4f4f8;
            --color-RegionSelection-item-bg: #fff;
            --color-RegionSelection-border-decor: #dcdce0;
            --color-RegionSelection-text: #1e1e1e;
            --color-RegionSelection-button-radio: #e6e6e6;
            --color-CallBackQuiz-text: #fff;
            --color-ui-element-checkbox: #e6e6e6;
            --color-ui-element-background-opacity-10: rgba(30, 30, 30, .1);
            --filter-RegionSelection-button-image: invert(100%);
            --font-size-heading: 3rem;
        }

        @layer base {
            button,
            [role="button"] {
                cursor: pointer;
            }
        }

        [data-theme="dark"] {
            --color-bg-main: #1e1e1e;
            --color-text-primary: #fff;
            --color-text-tertiary: #7b7b7b;
            --color-ui-element-line: #404040;
            --color-ui-element-secondary-line: #3a3a3a;
            --color-ui-element-background: #363636;
            --color-ui-element-layer-first: #fff;
            --color-ui-element-layer-second: #1e1e1e;
            --color-ui-component-background: #292929;
            --color-ui-component-additional-background: #363636;
            --color-ui-component-layer-first: #3b3b3b;
            --color-ui-component-layer-second: #fff;
            --color-ui-element-background-hover: rgba(255, 255, 255, 0.05);
            --color-text-reviews-card: #505050;
            --color-box-shadow-ui-component: rgba(0, 0, 0, .52);
            --color-button-scroll-to-top-bg: #292929;
            --color-button-scroll-to-top-icon: #3c3c3c;
            --color-RegionSelection-bg: #363636;
            --color-RegionSelection-item-bg: #323131;
            --color-RegionSelection-border-decor: #313131;
            --color-RegionSelection-text: #fff;
            --color-RegionSelection-button-radio: #3c3c3c;
            --color-CallBackQuiz-text: #fff;
            --color-ui-element-checkbox: #3c3c3c;
            --color-ui-element-background-opacity-10: #393939;
            --filter-RegionSelection-button-image: invert(0);
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--color-bg-main);
            color: var(--color-text-primary);
            transition: background-color 0.3s, color 0.3s;
            overflow-y: scroll;
            overflow-x: hidden;
            max-width: 100vw;
        }

        #PublicLayout {
            padding-top: 100px;
        }

        #PublicLayoutPage {
            min-height: calc(100dvh - 616px);
        }

        /* Общие */
        .block-limiter {
            width: calc(100vw - 20px);
            margin: 0 auto;
        }

        @media screen and (min-width: 768px) {
            .block-limiter {
                width: calc(100vw - 40px);
            }
        }

        @media screen and (min-width: 1280px) {
            .block-limiter {
                width: calc(100vw - 80px);
                max-width: 1380px;
            }
        }
@layer base {button,[role="button"] {cursor: pointer;}}
/* ===== V-CLOAK ===== */
    [v-cloak] {
        display: none !important;
    }

    /* ===== MOBILE MENU TRANSITIONS ===== */
    .mobile-menu-enter-active,
    .mobile-menu-leave-active {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .mobile-menu-enter-from,
    .mobile-menu-leave-to {
        transform: translateY(-100%);
        opacity: 0;
    }

    .mobile-menu-enter-to,
    .mobile-menu-leave-from {
        transform: translateY(0);
        opacity: 1;
    }

    .HeaderMenu-list-main-enter-active,
    .HeaderMenu-list-main-leave-active,
    .HeaderMenu-list-inner-enter-active,
    .HeaderMenu-list-inner-leave-active {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .HeaderMenu-list-main-enter-from,
    .HeaderMenu-list-main-leave-to,
    .HeaderMenu-list-inner-enter-from,
    .HeaderMenu-list-inner-leave-to {
        opacity: 0;
        transform: translateX(20px);
    }

    .HeaderMenu-list-main-enter-to,
    .HeaderMenu-list-main-leave-from,
    .HeaderMenu-list-inner-enter-to,
    .HeaderMenu-list-inner-leave-from {
        opacity: 1;
        transform: translateX(0);
    }

    /* ===== HEADER MENU STYLES ===== */
    .HeaderMenu {
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        position: fixed;
        padding: 12px 20px;
        background-color: var(--color-bg-main);
        z-index: 1000;
        top: 0;
        left: 0;
    }

    @media screen and (min-width: 768px) {
        .HeaderMenu {
            padding: 12px 20px 40px 20px;
        }
    }

    @media screen and (min-width: 961px) {
        .HeaderMenu {
            padding: 12px 40px;
        }
    }

    .HeaderMenu-container {
        display: flex;
        flex-direction: column;
        position: relative;
        user-select: none;
        width: 100%;
        height: 100%;
    }

    .HeaderMenu__top {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
    }

    .HeaderMenu__content {
        display: flex;
        flex: 1;
        align-items: center;
        gap: 40px;
        height: 100%;
    }

    .HeaderMenu__bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        z-index: 10;
    }

    .HeaderMenu__divider {
        width: 1px;
        height: 60%;
        background: linear-gradient(to bottom, transparent, var(--color-ui-element-line), transparent);
        opacity: 0.3;
    }

    .HeaderMenu__social-wr {
        z-index: 2;
    }

    .HeaderMenu__contacts {
        z-index: 2;
        line-height: 150%;
    }

    .HeaderMenu__button-close {
        z-index: 2;
        display: flex;
        gap: 8px;
        align-items: center;
        color: var(--color-text-primary);
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
    }

    .HeaderMenu__button-close svg {
        stroke: var(--color-text-primary);
        transition: transform 0.4s ease;
        fill: none;
        stroke-width: 2;
    }

    .HeaderMenu__button-close:hover svg {
        transform: rotateZ(90deg);
    }

    .HeaderMenu__button-close:hover .HeaderMenu__button-close-text {
        transform: translateX(8px);
        opacity: 1;
    }

    .HeaderMenu__phone-link {
        transition: color .1s linear;
        display: block;
        font-size: clamp(1rem, -0.6rem + 8vw, 1.5rem);
        font-weight: 500;
        line-height: 150%;
        color: var(--color-text-primary);
        text-decoration: none;
    }

    .HeaderMenu__phone-link:hover {
        color: var(--color-accent);
    }

    .HeaderMenu__button-close-text {
        transition: transform 0.4s ease, opacity 0.4s ease;
        opacity: .2;
        font-size: 1.2rem;
        line-height: 30px;
        font-weight: 500;
    }

    .HeaderMenu__left {
        position: relative;
        width: 45%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @media screen and (max-width: 1200px) {
        .HeaderMenu__left {
            display: none;
        }

        .HeaderMenu__divider {
            display: none;
        }

        .HeaderMenu__right {
            width: 100% !important;
        }
    }

    .HeaderMenu__right {
        position: relative;
        display: flex;
        align-items: center;
        overflow-y: hidden;
        height: 100%;
        width: 55%;
    }

    .HeaderMenu__right-wr {
        height: 80%;
        width: 100%;
    }

    .HeaderMenu__right-list {
        position: relative;
        display: flex;
        height: 100%;
        overflow-x: auto;
        width: 100%;
    }

    .HeaderMenu__right-list::-webkit-scrollbar {
        display: none;
    }

    .HeaderMenu__right-list-wr {
        width: 100%;
        padding-right: 15%;
        display: flex;
        flex-direction: column;
        min-height: fit-content;
    }

    .HeaderMenu__right-list-wr-inner {
        position: absolute;
    }

    .HeaderMenu__right-list-item {
        transition: opacity .6s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: var(--color-text-primary);
        opacity: .3;
        text-decoration: none;
        cursor: pointer;
        background: none;
        border: none;
        text-align: left;
    }

    .HeaderMenu__right-list-item:hover {
        opacity: 1;
    }

    .HeaderMenu__right-list-item:hover .HeaderMenu__right-list-item-icon {
        opacity: 1;
        transform: translateX(0);
    }

    .HeaderMenu__right-list-item-icon {
        transition: transform .6s ease, opacity .6s ease;
        transform: translateX(-100%);
        opacity: 0;
        width: 24px;
        height: 24px;
    }

    .HeaderMenu__right-list-item--main {
        font-size: clamp(2rem, 0.1rem + 10vw, 5rem);
        font-weight: 500;
        line-height: 110%;
        margin-bottom: 12px;
    }

    .HeaderMenu__right-list-item--sub {
        font-size: clamp(1.5rem, 0.1rem + 8vw, 3rem);
        font-weight: 500;
        line-height: 120%;
        margin-bottom: 8px;
    }

    @media screen and (min-width: 1200px) {
        .HeaderMenu__right-list-item--main {
            font-size: 3rem;
            margin-bottom: 24px;
        }
    }

    .HeaderMenu__button-close-inner {
        transition: opacity .6s ease;
        position: absolute;
        top: -40px;
        left: 0px;
        font-size: 1.09rem;
        font-weight: 400;
        line-height: 130%;
        color: var(--color-text-primary);
        opacity: .3;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .HeaderMenu__button-close-inner svg {
        transition: transform .3s ease;
        transform: rotateY(180deg);
    }

    .HeaderMenu__button-close-inner:hover {
        opacity: 1;
    }

    .HeaderMenu__button-close-inner:hover svg {
        transform: translateX(-10%) rotateY(180deg);
    }

    @media screen and (min-width: 600px) {
        .HeaderMenu__button-close-inner {
            top: -60px;
        }
    }

    @media screen and (min-width: 1200px) {
        .HeaderMenu__button-close-inner {
            top: -80px;
        }
    }

    .HeaderMenu__left-image {
        border-radius: 50px;
        flex: 1;
        max-width: 95%;
        height: auto;
        max-height: 95%;
        object-fit: contain;
        object-position: center;
    }

    .HeaderMenu__animation {
        animation: fadeInUp 0.5s ease-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .HeaderMenu__scrollbar {
        display: none;
        position: absolute;
        left: 0;
        top: 24px;
        height: calc(100% - 48px);
        width: 4px;
    }

    @media screen and (min-width: 1200px) {
        .HeaderMenu__scrollbar {
            display: block;
        }
    }

    .ScrollbarComponent {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .ScrollbarComponent__thumb {
        width: 100%;
        background-color: var(--color-accent);
        border-radius: 4px;
        transition: height 0.2s ease;
    }

    .AppSocialsWidget--big .AppSocialsWidget__icon {
        width: 48px;
        height: 48px;
    }

    .AppSocialsWidget--big .AppSocialsWidget__icon svg {
        width: 24px;
        height: 24px;
    }

    /* ===== ОСТАЛЬНЫЕ СТИЛИ ХЕДЕРА ===== */
    .BasicTemplateHeader {
        transition: transform 0.4s ease-in-out;
        position: fixed;
        z-index: 3;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100vw;
        padding: 12px 20px;
        border-bottom: 1px solid rgba(30, 30, 30, .051);
        background-color: var(--color-bg-main);
    }

    /* Стиль для скрытого хедера */
    .BasicTemplateHeader--hidden {
        transform: translateY(-100%);
    }

    @media screen and (min-width: 1240px) {
        .BasicTemplateHeader {
            padding: 12px 40px;
        }
    }

    .BasicTemplateHeader-wr {
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        max-width: 1380px;
    }

    .BasicTemplateHeader__left {
        position: relative;
        align-items: center;
        display: flex;
        gap: 0 24px;
    }

    .BasicTemplateHeader__left-info {
        display: flex;
        flex-direction: column;
    }

    .BasicTemplateHeader__left-info-link {
        display: inline-block;
        width: fit-content;
        line-height: 24px;
        font-size: 1rem;
        color: var(--color-text-primary);
        text-decoration: none;
        font-weight: 700;
    }

    .BasicTemplateHeader__left-info-link:hover {
        color: var(--color-accent);
    }

    .BasicTemplateHeader__right {
        display: flex;
        gap: 0 40px;
        align-items: center;
    }

    .BasicTemplateHeader__controls {
        display: flex;
        gap: 0 10px;
    }

    .HeaderNavigation {
        display: flex;
        position: relative;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .HeaderNavigation li {
        position: relative;
        list-style: none;
    }

    .ButtonNavigationLink {
        display: block;
        color: var(--color-text-primary);
        text-decoration: none;
        line-height: 150%;
        padding: 16px 12px;
        transition: color .3s linear;
        position: relative;
        z-index: 2;
    }

    .HeaderNavigation__highlight-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        border-radius: 50px;
        background-color: var(--color-accent);
        transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), width .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease;
        pointer-events: none;
        z-index: 1;
        will-change: transform, width;
        opacity: 0;
    }

    .ButtonNavigationLink:hover {
        color: var(--color-accent);
    }

    .ButtonNavigationLink--active {
        color: var(--color-accent);
    }

    .ButtonLink {
        --font-size: 18px;
        --time: .35s;
        --line-height: 18px;
        padding: 19px 29px;
        line-height: var(--line-height);
        display: flex;
        gap: 6px;
        align-items: center;
        justify-content: center;
        border-radius: 58px;
        background: var(--color-ui-element-background);
        color: var(--color-ui-element-layer-first);
        fill: var(--color-ui-element-layer-first);
        transition: transform var(--time) linear, box-shadow var(--time) linear;
        border: none;
        cursor: pointer;
    }

    .ButtonLink div {
        display: flex;
        overflow: hidden;
        text-shadow: 0 17px 0 var(--color-ui-element-layer-first);
        height: 18px;
    }

    .ButtonLink div span {
        display: block;
        backface-visibility: hidden;
        transition: transform var(--time) ease-out;
        transform: translateY(var(--m)) translateZ(0);
    }

    .ButtonLink:hover div span {
        --m: calc(var(--line-height) * -1);
    }

    .AppSocialsWidget {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .AppSocialsWidget__icon {
        cursor: pointer;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        background-color: var(--color-ui-element-background);
        transition: background-color .2s linear;
    }

    .AppSocialsWidget__icon svg {
        position: relative;
        z-index: 1;
        transition: fill .2s linear;
        fill: var(--color-ui-element-layer-first);
        width: 14px;
        height: 14px;
    }

    .AppSocialsWidget__icon--whatsapp:hover {
        background-color: #36ac65;
    }

    .AppSocialsWidget__icon--telegram:hover {
        background-color: #0af;
    }

    .AppSocialsWidget__icon--max:before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(135deg, #2467fa, #6128e3, #893edc);
        opacity: 0;
        transition: opacity .2s linear;
    }

    .AppSocialsWidget__icon--max:hover:before {
        opacity: 1;
    }

    .AppSocialsWidget__icon:hover svg {
        fill: #fff;
    }

    .BasicTemplateHeader__controls-burger {
        width: 40px;
        height: 56px;
        fill: var(--color-ui-element);
        cursor: pointer;
        background: none;
        border: none;
    }

    .BasicTemplateHeader__controls-burger:hover {
        fill: var(--color-accent);
    }

    .CityConfirmation__title {
        font-size: .875rem;
        font-weight: 400;
        line-height: 24px;
        color: #7b7b7b;
        text-decoration: underline;
        cursor: pointer;
        background: none;
        border: none;
    }

    .RegionSelection {
        border: 1px solid rgba(0, 0, 0, .102);
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        width: max-content;
        padding: 24px;
        background-color: var(--color-RegionSelection-bg);
        border-radius: 36px;
        z-index: 50;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .RegionSelection:before {
        content: "";
        position: absolute;
        top: -13px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid var(--color-RegionSelection-border-decor);
    }

    .RegionSelection__list {
        width: fit-content;
        max-height: 178px;
        overflow: auto;
        display: grid;
        gap: 8px;
    }

    .RegionSelection__item {
        cursor: pointer;
        overflow: hidden;
        position: relative;
        padding: 16px 32px 16px 16px;
        width: 100%;
        border-radius: 36px;
        border: 1px solid rgba(0, 0, 0, .2);
        display: flex;
        align-items: center;
        gap: 16px;
        height: 54px;
        background-color: var(--color-RegionSelection-item-bg);
        transition: all 0.3s ease;
    }

    .RegionSelection__button-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        z-index: 0;
        filter: var(--filter-RegionSelection-button-image, invert(0%));
    }

    .RegionSelection__item:hover .RegionSelection__button-image {
        opacity: 1;
    }

    .RegionSelection__item.is-active .RegionSelection__button-image {
        opacity: 0.08;
        transition: opacity 0.3s ease-in-out;
    }

    .RegionSelection__item.is-active:hover .RegionSelection__button-image {
        opacity: 0.3;
    }

    .RegionSelection__item-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0);
        transition: background 0.3s ease;
        z-index: 1;
    }

    .RegionSelection__item:hover .RegionSelection__item-overlay {
        background: rgba(0, 0, 0, 0.5);
    }

    .RegionSelection__item.is-active .RegionSelection__item-overlay {
        background: rgba(0, 0, 0, 0.6);
    }

    .RegionSelection__button-radio,
    .RegionSelection__button {
        position: relative;
        z-index: 2;
    }

    .RegionSelection__button-radio {
        width: 20px;
        height: 20px;
        background-color: var(--color-RegionSelection-button-radio);
        border-radius: 50%;
        position: relative;
        flex-shrink: 0;
    }

    .RegionSelection__button-radio:after {
        transition: opacity .3s ease;
        opacity: 0;
        display: block;
        content: "";
        width: 10px;
        height: 10px;
        background-color: #d6861a;
        border-radius: 50%;
        margin: 5px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .RegionSelection__item.is-active .RegionSelection__button-radio:after {
        opacity: 1;
    }

    .RegionSelection__button {
        color: var(--color-RegionSelection-text);
        position: relative;
        z-index: 2;
        font-weight: 500;
        transition: color 0.3s ease;
    }

    .RegionSelection__item:hover .RegionSelection__button,
    .RegionSelection__item.is-active .RegionSelection__button {
        color: white;
    }

    @media screen and (max-width: 755px) {
        .AppSocialsWidget.BasicTemplateHeader__social,
        .BasicTemplateHeader__control-button {
            display: none;
        }
    }

    @media screen and (max-width: 1240px) {
        .BasicTemplateHeader__nav {
            display: flex;
        }
    }

    /* mobile */

    @media screen and (max-width: 1050px) {
        #HeaderWidget .HeaderNavigation {
            display: none;
        }

        #HeaderWidget .ButtonLink {
            display: none;
        }

        #HeaderWidget .AppSocialsWidget__icon {
            height: 32px;
            width: 32px;
        }

        #HeaderWidget .AppSocialsWidget--big .AppSocialsWidget__icon svg {
            height: 16px;
            width: 16px;
        }
    }
[v-cloak] {
        display: none;
    }
    #ChatWidget #RenderPageContent {
        display: block !important;
        opacity: 1;
    }

    #ChatWidget {
        width: 100%
    }

    #ChatWidget .AiChat_NoConflict_IQP_messages {
        max-height: calc(100dvh - 300px);
        overflow-y: auto;
    }

    /* ===== ОСНОВНЫЕ СТИЛИ ===== */
    .MainBlock {
        padding: 52px 0 0;
        display: grid;
        grid-template-areas: 'left' 'right' 'clock';
    }

    @media screen and (min-width: 1024px) {
        .MainBlock {
            grid-template-areas: 'left right' 'clock right';
            grid-auto-columns: 665px 700px;
            justify-content: space-between;
        }
    }

    .MainBlock__left {
        grid-area: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        max-width: 665px;
    }

    .MainBlock__right {
        grid-area: right;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        cursor: default;
    }

    .MainBlock__clock {
        grid-area: clock;
    }

    .MainBlock__image-wrapper {
        width: 100%;
        max-width: 620px;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        background: var(--color-bg-secondary);
        overflow: hidden;
    }

    .MainBlock__right-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        border-radius: 24px;
    }

    @media screen and (max-width: 768px) {
        .MainBlock__image-wrapper {
            width: 90vw;
            max-width: 100%;
            height: 60vw;
            max-height: 400px;
        }
    }

    .MainBlock__info {
        width: 100%;
        height: 100%;
        display: flex;
        gap: 8px;
        flex-direction: column;
        margin-bottom: 32px;
    }

    @media screen and (min-width: 768px) {
        .MainBlock__info {
            margin-bottom: 34px;
            gap: 4px;
        }
    }

    .MainBlock__info-title {
        display: flex;
        gap: 4px;
        flex-direction: column;
        justify-content: space-between;
    }

    @media screen and (min-width: 768px) {
        .MainBlock__info-title {
            gap: 4px;
        }
    }

    .MainBlock__subtitle {
        font-size: 1.25rem;
        line-height: 30px;
        color: var(--color-text-primary);
        opacity: .5;
        margin-bottom: 0;
    }

    /* ===== МЕССЕНДЖЕР ===== */
    .messenger-container {
        width: 100%;
        max-width: 600px;
        margin-top: 8px;
        background: white;
        border-radius: 24px;
        overflow: hidden;
        border: 1px solid rgba(214, 134, 26, 0.15);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
    }

    .messenger-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: rgba(214, 134, 26, 0.05);
        border-bottom: 1px solid rgba(214, 134, 26, 0.1);
        flex-shrink: 0;
    }

    .messenger-avatar-wrapper {
        position: relative;
        width: 36px;
        height: 36px;
    }

    .messenger-avatar {
        width: 100%;
        height: 100%;
        background: var(--color-accent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
        font-weight: 600;
    }

    .status-dot {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        background: #10b981;
        border-radius: 50%;
        border: 2px solid white;
        animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% {
            opacity: 1;
            transform: scale(1);
        }
        50% {
            opacity: 0.5;
            transform: scale(1.2);
        }
    }

    .messenger-info {
        flex: 1;
    }

    .messenger-name {
        font-weight: 600;
        font-size: 14px;
        color: var(--color-text-primary);
    }

    .messenger-messages {
        flex: 1;
        min-height: 210px;
        max-height: 300px;
        overflow-y: auto;
        padding: 16px;
        background: var(--color-ui-component-background);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .messenger-messages::-webkit-scrollbar {
        width: 5px;
    }

    .messenger-messages::-webkit-scrollbar-track {
        background: #e5e7eb;
        border-radius: 10px;
    }

    .messenger-messages::-webkit-scrollbar-thumb {
        background: var(--color-accent);
        border-radius: 10px;
    }

    .message {
        display: flex;
        flex-direction: column;
        max-width: 80%;
    }

    .message-incoming {
        align-items: flex-start;
    }

    .message-outgoing {
        align-items: flex-end;
        margin-left: auto;
    }

    .message-bubble {
        padding: 8px 12px;
        border-radius: 18px;
        font-size: 14px;
        line-height: 1.4;
        word-wrap: break-word;
    }

    .message-bubble-incoming {
        background: white;
        border: 1px solid #e5e7eb;
        border-bottom-left-radius: 4px;
        color: #111827;
    }

    .message-bubble-outgoing {
        background: var(--color-accent);
        border-bottom-right-radius: 4px;
        color: white;
    }

    .typing-cursor {
        display: inline-block;
        width: 2px;
        height: 14px;
        background: var(--color-accent);
        margin-left: 2px;
        animation: blink 1s infinite;
    }

    .message-time {
        font-size: 10px;
        color: #9ca3af;
        margin-top: 4px;
        margin-left: 12px;
    }

    .message-time-right {
        margin-right: 12px;
        margin-left: 0;
    }

    .typing-indicator-wrapper {
        display: flex;
        align-items: flex-start;
    }

    .typing-indicator {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 18px;
        border-bottom-left-radius: 4px;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .typing-dot {
        width: 6px;
        height: 6px;
        background: #9ca3af;
        border-radius: 50%;
        animation: typingPulse 1.4s infinite ease-in-out;
    }

    .typing-dot:nth-child(1) {
        animation-delay: 0s;
    }

    .typing-dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .typing-dot:nth-child(3) {
        animation-delay: 0.4s;
    }

    .typing-text {
        font-size: 12px;
        color: #6b7280;
        margin-left: 6px;
    }

    @keyframes typingPulse {
        0%, 60%, 100% {
            transform: scale(0.8);
            opacity: 0.4;
        }
        30% {
            transform: scale(1.2);
            opacity: 1;
        }
    }

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

    /* ===== ПОЛЕ ДЛЯ ВВОДА ===== */
    .messenger-input-area {
        padding: 12px 16px;
        background: white;
        border-top: 1px solid rgba(214, 134, 26, 0.1);
        flex-shrink: 0;
    }

    .messenger-input-wrapper {
        display: flex;
        align-items: flex-end;
        gap: 10px;
        background: #f5f5f5;
        border-radius: 24px;
        padding: 6px 12px;
        border: 1px solid #e5e7eb;
        transition: all 0.2s ease;
    }

    .messenger-input-wrapper:focus-within {
        border-color: var(--color-accent);
        background: white;
    }

    .messenger-input {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        font-size: 14px;
        color: #1e1e1e;
        resize: none;
        font-family: inherit;
        min-height: 36px;
        max-height: 80px;
        padding: 6px 0;
    }

    .messenger-input::placeholder {
        color: #9ca3af;
    }

    .messenger-send-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #e5e7eb;
        border: none;
        cursor: pointer;
        color: #9ca3af;
        transition: all 0.2s ease;
        flex-shrink: 0;
        font-size: 16px;
    }

    .messenger-send-btn.active {
        background: var(--color-accent);
        color: white;
    }

    .messenger-send-btn.active:hover {
        transform: scale(1.05);
    }

    /* ===== КНОПКА ===== */
    .MainBlock__button {
        --font-size: 0.95rem;
        --time: 0.4s;
        --line-height: 1.4rem;
        padding: 10px 24px;
        display: inline-flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        border-radius: 58px;
        background: var(--color-ui-element-background);
        color: var(--color-ui-element-layer-first);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
        border: none;
        font-size: var(--font-size);
        font-weight: 500;
        text-decoration: none;
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .MainBlock__button-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        font-size: 18px;
    }

    .MainBlock__button .MainBlock__button-text-wrapper {
        overflow: hidden;
    }

    .MainBlock__button .MainBlock__button-text-animated {
        display: block;
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

    .MainBlock__button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    }

    .MainBlock__button:hover .MainBlock__button-icon {
        transform: translateY(-2px);
    }

    /* ===== АНИМАЦИИ ===== */
    .fade-image-enter-active,
    .fade-image-leave-active {
        transition: opacity 0.5s ease;
    }

    .fade-image-enter-from,
    .fade-image-leave-to {
        opacity: 0;
    }

    .fade-button-enter-active,
    .fade-button-leave-active {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .fade-button-enter-from {
        opacity: 0;
        transform: scale(0.9);
    }

    .fade-button-leave-to {
        opacity: 0;
        transform: scale(0.9);
    }

    /* ===== ЗАГОЛОВКИ ===== */
    .MainBlock__title-wr {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        gap: 0 1rem;
        overflow: hidden;
    }

    @media screen and (min-width: 768px) {
        .MainBlock__title-wr {
            flex-direction: row;
        }
    }

    .MainBlock__title {
        color: var(--color-text-primary);
        font-size: 2rem;
        line-height: 35px;
        font-weight: 700;
    }

    @media screen and (min-width: 768px) {
        .MainBlock__title {
            padding-bottom: 8px;
            font-size: 3rem;
            line-height: 70px;
            font-weight: 700;
        }
    }

    .MainBlock__title-list {
        display: flex;
        flex-direction: column;
        height: 35px;
        overflow: hidden;
    }

    @media screen and (min-width: 768px) {
        .MainBlock__title-list {
            height: 70px;
        }
    }

    .MainBlock__title--animation {
        transition: transform 0.5s ease-in-out;
    }

    /* ===== ЧАСЫ ===== */
    .MainPageMainBlockClock__time {
        padding-top: 16px;
        height: 135px;
        display: grid;
        grid-gap: 6px 28px;
        grid-template-areas: 'clock top' 'clock bottom';
        grid-auto-columns: 263px auto;
    }

    @media screen and (min-width: 1240px) {
        .MainPageMainBlockClock__time {
            height: 155px;
        }
    }

    .MainPageMainBlockClock__clock {
        grid-area: clock;
        font-size: 6.25rem;
        font-weight: 500;
        line-height: 100px;
        color: #C6C6C6;
    }

    .MainPageMainBlockClock__clock-hour {
        color: var(--color-text-primary);
    }

    .MainPageMainBlockClock__clock-points {
        animation: points-blink 1s infinite linear;
    }

    @keyframes points-blink {
        0%, 25%, 100% {
            opacity: 1;
        }
        50%, 75% {
            opacity: 0;
        }
    }

    .MainPageMainBlockClock__time-item {
        white-space: nowrap;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .MainPageMainBlockClock__time-item--top {
        margin-top: 8px;
        align-self: flex-end;
        grid-area: top;
    }

    .MainPageMainBlockClock__time-item--bottom {
        margin-bottom: 23px;
        grid-area: bottom;
        align-self: flex-start;
    }

    .MainPageMainBlockClock__time-item--active {
        fill: #4FAF58;
        color: #4FAF58;
    }

    /* ===== СТИЛИ КНОПКИ ЗАКРЫТИЯ (как в CallbackFormWidget) ===== */
    .close-btn {
        position: relative;
        border: none;
        background-color: #1e293b;
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        overflow: visible;
        cursor: pointer;
    }

    .close-btn svg:first-child {
        position: relative;
        z-index: 1;
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

    .close-btn .border-ring {
        position: absolute;
        top: -2px;
        left: -2px;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    .close-btn .border-ring svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    .close-btn .border-ring circle {
        fill: none;
        stroke: #f59e0b;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-dasharray: 133;
        stroke-dashoffset: 133;
        transition: stroke-dashoffset 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

    .close-btn:hover .border-ring circle {
        stroke-dashoffset: 0;
    }

    .close-btn:not(:hover) .border-ring circle {
        stroke-dashoffset: 133;
    }

    .close-btn:hover {
        transform: scale(1.08);
    }

    .close-btn:hover svg:first-child {
        transform: rotate(90deg);
    }

    .close-btn:active {
        transform: scale(0.96);
    }

    @media (max-width: 640px) {
        div[style*="right: -48px"] {
            right: -12px !important;
        }
    }

    /* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
    @media screen and (max-width: 768px) {
        .MainPageMainBlockClock__time.MainBlock__clock-widget {
            display: none;
        }

        .MainBlock__button {
            padding: 8px 20px;
            font-size: 0.85rem;
            --line-height: 1.2rem;
        }

        .MainBlock__button-icon {
            font-size: 16px;
        }

        .messenger-container {
            max-width: 100%;
        }

        .messenger-messages {
            min-height: 250px;
            max-height: 350px;
        }

        .message {
            max-width: 90%;
        }
    }
#ProjectsListWidget {
        min-height: 900px;
    }

    [v-cloak] {
        display: none !important;
    }

    @media screen and (max-width: 768px) {
        body.filter--open {
            overflow: hidden;
            position: fixed;
            width: 100%;
        }
        body.mobile-filter--open {
            overflow: hidden;
            position: fixed;
            width: 100%;
        }
        .MainPagePortfolio__button-container {
            padding: 18px;
        }
    }

    .MainPagePortfolio {
        position: relative;
        scroll-margin-top: 100px;
        display: grid;
        grid-template-areas: 'title buttton' 'projects projects';
        grid-template-columns: 1fr 1fr;
        grid-gap: 32px 0;
        margin-top: 80px;
    }

    .MainPagePortfolio__title {
        white-space: nowrap;
        align-self: flex-end;
        grid-area: title;
        font-size: clamp(16px, 4vw + 1rem, 3rem);
        font-weight: 500;
        color: var(--color-text-primary);
        line-height: 110%;
    }

    .MainPagePortfolio__button-container {
        grid-area: buttton;
        justify-self: flex-end;
        align-self: center;
        position: relative;
    }

    /* Кнопка фильтра с анимированной каплей - оптимизированная версия */
    .ButtonFilter {
        position: relative;
        background-color: var(--color-ui-element-background);
        height: 60px;
        width: 165px;
        border-radius: 333px;
        padding: 6px 6px 6px 6px;
        display: flex;
        align-items: center;
        gap: 8px;
        will-change: contents;
    }

    .ButtonFilter__btn {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 333px;
        background-color: transparent;
        color: var(--color-ui-element-layer-first);
        width: 74px;
        height: 48px;
        font-size: 1rem;
        line-height: 24px;
        font-weight: 500;
        cursor: pointer;
        border: none;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .ButtonFilter__btn.active {
        color: var(--color-ui-element-layer-second);
    }

    .ButtonFilter__btn-filter i {
        font-size: 1.25rem;
        pointer-events: none;
    }

    /* Оптимизированная анимированная капля */
    .ButtonFilter__active-drop {
        position: absolute;
        top: 6px;
        height: 48px;
        width: 74px;
        border-radius: 333px;
        background-color: white;
        transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        z-index: 1;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    .ButtonFilter__active-drop.drop-all {
        transform: translateX(0);
    }

    .ButtonFilter__active-drop.drop-filter {
        transform: translateX(calc(100% + 8px));
    }

    .MainPagePortfolio__button-icon {
        display: none;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        font-size: 1.5rem;
        color: var(--color-text-primary);
    }

    @media screen and (max-width: 620px) {
        .ButtonFilter.MainPagePortfolio__button {
            display: none;
        }

        .MainPagePortfolio__button-icon {
            display: flex;
        }
    }

    /* Десктопная панель фильтров с блюром */
    .MainPagePortfolio__filter-wr {
        position: absolute;
        top: 70px;
        right: 0;
        width: 900px;
        max-width: 90vw;
        z-index: 100;
        background: #fff;
        border-radius: 32px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Темная тема */
    [data-theme="dark"] .MainPagePortfolio__filter-wr {
        background: rgba(30, 30, 30, 0.85);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    @media screen and (max-width: 1000px) {
        .MainPagePortfolio__filter-wr {
            width: 90vw;
            right: 50%;
            transform: translateX(50%);
        }
    }

    .AppProjectFilter--horizontal {
        max-height: 65vh;
        overflow-y: auto;
        padding-right: 6px;
    }

    /* Минималистичный кастомный скролл */
    .AppProjectFilter--horizontal::-webkit-scrollbar {
        width: 4px;
    }

    .AppProjectFilter--horizontal::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }

    .AppProjectFilter--horizontal::-webkit-scrollbar-thumb {
        background: #d6861a;
        border-radius: 4px;
    }

    .AppProjectFilter--horizontal::-webkit-scrollbar-thumb:hover {
        background: #b56f16;
    }

    .AppProjectFilterLists {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }

    @media screen and (max-width: 768px) {
        .AppProjectFilterLists {
            grid-template-columns: 1fr;
            gap: 16px;
        }
    }

    /* Стили фильтра */
    .AppProjectFilterList__filter-type {
        padding-bottom: 8px;
    }

    .AppProjectFilterList__filter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 0 4px 0;
        user-select: none;
    }

    .AppProjectFilterList__filter-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-text-primary);
    }

    .AppProjectFilterList__filter-items {
        margin-top: 4px;
    }

    .AppProjectFilterList__filter-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        max-height: 280px;
        overflow-y: auto;
        padding-right: 4px;
        margin: 0;
        list-style: none;
    }

    .AppProjectFilterList__filter-list::-webkit-scrollbar {
        width: 3px;
    }

    .AppProjectFilterList__filter-list::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
    }

    .AppProjectFilterList__filter-list::-webkit-scrollbar-thumb {
        background: #d6861a;
        border-radius: 3px;
    }

    .AppProjectFilterList__filter-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 5px 8px;
        border-radius: 8px;
        transition: background 0.2s ease;
    }

    .AppProjectFilterList__filter-item:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    .AppProjectFilterList__filter-item-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Иконка через div с фоном 24x24px */
    .AppProjectFilterList__filter-item-icon {
        width: 24px;
        height: 24px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.5;
        transition: opacity 0.2s ease;
        flex-shrink: 0;
    }

    .AppProjectFilterList__filter-item:hover .AppProjectFilterList__filter-item-icon {
        opacity: 1;
    }

    .AppProjectFilterList__filter-item-text {
        font-size: 0.75rem;
        color: var(--color-text-primary);
    }

    .AppProjectFilterList__filter-item-count {
        font-size: 0.65rem;
        color: var(--color-text-tertiary);
        background: rgba(0, 0, 0, 0.05);
        padding: 1px 5px;
        border-radius: 10px;
        min-width: 22px;
        text-align: center;
        margin-left: auto;
        margin-right: 8px;
    }

    /* Кастомный круглый чекбокс */
    .AppProjectFilterList__filter-item-input {
        appearance: none;
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border: 2px solid #d6861a;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        background-color: transparent;
        transition: all 0.2s ease;
        margin: 0;
        flex-shrink: 0;
    }

    .AppProjectFilterList__filter-item-input:checked {
        background-color: #d6861a;
        border-color: #d6861a;
    }

    .AppProjectFilterList__filter-item-input:checked::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 5px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 6"><path d="M7.76497 0.205009C7.90947 0.341618 7.99381 0.530023 7.99943 0.728798C8.00506 0.927573 7.93151 1.12045 7.79497 1.26501L3.54497 5.76501C3.47609 5.83781 3.39331 5.89607 3.30154 5.93634C3.20976 5.97661 3.11085 5.99808 3.01064 5.99948C2.91042 6.00088 2.81095 5.98218 2.71808 5.94448C2.62522 5.90679 2.54085 5.85086 2.46997 5.78001L0.219969 3.53001C0.0874886 3.38783 0.0153654 3.19979 0.0187936 3.00549C0.0222218 2.81119 0.100934 2.6258 0.238347 2.48839C0.37576 2.35097 0.561145 2.27226 0.755446 2.26883C0.949747 2.26541 1.13779 2.33753 1.27997 2.47001L2.98497 4.17401L6.70497 0.235009C6.84158 0.0905061 7.02998 0.00617039 7.22876 0.000544684C7.42753 -0.00508102 7.62041 0.0684638 7.76497 0.205009Z" fill="white"/></svg>') no-repeat center;
        background-size: contain;
    }

    .AppProjectFilterList__filter-item-input:hover {
        transform: scale(1.1);
    }

    .AppProjectFilterControlButtons {
        margin-top: 16px;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .ProjectFilter__buttons {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }

    .ProjectFilter__button-reset {
        padding: 6px 16px;
        border-radius: 40px;
        background: transparent;
        border: 1px solid rgba(0, 0, 0, 0.2);
        color: var(--color-text-tertiary);
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .ProjectFilter__button-reset:hover {
        border-color: #d6861a;
        color: #d6861a;
    }

    .ProjectFilter__button-submit {
        padding: 6px 20px;
        border-radius: 40px;
        background: #d6861a;
        border: none;
        color: white;
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .ProjectFilter__button-submit:hover {
        opacity: 0.85;
    }

    .MainPagePortfolio__projects {
        grid-area: projects;
        position: relative;
    }

    .AppProjectsList {
        display: grid;
        grid-gap: 24px;
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 40px;
    }

    @media screen and (min-width: 1100px) {
        .AppProjectsList {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 40px;
        }
    }

    .AppProjectsPreviewCard {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 24px;
        justify-content: space-between;
        background-color: var(--color-ui-component-background);
        padding: 16px 16px 32px 16px;
        border-radius: 36px;
        transition: box-shadow 0.3s linear;
        min-width: 300px;
        width: 100%;
        text-decoration: none;
    }

    .AppProjectsPreviewCard:hover {
        box-shadow: 0 10px 20px 0 var(--color-box-shadow-ui-component);
    }

    .AppProjectsPreviewCard:hover .AppProjectsPreviewCard__preview-content-active {
        opacity: 0;
    }

    @media screen and (min-width: 768px) {
        .AppProjectsPreviewCard {
            padding: 32px 32px 40px 32px;
        }
    }

    .AppProjectsPreviewCard__preview {
        aspect-ratio: 4 / 3;
        position: relative;
        overflow: hidden;
        min-width: 268px;
        width: 100%;
        border-radius: 32px;
    }

    .AppProjectsPreviewCard__preview-content {
        width: 100%;
        aspect-ratio: 4 / 3;
        position: relative;
        object-position: center;
        object-fit: cover;
        z-index: 1;
        transition: opacity 0.1s linear;
        border-radius: 32px;
    }

    .AppProjectsPreviewCard__preview-video {
        width: 100%;
        aspect-ratio: 4 / 3;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        object-fit: cover;
        border-radius: 32px;
    }

    .AppProjectsPreviewCard__preview__buttons {
        position: absolute;
        z-index: 1;
        bottom: 24px;
        right: 24px;
        display: flex;
        gap: 10px;
    }

    @media screen and (min-width: 1080px) {
        .AppProjectsPreviewCard__preview__buttons {
            transition: transform .4s ease-out, opacity .4s linear;
            transform: translateY(160%);
            opacity: .5;
        }

        .AppProjectsPreviewCard:hover .AppProjectsPreviewCard__preview__buttons {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .AppProjectsPreviewCard__preview__button {
        padding: 0 12px;
        min-width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 244px;
        background-color: #FFFFFFE5;
        fill: #1E1E1E;
        cursor: pointer;
        border: none;
        text-decoration: none;
        gap: 4px;
    }

    .AppProjectsPreviewCard__preview__button-text {
        font-size: 0.875rem;
        color: #1E1E1E;
        white-space: nowrap;
    }

    .AppProjectsPreviewCard__info__title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 30px;
        color: var(--color-text-primary);
    }

    @media screen and (min-width: 768px) {
        .AppProjectsPreviewCard__info__title {
            line-height: 36px;
        }
    }

    @media screen and (min-width: 428px) {
        .AppProjectsPreviewCard__info__title {
            font-size: 1.5rem;
        }
    }

    .AppProjectsPreviewCard__info {
        flex: 1;
    }

    @media screen and (min-width: 768px) {
        .AppProjectsPreviewCard__info {
            max-height: 72px;
        }
    }

    .empty-projects-message {
        text-align: center;
        padding: 60px 20px;
        grid-column: 1 / -1;
    }

    .empty-projects-message i {
        font-size: 48px;
        opacity: 0.3;
        display: block;
        margin-bottom: 16px;
    }

    .empty-projects-message p {
        margin-bottom: 16px;
        color: var(--color-text-tertiary);
    }

    .empty-projects-hint {
        font-size: 0.75rem;
        opacity: 0.6;
        margin-top: -8px;
        margin-bottom: 16px;
    }

    .empty-projects-message button {
        padding: 8px 20px;
        background: #d6861a;
        color: white;
        border: none;
        border-radius: 30px;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .empty-projects-message button:hover {
        opacity: 0.85;
    }

    .TagSlider__tags-wr {
        overflow: hidden;
        width: 100%;
    }

    .TagSlider__tags {
        user-select: none;
        width: max-content;
        display: flex;
        gap: 24px;
        animation: ticker-animate 14s linear infinite;
        animation-play-state: paused;
        padding-right: 24px;
    }

    .AppProjectsPreviewCard:hover .TagSlider__tags {
        animation-play-state: running;
    }

    .TagSlider__tag {
        min-width: max-content;
        white-space: nowrap;
        font-size: 0.875rem;
        line-height: 20px;
        font-weight: 400;
        opacity: .3;
        color: var(--color-text-primary);
    }

    @keyframes ticker-animate {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(-100%, 0, 0);
        }
    }

    .PaginationContainer {
        position: relative;
        min-height: 80px;
        margin-bottom: 48px;
    }

    .PaginationLoader {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-ui-component-background);
        border-radius: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .PaginationLoader__spinner {
        position: relative;
        width: 32px;
        height: 32px;
    }

    .PaginationLoader__spinner-circle {
        display: block;
        width: 24px;
        height: 24px;
        border: 2px solid var(--color-ui-element-line);
        border-top: 2px solid #d6861a;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    .AppProjectsListPagination {
        user-select: none;
        background-color: var(--color-ui-component-background);
        border-radius: 36px;
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeInUp 0.4s ease;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .PaginationComponent__pagination {
        display: flex;
        gap: 6px;
        position: relative;
        align-items: center;
    }

    .PaginationComponentButton-wr {
        position: relative;
    }

    .PaginationComponentButton {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-text-tertiary);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .PaginationComponentButton:hover {
        color: #d6861a;
        transform: scale(1.05);
    }

    .PaginationComponentButton-wr.active .PaginationComponentButton {
        color: #d6861a;
    }

    .PaginationComponent__dots {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-text-tertiary);
        font-size: 0.875rem;
        font-weight: 500;
    }

    .PaginationComponent__highlight-bar {
        position: absolute;
        bottom: 0;
        height: 2px;
        background-color: #d6861a;
        transition: transform 0.3s ease, width 0.3s ease;
        border-radius: 2px;
    }

    .PaginationComponent__arrows {
        display: flex;
        gap: 12px;
    }

    .PaginationComponent__button {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        cursor: pointer;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .PaginationComponent__button svg {
        fill: var(--color-text-primary);
        transition: fill 0.3s ease;
    }

    .PaginationComponent__button:hover:not(.PaginationComponent__button-disabled) {
        background: var(--color-ui-element-line);
    }

    .PaginationComponent__button:hover:not(.PaginationComponent__button-disabled) svg {
        fill: #d6861a;
    }

    .PaginationComponent__button-disabled {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: none;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }


    .filter--open #ButtonScrollToTopWidget {
        display: none;
    }

    .filter--open .AppProjectsListPagination {
        visibility: hidden;
    }

    .filter--open .BasicTemplateHeader,
    .filter--open .BasicTemplateFooter {
        pointer-events: none;
        opacity: 0.2;
    }

    .filter--open .AppProjectsList {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 16px;
    }

    .filter--open .AppProjectsList {
        pointer-events: none !important;
    }

    /* ============================================
       МОБИЛЬНАЯ ПАНЕЛЬ ФИЛЬТРОВ (выезжает слева)
    ============================================ */

    /* Оверлей */
    .mobile-filter-panel-enter-active,
    .mobile-filter-panel-leave-active {
        transition: opacity 0.3s ease;
    }

    .mobile-filter-panel-enter-from,
    .mobile-filter-panel-leave-to {
        opacity: 0;
    }

    .MobileFilterPanel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 9999;
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        cursor: pointer;
    }

    .MobileFilterPanel__content {
        position: relative;
        width: 85%;
        max-width: 380px;
        height: 100%;
        background: var(--color-bg-main, #f9f9fc);
        display: flex;
        flex-direction: column;
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.2);
        cursor: default;
    }

    .mobile-filter-panel-enter-from .MobileFilterPanel__content,
    .mobile-filter-panel-leave-to .MobileFilterPanel__content {
        transform: translateX(-100%);
    }

    .MobileFilterPanel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom: 1px solid var(--color-ui-element-line, #d6d6d6);
        flex-shrink: 0;
        background: var(--color-ui-component-background, #f4f4f8);
    }

    .MobileFilterPanel__title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--color-text-primary, #1e1e1e);
        margin: 0;
    }

    .MobileFilterPanel__close {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        font-size: 1.5rem;
        color: var(--color-text-tertiary, #7b7b7b);
        cursor: pointer;
        border-radius: 50%;
        transition: all 0.2s ease;
        padding: 0;
    }

    .MobileFilterPanel__close:hover {
        background: rgba(0, 0, 0, 0.05);
        color: var(--color-text-primary, #1e1e1e);
    }

    .MobileFilterPanel__body {
        flex: 1;
        overflow-y: auto;
        padding: 16px 24px;
        background: var(--color-bg-main, #f9f9fc);
    }

    .MobileFilterPanel__body::-webkit-scrollbar {
        width: 4px;
    }

    .MobileFilterPanel__body::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.03);
        border-radius: 4px;
    }

    .MobileFilterPanel__body::-webkit-scrollbar-thumb {
        background: #d6861a;
        border-radius: 4px;
    }

    .MobileFilterPanel__group {
        margin-bottom: 24px;
    }

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

    .MobileFilterPanel__group-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-text-primary, #1e1e1e);
        margin-bottom: 12px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--color-ui-element-line, #d6d6d6);
    }

    .MobileFilterPanel__group-items {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .MobileFilterPanel__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 8px;
        transition: background 0.2s ease;
        background: var(--color-ui-component-background, #f4f4f8);
    }

    .MobileFilterPanel__item:hover {
        background: rgba(214, 134, 26, 0.08);
    }

    .MobileFilterPanel__item-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
    }

    .MobileFilterPanel__item-icon {
        width: 28px;
        height: 28px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.5;
        flex-shrink: 0;
        transition: opacity 0.2s ease;
    }

    .MobileFilterPanel__item:hover .MobileFilterPanel__item-icon {
        opacity: 1;
    }

    .MobileFilterPanel__item-text {
        font-size: 0.85rem;
        color: var(--color-text-primary, #1e1e1e);
    }

    .MobileFilterPanel__item-count {
        font-size: 0.7rem;
        color: var(--color-text-tertiary, #7b7b7b);
        background: rgba(0, 0, 0, 0.05);
        padding: 1px 8px;
        border-radius: 10px;
        min-width: 22px;
        text-align: center;
        margin-right: 8px;
        flex-shrink: 0;
    }

    /* Кастомный чекбокс для мобильной панели */
    .MobileFilterPanel__item-input {
        appearance: none;
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #d6861a;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        background-color: transparent;
        transition: all 0.2s ease;
        margin: 0;
        flex-shrink: 0;
    }

    .MobileFilterPanel__item-input:checked {
        background-color: #d6861a;
        border-color: #d6861a;
    }

    .MobileFilterPanel__item-input:checked::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 5px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 6"><path d="M7.76497 0.205009C7.90947 0.341618 7.99381 0.530023 7.99943 0.728798C8.00506 0.927573 7.93151 1.12045 7.79497 1.26501L3.54497 5.76501C3.47609 5.83781 3.39331 5.89607 3.30154 5.93634C3.20976 5.97661 3.11085 5.99808 3.01064 5.99948C2.91042 6.00088 2.81095 5.98218 2.71808 5.94448C2.62522 5.90679 2.54085 5.85086 2.46997 5.78001L0.219969 3.53001C0.0874886 3.38783 0.0153654 3.19979 0.0187936 3.00549C0.0222218 2.81119 0.100934 2.6258 0.238347 2.48839C0.37576 2.35097 0.561145 2.27226 0.755446 2.26883C0.949747 2.26541 1.13779 2.33753 1.27997 2.47001L2.98497 4.17401L6.70497 0.235009C6.84158 0.0905061 7.02998 0.00617039 7.22876 0.000544684C7.42753 -0.00508102 7.62041 0.0684638 7.76497 0.205009Z" fill="white"/></svg>') no-repeat center;
        background-size: contain;
    }

    .MobileFilterPanel__item-input:hover {
        transform: scale(1.1);
    }

    .MobileFilterPanel__footer {
        display: flex;
        gap: 12px;
        padding: 16px 24px;
        border-top: 1px solid var(--color-ui-element-line, #d6d6d6);
        flex-shrink: 0;
        background: var(--color-ui-component-background, #f4f4f8);
    }

    .MobileFilterPanel__btn-reset {
        flex: 1;
        padding: 12px 16px;
        border: 1px solid var(--color-ui-element-line, #d6d6d6);
        border-radius: 30px;
        background: transparent;
        color: var(--color-text-tertiary, #7b7b7b);
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .MobileFilterPanel__btn-reset:hover {
        border-color: #d6861a;
        color: #d6861a;
    }

    .MobileFilterPanel__btn-apply {
        flex: 2;
        padding: 12px 16px;
        border: none;
        border-radius: 30px;
        background: #d6861a;
        color: white;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .MobileFilterPanel__btn-apply:hover {
        opacity: 0.85;
    }

    /* Скрываем десктопный фильтр на мобильных */
    @media screen and (max-width: 620px) {
        .AppProjectPreviewFilter.MainPagePortfolio__filter-wr {
            display: none !important;
        }

        .filter--open .AppProjectsList {
            grid-template-columns: 1fr 1fr;
            grid-gap: 12px;
        }
    }

    @media screen and (max-width: 480px) {
        .filter--open .AppProjectsList {
            grid-template-columns: 1fr;
        }
    }

    /* Темная тема для мобильной панели */
    [data-theme="dark"] .MobileFilterPanel__content {
        background: #1e1e1e;
    }

    [data-theme="dark"] .MobileFilterPanel__header {
        background: #292929;
        border-color: #404040;
    }

    [data-theme="dark"] .MobileFilterPanel__body {
        background: #1e1e1e;
    }

    [data-theme="dark"] .MobileFilterPanel__group-title {
        border-color: #404040;
        color: #fff;
    }

    [data-theme="dark"] .MobileFilterPanel__item {
        background: #292929;
    }

    [data-theme="dark"] .MobileFilterPanel__item:hover {
        background: rgba(214, 134, 26, 0.15);
    }

    [data-theme="dark"] .MobileFilterPanel__item-text {
        color: #fff;
    }

    [data-theme="dark"] .MobileFilterPanel__footer {
        background: #292929;
        border-color: #404040;
    }

    [data-theme="dark"] .MobileFilterPanel__btn-reset {
        color: #a0a0a0;
        border-color: #404040;
    }

    [data-theme="dark"] .MobileFilterPanel__title {
        color: #fff;
    }

    [data-theme="dark"] .MobileFilterPanel__close {
        color: #a0a0a0;
    }

    [data-theme="dark"] .MobileFilterPanel__close:hover {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
    }
/* ===== SERVICES BLOCK ===== */
    .MainPageServicesBlock {
        scroll-margin-top: 100px;
        display: flex;
        gap: 66px;
        margin-top: 120px;
        align-items: flex-start;
        position: relative;
    }

    @media screen and (max-width: 1024px) {
        .MainPageServicesBlock {
            flex-direction: column;
            gap: 40px;
        }
    }

    .ServicesBlockPreviewImage {
        position: sticky;
        top: 0;
        width: 50%;
        max-width: 670px;
        align-self: flex-start;
        transition: top 0.3s ease-out;
    }

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

    .ServicesBlockPreviewImage__wr {
        width: 100%;
        min-height: 496px;
    }

    .ServicesBlockPreviewImage__parallax {
        height: 496px;
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.5s ease-out;
        will-change: transform, opacity;
        transform-style: preserve-3d;
        transform-origin: center center;
        width: 100%;
        position: relative;
    }

    .ServicesBlockPreviewImage__image {
        margin: auto;
        width: 60%;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        border-radius: 36px;
        transition: transform 0.3s ease-out;
        will-change: transform;
        transform-style: preserve-3d;
    }

    @media screen and (max-width: 768px) {
        .ServicesBlockPreviewImage__wr {
            min-height: 350px;
        }

        .ServicesBlockPreviewImage__parallax {
            height: 350px;
        }

        .ServicesBlockPreviewImage__image {
            width: 80%;
        }
    }

    /* Анимация появления */
    .expand-from-center-enter-active,
    .expand-from-center-leave-active {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .MainPageServicesBlock__right {
        width: 100%;
    }

    @media screen and (min-width: 1024px) {
        .MainPageServicesBlock__right {
            max-width: 662px;
        }
    }

    @media screen and (min-width: 1240px) {
        .MainPageServicesBlock__right {
            width: 50%;
        }
    }

    .MainPageServicesBlock__list {
        display: flex;
        flex-direction: column;
    }

    .MainPageServicesBlockListItem {
        position: relative;
        padding: 0 0 0 48px;
        border-top: 1px solid var(--color-ui-element-line);
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease-out;
    }

    .MainPageServicesBlockListItem:last-child {
        border-bottom: 1px solid var(--color-ui-element-line);
    }

    @media screen and (max-width: 419px) {
        .MainPageServicesBlockListItem {
            padding: 0;
        }
    }

    .active .MainPageServicesBlockListItem__button {
        opacity: 1;
    }

    .MainPageServicesBlockListItem__button {
        height: fit-content;
        transition: opacity 0.5s ease;
        padding: 24px 0;
        text-align: left;
        color: var(--color-text-primary);
        font-weight: 500;
        opacity: .4;
        font-size: clamp(1.75rem, 0.241rem + 5.747vw, 3rem);
        line-height: 140%;
        list-style: none;
        cursor: pointer;
        width: 100%;
        background: none;
        border: none;
    }

    .MainPageServicesBlockListItem__button:hover {
        opacity: 1;
    }

    .MainPageServicesBlockListItem__button::-webkit-details-marker {
        display: none;
    }

    @media screen and (min-width: 768px) {
        .MainPageServicesBlockListItem__button {
            white-space: nowrap;
        }
    }

    @media screen and (min-width: 1240px) {
        .MainPageServicesBlockListItem__button {
            padding: 16px 0;
            font-size: 2.5rem;
        }
    }

    @media screen and (min-width: 1380px) {
        .MainPageServicesBlockListItem__button {
            font-size: 2.7rem;
        }
    }

    .MainPageServicesBlockListItem__button-numbering {
        position: absolute;
        top: 32px;
        left: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 24px;
    }

    @media screen and (max-width: 419px) {
        .MainPageServicesBlockListItem__button-numbering {
            display: none;
        }
    }

    @media screen and (min-width: 1240px) {
        .MainPageServicesBlockListItem__button-numbering {
            top: 16px;
        }
    }

    .MainPageServicesBlockListItem__content {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease-out;
    }

    .MainPageServicesBlockListItem.active .MainPageServicesBlockListItem__content {
        grid-template-rows: 1fr;
    }

    .MainPageServicesBlockListItem__list {
        overflow: hidden;
        padding: 0;
        margin: 0;
        list-style-type: none;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
        will-change: opacity, transform;
    }

    .MainPageServicesBlockListItem.active .MainPageServicesBlockListItem__list {
        opacity: 1;
        transform: translateY(0);
    }

    @media screen and (max-width: 419px) {
        .MainPageServicesBlockListItem__list {
            padding-left: 16px;
        }
    }

    .MainPageServicesBlockListItem__list-item {
        margin-bottom: 12px;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    }

    .MainPageServicesBlockListItem.active .MainPageServicesBlockListItem__list-item {
        opacity: 1;
        transform: translateY(0);
    }

    .MainPageServicesBlockListItem.active .MainPageServicesBlockListItem__list-item:nth-child(1) {
        transition-delay: 0.04s;
    }

    .MainPageServicesBlockListItem.active .MainPageServicesBlockListItem__list-item:nth-child(2) {
        transition-delay: 0.08s;
    }

    .MainPageServicesBlockListItem.active .MainPageServicesBlockListItem__list-item:nth-child(3) {
        transition-delay: 0.12s;
    }

    .MainPageServicesBlockListItem.active .MainPageServicesBlockListItem__list-item:nth-child(4) {
        transition-delay: 0.16s;
    }

    .MainPageServicesBlockListItem__list-item:last-of-type {
        padding-bottom: 24px;
        margin-bottom: 0;
    }

    .MainPageServicesBlockListItem__list-item-inner {
        transition: color 0.3s ease;
        font-size: 16px;
        line-height: 24px;
        color: var(--color-text-primary);
        text-align: left;
        background: none;
        border: none;
        cursor: pointer;
    }

    .MainPageServicesBlockListItem__list-item-inner:hover {
        color: var(--color-accent);
    }
#ReviewsWidget {
        max-width: 100vw;
        overflow: hidden;
    }
    .rw [v-cloak] {
        display: none !important;
    }

    /* Основной контейнер */
    .rw {
        overflow-x: visible;
        width: 100%;
        margin-top: 120px;
    }

    .rw__in {
        width: calc(100vw - 20px);
        margin: 0 auto;
        overflow-x: visible;
        position: relative;
    }

    @media screen and (min-width: 768px) {
        .rw__in {
            width: calc(100vw - 40px);
        }
    }

    @media screen and (min-width: 1280px) {
        .rw__in {
            width: calc(100vw - 80px);
            max-width: 1380px;
        }
    }

    /* Сетка */
    .rw__wr {
        display: grid;
        grid-row-gap: 32px;
        grid-template-areas: 'ttl' 'btn' 'card' 'list';
        overflow-x: visible;
        position: relative;
        isolation: isolate;
    }

    @media screen and (min-width: 1240px) {
        .rw__wr {
            display: grid;
            grid-template-columns: 340px minmax(0, 1fr);
            grid-template-areas: 'ttl btn' 'card list';
            gap: 32px;
            align-items: start;
            isolation: isolate;
        }

        .rw__ttl {
            grid-area: ttl;
            margin-bottom: 0;
        }

        .rw__tgl-btn {
            grid-area: btn;
            justify-self: flex-end;
        }
    }

    /* Заголовок */
    .rw__h {
        width: fit-content;
        font-size: clamp(16px, 4vw + 1rem, var(--font-size-heading, 3rem));
        font-weight: 500;
        color: var(--color-text-primary, #1e1e1e);
        line-height: 110%;
    }

    .rw__ttl {
        grid-area: ttl;
        max-width: 91%;
    }

    @media screen and (min-width: 500px) {
        .rw__ttl {
            max-width: 430px;
        }
    }

    .rw__tgl-btn {
        width: 100%;
        grid-area: btn;
        align-self: flex-end;
    }

    @media screen and (min-width: 1240px) {
        .rw__tgl-btn {
            justify-self: flex-end;
        }
    }

    /* Toggle кнопки */
    .rw__tgl {
        position: relative;
        background-color: var(--color-ui-component-background, #f4f4f8);
        border-radius: 333px;
        width: 100%;
        max-width: 768px;
        display: flex;
        gap: 24px;
    }

    @media screen and (min-width: 1240px) {
        .rw__tgl {
            width: fit-content;
        }
    }

    .rw__tgl-anim {
        transition: transform 0.4s ease;
        position: absolute;
        width: calc(50% - 6px);
        height: calc(100% - 8px);
        border-radius: inherit;
        top: 4px;
        left: 4px;
    }

    .rw__tgl-anim-act {
        z-index: 2;
        background-color: var(--color-ui-component-layer-first, #fff);
        transform: translateX(var(--transform-value-active, 0));
    }

    .rw__tgl-anim-l {
        transform: translateX(var(--transform-value-hover, calc(100% + 4px)));
    }

    .rw__tgl-anim-r {
        transform: translateX(var(--transform-value-hover, 0));
    }

    .rw__tgl-btnn {
        z-index: 3;
        position: relative;
        width: 100%;
        padding: 16px 6px;
        border-radius: inherit;
        font-size: 0.875rem;
        line-height: 20px;
        color: var(--color-text-primary, #1e1e1e);
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    @media screen and (min-width: 1240px) {
        .rw__tgl-btnn {
            width: 320px;
            padding: 20px 0;
        }
    }

    @media screen and (min-width: 425px) {
        .rw__tgl-btnn {
            font-size: 1rem;
            line-height: 24px;
        }
    }

    .rw__tgl-btnn.active {
        color: var(--color-accent, #d6861a);
    }

    /* Карточка рейтинга */
    .rw__card {
        grid-area: card;
        background-color: var(--color-ui-component-additional-background, #fff);
        border-radius: 36px;
        padding: 38px 24px;
        width: 100%;
        z-index: 10;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: 380px;
        height: 100%;
        padding-top: 117px;
        z-index: 9999;
        position: relative;
    }

    @media screen and (min-width: 1240px) {
        .rw__card {
            width: 340px;
            height: fit-content;
        }
    }

    .rw__card-rt {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
    }

    .rw__card-rt-val {
        font-size: 7rem;
        font-weight: 700;
        color: var(--color-text-primary, #1e1e1e);
        line-height: 1;
    }

    .rw__card-rt-stars {
        display: flex;
        gap: 4px;
    }

    .rw__card-rt-stars svg {
        width: 32px;
        height: 32px;
    }

    .rw__card-cnt {
        margin-bottom: 24px;
    }

    .rw__card-cnt-num {
        display: block;
        font-size: 2rem;
        font-weight: 600;
        color: #e6e6e6;
        line-height: 1.2;
    }

    .rw__card-cnt-txt {
        font-size: 1rem;
        line-height: 1.4;
        color: var(--color-text-tertiary, #7b7b7b);
    }

    /* Слайдер */
    .rw__list {
        grid-area: list;
        position: relative;
        min-width: 0;
        height: 100%;
        overflow: visible;
        z-index: 1;
    }

    @media screen and (min-width: 1240px) {
        .rw__sld {
            position: relative;
            width: calc(100vw - 340px - 32px - 40px);
            left: 0;
            overflow: visible;
            height: 100%;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1239px) {
        .rw__sld {
            position: relative;
            width: calc(100vw - 40px);
            left: 0;
            overflow: visible;
            height: 100%;
        }
    }

    @media screen and (max-width: 767px) {
        .rw__sld {
            position: relative;
            width: calc(100vw - 20px);
            left: 0;
            overflow: visible;
            height: 100%;
        }
    }

    /* Swiper */
    .rw__sld .swiper {
        margin: 0;
        overflow: visible;
        padding-bottom: 40px;
        width: 100%;
        height: 100%;
    }

    .rw__sld .swiper-wrapper {
        display: flex;
        align-items: stretch;
    }

    .rw__sld .swiper-slide {
        height: auto;
        width: auto;
        display: flex;
    }

    /* Карточка отзыва */
    .rw__crd {
        overflow: hidden;
        border-radius: 36px;
        background-color: var(--color-ui-component-background, #f4f4f8);
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 12px 12px 32px;
        height: 100%;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    @media screen and (min-width: 1024px) {
        .rw__crd {
            min-width: 340px;
            max-width: 380px;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .rw__crd {
            min-width: 300px;
            max-width: 340px;
        }
    }

    @media screen and (max-width: 767px) {
        .rw__crd {
            min-width: 280px;
            max-width: 320px;
        }
    }

    .rw__crd:hover .rw__crd-prev::before {
        opacity: 0.7;
    }

    .rw__crd:hover .rw__crd-prev-img {
        transform: scale(1.1);
    }

    .rw__crd:hover .rw__crd-logo {
        filter: grayscale(0);
    }

    .rw__crd-prev {
        position: relative;
        width: 100%;
        aspect-ratio: 368 / 260;
        border-radius: 28px;
        overflow: hidden;
    }

    .rw__crd-prev::before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #1E1E1E;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .rw__crd-prev-img {
        z-index: 0;
        transition: transform 0.3s ease-in-out;
        transform: scale(1);
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .rw__crd-play, .rw__crd-read {
        position: absolute;
        z-index: 2;
        top: calc(50% - 18px);
        left: calc(50% - 70px);
        width: 140px;
        height: 36px;
        color: #FFFFFF;
        white-space: nowrap;
        font-size: 1rem;
        line-height: 20px;
        font-weight: 400;
        background: none;
        border: none;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 30px;
    }

    .rw__crd-play i {
        font-size: 32px;
    }


    .rw__crd:hover .rw__crd-play, .rw__crd:hover .rw__crd-read {
        opacity: 1;
    }

    .rw__crd-play svg, .rw__crd-read svg {
        flex-shrink: 0;
    }

    .rw__crd-bot {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        gap: 16px;
    }

    .rw__crd-txt {
        padding-left: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .rw__crd-ttl {
        font-size: 1.5rem;
        line-height: 130%;
        font-weight: 400;
        color: var(--color-text-primary, #1e1e1e);
        min-height: 62px;
        display: block;
    }

    .rw__crd-desc {
        font-size: 0.875rem;
        line-height: 140%;
        opacity: 0.4;
        color: var(--color-text-primary, #1e1e1e);
        min-height: 20px;
        display: block;
    }

    .rw__crd-bot-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Кнопки */
    .rw__btn, .rw__crd-btn {
        --font-size: 14px;
        --time: .35s;
        --line-height: 14px;
        padding: 10px 20px;
        line-height: var(--line-height);
        display: inline-flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
        border-radius: 58px;
        background: var(--color-ui-element-background, #1e1e1e);
        color: var(--color-ui-element-layer-first, #fff);
        transition: transform var(--time) linear, box-shadow var(--time) linear;
        cursor: pointer;
        border: none;
        text-decoration: none;
        font-weight: 500;
        white-space: nowrap;
        min-height: 44px;
    }

    .rw__btn div, .rw__crd-btn .rw__crd-btn-anim {
        display: flex;
        overflow: hidden;
        text-shadow: 0 13px 0 var(--color-ui-element-layer-first, #fff);
        height: 14px;
        gap: 0;
    }

    .rw__btn div span, .rw__crd-btn .rw__crd-btn-anim span {
        display: block;
        font-size: 13px;
        transition: transform var(--time) ease-out;
        transform: translateY(var(--m)) translateZ(0);
    }

    .rw__btn:hover div span, .rw__crd-btn:hover .rw__crd-btn-anim span {
        --m: calc(var(--line-height) * -1);
    }

    .rw__crd-btn {
        min-width: 150px;
    }

    .rw__crd-btn-dis {
        user-select: none;
        cursor: not-allowed;
        min-width: 150px;
        padding: 10px 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background-color: var(--color-ui-element-background, #1e1e1e);
        border-radius: 58px;
        opacity: 0.4;
        justify-content: center;
        min-height: 44px;
    }

    .rw__crd-btn-dis-txt {
        color: #FFFFFF;
        font-size: 13px;
        font-weight: 500;
    }

    .rw__crd-logo-wr {
        width: 90px;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .rw__crd-logo {
        transition: filter 0.3s linear;
        filter: grayscale(1);
        max-width: 90px;
        max-height: 56px;
        object-fit: contain;
    }

    .rw__card .rw__btn {
        width: 100%;
        margin-top: auto;
    }

    /* Tailwind утилиты */
    .rw-f {
        display: flex;
    }

    .rw-fc {
        justify-content: center;
    }

    .rw-py12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .rw-w12 {
        width: 3rem;
    }

    .rw-h12 {
        height: 3rem;
    }

    .rw-b4 {
        border-width: 4px;
    }

    .rw-b-amber {
        border-color: #d97706;
    }

    .rw-bt-trans {
        border-top-color: transparent;
    }

    .rw-round {
        border-radius: 9999px;
    }

    .rw-ml3 {
        margin-left: 0.75rem;
    }

    .rw-t-gray {
        color: #6b7280;
    }

    /* Анимации */
    @keyframes rw-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .rw-spin {
        animation: rw-spin 1s linear infinite;
    }

    /* Модальное окно */
    .rw__mdl {
        background-color: rgba(0, 0, 0, 0.9);
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 1000;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rw__mdl-wr {
        width: 90%;
        height: 90%;
        position: relative;
    }

    .rw__mdl-cls {
        position: absolute;
        top: -50px;
        right: 0;
        display: flex;
        gap: 8px;
        align-items: center;
        color: #FFFFFF;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10;
    }

    .rw__mdl-cls svg {
        stroke: #FFFFFF;
        transition: transform 0.2s linear;
    }

    .rw__mdl-cls:hover svg {
        transform: rotateZ(90deg);
    }

    .rw__mdl-cls:hover .rw__mdl-cls-txt {
        transform: translateX(8px);
        opacity: 1;
    }

    .rw__mdl-cls-txt {
        transition: transform 0.2s linear, opacity 0.2s linear;
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 500;
        opacity: 0.2;
    }

    .rw__mdl-vid {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .rw__mdl-img {
        display: block;
        max-width: 90%;
        max-height: 90%;
        margin: 0 auto;
    }

    .rw__mdl-enter-active, .rw__mdl-leave-active {
        transition: opacity 0.3s ease;
    }

    .rw__mdl-enter-from, .rw__mdl-leave-to {
        opacity: 0;
    }

    .rw__wr:after {
        content: '';
        width: 100vw;
        height: 467px;
        position: absolute;
        background: #f9f9fc;
        left: -98vw;
        top: 95px;
        z-index: 999;
    }
/* ===== ANNOTATION BLOCK ===== */
    .MainPageAnnotationBlock {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: visible;
        margin-top: 120px;
    }

    @media screen and (min-width: 1240px) {
        .MainPageAnnotationBlock {
            gap: 73px;
        }
    }

    /* Анимация для заголовка и годов */
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .animate-on-scroll.animated {
        opacity: 1;
        transform: translateY(0);
    }

    /* Индивидуальные задержки для разных элементов */
    .MainPageAnnotationBlock__title.animate-on-scroll.animated {
        transition-delay: 0s;
    }

    .MainPageAnnotationBlock__decor-left.animate-on-scroll.animated {
        transition-delay: 0.2s;
    }

    .MainPageAnnotationBlock__decor-right.animate-on-scroll.animated {
        transition-delay: 0.4s;
    }

    .MainPageAnnotationBlock__title {
        max-width: 82%;
        z-index: 2;
        font-size: clamp(16px, 4vw + 1rem, var(--font-size-heading));
        font-weight: 500;
        color: var(--color-text-primary);
        line-height: 110%;
    }

    @media screen and (min-width: 768px) {
        .MainPageAnnotationBlock__title {
            max-width: 580px;
        }
    }

    .MainPageAnnotationBlock__slider {
        z-index: 2;
        width: 100%;
        overflow: hidden;
        margin-top: 60px;
    }

    .MainPageAnnotationBlock__slider .historySwiper {
        width: 100%;
        overflow: visible;
    }

    @media screen and (min-width: 768px) {
        .MainPageAnnotationBlock__slider .historySwiper {
            width: 70%;
            margin-left: auto;
            margin-right: 0;
        }
    }

    .MainPageAnnotationBlock__slider .swiper-slide {
        height: auto;
    }

    /* Линия */
    .Icon-line-decor {
        position: relative;
        z-index: 1;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 2s ease-out;
    }

    .Icon-line-decor.animation {
        clip-path: inset(0 0 0 0);
    }

    .Icon-line-decor.desktop {
        display: none;
        transform: rotateX(180deg);
    }

    @media (min-width: 600px) {
        .Icon-line-decor.desktop {
            margin: -58px auto -44px;
            display: block;
            width: 48vw;
            height: 200px;
        }
    }

    @media (min-width: 1240px) {
        .Icon-line-decor.desktop {
            position: absolute;
            transform: rotateX(0deg);
            height: 94%;
            width: 74%;
            top: 20%;
            left: 13%;
        }

        .Icon-line-decor.desktop path {
            stroke-dasharray: 10 10;
            stroke-width: 4;
        }
    }

    .Icon-line-decor.mobile {
        margin: 0 auto;
        width: 65%;
    }

    @media (min-width: 600px) {
        .Icon-line-decor.mobile {
            display: none;
        }
    }

    /* Декоративные элементы */
    .MainPageAnnotationBlock__decor {
        width: 145px;
        border-radius: 333px;
        padding: 12px 0;
        border: 1px solid var(--color-ui-element-line);
        z-index: 2;
    }

    @media screen and (min-width: 1240px) {
        .MainPageAnnotationBlock__decor {
            position: absolute;
        }
    }

    .MainPageAnnotationBlock__decor span {
        display: block;
        width: fit-content;
        margin: 0 auto;
        opacity: .3;
        color: var(--color-text-primary);
        font-size: clamp(20px, 1.5vw + 1rem, 1.75rem);
        font-weight: 500;
        line-height: 42px;
        transition: opacity 0.3s ease;
    }

    .MainPageAnnotationBlock__decor-left {
        margin-top: 32px;
        bottom: 0;
        left: 0;
    }

    @media screen and (min-width: 768px) {
        .MainPageAnnotationBlock__decor-left {
            margin-top: 100px;
        }
    }

    .MainPageAnnotationBlock__decor-right {
        margin: 0 0 32px auto;
        top: 0;
        right: 0;
    }

    @media screen and (min-width: 768px) {
        .MainPageAnnotationBlock__decor-right {
            margin-top: 40px;
        }
    }

    /* Карточки */
    .MainPageAnnotationBlockCard {
        width: 100%;
        height: 100%;
        min-height: 240px;
        padding: 32px 36px 40px 24px;
        background-color: var(--color-ui-component-background);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 32px;
        border-radius: 36px;
    }

    @media screen and (min-width: 768px) {
        .MainPageAnnotationBlockCard {
            padding: 34px;
        }
    }

    @media (max-width: 640px) {
        .MainPageAnnotationBlockCard {
            min-height: auto;
            gap: 16px;
            padding: 24px;
        }
    }

    .MainPageAnnotationBlockCard__title {
        font-size: 1.5rem;
        font-weight: 600;
        line-height: 36px;
    }

    @media (max-width: 640px) {
        .MainPageAnnotationBlockCard__title {
            font-size: 1.5rem;
        }
    }

    .MainPageAnnotationBlockCard__text {
        font-size: 1rem;
        font-weight: 400;
        line-height: 150%;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    @media (max-width: 640px) {
        .MainPageAnnotationBlockCard__text {
            font-size: 0.875rem;
        }
    }

    .MainPageAnnotationBlockCard-image-wr {
        display: flex;
        width: 60px;
        min-height: 60px;
        border-radius: 50%;
        background-color: var(--color-ui-component-layer-first);
    }

    @media screen and (max-width: 600px) {
        .MainPageAnnotationBlockCard-image-wr {
            margin-bottom: 16px;
        }
    }

    .MainPageAnnotationBlockCard-image-wr i {
        margin: auto;
        font-size: 34px;
        color: var(--color-ui-component-layer-second);
    }

    /* Swiper Pagination */
    .swiper-pagination {
        position: relative;
        margin-top: 32px;
        bottom: auto !important;
    }

    .swiper-pagination-bullet {
        background-color: var(--color-ui-element-line);
        opacity: 0.5;
        width: 8px;
        height: 8px;
    }

    .swiper-pagination-bullet-active {
        background-color: var(--color-accent);
        opacity: 1;
        width: 24px;
        border-radius: 4px;
    }

    .swiper-slide-prev .MainPageAnnotationBlockCard {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden;
    }
/* ===== CALLBACK QUIZ BLOCK ===== */
    .CallBackQuiz {
        --CallBackQuiz-height: auto;
        display: grid;
        min-height: 800px;
        gap: 70px;
        margin-top: 120px;
    }

    @media (width >= 600px) {
        .CallBackQuiz {
            --CallBackQuiz-height: auto;
        }
    }

    @media (max-height: 900px) {
        .CallBackQuiz {
            --CallBackQuiz-height: auto;
            gap: 0;
            min-height: 640px;
        }
    }

    .CallBackQuiz__title {
        width: fit-content;
        font-size: clamp(16px, 4vw + 1rem, var(--font-size-heading));
        font-weight: 500;
        color: var(--color-text-primary);
        line-height: 110%;
    }

    .CallBackQuiz__container {
        position: relative;
        display: grid;
        gap: 32px;
        min-height: auto;
        background-color: var(--color-ui-component-background);
        padding: 36px 16px;
        border-radius: 36px;
    }

    @media (min-width: 768px) {
        .CallBackQuiz__container {
            padding: 70px 40px;
        }
    }

    @media (min-width: 1200px) {
        .CallBackQuiz__container {
            padding: 70px;
        }
    }

    @media (max-height: 900px) {
        .CallBackQuiz__container {
            gap: 0;
            min-height: auto;
            padding: 40px;
        }
    }

    /* ===== BOTTOM NAVIGATION ===== */
    .CallBackQuiz__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    @media (min-width: 600px) {
        .CallBackQuiz__bottom {
            display: grid;
            grid-template-areas: "count count" "prev next";
            justify-content: normal;
            grid-auto-columns: min-content;
            grid-row-gap: 64px;
            grid-column-gap: 20px;
        }
    }

    @media (width >= 1100px) {
        .CallBackQuiz__bottom {
            display: flex;
            justify-content: space-between;
        }
    }

    .CallBackQuiz__bottom-ButtonPrev {
        grid-area: prev;
    }

    @media (min-width: 1100px) {
        .CallBackQuiz__bottom-ButtonPrev {
            width: 225px;
        }
    }

    .CallBackQuiz__bottom-count {
        grid-area: count;
        display: none;
        position: relative;
        gap: 16px;
    }

    @media (min-width: 600px) {
        .CallBackQuiz__bottom-count {
            display: flex;
        }
    }

    .CallBackQuiz__bottom-count-item {
        display: grid;
        justify-items: center;
        user-select: none;
        position: relative;
        grid-row-gap: 8px;
        color: var(--color-CallBackQuiz-text, #fff);
    }

    .CallBackQuiz__bottom-count-item.prev .CallBackQuiz__bottom-count-item-number {
        background-color: transparent;
        border: 1px solid #D6861A;
        color: var(--color-accent, #d6861a);
    }

    .CallBackQuiz__bottom-count-item.active .CallBackQuiz__bottom-count-item-number {
        border: 1px solid #D6861A;
        background-color: var(--color-accent, #d6861a);
    }

    .CallBackQuiz__bottom-count-item-decor {
        margin-top: 24.5px;
        width: 43px;
        height: 1px;
        background-color: var(--color-ui-element-checkbox, #e6e6e6);
    }

    .CallBackQuiz__bottom-count-item-number {
        border: 1px solid transparent;
        transition: all .75s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: var(--color-ui-element-background-opacity-10, rgba(30, 30, 30, 0.1));
        color: #FFFFFF;
        font-size: 1.25rem;
        line-height: 1.5;
        font-weight: 400;
    }

    .CallBackQuiz__bottom-count-item-text {
        color: var(--color-text-primary);
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 400;
    }

    /* ===== TASK TYPE COMPONENT ===== */
    .CallBackQuizTaskType {
        width: 100%;
    }

    .CallBackQuizTaskType_container {
        width: 100%;
        overflow-x: hidden;
        overflow-y: visible;
        max-height: none;
    }

    .CallBackQuizTaskType_list {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
    }

    @media (width >= 600px) {
        .CallBackQuizTaskType_list {
            gap: 16px;
        }
    }

    .CallBackQuizTaskTypeItem {
        cursor: pointer;
        border-radius: 58px;
        border: 1px solid var(--color-ui-element-line);
        padding: 14px 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all 0.3s ease;
        background: transparent;
        flex-shrink: 0;
    }

    .CallBackQuizTaskTypeItem.active {
        border-color: var(--color-accent, #d6861a);
        background: rgba(214, 134, 26, 0.05);
    }

    @media (max-width: 599px) {
        .CallBackQuizTaskTypeItem {
            width: calc(50% - 8px);
            justify-content: center;
        }
    }

    .CallBackQuizTaskTypeItem__input {
        cursor: pointer;
        appearance: none;
        background-color: var(--color-ui-element-checkbox);
        border: 2px solid var(--color-ui-element-checkbox);
        width: 18px;
        height: 18px;
        border-radius: 50%;
        position: relative;
        margin: 0;
        flex-shrink: 0;
    }

    .CallBackQuizTaskTypeItem__input:checked {
        background: var(--color-accent, #d6861a);
        border: 1px solid var(--color-accent, #d6861a);
    }

    .CallBackQuizTaskTypeItem__input:checked::after {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        content: "";
        display: block;
        width: 8px;
        height: 6px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 6" width="8" height="6"><path d="M7.76497 0.205009C7.90947 0.341618 7.99381 0.530023 7.99943 0.728798C8.00506 0.927573 7.93151 1.12045 7.79497 1.26501L3.54497 5.76501C3.47609 5.83781 3.39331 5.89607 3.30154 5.93634C3.20976 5.97661 3.11085 5.99808 3.01064 5.99948C2.91042 6.00088 2.81095 5.98218 2.71808 5.94448C2.62522 5.90679 2.54085 5.85086 2.46997 5.78001L0.219969 3.53001C0.0874886 3.38783 0.0153654 3.19979 0.0187936 3.00549C0.0222218 2.81119 0.100934 2.6258 0.238347 2.48839C0.37576 2.35097 0.561145 2.27226 0.755446 2.26883C0.949747 2.26541 1.13779 2.33753 1.27997 2.47001L2.98497 4.17401L6.70497 0.235009C6.84158 0.0905061 7.02998 0.00617039 7.22876 0.000544684C7.42753 -0.00508102 7.62041 0.0684638 7.76497 0.205009Z" fill="white"/></svg>') no-repeat center;
        background-size: contain;
    }

    @media (min-width: 768px) {
        .CallBackQuizTaskTypeItem__input {
            width: 22px;
            height: 22px;
        }

        .CallBackQuizTaskTypeItem__input:checked::after {
            width: 10px;
            height: 8px;
        }
    }

    .CallBackQuizTaskTypeItem__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .CallBackQuizTaskTypeItem__icon i {
        font-size: 1.25rem;
        color: var(--color-text-primary);
        opacity: 0.6;
        transition: opacity 0.3s ease;
    }

    .CallBackQuizTaskTypeItem.active .CallBackQuizTaskTypeItem__icon i {
        opacity: 1;
        color: var(--color-accent, #d6861a);
    }

    .CallBackQuizTaskTypeItem__text {
        line-height: 1.5;
        font-size: .875rem;
        color: var(--color-text-primary);
        white-space: nowrap;
    }

    @media (max-width: 599px) {
        .CallBackQuizTaskTypeItem__text {
            font-size: 0.8125rem;
            white-space: normal;
            text-align: center;
        }
    }

    @media (width >= 768px) {
        .CallBackQuizTaskTypeItem__text {
            font-size: 1rem;
        }
    }

    /* ===== FORM COMPONENT - ЦЕНТРИРОВАННЫЙ ===== */
    .CallBackQuizForm {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .CallBackQuizForm__header {
        text-align: center;
        margin-bottom: 48px;
        width: 100%;
    }

    .CallBackQuizForm__title {
        font-size: 2rem;
        font-weight: 500;
        color: var(--color-text-primary);
        margin-bottom: 24px;
    }

    .CallBackQuizForm__selected-tasks {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
    }

    .selected-tasks-label {
        font-size: 0.875rem;
        color: var(--color-text-tertiary);
        opacity: 0.7;
    }

    .selected-tasks-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .selected-task-tag {
        display: inline-block;
        padding: 6px 16px;
        background: rgba(214, 134, 26, 0.1);
        border: 1px solid rgba(214, 134, 26, 0.3);
        border-radius: 40px;
        font-size: 0.875rem;
        color: var(--color-accent, #d6861a);
        white-space: nowrap;
    }

    @media (max-width: 599px) {
        .selected-task-tag {
            font-size: 0.75rem;
            padding: 4px 12px;
            white-space: normal;
        }
    }

    .CallBackQuizForm__container {
        user-select: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    @media (max-height: 900px) {
        .CallBackQuizForm__container {
            gap: 24px;
        }
    }

    .CallBackQuizForm__field {
        width: 100%;
        padding-bottom: 8px;
    }

    .CallBackQuizForm__text-label {
        display: block;
        width: 100%;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--color-ui-element-line);
    }

    .CallBackQuizForm__text-input {
        width: 100%;
        color: var(--color-text-primary);
        font-size: 1rem;
        line-height: 1.5;
        background: transparent;
        border: none;
        outline: none;
        text-align: left;
    }

    .CallBackQuizForm__text-input::placeholder {
        color: var(--color-text-primary);
        opacity: .5;
        font-size: 1rem;
        line-height: 1.5;
        text-align: left;
    }

    @media (width >= 768px) {
        .CallBackQuizForm__text-input {
            font-size: 1.125rem;
        }

        .CallBackQuizForm__text-input::placeholder {
            font-size: 1.125rem;
        }
    }

    /* ===== ЧЕКБОКСЫ С ВЫРАВНИВАНИЕМ ===== */
    .CallBackQuizForm__checkbox-label {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        text-align: left;
        width: 100%;
    }

    .CallBackQuizForm__checkbox-input {
        appearance: none;
        width: 20px;
        height: 20px;
        min-width: 20px;
        border: 2px solid var(--color-accent, #d6861a);
        border-radius: 4px;
        cursor: pointer;
        flex-shrink: 0;
        background: transparent;
        position: relative;
        margin: 0;
    }

    .CallBackQuizForm__checkbox-input:checked {
        background: var(--color-accent, #d6861a);
        border-color: var(--color-accent, #d6861a);
    }

    .CallBackQuizForm__checkbox-input:checked::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 8px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='white' d='M10.293 0.293L4 6.586 1.707 4.293 0.293 5.707 4 9.414 11.707 1.707z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .CallBackQuizForm__checkbox-label-text-wr {
        font-size: 0.875rem;
        line-height: 1.5;
        font-weight: 400;
        display: inline-block;
    }

    @media (max-width: 599px) {
        .CallBackQuizForm__checkbox-label-text-wr {
            font-size: 0.75rem;
        }
    }

    .CallBackQuizForm__checkbox-label-text {
        color: var(--color-text-primary);
    }

    .CallBackQuizForm__checkbox-label-text-accent {
        color: var(--color-accent, #d6861a);
        text-decoration: none;
    }

    .CallBackQuizForm__checkbox-label-text-accent:hover {
        text-decoration: underline;
    }

    .CallBackQuiz__error,
    .CallBackQuizForm__error {
        color: #ef4444;
        font-size: 0.75rem;
        margin-top: 8px;
        text-align: left;
    }

    /* ===== BUTTON STYLES ===== */
    .ButtonNext,
    .ButtonPrev,
    .ButtonSubmit {
        --font-size: 14px;
        --time: .35s;
        --line-height: 18px;
        padding: 16px 24px;
        line-height: var(--line-height);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 56px;
        transition: transform var(--time) linear, box-shadow var(--time) linear;
        cursor: pointer;
        border: none;
        font-weight: 500;
    }

    .ButtonNext:disabled,
    .ButtonSubmit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    .ButtonNext {
        background-color: var(--color-ui-element-active-background, #1e1e1e);
        color: var(--color-ui-element-active-layer-first, #fff);
    }

    .ButtonNext div,
    .ButtonPrev div,
    .ButtonSubmit div {
        display: flex;
        overflow: hidden;
        height: 18px;
    }

    .ButtonNext div span,
    .ButtonPrev div span,
    .ButtonSubmit div span {
        display: block;
        backface-visibility: hidden;
        transition: transform var(--time) ease-out;
        transform: translateY(var(--m)) translateZ(0);
    }

    .ButtonNext:hover:not(:disabled) div span,
    .ButtonPrev:hover:not(:disabled) div span,
    .ButtonSubmit:hover:not(:disabled) div span {
        --m: calc(var(--line-height) * -1);
    }

    .ButtonPrev {
        background-color: var(--color-ui-element-faded-background, #e6e6e6);
        color: var(--color-ui-element-faded-layer-first, #1e1e1e);
    }

    .ButtonSubmit {
        background-color: var(--color-ui-element-active-background, #1e1e1e);
        color: var(--color-ui-element-active-layer-first, #fff);
    }

    .ButtonPrev-icon {
        fill: currentColor;
    }

    .ButtonNext-icon,
    .ButtonSubmit-icon {
        transform: rotate(180deg);
        fill: currentColor;
    }

    @media (min-width: 768px) {
        .ButtonNext,
        .ButtonPrev,
        .ButtonSubmit {
            min-width: 200px;
        }
    }

    @media (max-width: 599px) {
        .ButtonNext,
        .ButtonPrev,
        .ButtonSubmit {
            padding: 12px 20px;
        }

        .ButtonNext div span:not(:first-child):not(:nth-child(2)):not(:nth-child(3)),
        .ButtonSubmit div span:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
            display: none;
        }

        .CallBackQuiz__container {
            padding: 0;
        }
    }

    /* ===== TRANSITIONS ===== */
    .CallBackQuiz-in-enter-active,
    .CallBackQuiz-in-leave-active,
    .CallBackQuiz-out-enter-active,
    .CallBackQuiz-out-leave-active {
        transition: all 0.4s ease;
    }

    .CallBackQuiz-in-enter-from {
        opacity: 0;
        transform: translateX(30px);
    }

    .CallBackQuiz-in-leave-to {
        opacity: 0;
        transform: translateX(-30px);
    }

    .CallBackQuiz-out-enter-from {
        transform: translateX(-30px);
    }

    .CallBackQuiz-out-leave-to {
        opacity: 0;
        transform: translateX(30px);
    }
/* V-cloak для предотвращения FOUC */
    [v-cloak] {
        display: none !important;
    }

    /* ===== ОРИГИНАЛЬНЫЕ СТИЛИ (СОХРАНЕНЫ БЕЗ ИЗМЕНЕНИЙ) ===== */
    .BasicTemplateFooter__container {
        padding: 56px 0 0 0;
        display: flex;
        flex-direction: column;
        gap: 72px;
    }

    .BasicTemplateFooter__logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 236px;
        height: 40px;
        fill: var(--color-ui-element);
    }

    .BasicTemplateFooter__content {
        display: flex;
        flex-wrap: wrap;
        gap: 24px 12px;
        justify-content: space-between;
    }

    .BasicTemplateFooter__content-contacts {
        max-width: 447px;
    }

    .BasicTemplateFooter__content-contacts-email {
        margin: 0 0 24px 0;
    }

    .BasicTemplateFooter__content-contacts-email-link {
        font-weight: 400;
        font-size: 1rem;
        color: var(--color-text-primary);
        transition: color .2s ease;
        text-decoration: underline;
    }

    .BasicTemplateFooter__content-contacts-email-link:hover {
        color: var(--color-accent);
    }

    .BasicTemplateFooter__content-contacts-location {
        font-weight: 400;
        font-size: 1rem;
        color: var(--color-text-tertiary);
    }

    .BasicTemplateFooter__content-navigation {
        max-width: 330px;
    }

    .BasicTemplateFooter__content-navigation-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .BasicTemplateFooter__content-navigation-list-item-link {
        font-weight: 400;
        font-size: 1.25rem;
        color: var(--color-text-primary);
        transition: color .2s ease;
    }

    .BasicTemplateFooter__content-navigation-list-item-link:hover {
        color: var(--color-accent);
    }

    .BasicTemplateFooter__content-social {
        max-width: 168px;
    }

    .BasicTemplateFooter__content-social .AppSocialsWidget {
        gap: 24px;
    }

    .BasicTemplateFooter__content-social .AppSocialsWidget__icon {
        width: 40px;
        height: 40px;
    }

    .BasicTemplateFooter__content-social .AppSocialsWidget__icon svg {
        width: 20px;
        height: 20px;
    }

    .BasicTemplateFooter__info {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid var(--color-ui-element-secondary-line);
        padding: 40px 0;
    }

    .BasicTemplateFooter__info-link {
        font-weight: 400;
        font-size: .875rem;
        color: var(--color-text-tertiary);
        transition: color .2s ease;
    }

    .BasicTemplateFooter__info-link:hover {
        color: var(--color-accent);
    }

    /* ===== ДОБАВЛЕНА АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ (768px - 1024px) ===== */
    @media screen and (max-width: 1024px) {
        .BasicTemplateFooter__container {
            gap: 48px;
            padding: 40px 20px 0 20px;
        }

        .BasicTemplateFooter__content {
            gap: 32px;
        }

        .BasicTemplateFooter__content-contacts {
            max-width: 380px;
        }

        .BasicTemplateFooter__content-navigation-list {
            gap: 24px;
        }

        .BasicTemplateFooter__content-navigation-list-item-link {
            font-size: 1.125rem;
        }
    }

    /* ===== ДОБАВЛЕНА АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ (< 768px) ===== */
    @media screen and (max-width: 767px) {
        .BasicTemplateFooter__container {
            padding: 32px 16px 0 16px;
            gap: 32px;
        }

        .BasicTemplateFooter__logo {
            width: 180px;
            height: auto;
            margin: 0 auto;
        }

        .BasicTemplateFooter__logo svg {
            width: 100%;
            height: auto;
        }

        /* Вертикальное расположение блоков */
        .BasicTemplateFooter__content {
            flex-direction: column;
            gap: 32px;
        }

        /* Контакты - на всю ширину */
        .BasicTemplateFooter__content-contacts {
            max-width: 100%;
            text-align: center;
        }

        .BasicTemplateFooter__content-contacts-email {
            margin: 0 0 16px 0;
        }

        .BasicTemplateFooter__content-contacts-email-link {
            font-size: 1rem;
            display: inline-block;
            word-break: break-all;
        }

        .BasicTemplateFooter__content-contacts-location {
            font-size: 0.875rem;
            line-height: 1.5;
        }

        /* Навигация - на всю ширину */
        .BasicTemplateFooter__content-navigation {
            max-width: 100%;
            text-align: center;
        }

        .BasicTemplateFooter__content-navigation-list {
            gap: 16px;
        }

        .BasicTemplateFooter__content-navigation-list-item-link {
            font-size: 1rem;
            display: inline-block;
            padding: 8px 0;
        }

        /* Соцсети - на всю ширину, центрирование */
        .BasicTemplateFooter__content-social {
            max-width: 100%;
            display: flex;
            justify-content: center;
        }

        .BasicTemplateFooter__content-social .AppSocialsWidget {
            gap: 20px;
            justify-content: center;
        }

        .BasicTemplateFooter__content-social .AppSocialsWidget__icon {
            width: 44px;
            height: 44px;
        }

        .BasicTemplateFooter__content-social .AppSocialsWidget__icon svg {
            width: 22px;
            height: 22px;
        }

        /* Нижняя информация - вертикальное расположение */
        .BasicTemplateFooter__info {
            flex-direction: column;
            gap: 12px;
            text-align: center;
            padding: 24px 0 32px 0;
        }

        .BasicTemplateFooter__info-link {
            font-size: 0.75rem;
            display: inline-block;
        }
    }

    /* ===== ДОПОЛНИТЕЛЬНАЯ АДАПТАЦИЯ ДЛЯ ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНОВ (< 480px) ===== */
    @media screen and (max-width: 480px) {
        .BasicTemplateFooter__container {
            padding: 24px 12px 0 12px;
            gap: 24px;
        }

        .BasicTemplateFooter__logo {
            width: 150px;
        }

        .BasicTemplateFooter__content {
            gap: 24px;
        }

        .BasicTemplateFooter__content-contacts-email-link {
            font-size: 0.875rem;
        }

        .BasicTemplateFooter__content-contacts-location {
            font-size: 0.75rem;
        }

        .BasicTemplateFooter__content-navigation-list {
            gap: 12px;
        }

        .BasicTemplateFooter__content-navigation-list-item-link {
            font-size: 0.875rem;
            padding: 6px 0;
        }

        .BasicTemplateFooter__content-social .AppSocialsWidget {
            gap: 16px;
        }

        .BasicTemplateFooter__content-social .AppSocialsWidget__icon {
            width: 40px;
            height: 40px;
        }

        .BasicTemplateFooter__content-social .AppSocialsWidget__icon svg {
            width: 18px;
            height: 18px;
        }

        .BasicTemplateFooter__info {
            gap: 10px;
            padding: 20px 0 24px 0;
        }

        .BasicTemplateFooter__info-link {
            font-size: 0.688rem;
        }
    }

    /* ===== УЛУЧШЕНИЯ ДЛЯ ТАЧ-УСТРОЙСТВ ===== */
    @media (hover: none) and (pointer: coarse) {
        .BasicTemplateFooter__content-contacts-email-link,
        .BasicTemplateFooter__content-navigation-list-item-link,
        .BasicTemplateFooter__info-link {
            padding: 8px 0;
            display: inline-block;
        }

        .AppSocialsWidget__icon {
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .AppSocialsWidget__icon:active {
            transform: scale(0.95);
            transition: transform 0.1s ease;
        }
    }
/* ===== SCROLL TO TOP BUTTON ===== */
    .ButtonScrollToTop {
        position: fixed;
        bottom: 189px;
        right: 54px;
        z-index: 10;
        width: 72px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background-color: var(--color-button-scroll-to-top-bg, #333);
        cursor: pointer;
        transition: background-color .2s, transform .2s, opacity .3s, visibility .3s;
        opacity: 0;
        visibility: hidden;
    }

    .ButtonScrollToTop.visible {
        opacity: 1;
        visibility: visible;
    }

    .ButtonScrollToTop:hover {
        transform: translateY(-2px);
    }

    .ButtonScrollToTop:hover .ButtonScrollToTop__icon path {
        fill: var(--color-accent, #007bff);
    }

    .ButtonScrollToTop:active {
        transform: translateY(0);
    }

    .ButtonScrollToTop__icon path {
        fill: var(--color-button-scroll-to-top-icon, #fff);
        transition: fill .2s;
    }

    @media screen and (max-width: 768px) {
        .ButtonScrollToTop {
            right: 12px;
            width: 56px;
            height: 56px;
            bottom: 100px;
        }
    }

    /* Поддержка для пользователей с ограничениями по анимации */
    @media (prefers-reduced-motion: reduce) {
        .ButtonScrollToTop {
            transition: none;
        }

        .ButtonScrollToTop__icon path {
            transition: none;
        }
    }
/* Только анимация и адаптивность */
    .cookie-slide-enter-active,
    .cookie-slide-leave-active {
        transition: all 0.3s ease-out;
    }

    .cookie-slide-enter-from,
    .cookie-slide-leave-to {
        transform: translateX(-20px);
        opacity: 0;
    }

    .cookie-slide-enter-to,
    .cookie-slide-leave-from {
        transform: translateX(0);
        opacity: 1;
    }

    /* Адаптивность для мобильных устройств */
    @media screen and (max-width: 640px) {
        .fixed.bottom-5.left-5 {
            bottom: 10px !important;
            left: 10px !important;
            right: 10px !important;
            width: auto !important;
            max-width: none !important;
            padding: 10px 16px !important;
        }

        .fixed.bottom-5.left-5 > div {
            flex-direction: column !important;
            text-align: center !important;
            gap: 8px !important;
        }

        .fixed.bottom-5.left-5 button {
            width: 100% !important;
            justify-content: center !important;
            padding: 8px 16px !important;
        }

        .fixed.bottom-5.left-5 a {
            white-space: normal !important;
            display: inline-block !important;
        }

        .fixed.bottom-5.left-5 .text-slate-300 {
            font-size: 12px !important;
        }
    }
.btn {
        --font-size: 18px;
        --time: .35s;
        --line-height: 18px;
        padding: 19px 29px;
        line-height: var(--line-height);
        display: inline-flex;
        gap: 6px;
        align-items: center;
        justify-content: center;
        border-radius: 58px;
        background: var(--color-ui-element-background, #1e1e1e);
        color: var(--color-ui-element-layer-first, #fff);
        fill: var(--color-ui-element-layer-first, #fff);
        transition: transform var(--time) linear, box-shadow var(--time) linear;
        cursor: pointer;
        border: none;
        font-size: var(--font-size);
        font-weight: 500;
        text-decoration: none;
    }

    .btn div {
        display: flex;
        overflow: hidden;
        text-shadow: 0 17px 0 var(--color-ui-element-layer-first, #fff);
        height: 18px;
    }

    .btn div span {
        display: block;
        backface-visibility: hidden;
        transition: transform var(--time) ease-out;
        transform: translateY(var(--m)) translateZ(-0);
    }

    .btn:hover:not(.opacity-50) div span {
        --m: calc(var(--line-height) * -1.1);
    }

    .btn.opacity-50 {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Анимация кнопки закрытия с SVG бордером - без зазора */
    .close-btn {
        position: relative;
        border: none;
        background-color: #1e293b;
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        overflow: visible;
        cursor: pointer;
    }

    .close-btn svg:first-child {
        position: relative;
        z-index: 1;
        transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

    .close-btn .border-ring {
        position: absolute;
        top: -2px;
        left: -2px;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
    }

    .close-btn .border-ring svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    .close-btn .border-ring circle {
        fill: none;
        stroke: #f59e0b;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-dasharray: 133;
        stroke-dashoffset: 133;
        transition: stroke-dashoffset 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    }

    .close-btn:hover .border-ring circle {
        stroke-dashoffset: 0;
    }

    .close-btn:not(:hover) .border-ring circle {
        stroke-dashoffset: 133;
    }

    .close-btn:hover {
        transform: scale(1.08);
    }

    .close-btn:hover svg:first-child {
        transform: rotate(90deg);
    }

    .close-btn:active {
        transform: scale(0.96);
    }

    .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .duration-300 {
        transition-duration: 300ms;
    }

    .-translate-y-full {
        transform: translateY(-100%);
    }

    .translate-y-0 {
        transform: translateY(0);
    }

    @media (max-width: 640px) {
        div[style*="right: -48px"] {
            right: -12px !important;
        }
    }

    @keyframes bounce-subtle {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }

    @keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes ping {
        75%, 100% { transform: scale(1.3); opacity: 0; }
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .animate-bounce-subtle {
        animation: bounce-subtle 2s ease-in-out infinite;
    }

    .animate-spin-slow {
        animation: spin-slow 8s linear infinite;
    }

    .animate-ping {
        animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    .animate-spin {
        animation: spin 1s linear infinite;
    }