/* ===== Variables ===== */
:root{
    --container-max: 1248px;
    --container-pad: 25px;
    --section-radius: 29px;
    --section-gap: 29px;

    --text-scale: 1;
    --image-scale: 1;

    --text: #010203;
    --text_light: #f3f4f4;
    --accent: #0D1F29;

    --transition-h: 125px;
    --split-transition-size: 125px;

    --feature-pad-y: clamp(29px, 4vw, 58px);
    --feature-pad-x: clamp(21px, 3.2vw, 46px);

    --title-size: clamp(
        calc(29px * var(--text-scale)),
        calc(6vw  * var(--text-scale)),
        calc(58px * var(--text-scale))
    );
    --title-split-size: clamp(
        calc(21px * var(--text-scale)),
        calc(4vw  * var(--text-scale)),
        calc(42px * var(--text-scale))
    );

    --f-body-size: clamp(
        calc(15px * var(--text-scale)),
        calc(1.2vw * var(--text-scale)),
        calc(20px * var(--text-scale))
    );

    --tr-h: var(--transition-h);

    /* Header */
    --hero-bg: #ffffff;                 /* базовый цвет HERO */
    --header-bg: var(--hero-bg);        /* fallback: если нет градиента */
    --header-grad-from: var(--header-grad-to);    /* старт градиента */
    --header-grad-to: var(--hero-bg);   /* конец градиента = цвет HERO */
    --header-grad-angle: 180deg;        /* сверху вниз */

    --terms-head-align: left;

    --feature-title-color: var(--text);
    --feature-title-gradient: var(--text);
    --terms-text-color: var(--text);
    --terms-brand-color: var(--text);
    --terms-page-title-fill: var(--accent);
    --terms-page-title-bg: none; /* или linear-gradient(...) */
    --footer-bg: var(--accent);

    --text-shadow-title: none;
    --text-shadow-desc: none;
    --text-shadow-filter-title: none;
    --text-shadow-filter-desc: none;

    /* add these defaults so IDE resolves variables */
    --section-bg: #ffffff;
    --from: #ffffff;
    --to: #eef5ff;

    --half-bg: #ffffff;
    --left-bg: #ffffff;
    --right-bg: #eef5ff;

    --left-from: #ffffff;
    --left-to: #ffffff;
    --right-from: #ffffff;
    --right-to: #ffffff;

    --header-text-color: var(--text);
    --footer-text-color: var(--text);
    --page-bg: #ffffff;
    --topbar-bg: transparent;
    --topbar-bg-grad: linear-gradient(
            var(--header-grad-angle, 180deg),
            var(--header-grad-from, #ffffff) 0%,
            var(--header-grad-from, #ffffff) 18%,
            color-mix(in srgb, var(--header-grad-from, #ffffff) 92%, var(--header-grad-to, #ffffff) 8%) 30%,
            color-mix(in srgb, var(--header-grad-from, #ffffff) 75%, var(--header-grad-to, #ffffff) 25%) 45%,
            color-mix(in srgb, var(--header-grad-from, #ffffff) 50%, var(--header-grad-to, #ffffff) 50%) 60%,
            color-mix(in srgb, var(--header-grad-from, #ffffff) 25%, var(--header-grad-to, #ffffff) 75%) 75%,
            color-mix(in srgb, var(--header-grad-from, #ffffff) 8%,  var(--header-grad-to, #ffffff) 92%) 88%,
            var(--header-grad-to, #ffffff) 100%
    );
}

@supports (color: color-mix(in srgb, black, white)) {
    :root{
        --terms-page-title-auto-gradient:
                linear-gradient(
                        90deg,
                        color-mix(in srgb, var(--accent) 90%, black 10%) 0%,
                        color-mix(in srgb, var(--accent) 70%, white 30%) 100%
                );
    }
}

/* ===== Main ===== */
*{
    font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica;
    box-sizing: border-box;
}

html, body{
    height: 100%;
}

body{
    background: var(--page-bg, #ffffff);
    margin: 0;
}

img{
    max-width: 100%;
    height: auto;
    display: block;
}

a{
    color: inherit;
    text-decoration: none;
}

/* ===== Topbar ===== */
.topbar{
    background: var(--topbar-bg, transparent);
    color: var(--header-text-color, var(--text));
}



.topbar__link, .topbar__dot { color: inherit; }

.topbar__nav,
.topbar__link,
.topbar__dot {
    --fill: var(--header-text-fill, var(--header-text-color, var(--text)));
    --bg: var(--header-text-bg, none);
}
.topbar__nav,
.topbar__link,
.topbar__dot {
    /* можно прямо так, без добавления класса в HTML */
    color: var(--fill);
    background-image: var(--bg);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--fill);
}

.topbar__inner{
    width: 100%;
    height: 140px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.hero,
.section-hero,
.hero__wrap{
    background: transparent !important;
}

.footer__links{
    justify-content: flex-start;
}

.footer__left{ order: 1; }
.footer__right{ order: 2; }

.header-icon-right .topbar__icon{ order: 2; }
.header-icon-right .topbar__nav{ order: 1; }

.footer-icon-left .footer__brand{
    justify-content: right;
}

.footer-icon-left .footer__left{
    order: 2;
    left: 0;
    right: 0;               /* убираем сдвиги position */
    margin-left: auto;      /* прижать текстовый блок вправо */
    text-align: right;      /* весь текст вправо */
    display: flex;
    flex-direction: column;
    align-items: flex-end;  /* дочерние элементы к правому краю */
}

.footer-icon-left .footer__right{
    order: 1;
    left: 0;
    right: 0;
    margin-right: auto;     /* иконка уходит влево */
}
.footer-icon-left .footer__links{
    justify-content: flex-end;
}

@media (max-width: 950px){
    .footer-icon-left .footer__left{
        margin-left: 0;
    }

    .footer-icon-left .footer__links{
        justify-content: center;
    }
}

.topbar__icon{
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 10px;
    align-items: center;
    display: flex;
    flex: 0 0 auto;
}
.topbar__icon img{
    width: 100px;
    height: 100px;
    border-radius: 20%;
    object-fit: cover;
}

.topbar__nav{
    font-size: clamp(10px, 2.5vw, 16px);
    padding: 0 10%;
    gap: 15px;
    align-items: center;
    display: inline-flex;
}

.topbar__dot{
    opacity: 1.3;
}

/* ===== Responsive topbar ===== */
@media (max-width: 950px){
    /* Topbar */
    .topbar__icon img{
        width: 100%;
        height: 100%;
    }

    .topbar__icon{
        width: 100%;
        min-width: min(25%, 20px);
        max-width: min(25%, 80px);
        aspect-ratio: 1 / 1;
        padding: 0;
    }

    .topbar__nav{
        padding-right: 0;
        justify-self: flex-end;
    }

    .topbar__link {
        white-space: nowrap;
    }

    .topbar__inner{
        height: 30%;
        padding: 5%;
        gap: 5%;
    }
}


/* ===== Footer ===== */
.footer{
    background: var(--footer-bg, var(--accent));
    --fill: var(--footer-text-fill, var(--footer-text-color, var(--text)));
    --bg: var(--footer-text-bg, none);
    padding: 20px max(7%, 20px);
}

.terms__ctaText,
.terms__ctaEmail,
.footer__addr,
.footer__brand,
.footer__links,
.footer__links a {
    color: var(--fill);
    background-image: var(--bg);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--fill);
}

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

.footer__brand{
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 700;
    margin-bottom: 10px;
}

.footer__addr{
    font-size: clamp(12px, 2vw, 18px);
    line-height: clamp(1.5em, calc(3em - 2vw), 2.5em);
    margin-bottom: 12px;
    opacity: .85;
}

.footer__links{
    font-size: clamp(12px, 1.8vw, 14px);
    gap: 10px;
    opacity: .9;
    display: flex;
}

.footer__square{
    width: 130px;
    height: 130px;
    border-radius: 20%;
    place-items: center;
    overflow: hidden;
    position: relative;
}
.footer__square img{
    width: 100%;
    height: 100%;
}

/* ===== Responsive footer ===== */
@media (max-width: 950px){
    .footer__inner{
        flex-direction: row;
    }

    .footer__right{
        width: min(20%, 100px);
    }

    .footer__square{
        width: 100%;
        height: 100%;
    }
}

/* ===== Terms page ===== */
.terms__head{
    text-align: var(--terms-head-align);
}

.terms__wrap{
    padding: 20px min(20%, 300px) 60px min(20%, 300px);
    margin: 0;
}

.terms__title{
    color: var(--text);
    font-size: clamp(28px, 4.5vw, 56px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.terms__pageTitle{
    /* fallback: обычный цвет */
    color: var(--terms-page-title-fill, var(--accent));

    /* градиент (если задан) */
    background-image: var(--terms-page-title-bg, none);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-clip: text;
    -webkit-background-clip: text;

    /* КЛЮЧ: по умолчанию transparent, чтобы градиент был виден */
    -webkit-text-fill-color: var(--terms-page-title-fill, transparent);
}

.terms__content{
    color: var(--terms-text-color, var(--text));
    font-size: clamp(12px, 1.5vw, 18px);
    line-height: 1.9;
    padding-top: 30px;
}

.terms__content,
.terms__content_title,
.terms__content_text,
.terms__content_list {
    --fill: var(--terms-text-fill, var(--terms-text-color, var(--text)));
    --bg: var(--terms-text-bg, none);

    color: var(--fill);
    background-image: var(--bg);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--fill);
}

.terms__content_text{
    font-weight: 500;
    margin: 0;
}

.terms__content_title{
    font-weight: 700;
    padding-top: 20px;
    margin: 0;
}

.terms__content_list{
    font-weight: 500;
    margin: 0;
}

.terms__brand{
    color: var(--terms-brand-fill);
    background-image: var(--terms-brand-bg);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--terms-brand-fill);
}

.terms__ul li::marker{
    font-size: clamp(8px, 1vw, 12px);
}

.terms__email{
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.terms__ctaInner{
    padding: 50px 10%;
    text-align: center;
}

.terms__ctaText{
    font-size: clamp(10px, 1.2vw, 16px);
    line-height: 1.7;
    margin: 0 0 10px;
    opacity: 0.95;
}

.terms__ctaEmail{
    font-weight: 600;
    font-size: clamp(15px, 1.8vw, 20px);
    display: inline-block;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ===== Responsive terms page ===== */
@media (max-width: 950px){
    .terms__wrap{
        padding-left: 10%;
        padding-right: 10%;
    }

    .terms__ctaInner{
        padding: 35px 5%;
    }

    .terms__ul{
        padding-inline-start: 30px;
    }
}

@media (max-width: 520px){
    .terms__wrap{
        padding-left: 5%;
        padding-right: 5%;
    }

    .terms__ctaInner{
        padding: 15px 5%;
    }

    .terms__ctaText{
        font-size: clamp(12px, 1.5vw, 18px);
    }

    .terms__ctaEmail{
        font-size: clamp(14px, 1.6vw, 20px);
    }

    .terms__ul{
        padding-inline-start: 20px;
    }
}

/* ===== Features blocks layouts ===== */
.page-container {
    width: min(100%, var(--container-max));
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.sections-flow {
    display: flex;
    flex-direction: column;
}

.section-block {
    overflow: clip;
    background: var(--section-bg, #fff);
    position: relative;
}

.feature {
    background: var(--section-bg, #fff);
}

.feature__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--section-gap);
    align-items: center;
    padding: var(--feature-pad-y) var(--feature-pad-x);
    min-height: clamp(360px, 45vw, 640px);
}

.feature__media,
.feature__content {
    min-width: 0;
}

.feature__title {
    margin: 0 0 20px;
    font-size: var(--title-size);
    line-height: 1.15;
    font-weight: 800;
    color: var(--feature-title-color, var(--text));
}

.feature__title.has-gradient{
    color: transparent;
    background-image: var(--feature-title-gradient, none);
    background-clip: text;
    -webkit-background-clip: text;
}

.feature__desc {
    margin: 0;
    color: var(--text);
    font-size: var(--f-body-size);
    line-height: 1.55;
    font-weight: 500;
}

/* mockup image */
.feature__mockup {
    width: min(100%, calc(480px * var(--image-scale)));
    max-height: clamp(
            calc(300px * var(--image-scale)),
            calc(44vw  * var(--image-scale)),
            calc(680px * var(--image-scale))
    );
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.layout-image-bottom .feature__mockup,
.layout-image-top .feature__mockup {
    width: min(100%, calc(720px * var(--image-scale)));
    max-height: clamp(
            calc(360px * var(--image-scale)),
            calc(48vw  * var(--image-scale)),
            calc(720px * var(--image-scale))
    );
}

.layout-image-bottom .feature__mockup {
    padding-top: 30px;
}

.layout-image-top .feature__mockup {
    padding-bottom: 30px;
}

.layout-image-bottom .feature__inner,
.layout-image-top .feature__inner {
    padding-top: clamp(50px, 6vw, 120px);
    padding-bottom: clamp(34px, 4.4vw, 70px);
    gap: clamp(26px, 3vw, 44px);
}

.layout-image-bottom .feature__content,
.layout-image-top .feature__content {
    max-width: 550px;
    width: min(100%, 550px);
    margin: 0 auto;
    text-align: center;
}

.layout-image-bottom .feature__title,
.layout-image-bottom .feature__desc,
.layout-image-top .feature__title,
.layout-image-top .feature__desc {
    text-align: center;
}

.layout-image-left .feature__content,
.layout-image-right .feature__content {
    max-width: 500px;
    width: 100%;
}

.layout-image-left .feature__content {
    margin-left: auto;
    margin-right: clamp(28px, 7vw, 120px);
}

.layout-image-right .feature__content {
    margin-left: clamp(28px, 7vw, 120px);
    margin-right: auto;
}

/* немного больше воздуха в секции с боковым расположением */
.layout-image-left .feature__inner,
.layout-image-right .feature__inner {
    padding-top: clamp(34px, 4.4vw, 70px);
    padding-bottom: clamp(34px, 4.4vw, 70px);
}

/* ===== Desktop position variants ===== */
.layout-image-left .feature__media   { order: 1; }
.layout-image-left .feature__content { order: 2; }

.layout-image-right .feature__media   { order: 2; }
.layout-image-right .feature__content { order: 1; }

.layout-image-bottom .feature__inner,
.layout-image-top .feature__inner {
    grid-template-columns: 1fr;
    gap: clamp(18px, 2vw, 28px);
}
.layout-image-bottom .feature__content { order: 1; text-align: left; }
.layout-image-bottom .feature__media   { order: 2; }

.layout-image-top .feature__media   { order: 1; }
.layout-image-top .feature__content { order: 2; text-align: left; }

/* ===== Responsive features blocks layouts ===== */
@media (max-width: 900px) {
    .feature__inner {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    .layout-image-left .feature__media,
    .layout-image-right .feature__media {
        order: 1;
    }
    .layout-image-left .feature__content,
    .layout-image-right .feature__content {
        order: 2;
    }

    .layout-image-bottom .feature__content { order: 1; }
    .layout-image-bottom .feature__media   { order: 2; }

    .layout-image-top .feature__media   { order: 1; }
    .layout-image-top .feature__content { order: 2; }

    .feature__mockup {
        width: min(100%, calc(360px * var(--image-scale)));
        max-height: calc(440px * var(--image-scale));
    }

    .layout-image-left .feature__inner,
    .layout-image-right .feature__inner,
    .layout-image-bottom .feature__inner,
    .layout-image-top .feature__inner {
        padding-top: clamp(22px, 5vw, 32px);
        padding-bottom: clamp(24px, 6vw, 36px);
        gap: 18px;
    }

    .layout-image-left .feature__title,
    .layout-image-right .feature__title,
    .layout-image-left .feature__desc,
    .layout-image-right .feature__desc {
        text-align: center;
    }

    .layout-image-left .feature__content,
    .layout-image-right .feature__content,
    .layout-image-bottom .feature__content,
    .layout-image-top .feature__content {
        max-width: 85%;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}


/* ===== Split features blocks layouts ===== */
.feature-split {
    background: transparent;
}

.feature-split__inner {
    display: grid;
    grid-template-columns: 1fr var(--split-transition-size) 1fr;
    align-items: stretch;
}

/* left/right cards */
.feature-split__half {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(22px, 2.5vw, 34px);
    padding: var(--feature-pad-y) var(--feature-pad-x);
    padding-top: clamp(34px, 4.4vw, 70px);
    padding-bottom: clamp(42px, 5vw, 88px);
    background: var(--half-bg, #fff);
    min-height: clamp(420px, 44vw, 700px);
}

/* always image top, text bottom in split */
.feature-split__media { order: 1; }
.feature-split__content { order: 2; }

.feature-split__content {
    max-width: 500px;
    width: min(100%, 500px);
    margin: 0 auto;
    text-align: center;
}

.feature-split__mockup {
    width: min(100%, 500px);
    max-height: clamp(340px, 42vw, 700px);
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.feature-split__title {
    margin: 0 0 20px;
    color: var(--text);
    font-size: var(--title-split-size);
    line-height: 1.15;
    font-weight: 800;
}

.feature-split__desc {
    margin: 0;
    color: var(--text);
    font-size: var(--f-body-size);
    line-height: 1.55;
    font-weight: 500;
}

.feature-split__title,
.feature-split__desc {
    text-align: center;
}

/* divider between left and right halves on desktop */
.feature-split__transition {
    background: linear-gradient(
            to right,
            var(--left-bg) 0%,
            var(--left-bg) 18%,
            color-mix(in srgb, var(--left-bg) 92%, var(--right-bg) 8%) 30%,
            color-mix(in srgb, var(--left-bg) 75%, var(--right-bg) 25%) 45%,
            color-mix(in srgb, var(--left-bg) 50%, var(--right-bg) 50%) 60%,
            color-mix(in srgb, var(--left-bg) 25%, var(--right-bg) 75%) 75%,
            color-mix(in srgb, var(--left-bg) 8%, var(--right-bg) 92%) 88%,
            var(--right-bg) 100%
    );
}

/* if split divider must be absent on desktop */
/*.feature-split__inner:has(.feature-split__transition--plain) {*/
/*    grid-template-columns: 1fr 0 1fr;*/
/*}*/

.feature-split__transition--plain {
    width: 0 !important;
    background: none !important;
}

/* ===== Responsive split features blocks layouts ===== */
@media (max-width: 900px) {
    .feature-split__inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch;
    }

    .feature-split__left {
        order: 1 !important;
    }

    .feature-split__transition {
        order: 2 !important;
        flex: 0 0 var(--split-transition-size);
    }

    .feature-split__right {
        order: 3 !important;
    }

    .feature-split__half {
        gap: 16px;
        padding-top: clamp(22px, 5vw, 32px);
        padding-bottom: clamp(26px, 6vw, 40px);
        min-height: unset;
        width: 100%;
    }

    .feature-split__mockup {
        width: min(80%, 380px);
        max-height: 480px;
    }

    .feature-split__title {
        font-size: var(--title-size);
    }

    .feature-split__content {
        max-width: 85%;
        margin: 0 auto;
        text-align: center;
    }

    .feature-split__transition {
        background: linear-gradient(
                to bottom,
                var(--left-bg) 0%,
                var(--left-bg) 18%,
                color-mix(in srgb, var(--left-bg) 92%, var(--right-bg) 8%) 30%,
                color-mix(in srgb, var(--left-bg) 75%, var(--right-bg) 25%) 45%,
                color-mix(in srgb, var(--left-bg) 50%, var(--right-bg) 50%) 60%,
                color-mix(in srgb, var(--left-bg) 25%, var(--right-bg) 75%) 75%,
                color-mix(in srgb, var(--left-bg) 8%, var(--right-bg) 92%) 88%,
                var(--right-bg) 100%
        );
    }

    .feature-split__transition--plain {
        display: none !important;
        flex-basis: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    .no-gradients .feature-split__transition {
        display: none !important;
        flex-basis: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
    }
}

/* ===== Gradient transitions (simple: no 4-corner blend) ===== */
.section-transition{
    height: var(--tr-h, 120px);
    position: relative;
    overflow: hidden;
    line-height: 0;
}

/* базовые половины для desktop split-переходов */
.section-transition .tr__half{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    pointer-events: none;
}
.section-transition .tr__half--left{ left: 0; }
.section-transition .tr__half--right{ right: 0; }

/* feature -> feature (обычный вертикальный градиент) */
.section-transition.tr--f-f{
    background: linear-gradient(
            to bottom,
            var(--from) 0%,
            var(--from) 18%,
            color-mix(in srgb, var(--from) 92%, var(--to) 8%) 30%,
            color-mix(in srgb, var(--from) 75%, var(--to) 25%) 45%,
            color-mix(in srgb, var(--from) 50%, var(--to) 50%) 60%,
            color-mix(in srgb, var(--from) 25%, var(--to) 75%) 75%,
            color-mix(in srgb, var(--from) 8%,  var(--to) 92%) 88%,
            var(--to) 100%
    );
}

/* NO gradients globally */
.no-gradients .section-transition:not(.section-transition--footer){
    display: none !important;
}
.no-gradients .feature-split__transition{
    display: none !important;
}
.no-gradients .feature-split__inner{
    grid-template-columns: 1fr 1fr !important;
}

.feature-split__inner:has(.feature-split__transition--plain){
    grid-template-columns: 1fr 0 1fr;
}

/* и на всякий, чтобы сам элемент не добавлял ничего */
.feature-split__transition--plain{
    width: 0 !important;
    background: none !important;
}

.transition__mobile-only{
    display: none !important;
}

/* ===== Mobile behavior ===== */
@media (max-width: 900px){
    /* на mobile split становится колонкой, поэтому половины transition не нужны */
    .section-transition .tr__half{
        display: none !important;
    }

    /* mobile: градиенты остаются везде, где нужен вертикальный стык между секциями */
    .section-transition.tr--f-f{
        background: linear-gradient(to bottom, var(--from, #fff) 0%, var(--to, #eef5ff) 100%);
    }
    .section-transition.tr--f-s{
        /* feature -> split (top color -> будущий split фон) */
        background: linear-gradient(to bottom, var(--from, #fff) 0%, var(--right-bg, #eef5ff) 100%);
    }
    .section-transition.tr--s-f{
        /* split -> feature */
        background: linear-gradient(to bottom, var(--left-bg, #fff) 0%, var(--to, #fff) 100%);
    }
    .section-transition.tr--s-s{
        /* split -> split */
        background: linear-gradient(to bottom, var(--left-from, #fff) 0%, var(--right-to, #eef5ff) 100%);
    }

    /* divider внутри split на mobile = вертикальный градиент между верхней и нижней карточкой */
    .feature-split__transition{
        order: 2;
        background: linear-gradient(
                to bottom,
                var(--left-bg) 0%,
                var(--left-bg) 18%,
                color-mix(in srgb, var(--left-bg) 92%, var(--right-bg) 8%) 30%,
                color-mix(in srgb, var(--left-bg) 75%, var(--right-bg) 25%) 45%,
                color-mix(in srgb, var(--left-bg) 50%, var(--right-bg) 50%) 60%,
                color-mix(in srgb, var(--left-bg) 25%, var(--right-bg) 75%) 75%,
                color-mix(in srgb, var(--left-bg) 8%,  var(--right-bg) 92%) 88%,
                var(--right-bg) 100%
        );
    }

    /*.no-gradients .feature-split__inner{*/
    /*    grid-template-columns: 1fr !important;*/
    /*    grid-template-rows: auto auto !important;*/
    /*}*/

    .transition__mobile-only{
        display: block !important;
    }

    .feature-split__inner:has(.feature-split__transition--plain){
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 0 auto !important;
    }

    .feature-split__transition--plain{
        height: 0 !important;
    }
}

/* ===== Text shadow routing ===== */
.feature__title:not(.text-gradient),
.feature-split__title:not(.text-gradient),
.terms__title:not(.text-gradient),
.terms__pageTitle:not(.text-gradient),
.footer__brand:not(.text-gradient) {
    text-shadow: var(--text-shadow-title);
}

.feature__desc:not(.text-gradient),
.feature-split__desc:not(.text-gradient),
.terms__content:not(.text-gradient),
.terms__content_title:not(.text-gradient),
.terms__content_text:not(.text-gradient),
.terms__content_list:not(.text-gradient),
.footer__addr:not(.text-gradient),
.footer__links:not(.text-gradient),
.terms__ctaText:not(.text-gradient),
.topbar__nav:not(.text-gradient) {
    text-shadow: var(--text-shadow-desc);
}

.feature__title.text-gradient,
.feature-split__title.text-gradient,
.terms__title.text-gradient,
.terms__pageTitle.text-gradient,
.footer__brand.text-gradient {
    filter: var(--text-shadow-filter-title);
    text-shadow: none !important;
}

.feature__desc.text-gradient,
.feature-split__desc.text-gradient,
.terms__content.text-gradient,
.terms__content_title.text-gradient,
.terms__content_text.text-gradient,
.terms__content_list.text-gradient,
.footer__addr.text-gradient,
.footer__links.text-gradient,
.terms__ctaText.text-gradient,
.topbar__nav.text-gradient {
    filter: var(--text-shadow-filter-desc);
    text-shadow: none !important;
}

/* terms mail link = classic blue */
.terms__content a,
.terms__content a:visited{
    color: #0b5fff !important;              /* обычный “link blue” */
    -webkit-text-fill-color: #0b5fff !important;
    background-image: none !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* === Gradient text via CSS vars (works for solid too) === */
.grad-text {
    color: var(--fill, currentColor);
    background-image: var(--bg, none);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--fill, currentColor);
}
/* ===== Header navigation options ===== */
.topbar{
    position: relative;
    z-index: 20;
}

.topbar__burger{
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--header-text-fill, var(--header-text-color, var(--text)));
    width: 40px;
    height: 40px;
    padding: 8px;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}

.topbar__burger span{
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    display: block;
    transition: transform .2s ease, opacity .2s ease;
}

.nav-active-enabled .topbar__link.is-active{
    --fill: var(--nav-active-fill, var(--accent));
    --bg: var(--nav-active-bg, none);
    font-weight: 700;
}

.nav-active-enabled .topbar__homeIcon.is-active img{
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-active-fill, var(--accent)) 55%, transparent);
}

@media (max-width: 950px){
    .nav-burger-enabled .topbar__inner{
        position: relative;
        height: auto;
        min-height: 0;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
    }

    .nav-burger-enabled .topbar__icon{
        order: 1;
    }

    .nav-burger-enabled .topbar__burger{
        display: flex;
        margin-left: auto;
        order: 2;
    }

    .nav-burger-enabled .topbar__nav{
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
        position: static;
        inset: auto;
        margin: 8px 0 0;
        padding: 16px 0 22px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition: none;
    }

    .nav-burger-enabled.is-open .topbar__nav{
        display: flex;
    }

    .nav-burger-enabled .topbar__dot{
        display: none;
    }

    .nav-burger-enabled .topbar__link{
        font-size: clamp(14px, 4vw, 18px);
        line-height: 1.35;
        white-space: nowrap;
    }
}

/* ===== Feature mockup shift options ===== */
.feature.shift-top .feature__inner,
.feature-split__half.shift-top{
    padding-top: 0 !important;
}

.feature.shift-bottom .feature__inner,
.feature-split__half.shift-bottom{
    padding-bottom: 0 !important;
}

.feature.shift-top .feature__media,
.feature-split__half.shift-top .feature-split__media{
    align-self: start;
}

.feature.shift-bottom .feature__media,
.feature-split__half.shift-bottom .feature-split__media{
    align-self: end;
}

.feature.shift-top .feature__mockup,
.feature-split__half.shift-top .feature-split__mockup{
    margin-top: 0;
}

.feature.shift-bottom .feature__mockup,
.feature-split__half.shift-bottom .feature-split__mockup{
    margin-bottom: 0;
}

.feature.shift-oversize,
.feature-split__half.shift-oversize{
    overflow: visible;
    z-index: 3;
}

.feature.shift-oversize .feature__inner,
.feature-split__half.shift-oversize{
    overflow: visible;
}

/*
   Oversize for side layouts must be a real bleed, not a taller section.
   The media column becomes a fixed placeholder and the mockup is absolutely
   positioned beyond it. That keeps the section height mostly unchanged while
   the image visually exits the block by roughly 5-10% on desktop.
*/
.layout-image-left.shift-oversize .feature__inner,
.layout-image-right.shift-oversize .feature__inner{
    min-height: clamp(410px, 48vw, 680px);
    padding-top: 0;
    padding-bottom: 0;
}

.layout-image-left.shift-oversize .feature__media,
.layout-image-right.shift-oversize .feature__media{
    --oversize-bleed-y: clamp(28px, 5vw, 66px);
    position: relative;
    z-index: 3;
    overflow: visible;
    align-self: stretch;
    justify-self: center;
    width: 100%;
    height: clamp(410px, 48vw, 680px);
    min-height: 0;
}

.layout-image-left.shift-oversize .feature__mockup,
.layout-image-right.shift-oversize .feature__mockup{
    position: absolute;
    z-index: 3;
    left: 50%;
    top: calc(0px - var(--oversize-bleed-y));
    width: auto;
    height: calc(100% + var(--oversize-bleed-y) + var(--oversize-bleed-y));
    max-width: min(130%, calc(620px * var(--image-scale)));
    max-height: none;
    object-fit: contain;
    display: block;
    margin: 0;
    transform: translateX(-50%);
}

/* For vertical single layouts, keep a smaller bleed and avoid section growth. */
.layout-image-top.shift-oversize,
.layout-image-bottom.shift-oversize{
    overflow: visible;
}

.layout-image-top.shift-oversize .feature__media,
.layout-image-bottom.shift-oversize .feature__media{
    --oversize-bleed-y: clamp(22px, 4vw, 54px);
    position: relative;
    z-index: 3;
    overflow: visible;
}

.layout-image-top.shift-oversize .feature__mockup,
.layout-image-bottom.shift-oversize .feature__mockup{
    transform: scale(1.08);
    max-height: none;
}

.layout-image-top.shift-oversize .feature__mockup{
    transform-origin: top center;
    margin-top: calc(0px - var(--oversize-bleed-y));
}

.layout-image-bottom.shift-oversize .feature__mockup{
    transform-origin: bottom center;
    margin-bottom: calc(0px - var(--oversize-bleed-y));
}

/* Split halves can also bleed, but only visually, without creating huge columns. */
.feature-split__half.shift-oversize .feature-split__media{
    position: relative;
    z-index: 3;
    overflow: visible;
}

.feature-split__half.shift-oversize .feature-split__mockup{
    width: min(108%, 610px);
    max-height: none;
    transform: scale(1.06);
    position: relative;
    z-index: 3;
}

.feature-split__half.shift-top.shift-oversize .feature-split__mockup{
    transform-origin: top center;
    margin-top: clamp(-44px, -4vw, -24px);
}

.feature-split__half.shift-bottom.shift-oversize .feature-split__mockup{
    transform-origin: bottom center;
    margin-bottom: clamp(-44px, -4vw, -24px);
}

@media (max-width: 900px){
    .feature.shift-top .feature__inner,
    .feature-split__half.shift-top{
        padding-top: 0 !important;
    }

    .feature.shift-bottom .feature__inner,
    .feature-split__half.shift-bottom{
        padding-bottom: 0 !important;
    }

    .layout-image-left.shift-oversize,
    .layout-image-right.shift-oversize,
    .layout-image-top.shift-oversize,
    .layout-image-bottom.shift-oversize{
        overflow: visible;
    }

    .layout-image-left.shift-oversize .feature__inner,
    .layout-image-right.shift-oversize .feature__inner{
        min-height: auto;
        padding-top: 0;
        padding-bottom: clamp(28px, 7vw, 44px);
        gap: clamp(12px, 4vw, 22px);
    }

    .layout-image-left.shift-oversize .feature__media,
    .layout-image-right.shift-oversize .feature__media{
        --oversize-mobile-bleed-top: clamp(28px, 9vw, 56px);
        height: clamp(330px, 105vw, 500px);
        min-height: 0;
        width: 100%;
        margin-top: 0;
        align-self: center;
        justify-self: center;
    }

    .layout-image-left.shift-oversize .feature__mockup,
    .layout-image-right.shift-oversize .feature__mockup{
        top: calc(0px - var(--oversize-mobile-bleed-top));
        height: calc(100% + var(--oversize-mobile-bleed-top));
        max-width: min(112%, 460px);
        transform: translateX(-50%);
    }

    .layout-image-top.shift-oversize .feature__mockup,
    .layout-image-bottom.shift-oversize .feature__mockup,
    .feature-split__half.shift-oversize .feature-split__mockup{
        width: min(100%, 460px);
        max-height: none;
        transform: scale(1.04);
    }

    .layout-image-top.shift-oversize .feature__mockup,
    .feature-split__half.shift-top.shift-oversize .feature-split__mockup{
        margin-top: clamp(-44px, -9vw, -24px);
        transform-origin: top center;
    }

    .layout-image-bottom.shift-oversize .feature__mockup,
    .feature-split__half.shift-bottom.shift-oversize .feature-split__mockup{
        margin-bottom: clamp(-44px, -9vw, -24px);
        transform-origin: bottom center;
    }
}

/* ===== Split feature top/bottom variants ===== */
.feature-split__half.split-image-top .feature-split__media{ order: 1; }
.feature-split__half.split-image-top .feature-split__content{ order: 2; }

.feature-split__half.split-image-bottom .feature-split__content{ order: 1; }
.feature-split__half.split-image-bottom .feature-split__media{ order: 2; }

.feature-split__half.split-image-bottom{
    grid-template-rows: 1fr auto;
}

.feature-split__half.split-image-bottom .feature-split__media{
    align-self: end;
}

/* ===== Footer mobile icon orientation ===== */
@media (max-width: 950px){
    .footer-mobile-top .footer__inner,
    .footer-mobile-bottom .footer__inner{
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 24px;
    }

    .footer-mobile-top .footer__right,
    .footer-mobile-bottom .footer__right{
        width: min(25%, 92px);
        margin: 0;
    }

    .footer-mobile-top .footer__left,
    .footer-mobile-bottom .footer__left{
        width: 100%;
        margin: 0;
        text-align: left;
        align-items: flex-start;
    }

    .footer-mobile-top .footer__links,
    .footer-mobile-bottom .footer__links{
        justify-content: flex-start;
    }

    .footer-mobile-top .footer__right{ order: 1; }
    .footer-mobile-top .footer__left{ order: 2; }
    .footer-mobile-bottom .footer__left{ order: 1; }
    .footer-mobile-bottom .footer__right{ order: 2; }
}

/* ===== Multitool legal pages ===== */
.terms__wrap--multitool{
    padding-top: 70px;
    padding-bottom: 90px;
}

.terms__wrap--multitool .terms__head{
    text-align: left;
}

.terms__content--multitool{
    padding-top: 28px;
}

.terms__lead{
    font-size: clamp(16px, 1.65vw, 22px);
    line-height: 1.75;
    font-weight: 500;
    margin: 0 0 34px;
    color: var(--terms-text-fill, var(--text));
    background-image: var(--terms-text-bg, none);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--terms-text-fill, var(--text));
}

.terms__accentBrand{
    color: var(--terms-text-fill, var(--text));
    -webkit-text-fill-color: var(--terms-text-fill, var(--text));
    background-image: var(--terms-text-bg, none);
    background-clip: text;
    -webkit-background-clip: text;
}

.terms__email--strong{
    font-weight: 800;
}

.terms__contactLabel{
    font-weight: 800;
    font-size: clamp(16px, 1.7vw, 22px);
    margin: 38px 0 8px;
    color: var(--terms-text-fill, var(--text));
    -webkit-text-fill-color: var(--terms-text-fill, var(--text));
}

.terms__contactValue{
    font-size: clamp(15px, 1.6vw, 20px);
    line-height: 1.8;
    margin: 0;
    color: var(--terms-text-fill, var(--text));
    -webkit-text-fill-color: var(--terms-text-fill, var(--text));
}

.terms__content--contact .terms__content_text{
    margin-top: 28px;
}

.terms__wrap--contact,
.terms__wrap--contact *{
    font-family: inherit;
}

.terms__wrap--contact .terms__lead,
.terms__wrap--contact .terms__contactLabel,
.terms__wrap--contact .terms__contactValue,
.terms__wrap--contact .terms__content_text{
    font-family: inherit;
}

@media (max-width: 950px){
    .terms__wrap--multitool{
        padding-top: 40px;
        padding-bottom: 56px;
    }
}