/* ==========================================================================

   Стили сайта «Права Сразу» (prava-aib.top)

   Стиль: Официальная автошкола и регистрационный сервис ГИБДД

   Цветовая палитра: Светлые тона, строгий глубокий синий, благородный янтарный акцент

   ========================================================================== */



/* ---------- CSS Переменные (Design Tokens) ---------- */

:root {

    --color-primary: #1e3a8a;          /* Глубокий синий (официальный тон) */

    --color-primary-hover: #172554;

    --color-primary-light: #eff6ff;

    

    --color-accent: #d97706;           /* Теплый золотисто-янтарный для CTA */

    --color-accent-hover: #b45309;

    --color-accent-light: #fffbeb;

    

    --color-secondary: #0f172a;        /* Темный сланец для акцентов и текста */

    --color-text: #1e293b;             /* Основной текст с высоким контрастом */

    --color-text-muted: #64748b;       /* Второстепенный текст */

    --color-text-light: #94a3b8;

    

    --color-bg: #ffffff;               /* Чистый белый фон */

    --color-bg-alt: #f8fafc;           /* Светло-серый фон секций */

    --color-bg-subtle: #f1f5f9;        /* Мягкий фон плашек */

    --color-card-bg: #ffffff;

    

    --color-border: #e2e8f0;           /* Аккуратные границы */

    --color-border-subtle: #cbd5e1;

    

    --color-success: #059669;          /* Зеленый для подтвержденных гарантий */

    --color-success-light: #ecfdf5;

    --color-danger: #dc2626;

    --color-danger-light: #fef2f2;

    

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    

    --radius-sm: 4px;

    --radius-md: 8px;

    --radius-lg: 12px;

    --radius-xl: 16px;

    --radius-full: 9999px;

    

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

    

    --container-max: 1200px;

    --transition: all 0.2s ease-in-out;



    --bottom-bar-h: 72px;              /* Высота фиксированной нижней плашки (уточняется из JS) */

    --scrollbar-width: 0px;            /* Компенсация скроллбара для контента при блокировке */

    --fixed-shift: 0px;                /* Компенсация скроллбара для фиксированных элементов */

}



/* ---------- Сброс и базовые правила ---------- */

*, *::before, *::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    overflow-x: hidden;

    /* Полоса прокрутки всегда занимает место: страница не «прыгает» при открытии модалки */

    scrollbar-gutter: stable;

}



body {

    overflow-wrap: break-word;

    font-family: var(--font-sans);

    font-size: 16px;

    line-height: 1.6;

    color: var(--color-text);

    background-color: var(--color-bg);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    /* Запас снизу, чтобы фиксированная плашка не перекрывала подвал */

    padding-bottom: var(--bottom-bar-h, 72px);

}



/*

 * Блокировка прокрутки (мобильное меню, модальное окно).

 * Прокруткой страницы управляет корневой элемент, поэтому overflow: hidden

 * только на body не работал: страница продолжала скроллиться под модалкой.

 */

html.is-locked,

html.is-locked body {

    overflow: hidden;

}



/* Компенсация ширины скроллбара, если браузер не поддерживает scrollbar-gutter */

html.is-locked body {

    padding-right: var(--scrollbar-width, 0px);

}



/*

 * Фиксированные элементы отсчитываются от области просмотра, а не от body,

 * поэтому им нужна отдельная поправка: браузеры с scrollbar-gutter её не требуют.

 */

html.is-locked .bottom-bar {

    right: var(--fixed-shift, 0px);

}



html.is-locked .totop {

    right: calc(24px + var(--fixed-shift, 0px));

}



img, picture, svg, video {

    display: block;

    max-width: 100%;

    height: auto;

}



input, button, textarea, select {

    font: inherit;

    color: inherit;

}



a {

    color: var(--color-primary);

    text-decoration: none;

    transition: var(--transition);

}



a:hover {

    color: var(--color-primary-hover);

}



ul, ol {

    list-style: none;

}



/* ---------- Вёрстка контейнеров и сеток ---------- */

.wrap, .container, .layout {

    overflow-x: hidden;

    width: 100%;

}



.container {

    max-width: var(--container-max);

    margin-left: auto;

    margin-right: auto;

    padding-left: 20px;

    padding-right: 20px;

}



.grid {

    display: grid;

    gap: 24px;

}



.grid > * {

    min-width: 0;

}



.layout__main, .layout__side {

    min-width: 0;

}



.layout-sidebar {

    display: grid;

    grid-template-columns: 1fr 340px;

    gap: 32px;

    align-items: start;

}



/* ---------- Иконки ---------- */

.icon {

    display: inline-block;

    width: 20px;

    height: 20px;

    vertical-align: middle;

    flex-shrink: 0;

}



/* Модификаторы размера */

.icon--sm { width: 16px; height: 16px; }

.icon--lg { width: 26px; height: 26px; }



/* Иконки в отдельных блоках: без явных размеров SVG растягивается по контейнеру */

.badge__icon,

.topbar__icon {

    display: inline-block;

    width: 15px;

    height: 15px;

    vertical-align: middle;

    flex-shrink: 0;

}



.btn__icon {

    display: inline-block;

    width: 18px;

    height: 18px;

    vertical-align: middle;

    flex-shrink: 0;

}



.ftr__icon {

    display: inline-block;

    width: 18px;

    height: 18px;

    vertical-align: middle;

    flex-shrink: 0;

    color: var(--color-accent);

}



/* Иконки внутри кнопок наследуют размер шрифта кнопки */

.btn .icon {

    width: 18px;

    height: 18px;

}

.btn--sm .icon,

.btn--sm .btn__icon {

    width: 16px;

    height: 16px;

}

.btn--lg .icon,

.btn--lg .btn__icon {

    width: 20px;

    height: 20px;

}



/* Иконки в мелких мета-строках */

.cat-card__term .icon,

.art-card__meta .icon,

.article-header__meta .icon,

.review-card__meta .icon {

    width: 15px;

    height: 15px;

}



.art-card__link .icon,

.sidebar-list .icon {

    width: 16px;

    height: 16px;

}



/* Иконки внутри цветных «плиток» */

.cat-card__icon-box .icon,

.feat-item__icon-wrap .icon {

    width: 26px;

    height: 26px;

}



.modal__close .icon {

    width: 18px;

    height: 18px;

}



/* ---------- Кнопки ---------- */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 20px;

    font-size: 0.95rem;

    font-weight: 600;

    line-height: 1.3;

    border-radius: var(--radius-md);

    border: 1px solid transparent;

    cursor: pointer;

    text-align: center;

    transition: var(--transition);

    text-decoration: none;

}



.btn--sm {

    padding: 6px 14px;

    font-size: 0.85rem;

}



.btn--lg {

    padding: 14px 28px;

    font-size: 1.05rem;

}



.btn--block {

    display: flex;

    width: 100%;

}



.btn--primary {

    background-color: var(--color-primary);

    color: #ffffff;

    border-color: var(--color-primary);

}

.btn--primary:hover {

    background-color: var(--color-primary-hover);

    border-color: var(--color-primary-hover);

    color: #ffffff;

}



.btn--accent {

    background-color: var(--color-accent);

    color: #ffffff;

    border-color: var(--color-accent);

    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);

}

.btn--accent:hover {

    background-color: var(--color-accent-hover);

    border-color: var(--color-accent-hover);

    color: #ffffff;

}



.btn--outline {

    background-color: transparent;

    color: var(--color-primary);

    border-color: var(--color-primary);

}

.btn--outline:hover {

    background-color: var(--color-primary-light);

    color: var(--color-primary-hover);

}



.btn--outline-light {

    background-color: rgba(255, 255, 255, 0.15);

    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.4);

}

.btn--outline-light:hover {

    background-color: rgba(255, 255, 255, 0.25);

    color: #ffffff;

}



.btn--pulse {

    animation: pulseGlow 2.5s infinite;

}



/* Только тень: transform: scale() менял ширину кнопки и вызывал мигание полосы прокрутки */

@keyframes pulseGlow {

    0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.45); }

    70% { box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); }

    100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }

}



@media (prefers-reduced-motion: reduce) {

    .btn--pulse {

        animation: none;

    }

}



/* ---------- Бейджи ---------- */

.badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 4px 10px;

    font-size: 0.8rem;

    font-weight: 600;

    border-radius: var(--radius-full);

}

.badge--success {

    background-color: var(--color-success-light);

    color: var(--color-success);

    border: 1px solid rgba(5, 150, 105, 0.2);

}

.badge--info {

    background-color: var(--color-primary-light);

    color: var(--color-primary);

    border: 1px solid rgba(30, 58, 138, 0.15);

}

.badge--accent {

    background-color: var(--color-accent-light);

    color: var(--color-accent-hover);

    border: 1px solid rgba(217, 119, 6, 0.2);

}



/* ---------- Верхняя панель (TopBar) ---------- */

.topbar {

    background-color: var(--color-bg-alt);

    border-bottom: 1px solid var(--color-border);

    padding: 6px 0;

    font-size: 0.85rem;

}



.topbar__inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px 16px;

}



.topbar__badges {

    display: flex;

    align-items: center;

    gap: 12px;

}



.topbar__contacts {

    display: flex;

    align-items: center;

    gap: 14px;

}



.topbar__messenger {

    display: inline-flex;

    align-items: center;

    white-space: nowrap;

    gap: 5px;

    padding: 3px 8px;

    border-radius: var(--radius-sm);

    font-weight: 500;

    font-size: 0.8rem;

}

.topbar__messenger--wa {

    background-color: #25d366;

    color: #ffffff;

}

.topbar__messenger--wa:hover {

    background-color: #128c7e;

    color: #ffffff;

}

.topbar__messenger--tg {

    background-color: #0088cc;

    color: #ffffff;

}

.topbar__messenger--tg:hover {

    background-color: #006699;

    color: #ffffff;

}



.topbar__phone {

    display: inline-flex;

    align-items: center;

    white-space: nowrap;

    gap: 6px;

    font-weight: 700;

    color: var(--color-secondary);

}

.topbar__phone:hover {

    color: var(--color-primary);

}



/* ---------- Шапка сайта (Header) ---------- */

.hdr {

    background-color: var(--color-bg);

    border-bottom: 1px solid var(--color-border);

    position: sticky;

    top: 0;

    z-index: 100;

    box-shadow: var(--shadow-sm);

    transition: var(--transition);

}



.hdr.is-stuck {

    box-shadow: var(--shadow-md);

}



.hdr__inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 72px;

    gap: 20px;

}



/* Логотип */

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

}



.logo__mark {

    width: 44px;

    height: 44px;

    background: linear-gradient(135deg, var(--color-primary) 0%, #1e40af 100%);

    border-radius: var(--radius-md);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    box-shadow: 0 4px 10px rgba(30, 58, 138, 0.2);

}

.logo__mark .logo__icon {

    width: 26px;

    height: 26px;

}



.logo__content {

    display: flex;

    flex-direction: column;

}



.logo__title {

    font-size: 1.25rem;

    font-weight: 800;

    color: var(--color-primary);

    line-height: 1.1;

    letter-spacing: -0.02em;

}



.logo__sub {

    font-size: 0.72rem;

    font-weight: 600;

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

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



/* Навигация */

.nav__list {

    display: flex;

    align-items: center;

    gap: 20px;

}



.nav__link {

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--color-text);

    padding: 6px 4px;

    position: relative;

}



.nav__link:hover, .nav__link.is-active {

    color: var(--color-primary);

}



.nav__link.is-active::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 0;

    right: 0;

    height: 2px;

    background-color: var(--color-primary);

    border-radius: var(--radius-full);

}



.nav__mobile-actions {

    display: none;

}



.hdr__actions {

    display: flex;

    align-items: center;

    gap: 10px;

}



/* Бургер меню */

.burger {

    display: none;

    flex-direction: column;

    justify-content: space-between;

    width: 40px;

    height: 40px;

    padding: 10px 8px;

    background: var(--color-bg-subtle);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    cursor: pointer;

}



.burger__bar {

    width: 100%;

    height: 2px;

    background-color: var(--color-secondary);

    border-radius: 2px;

    transition: var(--transition);

}



/* ---------- Хлебные крошки ---------- */

.breadcrumbs-wrap {

    background-color: var(--color-bg-alt);

    border-bottom: 1px solid var(--color-border);

    padding: 10px 0;

}



.breadcrumbs__list {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    font-size: 0.85rem;

}



.breadcrumbs__link {

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

}

.breadcrumbs__link:hover {

    color: var(--color-primary);

}



.breadcrumbs__sep {

    color: var(--color-text-light);

}



.breadcrumbs__current {

    color: var(--color-secondary);

    font-weight: 600;

}



/* ---------- Герой-секция (Hero) ---------- */

.hero {

    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);

    border-bottom: 1px solid var(--color-border);

    padding: 56px 0 48px;

    position: relative;

}



.hero__grid {

    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 40px;

    align-items: center;

}



.hero__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

}



.hero__title {

    font-size: 2.6rem;

    font-weight: 800;

    line-height: 1.18;

    color: var(--color-secondary);

    letter-spacing: -0.025em;

    margin-bottom: 16px;

}



.hero__lead {

    font-size: 1.12rem;

    line-height: 1.55;

    color: var(--color-text);

    margin-bottom: 28px;

}



.hero__features {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    margin-bottom: 32px;

}



.hero__feature {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--color-secondary);

}



.hero__feature-icon {

    width: 22px;

    height: 22px;

    color: var(--color-success);

    background-color: var(--color-success-light);

    border-radius: var(--radius-full);

    padding: 3px;

}



.hero__actions {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 16px;

}



.hero__card {

    background-color: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    padding: 32px;

    box-shadow: var(--shadow-xl);

}



.hero__card-header {

    margin-bottom: 20px;

    text-align: center;

}



.hero__card-title {

    font-size: 1.35rem;

    font-weight: 800;

    color: var(--color-secondary);

    margin-bottom: 6px;

}



.hero__card-sub {

    font-size: 0.88rem;

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

}



/* ---------- Формы ---------- */

.form {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.form__group {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.form__label {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--color-secondary);

}



.form__input, .form__select, .form__textarea {

    width: 100%;

    padding: 12px 16px;

    font-size: 0.95rem;

    background-color: #ffffff;

    border: 1px solid var(--color-border-subtle);

    border-radius: var(--radius-md);

    color: var(--color-secondary);

    transition: var(--transition);

}



.form__input:focus, .form__select:focus, .form__textarea:focus {

    outline: none;

    border-color: var(--color-primary);

    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);

}



.field.is-invalid .form__input,

.field.is-invalid .form__select {

    border-color: var(--color-danger);

    background-color: #fffaf0;

}



.form__error {

    font-size: 0.8rem;

    color: var(--color-danger);

    min-height: 16px;

}



.form__note {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    font-size: 0.82rem;

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

    background-color: var(--color-bg-subtle);

    padding: 10px 12px;

    border-radius: var(--radius-md);

    line-height: 1.4;

}



.form__note-icon {

    width: 18px;

    height: 18px;

    color: var(--color-primary);

    flex-shrink: 0;

    margin-top: 1px;

}



.form__policy {

    font-size: 0.75rem;

    color: var(--color-text-light);

    text-align: center;

    line-height: 1.4;

}

.form__policy a {

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

    text-decoration: underline;

}



.form__success {

    background-color: var(--color-success-light);

    border: 1px solid rgba(5, 150, 105, 0.3);

    padding: 16px;

    border-radius: var(--radius-md);

    text-align: center;

    color: #065f46;

}



.form__success-icon {

    width: 32px;

    height: 32px;

    color: var(--color-success);

    margin: 0 auto 8px;

}



.form__fail {

    background-color: var(--color-danger-light);

    border: 1px solid rgba(220, 38, 38, 0.3);

    padding: 12px;

    border-radius: var(--radius-md);

    font-size: 0.85rem;

    color: var(--color-danger);

    text-align: center;

}



/* ---------- Секции контента ---------- */

.section {

    padding: 64px 0;

    position: relative;

}



.section--alt {

    background-color: var(--color-bg-alt);

    border-top: 1px solid var(--color-border);

    border-bottom: 1px solid var(--color-border);

}



.section__header {

    text-align: center;

    max-width: 760px;

    margin: 0 auto 48px;

}



.section__eyebrow {

    font-size: 0.85rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--color-primary);

    margin-bottom: 8px;

}



.section__title {

    font-size: 2.1rem;

    font-weight: 800;

    color: var(--color-secondary);

    line-height: 1.25;

    letter-spacing: -0.02em;

    margin-bottom: 12px;

}



.section__lead {

    font-size: 1.05rem;

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

    line-height: 1.6;

}



/* ---------- Карточки категорий и услуг ---------- */

.categories-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}



.cat-card {

    background-color: var(--color-card-bg);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    padding: 24px;

    display: flex;

    flex-direction: column;

    transition: var(--transition);

    box-shadow: var(--shadow-sm);

    position: relative;

    overflow: hidden;

}



.cat-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-lg);

    border-color: var(--color-border-subtle);

}



.cat-card__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 16px;

}



.cat-card__icon-box {

    width: 48px;

    height: 48px;

    background-color: var(--color-primary-light);

    border-radius: var(--radius-lg);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-primary);

}



.cat-card__code {

    font-size: 0.85rem;

    font-weight: 700;

    color: var(--color-primary);

    background-color: var(--color-primary-light);

    padding: 4px 10px;

    border-radius: var(--radius-full);

}



.cat-card__title {

    font-size: 1.2rem;

    font-weight: 700;

    color: var(--color-secondary);

    margin-bottom: 8px;

    line-height: 1.35;

}



.cat-card__desc {

    font-size: 0.92rem;

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

    line-height: 1.5;

    margin-bottom: 20px;

    flex-grow: 1;

}



.cat-card__meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 0;

    border-top: 1px solid var(--color-border);

    border-bottom: 1px solid var(--color-border);

    margin-bottom: 16px;

    font-size: 0.88rem;

}



.cat-card__price {

    font-size: 1.15rem;

    font-weight: 800;

    color: var(--color-secondary);

}



.cat-card__term {

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

    display: flex;

    align-items: center;

    gap: 4px;

}



.cat-card__actions {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 10px;

}



/* ---------- Карточки статей (Блог / Гиды) ---------- */

.articles-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}



.art-card {

    background-color: var(--color-card-bg);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    transition: var(--transition);

    box-shadow: var(--shadow-sm);

}



.art-card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-lg);

}



.art-card__thumb {

    position: relative;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background-color: var(--color-bg-subtle);

}



.art-card__img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.art-card:hover .art-card__img {

    transform: scale(1.05);

}



.art-card__content {

    padding: 24px;

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.art-card__meta {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 0.8rem;

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

    margin-bottom: 10px;

}



.art-card__title {

    font-size: 1.15rem;

    font-weight: 700;

    line-height: 1.35;

    color: var(--color-secondary);

    margin-bottom: 10px;

}



.art-card__desc {

    font-size: 0.9rem;

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

    line-height: 1.55;

    margin-bottom: 16px;

    flex-grow: 1;

}



.art-card__link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 0.9rem;

    font-weight: 700;

    color: var(--color-primary);

}

.art-card__link:hover {

    gap: 10px;

}



/* ---------- Преимущества и шаги работы ---------- */

.features-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

}



.feat-item {

    background-color: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    padding: 24px;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.feat-item__icon-wrap {

    width: 52px;

    height: 52px;

    border-radius: var(--radius-lg);

    background-color: var(--color-primary-light);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-primary);

}



.feat-item__title {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--color-secondary);

}



.feat-item__text {

    font-size: 0.9rem;

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

    line-height: 1.5;

}



/* Шаги процесса */

.steps-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;

    counter-reset: step-counter;

}



.step-card {

    background-color: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    padding: 28px 24px;

    position: relative;

    display: flex;

    flex-direction: column;

}



.step-card__num {

    counter-increment: step-counter;

    width: 40px;

    height: 40px;

    border-radius: var(--radius-full);

    background-color: var(--color-primary);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    font-weight: 800;

    margin-bottom: 16px;

}



.step-card__num::before {

    content: "0" counter(step-counter);

}



.step-card__title {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--color-secondary);

    margin-bottom: 8px;

}



.step-card__text {

    font-size: 0.9rem;

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

    line-height: 1.55;

}



/* ---------- Страница статьи и Rich Text (.rt) ---------- */

.article-header {

    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);

    border-bottom: 1px solid var(--color-border);

    padding: 40px 0;

    margin-bottom: 40px;

}



.article-header__title {

    font-size: 2.4rem;

    font-weight: 800;

    color: var(--color-secondary);

    line-height: 1.2;

    letter-spacing: -0.02em;

    margin-bottom: 16px;

}



.article-header__meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 20px;

    font-size: 0.9rem;

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

}



.article-content, .rt {

    overflow-x: hidden;

    overflow-wrap: break-word;

    font-size: 1.05rem;

    line-height: 1.7;

    color: var(--color-text);

}



.article-content > * + * {

    margin-top: 1.3em;

}



.article-h2 {

    font-size: 1.75rem;

    font-weight: 800;

    color: var(--color-secondary);

    line-height: 1.25;

    margin-top: 2em;

    margin-bottom: 0.6em;

    padding-bottom: 8px;

    border-bottom: 2px solid var(--color-border);

}



.article-h3 {

    font-size: 1.35rem;

    font-weight: 700;

    color: var(--color-secondary);

    line-height: 1.3;

    margin-top: 1.6em;

    margin-bottom: 0.5em;

}



.article-h4 {

    font-size: 1.1rem;

    font-weight: 700;

    color: var(--color-secondary);

    margin-top: 1.2em;

    margin-bottom: 0.4em;

}



.article-p {

    margin-bottom: 1.2em;

}



.article-list, .article-ordered-list {

    margin: 1.2em 0;

    padding-left: 24px;

}



.article-list {

    list-style-type: disc;

}



.article-ordered-list {

    list-style-type: decimal;

}



.article-list li, .article-ordered-list li {

    margin-bottom: 8px;

    line-height: 1.6;

}



.article-figure {

    margin: 2em 0;

    border-radius: var(--radius-xl);

    overflow: hidden;

    border: 1px solid var(--color-border);

    background-color: var(--color-bg-subtle);

}



.article-img {

    width: 100%;

    max-height: 480px;

    object-fit: cover;

}



.article-figcaption {

    padding: 10px 16px;

    font-size: 0.85rem;

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

    background-color: var(--color-bg-alt);

    border-top: 1px solid var(--color-border);

    font-style: italic;

}



/* Таблицы контента */

.table-responsive {

    width: 100%;

    overflow-x: auto;

    margin: 1.8em 0;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    background-color: #ffffff;

    box-shadow: var(--shadow-sm);

}



.data-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 0.92rem;

    text-align: left;

}



.data-table th, .data-table td {

    padding: 14px 18px;

    border-bottom: 1px solid var(--color-border);

    vertical-align: middle;

}



.data-table th {

    background-color: var(--color-bg-subtle);

    color: var(--color-secondary);

    font-weight: 700;

    font-size: 0.88rem;

    text-transform: uppercase;

    letter-spacing: 0.03em;

}



.data-table tbody tr:last-child td {

    border-bottom: none;

}



.data-table tbody tr:hover {

    background-color: var(--color-bg-alt);

}



/* Боковая колонка (Sidebar) */

.sidebar {

    display: flex;

    flex-direction: column;

    gap: 24px;

    position: sticky;

    top: 90px;

}



.sidebar-widget {

    background-color: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    padding: 24px;

    box-shadow: var(--shadow-sm);

}



.sidebar-widget__title {

    font-size: 1.15rem;

    font-weight: 700;

    color: var(--color-secondary);

    margin-bottom: 16px;

    padding-bottom: 10px;

    border-bottom: 1px solid var(--color-border);

}



.sidebar-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.sidebar-list__link {

    font-size: 0.92rem;

    font-weight: 600;

    color: var(--color-text);

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 6px 0;

}

.sidebar-list__link:hover {

    color: var(--color-primary);

    transform: translateX(4px);

}



/* Баннер гарантии в сайдбаре */

.sidebar-guarantee {

    background-color: var(--color-primary);

    color: #ffffff;

    border-radius: var(--radius-xl);

    padding: 24px;

    text-align: center;

}



.sidebar-guarantee__icon {

    width: 44px;

    height: 44px;

    margin: 0 auto 12px;

    color: var(--color-accent);

}



.sidebar-guarantee__title {

    font-size: 1.15rem;

    font-weight: 800;

    margin-bottom: 8px;

}



.sidebar-guarantee__text {

    font-size: 0.88rem;

    line-height: 1.5;

    opacity: 0.9;

    margin-bottom: 18px;

}



/* ---------- E-E-A-T Блоки и карточки эксперта ---------- */

.author-card {

    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 28px;

    background-color: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    padding: 28px;

    box-shadow: var(--shadow-md);

    align-items: center;

}



.author-card__avatar {

    width: 180px;

    height: 180px;

    border-radius: var(--radius-xl);

    object-fit: cover;

    background-color: var(--color-bg-subtle);

    border: 2px solid var(--color-border);

}



.author-card__name {

    font-size: 1.4rem;

    font-weight: 800;

    color: var(--color-secondary);

    margin-bottom: 4px;

}



.author-card__role {

    font-size: 0.92rem;

    font-weight: 600;

    color: var(--color-primary);

    margin-bottom: 12px;

}



.author-card__bio {

    font-size: 0.95rem;

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

    line-height: 1.6;

    margin-bottom: 16px;

}



.author-card__badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



/* Отзывы */

.reviews-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

}



.review-card {

    background-color: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    padding: 24px;

    display: flex;

    flex-direction: column;

    box-shadow: var(--shadow-sm);

}



.review-card__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;

}



.review-card__author {

    font-weight: 700;

    color: var(--color-secondary);

    font-size: 1rem;

}



.review-card__stars {

    display: flex;

    gap: 2px;

    color: #f59e0b;

}



.review-card__text {

    font-size: 0.92rem;

    line-height: 1.6;

    color: var(--color-text);

    margin-bottom: 16px;

    flex-grow: 1;

}



.review-card__meta {

    font-size: 0.8rem;

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

    border-top: 1px solid var(--color-border);

    padding-top: 10px;

    display: flex;

    justify-content: space-between;

}



/* ---------- Подвал (Footer) ---------- */

.ftr {

    background-color: #0f172a;

    color: #f8fafc;

    padding: 64px 0 90px; /* Отступ под нижнюю фиксированную плажку */

    border-top: 1px solid #1e293b;

}



.ftr__inner {

    display: flex;

    flex-direction: column;

    gap: 48px;

}



.ftr__grid {

    display: grid;

    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;

    gap: 36px;

}



.ftr__grid > * {

    min-width: 0;

}



.logo--footer .logo__title {

    color: #ffffff;

}

.logo--footer .logo__sub {

    color: #94a3b8;

}



.ftr__text {

    font-size: 0.9rem;

    color: #94a3b8;

    line-height: 1.6;

    margin: 16px 0 20px;

}



.ftr__payment-badge {

    display: flex;

    align-items: center;

    gap: 10px;

    background-color: #1e293b;

    border: 1px solid #334155;

    padding: 10px 14px;

    border-radius: var(--radius-md);

    font-size: 0.82rem;

    color: #38bdf8;

    line-height: 1.35;

}



.ftr__badge-icon {

    width: 22px;

    height: 22px;

    color: #38bdf8;

    flex-shrink: 0;

}



.ftr__title {

    font-size: 1.05rem;

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 18px;

    letter-spacing: -0.01em;

}



.ftr__list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.ftr__link {

    font-size: 0.88rem;

    color: #94a3b8;

    transition: var(--transition);

}

.ftr__link:hover {

    color: #ffffff;

    padding-left: 4px;

}



.ftr__contact-item {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 18px;

}



.ftr__contact-link {

    font-size: 1.1rem;

    font-weight: 800;

    color: #ffffff;

}

.ftr__contact-link:hover {

    color: var(--color-accent);

}



.ftr__contact-sub {

    display: block;

    font-size: 0.75rem;

    color: #94a3b8;

}



.ftr__social-links {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 18px;

}



.social-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 7px 12px;

    border-radius: var(--radius-md);

    font-size: 0.85rem;

    font-weight: 600;

    background-color: #1e293b;

    color: #e2e8f0;

    border: 1px solid #334155;

    transition: var(--transition);

}



.social-btn:hover {

    background-color: #334155;

    color: #ffffff;

}



.social-btn--wa:hover {

    background-color: #25d366;

    border-color: #25d366;

}



.social-btn--tg:hover {

    background-color: #0088cc;

    border-color: #0088cc;

}



.social-btn--vk:hover {

    background-color: #0077ff;

    border-color: #0077ff;

}



.social-btn .icon {

    width: 16px;

    height: 16px;

}



.ftr__address {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    font-size: 0.85rem;

    color: #94a3b8;

    line-height: 1.4;

}



.ftr__bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 24px;

    border-top: 1px solid #1e293b;

    font-size: 0.85rem;

    color: #64748b;

}



.ftr__legal {

    display: flex;

    align-items: center;

    gap: 12px;

}



.ftr__legal-link {

    color: #94a3b8;

}

.ftr__legal-link:hover {

    color: #ffffff;

}



/* ---------- Фиксированная нижняя плажка ---------- */

.bottom-bar {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: #0f172a;

    border-top: 2px solid var(--color-accent);

    padding: 10px 0;

    z-index: 95;

    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);

}



.bottom-bar__inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

}



.bottom-bar__info {

    display: flex;

    align-items: center;

    gap: 12px;

}



.bottom-bar__badge {

    background-color: var(--color-accent);

    color: #ffffff;

    font-size: 0.75rem;

    font-weight: 800;

    text-transform: uppercase;

    padding: 3px 8px;

    border-radius: var(--radius-sm);

    letter-spacing: 0.05em;

    flex-shrink: 0;

}



.bottom-bar__text {

    font-size: 0.9rem;

    font-weight: 600;

    color: #ffffff;

}



.bottom-bar__actions {

    display: flex;

    align-items: center;

    gap: 10px;

}



/* ---------- Модальное окно ---------- */

.modal {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



.modal[hidden] {

    display: none;

}



.modal__backdrop {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: rgba(15, 23, 42, 0.7);

    backdrop-filter: blur(4px);

}



.modal__dialog {

    position: relative;

    width: 100%;

    max-width: 500px;

    max-height: 90vh;

    overflow-y: auto;

    background-color: #ffffff;

    border-radius: var(--radius-xl);

    padding: 32px;

    box-shadow: var(--shadow-xl);

    z-index: 1;

}



.modal__close {

    position: absolute;

    top: 16px;

    right: 16px;

    width: 36px;

    height: 36px;

    border-radius: var(--radius-full);

    border: 1px solid var(--color-border);

    background-color: var(--color-bg-subtle);

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

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition);

}



.modal__close:hover {

    background-color: var(--color-border);

    color: var(--color-secondary);

}



.modal__header {

    margin-bottom: 20px;

    text-align: center;

}



.modal__title {

    font-size: 1.4rem;

    font-weight: 800;

    color: var(--color-secondary);

    margin-bottom: 6px;

}



.modal__subtitle {

    font-size: 0.88rem;

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

}



/* ---------- Кнопка наверх ---------- */

.totop {

    position: fixed;

    bottom: calc(var(--bottom-bar-h, 72px) + 16px);

    right: 24px;

    width: 44px;

    height: 44px;

    border-radius: var(--radius-full);

    background-color: var(--color-primary);

    color: #ffffff;

    border: none;

    cursor: pointer;

    box-shadow: var(--shadow-lg);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: var(--transition);

    z-index: 90;

}



.totop svg {

    width: 20px;

    height: 20px;

}



.totop.is-on {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



/* ---------- Утилиты и адаптивность (Breakpoints) ---------- */

.text-danger { color: var(--color-danger); }

.text-success { color: var(--color-success); }

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



/* 1024px */

@media (max-width: 1024px) {

    .hide-tablet {

        display: none !important;

    }



    .hero__grid {

        grid-template-columns: 1fr;

        gap: 32px;

    }

    .hero__card {

        max-width: 540px;

        margin: 0 auto;

    }

    .categories-grid, .articles-grid, .reviews-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .features-grid, .steps-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .ftr__grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .layout-sidebar {

        grid-template-columns: 1fr;

    }

    .sidebar {

        position: static;

        margin-top: 40px;

    }

}



/* 768px */

@media (max-width: 768px) {

    .hide-mobile {

        display: none !important;

    }



    .topbar__inner {

        justify-content: center;

    }

    .topbar__badges {

        justify-content: center;

    }

    .topbar__contacts {

        justify-content: center;

        flex-wrap: wrap;

        gap: 8px;

    }



    .burger {

        display: flex;

    }



    .nav {

        position: fixed;

        /* Отступ равен фактическому низу шапки, иначе меню накрывает логотип и бургер */

        top: var(--hdr-bottom, 108px);

        left: 0;

        right: 0;

        bottom: 0;

        background-color: #ffffff;

        padding: 24px;

        overflow-y: auto;

        transform: translateY(-100%);

        opacity: 0;

        visibility: hidden;

        transition: transform 0.3s ease, opacity 0.3s ease;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        z-index: 99;

    }



    .nav.is-open {

        transform: translateY(0);

        opacity: 1;

        visibility: visible;

    }



    .nav__list {

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

        width: 100%;

    }



    .nav__link {

        font-size: 1.15rem;

        display: block;

        width: 100%;

        padding: 8px 0;

        border-bottom: 1px solid var(--color-border);

    }



    .nav__mobile-actions {

        display: flex;

        flex-direction: column;

        gap: 12px;

        margin-top: 24px;

        width: 100%;

    }



    .hero__title {

        font-size: 2rem;

    }



    .categories-grid, .articles-grid, .reviews-grid,

    .features-grid, .steps-grid, .ftr__grid {

        grid-template-columns: 1fr;

    }



    .author-card {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .author-card__avatar {

        margin: 0 auto;

    }

    .author-card__badges {

        justify-content: center;

    }



    /* Плашка становится выше — запас снизу увеличиваем (точное значение выставит JS) */

    :root {

        --bottom-bar-h: 116px;

    }



    .bottom-bar__inner {

        flex-direction: column;

        text-align: center;

        gap: 8px;

    }

    .bottom-bar__info {

        flex-direction: column;

        gap: 4px;

    }

    .bottom-bar__actions {

        width: 100%;

        justify-content: center;

    }

    .bottom-bar__btn {

        width: 100%;

    }

    .bottom-bar__modal-btn {

        display: none;

    }



    .ftr__bottom {

        flex-direction: column;

        gap: 16px;

        text-align: center;

    }

    .ftr__legal {

        flex-wrap: wrap;

        justify-content: center;

    }

}



/* 425px & 375px & 320px */

@media (max-width: 425px) {

    .hero__title {

        font-size: 1.7rem;

    }

    .hero__features {

        grid-template-columns: 1fr;

    }

    .section__title {

        font-size: 1.6rem;

    }

    .modal__dialog {

        padding: 20px 16px;

    }

    .article-header__title {

        font-size: 1.75rem;

    }

}