/* ===== Variables ===== */
:root{
    --title: #0C171D;
    --footer: #ffffff;

    --container-max: 1200px;
    --container-pad: 24px;
    --section-radius: 28px;
    --section-gap: 28px;

    --text: #1f2430;
    --accent: #3B82F6;

    --transition-h: 120px;
    --split-transition-size: 120px; /* desktop vertical divider width; mobile becomes height */

    --feature-pad-y: clamp(28px, 4vw, 56px);
    --feature-pad-x: clamp(20px, 3.2vw, 44px);

    --title-size: clamp(28px, 6vw, 56px);
    --title-split-size: clamp(20px, 4vw, 40px);
    --f-body-size: clamp(14px, 1.2vw, 19px);

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

    /* Header */
    --hero-bg: #ffffff;                 /* базовый цвет HERO */
    --header-bg: var(--hero-bg);        /* fallback: если нет градиента */
    --header-grad-from: transparent;    /* старт градиента */
    --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-page-title-fill: var(--accent);
    --terms-page-title-bg: none; /* или linear-gradient(...) */
    --footer-bg: var(--accent);

    /* 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;

    --l-mid: #ffffff;
    --r-mid: #ffffff;
}

@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{
    margin: 0;
}

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

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

/* ===== Topbar ===== */
.topbar{
    background: linear-gradient(
            180deg,
            var(--header-grad-from, #ffffff),
            var(--header-grad-to, #ffffff)
    );
}

/* Включаем градиент только когда явно задан класс */
/*.topbar.topbar--gradient{*/
/*    background:*/
/*            linear-gradient(*/
/*                    var(--header-grad-angle),*/
/*                    var(--header-grad-from) 0%,*/
/*                    var(--header-grad-to) 100%*/
/*            );*/
/*}*/

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

.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));
    color: var(--footer, #fff);
    padding: 20px max(7%, 20px);
}

.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(--title);
    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(--text);
    font-size: clamp(12px, 1.5vw, 18px);
    line-height: 1.9;
    padding-top: 30px;
}

.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__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);
}

.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%, 480px);
    max-height: clamp(300px, 44vw, 680px);
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

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

.layout-image-bottom .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 {
    max-width: 550px;
    width: min(100%, 550px);
    margin: 0 auto;
    text-align: center;
}

.layout-image-bottom .feature__title,
.layout-image-bottom .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 {
    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; }

/* ===== 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; }

    .feature__mockup {
        width: min(80%, 360px);
        max-height: 440px;
    }

    .layout-image-left .feature__inner,
    .layout-image-right .feature__inner,
    .layout-image-bottom .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 {
        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%
    );
}

/* ===== Responsive split features blocks layouts ===== */
@media (max-width: 900px) {
    /* Split on mobile: LEFT HALF first (top), RIGHT HALF second (bottom) */
    .feature-split__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto var(--split-transition-size) auto;
    }

    .feature-split__left  { order: 1; }
    .feature-split__right { order: 3; }

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

    .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;
    }
}

/* ===== 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{
    display: none !important;
}
.no-gradients .feature-split__transition{
    display: none !important;
}
.no-gradients .feature-split__inner{
    grid-template-columns: 1fr 1fr !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;
    }
}