/* ============================================================
   Судебный эксперт Филиппов В.Ю. — дизайн-система v2
   Источник: design-v2/design_handoff_landing_system (Claude Design).
   clamp(моб, Ncqw, деск) макета переведён в CSS-переменные,
   мобильное значение — по умолчанию, десктопное — в @media (min-width:768px).
   Чёрного и градиентов, кроме штриховки, здесь нет — см. DESIGN-PROMPT.md.
   ============================================================ */

/* ---------- Шрифты: локальные woff2, кириллица + латиница отдельными диапазонами ---------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/montserrat-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/montserrat-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/montserrat-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/montserrat-cyrillic-800-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/montserrat-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Токены ---------- */
:root{
  --navy:#1A2740; --navy-hover:#24365A; --graphite:#2C2C2E; --muted:#5B6472;
  --tint-1:#E7EAF1; --tint-2:#F4F5F7; --divider:#D9DCE3; --white:#fff;
  --shadow-sm:0 4px 12px rgba(26,39,64,.08);
  --shadow-lg:0 18px 44px rgba(26,39,64,.14);
  --radius-field:6px; --radius-card:14px; --radius-block:22px;
  --hatch-light:repeating-linear-gradient(135deg,rgba(26,39,64,.055) 0 1px,transparent 1px 16px);
  --hatch-dark:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 16px);

  /* мобильные значения (по умолчанию) */
  --container: 1200px;
  --px: 24px;
  --py-section: 56px;
  --py-hero-top: 32px; --py-hero-bot: 40px;
  --py-hero-dense-top: 28px; --py-hero-dense-bot: 32px;
  --py-heroinstr-top: 32px; --py-heroinstr-bot: 32px;
  --py-feed-top: 48px; --py-feed-bot: 64px;
  --gap-hero: 28px;
  --gap-section: 24px;
  --gap-grid: 16px;
  --gap-lg: 24px;
  --card-pad: 20px;
  --card-pad-lg: 24px;

  --fs-h1: 32px; --lh-h1: 1.15;
  --fs-h2: 26px;
  --fs-h3: 18px;
  --fs-kicker: 13px;
  --fs-body-lg: 16px;
  --fs-body: 15px;
  --fs-stat: 24px;
  --fs-estimate: 30px;
  --avatar: 160px;
  --num-size: 44px;
}
@media (min-width:768px){
  :root{
    --px: 96px;
    --py-section: 96px;
    --py-hero-top: 72px; --py-hero-bot: 80px;
    --py-hero-dense-top: 56px; --py-hero-dense-bot: 64px;
    --py-heroinstr-top: 80px; --py-heroinstr-bot: 64px;
    --py-feed-top: 80px; --py-feed-bot: 112px;
    --gap-hero: 64px;
    --gap-section: 40px;
    --gap-lg: 40px;
    --card-pad: 32px;
    --card-pad-lg: 40px;

    --fs-h1: 60px; --lh-h1: 1.08;
    --fs-h2: 38px;
    --fs-h3: 20px;
    --fs-body-lg: 18px;
    --fs-stat: 34px;
    --fs-estimate: 44px;
    --avatar: 240px;
    --num-size: 56px;
  }
}

/* ---------- Сброс и база ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--white); color:var(--graphite);
  font-family:'Montserrat',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:var(--navy); }
h1,h2,h3,p,ul,ol,dl,figure{ margin:0; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }

/* ---------- Доступность ---------- */
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:200; background:var(--navy); color:#fff;
  padding:10px 16px; border-radius:6px; font-weight:700; font-size:14px; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:8px; }
:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

/* ---------- Утилиты ---------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--px); }
.container--narrow{ max-width:880px; }
.hatch{ background-image:var(--hatch-light); }
.tint{ background:var(--tint-2); }
.kicker{ font-size:var(--fs-kicker); font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin:0; }
.h1{ font-size:var(--fs-h1); font-weight:800; color:var(--navy); line-height:var(--lh-h1); letter-spacing:-.015em; }
.h2{ font-size:var(--fs-h2); font-weight:800; color:var(--navy); line-height:1.15; letter-spacing:-.01em; }
.h3{ font-size:var(--fs-h3); font-weight:700; color:var(--navy); }
.footnote{ font-size:13px; font-weight:600; color:var(--muted); margin-top:12px; }
.ruler{ color:var(--muted); display:block; margin:2px 0; }
.marker{ flex:none; margin-top:7px; color:var(--navy); }
.marker--x{ color:var(--muted); margin-top:5px; }
.code-badge{ background:var(--navy); color:#fff; font-weight:800; font-size:14px; border-radius:6px; padding:6px 10px; flex:none; white-space:nowrap; }

/* ---------- Кнопки и поля ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 24px; border-radius:var(--radius-field);
  font-weight:700; font-size:16px; text-decoration:none; border:1.6px solid transparent;
  white-space:nowrap; transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-hover); }
.btn-outline{ background:#fff; color:var(--navy); border-color:var(--navy); }
.btn-outline:hover{ background:var(--tint-1); }
.btn-white{ background:#fff; color:var(--navy); }
.btn-white:hover{ background:var(--tint-1); }
.btn-link{ background:none; color:var(--navy); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--divider); height:52px; padding:0 8px; }
.btn-block{ width:100%; }
.btn-icon{ gap:10px; }
.btn[data-todo]{ position:relative; }

.field{
  height:52px; width:100%; border:1.6px solid var(--divider); border-radius:var(--radius-field);
  padding:0 16px; font-size:16px; font-weight:600; color:var(--graphite); background:#fff;
}
textarea.field{ height:auto; padding:12px 16px; resize:vertical; }
.field:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px var(--tint-1); }
.field::placeholder{ color:var(--muted); font-weight:400; }

/* ---------- Секции ---------- */
/* Горизонтальные поля даёт только .container — секции задают лишь вертикальный отступ,
   иначе при вложенности .section > .container отступ применялся бы дважды. */
.section{ padding:var(--py-section) 0; }
.section--tight{ padding-top:0; }
.section__head{ display:flex; flex-direction:column; gap:8px; margin-bottom:var(--gap-section); }
.section__head .h2{ margin:0; }
.section__note{ margin:4px 0 0; font-size:14px; color:var(--muted); font-weight:600; max-width:640px; }

/* ============================================================
   Шапка
   ============================================================ */
.site-header{ border-bottom:1.6px solid var(--divider); }
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:inherit; }
.brand__mark{ flex:none; color:var(--navy); }
.brand__title{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.brand__kicker{ font-size:10px; letter-spacing:2.5px; }
.brand__name{ font-size:14px; font-weight:800; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-header__actions{ display:none; align-items:center; gap:20px; flex:none; }
.site-header__phone{ font-weight:700; font-size:16px; color:var(--navy); text-decoration:none; }
.site-header__call-icon{
  width:44px; height:44px; border-radius:var(--radius-field); border:1.6px solid var(--navy);
  display:inline-flex; align-items:center; justify-content:center; color:var(--navy); flex:none;
}
@media (min-width:768px){
  .site-header__actions--full{ display:flex; }
  .site-header__call-icon{ display:none; }
}

/* ============================================================
   Hero (коммерческий) + heroInstr (инструкция)
   ============================================================ */
.hero{ padding:var(--py-hero-top) 0 var(--py-hero-bot); background:var(--tint-2); }
.hero--dense{ padding-top:var(--py-hero-dense-top); padding-bottom:var(--py-hero-dense-bot); }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-hero); align-items:start; }
.hero__content{ display:flex; flex-direction:column; gap:14px; }
.hero__sub{ margin:0; font-size:var(--fs-body-lg); font-weight:600; line-height:1.55; max-width:600px; }
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }
.hero__actions .btn{ flex:1 1 160px; max-width:280px; }
.hero__note{ font-size:14px; font-weight:600; color:var(--muted); }
.hero__stats{
  display:flex; gap:10px; overflow-x:auto; margin:0 -24px; padding:0 24px 6px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.hero__stats::-webkit-scrollbar{ display:none; }
.stat-card{
  flex:0 0 200px; scroll-snap-align:start; background:#fff; border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm); padding:16px 18px; display:flex; flex-direction:column; gap:6px; min-width:0;
}
.stat-card__n{ font-size:var(--fs-stat); font-weight:800; color:var(--navy); line-height:1; letter-spacing:-.01em; overflow-wrap:anywhere; }
.stat-card__l{ font-size:13px; font-weight:600; color:var(--muted); line-height:1.4; }
@media (min-width:768px){
  .hero__grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,600px),1fr)); }
  .hero__stats{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;
    overflow:visible; margin:0; padding:0; align-self:end;
  }
  .stat-card{ padding:var(--card-pad); }
}

.hero-instr{ padding:var(--py-heroinstr-top) 0 var(--py-heroinstr-bot); }
.hero-instr__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-hero); align-items:start; }
.hero-instr__now{
  order:-1; background:var(--tint-1); border-radius:var(--radius-block); padding:20px; display:flex; flex-direction:column; gap:14px;
}
.hero-instr__now-title{ color:var(--navy); }
.hero-instr__now-item{ display:flex; gap:14px; align-items:flex-start; font-size:var(--fs-body-lg); font-weight:600; line-height:1.45; color:var(--navy); }
.hero-instr__now-mark{ flex:none; margin-top:7px; }
.hero-instr__content{ display:flex; flex-direction:column; gap:14px; }
.hero-instr__sub{ margin:0; font-size:var(--fs-body-lg); font-weight:400; line-height:1.6; max-width:560px; color:var(--graphite); }
@media (min-width:768px){
  .hero-instr__grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr)); }
  .hero-instr__now{ order:0; padding:32px; }
}

/* ============================================================
   Карточки с иконками (situations / factors)
   ============================================================ */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--gap-grid); }
.icon-card{ background:var(--tint-2); border-radius:var(--radius-card); padding:var(--card-pad-lg) var(--card-pad); display:flex; flex-direction:column; gap:12px; }
.icon-card__icon{ width:48px; height:48px; border-radius:50%; background:var(--tint-1); color:var(--navy); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.icon-card__title{ font-size:18px; font-weight:700; color:var(--navy); line-height:1.3; }
.icon-card__text{ font-size:var(--fs-body); font-weight:400; color:var(--graphite); line-height:1.5; }

/* ============================================================
   Compare
   ============================================================ */
.compare-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:var(--gap-grid); }
.compare-col{ background:#fff; border:1.6px solid var(--divider); border-radius:var(--radius-card); padding:var(--card-pad); display:flex; flex-direction:column; gap:16px; }
.compare-col--dark{ background:var(--navy); border:0; color:#fff; }
.compare-col__title{ font-size:20px; font-weight:700; color:var(--muted); }
.compare-col--dark .compare-col__title{ color:#fff; }
.compare-item{ display:flex; gap:12px; font-size:16px; font-weight:400; line-height:1.5; color:var(--graphite); }
.compare-item__dot{ width:6px; height:6px; border-radius:50%; background:var(--divider); flex:none; margin-top:9px; }
.compare-item--check{ font-weight:600; color:#fff; }
.compare-item--check .marker{ color:#fff; }

/* ============================================================
   Steps
   ============================================================ */
.steps-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr)); gap:var(--gap-section); }
.steps-group{ display:flex; flex-direction:column; gap:16px; }
.steps-group__title{ font-size:20px; font-weight:700; color:var(--navy); padding-bottom:12px; border-bottom:1.6px solid var(--divider); }
.steps-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:var(--gap-grid); }
/* Пять карточек: колонка, затем 3+2 на всю ширину (пять в ряд — слишком узко для текста) */
.steps-grid--5{ grid-template-columns:1fr; }
@media (min-width:700px){
  .steps-grid--5{ grid-template-columns:repeat(6,1fr); }
  .steps-grid--5 .step-card{ grid-column:span 2; }
  .steps-grid--5 .step-card:nth-child(n+4){ grid-column:span 3; }
}
.step-card{ display:flex; flex-direction:column; gap:12px; padding:20px; border:1.6px solid var(--divider); border-radius:var(--radius-card); }
.step-card__num{ width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; font-weight:800; font-size:15px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.step-card__title{ font-size:17px; font-weight:700; color:var(--navy); line-height:1.3; }
.step-card__text{ font-size:var(--fs-body); font-weight:400; line-height:1.5; color:var(--graphite); }

/* ============================================================
   Feed (лента инструкции)
   ============================================================ */
.section.feed{ padding:var(--py-feed-top) 0 var(--py-feed-bot); }
.feed-list{ display:flex; flex-direction:column; }
.feed-item{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; }
.feed-item__rail{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.feed-item__num{ width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; font-weight:800; font-size:18px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.feed-item__line{ flex:1; width:1.6px; background:var(--divider); }
.feed-item:last-child .feed-item__line{ display:none; }
.feed-item__body{ padding-bottom:32px; display:flex; flex-direction:column; gap:12px; min-width:0; padding-top:8px; }
.feed-item__title{ font-size:20px; font-weight:800; color:var(--navy); line-height:1.25; }
.feed-item__text{ font-size:var(--fs-body-lg); font-weight:400; line-height:1.6; color:var(--graphite); }
.feed-cta{ margin-top:8px; background:var(--navy); border-radius:var(--radius-card); padding:20px; color:#fff; display:flex; flex-direction:column; gap:12px; }
.feed-cta__title{ font-size:18px; font-weight:700; }
.feed-cta__text{ font-size:15px; font-weight:400; line-height:1.55; color:var(--tint-1); }
.feed-cta__actions{ display:flex; gap:12px 16px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.feed-cta__note{ font-size:13px; font-weight:600; color:var(--divider); }
@media (min-width:768px){
  .feed-item{ grid-template-columns:64px minmax(0,1fr); gap:28px; }
  .feed-item__num{ width:56px; height:56px; font-size:22px; }
  .feed-item__body{ padding-bottom:48px; padding-top:14px; }
  .feed-item__title{ font-size:26px; }
  .feed-cta{ padding:28px; }
}

/* ============================================================
   Checklist
   ============================================================ */
.checklist-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:var(--gap-grid); }
.checklist-card{ border:1.6px solid var(--divider); border-radius:var(--radius-card); padding:var(--card-pad); display:flex; flex-direction:column; gap:14px; }
.checklist-card__title{ font-size:20px; font-weight:700; color:var(--navy); }
.checklist-row{ display:flex; gap:12px; font-size:16px; font-weight:600; line-height:1.5; color:var(--graphite); align-items:flex-start; }

/* ============================================================
   Prices / Works
   ============================================================ */
.price-table{ background:#fff; border-radius:var(--radius-card); border:1.6px solid var(--divider); overflow:hidden; }
.price-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 24px; padding:16px 18px; border-top:1.6px solid var(--divider); align-items:baseline; }
.price-row:first-child{ border-top:0; }
.price-row__name{ font-size:var(--fs-body-lg); font-weight:700; color:var(--navy); line-height:1.35; }
.price-row__price{ font-size:16px; font-weight:800; color:var(--navy); white-space:nowrap; }
.price-row__note{ font-size:13px; font-weight:600; color:var(--muted); grid-column:1/-1; line-height:1.45; }
@media (min-width:768px){ .price-row{ padding:22px 28px; } }

.price-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:16px; }
.price-cta__text{ margin:0; font-size:var(--fs-body-lg); font-weight:600; color:var(--navy); line-height:1.45; max-width:720px; }
@media (min-width:768px){ .price-cta{ flex-direction:row; align-items:center; justify-content:space-between; gap:24px; } }

.works-table{ background:#fff; border-radius:var(--radius-card); border:1.6px solid var(--divider); overflow:hidden; }
.works-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px 12px; padding:14px 18px; border-top:1.6px solid var(--divider); align-items:baseline; }
.works-row:first-child{ border-top:0; }
.works-row--head{ padding:12px 18px; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); border-top:0; }
.works-row--head span:last-child, .works-row__price{ text-align:right; }
.works-row__name{ font-size:15px; font-weight:700; color:var(--navy); line-height:1.35; overflow-wrap:anywhere; }
.works-row__term{ font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
.works-row__price{ font-size:14px; font-weight:800; color:var(--navy); white-space:nowrap; }
@media (min-width:768px){ .works-row{ padding:20px 28px; } .works-row--head{ padding:12px 28px; } }

/* ============================================================
   Honesty / CTA / Cases
   ============================================================ */
.honesty-box{ background:var(--tint-1); border-radius:var(--radius-card); padding:18px 20px; display:flex; gap:16px; align-items:flex-start; font-size:15px; font-weight:600; line-height:1.5; color:var(--navy); }
.honesty-box__icon{ flex:none; color:var(--navy); }
@media (min-width:768px){ .honesty-box{ padding:28px; font-size:17px; } }

.cta-strip{ background:var(--navy); border-radius:var(--radius-block); padding:24px; display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:center; color:#fff; }
.cta-strip__text{ display:flex; flex-direction:column; gap:10px; }
.cta-strip__title{ font-size:20px; font-weight:800; line-height:1.25; }
.cta-strip__sub{ font-size:15px; font-weight:400; line-height:1.55; color:var(--tint-1); }
.cta-strip__actions{ display:flex; gap:12px 24px; align-items:center; flex-wrap:wrap; }
.cta-strip__phone{ font-size:20px; font-weight:800; color:#fff; text-decoration:none; white-space:nowrap; }
@media (min-width:768px){
  .cta-strip{ grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); padding:40px; }
  .cta-strip__title{ font-size:26px; }
  .cta-strip__phone{ font-size:24px; }
}

/* Кейсы: два в ряд, пока каждой карточке хватает 480px (галерея не сжимается), иначе друг под другом */
.cases-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr)); gap:var(--gap-lg); align-items:start; }
.case-card{ min-width:0; background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-sm); padding:var(--card-pad); display:flex; flex-direction:column; gap:18px; }
.case-card__title{ margin:0; font-size:20px; font-weight:800; color:var(--navy); line-height:1.25; }
.case-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:-6px; }
.case-badge{ background:var(--tint-1); color:var(--navy); font-size:13px; font-weight:700; border-radius:var(--radius-field); padding:5px 10px; }
.case-facts{ margin:0; display:flex; flex-direction:column; }
.case-facts__row{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px 16px; padding:10px 0; border-top:1.6px solid var(--tint-1); font-size:15px; line-height:1.45; }
.case-facts__row:last-child{ border-bottom:1.6px solid var(--tint-1); }
.case-facts dt{ font-weight:600; color:var(--muted); }
.case-facts dd{ margin:0; font-weight:700; color:var(--navy); }
/* Мобильный: горизонтальная лента со snap внутри карточки; десктоп: сетка */
.case-gallery{ display:flex; gap:10px; overflow-x:auto; margin:0 calc(var(--card-pad) * -1); padding:0 var(--card-pad) 6px; scroll-snap-type:x mandatory; scroll-padding:0 var(--card-pad); scrollbar-width:none; }
.case-gallery::-webkit-scrollbar{ display:none; }
.case-photo{ flex:0 0 70%; max-width:260px; scroll-snap-align:start; padding:0; border:0; background:none; border-radius:var(--radius-field); overflow:hidden; cursor:zoom-in; }
.case-photo__img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border:1.6px solid var(--divider); border-radius:var(--radius-field); background:var(--tint-2); }
.case-damage__title{ margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.case-damage__list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.case-damage__item{ display:flex; gap:12px; font-size:15px; line-height:1.5; color:var(--graphite); }
.case-damage__item strong{ font-weight:700; color:var(--navy); }
.case-sums{ display:flex; flex-direction:column; gap:10px; }
.case-sums__row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:15px; font-weight:600; color:var(--muted); }
.case-sums__val{ font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap; }
.case-total{ margin-top:4px; background:var(--tint-1); border-radius:var(--radius-card); padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.case-total__label{ font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.case-total__n{ font-size:var(--fs-stat); font-weight:800; color:var(--navy); line-height:1.1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cases-note{ margin:var(--gap-section) 0 0; font-size:16px; font-weight:700; color:var(--navy); }
@media (min-width:768px){
  .case-card{ border-radius:var(--radius-block); gap:22px; }
  .case-card__title{ font-size:24px; }
  .case-facts__row{ grid-template-columns:150px minmax(0,1fr); }
  .case-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); overflow:visible; margin:0; padding:0; }
  .case-photo{ max-width:none; }
  .case-total{ padding:20px 24px; }
}

/* ============================================================
   Аккордеон (FAQ, specQ)
   ============================================================ */
.accordion{ background:#fff; border:1.6px solid var(--divider); border-radius:var(--radius-card); overflow:hidden; }
.accordion__item{ border-top:1.6px solid var(--divider); }
.accordion__item:first-child{ border-top:0; }
.accordion__summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:16px 18px; font-size:var(--fs-body-lg); font-weight:700; color:var(--navy); line-height:1.35;
}
.accordion__summary::-webkit-details-marker{ display:none; }
.accordion__summary--code{ gap:14px; }
.accordion__summary-title{ flex:1; }
.accordion__chevron{ flex:none; color:var(--navy); transition:transform .15s ease; }
.accordion__item[open] .accordion__chevron-v{ display:none; }
.accordion__body{ padding:0 18px 16px; font-size:15px; font-weight:400; line-height:1.6; color:var(--graphite); }
.spec-q{ display:flex; gap:12px; font-size:15px; font-weight:400; line-height:1.55; color:var(--graphite); margin-top:10px; }
.spec-q:first-child{ margin-top:0; }
.spec-q__num{ font-weight:700; color:var(--muted); flex:none; }
@media (min-width:768px){ .accordion__summary{ padding:20px 24px; } .accordion__body{ padding:0 24px 20px; } }

/* ============================================================
   Receive / WhoPays / Quiz / ExpertCard / Motion
   ============================================================ */
.receive-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-lg); align-items:start; }
.receive-content{ display:flex; flex-direction:column; gap:20px; }
.receive-list{ display:flex; flex-direction:column; gap:14px; }
.receive-item{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-top:1.6px solid var(--divider); }
.receive-item:first-child{ border-top:0; padding-top:0; }
.receive-item__title{ font-size:17px; font-weight:700; color:var(--navy); line-height:1.3; }
.receive-item__text{ font-size:15px; font-weight:400; line-height:1.5; margin-top:4px; color:var(--graphite); }
@media (min-width:768px){ .receive-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 48px; } .receive-item:nth-child(2){ border-top:0; padding-top:0; } }

.who-pays{ background:var(--navy); border-radius:var(--radius-block); padding:24px; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-section); color:#fff; }
.who-pays__kicker{ color:var(--divider); }
.who-pays__p{ margin:16px 0 0; font-size:16px; font-weight:400; line-height:1.6; color:var(--tint-1); }
.who-pays__list{ display:flex; flex-direction:column; gap:14px; align-self:center; }
.who-pays__item{ display:flex; gap:12px; font-size:16px; font-weight:600; line-height:1.5; }
.who-pays__item .marker{ color:#fff; }
@media (min-width:768px){ .who-pays{ grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); padding:48px; } }

.quiz-card{ border:1.6px solid var(--divider); border-radius:var(--radius-block); padding:20px; display:flex; flex-direction:column; gap:20px; }
.quiz-progress{ display:flex; flex-direction:column; gap:10px; }
.quiz-progress__label{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:var(--muted); }
.quiz-progress__bar{ height:4px; background:var(--tint-1); border-radius:2px; overflow:hidden; }
.quiz-progress__fill{ height:100%; background:var(--navy); transition:width .2s ease; }
.quiz-step__q{ font-size:18px; font-weight:700; color:var(--navy); line-height:1.3; margin-bottom:14px; }
.quiz-step__opts{ display:flex; flex-wrap:wrap; gap:8px; }
.quiz-opt{
  border-radius:var(--radius-field); padding:0 18px; height:48px; font-size:15px; font-weight:700;
  border:1.6px solid var(--divider); background:#fff; color:var(--navy);
}
.quiz-opt:hover{ background:var(--tint-1); }
.quiz-opt.is-selected{ border-color:var(--navy); background:var(--navy); color:#fff; }
.quiz-back{ background:none; border:0; padding:0; margin-top:16px; font-size:14px; font-weight:700; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.quiz-done{ display:flex; flex-direction:column; gap:14px; }
.quiz-estimate{ font-size:var(--fs-estimate); font-weight:800; color:var(--navy); line-height:1; letter-spacing:-.01em; }
.quiz-estimate__note{ margin:0; font-size:14px; font-weight:600; color:var(--muted); line-height:1.5; }
.quiz-summary{ display:flex; flex-wrap:wrap; gap:8px; }
.quiz-summary span{ background:var(--tint-1); color:var(--navy); border-radius:6px; padding:6px 12px; font-size:13px; font-weight:700; }
.quiz-final{ border-top:1.6px solid var(--divider); padding-top:20px; display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.quiz-final__label{ font-size:17px; font-weight:700; color:var(--navy); }
.quiz-final__form{ display:flex; gap:12px; flex-wrap:wrap; }
.quiz-final__form .field{ flex:1 1 200px; }
.quiz-final__form .btn{ flex:1 1 160px; }
.quiz-final__consent{ flex:1 1 100%; }
.quiz-final__status{ margin:0; font-size:14px; font-weight:600; }
.quiz-final__status.is-error{ color:#B3261E; }
.quiz-final__status.is-ok{ color:#1A2740; }
.quiz-reset{ align-self:flex-start; background:none; border:0; padding:0; font-size:14px; font-weight:700; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
@media (min-width:768px){ .quiz-card{ padding:36px; gap:28px; } .quiz-step__q{ font-size:22px; } }

.expert-card-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-grid); align-items:start; }
.expert-card-table{ border:1.6px solid var(--divider); border-radius:var(--radius-card); overflow:hidden; }
.expert-card-row{ display:grid; grid-template-columns:minmax(72px,120px) minmax(0,1fr); gap:12px; padding:14px 16px; border-top:1.6px solid var(--divider); font-size:15px; line-height:1.45; }
.expert-card-row:first-child{ border-top:0; }
.expert-card-row span:first-child{ font-weight:600; color:var(--muted); }
.expert-card-row span:last-child{ font-weight:700; color:var(--navy); }
.expert-card-specs{ display:flex; flex-direction:column; gap:12px; }
.spec-chip{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 16px; background:var(--tint-2); border-radius:var(--radius-card); }
.spec-chip__name{ font-size:15px; font-weight:700; color:var(--navy); line-height:1.35; }
.spec-chip__count{ font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap; }
@media (min-width:768px){ .expert-card-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); } }

.motion-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-section); align-items:start; }
.motion-content{ display:flex; flex-direction:column; gap:20px; }
.motion-text{ background:var(--tint-2); border-radius:var(--radius-card); padding:18px 20px; font-size:15px; font-weight:400; line-height:1.65; color:var(--graphite); white-space:pre-line; }
.motion-docs{ border:1.6px solid var(--divider); border-radius:var(--radius-card); padding:20px; display:flex; flex-direction:column; gap:14px; }
.motion-docs__title{ font-size:20px; font-weight:700; color:var(--navy); }
.motion-docs__item{ display:flex; gap:12px; font-size:16px; font-weight:600; line-height:1.5; }
.motion-docs__note{ font-size:13px; font-weight:600; color:var(--muted); margin-top:4px; }
@media (min-width:768px){ .motion-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); } .motion-text, .motion-docs{ padding:28px; } }

/* ============================================================
   About / Docs / Lightbox
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-lg); align-items:start; }
.about-photo{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.about-photo__frame{
  width:var(--avatar); height:var(--avatar); border-radius:50%; background:var(--tint-1);
  display:flex; align-items:center; justify-content:center; color:var(--navy);
}
.about-photo__img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.about-photo__role{ margin:0; font-size:16px; font-weight:600; color:var(--muted); }
.about-details{ display:flex; flex-direction:column; gap:var(--gap-lg); }
.about-facts{ display:flex; flex-direction:column; gap:12px; }
.about-fact{ display:flex; gap:12px; font-size:16px; font-weight:600; line-height:1.5; color:var(--graphite); }
.about-specs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:12px; }
.about-spec{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:var(--tint-2); border-radius:var(--radius-card); }
.about-spec__name{ display:block; font-size:15px; font-weight:700; color:var(--navy); line-height:1.35; }
.about-spec__count{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-top:2px; }
.about-education{ display:flex; flex-direction:column; }
.about-education__row{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; padding:10px 0; border-top:1.6px solid var(--divider); font-size:15px; }
.about-education__row:first-of-type{ margin-top:8px; }
.about-education__row span:first-child{ font-weight:600; color:var(--muted); }
.about-education__row span:last-child{ font-weight:600; }
@media (min-width:768px){ .about-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); } }

.docs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:var(--gap-grid); }
.docs-item{ background:none; border:0; padding:0; text-align:left; display:flex; flex-direction:column; gap:8px; font-family:inherit; }
.docs-item__img{ width:100%; aspect-ratio:1/1.35; object-fit:cover; object-position:top; border-radius:6px; border:1.6px solid var(--divider); background:#fff; }
.docs-item__caption{ font-size:13px; font-weight:600; color:var(--muted); line-height:1.35; }

body.is-lightbox-open{ overflow:hidden; }
.lightbox{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:16px; }
.lightbox[hidden]{ display:none; }
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(26,39,64,.88); cursor:zoom-out; }
.lightbox__figure{ position:relative; z-index:1; max-width:min(90vw,720px); max-height:88vh; margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lightbox__img{ max-width:100%; max-height:72vh; border-radius:6px; box-shadow:0 18px 44px rgba(26,39,64,.4); }
.lightbox__caption{ color:#fff; font-size:14px; font-weight:600; display:flex; flex-direction:column; gap:4px; text-align:center; }
.lightbox__count{ color:var(--divider); font-weight:400; }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:1; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); border:0; color:#fff; display:flex; align-items:center; justify-content:center;
}
.lightbox__nav:hover{ background:rgba(255,255,255,.22); }
.lightbox__nav--prev{ left:8px; }
.lightbox__nav--next{ right:8px; }
.lightbox__close{ position:absolute; top:16px; right:16px; z-index:1; width:40px; height:40px; border-radius:50%; background:#fff; border:0; color:var(--navy); display:flex; align-items:center; justify-content:center; }
@media (min-width:768px){ .lightbox__nav--prev{ left:24px; } .lightbox__nav--next{ right:24px; } }

/* ============================================================
   Форма заявки
   ============================================================ */
.form-head{ max-width:720px; display:flex; flex-direction:column; gap:12px; margin-bottom:var(--gap-section); }
.form-head__sub{ margin:0; font-size:16px; font-weight:400; color:var(--muted); line-height:1.5; }
.form-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
.form-card{ background:var(--tint-2); border-radius:var(--radius-block); padding:20px; display:flex; flex-direction:column; gap:20px; }
.form-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--tint-1); border-radius:var(--radius-field); padding:4px; }
.form-tab{ border:0; border-radius:4px; height:40px; font-size:14px; font-weight:700; background:transparent; color:var(--navy); }
.form-tab.is-active{ background:#fff; }
.lead-form{ display:flex; flex-direction:column; gap:16px; }
.lead-form[hidden]{ display:none; }
.lead-form__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; }
.field-label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--muted); }
.field-label--wide{ grid-column:1/-1; }
.channel-picker{ display:flex; gap:8px; flex-wrap:wrap; }
.channel-opt{ border-radius:var(--radius-field); padding:0 14px; height:40px; font-size:14px; font-weight:700; border:1.6px solid var(--divider); background:#fff; color:var(--navy); }
.channel-opt:hover{ background:var(--tint-1); }
.channel-opt.is-active{ border-color:var(--navy); background:var(--navy); color:#fff; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; font-weight:600; color:var(--muted); line-height:1.45; }
.consent input{ width:20px; height:20px; margin:0; accent-color:var(--navy); flex:none; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.lead-form__hint{ margin:0; font-size:13px; font-weight:600; color:var(--muted); }
.lead-form__status{ margin:0; font-size:13px; font-weight:600; min-height:1em; }
.lead-form__status.is-error{ color:#B3261E; }
.lead-form__status.is-ok{ color:var(--navy); }
.call-card{ border:1.6px solid var(--divider); border-radius:var(--radius-block); padding:20px; display:flex; flex-direction:column; gap:12px; }
.call-card__phone{ font-size:24px; font-weight:800; color:var(--navy); text-decoration:none; letter-spacing:-.01em; }
.call-card__hours{ margin:0; font-size:14px; font-weight:600; color:var(--muted); line-height:1.5; }
.call-card__hours-value{ border-bottom:1.6px dashed var(--muted); }
.call-card .btn{ margin-top:8px; align-self:flex-start; }
.call-card .btn + .btn{ margin-top:0; }
@media (min-width:768px){
  .form-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); }
  .form-card, .call-card{ padding:32px; }
}

/* ============================================================
   Текстовые страницы (политика, согласие)
   ============================================================ */
.prose{ display:flex; flex-direction:column; gap:20px; max-width:820px; }
.prose .lead{ font-size:17px; font-weight:600; color:var(--graphite); margin:0; }
.prose h2{ font-size:22px; font-weight:800; color:var(--navy); margin-top:12px; }
.prose p{ font-size:16px; line-height:1.6; color:var(--graphite); margin:0; }
.prose ul{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.prose li{ font-size:16px; line-height:1.6; color:var(--graphite); }
.prose .caption{ font-size:13px; color:var(--muted); }
.prose a{ color:var(--navy); }
.prose .back-link{ font-size:14px; font-weight:700; }

/* ============================================================
   Подвал
   ============================================================ */
.site-footer{ background:var(--navy); color:#fff; padding:40px 0 96px; }
.site-footer__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:32px; }
.site-footer__brand{ display:flex; flex-direction:column; gap:14px; }
.site-footer__brand .brand__mark{ color:#fff; }
.site-footer__brand .brand__name{ color:#fff; }
.site-footer__kicker{ color:var(--divider); font-size:11px; }
.site-footer__legal{ margin:0; font-size:13px; font-weight:400; color:var(--divider); line-height:1.6; }
.site-footer__col{ display:flex; flex-direction:column; gap:8px; }
.site-footer__phone{ color:#fff; font-weight:700; font-size:17px; text-decoration:none; }
.site-footer__muted{ margin:0; font-size:14px; color:var(--divider); }
.site-footer__link{ color:#fff; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.site-footer__bottom{ border-top:1.6px solid rgba(255,255,255,.18); margin-top:28px; padding-top:20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--divider); }
.site-footer__bottom span:first-child{ font-weight:600; }
@media (min-width:768px){ .site-footer{ padding:64px 0; } .site-footer__bottom{ margin-top:40px; } }

/* ============================================================
   Липкая мобильная панель + cookie-плашка
   ============================================================ */
body{ padding-bottom:74px; }
.sticky-panel{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:8px;
  padding:10px 12px 14px; background:#fff; border-top:1.6px solid var(--divider); box-shadow:0 -4px 12px rgba(26,39,64,.08);
}
.sticky-panel .btn{ height:48px; padding:0 8px; gap:6px; font-size:15px; }
@media (min-width:768px){
  body{ padding-bottom:0; }
  .sticky-panel{ display:none; }
}

.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:90px; z-index:60; background:#fff; border:1.6px solid var(--divider);
  border-radius:var(--radius-card); box-shadow:var(--shadow-lg); padding:16px; display:flex; flex-direction:column; gap:12px;
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner p{ margin:0; font-size:13px; font-weight:600; color:var(--graphite); line-height:1.5; }
.cookie-banner__actions{ display:flex; justify-content:flex-end; }
.cookie-banner .btn{ height:40px; padding:0 18px; font-size:14px; }
@media (min-width:768px){
  .cookie-banner{ left:auto; right:24px; bottom:24px; max-width:420px; flex-direction:row; align-items:center; }
  .cookie-banner__actions{ flex:none; }
}
@media (min-width:640px){ .docs-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1024px){ .docs-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.about-spec .code-badge,.spec-chip .code-badge{ min-width:52px; text-align:center; }