/* Компоненты, общие для главной и посадочных страниц услуг.
   Вынесено из инлайнового <style> в index.html, чтобы правка дизайна
   не разъезжалась по нескольким файлам.
   Специфика главной (hero, калькулятор, попапы кейсов, схема, блок блога,
   счётчики) осталась инлайном в index.html. */

.wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }

/* ---------- ШАПКА ---------- */
header{ position:static; background:var(--paper); border-bottom:3px solid var(--rule); }
/* Три колонки (лого / меню / кнопка) вместо flex с margin-left:auto —
   так меню математически центрируется по всей ширине шапки, а не
   зажимается в промежутке между лого и кнопкой. */
.nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:16px 28px; max-width:1080px; margin:0 auto; gap:24px; border-bottom:1px solid var(--line); }
.logo{ display:flex; align-items:center; flex-shrink:0; justify-self:start; }
.logo-chip{ display:inline-flex; align-items:center; background:transparent; border-radius:0; padding:0; text-decoration:none; }
.logo-image{ display:block; width:156px; height:auto; }
.nav-links{ display:flex; gap:0; flex-wrap:nowrap; justify-self:center; }
.nav-links a{ text-decoration:none; font-family:'Lora', serif; font-weight:700; font-size:13px; letter-spacing:.01em; color:var(--ink-soft); padding:0 16px; border-right:1px solid var(--line); white-space:nowrap; transition:color .15s ease; }
.nav-links a:first-child{ padding-left:0; }
.nav-links a:last-child{ border-right:none; }
.nav-links a:hover{ color:var(--accent); }
.nav-links a.current{ color:var(--accent); }
.nav-right{ display:flex; align-items:center; gap:16px; justify-self:end; }
.nav-ask{ font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; display:inline-block; padding:11px 18px; background:var(--surface); color:var(--ink); border:1.5px solid var(--ink); border-radius:0; cursor:pointer; white-space:nowrap; transition:background .15s ease, color .15s ease; }
.nav-ask:hover{ background:var(--ink); color:var(--paper); }
.nav-cta{ font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:11px 18px; background:var(--accent); color:#fff; border:1.5px solid var(--accent); border-radius:0; cursor:pointer; white-space:nowrap; transition:background .15s ease; }
.nav-cta:hover{ background:var(--accent-dark); }
a.nav-cta{ text-decoration:none; display:inline-block; }
/* Бургер рисуем полосками, а не символом ☰: в Lora этого глифа нет,
   браузер подставлял системный шрифт и иконка выходила тонкой и разной
   в разных ОС. Полоски заодно складываются в крестик при открытом меню. */
.burger{ display:none; background:var(--paper); border:1.5px solid var(--ink); color:var(--ink); width:44px; height:44px; border-radius:0; padding:0; cursor:pointer; align-items:center; justify-content:center; transition:background .15s ease; }
.burger span{ position:relative; display:block; width:20px; height:2px; background:var(--ink); transition:background .15s ease; }
.burger span::before,
.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:transform .18s ease, background .15s ease; }
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
/* Инверсия только там, где есть настоящий hover: на тапе в мобильном
   браузере :hover залипает и бургер остаётся чёрным после закрытия меню. */
@media (hover:hover){
  .burger:hover{ background:var(--ink); }
  .burger:hover span,
  .burger:hover span::before,
  .burger:hover span::after{ background:var(--paper); }
}
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }
.mobile-nav{ display:none; }
.mobile-nav.open{ display:flex; flex-direction:column; gap:0; padding:6px 28px 16px; border-top:1px solid var(--line); }
.mobile-nav a{ padding:13px 0; text-decoration:none; color:var(--ink-soft); font-size:15px; font-weight:700; font-family:'Lora',serif; border-bottom:1px solid var(--line); }
.mobile-nav a:last-of-type{ border-bottom:none; }
/* Кнопки в мобильном меню — это <button>, а не <a> (открывают попапы, а не
   ведут по ссылке). Селектор с a. их не находил, и они рисовались дефолтным
   серым стилем браузера. Тип элемента в селекторе не указываем. */
.mobile-nav .mobile-nav-cta{ display:block; width:100%; margin-top:8px; padding:12px 16px; text-align:center;
  background:var(--accent); color:#fff; border:1.5px solid var(--accent); border-radius:0; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  transition:background .15s ease, color .15s ease; }
.mobile-nav .mobile-nav-cta + .mobile-nav-cta{ margin-top:10px; }
.mobile-nav .mobile-nav-cta:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.mobile-nav .mobile-nav-ask{ background:var(--surface); color:var(--ink); border-color:var(--ink); }
.mobile-nav .mobile-nav-ask:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- СЕКЦИИ ---------- */
section{ padding:58px 0; border-bottom:1px solid var(--line); counter-increment:section-counter; }
section[id]{ scroll-margin-top:96px; }
section > .wrap > h2{ font-size:clamp(23px,2.8vw,31px); position:relative; padding-top:30px; }
section > .wrap > h2::before{
  content:"Раздел " counter(section-counter, decimal-leading-zero);
  display:block; position:absolute; top:0; left:0; width:100%;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border-bottom:2px solid var(--ink); padding-bottom:9px; margin-bottom:0;
}
section > .wrap > p:first-of-type{ max-width:62ch; font-size:16.5px; }
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- КНОПКИ ---------- */
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.btn{ display:inline-block; font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; text-decoration:none; padding:13px 20px; border-radius:0; border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); cursor:pointer; transition:background .15s ease, color .15s ease; }
.btn.quiet{ border:none; background:transparent; color:var(--ink-mute); font-weight:600; padding:13px 4px; text-decoration:underline; text-underline-offset:3px; }
.btn.quiet:hover{ background:transparent; color:var(--ink); }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }

/* ---------- ПОЛЯ ФОРМЫ ---------- */
.calc-box{ background:var(--surface); border:2px solid var(--ink); border-radius:0; }
.calc-kicker{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:10px 20px; }
.calc-box .field{ margin:0 20px 16px; }
.calc-box .field:first-of-type{ margin-top:28px; }
.field label{ display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:7px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.field input, .field select{ width:100%; border:1.5px solid var(--ink); padding:11px 13px; font-size:16px; background:var(--paper); font-family:'JetBrains Mono', monospace; color:var(--ink); border-radius:0; }
.field input:focus, .field select:focus{ outline:none; border-color:var(--accent); background:var(--surface); }
.field select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231c1b17' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:13px 8px; }
.field select:focus{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23a8330f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:13px 8px; }
.calc-box > .btn.primary{ width:calc(100% - 40px); margin:6px 20px 20px; }
/* Форма заявки в попапе: те же .field/.lead-status, что и в блоке #contact,
   но без обёртки .calc-box - у попапа уже своя рамка и padding. */
.lead-form-modal .field{ margin:0 0 16px; }
.lead-form-modal > .btn.primary{ width:100%; margin-top:4px; }
.lead-status{
  display:none; align-items:center; gap:10px;
  margin:14px 20px 20px; padding:13px 16px; border:1.5px solid var(--ink);
  font-size:13.5px; font-weight:700; line-height:1.4;
}
.lead-status.show{ display:flex; animation:fadeUp .35s ease both; }
.lead-status::before{ font-family:'JetBrains Mono',monospace; font-size:14px; flex-shrink:0; }
.lead-status.success{ background:var(--good-soft); border-color:var(--good); color:var(--good); }
.lead-status.success::before{ content:"✓"; }
.lead-status.error{ background:var(--bad-soft); border-color:var(--bad); color:var(--bad); }
.lead-status.error::before{ content:"✕"; }
/* Короткое напоминание о доверии прямо перед кнопкой отправки: те же факты,
   что и в разделе «Обо мне», но в точке принятия решения, а не только там. */
.lead-trust{ font-size:12.5px; line-height:1.4; color:var(--ink-mute); margin-top:-4px; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.form-grid h2{ font-size:clamp(23px,2.8vw,31px); }
.form-grid > div:first-child p{ max-width:44ch; }
.form-grid .calc-box .btn.primary{ width:calc(100% - 40px); }

/* ---------- КЕЙСЫ ---------- */
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1.5px solid var(--ink); }
.case{ background:var(--surface); padding:22px; border-right:1.5px solid var(--ink); }
.case:last-child{ border-right:none; }
.case .niche{ display:block; font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px; min-height:44px; }
.niche-metric{ display:block; margin-top:4px; color:var(--ink-mute); }
.case h3{ font-size:19px; margin:0 0 8px; }
.case p{ font-size:14.5px; margin:0; }
.case ul{ margin-top:12px; }
.case ul li{ padding:8px 0; border-top:1px dashed var(--line); font-size:14px; color:var(--ink); font-family:'JetBrains Mono', monospace; }
.case ul li:first-child{ border-top:none; padding-top:0; }
.case-more{ margin-top:16px; width:100%; display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; padding:10px 16px; }
/* Анимация стрелки общая для всех кнопок такого вида (Детали, Читать статью,
   Перейти в блог, Далее), не только для case-more. */
.btn .arrow{ display:inline-block; transition:transform .15s ease; }
.btn:hover .arrow{ transform:translateX(4px); }
/* Стрелка «Показать ещё» смотрит вниз (разворачивает список), а не вправо. */
.btn .arrow.arrow-down{ transform:rotate(90deg); }
.btn:hover .arrow.arrow-down{ transform:rotate(90deg) translateX(4px); }

/* ---------- ВЫГОДЫ ---------- */
/* Две колонки в одной общей рамке, разделители — дашед-линии внутри неё.
   Класс .wide растягивает пункт на обе колонки: он нужен последнему, когда
   пунктов нечётное число, иначе справа внизу остаётся пустая ячейка (тот же
   приём, что в .faq-list). Сейчас пунктов чётное число, .wide не занят. */
.gain-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1.5px solid var(--ink); background:var(--surface); }
/* Внутри пункта своя сетка: колонка под цифру и колонка под текст. Цифра
   занимает оба ряда, поэтому описание держит отступ и пары читаются
   строками, а не разнобоем. */
.gain{ display:grid; grid-template-columns:52px 1fr; padding:28px 30px; border-top:1px dashed var(--line); }
.gain:nth-child(-n+2){ border-top:none; }
/* Разделитель колонок такой же дашед, как ряды: сплошная чёрная линия делила
   блок пополам и спорила с рамкой. */
.gain:nth-child(odd){ border-right:1px dashed var(--line); }
/* margin-top:6px измерен, а не подобран: он ставит верх цифры вровень с
   верхом первой буквы заголовка. При смене размера цифры или шрифта
   заголовка значение надо пересчитывать. Цвет чёрный, а не акцентный —
   красный на странице оставлен кнопкам и кикерам. */
.gain-num{ grid-row:1 / span 2; align-self:start; margin-top:6px;
  font-family:'JetBrains Mono',monospace; font-size:32px; font-weight:700; line-height:1;
  color:var(--ink); opacity:.22; }
.gain h3{ grid-column:2; font-size:18px; margin:0 0 7px; }
.gain p{ grid-column:2; font-size:14.5px; margin:0; }
/* Идёт после nth-child(odd) и снимает у широкого пункта вертикальную
   линию справа — она упиралась бы в рамку секции. */
.gain.wide{ grid-column:1 / -1; border-right:none; }
/* Полоса с кнопкой приклеена к сетке снизу, своя верхняя граница ей не
   нужна: её роль играет рамка сетки. */
.gains-cta{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:15px 22px; background:var(--surface-2); border:1.5px solid var(--ink); border-top:none; }
.gains-cta p{ margin:0; font-size:15px; }
.gains-cta .btn{ flex:0 0 auto; }

/* ---------- ТАБЛИЦЫ ---------- */
table{ width:100%; border-collapse:collapse; background:var(--surface); border:1.5px solid var(--ink); }
th, td{ padding:15px 20px; text-align:left; font-size:15.5px; border-top:1px solid var(--line); }
tr:first-child th, tr:first-child td{ border-top:none; }
th{ background:var(--ink); color:var(--paper); font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; font-family:'JetBrains Mono',monospace; }
td:last-child, th:last-child{ text-align:right; }
tr:not(:first-child) td:last-child{ font-family:'JetBrains Mono', monospace; font-weight:700; color:var(--accent-dark); font-variant-numeric:tabular-nums; }

/* ---------- БЛОК ОБ АВТОРЕ ---------- */
.about-grid{ display:grid; grid-template-columns:180px 1fr; gap:36px; align-items:start; margin-bottom:36px; }
.about-photo{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:top; border:1.5px solid var(--ink); display:block; }
.about-kicker{ font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }
.about-role{ font-family:'Lora',serif; font-size:19px; font-weight:700; margin:0 0 14px; }
.about-grid p:last-child{ font-size:15.5px; }
.about-grid a{ color:var(--accent); }

/* ---------- FAQ ---------- */
.faq-item{ border-top:1px solid var(--line); padding:20px 0; }
.faq-item:first-child{ border-top:none; }
.faq-item summary{ font-weight:700; font-size:16.5px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-family:'JetBrains Mono',monospace; color:var(--accent); font-size:18px; flex-shrink:0; }
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{ margin-top:12px; font-size:15.5px; }

/* ---------- ПОДВАЛ ---------- */
footer{ border-top:3px solid var(--rule); padding:26px 0; }
/* Логотип - копирайт - кнопки, в одну строку через grid с тремя колонками
   (auto / гибкая средняя / auto), а не flex+space-between. Раньше на flex
   при нехватке места весь блок кнопок перескакивал на отдельную строку и там
   прижимался не к тому краю - а нужную ширину зазоров под каждую длину
   текста пришлось бы каждый раз подбирать заново (уже дважды переезжало:
   сначала из-за добавленного ИНН, потом из-за сокращения ссылки на
   политику). На grid логотип и кнопки закреплены каждый в своей крайней
   колонке и никогда не переносятся; средняя колонка гибкая (minmax(0,1fr)),
   текст в ней центрируется через justify-content на .footer-meta, а если
   вдруг не помещается - переносится сама по себе (её собственный
   flex-wrap), не трогая колонки логотипа и кнопок. */
footer .wrap{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px 24px; font-size:13.5px; color:var(--ink-mute); font-style:italic; }
footer .logo{ font-style:normal; }
/* white-space:nowrap на прямых детях - если места не хватает, переносится
   ссылка целиком на новую строку (переносит flex-wrap у самого
   .footer-meta), а не рвётся середина копирайта "© 2026 · ИНН ...". */
.footer-meta{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.footer-meta > *{ white-space:nowrap; }
.footer-meta a{ color:var(--ink-mute); text-decoration:underline; text-underline-offset:2px; }
.footer-meta a:hover{ color:var(--accent); }
/* Кнопки в подвале - те же .btn/.btn.primary без модификаторов, поэтому по
   высоте совпадают один в один с кнопками в шапке (там тот же приём).
   Ширину дополнительно уравниваем фиксированным значением - иначе
   "Разбор аккаунта" длиннее "Задать вопрос" и кнопки в паре смотрятся
   вразнобой. justify-self:end прижимает весь блок к правому краю своей
   колонки. */
.footer-ctas{ display:flex; gap:12px; flex-wrap:wrap; justify-self:end; }
.footer-ctas .btn{ width:172px; text-align:center; }

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

@media (max-width:1080px){
  .nav-links, .nav-cta, .nav-ask{ display:none; }
  /* Скрытое меню выпадает из грида целиком (display:none), колонок остаётся
     две, и .nav-right попадала в среднюю «auto» — бургер вставал вплотную к
     логотипу вместо правого края. Поэтому на узких экранах у шапки своя
     сетка из двух колонок. */
  .nav{ grid-template-columns:1fr auto; }
  .burger{ display:flex; }
  /* Один столбец: вертикальная линия между колонками не нужна, а второму
     пункту возвращаем верхнюю линейку — в две колонки он был в первом ряду. */
  .gain-grid{ grid-template-columns:1fr; }
  .gain:nth-child(odd){ border-right:none; }
  .gain:nth-child(2){ border-top:1px dashed var(--line); }
  .case-grid{ grid-template-columns:1fr; border:none; }
  .case, .case:last-child{ border:1.5px solid var(--ink); margin-bottom:14px; }
  .form-grid{ grid-template-columns:1fr; }
}
/* Отдельный (не 480px) брейкпоинт под подвал: у него своя точка слома,
   не связанная с остальной вёрсткой (.about-grid и т.п. живут в брейкпоинте
   ниже). Средняя колонка grid-подвала - гибкая, и при нехватке места сама
   пытается сжаться/перенести свой текст на 2 строки, но с white-space:nowrap
   у детей .footer-meta ей однажды уже было некуда сжиматься - текст вылезал
   за границы колонки и наезжал на кнопки. Порог 940px посчитан по факту
   (~886px - реальная точка, где текст перестаёт помещаться в одну строку, +
   запас) и просто переключает подвал на вертикальный стек ДО того, как
   дойдёт до сжатия, а не подбирает всё более тесные зазоры под каждую новую
   длину текста. */
@media (max-width:940px){
  /* Подвал в столбик: логотип и копирайт по центру, кнопки прижаты к
     правому краю. */
  footer .wrap{ grid-template-columns:minmax(0,1fr) auto; justify-items:start; text-align:left; align-items:center; gap:22px 14px; }
  /* Копирайт с ИНН и ссылка на политику идут столбиком в левой колонке:
     в одну строку рядом с кнопками они не помещаются. */
  .footer-meta{ grid-column:1; grid-row:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; }
  /* Кнопки справа, друг под другом: две в строку тут не встают. */
  /* align-items:stretch, чтобы обе кнопки получили ширину самой длинной
     надписи и стояли одинаковыми: сам блок и так сжат по содержимому. */
  .footer-ctas{ grid-column:2; grid-row:1; justify-self:end; flex-direction:column; align-items:stretch; gap:10px; }
  /* Логотип уходит под них во всю ширину и по центру. */
  footer .logo{ grid-column:1 / -1; grid-row:2; justify-self:center; }
  footer .logo-image{ width:200px; }
}
@media (max-width:560px){
  /* На узком экране кнопки подвала жмутся по содержимому и мельчают, иначе
     левой колонке с ИНН не остаётся места, а сами надписи рвутся на две
     строки. Ширину не задаём: она считается по самой длинной надписи. */
  .footer-ctas .btn{ width:auto; padding:11px 14px; font-size:12px; white-space:nowrap; }
}
@media (max-width:480px){
  /* Кнопка под текстом: в строку она сжимается до нечитаемой ширины. */
  .gains-cta{ flex-direction:column; align-items:stretch; gap:14px; }
  /* На телефоне фото во всю ширину съедало пол-экрана и отодвигало имя с
     текстом вниз. Вместо колонок — обтекание: фото небольшое, слева, имя и
     начало текста идут справа от него, дальше строки продолжаются под фото
     на всю ширину. Grid для этого не годится (текст остался бы в узкой
     колонке до самого низа), поэтому на этом брейкпоинте .about-grid
     становится обычным блоком с float. */
  .about-grid{ display:block; margin-bottom:28px; }
  .about-grid::after{ content:""; display:table; clear:both; }
  .about-photo{ float:left; width:124px; max-width:none; aspect-ratio:1/1;
    object-position:center; margin:3px 16px 10px 0; }
  .about-role{ font-size:17px; margin-bottom:10px; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}