/* ==========================================================================
   SeoVision — база: сброс, типографика, кнопки, формы, утилиты
   ========================================================================== */

/* --- Сброс --------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
ul, ol, dl, dd { margin: 0; }

ul, ol { padding: 0; list-style: none; }

img, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
}

button, input, select, textarea { font: inherit; color: inherit; }

address { font-style: normal; }

/* --- Полотно ------------------------------------------------------------- */

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;

    font-family: var(--font-text);
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--c-ink);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

.page { flex: 1 0 auto; }

/* --- Заголовки ----------------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: var(--lh-head);
    text-transform: uppercase;
}

.h1 {
    /* 5.2vw держит «на собственных» в одну строку вплоть до ~1150px */
    font-size: clamp(36px, 5.2vw, var(--fs-h1));
    line-height: .98;
    letter-spacing: -.005em;
}

.h2 {
    font-size: clamp(28px, 4.4vw, var(--fs-h2));
    line-height: var(--lh-tight);
}

.h3 {
    font-size: clamp(22px, 3vw, var(--fs-h3));
    line-height: var(--lh-head);
}

/* Надзаголовок с оранжевой чертой */
.eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--c-orange-ink);
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    flex: none;
}

/* Надзаголовок без черты (в шапках секций внутри карточек) */
.eyebrow--plain::before { display: none; }

/* --- Текст --------------------------------------------------------------- */

.lead {
    font-size: var(--fs-lg);
    line-height: var(--lh-text);
    color: var(--c-ink-2);
}

.muted { color: var(--c-ink-4); }

.note {
    font-size: var(--fs-base);
    color: var(--c-ink-4);
}

a {
    color: var(--c-green-deep);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover { color: var(--c-green); }

:focus-visible {
    outline: 2px solid var(--c-green);
    outline-offset: 2px;
}

/* Ссылка со стрелкой */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-base);
}

/* Стрелку рисуем фоном, а не <svg> внутри ссылки: иначе её разметка
   попадает в анкор — и в отчётах анализаторов, и для поиска. */
.link-arrow::after,
.card__more::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.link-arrow svg { flex: none; }

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--h-control);
    padding: var(--sp-2) var(--sp-8);

    font-family: var(--font-display);
    font-size: var(--fs-lg);
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;

    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn--primary {
    background: var(--c-green);
    color: var(--c-ink-inv);
}

.btn--primary:hover {
    background: var(--c-green-deep);
    color: var(--c-ink-inv);
}

.btn--ghost {
    background: var(--c-surface);
    border-color: var(--c-line-input);
    color: var(--c-ink);
}

.btn--ghost:hover {
    border-color: var(--c-ink);
    color: var(--c-ink);
}

.btn--dark {
    background: var(--c-dark);
    color: var(--c-ink-inv);
}

.btn--dark:hover {
    background: #262C30;
    color: var(--c-ink-inv);
}

.btn--sm {
    min-height: var(--h-control-sm);
    padding: var(--sp-2) var(--sp-6);
    font-size: var(--fs-base);
}

.btn--block { width: 100%; }

/* Иконки соцсетей — фоном, а не <svg> внутри ссылки: разметка иконки
   иначе попадает в анкор (видно в отчётах анализаторов). */
.btn--tg::before,
.btn--max::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.btn--tg::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4L3 11l6 2 2 6z'/%3E%3Cpath d='M21 4l-10 9'/%3E%3C/svg%3E"); }
.btn--max::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23000' d='M9.19422 17.9503C7.42576 17.9503 6.60432 17.6902 5.17985 16.6495C4.27338 17.8202 1.42018 18.7307 1.29496 17.1699C1.29496 16.0005 1.03333 15.0151 0.745259 13.9302C0.392453 12.6015 0 11.1234 0 8.97514C0 3.85249 4.18513 0 9.14728 0C14.1095 0 18 4.04059 18 9.02492C18 14.0092 13.9856 17.9503 9.19422 17.9503ZM9.26627 4.42856C6.85158 4.30146 4.96719 5.98344 4.55166 8.61608C4.20756 10.7962 4.81765 13.4527 5.33953 13.5864C5.58546 13.6494 6.21572 13.1375 6.60419 12.7474C7.24317 13.1633 7.97641 13.4855 8.79151 13.5284C11.2705 13.6589 13.4674 11.7112 13.5972 9.22252C13.7271 6.73377 11.7453 4.55907 9.26627 4.42856Z'/%3E%3C/svg%3E"); }


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

.input {
    width: 100%;
    height: 50px;
    padding: 0 var(--sp-4);
    background: var(--c-surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color var(--transition);
}

.input::placeholder { color: var(--c-ink-5); }

.input:focus {
    outline: none;
    border-color: var(--c-green);
}

/* Отправленная форма: остаётся только ответ */
form.is-sent > *:not(.form-msg) { display: none; }

form.is-sent .form-msg--ok {
    margin: 0;
    padding: var(--sp-6);
    font-size: var(--fs-md);
    line-height: var(--lh-text);
}

.form-msg__title {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-h3);
    line-height: var(--lh-head);
    text-transform: uppercase;
    padding-bottom: var(--sp-2);
}

/* Заголовок нужен только когда ответ заменил собой всю форму */
.form-msg__title { display: none; }
form.is-sent .form-msg__title { display: block; }

/* Поле, на которое ругнулась проверка перед отправкой */
.input--err {
    border-color: #E0443E;
    background: #FDF3F2;
}

.form-note {
    font-size: var(--fs-xs);
    color: #7E8A8D;
    text-align: center;
}

/* Ответ после отправки заявки */
.form-msg {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

.form-msg:empty { display: none; }

.form-msg--ok {
    padding: var(--sp-3) var(--sp-4);
    background: #E7F6EC;
    border-left: 3px solid var(--c-green);
    color: #14532B;
}

.form-msg--err {
    padding: var(--sp-3) var(--sp-4);
    background: #FDECEC;
    border-left: 3px solid var(--c-error, #D64545);
    color: #7A2020;
}

/* на тёмном фоне (форма в призыве) сообщение тоже читается */
.section--dark .form-msg--ok { background: rgba(36, 181, 82, .16); color: #DFF5E6; }
/* Ссылки на тёмных секциях: основной #17823A на #14181B даёт 3.65 при норме 4.5.
   Возвращаем прежний бренд-зелёный — на тёмном он как раз 4.56. */
.section--dark a:not(.btn) { color: var(--c-green-on-dark); }

.section--dark .form-msg--err { background: rgba(214, 69, 69, .18); color: #FFD9D9; }

/* --- Служебное ----------------------------------------------------------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}