@charset "UTF-8";
/* ================================================================
   Верхний отступ шапки
   ================================================================ */
.tm-top {
    padding-top: 40px;
    padding-bottom: 20px;
}

body:has(main > .le-bg) .tm-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 1;
}

/* Модалка с Liquid Ether: карточка не перекрывает полотно */
.rf-form .uk-modal-dialog .uk-card-default {
    background: transparent;
}

/* ================================================================
   Плавный скролл lenis
   ================================================================ */
html.lenis,
html.lenis body {
    height: auto;
}

html.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

html.lenis.lenis-stopped {
    overflow: hidden;
}

.tm-chekboksy {
    flex-shrink: 0;
    align-self: flex-start;
}

/* ================================================================
   Типографика на мобилке
   ================================================================ */
@media (max-width: 960px) {
    h3,
    .uk-h3 {
        font-size: 20px;
    }
    p {
        font-size: 18px;
    }
}

/* Хедер прозрачный (стиль почему-то не работает в билдере) */
.tm-header-overlay {
    position: absolute;
    left: 0;
    right: 0;
}

/* ================================================================
   Кнопка
   ================================================================ */
.custom-btn {
    position: relative;
    padding: 20px 22px 20px 28px;
    line-height: 1;
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.custom-btn .custom-text {
    position: relative;
    z-index: 5;
    margin-right: 50px;
    color: #fff;
    transition: color 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.custom-btn svg {
    position: absolute;
    top: calc(50% - 12px);
    right: 15px;
    z-index: 2;
}

.custom-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 5px;
    z-index: 1;
    display: block;
    width: 46px;
    height: 46px;
    background-color: #f4f4f4;
    border-radius: 99px;
    transform: translateY(-50%);
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.custom-btn:hover {
    text-decoration: none;
}

.custom-btn:hover::before {
    right: 0;
    width: 100%;
    height: 100%;
}

.custom-btn:hover .custom-text {
    color: #070707;
}

/* Стрелка доворачивается на 45deg по ховеру кнопки.
   Вращаем path внутри svg, а не сам svg: элемент svg уходит в композитный слой,
   который Chromium привязывает к целым пикселям, и на дробном dpr центр вращения
   дёргался. Path рисуется в растре иконки и вращается по своему bbox. */
.custom-btn svg path {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: stroke 0.5s cubic-bezier(0.77, 0, 0.175, 1),
    transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
}

.custom-btn:hover svg path {
    stroke: #070707;
    transform: rotate(45deg);
}

/* ================================================================
   Аккордеон услуг
   ================================================================ */
@media (min-width: 960px) {
    /* Пока строка раскрывается, содержимое не должно вылезать за её край.
       Режем контент пункта, а не сам пункт: пункт содержит canvas Liquid Ether
       и разделители, и обрезка на нём заставляла их перерисовываться каждый кадр.
       Сверху расширено (цена и стрелка стоят выше контента), по бокам не режем. */
    .svc-acc .uk-accordion-content {
        clip-path: inset(-400px -100vw 0 -100vw);
    }

    /* На десктопе пункт раскрывается только по ховеру: заголовок не кликабелен,
       иначе двойной клик сворачивает и снова разворачивает пункт */
    .svc-acc .uk-accordion-title {
        pointer-events: none;
    }

    /* Контент раскрывается по ховеру */
    .svc-acc .uk-accordion-content {
        display: grid !important;
        padding: 0 !important;
        grid-template-rows: 0fr;
        transition: grid-template-rows 1s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .svc-acc .uk-accordion-content > .el-content {
        overflow: hidden;
        min-height: 0;
        margin-top: 0;
        transition: margin-top 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .svc-acc .el-item:hover .uk-accordion-content {
        grid-template-rows: 1fr;
    }

    .svc-acc .el-item:hover .uk-accordion-content > .el-content {
        margin-top: 16px;
    }

    /* Разделители гаснут у раскрытого пункта */
    .svc-acc .el-item {
        transition:
                border-top-color 0.35s cubic-bezier(0.33, 1, 0.68, 1),
                border-bottom-color 0.35s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .svc-acc .el-item:hover {
        border-top-color: transparent !important;
        border-bottom-color: transparent !important;
    }

    .svc-acc .el-item:hover + .el-item {
        border-top-color: transparent !important;
    }

    .svc-acc .uk-accordion:has(> .el-item:first-child:hover) {
        border-top-color: transparent;
    }

    /* Liquid Ether: свечение показывается из liquid-ether.js — он считает
       полосу активной строки и включает полотно, когда кадр отрисован. */
}

/* Полотно строк услуг шире контента на ширину скроллбара (100vw включает его) —
   режем горизонтальный выступ секции, вертикаль не трогаем */
.svc-acc {
    /* Полотно подсветки — ребёнок секции с z-index: -1, поэтому секция должна
       создавать свой контекст наложения, иначе полотно уйдёт под её фон. */
    position: relative;
    isolation: isolate;
    overflow-x: clip;
}

/* Линии в начале и в конце аккордиона */
.svc-acc .uk-accordion {
    border-top: 1px solid #cecdcd;
    transition: border-top-color 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.svc-acc .uk-accordion > .el-item:last-child {
    border-bottom: 1px solid #cecdcd;
}

/* Liquid Ether — подсветка строки аккордиона */
.svc-acc .el-item {
    position: relative;
    isolation: isolate;
}

/* Цифра [01] и заголовок: по базовой линии друг к другу и по центру строки —
   одинаково на десктопе и на мобилке. Высоту держим padding'ом, а не margin
   из UIkit (0 0 20px + * + .uk-heading 40px) — из-за них текст уезжал вниз. */
.svc-acc .uk-accordion-title {
    align-items: baseline;
    padding: 30px 0;
    /* строка тянется по самим спанам, а не по пустым текстовым узлам между ними
       (у .uk-accordion-title font-size 38px, и на мобилке, где спаны 18/24px,
       текст из-за них прижимался к низу строки) */
    font-size: 0;
    line-height: 0;
}

.svc-acc .uk-accordion-title > span {
    margin: 0;
}

/* Встроенная иконка аккордиона — пустая коробка (её svg скрыт темой), но она
   остаётся в потоке и на мобилке растягивает строку на 32px, из-за чего текст
   прижимается к низу. В секции своя стрелка — img.el-image. */
.svc-acc .uk-accordion-icon {
    display: none;
}

/* Liquid Ether — одно полотно на всю секцию услуг.
   Лежит в секции под строками (не в аккордионе: там дети — строки, и лишний
   элемент ломает UIkit-аккордион). Размер и позицию полотна liquid-ether.js
   подгоняет под активную строку и включает показ, когда кадр отрисован. */
.svc-acc .ether-hold {
    position: absolute;
    top: 0;
    left: 50%;
    height: 0;
    z-index: -1;
    width: 100vw;
    max-width: none;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 0.12s ease;
}

.svc-acc > .ether-hold canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ================================================================
   Мобилка: стрелка в заголовке
   ================================================================ */
@media (max-width: 959px) {
    /* Стрелка на мобилке всегда в заголовке: контент пункта скрыт,
       поэтому рисуем её псевдоэлементом, а исходную в контенте убираем */
    .svc-acc .uk-accordion-content img.el-image {
        display: none;
    }

    .svc-acc .uk-accordion-title {
        position: relative;
        padding-right: 44px;
    }

    .svc-acc .uk-accordion-title::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 32px;
        height: 32px;
        margin-top: -16px;
        background: url('/images/icons/arrow-right-up.svg') center center / contain no-repeat;
        transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .svc-acc .el-item.uk-open .uk-accordion-title::after {
        transform: rotate(45deg);
    }
}

/* ================================================================
   Цена и стрелка: в покое по центру строки заголовка
   Контент пункта обрезал содержимое, поэтому в покое цена и стрелка
   не были видны. Здесь обрезка снята, описание и кнопка скрыты до
   раскрытия, а цена и стрелка подняты на половину строки заголовка.
   Высоты вынесены в переменные — править при смене шрифтов.
   ================================================================ */
@media (min-width: 960px) {
    .svc-acc .uk-accordion-content > .el-content {
        overflow: visible;
    }

    .svc-acc .uk-accordion-content > .el-content > .uk-grid > :nth-child(1),
    .svc-acc .uk-accordion-content > .el-content > .uk-grid > :nth-child(2) .uk-button {
        opacity: 0;
        pointer-events: none;
        /* при закрытии гаснет сразу, вместе с началом схлопывания */
        transition: opacity 0.3s cubic-bezier(0.33, 1, 0.68, 1) 0s;
    }

    .svc-acc .el-item:hover .uk-accordion-content > .el-content > .uk-grid > :nth-child(1),
    .svc-acc .el-item:hover .uk-accordion-content > .el-content > .uk-grid > :nth-child(2) .uk-button {
        opacity: 1;
        pointer-events: auto;
        /* при раскрытии проявляется сразу, плавно */
        transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
    }

    .svc-acc {
        --svc-title-h: 102px;
        --svc-price-h: 31px;
        --svc-arrow-h: 84px;
    }

    .svc-acc .uk-accordion-content > .el-content > .uk-grid > :nth-child(2) {
        transform: translateY(calc((var(--svc-title-h) + var(--svc-price-h)) / -2));
        transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .svc-acc .uk-accordion-content > .el-content > .uk-grid > :nth-child(3) {
        transform: translateY(calc((var(--svc-title-h) + var(--svc-arrow-h)) / -2));
        transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .svc-acc .el-item:hover .uk-accordion-content > .el-content > .uk-grid > :nth-child(2),
    .svc-acc .el-item:hover .uk-accordion-content > .el-content > .uk-grid > :nth-child(3) {
        transform: none;
    }

    /* Стрелка поворачивается, когда опускается на своё место */
    .svc-acc .uk-accordion-content > .el-content > .uk-grid > :nth-child(3) img.el-image {
        transform: rotate(0deg);
        transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .svc-acc .el-item:hover .uk-accordion-content > .el-content > .uk-grid > :nth-child(3) img.el-image {
        transform: rotate(45deg) !important;
    }

    /* Цифра [01] занимает ту же колонку 142px, что и отступ контента
       (у .el-content padding-left: 142px) — заголовок встаёт ровно над описанием */
    .svc-acc .uk-accordion-title {
        column-gap: 0;
    }

    .svc-acc .uk-accordion-title > :first-child {
        flex: 0 0 142px;
    }
}

/* ================================================================
   Секции-фоны (hero + «эксперт» с классом le-bg)
   ================================================================ */
.le-bg {
    position: relative;
    overflow: hidden;
}

.le-bg > .ether-hold--hero {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.le-bg > .ether-hold--hero canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.le-bg > .uk-width-1-1 {
    position: relative;
    z-index: 1;
}

/* ================================================================
   Заголовок-маска (страница «Кейсы»): в буквах видно полотно Liquid Ether
   ----------------------------------------------------------------
   Полотно лежит под секцией (.le-bg > .ether-hold--hero, z-index 0).
   Слой с чёрным фоном и белым текстом накрывает его и гасит через multiply:
   снаружи букв получается чёрный, внутри букв — жидкость.
   Слова проявляются по очереди, класс .is-in ставит custom-liquid-ether.js.
   ================================================================ */
.le-mask > .uk-width-1-1 {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #000;
    mix-blend-mode: multiply;
}

.le-mask-heading {
    margin: 0;
}

/* класс может стоять и на самом заголовке, и на обёртке — покрываем оба случая;
   размер и выравнивание задаются классами билдера (uk-heading-*, uk-text-center) */
.le-mask-heading,
.le-mask-heading h1 {
    color: #000; /* до проявления буквы не видно: чёрное на чёрном */
}

.le-mask-heading .w {
    color: #000;
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* белый пропускает полотно сквозь буквы */
.le-mask-heading.is-in,
.le-mask-heading.is-in h1,
.le-mask-heading.is-in .w {
    color: #fff;
}

/* ================================================================
   Блог: картинка едет внутри своей рамки по ховеру мыши.
   Тот же приём, что в примере Sliding Image Track (изображение
   сдвигается внутри рамки), но управляет им позиция курсора,
   а не перетаскивание трека.

   Класс .blog-parallax ставится на секцию в билдере. scale(1.14) даёт
   запас, чтобы при сдвиге по краям рамки не появлялось пустого места.

   Режем по <picture>, а не по карточке: у YOOtheme picture инлайновый,
   поэтому делаем его и img блочными, иначе кадрировать нечего и
   увеличенная картинка наезжает на заголовок под ней.
   ================================================================ */
.blog-parallax picture {
    display: block;
    overflow: hidden;
}

.blog-parallax img.el-image {
    display: block;
    transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0) scale(1.14);
    will-change: transform;
}