/* ================================================================
   1. ПЕРЕМЕННЫЕ
   ================================================================ */
:root {
    /* Брейкпоинты */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* Контейнер */
    --container-max: 1280px;
    --container-pad: 16px;

    /* Сетка */
    --grid-columns: 12;
    --grid-gap: 16px;

    /* Шкала отступов */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --font-family-base: 'Montserrat', system-ui, -apple-system,
        BlinkMacSystemFont, 'Segoe UI', Roboto,
        Helvetica, Arial, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji';

    --font-family-alternatives: 'Montserrat Alternates', system-ui, -apple-system,
        BlinkMacSystemFont, 'Segoe UI', Roboto,
        Helvetica, Arial, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji';

    --font-family-code: 'Courier New', Consolas, monospace;

    /* ===== Brand ===== */
    --brand-bright: 110, 0, 255;
    --brand-medium: 88, 0, 204;
    --brand-pastel: 230, 214, 255;
    --brand-terminal: 40, 0, 90;

    /* ===== Red ===== */
    --red-bright: 242, 139, 130;
    --red-medium: 200, 74, 65;
    --red-pastel: 253, 226, 224;

    /* ===== Green ===== */
    --green-bright: 129, 199, 132;
    --green-medium: 76, 145, 80;
    --green-pastel: 220, 237, 220;

    /* ===== Orange ===== */
    --orange-bright: 244, 179, 106;
    --orange-medium: 209, 130, 53;
    --orange-pastel: 253, 232, 209;

    /* ===== Blue (cyan) ===== */
    --blue-bright: 129, 199, 212;
    --blue-medium: 62, 138, 158;
    --blue-pastel: 218, 238, 243;

    /* ===== Gray ===== */
    --gray-bright: 176, 182, 190;
    --gray-medium: 108, 116, 128;
    --gray-pastel: 231, 234, 238;
    --gray-light: 250, 250, 250;
    --gray-light-extra: 245, 245, 245;

    /* ===== Текст ===== */
    --text-strong: 66, 58, 86;
    --text-heading: 90, 80, 112;
    --text-body: 114, 106, 136;
    --text-muted: 152, 146, 174;
    --text-subtle: 192, 186, 210;
    --color-white: rgb(255, 255, 255);

    /* ===== Иконки в полях ===== */
    --field-icon-size: 40px;
    --field-icon-glyph: 0.95rem;

    --corner-line: 22px;
    --corner-line-color: 176, 182, 190;
    --corner-mark-size: 10px;
    --corner-mark-glyph: 8px;

    --background-default: 243, 244, 245;
    --field-bg: 255, 255, 255;

    /* Шкала радиусов */
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
    --radius-24: 24px;
    --radius-32: 32px;
    --radius-40: 40px;
    --radius-99: 99px;

    /* Section padding */
    --space-sec-0: 0;
    --space-sec-1: 8px;
    --space-sec-2: 16px;
    --space-sec-3: 24px;
    --space-sec-4: 32px;
    --space-sec-5: 48px;
    --space-sec-6: 64px;
    --space-sec-7: 96px;
    --space-sec-8: 128px;

    --icon-color: #6C7480;

    --modal-width-max: 720px;
}

/* ================================================================
   STICKY FOOTER — футер всегда внизу экрана
   ---------------------------------------------------------------
   body — колонка на всю высоту viewport.
   Основной контент растягивается, футер прижимается к низу.
   ================================================================ */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Обёртка/контент страницы растягивается на свободное место */
body > main,
body > .page-content {
    flex: 1 0 auto;
}

/* Футер — не растягивается */
.footer-full {
    flex-shrink: 0;
}

/* ================================================================
   2. RESET
   ================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ================================================================
   3. КОНТЕЙНЕРЫ
   ================================================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container-fluid {
    width: 100%;
    padding-inline: var(--container-pad);
}

.container-fluid--flush {
    padding-inline: 0;
}

/* ================================================================
   4. СЕТКА
   ================================================================ */
.row {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    min-width: 0;
    grid-column-end: span 12;
}

.col-1  { grid-column-end: span 1;  }
.col-2  { grid-column-end: span 2;  }
.col-3  { grid-column-end: span 3;  }
.col-4  { grid-column-end: span 4;  }
.col-5  { grid-column-end: span 5;  }
.col-6  { grid-column-end: span 6;  }
.col-7  { grid-column-end: span 7;  }
.col-8  { grid-column-end: span 8;  }
.col-9  { grid-column-end: span 9;  }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }
.col-auto { grid-column: auto; }

.col-center-1  { grid-column: 7 / 8;   }
.col-center-2  { grid-column: 6 / 8;   }
.col-center-3  { grid-column: 6 / 9;   }
.col-center-4  { grid-column: 5 / 9;   }
.col-center-5  { grid-column: 5 / 10;  }
.col-center-6  { grid-column: 4 / 10;  }
.col-center-7  { grid-column: 4 / 11;  }
.col-center-8  { grid-column: 3 / 11;  }
.col-center-9  { grid-column: 3 / 12;  }
.col-center-10 { grid-column: 2 / 12;  }
.col-center-11 { grid-column: 2 / 13;  }
.col-center-12 { grid-column: 1 / 13;  }

.start-1  { grid-column-start: 1;  }
.start-2  { grid-column-start: 2;  }
.start-3  { grid-column-start: 3;  }
.start-4  { grid-column-start: 4;  }
.start-5  { grid-column-start: 5;  }
.start-6  { grid-column-start: 6;  }
.start-7  { grid-column-start: 7;  }
.start-8  { grid-column-start: 8;  }
.start-9  { grid-column-start: 9;  }
.start-10 { grid-column-start: 10; }
.start-11 { grid-column-start: 11; }
.start-12 { grid-column-start: 12; }

@media (min-width: 480px) {
    .col-sm-1  { grid-column-end: span 1;  }
    .col-sm-2  { grid-column-end: span 2;  }
    .col-sm-3  { grid-column-end: span 3;  }
    .col-sm-4  { grid-column-end: span 4;  }
    .col-sm-5  { grid-column-end: span 5;  }
    .col-sm-6  { grid-column-end: span 6;  }
    .col-sm-7  { grid-column-end: span 7;  }
    .col-sm-8  { grid-column-end: span 8;  }
    .col-sm-9  { grid-column-end: span 9;  }
    .col-sm-10 { grid-column-end: span 10; }
    .col-sm-11 { grid-column-end: span 11; }
    .col-sm-12 { grid-column-end: span 12; }

    .col-sm-center-6  { grid-column: 4 / 10; }
    .col-sm-center-8  { grid-column: 3 / 11; }
    .col-sm-center-10 { grid-column: 2 / 12; }

    .col-sm-start-1  { grid-column-start: 1;  }
    .col-sm-start-2  { grid-column-start: 2;  }
    .col-sm-start-3  { grid-column-start: 3;  }
    .col-sm-start-4  { grid-column-start: 4;  }
    .col-sm-start-5  { grid-column-start: 5;  }
    .col-sm-start-6  { grid-column-start: 6;  }
    .col-sm-start-7  { grid-column-start: 7;  }
    .col-sm-start-8  { grid-column-start: 8;  }
    .col-sm-start-9  { grid-column-start: 9;  }
    .col-sm-start-10 { grid-column-start: 10; }
    .col-sm-start-11 { grid-column-start: 11; }
    .col-sm-start-12 { grid-column-start: 12; }
}

@media (min-width: 768px) {
    .col-md-1  { grid-column-end: span 1;  }
    .col-md-2  { grid-column-end: span 2;  }
    .col-md-3  { grid-column-end: span 3;  }
    .col-md-4  { grid-column-end: span 4;  }
    .col-md-5  { grid-column-end: span 5;  }
    .col-md-6  { grid-column-end: span 6;  }
    .col-md-7  { grid-column-end: span 7;  }
    .col-md-8  { grid-column-end: span 8;  }
    .col-md-9  { grid-column-end: span 9;  }
    .col-md-10 { grid-column-end: span 10; }
    .col-md-11 { grid-column-end: span 11; }
    .col-md-12 { grid-column-end: span 12; }

    .col-md-center-4  { grid-column: 5 / 9; }
    .col-md-center-6  { grid-column: 4 / 10; }
    .col-md-center-8  { grid-column: 3 / 11; }
    .col-md-center-10 { grid-column: 2 / 12; }

    .col-md-start-1  { grid-column-start: 1;  }
    .col-md-start-2  { grid-column-start: 2;  }
    .col-md-start-3  { grid-column-start: 3;  }
    .col-md-start-4  { grid-column-start: 4;  }
    .col-md-start-5  { grid-column-start: 5;  }
    .col-md-start-6  { grid-column-start: 6;  }
    .col-md-start-7  { grid-column-start: 7;  }
    .col-md-start-8  { grid-column-start: 8;  }
    .col-md-start-9  { grid-column-start: 9;  }
    .col-md-start-10 { grid-column-start: 10; }
    .col-md-start-11 { grid-column-start: 11; }
    .col-md-start-12 { grid-column-start: 12; }
}

@media (min-width: 1024px) {
    .col-lg-1  { grid-column-end: span 1;  }
    .col-lg-2  { grid-column-end: span 2;  }
    .col-lg-3  { grid-column-end: span 3;  }
    .col-lg-4  { grid-column-end: span 4;  }
    .col-lg-5  { grid-column-end: span 5;  }
    .col-lg-6  { grid-column-end: span 6;  }
    .col-lg-7  { grid-column-end: span 7;  }
    .col-lg-8  { grid-column-end: span 8;  }
    .col-lg-9  { grid-column-end: span 9;  }
    .col-lg-10 { grid-column-end: span 10; }
    .col-lg-11 { grid-column-end: span 11; }
    .col-lg-12 { grid-column-end: span 12; }

    .col-lg-center-6  { grid-column: 4 / 10; }
    .col-lg-center-8  { grid-column: 3 / 11; }
    .col-lg-center-10 { grid-column: 2 / 12; }

    .col-lg-start-1  { grid-column-start: 1;  }
    .col-lg-start-2  { grid-column-start: 2;  }
    .col-lg-start-3  { grid-column-start: 3;  }
    .col-lg-start-4  { grid-column-start: 4;  }
    .col-lg-start-5  { grid-column-start: 5;  }
    .col-lg-start-6  { grid-column-start: 6;  }
    .col-lg-start-7  { grid-column-start: 7;  }
    .col-lg-start-8  { grid-column-start: 8;  }
    .col-lg-start-9  { grid-column-start: 9;  }
    .col-lg-start-10 { grid-column-start: 10; }
    .col-lg-start-11 { grid-column-start: 11; }
    .col-lg-start-12 { grid-column-start: 12; }
}

@media (min-width: 1280px) {
    .col-xl-1  { grid-column-end: span 1;  }
    .col-xl-2  { grid-column-end: span 2;  }
    .col-xl-3  { grid-column-end: span 3;  }
    .col-xl-4  { grid-column-end: span 4;  }
    .col-xl-5  { grid-column-end: span 5;  }
    .col-xl-6  { grid-column-end: span 6;  }
    .col-xl-7  { grid-column-end: span 7;  }
    .col-xl-8  { grid-column-end: span 8;  }
    .col-xl-9  { grid-column-end: span 9;  }
    .col-xl-10 { grid-column-end: span 10; }
    .col-xl-11 { grid-column-end: span 11; }
    .col-xl-12 { grid-column-end: span 12; }

    .col-xl-center-6  { grid-column: 4 / 10; }
    .col-xl-center-8  { grid-column: 3 / 11; }
    .col-xl-center-10 { grid-column: 2 / 12; }

    .col-xl-start-1  { grid-column-start: 1;  }
    .col-xl-start-2  { grid-column-start: 2;  }
    .col-xl-start-3  { grid-column-start: 3;  }
    .col-xl-start-4  { grid-column-start: 4;  }
    .col-xl-start-5  { grid-column-start: 5;  }
    .col-xl-start-6  { grid-column-start: 6;  }
    .col-xl-start-7  { grid-column-start: 7;  }
    .col-xl-start-8  { grid-column-start: 8;  }
    .col-xl-start-9  { grid-column-start: 9;  }
    .col-xl-start-10 { grid-column-start: 10; }
    .col-xl-start-11 { grid-column-start: 11; }
    .col-xl-start-12 { grid-column-start: 12; }
}

/* ================================================================
   5. MARGIN
   ================================================================ */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }

.my-0 { margin-block: var(--space-0); }
.my-1 { margin-block: var(--space-1); }
.my-2 { margin-block: var(--space-2); }
.my-3 { margin-block: var(--space-3); }
.my-4 { margin-block: var(--space-4); }
.my-5 { margin-block: var(--space-5); }
.my-6 { margin-block: var(--space-6); }

.mx-0 { margin-inline: var(--space-0); }
.mx-1 { margin-inline: var(--space-1); }
.mx-2 { margin-inline: var(--space-2); }
.mx-3 { margin-inline: var(--space-3); }
.mx-4 { margin-inline: var(--space-4); }
.mx-5 { margin-inline: var(--space-5); }
.mx-6 { margin-inline: var(--space-6); }

.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.ms-0 { margin-inline-start: var(--space-0); }
.ms-1 { margin-inline-start: var(--space-1); }
.ms-2 { margin-inline-start: var(--space-2); }
.ms-3 { margin-inline-start: var(--space-3); }
.ms-4 { margin-inline-start: var(--space-4); }
.ms-5 { margin-inline-start: var(--space-5); }
.ms-6 { margin-inline-start: var(--space-6); }

.me-0 { margin-inline-end: var(--space-0); }
.me-1 { margin-inline-end: var(--space-1); }
.me-2 { margin-inline-end: var(--space-2); }
.me-3 { margin-inline-end: var(--space-3); }
.me-4 { margin-inline-end: var(--space-4); }
.me-5 { margin-inline-end: var(--space-5); }
.me-6 { margin-inline-end: var(--space-6); }

.mx-auto { margin-inline: auto; }
.ms-auto { margin-inline-start: auto; }
.me-auto { margin-inline-end: auto; }

/* ================================================================
   6. PADDING
   ================================================================ */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.py-0 { padding-block: var(--space-0); }
.py-1 { padding-block: var(--space-1); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-5 { padding-block: var(--space-5); }
.py-6 { padding-block: var(--space-6); }

.px-0 { padding-inline: var(--space-0); }
.px-1 { padding-inline: var(--space-1); }
.px-2 { padding-inline: var(--space-2); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-5 { padding-inline: var(--space-5); }
.px-6 { padding-inline: var(--space-6); }

.pt-0 { padding-top: var(--space-0); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }

.pb-0 { padding-bottom: var(--space-0); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }

.ps-0 { padding-inline-start: var(--space-0); }
.ps-1 { padding-inline-start: var(--space-1); }
.ps-2 { padding-inline-start: var(--space-2); }
.ps-3 { padding-inline-start: var(--space-3); }
.ps-4 { padding-inline-start: var(--space-4); }
.ps-5 { padding-inline-start: var(--space-5); }
.ps-6 { padding-inline-start: var(--space-6); }

.pe-0 { padding-inline-end: var(--space-0); }
.pe-1 { padding-inline-end: var(--space-1); }
.pe-2 { padding-inline-end: var(--space-2); }
.pe-3 { padding-inline-end: var(--space-3); }
.pe-4 { padding-inline-end: var(--space-4); }
.pe-5 { padding-inline-end: var(--space-5); }
.pe-6 { padding-inline-end: var(--space-6); }

/* ================================================================
   7. ТИПОГРАФИКА
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 0.5em;
    color: rgb(var(--text-heading));
}

h1 {
    font-family: var(--font-family-alternatives);
    font-size: clamp(1.75rem, 1.5rem + 2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 0.4em;
    color: rgb(var(--text-strong));
}

h2 {
    font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h3 {
    font-size: clamp(1.25rem, 1.125rem + 1vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

h4 {
    font-size: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

h5 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

h6 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

h1.h1-alternatives,
h2.h2-alternatives,
h3.h3-alternatives,
h4.h4-alternatives,
h5.h5-alternatives,
h6.h6-alternatives,
.text-font-alternatives {
    font-family: var(--font-family-alternatives);
}

.text-white { color: var(--color-white); }
.text-brand { color: var(--brand-bright); }
.text-blue { color: var(--blue-bright); }
.text-green { color: var(--green-bright); }
.text-gray { color: var(--gray-bright); }

p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 1em;
    color: rgb(var(--text-body));
}

small, .text-sm {
    font-size: 0.875rem;
    line-height: 1.5;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgb(var(--text-muted));
}

a {
    color: rgb(var(--brand-bright));
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: rgb(var(--brand-medium));
    text-decoration: none;
    text-underline-offset: 0.2em;
}

a.underline {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 0.0625em;
}

a:focus-visible {
    color: rgb(var(--brand-medium));
    border-radius: 2px;
}

ul, ol { padding-left: 1.5em; }
li { line-height: 1.6; }
ul li::marker { color: rgb(var(--brand-bright)); }
ol li::marker { font-weight: 600; color: rgb(var(--brand-bright)); }

.list-none { list-style: none; padding-left: 0; }

blockquote {
    border-left: 4px solid rgb(var(--brand-bright));
    padding-left: 1.25rem;
    margin: 1.5em 0;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.6;
    color: rgb(var(--text-body));
}

blockquote footer {
    font-style: normal;
    font-size: 0.875rem;
    color: rgb(var(--text-muted));
    margin-top: 0.5em;
}

hr {
    border: none;
    border-top: 1px solid rgb(var(--gray-pastel));
    margin: 2em 0;
}

.text-stack { white-space: pre-line; }

/* ================================================================
   8. DISPLAY + FLEX
   ================================================================ */
.d-flex        { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-inline-block{ display: inline-block; }
.d-block       { display: block; }
.d-none        { display: none; }

.flex-row        { flex-direction: row; }
.flex-column     { flex-direction: column; }
.flex-row-rev    { flex-direction: row-reverse; }
.flex-column-rev { flex-direction: column-reverse; }

.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-wrap-rev { flex-wrap: wrap-reverse; }

.justify-start   { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

.align-start    { align-items: flex-start; }
.align-end      { align-items: flex-end; }
.align-center   { align-items: center; }
.align-baseline { align-items: baseline; }
.align-stretch  { align-items: stretch; }

.self-start    { align-self: flex-start; }
.self-end      { align-self: flex-end; }
.self-center   { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch  { align-self: stretch; }

.content-start   { align-content: flex-start; }
.content-end     { align-content: flex-end; }
.content-center  { align-content: center; }
.content-between { align-content: space-between; }
.content-around  { align-content: space-around; }
.content-evenly  { align-content: space-evenly; }
.content-stretch { align-content: stretch; }

.text-center { text-align: center; }
.text-end    { text-align: right; }

.flex-1    { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

.grow-0   { flex-grow: 0; }
.grow-1   { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }
.shrink-1 { flex-shrink: 1; }

.order-first { order: -1; }
.order-0     { order: 0; }
.order-1     { order: 1; }
.order-2     { order: 2; }
.order-3     { order: 3; }
.order-4     { order: 4; }
.order-5     { order: 5; }
.order-last  { order: 999; }

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.flex-column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-wrap-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
}

@media (min-width: 768px) {
    .md\:d-flex      { display: flex; }
    .md\:d-none      { display: none; }
    .md\:flex-row    { flex-direction: row; }
    .md\:flex-column { flex-direction: column; }

    .md\:justify-start   { justify-content: flex-start; }
    .md\:justify-end     { justify-content: flex-end; }
    .md\:justify-center  { justify-content: center; }
    .md\:justify-between { justify-content: space-between; }

    .md\:align-start  { align-items: flex-start; }
    .md\:align-end    { align-items: flex-end; }
    .md\:align-center { align-items: center; }

    .md\:order-1 { order: 1; }
    .md\:order-2 { order: 2; }
}

@media (min-width: 1024px) {
    .lg\:d-flex      { display: flex; }
    .lg\:d-none      { display: none; }
    .lg\:flex-row    { flex-direction: row; }
    .lg\:flex-column { flex-direction: column; }

    .lg\:justify-between { justify-content: space-between; }
    .lg\:justify-center  { justify-content: center; }
    .lg\:align-center    { align-items: center; }

    .lg\:order-1 { order: 1; }
    .lg\:order-2 { order: 2; }
}

/* ================================================================
   9. GAP
   ================================================================ */
.gap-0 { gap: 0; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 24px; }
.gap-6 { gap: 32px; }

.row-gap-0 { row-gap: 0; }
.row-gap-1 { row-gap: 4px; }
.row-gap-2 { row-gap: 8px; }
.row-gap-3 { row-gap: 12px; }
.row-gap-4 { row-gap: 16px; }
.row-gap-5 { row-gap: 24px; }
.row-gap-6 { row-gap: 32px; }

.col-gap-0 { column-gap: 0; }
.col-gap-1 { column-gap: 4px; }
.col-gap-2 { column-gap: 8px; }
.col-gap-3 { column-gap: 12px; }
.col-gap-4 { column-gap: 16px; }
.col-gap-5 { column-gap: 24px; }
.col-gap-6 { column-gap: 32px; }

@media (min-width: 768px) {
    .md\:gap-0 { gap: 0; }
    .md\:gap-2 { gap: 8px; }
    .md\:gap-4 { gap: 16px; }
    .md\:gap-6 { gap: 32px; }
}

/* ================================================================
   10. БЕЙДЖИ / ПЛАШКИ (устаревшие)
   ================================================================ */
.btn-brand {
    background: rgb(var(--brand-bright));
    color: #fff;
}

.btn-brand-ghost {
    background: rgba(var(--brand-bright), 0.12);
    color: rgb(var(--brand-bright));
    border: 1px solid rgba(var(--brand-bright), 0.3);
}

.btn-brand:hover {
    background: rgb(var(--brand-medium));
}

/* ================================================================
   11. КНОПКИ
   ================================================================ */
.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1.5px solid transparent;
    border-radius: 99px;
    font: inherit;
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.05s ease;
    user-select: none;
}

.btn:active:not(:disabled) { transform: translateY(1px); }

.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--brand-bright), 0.25);
}

.btn--transparent { color: rgb(var(--text-muted)); }
.btn--transparent:hover:not(:disabled) { color: rgb(255, 255, 255); }

.btn--brand {
    color: rgb(var(--brand-bright));
    transition:
        background-color 0.2s ease,
        color 0.15s ease;
}

.btn--brand i { font-size: 1.2rem; }

.btn--brand .btn-expand__label {
    font-size: 0.8rem;
    font-weight: 600;
}

.btn--brand:hover:not(:disabled) {
    color: rgb(255, 255, 255);
    background-color: rgb(var(--brand-bright));
}

.btn--primary {
    background: rgb(var(--brand-bright));
    color: #fff;
}
.btn--primary:hover:not(:disabled) { background: rgb(var(--brand-medium)); }

.btn--secondary {
    background: #fff;
    color: rgb(var(--text-muted));
    border-color: rgb(var(--gray-bright));
}
.btn--secondary:hover:not(:disabled) {
    background: rgb(var(--gray-pastel));
    color: rgb(var(--text-strong));
}

.btn--ghost {
    background: transparent;
    color: rgb(var(--text-muted));
}
.btn--ghost:hover:not(:disabled) {
    background: rgba(var(--gray-bright), 0.15);
    color: rgb(var(--text-strong));
}

.btn--warning {
    background: rgba(var(--red-bright), 0.15);
    color: rgb(var(--red-medium));
    border-color: rgba(var(--red-bright), 0.35);
}
.btn--warning:hover:not(:disabled) {
    background: rgb(var(--red-medium));
    color: #fff;
    border-color: rgb(var(--red-medium));
}

.btn--danger {
    background: rgba(var(--orange-bright), 0.15);
    color: rgb(var(--orange-medium));
    border-color: rgba(var(--orange-bright), 0.35);
}
.btn--danger:hover:not(:disabled) {
    background: rgb(var(--orange-medium));
    color: #fff;
    border-color: rgb(var(--orange-medium));
}

.btn--success {
    background: rgba(var(--green-bright), 0.2);
    color: rgb(var(--green-medium));
    border-color: rgba(var(--green-bright), 0.4);
}
.btn--success:hover:not(:disabled) {
    background: rgb(var(--green-medium));
    color: #fff;
    border-color: rgb(var(--green-medium));
}

.btn--warning-solid {
    background: rgb(var(--red-medium));
    color: #fff;
    border-color: rgb(var(--red-medium));
}
.btn--warning-solid:hover:not(:disabled) { filter: brightness(0.92); }

.btn--danger-solid {
    background: rgb(var(--orange-medium));
    color: #fff;
    border-color: rgb(var(--orange-medium));
}
.btn--danger-solid:hover:not(:disabled) { filter: brightness(0.92); }

.btn--success-solid {
    background: rgb(var(--green-medium));
    color: #fff;
    border-color: rgb(var(--green-medium));
}
.btn--success-solid:hover:not(:disabled) { filter: brightness(0.92); }

.btn--white {
    background: #fff;
    color: rgb(var(--text-body));
    border-color: rgb(var(--gray-bright));
}
.btn--white:hover:not(:disabled) {
    background: #fff;
    color: rgb(var(--text-strong));
    border-color: rgb(var(--brand-bright));
    box-shadow: 0 4px 12px -4px rgba(var(--brand-bright), 0.35);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ================================================================
   12. ФОРМЫ
   ================================================================ */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /*margin-bottom: 18px;*/
    font-family: inherit;
}

.field__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--text-muted));
    line-height: 1.2;
}

.field__control {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    /*border: 1px solid transparent;*/
    border-radius: 10px;
    background: rgb(var(--field-bg));
    box-shadow: inset 0 2px 4px -2px rgba(0, 0, 0, 0.08);
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.field__input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: rgb(var(--text-heading));
    border-radius: inherit;
    appearance: none;
}

.field__input::placeholder { color: rgb(var(--text-subtle)); }

.field__control:has(.field__icon--left)  .field__input { padding-left: 4px;  }
.field__control:has(.field__icon--right) .field__input { padding-right: 4px; }

select.field__input {
    background-image: none;
    cursor: pointer;
}

textarea.field__input {
    resize: vertical;
    min-height: 84px;
    line-height: 1.5;
}

.field__hint {
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.3;
    color: rgb(var(--text-muted));
    padding-left: 2px;
    padding-top: 4px;
    padding-bottom: 8px;
}

/* ================================================================
   13. ИКОНКИ ВНУТРИ ПОЛЯ
   ================================================================ */
.field__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--field-icon-size);
    height: var(--field-icon-size);
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: rgb(var(--text-muted));
    border-radius: 8px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.field__icon i {
    font-size: var(--field-icon-glyph);
    line-height: 1;
    display: block;
}

span.field__icon  { pointer-events: none; cursor: default; }
button.field__icon { cursor: pointer; }

button.field__icon:hover {
    color: rgb(var(--brand-bright));
    background: rgba(var(--brand-bright), 0.08);
}
button.field__icon:active { background: rgba(var(--brand-bright), 0.16); }
button.field__icon:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--brand-bright), 0.25);
}

.field__icon--left  { margin-left: 4px;  }
.field__icon--right { margin-right: 4px; }

/* ================================================================
   14. СОСТОЯНИЯ ПОЛЕЙ
   ================================================================ */
.field__control:focus-within {
    border-color: rgb(var(--brand-bright));
    box-shadow:
        inset 0 2px 4px -2px rgba(0, 0, 0, 0.08),
        0 0 0 4px rgba(var(--brand-bright), 0.15);
}

.field--success .field__control {
    border-color: rgb(var(--green-medium));
    background: rgba(var(--green-pastel), 0.5);
    box-shadow: inset 0 2px 4px -2px rgba(0, 0, 0, 0.08);
}
.field--success .field__control:focus-within {
    box-shadow:
        inset 0 2px 4px -2px rgba(0, 0, 0, 0.08),
        0 0 0 4px rgba(var(--green-medium), 0.18);
}
.field--success .field__hint,
.field--success .field__icon { color: rgb(var(--green-medium)); }
.field--success button.field__icon:hover { background: rgba(var(--green-medium), 0.1); }

.field--error .field__control {
    border-color: rgb(var(--red-medium));
    background: rgba(var(--red-pastel), 0.5);
    box-shadow: inset 0 2px 4px -2px rgba(0, 0, 0, 0.08);
}
.field--error .field__control:focus-within {
    box-shadow:
        inset 0 2px 4px -2px rgba(0, 0, 0, 0.08),
        0 0 0 4px rgba(var(--red-medium), 0.18);
}
.field--error .field__hint,
.field--error .field__icon { color: rgb(var(--red-medium)); }
.field--error button.field__icon:hover { background: rgba(var(--red-medium), 0.1); }

.field--disabled .field__control,
.field__control:has(.field__input:disabled) {
    background: rgb(var(--gray-pastel));
    border-color: rgb(var(--gray-pastel));
    box-shadow: none;
    cursor: not-allowed;
}
.field__input:disabled {
    color: rgb(var(--text-subtle));
    cursor: not-allowed;
}
.field__control:has(.field__input:disabled) .field__icon {
    color: rgb(var(--text-subtle));
    pointer-events: none;
}

/* ================================================================
   AUTOFILL — убираем принудительную подсветку автозаполнения
   ---------------------------------------------------------------
   ВАЖНО: -webkit-box-shadow должен быть сплошным (rgb), а не
   rgba(...,0) — иначе он прозрачный и не перекрывает фон браузера.
   ================================================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
.field__input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgb(var(--field-bg)) inset !important;
            box-shadow: 0 0 0 1000px rgb(var(--field-bg)) inset !important;

    -webkit-text-fill-color: rgb(var(--text-heading)) !important;
            text-fill-color: rgb(var(--text-heading)) !important;
    color: rgb(var(--text-heading)) !important;
    caret-color: rgb(var(--text-heading));

    transition: background-color 5000s ease-in-out 0s;
    outline: none !important;
}

/* ================================================================
   15. FIELD — FILLED VARIANT (серый фон, label на границе)
   ================================================================ */
.field--filled {
    --field-label-bg: var(--gray-light);
    position: relative;
    padding-top: 12px;
    gap: 0;
}

/* ---------- Label ---------- */
.field--filled .field__label {
    position: absolute;
    top: 3px;
    left: 20px;
    padding: 2px 10px;
    background: rgb(var(--field-label-bg));
    color: rgb(var(--text-muted));
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(var(--gray-bright), 0.55);
    border-radius: 99px;

    transition:
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.field--filled:focus-within .field__label {
    color: rgb(var(--brand-bright));
    border-color: rgb(var(--brand-bright));
    box-shadow: 0 0 0 3px rgba(var(--brand-bright), 0.15);
}

/* ================================================================
   LABEL — состояния error / success
   ================================================================ */

/* --- Error --- */
.field--filled.field--error .field__label {
    color: rgb(var(--red-medium));
    border-color: rgb(var(--red-medium));
    background: rgb(var(--red-pastel));
}

/* Error + фокус — усиленное кольцо */
.field--filled.field--error:focus-within .field__label {
    color: rgb(var(--red-medium));
    border-color: rgb(var(--red-medium));
    background: rgb(var(--red-pastel));
    box-shadow: 0 0 0 3px rgba(var(--red-medium), 0.18);
}

/* --- Success --- */
.field--filled.field--success .field__label {
    color: rgb(var(--green-medium));
    border-color: rgb(var(--green-medium));
    background: rgb(var(--green-pastel));
}

/* Success + фокус — усиленное кольцо */
.field--filled.field--success:focus-within .field__label {
    color: rgb(var(--green-medium));
    border-color: rgb(var(--green-medium));
    background: rgb(var(--green-pastel));
    box-shadow: 0 0 0 3px rgba(var(--green-medium), 0.18);
}

/* ---------- Контрол ---------- */
.field--filled .field__control {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    background: rgb(var(--gray-light));
    border: 1px solid rgba(var(--gray-bright), 0.55);
    border-radius: var(--radius-99);
    box-shadow: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.field--filled .field__control--textarea {
    border-radius: var(--radius-10);
    resize: none;
}

.field--filled .field__control:focus-within {
    border-color: rgb(var(--brand-bright));
    background: rgb(var(--gray-light));
    box-shadow: 0 0 0 3px rgba(var(--brand-bright), 0.15);
}

.field--filled.field--success .field__control {
    border-color: rgb(var(--green-medium));
    background: rgba(var(--green-pastel), 0.6);
}
.field--filled.field--error .field__control {
    border-color: rgb(var(--red-medium));
    background: rgba(var(--red-pastel), 0.6);
}
.field--filled .field__control:has(.field__input:disabled) {
    background: rgb(var(--gray-pastel));
    border-color: transparent;
    opacity: 0.7;
}

/* ---------- Поле ввода внутри filled ----------
   Тот же вертикальный padding, что и у choices__inner,
   чтобы обычные поля и choices были одной высоты. */
.field--filled .field__input {
    padding: 12px 20px;
}

/* ================================================================
   CHOICES.JS ВНУТРИ .field--filled
   ---------------------------------------------------------------
   Цепочка: field__control (flex, align-center)
            └ choices (width: 100%)
              └ choices__inner (flex, align-center, padding даёт высоту)
                └ choices__list--single (flex, align-center)
                  └ choices__item (текст)
   ================================================================ */

.field--filled .choices {
    position: relative;
    width: 100%;
    margin: 0;
    font-size: inherit;
}

.field--filled .choices__inner {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    padding: 12px 20px !important;
    background: transparent;
    border: 0;
    border-radius: inherit;
    font-size: inherit;
}

.field--filled .choices__list--single {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 30px 0 0;
    font-size: 0.9375rem;
    /*line-height: 1.4;*/
    color: rgb(var(--text-heading));
}

.field--filled .choices__placeholder {
    color: rgb(var(--text-subtle));
    opacity: 1;
}

.field--filled .choices__list--single .choices__button {
    display: none;
}

.field--filled .choices__list--dropdown .choices__item[data-value=""] {
    display: none;
}

/* ================================================================
   СТРЕЛКА — SVG через маску, поворот вокруг центра
   ================================================================ */

.field--filled .choices[data-type="select-one"]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 18px;
    width: 14px;
    height: 14px;
    margin-top: -7px;            /* половина height — точное центрирование */

    background-color: rgb(var(--text-muted));

    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center / contain no-repeat;

    pointer-events: none;
    transform-origin: center;
    transition:
        transform 0.2s ease,
        background-color 0.15s ease;
}

/* Открытое состояние — стрелка вверх, положение не меняется */
.field--filled .choices[data-type="select-one"].is-open::after {
    transform: rotate(180deg);
}

/* Hover / focus — подсветка брендовым */
.field--filled .choices:hover::after,
.field--filled .choices.is-focused::after {
    background-color: rgb(var(--brand-bright));
}

/* ---------- Выпадающий список ---------- */
.field--filled .choices__list--dropdown {
    margin-top: 10px !important;
    padding: 6px;
    background: #fff;
    /*border: 1px solid rgba(var(--gray-bright), 0.55);*/
    border: 0 !important;
    border-radius: var(--radius-10);
    --choices-border-radius: var(--radius-10);
    box-shadow:
        0 12px 32px -12px rgba(var(--gray-medium), 0.25),
        0 4px 8px -4px rgba(var(--gray-medium), 0.1);
    z-index: 20;
}

.field--filled .choices__list--dropdown .choices__item {
    padding: 8px 12px;
    border-radius: var(--radius-6);
    font-size: 0.875rem;
    color: rgb(var(--text-body));
    transition: background-color 0.12s ease, color 0.12s ease;
}

.field--filled .choices__list--dropdown .choices__item--selectable:hover,
.field--filled .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: rgba(var(--brand-bright), 0.08);
    color: rgb(var(--brand-bright));
}

.field--filled .choices__list--dropdown .choices__item[aria-selected="true"] {
    color: rgb(var(--brand-bright));
    font-weight: 600;
    background: rgba(var(--brand-bright), 0.06);
}

/* ================================================================
   FILE INPUT (Кастомная кнопка)
   ================================================================ */
.field__control input[type="file"] {
    padding: 12px 20px;
    cursor: pointer;
    color: rgb(var(--text-muted));
    font-size: 0.875rem;
}

.field__control input[type="file"]::file-selector-button {
    border: 0;
    padding: 6px 14px;
    border-radius: var(--radius-6);
    background: rgba(var(--brand-bright), 0.1);
    color: rgb(var(--brand-bright));
    font-family: inherit;
    font-weight: 600;
    font-size: 0.7rem;
    cursor: pointer;
    margin-right: 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.field__control input[type="file"]::file-selector-button:hover {
    background: rgba(var(--brand-bright), 0.2);
}

/* ================================================================
   TEXTAREA FIX
   ================================================================ */
/* Чтобы textarea не сжималась по центру, а занимала всю высоту */
.field__control:has(textarea) {
    align-items: stretch;
}

.field--filled .field__control textarea.field__input {
    padding: 14px 20px;
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

/* ================================================================
   КНОПКА-ЭКСПАНДЕР (icon → icon + label)
   ================================================================ */
.btn-expand {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    gap: 0;
    white-space: nowrap;
    overflow: hidden;
    transition:
        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        padding-inline 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-expand > i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    font-size: 1rem;
    line-height: 1;
}

.btn-expand__label {
    display: inline-block;
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition:
        max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease;
}

.btn-expand:hover,
.btn-expand:focus-visible {
    width: auto;
    padding-inline: 11px;
}

.btn-expand:hover .btn-expand__label,
.btn-expand:focus-visible .btn-expand__label {
    max-width: 200px;
    margin-left: 8px;
    opacity: 1;
}

@media (hover: none) {
    .btn-expand { width: auto; padding-inline: 11px; }
    .btn-expand__label { max-width: 200px; margin-left: 8px; opacity: 1; }
}

/*** CHECKBOX ***/
.checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(var(--text-body));
}

/* Прячем нативный инпут, оставляя его доступным для скринридеров */
.checkbox input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Квадратик ---------- */
.checkbox__box {
    position: relative;
    top: -2px;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background: #fff;
    border: 1.5px solid rgba(var(--gray-bright), 0.7);
    border-radius: var(--radius-6);
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}

/* ---------- Галочка (SVG через mask) ---------- */
.checkbox__box::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 14px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 14px no-repeat;
    opacity: 0;
    transform: scale(0.4);
    transition:
        opacity 0.15s ease,
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Hover ---------- */
.checkbox:hover .checkbox__box {
    border-color: rgb(var(--brand-bright));
    box-shadow: 0 0 0 3px rgba(var(--brand-bright), 0.1);
}

/* ---------- Focus ---------- */
.checkbox input:focus-visible + .checkbox__box {
    outline: 0;
    border-color: rgb(var(--brand-bright));
    box-shadow: 0 0 0 3px rgba(var(--brand-bright), 0.25);
}

/* ---------- Checked ---------- */
.checkbox input:checked + .checkbox__box {
    background: rgb(var(--brand-bright));
    border-color: rgb(var(--brand-bright));
    animation: checkbox-pop 0.25s ease;
}

.checkbox input:checked + .checkbox__box::after {
    opacity: 1;
    transform: scale(1);
}

.checkbox:hover input:checked + .checkbox__box {
    background: rgb(var(--brand-medium));
    border-color: rgb(var(--brand-medium));
    box-shadow: 0 0 0 3px rgba(var(--brand-bright), 0.18);
}

/* ---------- Disabled ---------- */
.checkbox input:disabled + .checkbox__box {
    opacity: 0.5;
    cursor: not-allowed;
}
.checkbox input:disabled ~ * {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- Текст и ссылки внутри ---------- */
.checkbox__text {
    color: rgb(var(--text-body));
}

.checkbox__text a {
    color: rgb(var(--brand-bright));
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
    transition: color 0.15s ease, text-decoration-style 0.15s ease;
}

.checkbox__text a:hover {
    color: rgb(var(--brand-medium));
    text-decoration-style: solid;
}

/* ---------- Лёгкий «punch» при выборе ---------- */
@keyframes checkbox-pop {
    0%   { transform: scale(1);    }
    45%  { transform: scale(1.12); }
    100% { transform: scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
    .checkbox input:checked + .checkbox__box { animation: none; }
    .checkbox__box::after { transition: none; }
}

/* ---------- Тема error (для серверной валидации) ---------- */
.checkbox--error .checkbox__box {
    border-color: rgb(var(--red-medium));
    background: rgba(var(--red-pastel), 0.4);
}
.checkbox--error .checkbox__text,
.checkbox--error .checkbox__text a {
    color: rgb(var(--red-medium));
}
.checkbox--error:hover .checkbox__box {
    box-shadow: 0 0 0 3px rgba(var(--red-medium), 0.15);
}

/* ================================================================
   16. СКРУГЛЕНИЯ — все углы
   ================================================================ */
.rounded-4   { border-radius: var(--radius-4);  }
.rounded-6   { border-radius: var(--radius-6);  }
.rounded-8   { border-radius: var(--radius-8);  }
.rounded-10  { border-radius: var(--radius-10); }
.rounded-12  { border-radius: var(--radius-12); }
.rounded-16  { border-radius: var(--radius-16); }
.rounded-20  { border-radius: var(--radius-20); }
.rounded-24  { border-radius: var(--radius-24); }
.rounded-32  { border-radius: var(--radius-32); }
.rounded-40  { border-radius: var(--radius-40); }
.rounded-99  { border-radius: var(--radius-99); }

/* ================================================================
   17. СКРУГЛЕНИЯ — отдельные углы
   ================================================================ */
.rounded-tl-4   { border-top-left-radius: var(--radius-4);  }
.rounded-tl-6   { border-top-left-radius: var(--radius-6);  }
.rounded-tl-8   { border-top-left-radius: var(--radius-8);  }
.rounded-tl-10  { border-top-left-radius: var(--radius-10); }
.rounded-tl-12  { border-top-left-radius: var(--radius-12); }
.rounded-tl-16  { border-top-left-radius: var(--radius-16); }
.rounded-tl-20  { border-top-left-radius: var(--radius-20); }
.rounded-tl-24  { border-top-left-radius: var(--radius-24); }
.rounded-tl-32  { border-top-left-radius: var(--radius-32); }
.rounded-tl-40  { border-top-left-radius: var(--radius-40); }
.rounded-tl-99  { border-top-left-radius: var(--radius-99); }

.rounded-tr-4   { border-top-right-radius: var(--radius-4);  }
.rounded-tr-6   { border-top-right-radius: var(--radius-6);  }
.rounded-tr-8   { border-top-right-radius: var(--radius-8);  }
.rounded-tr-10  { border-top-right-radius: var(--radius-10); }
.rounded-tr-12  { border-top-right-radius: var(--radius-12); }
.rounded-tr-16  { border-top-right-radius: var(--radius-16); }
.rounded-tr-20  { border-top-right-radius: var(--radius-20); }
.rounded-tr-24  { border-top-right-radius: var(--radius-24); }
.rounded-tr-32  { border-top-right-radius: var(--radius-32); }
.rounded-tr-40  { border-top-right-radius: var(--radius-40); }
.rounded-tr-99  { border-top-right-radius: var(--radius-99); }

.rounded-bl-4   { border-bottom-left-radius: var(--radius-4);  }
.rounded-bl-6   { border-bottom-left-radius: var(--radius-6);  }
.rounded-bl-8   { border-bottom-left-radius: var(--radius-8);  }
.rounded-bl-10  { border-bottom-left-radius: var(--radius-10); }
.rounded-bl-12  { border-bottom-left-radius: var(--radius-12); }
.rounded-bl-16  { border-bottom-left-radius: var(--radius-16); }
.rounded-bl-20  { border-bottom-left-radius: var(--radius-20); }
.rounded-bl-24  { border-bottom-left-radius: var(--radius-24); }
.rounded-bl-32  { border-bottom-left-radius: var(--radius-32); }
.rounded-bl-40  { border-bottom-left-radius: var(--radius-40); }
.rounded-bl-99  { border-bottom-left-radius: var(--radius-99); }

.rounded-br-4   { border-bottom-right-radius: var(--radius-4);  }
.rounded-br-6   { border-bottom-right-radius: var(--radius-6);  }
.rounded-br-8   { border-bottom-right-radius: var(--radius-8);  }
.rounded-br-10  { border-bottom-right-radius: var(--radius-10); }
.rounded-br-12  { border-bottom-right-radius: var(--radius-12); }
.rounded-br-16  { border-bottom-right-radius: var(--radius-16); }
.rounded-br-20  { border-bottom-right-radius: var(--radius-20); }
.rounded-br-24  { border-bottom-right-radius: var(--radius-24); }
.rounded-br-32  { border-bottom-right-radius: var(--radius-32); }
.rounded-br-40  { border-bottom-right-radius: var(--radius-40); }
.rounded-br-99  { border-bottom-right-radius: var(--radius-99); }

/* ================================================================
   18. CORNER FRAME — блок с угловыми метками
   ================================================================ */
.corner-frame {
    position: relative;
    padding: 24px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(var(--gray-bright), 0.55);
    margin: 24px;
}

.corner-frame__mark {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--corner-mark-size);
    height: var(--corner-mark-size);
    font-size: var(--corner-mark-glyph);
    line-height: 1;
    color: rgba(var(--corner-line-color), 0.85);
    background: #fff;
    border-radius: 2px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.corner-frame__mark--tl { top: -5px;    left: -5px;  }
.corner-frame__mark--tr { top: -5px;    right: -5px; }
.corner-frame__mark--bl { bottom: -5px; left: -5px;  }
.corner-frame__mark--br { bottom: -5px; right: -5px; }

.corner-frame__mark::before,
.corner-frame__mark::after {
    content: '';
    position: absolute;
    background: rgba(var(--corner-line-color), 0.55);
    pointer-events: none;
}

.corner-frame__mark::before { width: var(--corner-line, 22px); height: 1px; }
.corner-frame__mark::after  { width: 1px; height: var(--corner-line, 22px); } 

.corner-frame__mark--tl::before { top: 50%; right: 100%; }
.corner-frame__mark--tl::after  { left: 50%; bottom: 100%; }
.corner-frame__mark--tr::before { top: 50%; left: 100%; }
.corner-frame__mark--tr::after  { left: 50%; bottom: 100%; }
.corner-frame__mark--bl::before { top: 50%; right: 100%; }
.corner-frame__mark--bl::after  { left: 50%; top: 100%; }
.corner-frame__mark--br::before { top: 50%; left: 100%; }
.corner-frame__mark--br::after  { left: 50%; top: 100%; }

.corner-frame__content > *:last-child { margin-bottom: 0; }

/* ================================================================
   19. УТИЛИТЫ: ТЕНИ
   ================================================================ */
.shadow-2x { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-4x { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-text-brand { text-shadow: 0 3px 1px rgba(var(--brand-bright), 0.1); }

/* ================================================================
   20. УТИЛИТЫ: ФОНЫ
   ================================================================ */
.bg-white    { background-color: rgb(255, 255, 255); }
.bg-white-80 { background-color: rgba(255, 255, 255, 0.8); }
.bg-white-70 { background-color: rgba(255, 255, 255, 0.7); }
.bg-white-60 { background-color: rgba(255, 255, 255, 0.6); }
.bg-white-50 { background-color: rgba(255, 255, 255, 0.5); }
.bg-white-40 { background-color: rgba(255, 255, 255, 0.4); }
.bg-gray { background-color: rgba(240, 240, 240, 0.6); }

/* ================================================================
   21. WAVE BACKGROUND — полукруглая заливка
   ================================================================ */
.wave-bg-white {
    --wave-color: 255, 255, 255;
    --wave-strength: 0.95;
    --wave-x: 50%;
    --wave-y: 100%;
    --wave-w: 100%;
    --wave-h: 80%;

    background: radial-gradient(
        ellipse var(--wave-w) var(--wave-h) at var(--wave-x) var(--wave-y),
        rgba(var(--wave-color), var(--wave-strength)) 0%,
        rgba(var(--wave-color), calc(var(--wave-strength) * 0.5)) 45%,
        rgba(var(--wave-color), 0) 100%
    );
}

.wave-bg-brand {
    --wave-color: 230, 214, 255;
    --wave-strength: 0.95;
    --wave-x: 100%;
    --wave-y: 100%;
    --wave-w: 100%;
    --wave-h: 80%;

    background: radial-gradient(
        ellipse var(--wave-w) var(--wave-h) at var(--wave-x) var(--wave-y),
        rgba(var(--wave-color), var(--wave-strength)) 0%,
        rgba(var(--wave-color), calc(var(--wave-strength) * 0.5)) 45%,
        rgba(var(--wave-color), 0) 100%
    );
}

.wave-bg--left         { --wave-x: 0%;   }
.wave-bg--right        { --wave-x: 100%; }
.wave-bg--top          { --wave-y: 0%;   }
.wave-bg--bottom       { --wave-y: 100%; }
.wave-bg--top-left     { --wave-x: 0%;   --wave-y: 0%;   }
.wave-bg--top-right    { --wave-x: 100%; --wave-y: 0%;   }
.wave-bg--bottom-left  { --wave-x: 0%;   --wave-y: 100%; }
.wave-bg--bottom-right { --wave-x: 100%; --wave-y: 100%; }

/* ================================================================
   22. FULL-BLEED — выход за пределы контейнера
   ================================================================ */
.bleed-left {
    margin-left: calc(
        -1 * (100vw - (min(100vw, var(--container-max)) - 2 * var(--container-pad))) / 2
    );
    padding-left: calc(
        (100vw - (min(100vw, var(--container-max)) - 2 * var(--container-pad))) / 2
    );
}

.bleed-right {
    margin-right: calc(
        -1 * (100vw - (min(100vw, var(--container-max)) - 2 * var(--container-pad))) / 2
    );
    padding-right: calc(
        (100vw - (min(100vw, var(--container-max)) - 2 * var(--container-pad))) / 2
    );
}

.bleed-both {
    margin-inline: calc(
        -1 * (100vw - (min(100vw, var(--container-max)) - 2 * var(--container-pad))) / 2
    );
    padding-inline: calc(
        (100vw - (min(100vw, var(--container-max)) - 2 * var(--container-pad))) / 2
    );
}

@supports (width: 100dvw) {
    .bleed-left {
        margin-left: calc(
            -1 * (100dvw - (min(100dvw, var(--container-max)) - 2 * var(--container-pad))) / 2
        );
        padding-left: calc(
            (100dvw - (min(100dvw, var(--container-max)) - 2 * var(--container-pad))) / 2
        );
    }

    .bleed-right {
        margin-right: calc(
            -1 * (100dvw - (min(100dvw, var(--container-max)) - 2 * var(--container-pad))) / 2
        );
        padding-right: calc(
            (100dvw - (min(100dvw, var(--container-max)) - 2 * var(--container-pad))) / 2
        );
    }

    .bleed-both {
        margin-inline: calc(
            -1 * (100dvw - (min(100dvw, var(--container-max)) - 2 * var(--container-pad))) / 2
        );
        padding-inline: calc(
            (100dvw - (min(100dvw, var(--container-max)) - 2 * var(--container-pad))) / 2
        );
    }
}

/* FULL-BLEED — контент тоже до края экрана */
.bleed-left-content {
    margin-left: calc(
        -1 * (100vw - (min(100vw, var(--container-max)) - 2 * var(--container-pad))) / 2
    );
    padding-left: var(--container-pad);
}

.bleed-right-content {
    margin-right: calc(
        -1 * (100vw - (min(100vw, var(--container-max)) - 2 * var(--container-pad))) / 2
    );
    padding-right: var(--container-pad);
}

.bleed-both-content {
    margin-inline: calc(
        -1 * (100vw - (min(100vw, var(--container-max)) - 2 * var(--container-pad))) / 2
    );
    padding-inline: var(--container-pad);
}

@supports (width: 100dvw) {
    .bleed-left-content {
        margin-left: calc(
            -1 * (100dvw - (min(100dvw, var(--container-max)) - 2 * var(--container-pad))) / 2
        );
    }
    .bleed-right-content {
        margin-right: calc(
            -1 * (100dvw - (min(100dvw, var(--container-max)) - 2 * var(--container-pad))) / 2
        );
    }
    .bleed-both-content {
        margin-inline: calc(
            -1 * (100dvw - (min(100dvw, var(--container-max)) - 2 * var(--container-pad))) / 2
        );
    }
}

/* ================================================================
   BUTTON CIRCLE — пилюля с иконкой в кружке
   ================================================================ */
.btn-circle {
    --btn-bg:            var(--brand-bright);
    --btn-bg-hover:      var(--brand-medium);
    --btn-color:         #fff;
    --btn-icon-bg:       rgba(255, 255, 255, 0.2);
    --btn-icon-bg-hover: rgba(255, 255, 255, 0.35);
    --btn-icon-color:    #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 6px 6px 24px;
    background: rgb(var(--btn-bg));
    color: var(--btn-color);
    border: none;
    border-radius: 99px;
    font: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.btn-circle--icon-left { padding: 6px 24px 6px 6px; }

.btn-circle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--btn-icon-bg);
    color: var(--btn-icon-color);
    border-radius: 50%;
    font-size: 1rem;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.btn-circle:hover {
    background: rgb(var(--btn-bg-hover));
    color: var(--btn-color);
}

.btn-circle:hover .btn-circle__icon {
    background: var(--btn-icon-bg-hover);
    transform: scale(0.9);
}

.btn-circle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--brand-bright), 0.3);
    color: var(--btn-color);
}

/* Цветовые варианты */
.btn-circle--brand {
    --btn-bg:       var(--brand-bright);
    --btn-bg-hover: var(--brand-medium);
}

.btn-circle--red {
    --btn-bg:       var(--red-medium);
    --btn-bg-hover: var(--red-medium);
}
.btn-circle--red:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.10); }

.btn-circle--green {
    --btn-bg:       var(--green-medium);
    --btn-bg-hover: var(--green-medium);
}
.btn-circle--green:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.10); }

.btn-circle--orange {
    --btn-bg:       var(--orange-medium);
    --btn-bg-hover: var(--orange-medium);
}
.btn-circle--orange:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.10); }

.btn-circle--blue {
    --btn-bg:       var(--blue-medium);
    --btn-bg-hover: var(--blue-medium);
}
.btn-circle--blue:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.10); }

.btn-circle--gray {
    --btn-bg:       var(--gray-medium);
    --btn-bg-hover: var(--gray-medium);
}
.btn-circle--gray:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.10); }

.btn-circle--gray-light {
    --btn-bg:       var(--gray-light-extra);
    --btn-bg-hover: var(--gray-light-extra);
    --btn-color: var(--gray-pastel);
    --btn-icon-color: var(--gray-pastel);
}
.btn-circle--gray-light:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.10); }

/* Белая */
.btn-circle--white {
    --btn-bg:            255, 255, 255;
    --btn-bg-hover:      255, 255, 255;
    --btn-color:         #1f2937;
    --btn-icon-bg:       rgb(var(--brand-bright));
    --btn-icon-bg-hover: rgb(var(--brand-medium));
    --btn-icon-color:    #fff;

    box-shadow: 0 0 0 1px rgba(var(--gray-bright), 0.5);
}

.btn-circle--white:hover {
    color: var(--btn-color);
    box-shadow:
        0 0 0 1px rgba(var(--brand-bright), 0.4),
        0 4px 12px -4px rgba(var(--brand-bright), 0.25);
}

/* Модификаторы освещения */
.btn-circle--dark { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.15); }
.btn-circle--dark:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.30); }
.btn-circle--dark {
    --btn-color:      #fff;
    --btn-icon-color: #fff;
    --btn-icon-bg:        rgba(255, 255, 255, 0.18);
    --btn-icon-bg-hover:  rgba(255, 255, 255, 0.30);
}

.btn-circle--light { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.25); }
.btn-circle--light:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.45); }

.btn-circle--outline { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.btn-circle--outline:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85); }

.btn-circle--outline.btn-circle--dark {
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
        inset 0 0 0 999px rgba(0, 0, 0, 0.15);
}
.btn-circle--outline.btn-circle--dark:hover {
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
        inset 0 0 0 999px rgba(0, 0, 0, 0.30);
}

.btn-circle--outline.btn-circle--light {
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
        inset 0 0 0 999px rgba(255, 255, 255, 0.25);
}
.btn-circle--outline.btn-circle--light:hover {
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 255, 255, 0.85),
        inset 0 0 0 999px rgba(255, 255, 255, 0.45);
}

.btn-circle__text {
    color: inherit;
    line-height: 1;
    white-space: nowrap;
}

/* FULL WIDTH */
.btn-circle--full {
    width: 100%;
    padding-inline: 6px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.btn-circle--full .btn-circle__text {
    font-family: var(--font-family-alternatives);
    grid-column: 2;
    justify-self: center;
    text-align: center;
}

.btn-circle--full .btn-circle__icon {
    grid-column: 3;
    justify-self: end;
}

.btn-circle--full.btn-circle--icon-left .btn-circle__icon {
    grid-column: 1;
    justify-self: start;
}

/* Размеры */
.btn-circle.btn-circle--sm {
    padding: 4px 4px 4px 16px;
    gap: 8px;
    font-size: 0.8125rem;
}
.btn-circle.btn-circle--sm.btn-circle--icon-left { padding: 4px 16px 4px 4px; }
.btn-circle.btn-circle--sm .btn-circle__icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

.btn-circle.btn-circle--xs {
    padding: 3px 3px 3px 12px;
    gap: 6px;
    font-size: 0.75rem;
}
.btn-circle.btn-circle--xs.btn-circle--icon-left { padding: 3px 12px 3px 3px; }
.btn-circle.btn-circle--xs .btn-circle__icon {
    width: 22px;
    height: 22px;
    font-size: 0.625rem;
}

/* ================================================================
   GLASS FADE
   ================================================================ */
.glass-fade {
    --glass-direction: to right;
    --glass-fade:     70%;
    --glass-blur:     12px;
    --glass-opacity:  1;
    position: relative;
}

.glass-fade::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #fff;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    mask-image: linear-gradient(
        var(--glass-direction),
        rgba(0, 0, 0, var(--glass-opacity)) 0%,
        rgba(0, 0, 0, 0) var(--glass-fade)
    );
    -webkit-mask-image: linear-gradient(
        var(--glass-direction),
        rgba(0, 0, 0, var(--glass-opacity)) 0%,
        rgba(0, 0, 0, 0) var(--glass-fade)
    );
}

.glass-fade--to-right        { --glass-direction: to right;         }
.glass-fade--to-left         { --glass-direction: to left;          }
.glass-fade--to-bottom       { --glass-direction: to bottom;        }
.glass-fade--to-top          { --glass-direction: to top;           }
.glass-fade--to-bottom-right { --glass-direction: to bottom right;  }
.glass-fade--to-bottom-left  { --glass-direction: to bottom left;   }
.glass-fade--to-top-right    { --glass-direction: to top right;     }
.glass-fade--to-top-left     { --glass-direction: to top left;      }

.glass-fade--both::after {
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 15%,
        rgba(0, 0, 0, 0) 85%,
        rgba(0, 0, 0, 1) 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 15%,
        rgba(0, 0, 0, 0) 85%,
        rgba(0, 0, 0, 1) 100%
    );
}

/* ================================================================
   GLASS BEFORE FADE
   ================================================================ */
.glass-before-fade {
    --glass-width:      40%;
    --glass-direction:  to left;
    --glass-alpha:      0.75;
    --glass-blur:       20px;
    --glass-saturate:   180%;
    --glass-z:          10;

    position: relative;
    isolation: isolate;
}

.glass-before-fade::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: var(--glass-z);
    inset: 0;
    background: #fff;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    mask-image: linear-gradient(
        var(--glass-direction),
        rgba(0, 0, 0, var(--glass-alpha)) 0%,
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: linear-gradient(
        var(--glass-direction),
        rgba(0, 0, 0, var(--glass-alpha)) 0%,
        rgba(0, 0, 0, 0) 100%
    );
}

.glass-before-fade--to-left::after {
    inset: 0 0 0 auto;
    width: var(--glass-width);
    --glass-direction: to left;
}

.glass-before-fade--to-right::after {
    inset: 0 auto 0 0;
    width: var(--glass-width);
    --glass-direction: to right;
}

.glass-before-fade--to-top::after {
    inset: auto 0 0 0;
    height: var(--glass-width);
    --glass-direction: to top;
}

.glass-before-fade--to-bottom::after {
    inset: 0 0 auto 0;
    height: var(--glass-width);
    --glass-direction: to bottom;
}

.glass-before-fade--to-bottom-right::after { inset: 0; --glass-direction: to bottom right; }
.glass-before-fade--to-bottom-left::after  { inset: 0; --glass-direction: to bottom left;  }
.glass-before-fade--to-top-right::after    { inset: 0; --glass-direction: to top right;    }
.glass-before-fade--to-top-left::after     { inset: 0; --glass-direction: to top left;     }

.glass-before-fade--both::after {
    inset: 0;
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--glass-alpha)) 0%,
        rgba(0, 0, 0, 0) var(--glass-width),
        rgba(0, 0, 0, 0) calc(100% - var(--glass-width)),
        rgba(0, 0, 0, var(--glass-alpha)) 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--glass-alpha)) 0%,
        rgba(0, 0, 0, 0) var(--glass-width),
        rgba(0, 0, 0, 0) calc(100% - var(--glass-width)),
        rgba(0, 0, 0, var(--glass-alpha)) 100%
    );
}

/* ================================================================
   CORNER ICONS — мелкие геометрические иконки по углам блока
   ================================================================ */
.corners {
    --corner-color:  var(--gray-bright);
    --corner-size:   8px;
    --corner-offset: 8px;
    position: relative;
}

.corner {
    position: absolute;
    display: block;
    width:  var(--corner-size);
    height: var(--corner-size);
    color: rgb(var(--corner-color));
    pointer-events: none;
    z-index: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.corner--tl { top:    var(--corner-offset); left:  var(--corner-offset); }
.corner--tr { top:    var(--corner-offset); right: var(--corner-offset); }
.corner--bl { bottom: var(--corner-offset); left:  var(--corner-offset); }
.corner--br { bottom: var(--corner-offset); right: var(--corner-offset); }

.corner--square          { background: currentColor; }
.corner--square-outline  { border: 1.5px solid currentColor; background: transparent; }
.corner--circle          { background: currentColor; border-radius: 50%; }
.corner--circle-outline  { border: 1.5px solid currentColor; background: transparent; border-radius: 50%; }
.corner--triangle {
    background: currentColor;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    transform-origin: center;
}

.corner--up    { transform: rotate(0deg);   }
.corner--right { transform: rotate(90deg);  }
.corner--down  { transform: rotate(180deg); }
.corner--left  { transform: rotate(-90deg); }

.corners--gray,   .corner--gray   { --corner-color: var(--gray-bright);   }
.corners--brand,  .corner--brand  { --corner-color: var(--brand-bright);  }
.corners--red,    .corner--red    { --corner-color: var(--red-medium);    }
.corners--green,  .corner--green  { --corner-color: var(--green-medium);  }
.corners--orange, .corner--orange { --corner-color: var(--orange-medium); }
.corners--blue,   .corner--blue   { --corner-color: var(--blue-medium);   }

.corners--text-strong, .corner--text-strong { --corner-color: var(--text-strong); }
.corners--text-body,   .corner--text-body   { --corner-color: var(--text-body);   }
.corners--text-muted,  .corner--text-muted  { --corner-color: var(--text-muted);  }
.corners--text-subtle, .corner--text-subtle { --corner-color: var(--text-subtle); }

.corners--xs { --corner-size: 4px;  --corner-offset: 4px;  }
.corners--sm { --corner-size: 6px;  --corner-offset: 6px;  }
.corners--md { --corner-size: 8px;  --corner-offset: 8px;  }
.corners--lg { --corner-size: 12px; --corner-offset: 12px; }
.corners--xl { --corner-size: 16px; --corner-offset: 16px; }

/* ================================================================
   CORNER LINES — тонкие линии по углам блока
   ================================================================ */
.corner-lines {
    --line-length:    24px;
    --line-thickness: 1px;
    --line-color:     var(--gray-bright);
    --line-offset:    0px;
    position: relative;
}

.corner-line {
    position: absolute;
    background: rgb(var(--line-color));
    pointer-events: none;
    z-index: 1;
}

.corner-line--h { height: var(--line-thickness); width:  var(--line-length); }
.corner-line--v { width:  var(--line-thickness); height: var(--line-length); }

.corner-line--top    { top:    var(--line-offset); }
.corner-line--bottom { bottom: var(--line-offset); }
.corner-line--left   { left:   var(--line-offset); }
.corner-line--right  { right:  var(--line-offset); }

.corner-bracket {
    position: absolute;
    width:  var(--line-length);
    height: var(--line-length);
    pointer-events: none;
    z-index: 1;
}

.corner-bracket::before,
.corner-bracket::after {
    content: '';
    position: absolute;
    background: rgb(var(--line-color));
}

.corner-bracket::before { height: var(--line-thickness); width: 100%; }
.corner-bracket::after  { width:  var(--line-thickness); height: 100%; }

.corner-bracket--tl { top:    var(--line-offset); left:  var(--line-offset); }
.corner-bracket--tr { top:    var(--line-offset); right: var(--line-offset); }
.corner-bracket--bl { bottom: var(--line-offset); left:  var(--line-offset); }
.corner-bracket--br { bottom: var(--line-offset); right: var(--line-offset); }

.corner-bracket--tl::before { top: 0; left: 0;  }
.corner-bracket--tl::after  { top: 0; left: 0;  }
.corner-bracket--tr::before { top: 0; right: 0; }
.corner-bracket--tr::after  { top: 0; right: 0; }
.corner-bracket--bl::before { bottom: 0; left: 0;  }
.corner-bracket--bl::after  { bottom: 0; left: 0;  }
.corner-bracket--br::before { bottom: 0; right: 0; }
.corner-bracket--br::after  { bottom: 0; right: 0; }

.corner-lines--gray,   .corner-line--gray,   .corner-bracket--gray   { --line-color: var(--gray-bright);   }
.corner-lines--brand,  .corner-line--brand,  .corner-bracket--brand  { --line-color: var(--brand-bright);  }
.corner-lines--red,    .corner-line--red,    .corner-bracket--red    { --line-color: var(--red-medium);    }
.corner-lines--green,  .corner-line--green,  .corner-bracket--green  { --line-color: var(--green-medium);  }
.corner-lines--orange, .corner-line--orange, .corner-bracket--orange { --line-color: var(--orange-medium); }
.corner-lines--blue,   .corner-line--blue,   .corner-bracket--blue   { --line-color: var(--blue-medium);   }

.corner-lines--text-strong, .corner-line--text-strong, .corner-bracket--text-strong { --line-color: var(--text-strong); }
.corner-lines--text-body,   .corner-line--text-body,   .corner-bracket--text-body   { --line-color: var(--text-body);   }
.corner-lines--text-muted,  .corner-line--text-muted,  .corner-bracket--text-muted  { --line-color: var(--text-muted);  }
.corner-lines--text-subtle, .corner-line--text-subtle, .corner-bracket--text-subtle { --line-color: var(--text-subtle); }

.corner-lines--xs, .corner-line--xs, .corner-bracket--xs { --line-length: 12px; --line-thickness: 1px; }
.corner-lines--sm, .corner-line--sm, .corner-bracket--sm { --line-length: 20px; --line-thickness: 1px; }
.corner-lines--md, .corner-line--md, .corner-bracket--md { --line-length: 32px; --line-thickness: 1px; }
.corner-lines--lg, .corner-line--lg, .corner-bracket--lg { --line-length: 48px; --line-thickness: 2px; }
.corner-lines--xl, .corner-line--xl, .corner-bracket--xl { --line-length: 72px; --line-thickness: 2px; }

.corner-lines--thin,  .corner-line--thin,  .corner-bracket--thin  { --line-thickness: 1px; }
.corner-lines--thick, .corner-line--thick, .corner-bracket--thick { --line-thickness: 3px; }

.corner-lines--half,    .corner-line--half,    .corner-bracket--half    { --line-length: 50%; }
.corner-lines--third,   .corner-line--third,   .corner-bracket--third   { --line-length: 33.333%; }
.corner-lines--quarter, .corner-line--quarter, .corner-bracket--quarter { --line-length: 25%; }
.corner-lines--full,    .corner-line--full,    .corner-bracket--full    { --line-length: 100%; }

/* ================================================================
   CARDS
   ================================================================ */
.card {
    --card-bg:      255, 255, 255;
    --card-color:   var(--text-body);
    --card-border:  var(--gray-bright);
    --card-divider: var(--gray-pastel);
    --card-radius:  var(--radius-12, 12px);

    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgb(var(--card-bg));
    color: rgb(var(--card-color));
    border: 1px solid rgb(var(--card-border));
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card__header {
    padding: 14px 18px;
    border-bottom: 1px solid rgb(var(--card-divider));
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
}

.card__body {
    padding: 18px;
    flex: 1 1 auto;
}

.card__footer {
    padding: 14px 18px;
    border-top: 1px solid rgb(var(--card-divider));
    font-size: 0.875rem;
}

.card__title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 6px;
    color: inherit;
}

.card__text {
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0;
    color: inherit;
    opacity: 0.85;
}

.card__text + .card__text { margin-top: 8px; }

.card__body > *:last-child,
.card__footer > *:last-child { margin-bottom: 0; }

/* Мягкие варианты */
.card--brand  { --card-bg: var(--brand-pastel);  --card-color: var(--brand-medium);  --card-border: var(--brand-pastel);  --card-divider: rgba(var(--brand-medium), 0.2); }
.card--red    { --card-bg: var(--red-pastel);    --card-color: var(--red-medium);    --card-border: var(--red-pastel);    --card-divider: rgba(var(--red-medium), 0.2); }
.card--green  { --card-bg: var(--green-pastel);  --card-color: var(--green-medium);  --card-border: var(--green-pastel);  --card-divider: rgba(var(--green-medium), 0.2); }
.card--orange { --card-bg: var(--orange-pastel); --card-color: var(--orange-medium); --card-border: var(--orange-pastel); --card-divider: rgba(var(--orange-medium), 0.2); }
.card--blue   { --card-bg: var(--blue-pastel);   --card-color: var(--blue-medium);   --card-border: var(--blue-pastel);   --card-divider: rgba(var(--blue-medium), 0.2); }
.card--gray   { --card-bg: var(--gray-pastel);   --card-color: var(--gray-medium);   --card-border: var(--gray-pastel);   --card-divider: rgba(var(--gray-medium), 0.2); }

/* Плотные варианты */
.card--brand-solid  { --card-bg: var(--brand-bright);  --card-color: 255, 255, 255; --card-border: var(--brand-bright);  --card-divider: rgba(255, 255, 255, 0.18); }
.card--red-solid    { --card-bg: var(--red-medium);    --card-color: 255, 255, 255; --card-border: var(--red-medium);    --card-divider: rgba(255, 255, 255, 0.18); }
.card--green-solid  { --card-bg: var(--green-medium);  --card-color: 255, 255, 255; --card-border: var(--green-medium);  --card-divider: rgba(255, 255, 255, 0.18); }
.card--orange-solid { --card-bg: var(--orange-medium); --card-color: 255, 255, 255; --card-border: var(--orange-medium); --card-divider: rgba(255, 255, 255, 0.18); }
.card--blue-solid   { --card-bg: var(--blue-medium);   --card-color: 255, 255, 255; --card-border: var(--blue-medium);   --card-divider: rgba(255, 255, 255, 0.18); }
.card--gray-solid   { --card-bg: var(--gray-medium);   --card-color: 255, 255, 255; --card-border: var(--gray-medium);   --card-divider: rgba(255, 255, 255, 0.18); }

/* Контурные */
.card--outline {
    --card-bg:     transparent;
    --card-color:  var(--text-body);
    --card-border: var(--gray-bright);
}
.card--outline-solid {
    --card-bg:     transparent;
    --card-color:  255, 255, 255;
    --card-border: rgba(255, 255, 255, 0.25);
    --card-divider: rgba(255, 255, 255, 0.15);
}

/* Размеры */
.card--sm .card__header,
.card--sm .card__footer { padding: 10px 14px; font-size: 0.875rem; }
.card--sm .card__body   { padding: 14px; }
.card--sm .card__title  { font-size: 1rem; }
.card--sm .card__text   { font-size: 0.875rem; }

.card--lg .card__header,
.card--lg .card__footer { padding: 18px 24px; }
.card--lg .card__body   { padding: 24px; }
.card--lg .card__title  { font-size: 1.25rem; }

/* Hover */
.card--hoverable { cursor: default; }
.card--hoverable:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px rgba(var(--gray-medium), 0.35);
}

/* Flush */
.row--flush { gap: 0; }
.row--flush > [class*="col-"] > .card {
    border-radius: 0;
    margin-left: -1px;
}
.row--flush > [class*="col-"]:first-child > .card {
    margin-left: 0;
    border-top-left-radius: var(--card-radius, 12px);
    border-bottom-left-radius: var(--card-radius, 12px);
}
.row--flush > [class*="col-"]:last-child > .card {
    border-top-right-radius: var(--card-radius, 12px);
    border-bottom-right-radius: var(--card-radius, 12px);
}

.row--flush-v { gap: 0; }
.row--flush-v > [class*="col-"] > .card { border-radius: 0; margin-top: -1px; }
.row--flush-v > [class*="col-"]:first-child > .card {
    margin-top: 0;
    border-top-left-radius: var(--card-radius, 12px);
    border-top-right-radius: var(--card-radius, 12px);
}
.row--flush-v > [class*="col-"]:last-child > .card {
    border-bottom-left-radius: var(--card-radius, 12px);
    border-bottom-right-radius: var(--card-radius, 12px);
}

.row--flush-all { gap: 0; }
.row--flush-all > [class*="col-"] > .card { border-radius: 0; margin-left: -1px; margin-top: -1px; }
.row--flush-all > [class*="col-"]:nth-child(-n + 1) > .card,
.row--flush-all > [class*="col-"] > .card:first-child { margin-top: 0; }

/* Равная высота */
.row--cards > [class*="col-"] { display: flex; }
.row--cards > [class*="col-"] > .card { flex: 1 1 auto; width: 100%; }

[class*="col-"]:has(> .card--equal) { display: flex; }
.card--equal { flex: 1 1 auto; width: 100%; }

/* ================================================================
   BADGES
   ================================================================ */
.badge {
    --badge-bg:     var(--gray-pastel);
    --badge-color:  var(--text-body);
    --badge-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    padding: 0.2em 0.7em;
    background: rgb(var(--badge-bg));
    color: rgb(var(--badge-color));
    border: 1px solid var(--badge-border);
    border-radius: 99px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

.badge > i { font-size: 0.9em; line-height: 1; }

.badge--sm { padding: 0.15em 0.55em; font-size: 0.6875rem; }
.badge--lg { padding: 0.3em 0.9em;   font-size: 0.875rem;  }

.badge--brand  { --badge-bg: var(--brand-pastel);  --badge-color: var(--brand-medium);  }
.badge--red    { --badge-bg: var(--red-pastel);    --badge-color: var(--red-medium);    }
.badge--green  { --badge-bg: var(--green-pastel);  --badge-color: var(--green-medium);  }
.badge--orange { --badge-bg: var(--orange-pastel); --badge-color: var(--orange-medium); }
.badge--blue   { --badge-bg: var(--blue-pastel);   --badge-color: var(--blue-medium);   }
.badge--gray   { --badge-bg: var(--gray-pastel);   --badge-color: var(--gray-medium);   }

.badge--brand-solid  { --badge-bg: var(--brand-bright);  --badge-color: 255, 255, 255; }
.badge--red-solid    { --badge-bg: var(--red-medium);    --badge-color: 255, 255, 255; }
.badge--green-solid  { --badge-bg: var(--green-medium);  --badge-color: 255, 255, 255; }
.badge--orange-solid { --badge-bg: var(--orange-medium); --badge-color: 255, 255, 255; }
.badge--blue-solid   { --badge-bg: var(--blue-medium);   --badge-color: 255, 255, 255; }
.badge--gray-solid   { --badge-bg: var(--gray-medium);   --badge-color: 255, 255, 255; }

.badge--brand-outline  { --badge-bg: transparent; --badge-color: var(--brand-bright);  --badge-border: rgba(var(--brand-bright), 0.5);  }
.badge--red-outline    { --badge-bg: transparent; --badge-color: var(--red-medium);    --badge-border: rgba(var(--red-medium), 0.5);    }
.badge--green-outline  { --badge-bg: transparent; --badge-color: var(--green-medium);  --badge-border: rgba(var(--green-medium), 0.5);  }
.badge--orange-outline { --badge-bg: transparent; --badge-color: var(--orange-medium); --badge-border: rgba(var(--orange-medium), 0.5); }
.badge--blue-outline   { --badge-bg: transparent; --badge-color: var(--blue-medium);   --badge-border: rgba(var(--blue-medium), 0.5);   }
.badge--gray-outline   { --badge-bg: transparent; --badge-color: var(--gray-medium);   --badge-border: rgba(var(--gray-medium), 0.5);   }

/* Обратная совместимость */
.badge-success {
    --badge-bg:     var(--green-pastel);
    --badge-color:  var(--green-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    padding: 0.2em 0.7em;
    background: rgb(var(--badge-bg));
    color: rgb(var(--badge-color));
    border: 1px solid transparent;
    border-radius: 99px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* ================================================================
   TYPEWRITER HERO
   ================================================================ */
.hero-title {
    color: #fff;
    font-family: var(--font-family-alternatives);
    font-size: clamp(2rem, 1.5rem + 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0;
    min-height: 1.15em;
    cursor: default;
}

.hero-title span.hero-starter { font-weight: 300; }
.hero-title span:last-child { font-weight: 600; }

.hero-typewriter {
    display: inline-block;
    white-space: nowrap;
}

.hero-typewriter__cursor {
    display: inline-block;
    width: 0.06em;
    height: 1em;
    background: currentColor;
    margin-left: 0.05em;
    vertical-align: -0.1em;
    animation: hero-cursor 0.9s steps(1) infinite;
}

@keyframes hero-cursor {
    0%, 50%   { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-typewriter__cursor { animation: none; opacity: 1; }
}

/* ================================================================
   SECTION PADDING
   ================================================================ */
.section-p-0 { padding: var(--space-sec-0); }
.section-p-1 { padding: var(--space-sec-1); }
.section-p-2 { padding: var(--space-sec-2); }
.section-p-3 { padding: var(--space-sec-3); }
.section-p-4 { padding: var(--space-sec-4); }
.section-p-5 { padding: var(--space-sec-5); }
.section-p-6 { padding: var(--space-sec-6); }
.section-p-7 { padding: var(--space-sec-7); }
.section-p-8 { padding: var(--space-sec-8); }

.section-py-0 { padding-block: var(--space-sec-0); }
.section-py-1 { padding-block: var(--space-sec-1); }
.section-py-2 { padding-block: var(--space-sec-2); }
.section-py-3 { padding-block: var(--space-sec-3); }
.section-py-4 { padding-block: var(--space-sec-4); }
.section-py-5 { padding-block: var(--space-sec-5); }
.section-py-6 { padding-block: var(--space-sec-6); }
.section-py-7 { padding-block: var(--space-sec-7); }
.section-py-8 { padding-block: var(--space-sec-8); }

.section-px-0 { padding-inline: var(--space-sec-0); }
.section-px-1 { padding-inline: var(--space-sec-1); }
.section-px-2 { padding-inline: var(--space-sec-2); }
.section-px-3 { padding-inline: var(--space-sec-3); }
.section-px-4 { padding-inline: var(--space-sec-4); }
.section-px-5 { padding-inline: var(--space-sec-5); }
.section-px-6 { padding-inline: var(--space-sec-6); }
.section-px-7 { padding-inline: var(--space-sec-7); }
.section-px-8 { padding-inline: var(--space-sec-8); }

.section-pt-0 { padding-top: var(--space-sec-0); }
.section-pt-1 { padding-top: var(--space-sec-1); }
.section-pt-2 { padding-top: var(--space-sec-2); }
.section-pt-3 { padding-top: var(--space-sec-3); }
.section-pt-4 { padding-top: var(--space-sec-4); }
.section-pt-5 { padding-top: var(--space-sec-5); }
.section-pt-6 { padding-top: var(--space-sec-6); }
.section-pt-7 { padding-top: var(--space-sec-7); }
.section-pt-8 { padding-top: var(--space-sec-8); }

.section-pb-0 { padding-bottom: var(--space-sec-0); }
.section-pb-1 { padding-bottom: var(--space-sec-1); }
.section-pb-2 { padding-bottom: var(--space-sec-2); }
.section-pb-3 { padding-bottom: var(--space-sec-3); }
.section-pb-4 { padding-bottom: var(--space-sec-4); }
.section-pb-5 { padding-bottom: var(--space-sec-5); }
.section-pb-6 { padding-bottom: var(--space-sec-6); }
.section-pb-7 { padding-bottom: var(--space-sec-7); }
.section-pb-8 { padding-bottom: var(--space-sec-8); }

.section-ps-0 { padding-inline-start: var(--space-sec-0); }
.section-ps-1 { padding-inline-start: var(--space-sec-1); }
.section-ps-2 { padding-inline-start: var(--space-sec-2); }
.section-ps-3 { padding-inline-start: var(--space-sec-3); }
.section-ps-4 { padding-inline-start: var(--space-sec-4); }
.section-ps-5 { padding-inline-start: var(--space-sec-5); }
.section-ps-6 { padding-inline-start: var(--space-sec-6); }
.section-ps-7 { padding-inline-start: var(--space-sec-7); }
.section-ps-8 { padding-inline-start: var(--space-sec-8); }

.section-pe-0 { padding-inline-end: var(--space-sec-0); }
.section-pe-1 { padding-inline-end: var(--space-sec-1); }
.section-pe-2 { padding-inline-end: var(--space-sec-2); }
.section-pe-3 { padding-inline-end: var(--space-sec-3); }
.section-pe-4 { padding-inline-end: var(--space-sec-4); }
.section-pe-5 { padding-inline-end: var(--space-sec-5); }
.section-pe-6 { padding-inline-end: var(--space-sec-6); }
.section-pe-7 { padding-inline-end: var(--space-sec-7); }
.section-pe-8 { padding-inline-end: var(--space-sec-8); }

/* ================================================================
   MENU PROFILE + DROPDOWN PILLS
   ================================================================ */
.menu__profile { position: relative; }

.menu__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 0;
    margin: 0;
    list-style: none;
    background: transparent;
    border: none;
    box-shadow: none;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.25s;
    z-index: 50;
}

.menu__dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.menu__profile:hover .menu__dropdown,
.menu__profile:focus-within .menu__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s;
}

.menu__dropdown-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0;
    margin: 0;
    background: #fff;
    color: rgb(var(--brand-bright));
    border-radius: 99px;
    font: inherit;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 4px 12px -6px rgba(var(--gray-medium), 0.25);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.menu__dropdown-btn > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    font-size: 1rem;
    line-height: 1;
}

.menu__dropdown-btn .btn-expand__label {
    display: inline-block;
    max-width: 0;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    transition:
        max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
}

.menu__profile:hover .menu__dropdown-btn .btn-expand__label,
.menu__profile:focus-within .menu__dropdown-btn .btn-expand__label {
    max-width: 200px;
    margin-right: 20px;
    opacity: 1;
    transition-delay: 0.5s;
}

.menu__profile:hover .menu__dropdown > li:nth-child(2) .btn-expand__label,
.menu__profile:focus-within .menu__dropdown > li:nth-child(2) .btn-expand__label { transition-delay: 0.6s; }
.menu__profile:hover .menu__dropdown > li:nth-child(3) .btn-expand__label,
.menu__profile:focus-within .menu__dropdown > li:nth-child(3) .btn-expand__label { transition-delay: 0.7s; }
.menu__profile:hover .menu__dropdown > li:nth-child(4) .btn-expand__label,
.menu__profile:focus-within .menu__dropdown > li:nth-child(4) .btn-expand__label { transition-delay: 0.8s; }

.menu__dropdown-btn:hover,
.menu__dropdown-btn:focus-visible {
    background: rgba(var(--brand-bright), 0.08);
    color: rgb(var(--brand-bright));
    border-color: rgb(var(--brand-bright));
    outline: 0;
    box-shadow: 0 6px 16px -8px rgba(var(--brand-bright), 0.35);
}

.menu__dropdown-btn--danger:hover,
.menu__dropdown-btn--danger:focus-visible {
    background: rgba(var(--red-medium), 0.08);
    color: rgb(var(--red-medium));
    border-color: rgb(var(--red-medium));
    box-shadow: 0 6px 16px -8px rgba(var(--red-medium), 0.35);
}


/* ================================================================
   COLOR PICKER — триггер в стиле .field--filled
   ================================================================ */

.color-picker-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 0.9375rem;
    color: rgb(var(--text-body));
    cursor: pointer;
    text-align: left;
    border-radius: inherit;
}

.color-picker-trigger__swatch {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--picked-color, #8E8E8E);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(var(--gray-bright), 0.55);
    transition: background-color 0.15s ease;
}

.color-picker-trigger__value {
    flex: 1;
    min-width: 0;
    color: rgb(var(--text-body));
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.color-picker-trigger__arrow {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: rgb(var(--text-muted));
    transition: transform 0.2s ease;
}

.color-picker-trigger[aria-expanded="true"] .color-picker-trigger__arrow {
    transform: rotate(180deg);
}

/* Убираем зум, чтобы поле совпадало по высоте с остальными */
.field--filled .color-picker-anchor {
    position: absolute;
    top: 100%;
    left: 0;
    /*right: 0;*/
    width: 0;
    height: 0;
    z-index: 30;
}

/* ================================================================
   Стилизация самого Pickr под наш UI
   ================================================================ */
.color-picker-wrap {
    position: relative;
}
.pcr-app {
    font-family: var(--font-family-base) !important;
    border-radius: var(--radius-16) !important;
    box-shadow:
        0 12px 32px -12px rgba(var(--gray-medium), 0.35),
        0 4px 8px -4px rgba(var(--gray-medium), 0.15) !important;
    /*border: 1px solid rgba(var(--gray-bright), 0.55) !important;*/
    border: 0;
    padding: 14px !important;
}

.pcr-app .pcr-interaction input {
    font-family: inherit !important;
    font-size: 0.8125rem !important;
    border-radius: var(--radius-8) !important;
    background: rgb(255,255,255) !important;
    border: 1px solid rgba(var(--gray-bright), 0.55) !important;
    color: rgb(var(--text-heading)) !important;
    padding: 6px 10px !important;
    margin-bottom: 3px;
}

.pcr-app .pcr-interaction input:focus {
    outline: none !important;
    border-color: rgb(var(--brand-bright)) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-bright), 0.15) !important;
}

.pcr-app .pcr-interaction .pcr-save {
    background: rgb(var(--brand-bright)) !important;
    border-radius: var(--radius-99) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.pcr-app .pcr-interaction .pcr-save:hover {
    background: rgb(var(--brand-medium)) !important;
}

.pcr-app .pcr-interaction .pcr-type {
    background: transparent !important;
    color: rgb(var(--text-muted)) !important;
    border-radius: var(--radius-99) !important;
    font-size: 0.55rem !important;
    padding: 4px 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.pcr-app .pcr-interaction .pcr-type.active {
    background: rgba(var(--brand-bright), 0.12) !important;
    color: rgb(var(--brand-bright)) !important;
}


.pcr-button {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pcr-app .pcr-interaction .pcr-result {
    min-width: auto;
}


/* ================================================================
   BG ICONS — пастельные иконки-декорации в фоне блока
   ---------------------------------------------------------------
   Требует на родителе:
   - position: relative
   - overflow: hidden
   - isolation: isolate (для z-index)
   ================================================================ */

/* Родитель */
.bg-icons-parent {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Слой с иконками — растянут на весь родитель,
   клики сквозь него проходят */
.bg-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Каждая иконка — absolute, со своим цветом и анимацией */
.bg-icons__item {
    position: absolute;
    display: inline-block;
    line-height: 1;
    color: rgb(var(--brand-bright));
    opacity: 0.12;
    user-select: none;
    will-change: transform;
    animation: bg-icon-float 8s ease-in-out infinite;
}

/* --- Позиции, размеры, цвета --- */

/* Иконка 1 — верх-лево, брендовая */
.bg-icons__item--1 {
    top: -20px;
    left: -1;
    font-size: 220px;
    color: rgb(var(--brand-bright));
    opacity: 0.10;
    animation-duration: 9s;
    animation-delay: 0s;
}

/* Иконка 2 — низ-лево, зелёная */
.bg-icons__item--2 {
    bottom: -58px;
    left: 24%;
    font-size: 180px;
    color: rgb(var(--green-medium));
    opacity: 0.12;
    animation-duration: 11s;
    animation-delay: -2s;
}

/* Иконка 3 — верх-право, оранжевая */
.bg-icons__item--3 {
    bottom: -50px;
    right: -1%;
    font-size: 230px;
    color: rgb(var(--orange-medium));
    opacity: 0.10;
    animation-duration: 10s;
    animation-delay: -4s;
}

/* Иконка 4 — низ-право, голубая */
.bg-icons__item--4 {
    top: 38px;
    right: 30%;
    font-size: 190px;
    color: rgb(var(--blue-medium));
    opacity: 0.12;
    animation-duration: 12s;
    animation-delay: -6s;
}

/* --- Анимация «парения» --- */
@keyframes bg-icon-float {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, -18px, 0) rotate(3deg);
    }
}

/* Контент поверх иконок */
.bg-icons-parent > .col-12,
.bg-icons-parent > [class*="col-"] {
    position: relative;
    z-index: 1;
}

/* Уважаем reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .bg-icons__item {
        animation: none;
    }
}

@media (max-width: 767px) {
    .bg-icons__item--1 { font-size: 120px; }
    .bg-icons__item--2 { font-size: 100px; }
    .bg-icons__item--3 { font-size: 140px; }
    .bg-icons__item--4 { font-size: 100px; }
}

@media (max-width: 767px) {
    .bg-icons__item--2,
    .bg-icons__item--4 {
        display: none;
    }
}

.zindex-1 {
    z-index: 1;
}
.zindex-5 {
    z-index: 5;
}
.zindex-10 {
    z-index: 10;
}


/* ================================================================
   CODE BLOCK — тёмный блок с кнопкой копирования
   ================================================================ */

.code-block {
    position: relative;
    /*background: #1e3a4c; */                 /* тёмно-синий, как на скрине */
    /*color: #a8c5d6;   */                    /* приглушённый светлый текст */

    background: rgb(var(--brand-terminal));
    color: rgba(255, 255, 255, 0.9);

    border-radius: var(--radius-12);
    padding: 20px 22px;
    overflow: hidden;
    isolation: isolate;
    transition: background-color 0.2s ease;
}

/* Лёгкая подсветка в углу — для глубины */
.code-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top right,
        rgba(255, 255, 255, 0.04),
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}

/* --- Собственно код --- */
.code-block__pre {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Courier New', 'SF Mono', Consolas, Monaco,
                 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: inherit;
    white-space: pre-wrap;              /* длинные строки переносятся */
    word-break: break-word;
    overflow-x: auto;
    tab-size: 4;
    -webkit-font-smoothing: antialiased;
}

.code-block__pre code {
    font: inherit;
    color: inherit;
    background: none;
    padding: 0;
    border: none;
    white-space: inherit;
    word-break: inherit;
}

/* Токены (подсветка синтаксиса) */
.code-block .tok-tag     { color: #7dd3fc; }   /* тег <script> */
.code-block .tok-attr    { color: #c4b5fd; }   /* атрибут src= */
.code-block .tok-string  { color: #fbbf24; }   /* значение строки — жёлтый как на скрине */
.code-block .tok-punct   { color: #64748b; }   /* угловые скобки, кавычки */

/* --- Кнопка копирования --- */
.code-block__copy {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;

    
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-8);

    font-size: 0.875rem;
    cursor: pointer;

    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

/* Показ кнопки при наведении на блок */
.code-block:hover .code-block__copy,
.code-block:focus-within .code-block__copy {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.code-block__copy:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.code-block__copy:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.4);
}

.code-block__copy:active {
    transform: scale(0.95);
}

/* Состояние «скопировано» */
.code-block__copy.is-copied {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

/* Мобильные — показывать кнопку всегда (нет hover) */
@media (hover: none) {
    .code-block__copy {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* ================================================================
   BG CLOUDS — летающие облака по бокам блока
   ---------------------------------------------------------------
   Клипаются по границам .container--clip.
   Родитель .row — рисует поверх облаков за счёт z-index.
   ================================================================ */

.container--clip {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Слой облаков — растянут по всей высоте контейнера, под контентом */
.bg-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Каждое облако — absolute, с собственной анимацией */
.bg-clouds__item {
    position: absolute;
    line-height: 1;
    color: rgb(var(--brand-bright));
    opacity: 0.10;
    user-select: none;
    will-change: transform;
    animation: bg-cloud-float 12s ease-in-out infinite;
}

/* --- Левое облако: верх-лево, уходит за левый край --- */
.bg-clouds__item--left {
    top: 8%;
    left: -60px;
    font-size: 190px;
    animation-duration: 14s;
    animation-delay: 0s;
}

/* --- Правое облако: низ-право, уходит за правый край --- */
.bg-clouds__item--right {
    bottom: 6%;
    right: -70px;
    font-size: 200px;
    color: rgb(var(--blue-medium));
    opacity: 0.12;
    animation-duration: 16s;
    animation-delay: -6s;
}

/* Контент поверх облаков */
.bg-clouds + .row {
    position: relative;
    z-index: 1;
}

/* --- Парение --- */
@keyframes bg-cloud-float {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(14px, -18px, 0);
    }
}

/* Отдельная траектория для правого — влево-вверх, не синхронно */
.bg-clouds__item--right {
    animation-name: bg-cloud-float-reverse;
}

@keyframes bg-cloud-float-reverse {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(-18px, -22px, 0);
    }
}

/* Уважаем reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .bg-clouds__item {
        animation: none;
    }
}

/* На мобильных — уменьшаем и прижимаем ближе к краю */
@media (max-width: 767px) {
    .bg-clouds__item--left {
        font-size: 100px;
        left: -40px;
        top: 4%;
    }
    .bg-clouds__item--right {
        font-size: 110px;
        right: -46px;
        bottom: 4%;
    }
}


/* ================================================================
   MINI BROWSER — блок с кодом и превью результата
   ---------------------------------------------------------------
   Слева — код HTML, справа — как это выглядит в браузере.
   Верхняя полоса — декоративная (traffic lights + url).
   ================================================================ */

.mini-browser {
    position: relative;
    background: #1e3a4c;             /* тёмный корпус, как у code-block */
    border-radius: var(--radius-16);
    overflow: hidden;
    box-shadow:
        0 24px 48px -24px rgba(var(--gray-medium), 0.35),
        0 8px 16px -8px rgba(var(--gray-medium), 0.15);
}

/* ---------- Верхняя панель ---------- */
.mini-browser__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mini-browser__dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.mini-browser__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}
.mini-browser__dot:nth-child(1) { background: #f87171; }  /* red */
.mini-browser__dot:nth-child(2) { background: #fbbf24; }  /* yellow */
.mini-browser__dot:nth-child(3) { background: #4ade80; }  /* green */

.mini-browser__url {
    flex: 1;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-6);
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    max-width: 320px;
    margin-inline: auto;
}

.mini-browser__spacer {
    width: 42px;  /* компенсирует ширину точек, чтобы url был по центру */
    flex-shrink: 0;
}

/* ---------- Тело: код + превью ---------- */
.mini-browser__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 280px;
}

.mini-browser__pane {
    position: relative;
    min-width: 0;
}

/* --- Левая — код --- */
.mini-browser__pane--code {
    padding: 20px 22px;
    background: #1e3a4c;
    overflow: auto;
}

.mini-browser__pre {
    margin: 0;
    font-family: 'Courier New', 'SF Mono', Consolas, Monaco, monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: #a8c5d6;
    white-space: pre-wrap;
    word-break: break-word;
    tab-size: 4;
}

.mini-browser__pre code {
    font: inherit;
    color: inherit;
    background: none;
}

/* --- Правая — превью --- */
.mini-browser__pane--preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ececec;
    padding: 24px;
    /* Тонкая полоска слева — визуальный разделитель */
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.mini-browser__preview-inner {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
}

.mini-browser__preview-icon {
    font-size: 3rem;
    color: rgb(var(--brand-bright));
    transition: transform 0.2s ease, color 0.2s ease;
}

.mini-browser__preview-icon:hover {
    transform: scale(1.1);
    color: rgb(var(--brand-medium));
}

/* --- Кнопка копирования — переиспользуем .code-block__copy --- */
.mini-browser__copy {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;

    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-8);

    font-size: 0.875rem;
    cursor: pointer;

    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}

.mini-browser__pane--code:hover .mini-browser__copy,
.mini-browser__pane--code:focus-within .mini-browser__copy {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mini-browser__copy:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.mini-browser__copy:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.4);
}
.mini-browser__copy:active {
    transform: scale(0.95);
}
.mini-browser__copy.is-copied {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

/* ================================================================
   АДАПТИВ
   ================================================================ */

/* На планшете — код и превью в столбик */
@media (max-width: 767px) {
    .mini-browser__body {
        grid-template-columns: 1fr;
    }

    .mini-browser__pane--preview {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        min-height: 200px;
    }

    .mini-browser__pre {
        font-size: 0.75rem;
    }

    .mini-browser__preview-icon {
        font-size: 2.25rem;
    }

    .mini-browser__url {
        max-width: 180px;
        font-size: 0.6875rem;
    }

    /* На мобильных кнопка копирования видна всегда */
    .mini-browser__copy {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* ================================================================
   DEMO TABS — переключатели примеров над мини-браузером
   ================================================================ */

.demo-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.demo-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 16px;
    background: #fff;
    color: rgb(var(--text-muted));

    border: 1px solid rgba(var(--gray-bright), 0.55);
    border-radius: 99px;

    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.demo-tab i {
    font-size: 0.8125rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.demo-tab:hover {
    color: rgb(var(--text-strong));
    border-color: rgb(var(--gray-bright));
    background: #fff;
}

.demo-tab:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--brand-bright), 0.25);
}

.demo-tab.is-active {
    background: rgb(var(--brand-bright));
    color: #fff;
    border-color: rgb(var(--brand-bright));
    box-shadow: 0 4px 12px -4px rgba(var(--brand-bright), 0.35);
}

.demo-tab.is-active i {
    opacity: 1;
}

@media (max-width: 480px) {
    .demo-tab {
        padding: 7px 12px;
        font-size: 0.8125rem;
    }
    .demo-tab i {
        display: none; /* чтобы кнопки не распухали на мобильном */
    }
}

/* ================================================================
   ПЛАВНАЯ СМЕНА КОНТЕНТА В МИНИ-БРАУЗЕРЕ
   ================================================================ */

.mini-browser__pre,
.mini-browser__preview-inner {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.mini-browser.is-switching .mini-browser__pre,
.mini-browser.is-switching .mini-browser__preview-inner {
    opacity: 0;
    transform: translateY(4px);
}

/* Кнопка в превью (демо «С кнопкой») */
.mini-browser__demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px;
    background: rgb(var(--brand-bright));
    color: #fff;

    border: 0;
    border-radius: 99px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;

    transition: background-color 0.2s ease, transform 0.05s ease;
}

.mini-browser__demo-btn:hover {
    background: rgb(var(--brand-medium));
}

.mini-browser__demo-btn:active {
    transform: translateY(1px);
}

/* Демо-анимации иконок */
@keyframes demo-spin {
    to { transform: rotate(360deg); }
}

@keyframes demo-ring {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(-15deg); }
    20%, 40% { transform: rotate(15deg); }
}

@keyframes demo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.demo-spin  { animation: demo-spin 3s linear infinite; }
.demo-ring  { animation: demo-ring 2s ease-in-out infinite; }
.demo-float { animation: demo-float 3s ease-in-out infinite; }


/* ================================================================
   MODAL — модальное окно с оверлеем
   ---------------------------------------------------------------
   Структура:
     .modal            — фиксированный слой на весь экран
       .modal__overlay — фон, клик — shake, не закрывает
       .modal__dialog  — обёртка, overflow: visible (крестик не режется)
         .modal__close — крестик (position: absolute, за границей)
         .modal__inner — скролл-слой, overflow-y: auto
           header / body / footer
   ================================================================ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    /* Скрыто по умолчанию */
    visibility: hidden;
    pointer-events: none;
}

.modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

/* ---------- Оверлей ---------- */
.modal__overlay {
    position: absolute;
    inset: 0;

    background: rgba(var(--brand-bright), 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    transition: opacity 0.25s ease;
}

.modal.is-open .modal__overlay {
    opacity: 1;
}

/* ---------- Обёртка диалога (без скролла) ---------- */
.modal__dialog {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: var(--modal-width-max);
    max-height: calc(100vh - 40px);

    background: #fff;
    border-radius: var(--radius-16);
    box-shadow:
        0 24px 48px -12px rgba(var(--brand-medium), 0.25),
        0 8px 16px -8px rgba(0, 0, 0, 0.08);

    /* ВАЖНО: без overflow — иначе крестик обрезается */
    overflow: visible;

    /* Анимация появления */
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition:
        opacity 0.25s ease,
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.is-open .modal__dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ---------- Внутренний скролл-слой ---------- */
.modal__inner {
    flex: 1 1 auto;
    min-height: 0;              /* ключ: позволяет flex-ребёнку скроллиться */

    overflow-y: auto;
    overflow-x: hidden;         /* по X скролла быть не должно */
    overscroll-behavior: contain;

    /* Радиус повторяет dialog, чтобы фон не выходил за скругление */
    border-radius: inherit;
}

/* ================================================================
   Кнопка закрытия — за границей модалки
   ================================================================ */
.modal__close {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;

    background: rgb(var(--brand-bright));
    color: #fff;
    /*border: 3px solid #fff;*/
    border-radius: 50%;

    font-size: 1rem;
    cursor: pointer;

    box-shadow: 0 4px 12px -4px rgba(var(--brand-bright), 0.5);

    transition:
        background-color 0.15s ease,
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s ease;
}

.modal__close:hover {
    background: rgb(var(--brand-medium));
    transform: rotate(90deg) scale(1.05);
    box-shadow: 0 6px 16px -4px rgba(var(--brand-medium), 0.6);
}

.modal__close:active {
    transform: rotate(90deg) scale(0.98);
}

.modal__close:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 3px rgba(var(--brand-bright), 0.35),
        0 4px 12px -4px rgba(var(--brand-bright), 0.5);
}

/* ================================================================
   Шапка
   ================================================================ */
.modal__header {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 24px;
    border-bottom: 1px solid rgb(var(--gray-pastel));
}

.modal__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    background: rgba(var(--brand-bright), 0.1);
    color: rgb(var(--brand-bright));
    border-radius: var(--radius-12);
    font-size: 1.25rem;
}

.modal__title {
    margin: 0 0 2px;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgb(var(--text-strong));
    line-height: 1.25;
}

.modal__subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: rgb(var(--text-muted));
    line-height: 1.4;
}

/* ================================================================
   Тело
   ================================================================ */
.modal__body {
    padding: 24px;
}

/* Обнуляем сжатие в grid колонках внутри модалки */
.modal__body .row > [class*="col-"] {
    min-width: 0;
}

/* Карточки внутри модалки — уменьшенный внутренний ритм */
.modal__body .card__body {
    padding: 20px;
}

/* ================================================================
   Подвал
   ================================================================ */
.modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;

    padding: 16px 24px 20px;
    border-top: 1px solid rgb(var(--gray-pastel));
}

.modal__link {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--brand-bright));
    text-decoration: none;
    transition: color 0.15s ease;
}

.modal__link:hover {
    color: rgb(var(--brand-medium));
}

/* ================================================================
   Утилиты для контента
   ================================================================ */
.modal__price {
    margin: 12px 0 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: rgb(var(--text-strong));
}

.modal__price strong {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.modal__price span {
    font-size: 0.875rem;
    color: rgb(var(--text-muted));
}

/* ================================================================
   Блокировка скролла страницы при открытом модале
   ---------------------------------------------------------------
   Позиционируем body: fixed — иначе iOS всё равно прокручивает.
   scrollY сохраняется и восстанавливается в JS.
   ================================================================ */
html.modal-open,
body.modal-open {
    overflow: hidden;
    touch-action: none;
    padding-right: var(--scrollbar-width, 0px);
}

body.modal-open {
    position: fixed;
    width: 100%;
}

/* ================================================================
   ALERT В МОДАЛКЕ — показ успеха / ошибки
   ================================================================ */
.modal__alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: var(--radius-10);
    font-size: 0.875rem;
    line-height: 1.4;
}

.modal__alert--success {
    background: rgba(var(--green-pastel), 0.7);
    color: rgb(var(--green-medium));
    border: 1px solid rgba(var(--green-medium), 0.3);
}

.modal__alert--error {
    background: rgba(var(--red-pastel), 0.7);
    color: rgb(var(--red-medium));
    border: 1px solid rgba(var(--red-medium), 0.3);
}

/* ================================================================
   DANGER ZONE — текстовая ссылка вместо кнопки
   ================================================================ */
.danger-zone__link {
    display: inline;
    padding: 0;
    background: none;
    border: 0;
    color: rgb(var(--red-medium));
    font: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
    cursor: pointer;
    transition: color 0.15s ease;
}

.danger-zone__link:hover {
    color: rgb(var(--red-medium));
    text-decoration-style: solid;
}


/* ================================================================
   SHAKE — лёгкое «дыхание» модалки при клике по фону
   ================================================================ */
@keyframes modal-shake {
    0%   { transform: scale(1);    }
    35%  { transform: scale(1.02); }
    100% { transform: scale(1);    }
}

.modal__dialog.is-shaking {
    animation: modal-shake 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   Адаптив
   ================================================================ */
@media (max-width: 480px) {
    .modal {
        padding: 12px;
    }

    .modal__dialog {
        max-height: calc(100vh - 24px);
        border-radius: var(--radius-12);
    }

    .modal__header {
        padding: 20px;
        gap: 12px;
    }

    .modal__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .modal__title { font-size: 1.125rem; }

    .modal__body { padding: 20px; }
    .modal__body .card__body { padding: 16px; }

    .modal__footer {
        padding: 14px 20px 18px;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    /* Крестик чуть прижимаем, чтобы не вылез за край экрана */
    .modal__close {
        top: -12px;
        right: -12px;
        width: 38px;
        height: 38px;
        border-width: 2px;
    }
}

/* ================================================================
   Уважаем reduced-motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .modal__overlay,
    .modal__dialog {
        transition: none;
    }

    .modal__dialog.is-shaking {
        animation: none;
    }
}

/* ================================================================
   CENTER-SCREEN — центрирует контент по вертикали на всю высоту экрана
   ================================================================ */

.center-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* Fallback для мобильных Safari */
    min-height: 100dvh;
    padding-block: 40px;   /* отступы, чтобы на низком экране контент не прилипал к краям */
}

/* Если внутри sticky-footer и центр — это main целиком */
.main-center-screen {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-block: 40px;
}

.main-center-screen .row {
    margin-top: -120px; 
}

.main-top-screen {
    flex: 1 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding-block: 40px;
}


/* ================================================================
   29. TOOLTIPS
   ---------------------------------------------------------------
   Использование:
     <button data-tooltip="Подсказка">…</button>
     <button data-tooltip="Снизу" data-tooltip-pos="bottom">…</button>
     <button data-tooltip="Красная" data-tooltip-theme="red">…</button>
     <button data-tooltip="С задержкой" data-tooltip-delay="300">…</button>

   Позиции: top (по умолчанию), bottom, left, right
   Темы:    dark, gray, light, brand, red, green, orange, blue,
            brand-pastel, red-pastel, green-pastel, orange-pastel,
            blue-pastel, gray-pastel
   ================================================================ */

/* ----------------------------------------------------------------
   БАЗА
   ---------------------------------------------------------------- */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.15s ease,
        visibility 0s linear 0.15s,
        transform 0.15s ease;
    transform: translate(-50%, 0);
}

/* --- Текст тултипа --- */
[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: 100%;
    left: 50%;
    margin-bottom: 8px;

    padding: 6px 10px;
    max-width: 240px;
    width: max-content;

    background: rgb(var(--tt-bg, var(--text-strong)));
    color: var(--tt-fg, #fff);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
    overflow-wrap: break-word;
    hyphens: auto;

    border-radius: var(--radius-6);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
}

/* --- Стрелочка --- */
[data-tooltip]::after {
    content: '';
    bottom: 100%;
    left: 50%;
    margin-bottom: 2px;

    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: rgb(var(--tt-bg, var(--text-strong)));
}

/* --- Показ при hover / focus / явном классе --- */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after,
[data-tooltip].tooltip-visible::before,
[data-tooltip].tooltip-visible::after {
    opacity: 1;
    visibility: visible;
    transition-delay: var(--tooltip-delay, 0s);
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before,
[data-tooltip].tooltip-visible::before {
    transform: translate(-50%, -4px);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip].tooltip-visible::after {
    transform: translate(-50%, -4px);
}

/* ----------------------------------------------------------------
   ПОЗИЦИИ
   ---------------------------------------------------------------- */

/* --- Снизу --- */
[data-tooltip][data-tooltip-pos="bottom"]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 8px;
}

[data-tooltip][data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 2px;
    border-top-color: transparent;
    border-bottom-color: rgb(var(--tt-bg, var(--text-strong)));
}

[data-tooltip][data-tooltip-pos="bottom"]:hover::before,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::before,
[data-tooltip][data-tooltip-pos="bottom"].tooltip-visible::before,
[data-tooltip][data-tooltip-pos="bottom"]:hover::after,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after,
[data-tooltip][data-tooltip-pos="bottom"].tooltip-visible::after {
    transform: translate(-50%, 4px);
}

/* --- Слева --- */
[data-tooltip][data-tooltip-pos="left"]::before {
    bottom: auto;
    top: 50%;
    left: auto;
    right: 100%;
    margin-bottom: 0;
    margin-right: 8px;
    transform: translate(0, -50%);
}

[data-tooltip][data-tooltip-pos="left"]::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: 100%;
    margin-bottom: 0;
    margin-right: 2px;
    border-top-color: transparent;
    border-right-color: rgb(var(--tt-bg, var(--text-strong)));
    transform: translate(0, -50%);
}

[data-tooltip][data-tooltip-pos="left"]:hover::before,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::before,
[data-tooltip][data-tooltip-pos="left"].tooltip-visible::before,
[data-tooltip][data-tooltip-pos="left"]:hover::after,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::after,
[data-tooltip][data-tooltip-pos="left"].tooltip-visible::after {
    transform: translate(-4px, -50%);
}

/* --- Справа --- */
[data-tooltip][data-tooltip-pos="right"]::before {
    bottom: auto;
    top: 50%;
    left: 100%;
    margin-bottom: 0;
    margin-left: 8px;
    transform: translate(0, -50%);
}

[data-tooltip][data-tooltip-pos="right"]::after {
    bottom: auto;
    top: 50%;
    left: 100%;
    margin-bottom: 0;
    margin-left: 2px;
    border-top-color: transparent;
    border-left-color: rgb(var(--tt-bg, var(--text-strong)));
    transform: translate(0, -50%);
}

[data-tooltip][data-tooltip-pos="right"]:hover::before,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::before,
[data-tooltip][data-tooltip-pos="right"].tooltip-visible::before,
[data-tooltip][data-tooltip-pos="right"]:hover::after,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::after,
[data-tooltip][data-tooltip-pos="right"].tooltip-visible::after {
    transform: translate(4px, -50%);
}

/* ----------------------------------------------------------------
   ТЕМЫ — нейтральные
   ---------------------------------------------------------------- */
[data-tooltip][data-tooltip-theme="dark"] {
    --tt-bg: var(--text-strong);
    --tt-fg: #fff;
}

[data-tooltip][data-tooltip-theme="gray"] {
    --tt-bg: var(--gray-medium);
    --tt-fg: #fff;
}

[data-tooltip][data-tooltip-theme="light"] {
    --tt-bg: 255, 255, 255;
    --tt-fg: var(--text-strong);
}

[data-tooltip][data-tooltip-theme="light"]::before {
    box-shadow:
        0 0 0 1px rgba(var(--gray-bright), 0.6),
        0 4px 12px -4px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------------------------------------
   ТЕМЫ — цветные
   ---------------------------------------------------------------- */
[data-tooltip][data-tooltip-theme="brand"] {
    --tt-bg: var(--brand-bright);
    --tt-fg: #fff;
}

[data-tooltip][data-tooltip-theme="red"] {
    --tt-bg: var(--red-medium);
    --tt-fg: #fff;
}

[data-tooltip][data-tooltip-theme="green"] {
    --tt-bg: var(--green-medium);
    --tt-fg: #fff;
}

[data-tooltip][data-tooltip-theme="orange"] {
    --tt-bg: var(--orange-medium);
    --tt-fg: #fff;
}

[data-tooltip][data-tooltip-theme="blue"] {
    --tt-bg: var(--blue-medium);
    --tt-fg: #fff;
}

/* ----------------------------------------------------------------
   ТЕМЫ — пастельные (светлый фон, цветной текст)
   ---------------------------------------------------------------- */
[data-tooltip][data-tooltip-theme="brand-pastel"] {
    --tt-bg: var(--brand-pastel);
    --tt-fg: var(--brand-medium);
}

[data-tooltip][data-tooltip-theme="red-pastel"] {
    --tt-bg: var(--red-pastel);
    --tt-fg: var(--red-medium);
}

[data-tooltip][data-tooltip-theme="green-pastel"] {
    --tt-bg: var(--green-pastel);
    --tt-fg: var(--green-medium);
}

[data-tooltip][data-tooltip-theme="orange-pastel"] {
    --tt-bg: var(--orange-pastel);
    --tt-fg: var(--orange-medium);
}

[data-tooltip][data-tooltip-theme="blue-pastel"] {
    --tt-bg: var(--blue-pastel);
    --tt-fg: var(--blue-medium);
}

[data-tooltip][data-tooltip-theme="gray-pastel"] {
    --tt-bg: var(--gray-pastel);
    --tt-fg: var(--gray-medium);
}

/* Пастельные темы получают мягкую обводку, чтобы не сливаться с белым фоном */
[data-tooltip][data-tooltip-theme$="-pastel"]::before {
    box-shadow:
        0 0 0 1px rgba(var(--gray-bright), 0.4),
        0 4px 12px -4px rgba(0, 0, 0, 0.1);
}

/* ----------------------------------------------------------------
   МОБИЛЬНЫЕ: отключаем тултипы на тач-устройствах
   ---------------------------------------------------------------- */
@media (hover: none) {
    [data-tooltip]::before,
    [data-tooltip]::after {
        display: none;
    }
}



/* ================================================================
   Общий алерт (для не-JS случаев)
   ================================================================ */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-10);
    font-size: 0.9375rem;
}

.alert--success {
    background: rgba(var(--green-pastel), 0.7);
    color: rgb(var(--green-medium));
    border: 1px solid rgba(var(--green-medium), 0.3);
}