/* ============================================================
   ИИщенко LAB — упаковка активов и бизнеса под продажу
   Светлая «документная» тема. v1.0
   ============================================================ */

:root {
  /* бумага и тон */
  --paper:      #F5F2EC;
  --sheet:      #FFFFFF;
  --sheet-warm: #FAF8F4;
  --ink:        #17202B;
  --ink-2:      #3D4753;
  --muted:      #666F7B;   /* 4.56:1 на бумаге — было #6B7480 с 4.24:1, ниже нормы */
  --rule:       #E3DCD0;
  --rule-soft:  #EEE9E0;

  /* глубокая секция */
  --deep:       #131C2E;
  --deep-2:     #1B2740;
  --deep-ink:   #EDEFF3;
  --deep-muted: #9AA6B8;
  --deep-rule:  rgba(255, 255, 255, 0.14);

  /* акценты: один основной + один вспомогательный + статус */
  --accent:     #1A237E;
  --accent-hi:  #2B37B8;
  --second:     #16776E;
  --status:     #7CAF3A;

  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sans: "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Bitter", Georgia, "Times New Roman", serif;

  --wrap: 1220px;
  --pad: 32px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- типографика ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
}

h1 { font-size: clamp(38px, 5.2vw, 72px); letter-spacing: -0.028em; }
h2 { font-size: clamp(29px, 3.4vw, 46px); }
h3 { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(18.5px, 1.5vw, 23px); color: var(--ink-2); line-height: 1.62; }

.label {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- шапка ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 242, 236, 0.9);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.top.is-stuck { border-bottom-color: var(--rule); }

.top__in {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 74px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand img { height: 30px; width: auto; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; }
.brand__sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.nav { display: flex; gap: 26px; }
.nav a {
  position: relative;
  text-decoration: none;
  font-size: 15.5px;
  color: var(--ink-2);
  padding: 4px 0;
  transition: color .2s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.nav a:hover { color: var(--accent); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.burger { display: none; }
.menu { display: none; }

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

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}
.btn span { position: relative; z-index: 1; }
.btn svg { position: relative; z-index: 1; transition: transform .28s cubic-bezier(.4,0,.2,1); }
.btn:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn:hover svg { transform: translateX(5px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

.btn--sm { padding: 12px 20px; font-size: 15.5px; }

.btn--light { background: #fff; color: var(--deep); border-color: #fff; }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--accent); }

.btn--outline-light { background: transparent; color: var(--deep-ink); border-color: var(--deep-rule); }
.btn--outline-light:hover { background: transparent; border-color: var(--deep-ink); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 66px 0 0;
  overflow: hidden;
}
.hero::before {
  /* кадастровая сетка — очень слабо */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(23,32,43,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,32,43,.045) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(120% 85% at 78% 22%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 85% at 78% 22%, #000 0%, transparent 72%);
  pointer-events: none;
  transform: var(--grid-shift, none);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.hero__stamp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: rgba(255,255,255,.6);
  margin-bottom: 26px;
}
.hero__stamp .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--status);
  box-shadow: 0 0 0 3px rgba(124,175,58,.18);
}

.hero h1 { margin-bottom: 24px; }
.hero h1 em { font-style: normal; color: var(--accent); }

.hero__lead { max-width: 33em; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; }

.hero__note {
  margin-top: 18px;
  font-size: 15px;
  color: var(--muted);
  max-width: 40ch;
}

/* опись пакета */
.docket {
  border: 1px solid var(--rule);
  background: var(--sheet);
  border-radius: 3px;
  box-shadow: 0 18px 44px -34px rgba(19,28,46,.55);
}
.docket__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--rule);
}
.docket__title { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.docket ol { list-style: none; margin: 0; padding: 6px 0; counter-reset: d; }
.docket li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 20px;
  font-size: 16px;
  color: var(--ink-2);
  transition: background .2s ease, color .2s ease;
}
.docket li:hover { background: var(--sheet-warm); color: var(--ink); }
.docket li i { font-family: var(--mono); font-style: normal; font-size: 12px; color: var(--muted); }
.docket li:hover i { color: var(--accent); }
.docket li b { font-weight: 500; }
.docket li s { text-decoration: none; display: block; font-size: 14.2px; color: var(--muted); line-height: 1.42; }
.docket__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--rule);
  background: var(--sheet-warm);
}
.langs { display: flex; gap: 7px; }
.langs span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
}

/* счётчики под hero */
.facts {
  margin-top: 74px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.facts__i {
  padding: 26px 26px 30px 0;
  border-right: 1px solid var(--rule);
}
.facts__i:last-child { border-right: 0; }
.facts__i:not(:first-child) { padding-left: 26px; }
.facts__n {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 9px;
}
.facts__n u { text-decoration: none; color: var(--second); }
.facts__t { font-size: 15.5px; color: var(--muted); max-width: 22ch; }

/* ---------- бегущая строка ---------- */

.telex {
  margin-top: 66px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--sheet-warm);
  overflow: hidden;
  padding: 13px 0;
}
.telex__track { display: flex; width: max-content; animation: telex 44s linear infinite; }
.telex__track span {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0 22px;
  white-space: nowrap;
}
.telex__track span::after { content: "·"; margin-left: 22px; color: var(--muted); }
@keyframes telex { to { transform: translateX(-50%); } }

/* ---------- секции ---------- */

section { position: relative; }

.sec { padding: 96px 0; }
.sec--tight { padding: 74px 0; }
.sec--sheet { background: var(--sheet); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.sec__head { margin-bottom: 46px; max-width: 46em; }
.sec__head .label { display: block; margin-bottom: 16px; }
.sec__head h2 { margin-bottom: 18px; }

/* ---------- «что обычно происходит» ---------- */

.trouble { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.trouble__i {
  grid-column: span 6;
  padding: 28px 28px 30px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  border-radius: 3px;
}
.trouble__i--wide { grid-column: span 12; display: grid; grid-template-columns: 1fr 1.25fr; gap: 34px; align-items: start; }
.trouble__i h3 { margin-bottom: 12px; }
.trouble__i p { color: var(--ink-2); font-size: 17.4px; }
.trouble__i .label { display: block; margin-bottom: 14px; }
.trouble__cost {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--accent);
  border-top: 1px solid var(--rule-soft);
  padding-top: 16px;
  margin-top: 18px;
}

/* ---------- реестр (список-опись) ---------- */

.reg { border-top: 1px solid var(--rule); }
.reg__i {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 28px;
  align-items: start;
  padding: 26px 0 26px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left .3s cubic-bezier(.4,0,.2,1), background .3s ease;
}
.reg__i:hover { padding-left: 14px; background: linear-gradient(90deg, rgba(26,35,126,.045), transparent 62%); }
.reg__n { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-top: 5px; transition: color .25s ease; }
.reg__i:hover .reg__n { color: var(--accent); }
.reg__t h3 { margin-bottom: 6px; }
.reg__t .label { text-transform: none; letter-spacing: .04em; font-size: 12.5px; }
.reg__d { color: var(--ink-2); font-size: 17.4px; }
.reg__d p { max-width: none; }
.reg__d ul { margin: 10px 0 0; padding-left: 0; list-style: none; }
.reg__d li { position: relative; padding-left: 17px; margin-bottom: 6px; font-size: 16.6px; }
.reg__d li::before {
  content: "";
  position: absolute; left: 0; top: 10px;
  width: 6px; height: 1px; background: var(--second);
}

/* ---------- кейс (тёмная секция) ---------- */

.case {
  background: var(--deep);
  color: var(--deep-ink);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.case::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(100% 70% at 20% 10%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(100% 70% at 20% 10%, #000, transparent 70%);
}
.case .wrap { position: relative; }
.case .label { color: var(--deep-muted); }
.case h2 { color: #fff; }
.case p { color: var(--deep-muted); }

.case__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 66px; align-items: start; }

.case__list { list-style: none; margin: 26px 0 0; padding: 0; }
.case__list li {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--deep-rule);
  font-size: 17px;
}
.case__list li:last-child { border-bottom: 1px solid var(--deep-rule); }
.case__list b { font-family: var(--mono); font-weight: 500; font-size: 13px; color: #fff; letter-spacing: .02em; padding-top: 2px; }
.case__list span { color: var(--deep-muted); }

.case__panel {
  border: 1px solid var(--deep-rule);
  background: var(--deep-2);
  border-radius: 3px;
  padding: 30px 30px 26px;
}
.case__kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
.case__kpi div span {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -.02em;
}
.case__kpi div small { font-size: 14.6px; color: var(--deep-muted); line-height: 1.4; display: block; }
.case__link {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--deep-rule);
  width: 100%;
  color: #fff; text-decoration: none; font-size: 15px;
}
.case__link svg { transition: transform .28s cubic-bezier(.4,0,.2,1); }
.case__link:hover svg { transform: translate(4px, -4px); }
.case__link u { text-decoration: none; font-family: var(--mono); font-size: 13px; color: var(--deep-muted); margin-left: auto; }

.case__disc { margin-top: 34px; font-size: 14.6px; color: var(--deep-muted); max-width: 62ch; }

/* ---------- услуги (карточки с reveal) ---------- */

.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.svc__i {
  background: var(--sheet);
  padding: 30px 28px 28px;
  min-height: 268px;
  display: flex;
  flex-direction: column;
  transition: background .25s ease;
}
.svc__i:hover { background: var(--sheet-warm); }
.svc__i .num { font-size: 12px; color: var(--muted); margin-bottom: 22px; display: block; }
.svc__i h3 { margin-bottom: 10px; }
.svc__i > p { font-size: 16.8px; color: var(--ink-2); }
.svc__more {
  margin-top: auto;
  padding-top: 18px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .34s cubic-bezier(.4,0,.2,1), opacity .28s ease;
}
.svc__i:hover .svc__more { max-height: 220px; opacity: 1; }
.svc__more ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.svc__more li { font-size: 15.4px; color: var(--muted); padding: 3px 0 3px 15px; position: relative; }
.svc__more li::before { content: ""; position: absolute; left: 0; top: 12px; width: 5px; height: 1px; background: var(--second); }

/* ---------- этапы ---------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { border-top: 2px solid var(--ink); padding-top: 20px; }
.step:nth-child(2) { border-top-color: var(--accent); }
.step:nth-child(3) { border-top-color: var(--second); }
.step:nth-child(4) { border-top-color: var(--status); }
.step__n { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 14px; display: flex; justify-content: space-between; }
.step h3 { font-size: 20px; margin-bottom: 10px; }
.step p { font-size: 16.6px; color: var(--ink-2); }

/* ---------- методология ---------- */

.method { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 60px; align-items: start; }
.srcs { width: 100%; border-collapse: collapse; }
.srcs td { padding: 16px 0; border-top: 1px solid var(--rule); vertical-align: top; font-size: 16.8px; }
.srcs tr:first-child td { border-top: 0; }
.srcs td:first-child { width: 34%; padding-right: 26px; font-weight: 500; }
.srcs td:last-child { color: var(--muted); font-size: 16.2px; }

/* ---------- автор ---------- */

.author { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 52px; align-items: start; }
.author__ph { border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: var(--sheet); }
.author__ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
/* портрета пока нет — карточка держит место подписью, без стокового фото */
.author__ph--empty { border-left: 2px solid var(--accent); }
.author__cap { padding: 14px 16px; border-top: 1px solid var(--rule); }
.author__ph--empty .author__cap { border-top: 0; padding: 18px 18px 20px; }
.author__cap b { display: block; font-family: var(--serif); font-size: 16px; font-weight: 600; }
.author__cap span { font-size: 13px; color: var(--muted); }
.author blockquote { margin: 0 0 22px; padding: 0; font-family: var(--serif); font-size: clamp(21px, 2.1vw, 28px); line-height: 1.3; letter-spacing: -.015em; }

/* ---------- цены ---------- */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.tier {
  border: 1px solid var(--rule);
  background: var(--sheet);
  border-radius: 3px;
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
}
.tier--main { border-color: var(--accent); box-shadow: 0 22px 50px -38px rgba(26,35,126,.7); }
.tier__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tier__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tier--main .tier__tag { color: var(--accent); }
.tier__price { font-family: var(--serif); font-size: 32px; line-height: 1; letter-spacing: -.02em; margin-bottom: 6px; }
.tier__price small { font-size: 15px; color: var(--muted); font-family: var(--sans); }
.tier__sub { font-size: 15px; color: var(--muted); margin-bottom: 22px; }
.tier ul { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--rule-soft); }
.tier li { font-size: 16.4px; color: var(--ink-2); padding: 11px 0 11px 20px; border-bottom: 1px solid var(--rule-soft); position: relative; }
.tier li::before { content: ""; position: absolute; left: 0; top: 20px; width: 8px; height: 1px; background: var(--second); }
.tier .btn { margin-top: auto; justify-content: center; }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--rule); }
.faq__i { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 24px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(17.5px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .2s ease;
}
.faq__q:hover { color: var(--accent); }
.faq__q i { font-family: var(--mono); font-style: normal; font-size: 12px; color: var(--muted); padding-top: 6px; min-width: 30px; }
.faq__q em { margin-left: auto; font-style: normal; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.faq__i.is-open .faq__q em { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .38s cubic-bezier(.4,0,.2,1); }
.faq__a > div { padding: 0 0 28px 54px; color: var(--ink-2); font-size: 17.4px; max-width: 74ch; }

/* ---------- финал ---------- */

.final {
  background: var(--deep);
  color: var(--deep-ink);
  padding: 100px 0 0;
  position: relative;
  overflow: hidden;
}
.final::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(90% 80% at 82% 20%, #000, transparent 68%);
  -webkit-mask-image: radial-gradient(90% 80% at 82% 20%, #000, transparent 68%);
}
.final .wrap { position: relative; }
.final__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 66px; align-items: start; }
.final h2 { color: #fff; margin-bottom: 20px; }
.final p { color: var(--deep-muted); }
.final .label { color: var(--deep-muted); }

.contacts { list-style: none; margin: 30px 0 0; padding: 0; }
.contacts li { border-top: 1px solid var(--deep-rule); }
.contacts a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 17px 0;
  text-decoration: none;
  color: #fff;
  font-size: 19px;
  transition: padding-left .28s cubic-bezier(.4,0,.2,1), color .2s ease;
}
.contacts a:hover { padding-left: 10px; }
.contacts a b { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--deep-muted); min-width: 76px; }
.contacts a span { font-family: var(--serif); }

.form { border: 1px solid var(--deep-rule); background: var(--deep-2); border-radius: 3px; padding: 30px 28px; }
.form h3 { color: #fff; font-size: 20px; margin-bottom: 8px; }
.form > p { font-size: 15.4px; margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-muted); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--deep-rule);
  border-radius: 2px;
  color: #fff;
  font-family: var(--sans);
  font-size: 16.5px;
  padding: 12px 13px;
  transition: border-color .2s ease;
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: rgba(255,255,255,.5); }
.field select option { color: #111; }
.form .btn { width: 100%; justify-content: center; }
.form__note { margin-top: 14px; font-size: 13.6px; color: var(--deep-muted); }

/* ---------- футер ---------- */

.foot { background: var(--deep); color: var(--deep-ink); padding: 90px 0 34px; position: relative; }
.foot__mark {
  font-family: var(--serif);
  font-size: clamp(44px, 9vw, 132px);
  line-height: .92;
  letter-spacing: -.045em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.22);
  margin-bottom: 54px;
  white-space: nowrap;
}
.foot__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 44px; padding-top: 34px; border-top: 1px solid var(--deep-rule); }
.foot__cols h4 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--deep-muted); margin-bottom: 16px; }
.foot__cols a { display: block; color: var(--deep-ink); text-decoration: none; font-size: 16.4px; padding: 5px 0; transition: color .2s ease; }
.foot__cols a:hover { color: #fff; }
.foot__about { font-size: 16px; color: var(--deep-muted); max-width: 40ch; }
.foot__logo { height: 40px; width: auto; margin-bottom: 18px; }   /* логотип цветной на прозрачном фоне — инверсия делала из него белый прямоугольник */
.foot__bot { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-top: 50px; padding-top: 22px; border-top: 1px solid var(--deep-rule); font-size: 14.4px; color: var(--deep-muted); }

/* ---------- появление ---------- */

.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.rv.is-in { opacity: 1; transform: none; }

/* ---------- адаптив ---------- */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .docket { max-width: 560px; }
  .case__grid, .method, .final__grid { grid-template-columns: 1fr; gap: 44px; }
  .svc { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .reg__i { grid-template-columns: 58px minmax(0, 1fr); gap: 20px; }
  .reg__d { grid-column: 2; padding-top: 4px; }
  .author { grid-template-columns: 232px minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 860px) {
  :root { --pad: 22px; }
  .nav { display: none; }
  .top__in > .btn { display: none; }
  .burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border: 1px solid var(--rule); background: #fff;
    border-radius: 999px; cursor: pointer;
  }
  .burger span { display: block; width: 16px; height: 1px; background: var(--ink); position: relative; }
  .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1px; background: var(--ink); }
  .burger span::before { top: -5px; }
  .burger span::after { top: 5px; }

  .menu {
    position: fixed; inset: 74px 0 auto; z-index: 55;
    background: var(--sheet); border-bottom: 1px solid var(--rule);
    padding: 10px var(--pad) 22px;
    display: none;
  }
  .menu.is-open { display: block; }
  .menu a { display: block; padding: 13px 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; font-size: 16px; }
  .menu .btn { margin-top: 18px; width: 100%; justify-content: center; }

  .hero { padding-top: 44px; }
  .facts { grid-template-columns: repeat(2, 1fr); margin-top: 52px; }
  .facts__i { padding: 22px 18px 24px 0; }
  .facts__i:nth-child(2n) { border-right: 0; padding-left: 18px; }
  .facts__i:nth-child(3), .facts__i:nth-child(4) { border-top: 1px solid var(--rule); }
  .facts__i:nth-child(3) { padding-left: 0; }

  .sec, .case, .final { padding: 64px 0; }
  .sec--tight { padding: 54px 0; }
  .trouble__i, .trouble__i--wide { grid-column: span 12; grid-template-columns: 1fr; gap: 0; }
  .svc { grid-template-columns: 1fr; }
  .svc__i { min-height: 0; }
  .svc__more { max-height: none; opacity: 1; padding-top: 14px; }  /* на тач-устройствах уже раскрыто */
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .tiers { grid-template-columns: 1fr; }
  .author { grid-template-columns: 1fr; gap: 26px; }
  .author__ph { max-width: 260px; }
  .case__kpi { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .case__list li { grid-template-columns: 1fr; gap: 4px; }
  .foot { padding-top: 62px; }
  .foot__cols { grid-template-columns: 1fr; gap: 30px; }
  .foot__mark { -webkit-text-stroke-width: .7px; margin-bottom: 34px; }
  .final { padding-bottom: 0; }
  .reg__i:hover { padding-left: 0; background: none; }
  .contacts a:hover { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .telex__track { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   ИНФОГРАФИКА И НОВЫЕ БЛОКИ (v2)
   Рисуем разметкой, без картинок: линии, полосы, шкалы.
   ============================================================ */

/* ---------- общая рамка графика ---------- */

.chart {
  margin-top: 56px;
  padding: 34px 34px 30px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  border-radius: 3px;
}
.chart__head { margin-bottom: 30px; }
.chart__head .label { display: block; margin-bottom: 10px; }
.chart__note { margin-top: 22px; font-size: 14.6px; color: var(--muted); }

/* ---------- две дорожки времени ---------- */

.tracks { display: flex; flex-direction: column; gap: 22px; }
.track { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; align-items: center; }
.track__cap b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.track__cap span { font-size: 14.8px; color: var(--muted); line-height: 1.42; display: block; }

.track__bar { display: flex; height: 58px; border-radius: 2px; overflow: hidden; }
.seg {
  position: relative;
  width: var(--w);
  display: flex;
  align-items: center;
  padding: 0 14px;
  min-width: 0;
  transition: filter .25s ease;
}
.seg i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seg--wait  { background: #EFE8DA; color: #6B6250; }
.seg--stop  { background: #E7D3CE; color: #8A4436; }
.seg--go    { background: #1A237E; color: #fff; }
.seg--check { background: var(--second); color: #fff; }
.seg--stop::after {
  content: "";
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 2px; background: #B4574A;
}
.track__bar:hover .seg { filter: saturate(1.15); }

.tracks__scale {
  display: flex;
  justify-content: space-between;
  margin-left: 286px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}

/* ---------- проверка идеи: воронка фильтров ---------- */

.idea { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 60px; align-items: start; }

.funnel { display: flex; flex-direction: column; gap: 14px; }
.funnel__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.funnel__bar {
  display: block;
  width: var(--w);
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--second));
  transform-origin: left;
  animation: growbar .7s cubic-bezier(.4,0,.2,1) both;
}
.funnel__row:nth-child(2) .funnel__bar { animation-delay: .06s; }
.funnel__row:nth-child(3) .funnel__bar { animation-delay: .12s; }
.funnel__row:nth-child(4) .funnel__bar { animation-delay: .18s; }
.funnel__row:nth-child(5) .funnel__bar { animation-delay: .24s; }
@keyframes growbar { from { transform: scaleX(.04); opacity: .2; } to { transform: scaleX(1); opacity: 1; } }

.funnel__t b { font-family: var(--serif); font-size: 20px; font-weight: 600; margin-right: 12px; }
.funnel__t small { font-size: 16px; color: var(--muted); }

.idea__out h3 { margin-bottom: 16px; }
.ticks { list-style: none; margin: 0 0 26px; padding: 0; }
.ticks li {
  position: relative;
  padding: 10px 0 10px 30px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 16.8px;
  color: var(--ink-2);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 19px;
  width: 11px; height: 6px;
  border-left: 1.6px solid var(--second);
  border-bottom: 1.6px solid var(--second);
  transform: rotate(-45deg);
}
.idea__mark { margin-bottom: 26px; }
.idea__mark b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 8px 0 6px; }
.idea__mark-note { font-size: 15px; color: var(--muted); }

/* ---------- конвейер пакета ---------- */

.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-bottom: 54px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  border-radius: 3px;
  overflow: hidden;
}
.flow__i {
  position: relative;
  padding: 24px 30px 24px 24px;
  border-right: 1px solid var(--rule);
  transition: background .25s ease;
}
.flow__i:last-child { border-right: 0; }
.flow__i::after {
  content: "";
  position: absolute;
  right: -7px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  background: var(--sheet);
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  transform: rotate(45deg);
  z-index: 2;
}
.flow__i--end::after { display: none; }
.flow__i:hover { background: var(--sheet-warm); }
.flow__n { font-family: var(--mono); font-size: 12px; color: var(--muted); display: block; margin-bottom: 12px; }
.flow__i b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.flow__i small { font-size: 15px; color: var(--muted); line-height: 1.4; display: block; }
.flow__i--end { background: var(--sheet-warm); }
.flow__i--end b { color: var(--accent); }

/* ---------- восемь частей: карта ---------- */

.parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.part { background: var(--sheet); padding: 26px 24px 28px; transition: background .25s ease; }
.part:hover { background: var(--sheet-warm); }
.part__n {
  font-family: var(--mono);
  font-size: 12px;
  color: #fff;
  background: var(--accent);
  display: inline-block;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.part:nth-child(4n+2) .part__n { background: var(--second); }
.part:nth-child(4n+3) .part__n { background: var(--deep); }
.part:nth-child(4n)   .part__n { background: #6B7480; }
.part h3 { font-size: 20px; margin-bottom: 8px; }
.part p { font-size: 16px; color: var(--ink-2); }

/* ---------- гант этапов ---------- */

.gantt { border-top: 1px solid var(--rule); }
.gantt__row {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.gantt__t b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 600; margin-bottom: 4px; }
.gantt__t span { font-size: 15.4px; color: var(--muted); line-height: 1.4; display: block; }
.gantt__line { position: relative; height: 46px; background: repeating-linear-gradient(90deg, var(--rule-soft) 0 1px, transparent 1px 25%); border-radius: 2px; }
.gantt__bar {
  position: absolute;
  left: var(--s);
  width: var(--w);
  top: 7px; bottom: 7px;
  background: var(--ink);
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  animation: growbar .6s cubic-bezier(.4,0,.2,1) both;
}
.gantt__bar i { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: #fff; white-space: nowrap; }
.gantt__bar--2 { background: var(--accent); animation-delay: .07s; }
.gantt__bar--3 { background: var(--second); animation-delay: .14s; }
.gantt__bar--4 { background: var(--status); animation-delay: .21s; }
.gantt__bar--4 i { color: #1E2B10; }
.gantt__scale {
  display: flex;
  justify-content: space-between;
  margin-left: 360px;
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}

/* ---------- адаптив новых блоков ---------- */

@media (max-width: 1080px) {
  .idea { grid-template-columns: 1fr; gap: 40px; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow__i { border-bottom: 1px solid var(--rule); }
  .flow__i::after { display: none; }
  .parts { grid-template-columns: repeat(2, 1fr); }
  .track { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
  .tracks__scale { margin-left: 218px; }
  .gantt__row { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
  .gantt__scale { margin-left: 260px; }
}

@media (max-width: 860px) {
  .chart { padding: 24px 20px 22px; margin-top: 40px; }
  .track { grid-template-columns: 1fr; gap: 10px; }
  .track__bar { height: 46px; }
  .seg { padding: 0 8px; }
  .seg i { font-size: 10.5px; }
  .tracks__scale { margin-left: 0; }
  .tracks__scale span:nth-child(2), .tracks__scale span:nth-child(4) { display: none; }
  .flow { grid-template-columns: 1fr; }
  .parts { grid-template-columns: 1fr; }
  .funnel__t b { display: block; margin-bottom: 2px; }
  .gantt__row { grid-template-columns: 1fr; gap: 12px; }
  .gantt__line { height: 38px; }
  .gantt__scale { margin-left: 0; }
  .gantt__scale span:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .funnel__bar, .gantt__bar { animation: none; }
}

/* ---------- правки после проверки на 390 (v2.1) ---------- */

.foot__mark { overflow: hidden; }

@media (max-width: 860px) {
  /* крупная надпись в футере переносилась за экран и давала горизонтальный скролл */
  .foot__mark { white-space: normal; font-size: clamp(34px, 11vw, 56px); line-height: 1; }

  /* дорожки времени: на телефоне подписи не влезали в сегменты — разворачиваем в стек,
     пропорцию времени показываем полоской под каждой строкой */
  .track__bar { flex-direction: column; height: auto; gap: 3px; border-radius: 0; overflow: visible; }
  .seg {
    width: 100%;
    padding: 10px 12px 13px;
    border-radius: 2px;
    align-items: flex-start;
  }
  .seg i { white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px; }
  .seg::before {
    content: "";
    position: absolute;
    left: 12px; bottom: 6px;
    height: 2px;
    width: calc(var(--w) * 0.8);
    background: currentColor;
    opacity: .45;
  }
  .seg--stop::after { display: none; }
  .tracks__scale { display: none; }
}

/* ---------- планшет 700–860: не схлопывать всё в одну колонку (v2.2) ---------- */

@media (min-width: 700px) and (max-width: 860px) {
  .svc, .parts, .tiers { grid-template-columns: repeat(2, 1fr); }
  .trouble__i { grid-column: span 6; }
  .trouble__i--wide { grid-column: span 12; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .facts__i:nth-child(3), .facts__i:nth-child(4) { border-top: 0; }
  .facts__i:nth-child(2n) { border-right: 1px solid var(--rule); padding-left: 18px; }
  .facts__i:last-child { border-right: 0; }
  .facts__i:nth-child(3) { padding-left: 18px; }
  .author { grid-template-columns: 232px minmax(0, 1fr); }
  .author__ph { max-width: none; }
}

/* ---------- кейс 2: было / стало + состав работы (v2.3) ---------- */

.ba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  margin-bottom: 54px;
}
.ba__i { padding: 28px 30px 30px; border: 1px solid var(--rule); border-radius: 3px; }
.ba__i .label { display: block; margin-bottom: 16px; }
.ba__head {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.01em;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.ba__think { font-size: 16.4px; color: var(--muted); }

.ba__i--old { background: var(--sheet-warm); }
.ba__i--old .ba__head { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(140,70,55,.5); }

.ba__i--new { background: var(--sheet); border-color: var(--accent); box-shadow: 0 22px 50px -40px rgba(26,35,126,.75); }
.ba__i--new .ba__head { color: var(--accent); }

.ba__arrow { display: flex; align-items: center; justify-content: center; color: var(--muted); }

.case2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.case2 h3 { margin-bottom: 16px; }
.case2__side { border-left: 2px solid var(--accent); padding-left: 26px; }
.case2__kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 20px; margin-bottom: 26px; }
.case2__kpi b {
  display: block;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.case2__kpi div:nth-child(2) b { color: var(--accent); }
.case2__kpi div:nth-child(3) b { color: var(--second); }
.case2__kpi span { font-size: 14.8px; color: var(--muted); line-height: 1.38; display: block; }
.case2__more { font-size: 16px; color: var(--ink-2); padding-top: 20px; border-top: 1px solid var(--rule); }
.case2__disc { font-size: 14.4px; color: var(--muted); margin-top: 14px; }

@media (max-width: 1080px) {
  .ba { grid-template-columns: 1fr; gap: 14px; }
  .ba__arrow { transform: rotate(90deg); height: 26px; }
  .case2 { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 860px) {
  .ba__i { padding: 22px 20px 24px; }
  .case2__kpi { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .case2__kpi b { font-size: 32px; }
  .case2__side { padding-left: 18px; }
}

/* ---------- форма: ловушка для ботов и статус отправки (v2.4) ---------- */

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.45;
  min-height: 0;
}
.form__status:empty { display: none; }
.form__status.is-ok  { color: #9CD46A; }
.form__status.is-err { color: #E9A79A; }

/* ---------- кейс 3: разбор розницы + карточка автора (v2.5) ---------- */

.case3 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.case3 h3 { margin-bottom: 16px; }

.case3__find {
  margin-top: 28px;
  padding: 24px 26px 26px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--second);
  border-radius: 3px;
}
.case3__find .label { display: block; margin-bottom: 10px; }
.case3__find p { font-size: 17.4px; color: var(--ink-2); }

.case3__kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 20px; margin-bottom: 28px; }
.case3__kpi b {
  display: block;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  color: var(--accent);
}
.case3__kpi div:nth-child(2) b { color: var(--ink); }
.case3__kpi div:nth-child(4) b { color: var(--second); }
.case3__kpi span { font-size: 14.8px; color: var(--muted); line-height: 1.38; display: block; }

.case3__honest { padding-top: 24px; border-top: 1px solid var(--rule); }
.case3__honest .label { display: block; margin-bottom: 10px; }
.case3__honest p { font-size: 16px; color: var(--ink-2); }

/* карточка автора: сухая справка под подписью */
.author__facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.author__facts li { padding: 14px 18px; border-bottom: 1px solid var(--rule-soft); }
.author__facts li:last-child { border-bottom: 0; }
.author__facts b {
  display: block;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1;
  margin-bottom: 5px;
}
.author__facts li:nth-child(2) b { color: var(--accent); }
.author__facts span { font-size: 14.6px; color: var(--muted); line-height: 1.36; display: block; }

.author__nda { font-size: 15.4px; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--rule); }

@media (max-width: 1080px) {
  .case3 { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 860px) {
  .case3__kpi { gap: 22px 14px; }
  .case3__kpi b { font-size: 34px; }
  .case3__find { padding: 20px 18px 22px; }
}

/* ---------- развилка, нумерация кейсов, липкий CTA (v2.6) ---------- */

/* два входа сразу после первого экрана */
.fork { padding: 56px 0 8px; }
.fork__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fork__i {
  position: relative;
  display: block;
  padding: 30px 32px 28px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
}
.fork__i:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 26px 46px -38px rgba(26,35,126,.85);
}
.fork__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-bottom: 16px;
}
.fork__i b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.16;
  margin-bottom: 10px;
}
.fork__i small { display: block; font-size: 16.6px; color: var(--ink-2); line-height: 1.5; max-width: 42ch; }
.fork__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-size: 15.5px;
  color: var(--accent);
}
.fork__go svg { transition: transform .28s cubic-bezier(.4,0,.2,1); }
.fork__i:hover .fork__go svg { transform: translateX(5px); }

/* мини-оглавление кейсов */
.cindex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.cindex__i {
  display: block;
  background: var(--sheet);
  padding: 24px 26px 26px;
  text-decoration: none;
  color: inherit;
  transition: background .25s ease;
}
.cindex__i:hover { background: var(--sheet-warm); }
.cindex__i b {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--rule);
  margin-bottom: 14px;
  transition: color .25s ease;
}
.cindex__i:hover b { color: var(--accent); }
.cindex__i span { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.cindex__i small { display: block; font-size: 15.4px; color: var(--muted); line-height: 1.42; }

/* плашка с номером у каждого кейса */
.ckick, .ckick--dark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.ckick__n {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 6px 12px;
  border-radius: 2px;
}
.ckick__t { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.ckick__d { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: auto; }

.ckick--dark { border-bottom-color: var(--deep-rule); }
.ckick--dark .ckick__n { background: #fff; color: var(--deep); }
.ckick--dark .ckick__t { color: #fff; }
.ckick--dark .ckick__d { color: var(--deep-muted); }

/* переход после кейсов */
.case__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 54px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}
.case__cta p { font-size: 17.4px; color: var(--ink-2); margin: 0; max-width: 58ch; }

/* липкая кнопка на телефоне — появляется после первого экрана */
.sticky-cta {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 20px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 16.5px;
  font-weight: 500;
  border-radius: 999px;
  box-shadow: 0 14px 30px -14px rgba(19,28,46,.7);
  transform: translateY(140%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.sticky-cta.is-on { transform: none; }

@media (max-width: 1080px) {
  .cindex { grid-template-columns: 1fr; }
  .cindex__i { display: grid; grid-template-columns: 62px 1fr; align-items: baseline; gap: 0 18px; }
  .cindex__i b { margin-bottom: 0; grid-row: span 2; }
}

@media (max-width: 860px) {
  .fork { padding-top: 40px; }
  .fork__grid { grid-template-columns: 1fr; }
  .fork__i { padding: 24px 22px 24px; }
  .ckick, .ckick--dark { gap: 10px; }
  .ckick__t { font-size: 17px; width: 100%; }
  .ckick__d { margin-left: 0; }
  .case__cta { margin-top: 36px; }
  .case__cta .btn { width: 100%; justify-content: center; }
  .sticky-cta { display: flex; }
  .final, .foot { padding-bottom: 96px; }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ — отдельный проход (v2.8)
   Правило: на телефоне важнее удобство, чем эффекты.
   ============================================================ */

@media (max-width: 860px) {
  /* шапка ниже — экран телефона дороже */
  .top__in { height: 62px; }
  .brand img { height: 26px; }
  .brand__name { font-size: 15.5px; }
  .menu { inset: 62px 0 auto; max-height: calc(100vh - 62px); overflow-y: auto; }

  /* первый экран компактнее */
  .hero { padding-top: 34px; }
  .hero h1 { font-size: clamp(32px, 8.6vw, 40px); }
  .hero__stamp { margin-bottom: 20px; padding: 6px 12px 6px 10px; }
  .hero__cta { gap: 10px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__lead { font-size: 18px; }

  /* опись пакета: плотнее строки */
  .docket li { padding: 9px 16px; grid-template-columns: 28px 1fr; gap: 10px; }
  .docket__head, .docket__foot { padding: 14px 16px; }
  .docket li s { font-size: 13.6px; }

  /* секции: ровный вертикальный ритм */
  .sec { padding: 56px 0; }
  .sec--tight { padding: 46px 0; }
  .sec__head { margin-bottom: 32px; }

  /* диаграмма этапов: подписи не влезали в короткие полосы */
  .gantt__row { padding: 16px 0; }
  .gantt__line { height: 34px; background: repeating-linear-gradient(90deg, var(--rule-soft) 0 1px, transparent 1px 33.33%); }
  .gantt__bar { min-width: 94px; max-width: calc(100% - var(--s)); top: 5px; bottom: 5px; padding: 0 10px; }
  .gantt__bar i { font-size: 11px; }

  /* таблица источников — в стек, узкие колонки на телефоне нечитаемы */
  .srcs, .srcs tbody, .srcs tr, .srcs td { display: block; width: 100%; }
  .srcs tr { padding: 16px 0; border-top: 1px solid var(--rule); }
  .srcs tr:first-child { border-top: 0; padding-top: 0; }
  .srcs td { border: 0; padding: 0; }
  .srcs td:first-child { width: 100%; padding: 0 0 6px; font-size: 17px; }

  /* кнопки внутри блоков — во всю ширину, удобнее пальцем */
  .idea__out .btn,
  .tier .btn,
  .case__cta .btn { width: 100%; justify-content: center; }

  /* карточки не липнут к краю */
  .chart { border-left: 0; border-right: 0; border-radius: 0; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); }

  /* цитата и крупные числа не разъезжаются */
  .author blockquote { font-size: 21px; }
  .case__kpi div span, .case2__kpi b, .case3__kpi b { font-size: 30px; }

  /* форма: поля крупнее, чтобы не зумило на iOS */
  .field input, .field textarea, .field select { font-size: 16.5px; padding: 13px 13px; }
  .form { padding: 24px 20px; }

  /* контакты крупной строкой */
  .contacts a { flex-direction: column; gap: 4px; padding: 15px 0; }
  .contacts a span { font-size: 21px; }

  /* футер: колонки ссылок с воздухом под палец */
  .foot__cols a { padding: 8px 0; }
}

/* совсем узкие экраны */
@media (max-width: 400px) {
  :root { --pad: 18px; }
  .hero h1 { font-size: 30px; letter-spacing: -.02em; }
  .facts__n { font-size: 27px; }
  .ckick__n { font-size: 11.5px; padding: 5px 10px; }
  .cindex__i { grid-template-columns: 50px 1fr; }
  .cindex__i b { font-size: 27px; }
}


/* ---------- крупная надпись в подвале: две строки, всегда в габарите (v2.9) ---------- */

.foot__mark {
  display: block;
  white-space: normal;
  font-size: clamp(38px, 8.4vw, 108px);
  line-height: .92;
  letter-spacing: -.04em;
  text-transform: uppercase;
  overflow: hidden;
}
.foot__mark span { display: block; }
.foot__mark span + span { padding-left: .12em; }

@media (max-width: 860px) {
  .foot__mark { font-size: clamp(34px, 13vw, 62px); -webkit-text-stroke-width: .8px; }
}


/* ---------- логотип: без дублирующей подписи, крупнее (v3.0) ---------- */

.brand img { height: 40px; }
.brand { gap: 0; }
.foot__logo { height: 58px; margin-bottom: 22px; }

@media (max-width: 860px) {
  .brand img { height: 32px; }
  .foot__logo { height: 46px; }
}

/* ---------- правовые страницы и согласие в форме (v3.1) ---------- */

.doc-page .top__in { justify-content: space-between; }
.doc-page .brand { margin-right: 0; }

.doc { padding: 56px 0 90px; }
.doc__wrap { max-width: 860px; }
.doc h1 { font-size: clamp(30px, 3.6vw, 46px); margin: 14px 0 10px; }
.doc h2 {
  font-size: clamp(21px, 1.9vw, 26px);
  margin: 42px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.doc h3 { font-size: 20px; margin: 26px 0 12px; }
.doc p { max-width: 76ch; margin-bottom: 1.05em; }
.doc ul { margin: 0 0 1.2em; padding: 0; list-style: none; max-width: 76ch; }
.doc li { position: relative; padding: 5px 0 5px 22px; }
.doc li::before { content: ""; position: absolute; left: 0; top: 17px; width: 9px; height: 1px; background: var(--second); }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.doc__meta { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 8px; }

.doc__table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; max-width: 76ch; }
.doc__table td { padding: 13px 0; border-top: 1px solid var(--rule); vertical-align: top; font-size: 16.6px; }
.doc__table tr:first-child td { border-top: 0; }
.doc__table td:first-child { width: 32%; padding-right: 24px; font-weight: 500; }

.doc__back { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); }

.foot--doc { padding: 30px 0; }
.foot--doc .foot__bot { margin-top: 0; padding-top: 0; border-top: 0; }
.foot--doc a { color: var(--deep-ink); text-decoration: none; }
.foot--doc a:hover { color: #fff; text-decoration: underline; }

/* согласие в форме заявки */
.agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 20px;
  cursor: pointer;
}
.agree input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin: 1px 0 0;
  border: 1px solid var(--deep-rule);
  border-radius: 3px;
  background: rgba(0,0,0,.22);
  cursor: pointer;
  position: relative;
  transition: background .2s ease, border-color .2s ease;
}
.agree input:checked { background: #fff; border-color: #fff; }
.agree input:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 5px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--deep);
  border-bottom: 2px solid var(--deep);
  transform: rotate(-45deg);
}
.agree input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.agree span { font-size: 14.6px; line-height: 1.45; color: var(--deep-muted); }
.agree a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.form .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* реквизиты в подвале главной */
.foot__legal { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--deep-rule); }
.foot__legal p { font-size: 14.4px; color: var(--deep-muted); max-width: 62ch; margin-bottom: .6em; }
.foot__docs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.foot__docs a { font-size: 14.6px; color: var(--deep-ink); text-decoration: underline; text-underline-offset: 3px; }
.foot__docs a:hover { color: #fff; }

@media (max-width: 860px) {
  .doc { padding: 36px 0 64px; }
  .doc__table td:first-child { width: 42%; padding-right: 14px; }
}

/* ---------- схемы в кейсах и оговорка о составе кейсов (v3.2) ---------- */

.cases__note {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 34px;
  padding: 24px 28px 26px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--second);
  border-radius: 3px;
}
.cases__note .label { padding-top: 4px; }
.cases__note p { font-size: 17px; color: var(--ink-2); margin: 0; max-width: 78ch; }

.scheme { margin: 0 0 30px; }
.scheme svg { width: 100%; height: auto; display: block; }
.scheme figcaption {
  margin-top: 12px;
  font-size: 14.6px;
  color: var(--muted);
  line-height: 1.42;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.scheme--dark figcaption { color: var(--deep-muted); border-top-color: var(--deep-rule); }

.scheme__lbl { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.scheme__tick { font-family: var(--mono); font-size: 11px; }

@media (max-width: 1080px) {
  .cases__note { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 860px) {
  .cases__note { padding: 20px 18px 22px; }
  .scheme { margin-bottom: 24px; }
  .scheme__lbl { font-size: 14px; }   /* на телефоне svg сжимается — компенсируем размер подписей */
  .scheme__tick { font-size: 14px; }
  .scheme figcaption { font-size: 14px; }
}

/* ---------- секция «как устроен разбор»: система + люди (v3.3) ---------- */

.engine {
  background: var(--deep);
  color: var(--deep-ink);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.engine::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(80% 70% at 30% 20%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(80% 70% at 30% 20%, #000, transparent 70%);
}
.engine .wrap { position: relative; }
.engine .label { color: var(--deep-muted); }
.engine h2 { color: #fff; margin-bottom: 18px; }
.engine .lead { color: var(--deep-muted); }
.engine__head { max-width: 62em; margin-bottom: 48px; }
.engine__head .label { display: block; margin-bottom: 16px; }

.engine__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }

/* граф */
.graph svg { width: 100%; height: auto; display: block; }
.graph figcaption {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--deep-rule);
  font-size: 14.6px; color: var(--deep-muted); line-height: 1.42;
}
.graph__links path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: draw 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
.graph__links path:nth-child(2) { animation-delay: .08s; }
.graph__links path:nth-child(3) { animation-delay: .16s; }
.graph__links path:nth-child(4) { animation-delay: .24s; }
.graph__links path:nth-child(5) { animation-delay: .32s; }
.graph__links path:nth-child(6) { animation-delay: .5s; }
.graph__links path:nth-child(7) { animation-delay: .58s; }
.graph__links path:nth-child(8) { animation-delay: .66s; }
.graph__links path:nth-child(9) { animation-delay: .74s; }
.graph__links path:nth-child(10) { animation-delay: .82s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.graph__core circle:first-child { animation: pulse 3.4s ease-in-out infinite; transform-origin: 250px 170px; }
@keyframes pulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .16; transform: scale(1.16); }
}
.graph__src circle { animation: fade .5s ease both; }
.graph__src circle:nth-child(2) { animation-delay: .06s; }
.graph__src circle:nth-child(3) { animation-delay: .12s; }
.graph__src circle:nth-child(4) { animation-delay: .18s; }
.graph__src circle:nth-child(5) { animation-delay: .24s; }
.graph__out circle { animation: fade .5s ease both .9s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* две колонки: система и люди */
.engine__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--deep-rule); border: 1px solid var(--deep-rule); border-radius: 3px; overflow: hidden; }
.engine__col { background: var(--deep-2); padding: 26px 26px 28px; }
.engine__col--human { background: #1F2C48; }
.engine__tag {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--deep-rule);
}
.engine__col--human .engine__tag { color: #9CD46A; }
.engine__col ul { list-style: none; margin: 0; padding: 0; }
.engine__col li {
  position: relative;
  padding: 9px 0 9px 20px;
  font-size: 16px;
  color: var(--deep-muted);
  line-height: 1.46;
}
.engine__col li::before { content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 1px; background: #7CAF3A; }
.engine__col--human li::before { background: #fff; }

/* цифры */
.engine__num { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 52px; padding-top: 34px; border-top: 1px solid var(--deep-rule); }
.engine__num b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 9px;
}
.engine__num div:nth-child(2) b { color: #9CD46A; }
.engine__num span { font-size: 14.8px; color: var(--deep-muted); line-height: 1.4; display: block; max-width: 24ch; }

.engine__note { margin-top: 34px; font-size: 16.4px; color: var(--deep-muted); max-width: 76ch; }

@media (max-width: 1080px) {
  .engine__grid { grid-template-columns: 1fr; gap: 40px; }
  .engine__num { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 860px) {
  .engine { padding: 64px 0; }
  .engine__cols { grid-template-columns: 1fr; }
  .engine__num { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .graph__links path, .graph__src circle, .graph__out circle, .graph__core circle:first-child { animation: none; stroke-dashoffset: 0; opacity: 1; }
}


/* ============================================================
   СКРОЛЛ-АНИМАЦИИ НА НАТИВНОМ CSS (v3.4)
   animation-timeline вместо библиотеки: тот же эффект, ноль килобайт.
   Всё под @supports — где браузер не умеет, страница просто статична.
   ============================================================ */

.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 80;
  background: linear-gradient(90deg, var(--accent), var(--second) 60%, var(--status));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .reading-progress {
    animation-name: progress-grow;
    animation-duration: auto;          /* обязательно auto: длительность задаёт прокрутка */
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-grow { to { transform: scaleX(1); } }
}

/* появление блоков — через наблюдатель в app.js: класс is-in ставится,
   когда элемент реально показался читателю */
.flow, .parts, .scheme, .graph, .engine__num > div {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1);
}
.flow.is-in, .parts.is-in, .scheme.is-in, .graph.is-in, .engine__num > div.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reading-progress { display: none; }
  .flow, .parts, .scheme, .graph, .engine__num > div { transition: none !important; opacity: 1 !important; transform: none !important; }
}


/* ---------- портрет в карточке автора (v3.5) ---------- */

.author__ph picture { display: block; }
.author__ph img { width: 100%; height: auto; display: block; }
.author__ph .author__cap { border-top: 1px solid var(--rule); }

@media (max-width: 860px) {
  .author__ph { max-width: 300px; }
}


/* ---------- обложки пакетов в кейсах (v3.6) ---------- */

.cover { margin: 0 0 26px; }
.cover picture { display: block; }
.cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
  border: 1px solid var(--rule);
}
.cover figcaption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 14.6px;
  color: var(--muted);
  line-height: 1.42;
}
.cover--dark img { border-color: var(--deep-rule); }
.cover--dark figcaption { color: var(--deep-muted); border-top-color: var(--deep-rule); }

@media (max-width: 860px) {
  .cover { margin-bottom: 20px; }
}


/* ---------- компактный перечень работ в кейсах (v3.7) ---------- */

.works {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.works > .label { display: block; margin-bottom: 16px; }
.works__g {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.works__g:last-child { border-bottom: 0; }
.works__g b {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
  padding-top: 2px;
}
.works__g span {
  font-size: 14.4px;
  line-height: 1.5;
  color: var(--muted);
}

.works--dark { border-top-color: var(--deep-rule); }
.works--dark .works__g { border-bottom-color: var(--deep-rule); }
.works--dark .works__g b { color: #fff; }
.works--dark .works__g span { color: var(--deep-muted); }

@media (max-width: 860px) {
  .works__g { grid-template-columns: 1fr; gap: 6px; }
}


/* ---------- живая сеть в тёмной секции (v3.8) ---------- */

.neuro {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.engine .wrap { position: relative; z-index: 1; }

/* курсор в этой секции подсказывает, что она откликается */
@media (hover: hover) {
  .engine { cursor: crosshair; }
  .engine a, .engine button { cursor: pointer; }
}

/* ---------- магнитные кнопки: лёгкое притяжение к курсору ---------- */

.btn { will-change: transform; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn { transition: background .22s ease, border-color .22s ease, color .22s ease, transform .18s cubic-bezier(.2,.8,.3,1); }
}

/* ---------- параллакс кадастровой сетки в первом экране ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero::before {
    transition: transform .5s cubic-bezier(.2,.8,.3,1);
    will-change: transform;
  }
}


/* ---------- наклон обложек к курсору (v3.9) ---------- */

.cover { perspective: 1100px; }
.cover picture {
  display: block;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease;
  will-change: transform;
}
.cover.is-tilt picture {
  transition: transform .12s linear, box-shadow .3s ease;
  box-shadow: 0 26px 50px -30px rgba(19,28,46,.55);
}
/* блик идёт за курсором — обложка читается как физический предмет */
.cover picture::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255,255,255,.22), transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.cover { position: relative; }
.cover picture { position: relative; }
.cover.is-tilt picture::after { opacity: 1; }
.cover--dark.is-tilt picture { box-shadow: 0 26px 50px -28px rgba(0,0,0,.75); }

@media (hover: none) {
  .cover picture { transform: none !important; }
  .cover picture::after { display: none; }
}

/* ============================================================
   ТАЙМЛАЙН «два порядка действий» (v4.0)
   Тёмная врезка вместо плоской диаграммы: сегменты вырастают
   по очереди, по дорожке едет маркер — на медленной он спотыкается
   об остановки, на быстрой проходит ровно.
   ============================================================ */

.tl {
  position: relative;
  margin-top: 56px;
  padding: 38px 38px 32px;
  background: var(--deep);
  border-radius: 4px;
  overflow: hidden;
  color: var(--deep-ink);
}
.tl::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(26,35,126,.55), transparent 60%),
    radial-gradient(90% 70% at 95% 100%, rgba(22,119,110,.35), transparent 60%);
  pointer-events: none;
}
.tl > * { position: relative; }

.tl__head { margin-bottom: 34px; }
.tl__head .label { display: block; margin-bottom: 10px; color: var(--deep-muted); }
.tl__head h3 { color: #fff; font-size: clamp(21px, 2.1vw, 28px); }

.tl__row {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 18px 0;
}
.tl__cap b {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 5px;
}
.tl__cap span {
  display: block;
  font-size: 14.6px;
  line-height: 1.42;
  color: var(--deep-muted);
}

.tl__track {
  position: relative;
  display: flex;
  gap: 4px;
  height: 62px;
  padding: 0;
}

.tl__seg {
  position: relative;
  width: var(--w);
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 3px;
  overflow: hidden;
  min-width: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.2,.8,.3,1), filter .25s ease;
}
.tl.is-live .tl__seg { transform: scaleX(1); }
.tl__row:nth-child(1) .tl__seg:nth-child(1) { transition-delay: .05s; }
.tl__row:nth-child(1) .tl__seg:nth-child(2) { transition-delay: .18s; }
.tl__row:nth-child(1) .tl__seg:nth-child(3) { transition-delay: .31s; }
.tl__row:nth-child(1) .tl__seg:nth-child(4) { transition-delay: .44s; }
.tl__row:nth-child(1) .tl__seg:nth-child(5) { transition-delay: .57s; }
.tl__row:nth-child(2) .tl__seg:nth-child(1) { transition-delay: .75s; }
.tl__row:nth-child(2) .tl__seg:nth-child(2) { transition-delay: .88s; }

.tl__seg i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .4s ease .35s, transform .4s ease .35s;
}
.tl.is-live .tl__seg i { opacity: 1; transform: none; }

/* ожидание — приглушённая штриховка */
.tl__seg--wait {
  background: rgba(255,255,255,.07);
  color: var(--deep-muted);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px);
}
/* работа — фирменный градиент со свечением */
.tl__seg--go {
  background: linear-gradient(100deg, #1A237E, #2B37B8);
  color: #fff;
  box-shadow: 0 0 22px -6px rgba(43,55,184,.9);
}
/* разбор — бирюзовый, он же «правильный старт» */
.tl__seg--check {
  background: linear-gradient(100deg, #16776E, #23A093);
  color: #fff;
  box-shadow: 0 0 22px -6px rgba(35,160,147,.9);
}
/* упор — красная зона с пульсирующей кромкой */
.tl__seg--stop {
  background: rgba(180,87,74,.22);
  color: #E9A79A;
  border: 1px solid rgba(180,87,74,.55);
}
.tl__seg--stop::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 2px;
  background: #B4574A;
}
.tl.is-live .tl__seg--stop::after { animation: stop-pulse 2.4s ease-in-out infinite; }
@keyframes stop-pulse {
  0%, 100% { opacity: .5; box-shadow: none; }
  50%      { opacity: 1; box-shadow: 0 0 12px 1px rgba(180,87,74,.8); }
}

.tl__seg:hover { filter: brightness(1.12); }

/* маркер, который проезжает по дорожке */
.tl__marker {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, #7CAF3A, transparent);
  box-shadow: 0 0 14px 2px rgba(124,175,58,.65);
  opacity: 0;
}
.tl.is-live [data-track="slow"] .tl__marker { animation: run-slow 7.5s cubic-bezier(.4,0,.2,1) 1.1s infinite; }
.tl.is-live [data-track="fast"] .tl__marker { animation: run-fast 7.5s cubic-bezier(.3,0,.2,1) 1.1s infinite; }

/* медленная дорожка: рывок — стоп — рывок — долгий стоп */
@keyframes run-slow {
  0%   { left: 0; opacity: 0; }
  4%   { opacity: 1; }
  18%  { left: 26%; }
  26%  { left: 26%; }         /* уперлись */
  38%  { left: 46%; }
  50%  { left: 46%; }         /* снова стоп */
  62%  { left: 64%; }
  74%  { left: 64%; }
  88%  { left: 78%; }
  96%  { left: 78%; opacity: 1; }
  100% { left: 78%; opacity: 0; }
}
/* быстрая: короткий разбор и ровный ход до конца */
@keyframes run-fast {
  0%   { left: 0; opacity: 0; }
  6%   { opacity: 1; }
  16%  { left: 14%; }
  24%  { left: 14%; }         /* пауза на разбор */
  92%  { left: 100%; }
  97%  { left: 100%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.tl__scale {
  display: flex;
  justify-content: space-between;
  margin-left: 278px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--deep-rule);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--deep-muted);
}

.tl__note {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--deep-rule);
  font-size: 14.6px;
  color: var(--deep-muted);
  max-width: 70ch;
}

@media (max-width: 1080px) {
  .tl { padding: 30px 24px 26px; }
  .tl__row { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
  .tl__scale { margin-left: 220px; }
}

@media (max-width: 860px) {
  .tl { padding: 24px 18px 22px; margin-top: 40px; }
  .tl__row { grid-template-columns: 1fr; gap: 12px; padding: 14px 0; }
  .tl__track { height: 54px; }
  .tl__seg { padding: 0 9px; }
  .tl__seg i { font-size: 11px; }
  .tl__scale { margin-left: 0; }
  .tl__scale span:nth-child(2), .tl__scale span:nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tl__seg { transform: scaleX(1); transition: none; }
  .tl__seg i { opacity: 1; transform: none; transition: none; }
  .tl__marker { display: none; }
  .tl.is-live .tl__seg--stop::after { animation: none; }
}

/* ============================================================
   ЕДИНЫЙ ЯЗЫК ВИЗУАЛИЗАЦИЙ (v4.1)
   Воронка, конвейер и Гант переведены в ту же тёмную врезку,
   что и таймлайн: подсветка, свечение фирменных цветов, движение
   при появлении. Запуск — класс is-live от наблюдателя в app.js.
   ============================================================ */

.viz {
  position: relative;
  padding: 34px 34px 30px;
  background: var(--deep);
  border-radius: 4px;
  overflow: hidden;
  color: var(--deep-ink);
}
.viz::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 75% at 8% 0%, rgba(26,35,126,.5), transparent 60%),
    radial-gradient(85% 65% at 96% 100%, rgba(22,119,110,.32), transparent 62%);
  pointer-events: none;
}
.viz > * { position: relative; }
.viz .label { color: var(--deep-muted); }

/* ---------- воронка проверки идеи ---------- */

.funnel { gap: 18px; }
.viz .funnel__bar {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2B37B8, #23A093 65%, #9CD46A);
  box-shadow: 0 0 20px -6px rgba(43,55,184,.9);
  transform: scaleX(0);
  transform-origin: left center;
  animation: none;
  transition: transform .65s cubic-bezier(.2,.8,.3,1);
}
.viz.is-live .funnel__bar { transform: scaleX(1); }
.viz .funnel__row:nth-child(2) .funnel__bar { transition-delay: .1s; }
.viz .funnel__row:nth-child(3) .funnel__bar { transition-delay: .2s; }
.viz .funnel__row:nth-child(4) .funnel__bar { transition-delay: .3s; }
.viz .funnel__row:nth-child(5) .funnel__bar { transition-delay: .4s; }

.viz .funnel__t b { color: #fff; }
.viz .funnel__t small { color: var(--deep-muted); }
.viz .funnel__row { position: relative; }
/* точка-узел в начале каждой полосы */
.viz .funnel__row::before {
  content: "";
  position: absolute;
  left: -14px; top: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7CAF3A;
  opacity: 0;
  transition: opacity .4s ease .3s;
}
.viz.is-live .funnel__row::before { opacity: .85; }

/* ---------- конвейер пакета ---------- */

.viz .flow {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 0;
  gap: 10px;
}
.viz .flow__i {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--deep-rule);
  border-right: 1px solid var(--deep-rule);
  border-radius: 3px;
  padding: 22px 20px 24px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1), background .25s ease, border-color .25s ease;
}
.viz.is-live .flow__i { opacity: 1; transform: none; }
.viz.is-live .flow__i:nth-child(2) { transition-delay: .09s; }
.viz.is-live .flow__i:nth-child(3) { transition-delay: .18s; }
.viz.is-live .flow__i:nth-child(4) { transition-delay: .27s; }
.viz.is-live .flow__i:nth-child(5) { transition-delay: .36s; }
.viz .flow__i:hover { background: rgba(255,255,255,.08); border-color: rgba(124,175,58,.5); }
.viz .flow__i::after { display: none; }
.viz .flow__n { color: var(--deep-muted); }
.viz .flow__i b { color: #fff; }
.viz .flow__i small { color: var(--deep-muted); }
.viz .flow__i--end { background: rgba(124,175,58,.1); border-color: rgba(124,175,58,.35); }
.viz .flow__i--end b { color: #9CD46A; }

/* импульс, пробегающий по конвейеру */
.viz .flow { position: relative; }
.viz .flow::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,175,58,.9), transparent);
  width: 34%;
  opacity: 0;
}
.viz.is-live .flow::after { animation: flow-pulse 5.5s cubic-bezier(.4,0,.3,1) 1s infinite; }
@keyframes flow-pulse {
  0%   { transform: translateX(-40%); opacity: 0; }
  10%  { opacity: 1; }
  85%  { transform: translateX(300%); opacity: 1; }
  100% { transform: translateX(320%); opacity: 0; }
}

/* ---------- Гант этапов ---------- */

.viz .gantt { border-top-color: var(--deep-rule); }
.viz .gantt__row { border-bottom-color: var(--deep-rule); }
.viz .gantt__t b { color: #fff; }
.viz .gantt__t span { color: var(--deep-muted); }
.viz .gantt__line {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 25%);
  border-radius: 3px;
}
.viz .gantt__bar {
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: none;
  transition: transform .6s cubic-bezier(.2,.8,.3,1), filter .25s ease;
  background: linear-gradient(100deg, #3D4753, #5A6472);
  box-shadow: 0 0 18px -8px rgba(255,255,255,.5);
}
.viz.is-live .gantt__bar { transform: scaleX(1); }
.viz .gantt__bar--2 { background: linear-gradient(100deg, #1A237E, #2B37B8); box-shadow: 0 0 20px -6px rgba(43,55,184,.9); transition-delay: .12s; }
.viz .gantt__bar--3 { background: linear-gradient(100deg, #16776E, #23A093); box-shadow: 0 0 20px -6px rgba(35,160,147,.9); transition-delay: .24s; }
.viz .gantt__bar--4 { background: linear-gradient(100deg, #6B9C33, #9CD46A); box-shadow: 0 0 20px -6px rgba(124,175,58,.9); transition-delay: .36s; }
.viz .gantt__bar:hover { filter: brightness(1.12); }
.viz .gantt__scale { color: var(--deep-muted); }

@media (max-width: 860px) {
  .viz { padding: 24px 18px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .viz .funnel__bar, .viz .gantt__bar { transform: scaleX(1); transition: none; }
  .viz .flow__i { opacity: 1; transform: none; transition: none; }
  .viz.is-live .flow::after { animation: none; }
  .viz .funnel__row::before { opacity: .85; transition: none; }
}


/* ---------- первая колонка кейса 2 (v4.2) ---------- */
.case2__main { min-width: 0; }

/* ---------- как проходит первый разговор (v4.3) ---------- */

.meet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.meet__step {
  padding: 28px 26px 30px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  border-radius: 3px;
}
.meet__step:nth-child(2) { border-top-color: var(--second); }
.meet__step:nth-child(3) { border-top-color: var(--status); }
.meet__n {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}
.meet__step b {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-bottom: 10px;
}
.meet__step p { font-size: 16.4px; color: var(--ink-2); margin: 0; }

.meet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.meet__foot p { margin: 0; font-size: 16.4px; color: var(--muted); max-width: 62ch; }

@media (max-width: 1080px) {
  .meet { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 860px) {
  .meet__foot .btn { width: 100%; justify-content: center; }
}

/* ---------- раскрывающиеся блоки: суть видна, детали по клику (v4.4) ---------- */

.fold {
  margin: 26px 0 0;
  border-top: 1px solid var(--rule);
}
.fold > summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold__t {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.fold__n {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color .2s ease;
}
.fold__n::after { content: " +"; }
.fold[open] .fold__n::after { content: " –"; }
.fold[open] .fold__n { color: var(--accent); }
.fold > summary:hover .fold__t { color: var(--accent); }
.fold > summary:hover .fold__n { color: var(--accent); }
.fold__body { padding-bottom: 8px; animation: fold-in .35s ease both; }
@keyframes fold-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fold__body > .works { margin-top: 0; padding-top: 0; border-top: 0; }

.fold--dark { border-top-color: var(--deep-rule); }
.fold--dark .fold__t { color: #fff; }
.fold--dark .fold__n { color: var(--deep-muted); }
.fold--dark > summary:hover .fold__t,
.fold--dark > summary:hover .fold__n { color: #9CD46A; }
.fold--dark[open] .fold__n { color: #9CD46A; }

@media (prefers-reduced-motion: reduce) {
  .fold__body { animation: none; }
}

/* ---------- карточки кейсов на главной (v4.5) ---------- */

.ccards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ccard {
  display: block;
  padding: 0 0 24px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.ccard:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 26px 46px -38px rgba(26,35,126,.85);
}
.ccard picture { display: block; border-bottom: 1px solid var(--rule); }
.ccard img { width: 100%; height: auto; display: block; }
.ccard__n {
  display: inline-block;
  margin: 22px 26px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 2px;
}
.ccard b {
  display: block;
  margin: 0 26px 8px;
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 25px);
  font-weight: 600;
  letter-spacing: -.015em;
}
.ccard small { display: block; margin: 0 26px 16px; font-size: 16.2px; line-height: 1.5; color: var(--ink-2); }
.ccard__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 26px;
  font-size: 15.5px;
  color: var(--accent);
}
.ccard__go::after { content: "→"; transition: transform .28s cubic-bezier(.4,0,.2,1); }
.ccard:hover .ccard__go::after { transform: translateX(5px); }

@media (max-width: 860px) {
  .ccards { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- строки пакета: описание по клику (v4.6) ---------- */

.reg__i { grid-template-columns: 76px minmax(0, 1fr); }
.reg__fold { grid-column: 2; }
.reg__fold > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0;
  transition: color .2s ease;
}
.reg__fold > summary::-webkit-details-marker { display: none; }
.reg__fold > summary::after { content: " +"; }
.reg__fold[open] > summary::after { content: " –"; }
.reg__fold > summary:hover { color: var(--accent); }
.reg__fold[open] > summary { color: var(--accent); }
.reg__fold .reg__d { padding-top: 10px; }

@media (max-width: 1080px) {
  .reg__fold { grid-column: 2; }
}
@media (max-width: 860px) {
  .reg__i { grid-template-columns: 58px minmax(0, 1fr); }
}

/* ---------- плотность: страница должна вести к разговору, а не листаться (v4.7) ---------- */

.sec { padding: 76px 0; }
.sec--tight { padding: 58px 0; }
.sec__head { margin-bottom: 34px; }

/* строки пакета: заголовок и ссылка-раскрытие в одну компактную строку */
.reg__i { padding: 14px 0; align-items: center; }
.reg__t .label { display: none; }
.reg__t h3 { margin-bottom: 0; }
.reg__fold > summary { padding: 2px 0; }

/* карточки отдельных работ */
.svc__i { min-height: 0; padding: 22px 22px 20px; }
.svc__i .num { margin-bottom: 12px; }

/* тарифы */
.tier { padding: 24px 22px 22px; }
.tier ul { margin-bottom: 20px; }
.tier li { padding: 8px 0 8px 20px; }
.tier li::before { top: 17px; }
.tier__top { margin-bottom: 14px; }

/* блок автора и методология */
.author blockquote { margin-bottom: 16px; }
.meet__step { padding: 22px 22px 24px; }

@media (max-width: 860px) {
  .sec { padding: 52px 0; }
  .sec--tight { padding: 42px 0; }
}

/* ---------- таймлайн: чужой путь против нашего (v4.8) ---------- */

.tl__row { position: relative; padding: 22px 0 22px 18px; }
/* полоса слева задаёт принадлежность дорожки */
.tl__row::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 3px;
  border-radius: 2px;
}
.tl__row[data-track="slow"]::before { background: #B4574A; }
.tl__row[data-track="fast"]::before { background: #7CAF3A; }

.tl__badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
}
.tl__badge--bad { color: #E9A79A; background: rgba(180,87,74,.22); border: 1px solid rgba(180,87,74,.5); }
.tl__badge--good { color: #1E2B10; background: #9CD46A; }

.tl__cap b { margin-bottom: 6px; }
.tl__desc { display: block; font-size: 14.6px; line-height: 1.42; color: var(--deep-muted); margin-bottom: 12px; }
.tl__sum {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  padding-top: 10px;
  border-top: 1px solid var(--deep-rule);
}
.tl__sum--bad { color: #E9A79A; }
.tl__sum--good { color: #9CD46A; }

/* чужой путь приглушён: он не должен выглядеть так же привлекательно, как наш */
.tl__row[data-track="slow"] .tl__track { opacity: .78; filter: saturate(.55); }
.tl__row[data-track="slow"] .tl__seg--go { box-shadow: none; }
.tl__row[data-track="slow"] .tl__seg { border-radius: 2px; }

/* наш путь — в полную силу */
.tl__row[data-track="fast"] .tl__track { opacity: 1; }
.tl__row[data-track="fast"] .tl__seg--go { box-shadow: 0 0 26px -6px rgba(43,55,184,.95); }

/* красные зоны читаются как потеря, а не как этап */
.tl__seg--stop {
  background: repeating-linear-gradient(135deg, rgba(180,87,74,.26) 0 7px, rgba(180,87,74,.14) 7px 14px);
}

@media (max-width: 860px) {
  .tl__row { padding-left: 14px; }
  .tl__sum { font-size: 13px; }
}

/* ---------- методология: свёрнутые источники не должны висеть в пустой колонке (v4.9) ---------- */

.method { display: block; }
.method > div { max-width: 74ch; }
.method .fold { margin-top: 30px; }
.method .fold__body { max-width: none; }
.method .srcs { max-width: none; }

/* ---------- конфиденциальность как условие работы (v4.9) ---------- */

.nda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 40px;
  align-items: start;
  padding: 30px 32px 32px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
}
.nda__head .label { display: block; margin-bottom: 12px; }
.nda__head b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.18;
}
.nda ul { list-style: none; margin: 0; padding: 0; }
.nda li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 16.6px;
  color: var(--ink-2);
}
.nda li:last-child { border-bottom: 0; }
.nda li::before {
  content: "";
  position: absolute;
  left: 2px; top: 19px;
  width: 11px; height: 6px;
  border-left: 1.6px solid var(--second);
  border-bottom: 1.6px solid var(--second);
  transform: rotate(-45deg);
}

@media (max-width: 860px) {
  .nda { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px 24px; }
}

/* ---------- ярлыки дорожек: цвет перебивался правилом .tl__cap span (v5.0) ---------- */

.tl__cap .tl__badge { font-weight: 500; }
.tl__cap .tl__badge--bad { color: #F0B5A8; background: rgba(180,87,74,.28); border: 1px solid rgba(180,87,74,.6); }
.tl__cap .tl__badge--good { color: #14210A; background: #A8DC78; border: 1px solid #A8DC78; }
.tl__cap .tl__sum--bad { color: #F0B5A8; }
.tl__cap .tl__sum--good { color: #A8DC78; }
.tl__cap .tl__desc { color: var(--deep-muted); }

/* плашка «как обычно» на тёмном фоне была слишком бледной (v5.0.1) */
.tl__cap .tl__badge--bad { color: #FFD8CE; background: rgba(180,87,74,.5); border-color: rgba(214,120,105,.75); }

/* v5.1 — значения-триггеры в кейсах.
   «4 → 0», «±40 → ±10», «1 блокер» на кегле 40–42px переносятся и ломают
   двухколоночную сетку, поэтому такие значения сбавляют размер и не переносятся. */
.case__kpi div span.k--long,
.case2__kpi b.k--long,
.case3__kpi b.k--long { font-size: 29px; white-space: nowrap; letter-spacing: -0.01em; }

@media (max-width: 700px) {
  .case__kpi div span.k--long,
  .case2__kpi b.k--long,
  .case3__kpi b.k--long { font-size: 24px; }
}

/* Главная цифра в карточке кейса на витрине: покупатель видит суть до перехода.
   Цифра моноширинным, пояснение — обычным, обе части в одну строку с переносом. */
.ccard__fig {
  display: block;
  margin: -1px 26px 12px;   /* боковые 26px — как у .ccard b и .ccard small, иначе прилипнет к краю */
  font-size: 14.4px;
  line-height: 1.42;
  color: var(--muted);
}
.ccard__fig i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
  display: inline-block;
  margin-right: 9px;
  vertical-align: -1px;
  white-space: nowrap;
}

/* v5.2 — карточка кейса: пара «было — стало».
   Одна цифра без пары не читалась: непонятно, много это или мало и что изменила работа. */
.ccard__ba {
  display: grid;
  gap: 7px;
  margin: 2px 26px 16px;
}
.ccard__ba > span {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
  padding-left: 62px;
  position: relative;
}
.ccard__ba > span i {
  position: absolute;
  left: 0;
  top: 3px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* «Стало» — акцентной линией слева, чтобы взгляд отделял результат от исходной точки */
.ccard__ba > span:last-child {
  color: var(--ink);
  border-left: 2px solid var(--accent);
  margin-left: -12px;
  padding-left: 72px;
}
.ccard__ba > span:last-child i { left: 12px; color: var(--accent); }

@media (max-width: 620px) {
  .ccard__ba { margin: 2px 20px 14px; }
  .ccard__ba > span { padding-left: 54px; font-size: 14.4px; }
  .ccard__ba > span:last-child { padding-left: 64px; }
}

/* Портрет снят так, что автор смотрит влево — от текста и края страницы.
   Отражаем по горизонтали: взгляд уходит в разворот, к тексту справа. */
.author__ph img { transform: scaleX(-1); }

/* v5.3 — «Было / Стало» внутри кейса. Показывает не объём выданных документов,
   а смену состояния дела: что было на входе и что стало понятно на выходе. */
.sba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 26px 0 30px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.sba > div { padding: 20px 22px 22px; }
.sba > div:first-child { background: rgba(0,0,0,.018); border-right: 1px solid var(--rule); }
.sba > div:last-child { border-left: 2px solid var(--accent); margin-left: -1px; }
.sba i {
  display: block;
  margin-bottom: 9px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sba > div:last-child i { color: var(--accent); }
.sba span { display: block; font-size: 16px; line-height: 1.52; color: var(--ink-2); }
.sba > div:last-child span { color: var(--ink); }

@media (max-width: 760px) {
  .sba { grid-template-columns: 1fr; }
  .sba > div:first-child { border-right: 0; border-bottom: 1px solid var(--rule); }
  .sba > div:last-child { margin-left: 0; border-left-width: 2px; }
  .sba span { font-size: 15.4px; }
}

/* Кейс 01 идёт тёмной секцией, а .sba собран под светлый фон — там его цвета
   давали 1.0–1.8:1, текст пропадал. Внутри .case берём палитру тёмного контекста. */
.case .sba { border-color: var(--deep-rule, rgba(255,255,255,.14)); }
.case .sba > div:first-child { background: rgba(255,255,255,.035); border-right-color: var(--deep-rule, rgba(255,255,255,.14)); }
.case .sba > div:last-child { border-left-color: #9CD46A; }
.case .sba i { color: var(--deep-muted); }
.case .sba > div:last-child i { color: #9CD46A; }
.case .sba span { color: var(--deep-muted); }
.case .sba > div:last-child span { color: var(--deep-ink); }