/* Стили страниц витрины.
 *
 * Всё, что относится к самой системе дизайна, лежит в serpward/ и не
 * правится: её обновляют целиком, из скилла. Здесь — только то, из чего
 * собраны страницы этого сайта: шапка, подвал, крупные блоки.
 *
 * Цвета, отступы и шрифты берутся переменными системы, своих значений
 * не заводим — иначе при обновлении система и сайт разъедутся.
 */

/* --- Шапка --- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(251, 250, 247, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-hairline);
}

.site-header__inner {
    height: var(--height-header);
    display: flex;
    align-items: center;
    gap: 24px;
}

/* --- Правая часть шапки: язык, вход, кнопка, меню --- */

.site-header__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* На телефоне места меньше, а элементов почти столько же. */
@media (max-width: 640px) {
    .site-header__right { gap: 6px; }
}

.site-header__signin {
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--text-secondary);
    text-decoration: none;
}

.site-header__signin:hover { color: var(--ink-900); }

/* --- Знак и слово рядом с ним --- */

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-900);
    text-decoration: none;
}

.site-brand svg {
    display: block;
    flex: none;
    width: 26px;
    height: 26px;
}

.site-brand__word {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.022em;
    line-height: 1;
    white-space: nowrap;
}

/* --- Меню --- */

.site-nav { display: flex; gap: 26px; }

.site-nav a {
    font-family: var(--font-ui);
    font-size: 15px;
    text-decoration: none;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}

.site-nav a:hover { color: var(--ink-900); }

.site-nav a.is-current {
    color: var(--ink-900);
    border-bottom-color: var(--seal-600);
}

/* --- Первый экран --- */

.hero { padding-top: 88px; padding-bottom: var(--section-y); }

.hero__title {
    margin-top: 14px;
    max-width: 18ch;
}

.hero__lead {
    margin-top: 20px;
    font-family: var(--font-body);
    font-size: 21px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 58ch;
}

/* --- Обычный раздел --- */

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.section--bordered {
    background: var(--paper-100);
    border-top: 1px solid var(--border-hairline);
    border-bottom: 1px solid var(--border-hairline);
}

.section__title { margin-top: 14px; max-width: 20ch; }

.section__lead {
    margin-top: 16px;
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.62;
    color: var(--text-secondary);
    max-width: 58ch;
}

/* --- Три шага --- */

.method { margin-top: 48px; }

.method__num {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--seal-600);
    letter-spacing: .06em;
}

.method__step h3 {
    margin-top: 10px;
    font-size: 23px;
}

.method__step p {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* --- Подвал --- */

.site-footer {
    border-top: 1px solid var(--border-hairline);
    background: var(--paper-100);
    padding-top: 56px;
    padding-bottom: 40px;
}

/* Внешнего отступа сверху здесь нет намеренно. Он был, пока последним
   на странице шёл раздел без заливки. Теперь последний блок сам с фоном,
   и отступ показывал светлую полосу между двумя одинаковыми заливками.
   Разделяет их тонкая линия, а воздух даёт нижний отступ самого блока. */

.site-footer__line {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 10px;
    max-width: 34ch;
}

.site-footer__legal {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 28px;
}

/* --- Перечисление фактов ---
 *
 * Не «преимущества» с галочками, а список того, что есть на экране.
 * Маркер — тонкая линия слева, а не точка: она читается как строка
 * записи, а не как рекламный пункт.
 */

.facts {
    margin-top: 40px;
    padding: 0;
    list-style: none;
    max-width: 62ch;
}

.facts li {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-secondary);
    padding: 14px 0 14px 20px;
    border-left: 2px solid var(--paper-300);
    border-bottom: 1px solid var(--border-hairline);
}

.facts li:last-child { border-bottom: 0; }

/* --- Обычная страница --- */

.page { padding-top: 72px; padding-bottom: var(--section-y); }

.page__title { max-width: 22ch; }

.page__body { margin-top: 28px; }

/* Записка редактору о пустой странице. Посетитель её не видит. */
.page__empty {
    margin-top: 28px;
    padding: 16px 18px;
    border: 1px dashed var(--paper-300);
    border-radius: var(--radius-md, 8px);
    background: var(--paper-100);
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 62ch;
}

/* --- Меню на узком экране --- */

/* Кнопка меню: значок обратно в середину.
   Класс системы «показывать только на узком экране» задаёт способ
   выкладки строкой и тем самым сбивает центровку, заложенную в самой
   кнопке. Правило ниже её возвращает — и только там, где кнопка видна,
   иначе она вылезет и на широком экране. */
@media (max-width: 900px) {
    .site-burger { display: inline-flex; }
}

/* Затемнение под меню. Класс системы даёт вид, здесь только показ. */
.site-menu-scrim {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    z-index: var(--z-overlay);
}

.site-menu-scrim[hidden],
.site-menu[hidden] { display: none; }

.site-menu__nav { display: flex; flex-direction: column; }

.site-menu__nav a {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.012em;
    text-decoration: none;
    color: var(--ink-900);
    padding: 14px 0;
    border-bottom: 1px solid var(--border-hairline);
}

.site-menu__nav a.is-current { color: var(--seal-700); }

.site-menu__signin {
    font-family: var(--font-ui) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
    border-bottom: 0 !important;
    padding-top: 18px !important;
}

/* --- Подвал: разделы рядом с описанием --- */

.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
}

.site-footer__nav { display: flex; flex-direction: column; gap: 9px; }

.site-footer__nav a {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
}

.site-footer__nav a:hover { color: var(--ink-900); }

/* В выдвижном меню кнопка отделена от разделов. */
.site-menu__cta { margin-top: 20px; }

/* --- Завершающий блок --- */

.closing {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
    background: var(--paper-100);
    border-top: 1px solid var(--border-hairline);
}

.closing__title { max-width: 20ch; }

.closing__lead {
    margin-top: 16px;
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.62;
    color: var(--text-secondary);
    max-width: 56ch;
}

/* Кому это адресовано. Сказано прямо: у тех, к кому мы не обращаемся,
 * своя служба и свои юристы, и они это знают. */
.closing__note {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 56ch;
}

.closing .sw-btn { margin-top: 32px; }

/* --- Страница из блоков --- */

.page__lead {
    margin-top: 20px;
    font-size: 21px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 56ch;
}

.steps { margin-top: 56px; }

.step {
    display: flex;
    gap: 24px;
    padding: 32px 0;
    border-top: 1px solid var(--border-hairline);
}

.step__num {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--seal-600);
    letter-spacing: .06em;
    padding-top: 8px;
    flex: none;
    width: 32px;
}

.step__text { max-width: 62ch; }

.step__text h2 { font-size: 25px; max-width: 24ch; }

.step__text p {
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.62;
    color: var(--text-secondary);
}

.step__text .facts { margin-top: 20px; }

/* На телефоне номер над заголовком, а не сбоку: сбоку он съедает
   треть ширины строки. */
@media (max-width: 640px) {
    .step { flex-direction: column; gap: 8px; }
    .step__num { padding-top: 0; width: auto; }
}

/* --- Призыв в конце внутренней страницы --- */

.page__cta {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--border-hairline);
}

.page__cta h2 { max-width: 20ch; }

.page__cta p {
    margin-top: 14px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 56ch;
}

.page__cta .sw-btn { margin-top: 28px; }

/* --- Форма заявки --- */

.closing__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

@media (max-width: 900px) {
    .closing__grid { grid-template-columns: 1fr; gap: 40px; }
}

.contact-form .sw-field + .sw-field { margin-top: 18px; }
.contact-form .sw-btn { margin-top: 24px; }

/* Ловушка для роботов: человек её не видит и не наводит на неё курсор.
   display:none не годится — часть роботов такие поля пропускает. */
.contact-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-done {
    padding: 28px 30px;
    background: var(--seal-050);
    border: 1px solid var(--seal-200);
    border-radius: var(--radius-md, 8px);
}

.contact-done h3 { font-size: 23px; }

.contact-done p {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* --- Переключатель языка --- */

.site-lang { position: relative; }

.site-lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--radius-control);
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    /* Треугольник, который браузер рисует у такого элемента сам,
       здесь лишний: обе строки нужны, разные браузеры слушают разные. */
    list-style: none;
}

.site-lang__btn::-webkit-details-marker { display: none; }

.site-lang__btn:hover {
    color: var(--ink-900);
    background: var(--paper-100);
}

.site-lang__btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.site-lang[open] .site-lang__btn { color: var(--ink-900); }

.site-lang__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1;
    min-width: 172px;
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.site-lang__panel a {
    padding: 8px 10px;
    border-radius: var(--radius-control);
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--ink-800);
    text-decoration: none;
    white-space: nowrap;
}

.site-lang__panel a:hover { background: var(--paper-100); }

.site-lang__panel a.is-current { color: var(--seal-700); }

/* --- Блоки лендингов ---
 *
 * Общие куски для страниц, собранных из блоков. Разделы, заголовки
 * и сетка берутся те же, что на главной, — здесь только то, чего
 * там не было.
 */

/* Кнопка внутри блока: воздух задаётся обёртке, а не самой кнопке —
   иначе он зависит от того, во что кнопку завернули. */
.block__cta { margin-top: 32px; }

/* Пункты: «для кого» и строки географии. Разница только в числе
   колонок, оно задаётся в самом блоке. */
.landing-items { margin-top: 44px; }

.landing-item h3 {
    font-size: 20px;
    letter-spacing: -0.01em;
}

.landing-item p {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Вопросы. Ответ бывает в строку и в абзац — держим оба. */
.faq {
    margin-top: 40px;
    max-width: 72ch;
}

.faq__item {
    padding: 20px 0;
    border-bottom: 1px solid var(--border-hairline);
}

.faq__item:last-child { border-bottom: 0; }

.faq__item h3 { font-size: 19px; }

.faq__item p {
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.62;
    color: var(--text-secondary);
}

/* Изображения блока: доказательства и скриншоты кабинета. */
.block-images { margin-top: 44px; }

.block-images--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

@media (max-width: 900px) {
    .block-images--grid { grid-template-columns: minmax(0, 1fr); }
}

.block-images figure { margin: 0; }

.block-images img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-media);
    background: var(--paper-100);
}

.block-images figcaption {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* --- Кнопки-ссылки: цвет надписи при наведении ---
 *
 * В системе дизайна есть общее правило для ссылок: при наведении текст
 * перекрашивается в тёмно-синий. Цвет надписи кнопки задан классом,
 * и по правилам подсчёта веса общее правило для ссылок оказывается
 * сильнее — надпись на тёмно-зелёной кнопке становилась тёмной
 * и почти пропадала.
 *
 * Возвращаем каждому виду кнопки его собственный цвет. Систему дизайна
 * не правим: она обновляется целиком, и правка потерялась бы.
 */

a.sw-btn--primary:hover,
a.sw-btn--primary:focus   { color: var(--action-primary-fg); }

a.sw-btn--accent:hover,
a.sw-btn--accent:focus    { color: var(--paper-000); }

a.sw-btn--secondary:hover,
a.sw-btn--secondary:focus { color: var(--action-secondary-fg); }

a.sw-btn--ghost:hover,
a.sw-btn--ghost:focus     { color: var(--ink-800); }

/* Карточка страницы раздела. Тот же пункт, что в «Для кого», но целиком
   ссылка — поэтому убираем подчёркивание и возвращаем цвет заголовку. */
a.section-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.section-item h3 {
    color: var(--ink-900);
    border-bottom: 2px solid transparent;
    display: inline-block;
    padding-bottom: 2px;
}

a.section-item:hover h3 {
    color: var(--seal-700);
    border-bottom-color: var(--seal-600);
}