/* ==========================================================================
   1C Design System 2026 — токены
   Источник: Figma «1C Design system 2026» (qlnB84l1vweJBwhrpkSp6S)
   Только переменные (:root). Брейкпоинты: mobile (base), tablet 700px, desktop 1200px.
   ========================================================================== */

/* Шрифты — Google Sans (self-host, вариативный woff2, ось 400–700) */
@font-face {
    font-family: 'Google Sans';
    src: url('../../fonts/GoogleSans/GoogleSans-cyrillic.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Google Sans';
    src: url('../../fonts/GoogleSans/GoogleSans-cyrillic-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Google Sans';
    src: url('../../fonts/GoogleSans/GoogleSans-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Google Sans';
    src: url('../../fonts/GoogleSans/GoogleSans-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Google Sans';
    src: url('../../fonts/GoogleSans/GoogleSans-symbols.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}

/* ==========================================================================
   Reset — обнуление дефолтных отступов
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    /* --- Шрифт ---------------------------------------------------------- */
    --font-google-sans: 'Google Sans', Arial, sans-serif;
    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* --- Примитивы (шкала значений) ------------------------------------- */
    --primitive0: 0;
    --primitive1: 1px;
    --primitive1_5: 1.5px;
    --primitive2: 2px;
    --primitive3: 3px;
    --primitive4: 4px;
    --primitive6: 6px;
    --primitive8: 8px;
    --primitive10: 10px;
    --primitive12: 12px;
    --primitive14: 14px;
    --primitive15: 15px;
    --primitive16: 16px;
    --primitive18: 18px;
    --primitive20: 20px;
    --primitive24: 24px;
    --primitive25: 25px;
    --primitive28: 28px;
    --primitive30: 30px;
    --primitive32: 32px;
    --primitive35: 35px;
    --primitive38: 38px;
    --primitive40: 40px;
    --primitive42: 42px;
    --primitive45: 45px;
    --primitive48: 48px;
    --primitive50: 50px;
    --primitive56: 56px;
    --primitive64: 64px;
    --primitive65: 65px;
    --primitive72: 72px;
    --primitive75: 75px;
    --primitive80: 80px;
    --primitive85: 85px;
    --primitive90: 90px;
    --primitive100: 100px;
    --primitive120: 120px;
    --primitive160: 160px;
    --primitive200: 200px;
    --primitive220: 220px;

    /* --- Размеры шрифтов (mobile) --------------------------------------- */
    --font-promo: 32px;
    --font-h1: 32px;
    --font-h2: 24px;
    --font-h3: 18px;
    --font-h4: 16px;           /* Titles/H4 mobile = 16 (Figma «Сервисы 1С» 320) */
    --font-body-large: 18px;
    --font-body-normal: 16px;
    --font-body-medium: 14px;
    --font-body-small: 14px;
    --font-ui-normal: 18px;
    --font-ui-small: 14px;
    --font-button-normal: 18px;
    --font-button-small: 14px;
    --font-caption: 12px;

    /* --- Межстрочные ---------------------------------------------------- */
    --lh-promo: 110%;
    --lh-h1: 110%;
    --lh-h2: 110%;
    --lh-h3: 130%;
    --lh-h4: 130%;
    --lh-body: 140%;
    --lh-caption: 150%;
    --lh-button: 100%;

    /* --- Спейсинги (mobile) --------------------------------------------- */
    --space0: 0;
    --space2: 2px;
    --space4: 4px;
    --space6: 6px;
    --space8: 8px;
    --space12: 12px;
    --space14: 14px;
    --space16: 16px;
    --space18: 18px;
    --space24: 18px;
    --space32: 24px;
    --space48: 42px;
    --space64: 48px;
    --space120: 64px;

    /* --- Углы (adaptives) ----------------------------------------------- */
    --corner0: 0;
    --corner1: 4px;
    --corner2: 8px;
    --corner3: 10px;
    --corner4: 12px;
    --corner5: 16px;
    --corner6: 24px;
    --corner7: 32px;

    /* --- Иконки --------------------------------------------------------- */
    --icon-size-large: 48px;
    --icon-size-normal: 24px;
    --icon-size-small: 16px;
    --icon-stroke-large: 4px;
    --icon-stroke-normal: 2px;
    --icon-stroke-small: 1px;

    /* --- Тени (цвет uni-colors/neutral/neutral-0 @16%) ------------------ */
    --shadow-small: 0 8px 8px rgba(46, 46, 60, 0.16);
    --shadow-normal: 0 8px 16px rgba(46, 46, 60, 0.16);
    --shadow-large: 0 16px 32px rgba(46, 46, 60, 0.16);
    --shadow-extra-large: 0 32px 64px rgba(46, 46, 60, 0.16);

    /* --- Blur ----------------------------------------------------------- */
    --blur-8: blur(4px);
    --blur-16: blur(8px);
    --blur-32: blur(16px);
    --blur-64: blur(32px);

    /* --- Glass (blur + заливка white 25%) ------------------------------- */
    /* blur-значение не отдаётся экспортом Figma — синхронизировано с blur-шкалой */
    --glass-8: blur(4px);
    --glass-16: blur(8px);
    --glass-32: blur(16px);
    --glass-64: blur(32px);

    /* --- Обводки -------------------------------------------------------- */
    --stroke-1: 1px;
    --stroke-2: 2px;
    --stroke-3: 3px;
    --stroke-4: 4px;
    --stroke-dash: dashed;

    /* --- Цвета: текст --------------------------------------------------- */
    --text-colors-titles: #2e2e3c;
    --text-colors-titles-on-color: #ffffff;
    --text-colors-titles-opacity75: rgba(46, 46, 60, 0.75);
    --text-colors-body-1: #4c4c59;
    --text-colors-body-2: #8d8da8;
    --text-colors-muted: #c8c8da;
    --text-colors-accent-blue: #498ef5;

    /* --- Цвета: фоны ---------------------------------------------------- */
    --bg-colors-white-white-100: #ffffff;
    --bg-colors-white-white-opacity16: rgba(255, 255, 255, 0.16);
    --bg-colors-white-white-opacity25: rgba(255, 255, 255, 0.25);
    --bg-colors-white-white-opacity50: rgba(255, 255, 255, 0.50);

    --bg-colors-neutral-neutral-0: #2e2e3c;
    --bg-colors-neutral-neutral-1: #4c4c59;
    --bg-colors-neutral-neutral-2: #8d8da8;
    --bg-colors-neutral-neutral-3: #cbcbe0;
    --bg-colors-neutral-neutral-4: #d8d8e7;
    --bg-colors-neutral-neutral-5: #e8e8ee;
    --bg-colors-neutral-neutral-6: #f4f4f6;
    --bg-colors-neutral-neutral-7: #f4f4f9; /* по экспорту; в макете было #f1f1f6 */

    --bg-colors-red-red-3: #f03b5c;
    --bg-colors-red-red-7: #fcf0f3;
    --bg-colors-blue-blue-2: #498ef5;
    --bg-colors-blue-blue-7: #edf4fe;
    --bg-colors-yellow-yellow-3: #ffd643;
    --bg-colors-yellow-yellow-7: #fffbec;
    --bg-colors-green-green-3: #58c755;
    --bg-colors-green-green-7: #eef9ee;

    /* --- Цвета: универсальные ------------------------------------------- */
    --uni-colors-white-white-100: #ffffff;
    --uni-colors-white-white-opacity50: rgba(255, 255, 255, 0.50);
    --uni-colors-white-white-opacity75: rgba(255, 255, 255, 0.75);

    --uni-colors-neutral-neutral-0: #2e2e3c;
    --uni-colors-neutral-neutral-1: #4c4c59;
    --uni-colors-neutral-neutral-2: #8d8da8;
    --uni-colors-neutral-neutral-3: #cbcbe0;
    --uni-colors-neutral-neutral-4: #d8d8e7;
    --uni-colors-neutral-neutral-5: #e8e8ee;
    --uni-colors-neutral-neutral-6: #f4f4f6;
    --uni-colors-neutral-neutral-7: #f4f4f9;
    --uni-colors-neutral-neutral-muted: #9c9cb7;
    --uni-colors-neutral-neutral-0-opacity16: rgba(46, 46, 60, 0.16);

    --uni-colors-red-red-0: #4a121c;
    --uni-colors-red-red-1: #912338;
    --uni-colors-red-red-2: #d1053b;
    --uni-colors-red-red-3: #f03b5c;
    --uni-colors-red-red-4: #f9b1be;
    --uni-colors-red-red-5: #fcd8de;
    --uni-colors-red-red-6: #fdebef;
    --uni-colors-red-red-7: #fcf0f3;

    --uni-colors-blue-blue-0: #173158;
    --uni-colors-blue-blue-1: #2c599b;
    --uni-colors-blue-blue-2: #498ef5;
    --uni-colors-blue-blue-3: #92bbf9;
    --uni-colors-blue-blue-4: #b6d2fb;
    --uni-colors-blue-blue-5: #c8ddfc;
    --uni-colors-blue-blue-6: #dbe8fd;
    --uni-colors-blue-blue-7: #edf4fe;

    --uni-colors-yellow-yellow-0: #483b0d;
    --uni-colors-yellow-yellow-1: #a38828;
    --uni-colors-yellow-yellow-2: #d1af36;
    --uni-colors-yellow-yellow-3: #ffd643;
    --uni-colors-yellow-yellow-4: #ffe772;
    --uni-colors-yellow-yellow-5: #fdf49c;
    --uni-colors-yellow-yellow-6: #fff3c7;
    --uni-colors-yellow-yellow-7: #fffbec;

    --uni-colors-green-green-0: #122811;
    --uni-colors-green-green-1: #357733;
    --uni-colors-green-green-2: #469f44;
    --uni-colors-green-green-3: #58c755;
    --uni-colors-green-green-4: #9bdd99;
    --uni-colors-green-green-5: #c1eec0;
    --uni-colors-green-green-6: #def4dd;
    --uni-colors-green-green-7: #eef9ee;

    /* --- Цвета: обводки ------------------------------------------------- */
    --stroke-colors-neutral-0: #2e2e3c;
    --stroke-colors-neutral-1: #cbcbe0;
    --stroke-colors-neutral-2: #f4f4f6;
    --stroke-colors-white-100: #ffffff;
    --stroke-colors-white-opacity16: rgba(255, 255, 255, 0.16);

    /* --- Компонент «Кнопка» (Figma: UI elements/Button) ----------------- */
    --button-bg-primary: var(--uni-colors-red-red-3);
    --button-bg-primary-hover: var(--uni-colors-red-red-2);
    --button-bg-black: var(--uni-colors-neutral-neutral-1);
    --button-bg-black-hover: var(--uni-colors-neutral-neutral-0);
    --button-bg-muted: var(--uni-colors-neutral-neutral-muted);
    --button-text-primary: var(--uni-colors-white-white-100);
    --button-text-secondary: var(--uni-colors-red-red-3);
    --button-text-secondary-hover: var(--uni-colors-red-red-2);
    --button-stroke-secondary: var(--uni-colors-red-red-3);
    --button-stroke-secondary-hover: var(--uni-colors-red-red-2);
    --button-text-black-secondary: var(--uni-colors-neutral-neutral-1);
    --button-text-black-secondary-hover: var(--uni-colors-neutral-neutral-0);
    --button-stroke-black-secondary: var(--uni-colors-neutral-neutral-1);
    --button-stroke-black-secondary-hover: var(--uni-colors-neutral-neutral-0);
    --button-text-muted: var(--uni-colors-neutral-neutral-6);
    --button-stroke-muted: var(--uni-colors-neutral-neutral-muted);

    /* --- Эффекты «Кнопка» (Figma: Style red/black/muted button) --------- */
    --button-shadow-primary: inset 4px 4px 16px #f9b1be, inset -4px -4px 16px #912338;
    --button-shadow-primary-hover-inset: inset 4px 4px 12px #f9b1be, inset -4px -4px 12px #912338;
    --button-shadow-primary-hover-glow: 0 24px 48px rgba(240, 59, 92, 0.24), 0 0 0 6px rgba(240, 59, 92, 0.16);
    --button-shadow-primary-hover: var(--button-shadow-primary-hover-inset), var(--button-shadow-primary-hover-glow);
    --button-shadow-black: inset 4px 4px 12px #8d8da8, inset -4px -4px 12px #2e2e3c;
    --button-shadow-black-hover-inset: inset 4px 4px 12px #8d8da8, inset -4px -4px 12px #0f0f15;
    --button-shadow-black-hover-glow: 0 24px 48px rgba(46, 46, 60, 0.32), 0 0 0 6px rgba(46, 46, 60, 0.16);
    --button-shadow-black-hover: var(--button-shadow-black-hover-inset), var(--button-shadow-black-hover-glow);
    --button-shadow-muted: inset 4px 4px 12px #c5c5d0, inset -4px -4px 12px #737380;

    /* --- Геометрия «Кнопка» --------------------------------------------- */
    --button-height-normal: 54px;
    --button-height-small: 36px;
    --button-radius: 16px; /* из переменной Figma 16 — подлежит уточнению */
    --button-radius-small: 12px; /* из переменной Figma 12 — подлежит уточнению */
    --stroke-1_5: var(--primitive1_5);

    /* --- Компонент «Инпуты» (Figma: UI elements/Input) ------------------ */
    --input-bg: var(--bg-colors-white-white-100);
    --input-bg-muted: var(--uni-colors-neutral-neutral-6); /* #f4f4f6 */
    --input-stroke: #c8c8da;
    --input-stroke-active: var(--uni-colors-blue-blue-2); /* #498ef5 */
    --input-stroke-error: var(--uni-colors-red-red-3); /* #f03b5c */
    --input-stroke-muted: var(--uni-colors-neutral-neutral-3); /* #cbcbe0 */
    --input-text-placeholder: var(--uni-colors-neutral-neutral-4); /* #d8d8e7 */
    --input-text-value: var(--uni-colors-neutral-neutral-0); /* #2e2e3c */
    --input-text-error: var(--uni-colors-red-red-2); /* #d1053b */
    --input-height: 54px;
    --input-textarea-height: 104px;
}

/* Tablet */
@media (min-width: 700px) {
    :root {
        --font-promo: 48px;
        --font-h1: 42px;
        --font-h2: 32px;
        --font-h3: 24px;
        --font-h4: 18px;           /* Titles/H4 tablet = 18 */
        --font-body-large: 24px;
        --font-body-normal: 18px;
        --font-body-medium: 16px;
        --font-body-small: 14px;
        --font-ui-normal: 20px;
        --font-ui-small: 16px;
        --font-button-normal: 20px;
        --font-button-small: 16px;
        --font-caption: 12px;

        --space24: 18px;
        --space32: 32px;
        --space48: 48px;
        --space64: 64px;
        --space120: 90px;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    :root {
        --font-promo: 64px;
        --font-h1: 48px;
        --font-h2: 32px;
        --font-h3: 24px;
        --font-h4: 18px;
        --font-body-large: 24px;
        --font-body-normal: 18px;
        --font-body-medium: 16px;
        --font-body-small: 14px;
        --font-ui-normal: 24px;
        --font-ui-small: 16px;
        --font-button-normal: 24px;
        --font-button-small: 16px;
        --font-caption: 12px;

        --space24: 24px;
        --space32: 32px;
        --space48: 48px;
        --space64: 64px;
        --space120: 120px;

        --corner3: 12px;
        --corner4: 16px;
        --corner5: 24px;
        --corner6: 32px;
        --corner7: 48px;
    }
}

/* ==========================================================================
   Утилиты
   Именование — как в ds2025; адаптив — _tb (>=700) и _dt (>=1200).
   ========================================================================== */

/* Layout */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.w100 { width: 100%; }
.h100 { height: 100%; }
.mw1180 { max-width: 1180px; }
.relative { position: relative; }
.sticky { position: sticky; top: 0; }
.overflow_clip { overflow: clip; }
.hidden { display: none; }

/* Отступы */
.space0 { margin-bottom: var(--space0); }
.space2 { margin-bottom: var(--space2); }
.space4 { margin-bottom: var(--space4); }
.space6 { margin-bottom: var(--space6); }
.space8 { margin-bottom: var(--space8); }
.space12 { margin-bottom: var(--space12); }
.space14 { margin-bottom: var(--space14); }
.space16 { margin-bottom: var(--space16); }
.space18 { margin-bottom: var(--space18); }
.space24 { margin-bottom: var(--space24); }
.space32 { margin-bottom: var(--space32); }
.space48 { margin-bottom: var(--space48); }
.space64 { margin-bottom: var(--space64); }
.space120 { margin-bottom: var(--space120); }

/* Паддинги (адаптивные) */
.pad24_48 { padding: 24px; }         /* 24 (mobile) → 48 (tablet+) */

/* Скругления */
.corner0 { border-radius: var(--corner0); }
.corner1 { border-radius: var(--corner1); }
.corner2 { border-radius: var(--corner2); }
.corner3 { border-radius: var(--corner3); }
.corner4 { border-radius: var(--corner4); }
.corner5 { border-radius: var(--corner5); }
.corner6 { border-radius: var(--corner6); }
.corner7 { border-radius: var(--corner7); }

/* Обводки */
.stroke0 { border: none; }
.stroke1 { border: var(--stroke-1) solid var(--stroke-colors-neutral-1); }
.stroke2 { border: var(--stroke-2) solid var(--stroke-colors-neutral-1); }
.stroke3 { border: var(--stroke-3) solid var(--stroke-colors-neutral-1); }
.stroke4 { border: var(--stroke-4) solid var(--stroke-colors-neutral-1); }
.stroke_dash { border-style: dashed; }
.stroke_bottom { border-bottom: var(--stroke-1) solid var(--stroke-colors-neutral-1); }

/* Типографика */
.txt, .txt_large, .txt_medium, .txt_small, .txt_caption,
.txt_promo, .h1, .h2, .h3, .h4 {
    font-family: var(--font-google-sans);
    text-decoration: none;
}
.txt { font-size: var(--font-body-normal); line-height: var(--lh-body); font-weight: var(--fw-regular); color: var(--text-colors-body-1); }
.txt_large { font-size: var(--font-body-large); line-height: var(--lh-body); }
.txt_medium { font-size: var(--font-body-medium); line-height: var(--lh-body); }
.txt_small { font-size: var(--font-body-small); line-height: var(--lh-body); }
.txt_caption { font-size: var(--font-caption); line-height: var(--lh-caption); }
.txt_promo { font-size: var(--font-promo); line-height: var(--lh-promo); font-weight: var(--fw-semibold); color: var(--text-colors-titles); }
.h1 { font-size: var(--font-h1); line-height: var(--lh-h1); font-weight: var(--fw-semibold); color: var(--text-colors-titles); }
.h2 { font-size: var(--font-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); color: var(--text-colors-titles); }
.h3 { font-size: var(--font-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); color: var(--text-colors-titles); }
.h4 { font-size: var(--font-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); color: var(--text-colors-titles); }
b, strong { font-weight: var(--fw-bold) !important; }
i { font-style: italic; }
.txt_underline, .txt_link { text-decoration: underline; text-decoration-style: solid; text-decoration-thickness: auto; text-underline-offset: auto; }
.link_overflow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.wrap_balance { text-wrap: balance; }
.wrap_pretty { text-wrap: pretty; }

.txt_left { text-align: left; }
.txt_center { text-align: center; }
.txt_right { text-align: right; }

/* Цвет текста */
.txt_title { color: var(--text-colors-titles); }
.txt_body { color: var(--text-colors-body-1); }
.txt_body2 { color: var(--text-colors-body-2); }
.txt_muted { color: var(--text-colors-muted); }
.txt_white { color: var(--uni-colors-white-white-100); }
.txt_white_op75 { color: var(--uni-colors-white-white-opacity75); }
.txt_white_op50 { color: var(--uni-colors-white-white-opacity50); }
.txt_body_on_color { color: var(--uni-colors-neutral-neutral-3); }
.txt_title_op75 { color: var(--text-colors-titles-opacity75); }
.txt_title_on_color { color: var(--text-colors-titles-on-color); }
.txt_accent_blue { color: var(--text-colors-accent-blue); }
.txt_link { color: var(--uni-colors-blue-blue-2); }

/* Фоны */
.bg_white { background-color: var(--bg-colors-white-white-100); }
.bg_neutral0 { background-color: var(--bg-colors-neutral-neutral-0); }
.bg_neutral1 { background-color: var(--bg-colors-neutral-neutral-1); }
.bg_neutral2 { background-color: var(--bg-colors-neutral-neutral-2); }
.bg_neutral3 { background-color: var(--bg-colors-neutral-neutral-3); }
.bg_neutral4 { background-color: var(--bg-colors-neutral-neutral-4); }
.bg_neutral5 { background-color: var(--bg-colors-neutral-neutral-5); }
.bg_neutral6 { background-color: var(--bg-colors-neutral-neutral-6); }
.bg_neutral7 { background-color: var(--bg-colors-neutral-neutral-7); }
.bg_black { background-color: var(--uni-colors-neutral-neutral-0); }
.bg_blue_lite { background-color: var(--bg-colors-blue-blue-7); }
.bg_blue_strong { background-color: var(--bg-colors-blue-blue-2); }
.bg_red_lite { background-color: var(--bg-colors-red-red-7); }
.bg_red_strong { background-color: var(--bg-colors-red-red-3); }
.bg_yellow_lite { background-color: var(--bg-colors-yellow-yellow-7); }
.bg_yellow_strong { background-color: var(--bg-colors-yellow-yellow-3); }
.bg_green_lite { background-color: var(--bg-colors-green-green-7); }
.bg_green_strong { background-color: var(--bg-colors-green-green-3); }

/* Цвет обводок */
.stroke_neutral0 { border-color: var(--stroke-colors-neutral-0); }
.stroke_neutral1 { border-color: var(--stroke-colors-neutral-1); }
.stroke_neutral2 { border-color: var(--stroke-colors-neutral-2); }
.stroke_white { border-color: var(--stroke-colors-white-100); }
.stroke_lite { border-color: var(--stroke-colors-neutral-2); }

/* Тени */
.shadow_small { box-shadow: var(--shadow-small); }
.shadow_normal { box-shadow: var(--shadow-normal); }
.shadow_large { box-shadow: var(--shadow-large); }
.shadow_extra-large { box-shadow: var(--shadow-extra-large); }

/* Blur / Glass */
.blur_small { backdrop-filter: var(--blur-8); }
.blur_medium { backdrop-filter: var(--blur-16); }
.blur_normal { backdrop-filter: var(--blur-32); }
.blur_large { backdrop-filter: var(--blur-64); }
.glass_small { backdrop-filter: var(--glass-8); background-color: var(--bg-colors-white-white-opacity25); }
.glass_medium { backdrop-filter: var(--glass-16); background-color: var(--bg-colors-white-white-opacity25); }
.glass_normal { backdrop-filter: var(--glass-32); background-color: var(--bg-colors-white-white-opacity25); }
.glass_large { backdrop-filter: var(--glass-64); background-color: var(--bg-colors-white-white-opacity25); }

/* Flex */
.flex { display: flex; }
.inline_flex { display: inline-flex; }
.flex_wrap { flex-wrap: wrap; }
.flex_shrink0 { flex-shrink: 0; }
.flex_column { flex-direction: column; }
.flex_row { flex-direction: row; }
.align_start { align-items: flex-start; }
.align_center { align-items: center; }
.align_end { align-items: flex-end; }
.justify_start { justify-content: flex-start; }
.justify_center { justify-content: center; }
.justify_end { justify-content: flex-end; }
.space_between { justify-content: space-between; }

/* Grid */
.grid { display: grid; }
.grid1col { grid-template-columns: 1fr; }
.grid2col { grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3col { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid4col { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }
.gridcol_span2 { grid-column: span 2; }

/* Gap */
.gap0 { gap: var(--space0); }
.gap2 { gap: var(--space2); }
.gap4 { gap: var(--space4); }
.gap6 { gap: var(--space6); }
.gap8 { gap: var(--space8); }
.gap12 { gap: var(--space12); }
.gap14 { gap: var(--space14); }
.gap16 { gap: var(--space16); }
.gap18 { gap: var(--space18); }
.gap24 { gap: var(--space24); }
.gap32 { gap: var(--space32); }
.gap48 { gap: var(--space48); }
.gap64 { gap: var(--space64); }
.gap120 { gap: var(--space120); }
.gap2px { gap: 2px; }
.gap4px { gap: 4px; }
.gap6px { gap: 6px; }
.gap8px { gap: 8px; }
.gap10px { gap: 10px; }
.gap12px { gap: 12px; }
.gap14px { gap: 14px; }
.gap16px { gap: 16px; }
.gap18px { gap: 18px; }
.gap20px { gap: 20px; }
.gap22px { gap: 22px; }
.gap24px { gap: 24px; }
.gap28px { gap: 28px; }
.gap30px { gap: 30px; }
.gap32px { gap: 32px; }
.gap38px { gap: 38px; }
.gap40px { gap: 40px; }
.gap42px { gap: 42px; }
.gap48px { gap: 48px; }
.gap56px { gap: 56px; }
.gap64px { gap: 64px; }

/* Tablet */
@media (min-width: 700px) {
    .container {
        padding-left: 42px;
        padding-right: 42px;
    }
    .pad24_48 { padding: 48px; }
    .txt_left_tb { text-align: left; }
    .txt_center_tb { text-align: center; }
    .txt_right_tb { text-align: right; }
    .hidden_tb { display: none; }
    .shown_tb { display: block; }
    .flex_tb { display: flex; }
    .inline_flex_tb { display: inline-flex; }
    .flex_column_tb { flex-direction: column; }
    .flex_row_tb { flex-direction: row; }
    .align_center_tb { align-items: center; }
    .space_between_tb { justify-content: space-between; }
    .justify_center_tb { justify-content: center; }
    .grid_tb { display: grid; }
    .grid2col_tb { grid-template-columns: 1fr 1fr; gap: 16px; }
    .grid3col_tb { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
    .grid4col_tb { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }
    .gridcol_span2_tb { grid-column: span 2; }
}

/* Desktop */
@media (min-width: 1200px) {
    .container {
        max-width: 1264px;
        padding-left: 42px;
        padding-right: 42px;
    }
    .txt_left_dt { text-align: left; }
    .txt_center_dt { text-align: center; }
    .txt_right_dt { text-align: right; }
    .hidden_dt { display: none; }
    .shown_dt { display: block; }
    .flex_dt { display: flex; }
    .inline_flex_dt { display: inline-flex; }
    .flex_column_dt { flex-direction: column; }
    .flex_row_dt { flex-direction: row; }
    .align_center_dt { align-items: center; }
    .space_between_dt { justify-content: space-between; }
    .justify_center_dt { justify-content: center; }
    .grid_dt { display: grid; }
    .grid2col_dt { grid-template-columns: 1fr 1fr; gap: 24px; }
    .grid3col_dt { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
    .grid4col_dt { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; }
    .gridcol_span2_dt { grid-column: span 2; }
    .grid2col, .grid3col, .grid4col { gap: 24px; }
}

@media (max-width: 699px) {
    .hidden_xs { display: none; }
}

/* ==========================================================================
   Компоненты: Кнопка
   Источник: Figma «1C Design system 2026» → узел «↳ Кнопки» (10501:1284)
   ========================================================================== */

button, input[type="submit"] {
    border: none;
    background: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.button, .button_line, .button_tertiary {
    font-family: var(--font-google-sans);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-button);
    color: var(--button-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space12);
    flex-shrink: 0;
    box-sizing: border-box;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
/* .is_hover — принудительное состояние hover (для витрин/демо) */
.button, .button_line {
    font-size: var(--font-button-normal);
    height: var(--button-height-normal);
    padding: 0 24px;
    border-radius: var(--button-radius);
}
/* Кнопка с иконкой: метка отступает 24 слева, иконка — 15 справа и в gap (Figma: padding 12 + текстовый бокс 12; иконка 24 в боксе 30) */
.button:not(.button_small):has(> svg:not(:only-child)),
.button_line:not(.button_small):has(> svg:not(:only-child)) {
    gap: 15px;
    padding-right: 15px;
}
.button > svg, .button_line > svg, .button_tertiary > svg {
    flex-shrink: 0;
    width: var(--icon-size-normal);
    height: var(--icon-size-normal);
}
.button_small {
    font-size: var(--font-button-small);
    height: var(--button-height-small);
    padding: 0 var(--space8);
    gap: var(--space8);
    border-radius: var(--button-radius-small);
}
.button_small > svg {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
}
.button_stretch {
    width: 100%;
}

/* Кнопка красная (primary) */
.button.button_red {
    background: var(--button-bg-primary);
    color: var(--button-text-primary);
    box-shadow: var(--button-shadow-primary);
}
.button.button_red:hover, .button.button_red.is_hover {
    background: var(--button-bg-primary-hover);
    box-shadow: var(--button-shadow-primary-hover);
}
.button_line.button_red {
    color: var(--button-text-secondary);
    border: var(--stroke-2) solid var(--button-stroke-secondary);
}
.button_line.button_red:hover, .button_line.button_red.is_hover {
    color: var(--button-text-secondary-hover);
    border-color: var(--button-stroke-secondary-hover);
    box-shadow: var(--button-shadow-primary-hover-glow);
}
.button_tertiary.button_red {
    color: var(--button-text-secondary);
}
.button_tertiary.button_red:hover, .button_tertiary.button_red.is_hover {
    color: var(--button-text-secondary-hover);
}

/* Кнопка чёрная (primary black) */
.button.button_black {
    background: var(--button-bg-black);
    color: var(--button-text-primary);
    box-shadow: var(--button-shadow-black);
}
.button.button_black:hover, .button.button_black.is_hover {
    background: var(--button-bg-black-hover);
    box-shadow: var(--button-shadow-black-hover);
}
.button_line.button_black {
    color: var(--button-text-black-secondary);
    border: var(--stroke-2) solid var(--button-stroke-black-secondary);
}
.button_line.button_black:hover, .button_line.button_black.is_hover {
    color: var(--button-text-black-secondary-hover);
    border-color: var(--button-stroke-black-secondary-hover);
    box-shadow: var(--button-shadow-black-hover-glow);
}
.button_tertiary.button_black {
    color: var(--button-text-black-secondary);
}
.button_tertiary.button_black:hover, .button_tertiary.button_black.is_hover {
    color: var(--button-text-black-secondary-hover);
}

/* Меньшая обводка у small-версии */
.button_line.button_small {
    border-width: var(--stroke-1_5);
}

/* Отключённая кнопка (muted) */
.button:disabled, .button[href=""], a.button:not([href]), .button.button_disabled {
    background: var(--button-bg-muted) !important;
    color: var(--button-text-muted) !important;
    box-shadow: var(--button-shadow-muted) !important;
    cursor: default;
}
.button_line:disabled, .button_line[href=""], a.button_line:not([href]), .button_line.button_disabled {
    color: var(--button-stroke-muted) !important;
    border-color: var(--button-stroke-muted) !important;
    box-shadow: none !important;
    cursor: default;
}
.button_tertiary:disabled, .button_tertiary[href=""], a.button_tertiary:not([href]), .button_tertiary.button_disabled {
    color: var(--button-text-muted) !important;
    cursor: default;
}

/* ==========================================================================
   Компоненты: Инпуты
   Источник: Figma «1C Design system 2026» → узлы
   Input (10593:6713), Text Area (10593:6759), Search (10593:6803).
   Геометрия фиксированная (54 / 104), radius — хардкод 16px.
   ========================================================================== */

/* Обёртка поля: подпись + контрол + подсказка/ошибка */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space8);
    width: 100%;
}
.field_label,
.field_hint,
.field_error {
    font-family: var(--font-google-sans);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
}
.field_label {
    font-size: var(--font-body-medium);
    color: var(--text-colors-body-2);
}
.field_hint {
    font-size: var(--font-body-small);
    color: var(--text-colors-muted);
}
.field_error {
    display: flex;
    align-items: center;
    gap: var(--space8);
    font-size: var(--font-body-small);
    color: var(--input-text-error);
}
.field_error > svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* Поле ввода (обёртка с иконкой) и textarea */
.input,
.textarea {
    box-sizing: border-box;
    width: 100%;
    font-family: var(--font-google-sans);
    background-color: var(--input-bg);
    border: var(--stroke-2) solid var(--input-stroke);
    border-radius: 16px;
    transition: border-color 0.2s, background-color 0.2s;
}
.input {
    display: flex;
    align-items: center;
    gap: var(--space8);
    height: var(--input-height);
    padding: 0 var(--space16);
}
.textarea {
    display: block;
    min-height: var(--input-textarea-height);
    padding: var(--space16);
    font-size: var(--font-ui-normal);
    line-height: var(--lh-body);
    color: var(--input-text-value);
    outline: none;
    resize: vertical;
}
.input_icon {
    flex-shrink: 0;
    width: var(--icon-size-normal);
    height: var(--icon-size-normal);
    color: var(--input-text-placeholder);
}
.input_control {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-google-sans);
    font-size: var(--font-ui-normal);
    line-height: 100%;
    color: var(--input-text-value);
    outline: none;
}
.input_control::placeholder,
.textarea::placeholder {
    color: var(--input-text-placeholder);
}

/* Кнопка очистки внутри поля поиска */
.input_clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--icon-size-normal);
    height: var(--icon-size-normal);
    color: var(--button-text-black-secondary);
    cursor: pointer;
}
.input_clear > svg {
    width: 100%;
    height: 100%;
}
.input_search:has(.input_clear) {
    padding-right: var(--space8);
}

/* Состояния: hover и focus дают активную (синюю) обводку */
.input:hover,
.input.is_hover,
.input.is_focus,
.input:focus-within,
.textarea:hover,
.textarea.is_hover,
.textarea.is_focus,
.textarea:focus {
    border-color: var(--input-stroke-active);
}

/* Ошибка */
.input_error,
.input_error:hover,
.input_error.is_hover,
.input_error.is_focus,
.input_error:focus-within {
    border-color: var(--input-stroke-error);
}

/* Неактивное (muted) поле */
.input_muted,
.input_muted:hover,
.input_muted.is_hover,
.input_muted.is_focus,
.input_muted:focus-within {
    background-color: var(--input-bg-muted);
    border-color: var(--input-stroke-muted);
    cursor: default;
}
.input_muted .input_control {
    pointer-events: none;
    color: var(--input-text-placeholder);
}

/* ==========================================================================
   Компоненты: Контролы (чекбокс, радио, переключатель)
   Источник: Figma «1C Design system 2026» → узел «Контролы» (10562:14905).
   Цвета — токены Button / Uni Neutral. Обёртка = label, нативный инпут скрыт.
   ========================================================================== */

.form_checkbox,
.form_radio,
.form_switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space8);
    width: fit-content;
    font-family: var(--font-google-sans);
    font-size: var(--font-body-medium);
    line-height: var(--lh-body);
    color: var(--text-colors-body-1);
    cursor: pointer;
}

/* Неактивный контрол: без hover, курсор по умолчанию */
.form_checkbox:has(.form_checkbox_input:disabled),
.form_radio:has(.form_radio_input:disabled),
.form_switcher:has(.form_switcher_input:disabled) {
    cursor: default;
}

.form_checkbox_input,
.form_radio_input,
.form_switcher_input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Контейнер ошибки — скрыт, показывается при флаге ошибки на обёртке */
.form_checkbox_error_text,
.form_radio_error_text,
.form_switcher_error_text {
    display: none;
    width: 100%;
    font-size: var(--font-body-small);
    color: var(--input-text-error);
}
.form_checkbox_error .form_checkbox_error_text,
.form_radio_error .form_radio_error_text,
.form_switcher_error .form_switcher_error_text {
    display: block;
}

/* Общий отклик фокуса (в макете нет — добавлено для доступности) */
.form_checkbox_input:focus-visible + .form_checkbox_control,
.form_radio_input:focus-visible + .form_radio_control,
.form_switcher_input:focus-visible + .form_switcher_control {
    box-shadow: 0 0 0 3px rgba(73, 142, 245, 0.35);
}

/* --- Checkbox ------------------------------------------------------- */
.form_checkbox_control {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: var(--stroke-1_5) solid var(--button-stroke-black-secondary);
    border-radius: var(--corner1);
    background-color: var(--uni-colors-white-white-100);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    transition: background-color 0.2s, border-color 0.2s;
}
.form_checkbox_input:checked + .form_checkbox_control {
    border-color: var(--button-bg-primary);
    background-color: var(--button-bg-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.form_checkbox:hover .form_checkbox_input:not(:disabled) + .form_checkbox_control,
.form_checkbox.is_hover .form_checkbox_input:not(:disabled) + .form_checkbox_control {
    border-color: var(--button-stroke-black-secondary-hover);
}
.form_checkbox:hover .form_checkbox_input:not(:disabled):checked + .form_checkbox_control,
.form_checkbox.is_hover .form_checkbox_input:not(:disabled):checked + .form_checkbox_control {
    border-color: var(--button-bg-primary-hover);
    background-color: var(--button-bg-primary-hover);
}
.form_checkbox_input:disabled + .form_checkbox_control {
    border-color: var(--button-stroke-muted);
}
.form_checkbox_input:checked:disabled + .form_checkbox_control {
    border-color: var(--button-bg-muted);
    background-color: var(--button-bg-muted);
}

/* --- Radio ---------------------------------------------------------- */
.form_radio_control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: var(--stroke-1_5) solid var(--button-stroke-black-secondary);
    border-radius: 100%;
    background-color: var(--uni-colors-white-white-100);
    transition: border-color 0.2s;
}
.form_radio_control::after {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: var(--button-bg-primary);
    transform: scale(0);
    transition: transform 0.2s, background-color 0.2s;
}
.form_radio_input:checked + .form_radio_control {
    border-color: var(--button-bg-primary);
}
.form_radio_input:checked + .form_radio_control::after {
    transform: scale(1);
}
.form_radio:hover .form_radio_input:not(:disabled) + .form_radio_control,
.form_radio.is_hover .form_radio_input:not(:disabled) + .form_radio_control {
    border-color: var(--button-stroke-black-secondary-hover);
}
.form_radio:hover .form_radio_input:not(:disabled):checked + .form_radio_control,
.form_radio.is_hover .form_radio_input:not(:disabled):checked + .form_radio_control {
    border-color: var(--button-bg-primary-hover);
}
.form_radio:hover .form_radio_input:not(:disabled):checked + .form_radio_control::after,
.form_radio.is_hover .form_radio_input:not(:disabled):checked + .form_radio_control::after {
    background-color: var(--button-bg-primary-hover);
}
.form_radio_input:disabled + .form_radio_control {
    border-color: var(--button-stroke-muted);
}
.form_radio_input:disabled + .form_radio_control::after {
    background-color: var(--button-bg-muted);
}

/* --- Switcher ------------------------------------------------------- */
.form_switcher_control {
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 48px;
    height: 24px;
    border-radius: 48px;
    background-color: var(--uni-colors-neutral-neutral-2);
    transition: background-color 0.2s;
}
.form_switcher_control::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: var(--uni-colors-white-white-100);
    transition: transform 0.2s;
}
.form_switcher_input:checked + .form_switcher_control {
    background-color: var(--button-bg-primary);
}
.form_switcher_input:checked + .form_switcher_control::after {
    transform: translateX(24px);
}
.form_switcher:hover .form_switcher_input:not(:disabled) + .form_switcher_control,
.form_switcher.is_hover .form_switcher_input:not(:disabled) + .form_switcher_control {
    background-color: var(--uni-colors-neutral-neutral-1);
}
.form_switcher:hover .form_switcher_input:not(:disabled):checked + .form_switcher_control,
.form_switcher.is_hover .form_switcher_input:not(:disabled):checked + .form_switcher_control {
    background-color: var(--button-bg-primary-hover);
}
.form_switcher_input:disabled + .form_switcher_control {
    background-color: var(--button-bg-muted);
}

/* ==========================================================================
   Компоненты: Маркеры (Marker)
   Источник: Figma «1C Design system 2026» → «Marker — спецификация» (10501:1287).
   Тип: Number / Checkmark / Alert / Denial.
   Стиль: `.marker_fill` (заливка) / `.marker_stroke` (обводка или только иконка).
   Контекст: по умолчанию — на белом; `.marker_on_color` — на цветном фоне.
   ========================================================================== */

.marker {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--primitive40);
    height: var(--primitive40);
    padding: var(--primitive8);
    border-radius: var(--primitive64);
    border: none;
    background-color: transparent;
    font-family: var(--font-google-sans);
    font-size: var(--font-body-normal);
    line-height: var(--lh-body);
    font-weight: var(--fw-bold);
    font-variant-numeric: lining-nums proportional-nums;
    color: var(--uni-colors-white-white-100);
}
.marker > svg {
    display: block;
    width: var(--icon-size-normal);
    height: var(--icon-size-normal);
}

/* Number */
.marker_number.marker_fill {
    background-color: var(--uni-colors-blue-blue-2);
}
.marker_number.marker_stroke {
    border: var(--stroke-2) solid var(--uni-colors-blue-blue-6);
    color: var(--text-colors-accent-blue);
}

/* Checkmark */
.marker_checkmark.marker_fill {
    background-color: var(--bg-colors-green-green-3);
}
.marker_checkmark.marker_stroke {
    color: var(--uni-colors-green-green-3);
}

/* Alert */
.marker_alert.marker_fill {
    background-color: var(--bg-colors-red-red-3);
}
.marker_alert.marker_stroke {
    color: var(--uni-colors-red-red-3);
}

/* Denial */
.marker_denial.marker_fill {
    background-color: var(--bg-colors-neutral-neutral-3);
}
.marker_denial.marker_stroke {
    border: var(--stroke-2) solid var(--stroke-colors-neutral-1);
    color: var(--text-colors-titles);
}

/* На цветном фоне: заливка — белая, обводка — полупрозрачно-белая */
.marker_on_color.marker_fill {
    background-color: var(--bg-colors-white-white-100);
    color: var(--text-colors-titles);
}
.marker_on_color.marker_number.marker_stroke {
    border-color: var(--uni-colors-white-white-opacity50);
    color: var(--uni-colors-white-white-100);
}
.marker_on_color.marker_checkmark.marker_stroke,
.marker_on_color.marker_alert.marker_stroke {
    color: var(--uni-colors-white-white-100);
}
.marker_on_color.marker_denial.marker_stroke {
    border-color: var(--uni-colors-white-white-opacity50);
    color: var(--uni-colors-white-white-100);
}

/* ==========================================================================
   Компоненты: Лейблы (Badge)
   Источник: Figma «1C Design system 2026» → «Badges» (10595:7373 / фрейм 10595:7374).
   Style: `.badge_light` / `.badge_strong`.
   Color: `.badge_blue` / `_black` / `_red` / `_green` / `_yellow`.
   Size: базовый (Normal) / `.badge_large`.
   ========================================================================== */

.badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space4);
    flex-shrink: 0;
    padding: var(--space2) var(--space8);
    border-radius: 12px;
    font-family: var(--font-google-sans);
    font-size: var(--font-body-small);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    font-variant-numeric: lining-nums proportional-nums;
    color: var(--text-colors-titles);
    white-space: nowrap;
}
.badge_large {
    padding: var(--space4) var(--space12);
    border-radius: 24px;
    font-size: var(--font-body-medium);
}

/* Light — светлый фон, текст Titles */
.badge_light.badge_blue {
    background-color: var(--uni-colors-blue-blue-6);
    color: var(--text-colors-titles);
}
.badge_light.badge_black {
    background-color: var(--bg-colors-neutral-neutral-5);
    color: var(--text-colors-titles);
}
.badge_light.badge_red {
    background-color: var(--uni-colors-red-red-5);
    color: var(--text-colors-titles);
}
.badge_light.badge_green {
    background-color: var(--uni-colors-green-green-5);
    color: var(--text-colors-titles);
}
.badge_light.badge_yellow {
    background-color: var(--uni-colors-yellow-yellow-6);
    color: var(--text-colors-titles);
}

/* Strong — насыщенный фон, текст белый (у жёлтого — тёмный, по макету) */
.badge_strong.badge_blue {
    background-color: var(--bg-colors-blue-blue-2);
    color: var(--uni-colors-white-white-100);
}
.badge_strong.badge_black {
    background-color: var(--bg-colors-neutral-neutral-0);
    color: var(--uni-colors-white-white-100);
}
.badge_strong.badge_red {
    background-color: var(--bg-colors-red-red-3);
    color: var(--uni-colors-white-white-100);
}
.badge_strong.badge_green {
    background-color: var(--bg-colors-green-green-3);
    color: var(--uni-colors-white-white-100);
}
.badge_strong.badge_yellow {
    background-color: var(--bg-colors-yellow-yellow-3);
    color: var(--text-colors-titles);
}

/* ==========================================================================
   Компоненты: FAQ (аккордеон)
   Источник: Figma «1C Design system 2026» → «FAQ» (10608:8044 / фрейм 10596:8129).
   Состояния: Collapsed / Hover / Expanded. Классы — легаси `.faq*`;
   раскрытие — jQuery (slideToggle), иконка plus → minus через `.faq__control_close`.
   ========================================================================== */

.faq {
    display: flex;
    flex-direction: column;
    gap: var(--space16);
}
.faq__item {
    display: flex;
    flex-direction: column;
    gap: var(--space12);
    padding: 24px; /* Figma: 24 на всех брейкпоинтах */
    background-color: var(--bg-colors-white-white-100);
    border: var(--stroke-2) solid var(--stroke-colors-neutral-2);
    border-radius: 16px; /* Figma var(--4,16px) — фикс. */
    transition: background-color 0.2s, border-color 0.2s;
}
.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space12);
    font-family: var(--font-google-sans);
    font-size: var(--font-body-large);
    line-height: var(--lh-body);
    font-weight: var(--fw-bold);
    color: var(--text-colors-titles);
    text-decoration: none;
    transition: color 0.2s;
}
.faq__control {
    flex-shrink: 0;
    width: var(--icon-size-normal);
    height: var(--icon-size-normal);
    color: var(--text-colors-titles);
    transition: color 0.2s;
}

/* Hover — только при наведении/фокусе на триггере (.is_hover — демо-состояние) */
.faq__item:has(.faq__question:hover),
.faq__item:has(.faq__question:focus-visible),
.faq__item.is_hover {
    background-color: var(--bg-colors-blue-blue-2);
    border-color: var(--bg-colors-blue-blue-2);
}
.faq__item:has(.faq__question:hover) .faq__question,
.faq__item:has(.faq__question:focus-visible) .faq__question,
.faq__item.is_hover .faq__question,
.faq__item:has(.faq__question:hover) .faq__control,
.faq__item:has(.faq__question:focus-visible) .faq__control,
.faq__item.is_hover .faq__control {
    color: var(--uni-colors-white-white-100);
}

/* Expanded — плюс превращается в минус (убираем вертикальную линию) */
.faq__control_close .faq__control_v {
    opacity: 0;
}

.faq__answer {
    padding: var(--space16);
    background-color: var(--uni-colors-neutral-neutral-6);
    border-radius: 12px; /* Figma var(--3,12px) — фикс. */
    font-family: var(--font-google-sans);
    font-size: var(--font-body-normal);
    line-height: var(--lh-body);
    color: var(--text-colors-body-1);
}
.faq__answer > *:not(:last-child) {
    margin-bottom: var(--space16);
}
.faq__answer > *:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Компоненты: Пагинация
   Источник: Figma «1C Design system 2026» → «Pagination numbers» (10596:8014).
   API: `.pagination`, `.pagination_item` (+ `_active` / `_disabled`),
   `.pagination_dots`, `.pagination_arrow`. Hover/disabled в макете не показаны — добавлены.
   ========================================================================== */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space8);
    padding: var(--space8);
}
.pagination_item,
.pagination_arrow,
.pagination_dots {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 16px; /* Figma var(--4,16px) */
    font-family: var(--font-google-sans);
    font-size: var(--font-button-small);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-button);
    color: var(--text-colors-titles);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.pagination_item {
    min-width: 32px;
    padding: 0 var(--space8);
}
.pagination_arrow {
    width: 20px;
}
.pagination_arrow > svg {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
}
.pagination_dots {
    width: 32px;
    font-size: var(--font-caption);
    font-weight: var(--fw-regular);
    cursor: default;
}

/* Hover (в макете нет — добавлено) */
.pagination_item:not(.pagination_item_active):not(.pagination_item_disabled):hover,
.pagination_arrow:not(:disabled):hover {
    background-color: var(--uni-colors-neutral-neutral-6);
}

/* Активная страница */
.pagination_item_active {
    background-color: var(--button-bg-primary);
    color: var(--uni-colors-white-white-100);
    box-shadow: var(--button-shadow-primary);
    cursor: default;
}

/* Недоступные элементы (в макете нет — добавлено) */
.pagination_item_disabled,
.pagination_item:disabled,
.pagination_arrow:disabled {
    color: var(--text-colors-muted);
    background-color: transparent;
    cursor: default;
}

/* ==========================================================================
   Компоненты: Буллеты (точки слайдера)
   Источник: Figma «1C Design system 2026» → «Pagination dots» (10596:7957).
   API: `.bullets`, `.bullets_item` (+ `_active`), `.bullets_on_color`.
   ========================================================================== */

.bullets {
    display: flex;
    align-items: center;
    gap: var(--space12);
}
.bullets_item {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: var(--bg-colors-neutral-neutral-4);
    transition: background-color 0.2s;
    cursor: pointer;
}
.bullets_item_active {
    background-color: var(--bg-colors-neutral-neutral-0);
}
a.bullets_item,
button.bullets_item {
    cursor: pointer;
}

/* На цветном фоне (в макете не показано — добавлено, требует сверки) */
.bullets_on_color .bullets_item {
    background-color: var(--uni-colors-white-white-opacity50);
}
.bullets_on_color .bullets_item_active {
    background-color: var(--uni-colors-white-white-100);
}

/* ==========================================================================
   Компоненты: Хлебные крошки
   Источник: Figma «1C Design system 2026» → «Bread crumb» (10596:7988).
   API: `.breadcrumb`, `.breadcrumb__item`, `.breadcrumb__sep`.
   Mobile (<700, 3+ пункта): первый / ... / последний, промежуточные скрыты.
   Desktop: все пункты (перенос строк). Текущий пункт — цвет `titles`.
   ========================================================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space8);
    font-family: var(--font-google-sans);
    font-size: var(--font-body-small);
    line-height: var(--lh-body);
    color: var(--text-colors-body-2);
}
.breadcrumb__item {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
a.breadcrumb__item:hover,
a.breadcrumb__item.is_hover { /* .is_hover — демо-хелпер */
    color: var(--text-colors-titles);
}
.breadcrumb__sep {
    color: var(--text-colors-body-2);
}
.breadcrumb__item:last-child {
    color: var(--text-colors-titles);
}
/* Отступы блока крошек на странице: 48px сверху, 24px снизу */
.breadcrumb_indent {
    padding-block: var(--primitive48) var(--primitive24);
}

/* Mobile: первый / ... / последний (промежуточные скрываются, порог 3+) */
@media (max-width: 699px) {
    .breadcrumb:has(> :nth-child(3):nth-last-child(3))
        > :nth-child(n+3):nth-last-child(n+3) {
        display: none;
    }
    .breadcrumb:has(> :nth-child(3):nth-last-child(3))
        > :nth-last-child(2)::before {
        content: '...';
        margin-right: var(--space8);
    }
}

/* ==========================================================================
   Компоненты: Вкладки (Tabs)
   Источник: Figma «1C Design system 2026» → «Tabs» (10596:7694).
   4 стиля: Underline / Pill / Segmented / Filled rectangular (× Icon / без).
   API: `.tabs` (+ `_underline` / `_pill` / `_segmented` / `_filled`),
   `.tabs__item` (+ `_active`), `.tabs__icon`.
   В макете только Desktop — на всех брейкпоинтах одни стили (перенос строк).
   ========================================================================== */

.tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space8);
}
.tabs__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space8);
    height: 44px;
    padding-inline: var(--space12);
    border: none;
    background: none;
    font-family: var(--font-google-sans);
    font-size: var(--font-body-small);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body);
    color: var(--text-colors-body-2);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.tabs__icon {
    flex-shrink: 0;
    width: var(--icon-size-normal);
    height: var(--icon-size-normal);
    color: inherit; /* иконка наследует цвет вкладки (в макете — accent, уточнить) */
}

/* Underline */
.tabs_underline {
    position: relative;
}
.tabs_underline::after { /* Baseline */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--stroke-2);
    background-color: var(--stroke-colors-neutral-1);
}
.tabs_underline .tabs__item:hover {
    color: var(--button-text-black-secondary-hover);
}
.tabs_underline .tabs__item_active {
    color: var(--text-colors-titles);
    box-shadow: inset 0 -2px 0 0 var(--input-stroke-active);
}
.tabs_underline .tabs__item_active:hover {
    box-shadow: inset 0 -2px 0 0 var(--uni-colors-blue-blue-1);
}

/* Pill */
.tabs_pill .tabs__item {
    border-radius: 999px;
}
.tabs_pill .tabs__item:hover {
    color: var(--button-text-black-secondary-hover);
}
.tabs_pill .tabs__item_active {
    border-radius: 16px; /* Figma var(--4,16px) — фикс. */
    background-color: var(--uni-colors-blue-blue-2);
    color: var(--button-text-primary);
}
.tabs_pill .tabs__item_active:hover {
    background-color: var(--uni-colors-blue-blue-1);
}

/* Segmented */
.tabs_segmented {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    padding: var(--space4);
    overflow-x: auto;
    scrollbar-width: none;            /* полоса прокрутки скрыта (Figma: overflow-clip) */
    background-color: var(--bg-colors-neutral-neutral-5);
    border-radius: 12px; /* Figma var(--3,12px) — фикс. */
}
.tabs_segmented::-webkit-scrollbar {
    display: none;
}
.tabs_segmented .tabs__item {
    flex: 0 0 206px;                  /* фикс. ширина вкладки (Figma 206px) */
    width: 206px;
    border-radius: 4px; /* Figma var(--1,4px) */
    color: var(--text-colors-body-1);
}
.tabs_segmented .tabs__item:hover {
    color: var(--button-text-black-secondary-hover);
}
.tabs_segmented .tabs__item_active {
    border-radius: 8px; /* Figma var(--2,8px) */
    background-color: var(--bg-colors-white-white-100);
    color: var(--text-colors-titles);
}
.tabs_segmented .tabs__item_active:hover {
    background-color: var(--bg-colors-white-white-100);
}

/* Filled rectangular */
.tabs_filled .tabs__item {
    border-radius: 4px; /* Figma var(--1,4px) */
}
.tabs_filled .tabs__item:hover {
    color: var(--button-text-black-secondary-hover);
}
.tabs_filled .tabs__item_active {
    border-radius: 8px; /* Figma var(--2,8px) */
    background-color: var(--uni-colors-blue-blue-2);
    color: var(--button-text-primary);
}
.tabs_filled .tabs__item_active:hover {
    background-color: var(--uni-colors-blue-blue-1);
}

/* Панели содержимого вкладок (переключение по data-атрибутам) */
.tabs_panel {
    display: none;
}
.tabs_panel.is_active {
    display: block;
}

/* ==========================================================================
   Компоненты: Баннеры (Promo)
   Источник: Figma «1C Design system 2026» → «Баннеры» (10637:10355).
   5 макетов: `.promo_form` (стеклянная панель + форма), `.promo_line` (полоса),
   `.promo_media` (заголовок + описание + кнопка + фото), `.promo_small` (короткий),
   `.promo_pic` (полоса с картинкой по центру / справа — Figma 17:5684 / 69:5098 / 69:5999).
   Цвет: `.promo_blue` / `.promo_red` / `.promo_yellow` / `.promo_gray` / `.promo_black`;
   насыщенность (только line): `.promo_strong` / `.promo_light`.
   В макете только Desktop — на mobile/tablet стек в колонку.
   ========================================================================== */

.promo_form,
.promo_line,
.promo_media,
.promo_small {
    position: relative;
    overflow: clip;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 48px; /* Figma var(--7,48px) */
}
.promo_line {
    border-radius: 32px; /* Figma var(--6,32px) */
}

/* Цвета фона (light) */
.promo_blue { background-color: var(--bg-colors-blue-blue-7); }
.promo_red { background-color: var(--bg-colors-red-red-7); }
.promo_yellow { background-color: var(--bg-colors-yellow-yellow-7); }
.promo_gray { background-color: var(--bg-colors-neutral-neutral-6); }

/* Общие элементы */
.promo__panel {
    position: relative;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    border-radius: 32px; /* Figma var(--6,32px) */
}
.promo__content {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.promo__head {
    display: flex;
    flex-direction: column;
    gap: var(--space12);
}
.promo__title {
    font-family: var(--font-google-sans);
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-semibold);
    color: var(--text-colors-titles);
}
.promo__text {
    font-family: var(--font-google-sans);
    font-size: var(--font-body-normal);
    line-height: var(--lh-body);
    color: var(--text-colors-body-1);
}
.promo__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space16);
    width: 100%;
}
/* Кнопки промо: на всю ширину по умолчанию (мобилка) */
.promo__actions .button,
.promo__form .button {
    width: 100%;
}
.promo__image {
    position: relative;
    overflow: clip;
    display: flex;
    flex-shrink: 0;
    width: 100%;
    border-radius: 16px; /* Figma var(--4,16px) */
}
.promo__image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Форма в баннере с формой */
.promo__form {
    display: flex;
    flex-direction: column;
    gap: var(--space16);
    width: 100%;
}
.promo__consent {
    display: flex;
    align-items: center;
    gap: var(--space12);
    font-family: var(--font-google-sans);
    font-size: var(--font-body-small);
    line-height: var(--lh-body);
    color: var(--text-colors-titles-opacity75);
}
.promo__consent a {
    color: var(--text-colors-titles);
}

/* --- promo_form: стеклянная панель + форма --- */
.promo_form {
    padding: 24px;
}
.promo_form .promo__panel {
    flex-direction: column;
    gap: var(--space24);
    padding: 24px;
    background-color: var(--bg-colors-white-white-opacity25);
    border: var(--stroke-2) solid var(--uni-colors-white-white-opacity75);
}
.promo_form .promo__content {
    gap: var(--space24);
}
.promo_form .promo__image {
    height: 240px;
}

/* --- promo_line: компактная полоса --- */
.promo_line {
    padding: 24px;
}
.promo_line .promo__panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.promo_line.promo_strong.promo_blue { background-color: var(--bg-colors-blue-blue-2); }
.promo_line.promo_strong.promo_red { background-color: var(--bg-colors-red-red-3); }
.promo_line.promo_strong.promo_yellow { background-color: var(--bg-colors-yellow-yellow-3); }
.promo_line.promo_black { background-color: var(--bg-colors-neutral-neutral-0); }
.promo_line.promo_black.promo_light { background-color: var(--bg-colors-neutral-neutral-6); }
.promo_line.promo_strong.promo_blue .promo__title,
.promo_line.promo_strong.promo_red .promo__title,
.promo_line.promo_black.promo_strong .promo__title {
    color: var(--text-colors-titles-on-color);
}
.promo_line.promo_strong.promo_blue .promo__text {
    color: var(--uni-colors-white-white-opacity75);
}

/* --- promo_media: заголовок + описание + кнопка + фото --- */
.promo_media {
    padding: 24px;
}
.promo_media .promo__panel {
    flex-direction: column;
    gap: var(--space24);
    padding: 32px;
}
.promo_media .promo__content {
    gap: var(--space24);
}
.promo_media .promo__image {
    height: 240px;
}

/* --- promo_small: короткий медиа-баннер --- */
.promo_small {
    padding: 24px;
}
.promo_small .promo__panel {
    flex-direction: column;
    gap: var(--space24);
    padding: 32px;
}
.promo_small .promo__content {
    gap: var(--space32);
}
.promo_small .promo__image {
    height: 200px;
}

/* --- Tablet: кнопка по контенту (если не .button_stretch) --- */
@media (min-width: 700px) {
    .promo__actions .button:not(.button_stretch),
    .promo__form .button:not(.button_stretch) {
        width: auto;
        align-self: flex-start;
    }
    .promo_line .promo__actions {
        width: auto;
    }
    .promo_line {
        padding: 32px;
    }
    .promo_line .promo__panel {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .promo_line .promo__content {
        max-width: 347px;
    }
}

/* --- Desktop --- */
@media (min-width: 1200px) {
    .promo_form .promo__panel {
        flex-direction: row;
        align-items: center;
        gap: var(--space48);
        padding: 32px;
    }
    .promo_form .promo__content {
        max-width: 550px;
    }
    .promo_form .promo__image {
        flex: 1 1 auto;
        height: 285px;
    }

    .promo_line .promo__panel {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space24);
    }
    .promo_line .promo__content {
        max-width: 668px;
    }

    .promo_media .promo__panel {
        flex-direction: row;
        align-items: center;
        gap: var(--space48);
    }
    .promo_media .promo__content {
        max-width: 550px;
        align-self: stretch;
        justify-content: space-between;
    }
    .promo_media .promo__image {
        flex: 1 1 auto;
        height: 285px;
    }

    .promo_small .promo__panel {
        flex-direction: row;
        align-items: center;
        gap: var(--space48);
    }
    .promo_small .promo__content {
        max-width: 550px;
    }
    .promo_small .promo__image {
        flex: 1 1 auto;
        align-self: stretch;
        height: auto;
    }
}

/* --- promo_pic: полоса с картинкой (Figma 17:5684 / 69:5098 / 69:5999) ---
   Mobile: заголовок + кнопка, картинка абсолютом прижата к низу по центру (h 142px), излишек обрезается.
   Tablet: картинка скрыта, заголовок слева / кнопка справа.
   Desktop: картинка абсолютом (right 211px, прижата к низу). */
.promo_pic {
    position: relative;
    overflow: clip;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 48px; /* Figma var(--7,48px) */
    padding: 24px 24px 172px;
    background-color: var(--uni-colors-red-red-6);
}
.promo_pic .promo__panel {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.promo_pic .promo__pic {
    display: block;
    position: absolute;
    right: 50%;
    bottom: 0;
    transform: translateX(50%);
    width: auto;
    max-width: none;
    height: 142px;
    margin: 0;
}
.promo_pic .promo__pic img {
    display: block;
    width: auto;
    height: 100%;
}

@media (min-width: 700px) {
    .promo_pic {
        padding: 35px 48px; /* Figma tablet */
    }
    .promo_pic .promo__panel {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .promo_pic .promo__content {
        max-width: 283px;
    }
    .promo_pic .promo__actions {
        width: auto;
    }
    .promo_pic .promo__pic {
        display: none; /* планшет: картинка скрыта */
    }
}

@media (min-width: 1200px) {
    .promo_pic {
        min-height: 140px;
        justify-content: center;
    }
    .promo_pic .promo__panel {
        position: static;
    }
    .promo_pic .promo__content {
        max-width: 424px;
    }
    .promo_pic .promo__pic {
        display: block;
        position: absolute;
        right: 211px;
        transform: unset;
        width: 596px;
        max-width: none;
        height: 140px;
        margin: 0;
    }
    .promo_pic .promo__pic img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* ==========================================================================
   Компоненты страницы «Сервис» (DS 2026)
   Источник: Figma «Сервисы 1С» (hGdlqGVVcdiCPPdRpy2eL5) → «1С:Отчетность 24».
   Вьюпорты макета: 320 (66:4788), 768 (66:4723), 1920 (1:7).
   Фото — заглушки (.hero::after / .steps__image и т.п.).
   ========================================================================== */

/* --- Hero: главный баннер сервиса (Figma «Main banner» 1:465 / 69:4857 / 69:5757) ---
   Отступы заданы явными значениями по макету: у токенов --space32/--space48 в DS2026
   перепутаны значения mobile/tablet, поэтому здесь они не применяются.
   Картинка — псевдоэлемент с фоном var(--hero_bg) (по аналогии с --promo_bg в ds2025). */
.hero {
    display: flex;
    flex-direction: column;
    gap: 42px;                 /* space48 mobile */
    padding: 24px;             /* space32 mobile */
    background-color: var(--bg-colors-blue-blue-7);
    border-radius: var(--corner7);
    overflow: clip;            /* обрезает картинку hero по скруглённым краям */
}
.hero__content {
    display: flex;
    flex-direction: column;
    gap: 32px;                 /* 32 на всех адаптивах */
    width: 100%;
}
.hero__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space24);
}
.hero__text {
    font-family: var(--font-google-sans);
    font-size: var(--font-body-normal);
    line-height: var(--lh-body);
    color: var(--text-colors-body-1);
}
.hero__badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    gap: var(--space4);
    padding: var(--space4) var(--space12);
    border-radius: var(--corner5);
    background-color: var(--uni-colors-blue-blue-6);
    font-family: var(--font-google-sans);
    font-size: var(--font-body-medium);
    line-height: var(--lh-body);
    color: var(--text-colors-titles);
}
.hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space24);       /* 18 / 18 / 24 */
    width: 100%;
}
.hero__actions .button,
.hero__actions .button_line {
    width: 100%;
}
/* Картинка hero — псевдоэлемент (фон var(--hero_bg)), чтобы не держать <img> в разметке */
.hero::after {
    content: "";
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 914 / 1000;
    border-radius: var(--corner5);
    background-image: var(--hero_bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
@media (min-width: 700px) {
    .hero {
        position: relative;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        gap: 48px;             /* space48 tablet */
        padding: 48px;         /* space48 tablet */
        min-height: 500px;
    }
    .hero__content {
        flex: 0 0 auto;
        width: 400px;          /* Figma Content 69:4858 */
        gap: 32px;             /* space32 tablet */
        justify-content: space-between;
    }
    .hero__actions .button,
    .hero__actions .button_line {
        width: auto;
        align-self: flex-start;
    }
    .hero::after {
        position: absolute;
        top: 0;                /* Figma: img y 0 при padding 48 */
        left: 496px;           /* Figma Img 69:4866 */
        flex: none;
        width: 457px;          /* оригинальный размер картинки */
        height: 500px;
        aspect-ratio: auto;
        border-radius: 0;
    }
}
@media (min-width: 1200px) {
    .hero__content {
        width: 627px;          /* Figma Content 1:493 */
    }
    .hero__actions {
        flex-direction: row;
    }
    .hero::after {
        position: absolute;
        top: 50%;              /* вертикальное центрирование */
        right: 0;              /* прижата к правому краю */
        left: auto;
        transform: translateY(-50%);
        flex: none;
        width: 457px;          /* оригинальный размер картинки */
        height: 500px;
        margin: 0;
        border-radius: 0;
    }
}

/* --- Card: базовая карточка контента --- */
.card {
    display: flex;
    flex-direction: column;
    gap: var(--space12);
    padding: var(--space24);
    border-radius: var(--corner5);
    background-color: var(--bg-colors-white-white-100);
}
.card_row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space24);
}
.card_outline {
    border: var(--stroke-1) solid var(--stroke-colors-neutral-1);
}
.card_gray { background-color: var(--bg-colors-neutral-neutral-7); }
.card_blue { background-color: var(--bg-colors-blue-blue-7); }
.card_yellow { background-color: var(--bg-colors-yellow-yellow-7); }
.card_red { background-color: var(--bg-colors-red-red-7); }
.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--primitive40);
    height: var(--primitive40);
    border-radius: var(--corner3);
    background-color: var(--uni-colors-blue-blue-7);
}
.card__icon > svg {
    width: 26.67px;
    height: 26.67px;
}
.card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space12);
    flex: 1 1 auto;
    min-width: 0;
}
.card_row .card__body {
    gap: 0;                    /* в макете нет gap: заголовок сверху, кнопка снизу */
    justify-content: space-between;
    align-self: stretch;
}
.card__head {
    display: flex;
    flex-direction: column;
    gap: var(--space8);
}
.card__title {
    font-family: var(--font-google-sans);
    font-size: var(--font-h4);
    line-height: var(--lh-h4);
    font-weight: var(--fw-semibold);
    color: var(--text-colors-titles);
}
.card__text {
    font-family: var(--font-google-sans);
    font-size: var(--font-body-small);
    line-height: var(--lh-body);
    color: var(--text-colors-body-1);
}
.card__action {
    align-self: flex-start;
}
.card .button_tertiary {
    padding-left: 0;           /* кнопка «Подключить» выровнена по тексту карточки */
}

/* --- Deck: карусель карточек (Swiper) --- */
.deck .swiper-wrapper {
    align-items: flex-start;  /* мобилка: слайд = своя высота (Swiper autoHeight) */
}
.deck .swiper-slide {
    width: auto;
    height: auto;             /* снимаем height:100% из swiper-bundle — из-за него слайды разной высоты */
    display: flex;            /* карточка растягивается на высоту слайда */
}
.deck .card {
    width: 100%;
}
.deck_dots {
    display: flex;
    justify-content: center;
    margin-top: var(--space32);
}
@media (min-width: 700px) {
    /* Swiper при autoHeight (мобилка) вешает класс .swiper-autoheight и inline-высоту
       обёртки — на планшете и десктопе сбрасываем их, чтобы карточки тянулись
       на высоту самой высокой */
    .deck.swiper .swiper-wrapper {
        align-items: stretch;
        height: auto !important;
    }
    .deck .swiper-slide { width: 60%; }
}
@media (min-width: 1200px) {
    .deck .swiper-slide { width: auto; }
}

/* --- Cards: адаптивная сетка карточек (1 / 2 / 3 колонки) --- */
.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space24);
}
@media (min-width: 700px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    .cards { grid-template-columns: repeat(3, 1fr); }
}
/* Карточки блока «Интеграция с программами» (Figma 17:5600 / 69:5041 / 69:5939) */
.cards .card {
    gap: var(--space16);              /* внешний зазор head↔badge = 16 */
    justify-content: space-between;   /* бейдж прижат к низу карточки */
}
.cards .card__head {
    gap: var(--space12);              /* заголовок ↔ подзаголовок = 12 */
}
.cards .card > .badge {
    align-self: flex-start;           /* бейдж по ширине контента */
}

/* --- Steps: шаги подключения (Figma «Как подключить» 69:5804 / 10:553) --- */
.steps_box {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Figma: mobile 24 / tablet 48 */
    padding: 24px;
    background-color: var(--bg-colors-blue-blue-7);
    border-radius: var(--corner7);
}
.steps {
    display: flex;
    flex-direction: column;
    gap: var(--space24);
}
.steps__track {
    display: flex;
    align-items: center;
    gap: var(--space12);
    overflow-x: auto;
    scrollbar-width: none;
}
.steps__track::-webkit-scrollbar { display: none; }
.steps__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space12);
    flex-shrink: 0;
    text-decoration: none;
}
.steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--primitive32);
    height: var(--primitive32);
    border-radius: 100%;
    background-color: var(--uni-colors-blue-blue-6);
    font-family: var(--font-google-sans);
    font-size: var(--font-h4);
    line-height: var(--lh-h4);
    font-weight: var(--fw-semibold);
    color: var(--text-colors-accent-blue);
}
.steps__item_active .steps__num {
    background-color: var(--uni-colors-blue-blue-2);
    color: var(--uni-colors-white-white-100);
}
.steps__label {
    font-family: var(--font-google-sans);
    font-size: var(--font-h4);
    line-height: var(--lh-h4);
    font-weight: var(--fw-semibold);
    color: var(--text-colors-titles);
    white-space: nowrap;
}
.steps__line {
    position: relative;
    flex-shrink: 0;
    width: var(--primitive64);
    height: var(--stroke-2);
    border-radius: var(--stroke-2);
    background-color: var(--uni-colors-blue-blue-5);
}
.steps__line_active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: var(--stroke-2);
    border-radius: var(--stroke-2);
    background-color: var(--uni-colors-blue-blue-2);
}
.steps__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space24);
    padding: 24px; /* Figma: mobile 24 / tablet, desktop 32 */
    background-color: var(--uni-colors-white-white-opacity50);
    border: var(--stroke-1) solid var(--uni-colors-blue-blue-2);
    border-radius: var(--corner6);
}
.steps__content {
    display: flex;
    flex-direction: column;
    gap: var(--space12);
}
.steps__title {
    font-family: var(--font-google-sans);
    font-size: var(--font-h3);
    line-height: var(--lh-h3);
    font-weight: var(--fw-semibold);
    color: var(--text-colors-titles);
}
.steps__text {
    font-family: var(--font-google-sans);
    font-size: var(--font-body-normal);
    line-height: var(--lh-body);
    color: var(--text-colors-body-1);
}
.steps__image {
    position: relative;
    overflow: clip;
    border: var(--stroke-1) solid var(--stroke-colors-neutral-1);
    border-radius: var(--corner5);
    aspect-ratio: 502 / 309;
}
.steps__image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 700px) {
    .steps_box { gap: 48px; padding: 48px; } /* Figma tablet */
    .steps__panel {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space24);
        padding: 32px; /* Figma tablet */
    }
    .steps__content { flex: 1 1 0; min-width: 0; }
    .steps__image { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 1200px) {
    .steps__track {
        padding-inline: 16px; /* Figma desktop */
        justify-content: space-between;
    }
}

/* --- Quiz: тест подбора (Figma CTA 69:5837 / 10:632) --- */
.quiz {
    position: relative;
    padding-block: var(--space32);
    background-color: var(--bg-colors-white-white-100);
}
.quiz__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 800px;
    transform: translateY(-50%);
    z-index: 0;
    /* Размытый синий эллипс (Figma BG 22:5895: #4076FF 35%, blur 126.254) */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='2201'%20height='929'%20viewBox='0%200%202201%20929'%20preserveAspectRatio='none'%20fill='none'%3E%3Cpath%20d='M252.508%20464.508C252.508%20527.186%20435.353%20676.508%20973.716%20676.508C1512.08%20676.508%201948.51%20581.592%201948.51%20464.508C1948.51%20347.424%201512.08%20252.508%20973.716%20252.508C435.353%20252.508%20252.508%20347.424%20252.508%20464.508Z'%20fill='%234076FF'%20fill-opacity='0.35'%20filter='url(%23b)'/%3E%3Cfilter%20id='b'%20x='0'%20y='0'%20width='2201'%20height='929'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur%20stdDeviation='126.254'/%3E%3C/filter%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2201px 929px;
}
.quiz__inner {
    position: relative;
    z-index: 1;
}
.quiz__card {
    display: flex;
    flex-direction: column;
    gap: var(--space24);
    padding: 24px; /* Figma: mobile 24 / tablet, desktop 48 */
    background-color: var(--bg-colors-white-white-100);
    border-radius: var(--corner7);
    box-shadow: 0 32px 32px var(--uni-colors-neutral-neutral-0-opacity16);
}
.quiz__heading {
    max-width: 618px;
    font-family: var(--font-google-sans);
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-semibold);
    color: var(--text-colors-titles);
}
.quiz__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space16);
}
.quiz__question {
    font-family: var(--font-google-sans);
    font-size: var(--font-h3);
    line-height: var(--lh-h3);
    font-weight: var(--fw-semibold);
    color: var(--text-colors-titles);
}
.quiz__options {
    display: flex;
    flex-direction: column;
    gap: var(--space12);
}
.quiz__option {
    display: flex;
    align-items: center;
    gap: var(--space12);
    width: 100%;
    padding: var(--space6) var(--space8);
    border-radius: var(--corner2);
    background-color: var(--bg-colors-blue-blue-7);
}
.quiz__option-text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-google-sans);
    font-size: var(--font-body-medium);
    line-height: var(--lh-body);
    color: var(--text-colors-titles);
}
.quiz__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space24);
}
.quiz__progress {
    display: flex;
    flex-direction: column;
    gap: var(--space8);
}
.quiz__progress-text {
    font-family: var(--font-google-sans);
    font-size: var(--font-body-small);
    line-height: var(--lh-body);
    color: var(--text-colors-titles);
}
.quiz__bar {
    height: var(--space8);
    border-radius: 12px;
    background-color: var(--uni-colors-neutral-neutral-5);
}
.quiz__bar_fill {
    width: var(--space8);
    height: var(--space8);
    border-radius: 12px;
    background-color: var(--bg-colors-blue-blue-2);
}
.quiz__nav {
    display: flex;
    align-items: center;
    gap: var(--space16);
}
.quiz__nav .button { flex: 1 1 auto; }
.quiz__back {
    flex: 0 0 var(--button-height-normal);
    width: var(--button-height-normal);
    padding: 0;
}
.quiz__back > svg {
    width: var(--icon-size-normal);
    height: var(--icon-size-normal);
}
@media (min-width: 700px) {
    .quiz__card { padding: 48px; } /* Figma tablet */
    .quiz__head { flex-direction: row; }
    .quiz__foot {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space64);
    }
    .quiz__progress { flex: 1 1 auto; }
    .quiz__nav { flex: 0 0 auto; }
    .quiz__nav .button { flex: 0 0 auto; }
}
@media (min-width: 1200px) {
    .quiz__card {
        padding: var(--space48);
    }
    .quiz__progress { max-width: 799px; }
}

/* --- Tariff: блок тарифов (Figma «Тарифы» 69:5905 / 17:5320) --- */
.tariff {
    position: relative;
    overflow: clip;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background-color: var(--bg-colors-blue-blue-7);
    border-radius: var(--corner7);
}
.tariff__media {
    display: none;
    position: relative;
    overflow: clip;
    border-radius: var(--corner5);
}
.tariff__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tariff__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.tariff__content > .button {
    width: 100%;
}
.tariff__head {
    display: flex;
    flex-direction: column;
    gap: var(--space12);
}
.tariff__title {
    font-family: var(--font-google-sans);
    font-size: var(--font-h3);
    line-height: var(--lh-h3);
    font-weight: var(--fw-semibold);
    color: var(--text-colors-titles);
}
.tariff__text {
    font-family: var(--font-google-sans);
    font-size: var(--font-body-normal);
    line-height: var(--lh-body);
    color: var(--text-colors-body-1);
}
.tariff__list {
    display: flex;
    flex-direction: column;
    gap: var(--space16);
}
.tariff__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space12);
    padding: var(--space16);
    background-image: linear-gradient(180deg, var(--bg-colors-white-white-opacity50), var(--bg-colors-white-white-opacity16));
    backdrop-filter: var(--glass-32);
    border: var(--stroke-1) solid var(--stroke-colors-white-opacity16);
    border-radius: var(--corner3);
}
.tariff__item-title {
    font-family: var(--font-google-sans);
    font-size: var(--font-body-medium);
    line-height: var(--lh-body);
    font-weight: var(--fw-bold);
    color: var(--text-colors-titles);
}
.tariff__row {
    display: flex;
    align-items: center;
    gap: var(--space16);
}
.tariff__price {
    font-family: var(--font-google-sans);
    font-size: var(--font-h3);
    line-height: var(--lh-h3);
    font-weight: var(--fw-semibold);
    color: var(--text-colors-titles);
    white-space: nowrap;
}
.tariff__note {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-google-sans);
    font-size: var(--font-caption);
    line-height: var(--lh-caption);
    color: var(--text-colors-body-2);
}
.tariff__desc {
    font-family: var(--font-google-sans);
    font-size: var(--font-body-small);
    line-height: var(--lh-body);
    color: var(--text-colors-body-1);
}
@media (min-width: 700px) {
    .tariff { padding: 48px; }
    .tariff__content { gap: 32px; }
    .tariff__content > .button { width: 332px; }
    .tariff__list { flex-direction: row; }
    .tariff__item { flex: 1 1 0; }
}
@media (min-width: 1200px) {
    .tariff {
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
    }
    .tariff__media {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 380px;
        height: 500px;
        border-radius: 0;
    }
    .tariff__content { flex: 1 1 auto; max-width: 712px; margin-left: 372px; }
}

/* --- Stats: показатели (Figma 69:6009 / 22:6024) --- */
.stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space24);
}
.stats__item {
    display: flex;
    flex-direction: column;
    gap: var(--primitive10);
    padding: var(--space24) var(--space32);
    background-color: var(--bg-colors-blue-blue-7);
    border-radius: var(--corner6);
}
.stats__value {
    font-family: var(--font-google-sans);
    font-size: var(--font-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-semibold);
    color: var(--text-colors-accent-blue);
}
.stats__label {
    font-family: var(--font-google-sans);
    font-size: var(--font-body-medium);
    line-height: var(--lh-body);
    color: var(--text-colors-body-1);
}
@media (min-width: 700px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    .stats { grid-template-columns: repeat(4, 1fr); }
}

/* --- Benefits: сетка преимуществ (Figma 69:5873 / 17:5203) --- */
.benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space24);
}
.benefits__item {
    position: relative;
    overflow: clip;
}
.benefits__img {
    display: none;
}
@media (min-width: 700px) {
    .benefits { grid-template-columns: repeat(2, 1fr); }
    .benefits__item_wide,
    .benefits__item_narrow { grid-column: span 2; }
    .benefits__img {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 271px;
        height: 171px;
        border-radius: var(--corner5);
        overflow: clip;
    }
    .benefits__img > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .benefits__item_wide { --benefits_text_w: 335px; }
    .benefits__item_narrow { --benefits_text_w: 298px; }
    .benefits__item_wide .h3,
    .benefits__item_wide .txt_small,
    .benefits__item_narrow .h3,
    .benefits__item_narrow .txt_small { max-width: var(--benefits_text_w); }
    .benefits__item_narrow .benefits__img {
        width: auto;
        height: 100%;
    }
    .benefits__item_narrow .benefits__img > img {
        width: auto;
        height: 100%;
        object-fit: contain;
    }
}
@media (min-width: 1200px) {
    .benefits { grid-template-columns: repeat(12, 1fr); }
    .benefits__item { grid-column: span 4; }
    .benefits__item_wide { grid-column: span 7; }
    .benefits__item_narrow { grid-column: span 5; }
    .benefits__item_narrow .benefits__img {
        width: 150px;
        height: 171px;
    }
    .benefits__item_narrow .benefits__img > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* --- Consult: форма-призыв (Figma 69:6035 / 22:6163) --- */
.consult {
    display: flex;
    flex-direction: column;
    gap: var(--space24);
    padding: var(--space48) var(--space24);
    background-color: var(--bg-colors-blue-blue-7);
    border-radius: var(--corner7);
    overflow: clip;
}
.consult__content {
    display: flex;
    flex-direction: column;
    gap: var(--space24);
}
.consult__head {
    display: flex;
    flex-direction: column;
    gap: var(--space16);
}
.consult__title {
    font-family: var(--font-google-sans);
    font-size: var(--font-h2);
    line-height: var(--lh-h2);
    font-weight: var(--fw-semibold);
    color: var(--text-colors-titles);
}
.consult__text {
    font-family: var(--font-google-sans);
    font-size: var(--font-body-medium);
    line-height: var(--lh-body);
    color: var(--text-colors-body-1);
}
.consult__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space16);
}
.consult__consent {
    display: inline;
    font-family: var(--font-google-sans);
    font-size: var(--font-body-small);
    line-height: var(--lh-body);
    color: var(--text-colors-titles-opacity75);
}
.consult__consent a {
    color: var(--text-colors-titles);
    text-decoration: underline;
}
.consult .form_checkbox {
    flex-wrap: nowrap;
}
@media (min-width: 700px) {
    .consult { padding: 64px; } /* Figma tablet */
}
/* Обёртка формы и виджета отзывов (Figma 22:6163 / 69:5134 / 69:6035) */
.form_review_wrap {
    display: grid;
    gap: 38px;
}
.yandex-review-widget {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 400px;
    flex-shrink: 0;
    margin: auto;
}
@media (min-width: 700px) {
    .consult { padding: 64px; }
    .form_review_wrap { gap: 48px; }
    .yandex-review-widget { width: 462px; height: 508px; }
}
@media (min-width: 1200px) {
    .form_review_wrap {
        grid-template-columns: 1fr 404px;
        gap: 102px;
        align-items: center;
    }
    .yandex-review-widget { width: 404px; height: 446px; }
}

/* --- Swiper: обёртка слайдов --- */
/* Дубль класса переопределяет `.swiper-wrapper { overflow: auto }` из swiper-bundle.min.css,
   который подключается после base.css. */
.swiper-wrapper.swiper-wrapper {
    overflow: visible;
}