/* Основные стили - Kapital77.ru */

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

:root {
    /* Цвета - банковская палитра (Канон Swiss Private Banking 2026) */
    --color-primary: #1E3A8A;        /* Глубокий чернильно-синий (статус и надежность) */
    --color-primary-dark: #0F172A;   /* Сланцево-темный */
    --color-primary-light: #2563EB;  /* Доверительный синий */
    --color-secondary: #0F172A;      /* Темный авторитет */
    --color-accent: #059669;         /* Сдержанный изумруд (деньги / CTA) */
    --color-accent-dark: #047857;    /* Темный изумруд для hover */
    --color-text: #0F172A;           /* Глубокий графитово-черный текст */
    --color-text-light: #475569;     /* Сдержанный серый текст */
    --color-text-muted: #94A3B8;     /* Приглушенный текст */
    --color-bg: #FAF9F6;             /* Теплый молочный офф-вайт */
    --color-bg-light: #FFFFFF;       /* Карточки первого уровня */
    --color-bg-gradient: linear-gradient(135deg, #1E3A8A 0%, #0F172A 100%); /* Банковский синий */
    --color-success: #059669;        /* Изумрудный CTA */
    --color-success-dark: #047857;   /* Темнее для hover */
    --color-warning: #ffd166;        /* Желтый (внимание) */
    --color-warning-dark: #f0b429;   /* Темнее для hover */
    --color-danger: #ef476f;          /* Красный (оставить) */
    
    /* Дополнительные цвета для замены хардкод */
    --color-gray-100: #f8f9fa;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;
    
    /* Тени (Канон Swiss Private Banking 2026 - нейтральные графитовые без неонового синего glow) */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 12px 36px -6px rgba(15, 23, 42, 0.1);
    --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
    --shadow-sticky: 0 -4px 16px rgba(15, 23, 42, 0.08);
    --border-subtle: rgba(15, 23, 42, 0.08);
    --bg-app: #FAF9F6;
    --bg-surface: #FFFFFF;
    --bg-surface-muted: #F3F2ED;
    --radius-card: 16px;
    --btn-height: 56px;
    --input-height: 56px;
    
    /* Радиусы (единая система, 2026-03-14) */
    --radius-sm: 8px;   /* чипы, бейджи, мелкие элементы */
    --radius-md: 12px;  /* карточки контента (по умолчанию) */
    --radius-lg: 16px;  /* крупные карточки, формы */
    --radius-xl: 20px;  /* Hero-блоки, особые акценты */
    --radius-pill: 999px; /* pill-бейджи */
    
    /* Типографика - Inter + Manrope (Канон Swiss Private Banking 2026) */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-base: var(--font-family);
    --font-family-heading: 'Manrope', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: var(--font-family-heading);
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --letter-spacing-heading: -0.025em;
    --font-size-base: 18px;
    --font-size-small: 14px;
    --font-size-large: 20px;
    --font-size-h1: 48px;
    --font-size-h2: 36px;
    --font-size-h3: 28px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-tight: 1.25;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    
    /* Отступы */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-xxl: 80px;
    
    /* Брейкпоинты */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
    --breakpoint-desktop: 1920px;
}

html {
    scroll-behavior: smooth;
    /* Scroll Snap для мобильных устройств */
    scroll-snap-type: none;
}

abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

body, html {
    background-color: #FAF9F6 !important; /* Тёплый молочный офф-вайт */
    color: #0F172A;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: #FAF9F6 !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Базовые стили для ссылок - переопределение браузерных стилей */
a {
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
}

/* Scroll Snap для мобильных устройств */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 0;
        -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
    }
    
    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
        line-height: 1.6; /* Улучшенная читабельность на мобильных (1.5-1.7) */
    }
    
    /* Плавная прокрутка для всех секций — ОТКЛЮЧЕНО (transitions.css): scroll-snap на мобильных
       ломает скролл (автоскрол вверх, сопротивление). См. transitions.css @media (max-width: 768px) */
    .section {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }
    
    .section-sticky-bar {
        scroll-snap-align: none !important;
    }
    
    /* Улучшение читабельности на мобильных */
    p, .section__subtitle, .hero__subtitle {
        line-height: 1.6; /* Оптимальный line-height для мобильных (1.5-1.7) */
        margin-bottom: var(--spacing-sm); /* Отступы 16-24px */
    }
    
    /* Улучшение контрастности текста на мобильных */
    .section__subtitle,
    .hero__subtitle,
    p {
        color: var(--color-text); /* Обеспечиваем достаточный контраст */
    }
    
    /* Отступы для секций на мобильных (16-24px) */
    .section {
        padding: var(--spacing-sm) 0 var(--spacing-md) 0; /* 16px сверху, 24px снизу */
    }
    
    /* Ограничение количества строк на экран (max 4-5 строк) */
    .section__subtitle,
    .hero__subtitle {
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-sm);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Hero: сброс desktop-отступов */
    .section-hero .container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-right: var(--spacing-sm) !important;
        padding-left: var(--spacing-sm) !important;
    }
}

/* Для больших экранов - увеличить max-width для лучшего использования пространства */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px; /* Больше пространства на больших экранах */
    }
}

/* Базовый класс карточки (2026-03-14, унификация) */
.card {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Кнопки - Montserrat для выразительности */
.btn {
    display: inline-block;
    padding: 14px 28px;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
    min-width: 48px;
}

.btn-primary {
    background-color: var(--color-success); /* CTA зеленый по UX-регламенту */
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.btn-primary:hover {
    background-color: var(--color-success-dark);
    /* Кайдзен улучшение: более заметный hover-эффект */
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

.btn-danger {
    background-color: #d64545;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(214, 69, 69, 0.35);
}

.btn-danger:hover {
    background-color: #bf3b3b;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(214, 69, 69, 0.45);
}

.btn-ghost {
    background-color: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.16);
    color: var(--color-text, #0F172A);
    border-radius: 10px;
    transition: all 0.25s ease;
}

.btn-ghost:hover {
    border-color: var(--color-primary, #1E3A8A);
    color: var(--color-primary, #1E3A8A);
    background-color: #F8FAFC;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.btn-large {
    padding: 18px 36px;
    font-size: var(--font-size-large);
    font-weight: 700;
    min-height: 56px; /* Минимальная высота для thumb-zone на мобильных */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Мобильная оптимизация для CTA-кнопок */
@media (max-width: 768px) {
    .btn-large {
        padding: 16px 32px;
        min-height: 56px; /* Оптимальная высота для thumb-zone */
        font-size: clamp(16px, 4vw, 18px);
        width: 100%; /* Полная ширина на мобильных для удобства */
        max-width: 100%;
    }
    
    /* CTA-кнопки в Hero секции */
    .section-hero .btn-large,
    .section-hero .btn-primary {
        min-height: 60px; /* Немного больше для главной CTA */
        font-size: clamp(18px, 4.5vw, 20px);
        font-weight: 700;
    }
}

/* Система трех уровней CTA */
/* Уровень 1: Подписаться - легкий контакт, сбор контактов */
.btn-subscribe {
    background-color: var(--color-primary); /* Синий */
    color: #ffffff;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: var(--font-weight-semibold); /* 600 */
    transition: all 0.3s ease;
}

.btn-subscribe:hover {
    background-color: var(--color-primary-dark); /* Темно-синий (было #5568d3) */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-subscribe .btn-icon {
    margin-right: 6px;
    font-size: 16px;
}

/* Уровень 2: Заказать звонок - средний уровень */
.btn-callback {
    background-color: transparent; /* Вторичный CTA, спокойный */
    color: var(--color-primary);
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid rgba(37, 99, 235, 0.55);
    font-weight: var(--font-weight-semibold); /* 600 */
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    transition: all 0.3s ease;
}

.btn-callback:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
}

.btn-callback .btn-icon {
    margin-right: 8px;
    font-size: 18px;
}

.btn-primary .btn-icon {
    margin-right: 8px;
    font-size: 18px;
}

/* Размеры кнопок */
.btn-small {
    padding: 10px 20px;
    font-size: 14px;
}

.btn-medium {
    padding: 12px 24px;
    font-size: 16px;
}

/* Иконки в кнопках */
.btn-icon {
    display: inline-block;
    vertical-align: middle;
}

/* Формы */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form__field {
    display: flex;
    flex-direction: column;
}

.form__input {
    width: 100%;
    padding: 14px 18px;
    font-size: var(--font-size-base);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    min-height: 48px;
    transition: border-color 0.3s ease;
}

/* Мобильная оптимизация полей ввода */
@media (max-width: 768px) {
    .form__input {
        min-height: 56px; /* Увеличиваем для thumb-zone на мобильных */
        padding: 16px 18px; /* Больше padding для удобства */
        font-size: 16px; /* Важно для iOS - предотвращает zoom при фокусе */
        -webkit-appearance: none; /* Убираем стили iOS */
        appearance: none;
    }
    
    /* Примечание: inputmode и autocapitalize - это HTML атрибуты, 
       они должны быть добавлены в HTML, а не в CSS */
}

.form__input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form__checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-small);
    cursor: pointer;
}

.form__checkbox input {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Заголовки - Manrope (Канон Swiss Private Banking 2026) */
h1, .h1 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h1);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-heading, -0.025em);
    color: var(--color-text);
}

h2, .h2 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-heading, -0.025em);
    color: var(--color-text);
}

h3, .h3 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h3);
    line-height: var(--line-height-tight);
    letter-spacing: -0.015em;
    color: var(--color-text);
}

@media (max-width: 768px) {
    h1, .h1 {
        font-size: 32px; /* Уменьшаем на мобильных */
        line-height: 1.25; /* Улучшенная читабельность для заголовков */
    }
    
    h2, .h2 {
        font-size: 26px; /* Уменьшаем на мобильных */
        line-height: 1.3; /* Улучшенная читабельность */
    }
    
    h3, .h3 {
        font-size: 20px; /* Уменьшаем на мобильных */
        line-height: 1.35; /* Улучшенная читабельность */
    }
    
    /* Улучшение контрастности заголовков */
    h1, h2, h3, .h1, .h2, .h3 {
        color: var(--color-text); /* Обеспечиваем достаточный контраст 4.5:1 */
    }
}

/* Заголовки секций */
.section__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-heading, -0.025em);
}

.section__subtitle {
    font-family: var(--font-family);
    font-size: 18px;
    text-align: center;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
    .section__title {
        font-size: 24px;
        line-height: 1.4; /* Улучшенная читабельность */
        margin-bottom: var(--spacing-sm); /* Отступ 16px */
    }
    
    .section__subtitle {
        font-size: var(--font-size-base);
        line-height: 1.6; /* Оптимальный line-height (1.5-1.7) */
        margin-bottom: var(--spacing-md); /* Отступ 24px */
        color: var(--color-text); /* Обеспечиваем контраст 4.5:1 */
    }
}

/* Секции */
html {
    scroll-snap-type: none;
    scroll-behavior: smooth;
}

.section {
    padding: var(--spacing-xl) 0;
    position: relative;
}

@media (max-width: 768px) {
    .section {
        padding: var(--spacing-lg) 0;
    }
}

/* Визуальные метки модулей (только для разработки)
   ВАЖНО: включаются только при body.debug-modules (не должны попадать в “витрину”). */
/* Базовые стили для меток - content задается в специфичных правилах ниже */
body.debug-modules .section::before {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    z-index: 10001 !important; /* Выше всех элементов включая canvas */
    pointer-events: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: rgba(15, 23, 42, 0.88);
    padding: 5px 12px;
    border-radius: 0 0 8px 0;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-top: none;
    border-left: none;
    line-height: 1.3;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: all 0.2s ease;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    box-sizing: content-box !important;
    outline: none !important;
}

/* Метки ::after (FAQ, Footer, Hero, Advantages) — тот же slate */
body.debug-modules .section-faq::after,
body.debug-modules .footer::after,
body.debug-modules .section-hero::after,
body.debug-modules .section-advantages::after {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    z-index: 1001;
    pointer-events: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: rgba(15, 23, 42, 0.88);
    padding: 5px 12px;
    border-radius: 0 0 8px 0;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-top: none;
    border-left: none;
    line-height: 1.3;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* Content для каждого модуля — фон единый (slate) */
body.debug-modules .section-sticky-bar::before {
    content: '[MODULE: Sticky Bar]';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    border-radius: 0 0 8px 0;
}

/* Плашки для Hero и Advantages - используем ::before с высоким z-index */
body.debug-modules .section-hero::before {
    content: '[MODULE: Hero]' !important;
    z-index: 10001 !important; /* Выше всех декоративных элементов и canvas */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules .section-hero2::before {
    content: '[MODULE: Hero2]' !important;
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules .section-advantages::before {
    content: '[MODULE: Преимущества]' !important;
    z-index: 10001 !important; /* Выше всех декоративных элементов и canvas */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules .section-purposes::before {
    content: '[MODULE: На что использовать]';
}

body.debug-modules .section-comparison::before {
    content: '[MODULE: Сравнение]';
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules .section-conditions-ranges::before {
    content: '[MODULE: Ориентировочные условия]';
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules .section-trust::before {
    content: '[MODULE: Trust-блок]';
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules .section-risks::before {
    content: '[MODULE: Опасения / Риски]';
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules .section-documents-checklist::before {
    content: '[MODULE: Документы для заявки]';
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

/* Команда — между «Возражения» и «Преимущества» в index.html */
body.debug-modules .section-team::before {
    content: '[MODULE: Команда]' !important;
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules .section-objections::before {
    content: '[MODULE: Возражения / Разберём ваши вопросы]' !important;
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    box-sizing: content-box !important;
    outline: none !important;
    border: none !important;
    overflow: visible !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    border-radius: 0 0 6px 0 !important;
}

body.debug-modules .section-cases::before {
    content: '[MODULE: Кейсы]';
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules .section-process::before {
    content: '[MODULE: Процесс]';
}

body.debug-modules .section-calculator::before {
    content: '[MODULE: Калькулятор]';
}

body.debug-modules .section-reviews::before {
    content: '[MODULE: Отзывы]';
}

body.debug-modules .section-knowledge-base::before,
body.debug-modules .section-articles-showcase::before {
    content: '[MODULE: Экспертиза / База статей]' !important;
    z-index: 10001 !important; /* Выше всех декоративных элементов и canvas */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules .section-comments-slider::before {
    content: '[MODULE: Комментарии]';
}

body.debug-modules .section-faq::before {
    content: '[MODULE: FAQ]';
    z-index: 10001 !important; /* Выше всех декоративных элементов и canvas */
}

body.debug-modules .section-form::before,
body.debug-modules .section-form-aggressive::before {
    content: '[MODULE: Форма]' !important;
    z-index: 10001 !important; /* Выше всех декоративных элементов и canvas */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules #read-first::before {
    content: '[MODULE: Форма в конце]';
}

body.debug-modules #loan-amount-calc-section::before {
    content: '[MODULE: Калькулятор суммы]' !important;
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules #calculator::before {
    content: '[MODULE: Калькулятор]' !important;
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

body.debug-modules .footer::before {
    content: '[MODULE: Footer]';
    z-index: 10001 !important; /* Выше всех декоративных элементов и canvas */
}

/* Плашка для модуля загрузки документов */
body.debug-modules #documents-upload::before {
    content: '[MODULE: Загрузка документов]' !important;
    z-index: 10001 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
}

/* Скрыть модуль загрузки документов вне debug режима */
#documents-upload {
    display: none !important;
}

/* Показать модуль только при ?debug=1 (когда body имеет класс debug-modules) */
body.debug-modules #documents-upload {
    display: block !important;
}

/* Скрыть ссылку на модуль в навигации вне debug режима */
.module-indicator .indicator-dot[data-module="documents-upload"] {
    display: none !important;
}

/* Показать ссылку в навигации только при debug */
body.debug-modules .module-indicator .indicator-dot[data-module="documents-upload"] {
    display: inline-flex !important;
}

/* Плашка для Quiz */
body.debug-modules .onboarding-quiz::before {
    content: '[MODULE: Quiz]';
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    border-radius: 0 0 0 6px;
}

/* Дублирующие стили удалены - используются выше */

/* Метки для статей - НЕ ВИДИМЫЕ (только HTML комментарии в template.html) */
/* Видимые метки нужны только для index.html во время разработки */

/* Улучшенное отображение на мобильных */
@media (max-width: 768px) {
    body.debug-modules .section::before {
        font-size: 9px;
        padding: 3px 8px;
        border-radius: 0 0 4px 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    }
    
    body.debug-modules .section-faq::after,
    body.debug-modules .footer::after,
    body.debug-modules .section-hero::after,
    body.debug-modules .section-advantages::after {
        font-size: 9px;
        padding: 3px 8px;
        border-radius: 0 0 4px 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    }
}

/* Эффект при наведении (для удобства разработки) */
@media (min-width: 769px) {
    body.debug-modules .section:hover::before {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
        opacity: 1;
    }
    
    body.debug-modules .section-faq:hover::after,
    body.debug-modules .footer:hover::after,
    body.debug-modules .section-hero:hover::after,
    body.debug-modules .section-advantages:hover::after {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
        opacity: 1;
    }
    
    .section-form:hover::before {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
        opacity: 1;
    }
}

/* Утилиты */
.text-center {
    text-align: center;
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

/* ==========================================================================
   Канон 2026: Отключение точек пагинации и фейкового телефона (T-032-hit1)
   ========================================================================== */
.module-indicator,
.module-navigation {
    display: none !important;
}

.sticky-bar__contacts,
.sticky-phone-link {
    display: none !important;
}