/*
 * ЮрШаг · дизайн v4 «Юридическая фирма» (06.10.2026). Подключается после style.css, tokens-v2.css, v2.css (v3 отключён).
 * Владелец о v3: «дешёвый лендинг, не вызывает доверия». Причина: градиенты, неон, «таблетки» — шаблон ИИ-стартапа.
 * v4 — сдержанность крупной юридической фирмы и банка: белый и глубокий тёмно-синий, тонкие линии, строгая сетка,
 * много воздуха, никакого свечения. Доверие — через проверяемые факты: живой юрист на первом экране, юрлицо и ИНН,
 * договор-оферта, цена до оплаты, возврат денег. Разметка общих компонентов прежняя — меняется визуальный слой.
 */

:root {
  --v-paper: #ffffff;
  --v-surface: #ffffff;
  --v-surface-2: #f4f6f9;      /* спокойные серые секции */
  --v-ink: #0f1b2d;
  --v-muted: #52607a;          /* ≥ 4.5:1 на белом и #f4f6f9 */
  --v-line: #e2e6ed;
  --v-control: #8792a7;
  --v-blue: #14305a;           /* фирменный тёмно-синий: кнопки, акценты */
  --v-blue-strong: #0b2040;
  --v-blue-soft: #edf1f7;
  --v-link: #1d4fbf;
  --v-gold: #14305a;           /* бывший золотой акцент → фирменный синий */
  --v-gold-ink: #14305a;
  --v-gold-soft: #edf1f7;
  --v-ok: #0d7048;
  --v-ok-soft: #e6f4ed;
  --v-night: #0d1b30;

  --v-serif: var(--v-sans);
  --v-fs-h1: clamp(2.1rem, 1.5rem + 2.8vw, 3.5rem);
  --v-fs-h2: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem);
  --v-fs-h3: clamp(1.12rem, 1.06rem + .3vw, 1.3rem);
  --v-lh-tight: 1.12;

  --v-r-s: 8px;
  --v-r: 12px;
  --v-r-l: 16px;
  --v-shadow: 0 1px 2px rgba(15, 27, 45, .05);
  --v-shadow-l: 0 1px 2px rgba(15, 27, 45, .04), 0 16px 40px rgba(15, 27, 45, .08);
  --c-focus-dark: #9fb6e6;
}

/* ============ База ============ */
body { background: #fff; color: var(--v-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .v-serif, .logo__name, .site-footer__h, .chat__title { font-family: var(--v-sans); }
h1 { font-weight: 700; letter-spacing: -.028em; line-height: 1.08; }
h2 { font-weight: 700; letter-spacing: -.022em; }
h3 { font-weight: 700; letter-spacing: -.01em; }
a { color: var(--v-link); }
a:hover { color: var(--v-blue); }
.lead { color: var(--v-muted); }
:focus-visible { outline: 3px solid #4d7fe0; outline-offset: 3px; }
::selection { background: #cfdcf5; color: var(--v-ink); }

/* Надзаголовок — строгая подпись, без «таблеток» и золота */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; box-shadow: none;
  font: 600 .8125rem/1.3 var(--v-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--v-muted); }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--v-blue); border-radius: 0; box-shadow: none; flex: none; }
.eyebrow--light { color: #b5c2d9; }
.eyebrow--light::before { background: #b5c2d9; }

/* ============ Секции ============ */
.section { padding: clamp(64px, 8vw, 112px) 0; }
.section--alt, .section--warm, .section--form { background: var(--v-surface-2); border: 0; }
.section--brand { background: var(--v-night); }
.section__head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head h2 { margin-bottom: .4em; }

/* ============ Шапка ============ */
.site-header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--v-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header__row { min-height: 76px; }
.site-header .logo__mark rect { fill: var(--v-blue); }
.site-header .logo__mark circle { fill: #8fb3ff; }
.logo__name { font-weight: 700; letter-spacing: -.02em; font-size: 1.3rem; }
.logo__tag { color: var(--v-muted); }
.site-nav a { font-weight: 500; color: var(--v-ink); }
.site-nav a:hover { color: var(--v-link); }
.header-phone { display: none; font-weight: 700; color: var(--v-ink); text-decoration: none; white-space: nowrap; }
.header-phone:hover { color: var(--v-link); }
@media (min-width: 1240px) { .header-phone { display: inline-block; margin-left: 4px; } }
.nav-toggle { border-radius: var(--v-r-s); }

/* ============ Кнопки: прямоугольные, без свечения ============ */
.btn { border-radius: var(--v-r-s); font-weight: 600; letter-spacing: 0; box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn--primary { background: var(--v-blue); color: #fff; border: 1px solid var(--v-blue); box-shadow: none; }
.btn--primary:hover { background: var(--v-blue-strong); border-color: var(--v-blue-strong); color: #fff; transform: none; box-shadow: none; }
.btn--secondary { background: #fff; color: var(--v-ink); border: 1px solid #c9d0dc; box-shadow: none; }
.btn--secondary:hover { border-color: var(--v-blue); color: var(--v-blue); background: #fff; }
.btn--light { background: #fff; color: var(--v-blue); box-shadow: none; }
.btn--light:hover { background: #e9eef7; color: var(--v-blue-strong); }
.btn--accent { background: var(--v-blue); color: #fff; }

/* ============ Поля ============ */
input[type="text"], input[type="tel"], input[type="email"], input[type="search"], textarea, select {
  border-radius: var(--v-r-s); border: 1px solid #c9d0dc; background: #fff; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--v-blue); box-shadow: 0 0 0 3px rgba(29, 79, 191, .18); }

/* ============ Первый экран главной ============ */
.hero { background: #fff; border-bottom: 1px solid var(--v-line); padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 88px); }
.hero::before, .hero::after { content: none; }
.hero--page { background: var(--v-surface-2); padding: clamp(32px, 5vw, 64px) 0; }
.hero h1 { font-size: var(--v-fs-h1); max-width: 15em; }
.hero .lead { font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; } }
.hero__free { color: var(--v-muted); }
.hero__free b { color: var(--v-ok); }
.hero__free .hero__paid { color: var(--v-ink); }
.facts { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--v-line); display: grid; gap: 12px; }
.facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; color: var(--v-ink); }
.facts .ico { width: 20px; height: 20px; color: var(--v-ok); flex: none; margin-top: 2px; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 28px; } }

/* Карточка юриста: живой человек, а не иллюстрация */
.lawyer-card { background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r-l); overflow: hidden; box-shadow: var(--v-shadow-l); }
.lawyer-card__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; background: #dfe5ee; }
.lawyer-card__body { padding: 22px 24px 24px; }
.lawyer-card__name { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.lawyer-card__role { color: var(--v-muted); margin: 2px 0 16px; font-size: 1rem; }
.lawyer-card__quote { margin: 0 0 18px; padding-left: 14px; border-left: 2px solid var(--v-blue); color: var(--v-ink); font-size: 1rem; line-height: 1.55; }
.lawyer-card__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--v-line); margin: 0 -24px; }
.lawyer-card__meta div { padding: 14px 16px 0 24px; }
.lawyer-card__meta div + div { border-left: 1px solid var(--v-line); padding-left: 16px; }
.lawyer-card__meta dt { font-size: .8125rem; color: var(--v-muted); }
.lawyer-card__meta dd { margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; }
.lawyer-card__link { display: inline-block; margin-top: 18px; font-weight: 600; }

/* Полоса проверяемых фактов о компании */
.trustbar { background: var(--v-surface-2); border-bottom: 1px solid var(--v-line); }
.trustbar__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.trustbar__list li { padding: 22px 20px 22px 0; display: grid; gap: 4px; align-content: start; }
@media (min-width: 900px) { .trustbar__list li + li { border-left: 1px solid var(--v-line); padding-left: 24px; } }
.trustbar__list b { font-size: 1rem; }
.trustbar__list span { color: var(--v-muted); font-size: .94rem; line-height: 1.45; }

/* ============ Ситуации: строгий список вместо «плиток» ============ */
.tiles { gap: 0; border-top: 1px solid var(--v-line); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 32px; }
.tile { border: 0; border-bottom: 1px solid var(--v-line); border-radius: 0; background: transparent; box-shadow: none; padding: 20px 4px;
  transform: none !important; }
.tile::after { content: none; }
.tile:hover { background: transparent; box-shadow: none; border-color: var(--v-line); }
.tile:hover .tile__title { color: var(--v-link); }
.tile__ico { background: var(--v-blue-soft); color: var(--v-blue); border-radius: 10px; }
.tile:hover .tile__ico { background: var(--v-blue-soft); color: var(--v-blue); }
.tile__go { color: var(--v-muted); }
.tile:hover .tile__go { color: var(--v-link); }
.tile--other { border-style: solid; }

/* ============ Документы (тёмная секция) ============ */
.section--brand::before, .section--brand::after { content: none; }
.docs-band__intro p { color: #c3cddd; }
.docs-band__rules .ico { color: #8fb3ff; }
.docs-band__list { border-radius: var(--v-r-l); background: #fff; box-shadow: none; }
.docs-band__caption, .path-card__title, .paper__kicker, .offer__title { color: var(--v-muted); }

/* ============ Шаги и линия пути ============ */
.path-card__n, .v-steps__n, .timeline__num, .numlist li::before, .steps3 .steps3__n { background: var(--v-blue); color: #fff; border-radius: 10px;
  font-family: var(--v-sans); font-weight: 700; }
.path-card__list li:last-child .path-card__n, .v-steps > li:last-child .v-steps__n, .timeline__item:last-child .timeline__num { background: var(--v-blue); color: #fff; }
.path-card__list li:not(:last-child)::after, .v-steps > li:not(:last-child)::after, .timeline__item:not(:last-child)::before { background: var(--v-line); }
.path-card { box-shadow: var(--v-shadow-l); }
.path-card::before { background: var(--v-blue); }
.path-card__price, .doc-card__meta dd, .blank-buy__price, .price-card__price, .pay__amount, .offer__price b {
  font-family: var(--v-sans); font-weight: 700; letter-spacing: -.02em; color: var(--v-ink); }
.timeline__tag { background: var(--v-blue-soft); color: var(--v-blue); }

/* ============ Карточки, цены ============ */
.card, .doc-card, .shop-card, .price-card, .rule-cards li, .pay__card { border-radius: var(--v-r-l); border: 1px solid var(--v-line);
  box-shadow: none; background: #fff; }
.doc-card:hover, .shop-card:hover { box-shadow: var(--v-shadow-l); transform: none; }
.price-card { padding: clamp(24px, 3vw, 32px); }
.price-card__price { font-size: 2.1rem; }
.price-card--main { border: 2px solid var(--v-blue); background: #fff; color: var(--v-ink); box-shadow: var(--v-shadow-l); }
.price-card--main::before { content: none; }
.price-card--main h3, .price-card--main .price-card__price, .price-card--main .price-card__price * { color: var(--v-ink) !important; }
.price-card--main p, .price-card--main li { color: var(--v-muted); }
.price-card__badge { background: var(--v-blue); color: #fff; border-radius: 6px; font-weight: 600; }
.rule-cards li { border-left: 1px solid var(--v-line); }
.rule-cards .ico { color: var(--v-blue); }
.chip { border-radius: var(--v-r-s); }
.banner { background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r-l); box-shadow: none; }
.banner .tile__ico { background: var(--v-blue-soft); color: var(--v-blue); }
.list-check li::before { color: var(--v-ok); }

/* ============ Образцы документов ============ */
.paper, .paper--doc { border-radius: 6px; border: 1px solid var(--v-line); box-shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 20px 50px rgba(15, 27, 45, .10); background: #fff; }

/* ============ FAQ ============ */
.faq details { background: transparent; border: 0; border-bottom: 1px solid var(--v-line); border-radius: 0; padding: 0; margin: 0; box-shadow: none; }
.faq details[open] { box-shadow: none; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0;
  font-weight: 600; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--v-muted); border-bottom: 2px solid var(--v-muted);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details > div { padding-bottom: 18px; color: var(--v-muted); }

/* ============ Чат ============ */
.chat { border-radius: var(--v-r-l); border: 1px solid var(--v-line); box-shadow: var(--v-shadow-l); }
.chat__log { background: var(--v-surface-2); border-radius: var(--v-r); }
.msg--client { background: var(--v-blue); color: #fff; border-radius: 14px 14px 4px 14px; }
.msg--agent { background: #fff; border: 1px solid var(--v-line); border-radius: 14px 14px 14px 4px; }
.msg--lawyer { background: #eef3fb; border: 1px solid #d5e0f2; border-radius: 14px 14px 14px 4px; }
.msg__who { color: var(--v-muted); }
.msg--client .msg__who { color: #c9d6ee; }
.msg--card { border-radius: var(--v-r-l); border: 1px solid var(--v-line); background: #fff; box-shadow: var(--v-shadow-l); }
.chat__send textarea { border-radius: var(--v-r); }
.chat__send-btn { border-radius: var(--v-r-s); }

/* ============ Статусы ============ */
.order-status { border-left: 3px solid var(--v-blue); border-radius: 8px; }

/* ============ Финальный призыв ============ */
.closing { background: var(--v-night); color: #c3cddd; }
.closing__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .closing__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
.closing h2 { color: #fff; margin-bottom: .35em; }
.closing p { margin: 0; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.closing__phone { color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.closing__phone:hover { color: #cfe0ff; }

/* ============ Подвал ============ */
.site-footer { background: var(--v-night); color: #aebad0; }
.site-footer::before { content: none; }
.site-footer__h { font-weight: 700; }
.site-footer .logo__mark rect { fill: #fff; }
.site-footer .logo__mark path { stroke: var(--v-blue); }
.site-footer .logo__mark circle { fill: #8fb3ff; }

/* ============ Нижняя кнопка на телефоне ============ */
.sticky-cta { background: rgba(255, 255, 255, .97); border-top: 1px solid var(--v-line); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Анимации — только мягкое появление сообщений чата (из v2); без «прыгающих» эффектов */

/* ============ Правки после просмотра ============ */
.lawyer-card__photo { height: auto; }
@media (min-width: 1100px) { .site-header .logo__tag { display: none; } }  /* шапка с телефоном: подпись не ломается в 3 строки */
.paper__stamp { background: var(--v-blue-soft); border: 1px solid #c9d4e8; color: var(--v-blue); border-radius: 6px; }

/* ============ Юрист рядом с клиентом: аватар в чате и на главной ============ */
.lawyer-mini { display: flex; gap: 14px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--v-line);
  border-radius: var(--v-r-l); margin-bottom: 10px; }
.lawyer-mini img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.lawyer-mini div { display: grid; gap: 1px; line-height: 1.35; }
.lawyer-mini b { font-size: 1.02rem; }
.lawyer-mini span { color: var(--v-muted); font-size: .92rem; }
.lawyer-mini a { font-size: .92rem; font-weight: 600; }
.lawyer-mini__note { color: var(--v-muted); font-size: .92rem; margin: 0 0 22px; }
.msg--lawyer { position: relative; padding-left: 58px; }
.msg--lawyer::before { content: ""; position: absolute; left: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%;
  background: url("../img/yurist-avatar.jpg") center / cover #dfe5ee; }
.closing__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .25); margin-bottom: 18px; }

/* ============ Отзывы: блок на главной и форма в чате ============ */
.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.review { background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r-l); padding: 24px; display: grid; gap: 12px; align-content: start; }
.review__stars { margin: 0; color: #c8901e; letter-spacing: 2px; font-size: 1.05rem; }
.review__text { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--v-ink); }
.review__who { margin: 0; color: var(--v-muted); font-size: .94rem; }
.review__who b { color: var(--v-ink); }
.review-box { margin: 16px 0; }
.review-form { background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-r-l); padding: 20px; display: grid; gap: 10px; }
.review-form__title { margin: 0; font-weight: 700; font-size: 1.1rem; }
.review-form__label { font-weight: 600; font-size: .95rem; }
.review-form__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.review-form__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.review-form__stars label { font-size: 2rem; line-height: 1; color: #d3d9e3; cursor: pointer; padding: 2px; }
.review-form__stars input:checked ~ label, .review-form__stars label:hover, .review-form__stars label:hover ~ label { color: #c8901e; }
.review-form__stars input:focus-visible + label { outline: 3px solid #4d7fe0; border-radius: 4px; }
.review-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--v-muted); }
.review-form__err { color: var(--v-danger); font-weight: 600; margin: 0; }
.review-form .btn { justify-self: start; }
.review-box__thanks { background: var(--v-ok-soft); color: var(--v-ok); border-radius: var(--v-r); padding: 14px 16px; font-weight: 600; margin: 0; }