/* Блоки городских страниц: разбор выдачи, ниши региона, аудит.
   Выделены из seo-bryansk.html 14.08.2026. Извлечение с учётом вложенности:
   правила внутри @media остаются внутри @media. Первая версия вытащила их
   наружу — и безусловное grid-template-columns:1fr перебивало сетку из 4
   колонок, карточки вставали в столбик. */

/* ─── общая карточка блоков Брянска ─── */
.bsc{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 30px;overflow:hidden;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}

.bsc:hover{transform:translateY(-3px);border-color:rgba(10,138,85,.28);
  box-shadow:0 26px 54px -32px rgba(10,138,85,.45)}

.bsc__ic{width:44px;height:44px;border-radius:var(--radius-md);background:var(--neon-dim);
  border:1px solid rgba(10,138,85,.20);color:var(--neon);display:flex;align-items:center;justify-content:center;margin-bottom:20px}

.bsc__ic svg{width:21px;height:21px}

.bsc__t{font-size:17.5px;font-weight:750;color:var(--text-0);margin:0 0 9px;line-height:1.3}

.bsc__p{font-size:14.8px;color:var(--text-1);line-height:1.62;margin:0}

.bsc__ghost{position:absolute;right:18px;top:6px;font-size:88px;font-weight:800;line-height:1;
  color:var(--text-0);opacity:.045;letter-spacing:-.04em;pointer-events:none}


/* ─── 1. показатели ─── */
.bs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1140px;margin:0 auto 26px}

.bs-stat{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px 24px;overflow:hidden;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}

.bs-stat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--neon),var(--neon-bright));transform:scaleX(.28);transform-origin:left;transition:transform .35s ease}

.bs-stat:hover{transform:translateY(-3px);border-color:rgba(10,138,85,.28);box-shadow:0 24px 50px -30px rgba(10,138,85,.45)}

.bs-stat:hover::before{transform:scaleX(1)}

.bs-stat__k{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;color:var(--text-3);margin-bottom:14px}

.bs-stat__k i{width:6px;height:6px;border-radius:50%;background:var(--neon);display:block}

.bs-stat__v{font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.05;
  background:linear-gradient(120deg,var(--neon) 10%,var(--neon-bright));-webkit-background-clip:text;background-clip:text;color:transparent}

.bs-stat__l{margin-top:11px;font-size:13.8px;color:var(--text-2);line-height:1.5}


/* ─── 2. находки ─── */
.bs-find{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1140px;margin:0 auto}

.bs-note{max-width:1140px;margin:24px auto 0;font-size:13.2px;color:var(--text-3);line-height:1.55;
  padding-left:16px;border-left:2px solid var(--line-strong)}


/* ─── 3. что потребуется ─── */
.bs-need{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1140px;margin:0 auto}

.bs-need .bsc{padding:28px 26px}


/* ─── 4. ниши ─── */
.bs-niches{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1140px;margin:0 auto}

.bs-niche{display:flex;flex-direction:column}

.bs-niche__top{display:flex;align-items:center;gap:14px;margin-bottom:18px}

.bs-niche__chip{display:inline-flex;align-items:baseline;gap:6px;background:var(--amber-dim);
  border:1px solid rgba(223,86,48,.22);border-radius:var(--radius-pill);padding:7px 15px}

.bs-niche__num{font-size:19px;font-weight:800;color:var(--amber);letter-spacing:-.02em}

.bs-niche__unit{font-size:12px;font-weight:650;color:var(--amber)}

.bs-niche__ic{width:38px;height:38px;border-radius:10px;background:var(--neon-dim);
  border:1px solid rgba(10,138,85,.2);color:var(--neon);display:flex;align-items:center;justify-content:center}

.bs-niche__ic svg{width:19px;height:19px}

.bs-niche__a{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:750;
  color:var(--neon);text-decoration:none;align-self:flex-start}

.bs-niche__a span{transition:transform .22s ease;display:inline-block}

.bs-niche__a:hover span{transform:translateX(4px)}


/* ─── 5. аудит ─── */
.bs-audit{display:grid;grid-template-columns:1.25fr .9fr;gap:24px;max-width:1140px;margin:0 auto;align-items:start}

.bs-audit__list{position:relative;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:12px 30px 18px}

.bs-audit__row{display:grid;grid-template-columns:38px 1fr;gap:16px;padding:19px 0;border-bottom:1px solid var(--line)}

.bs-audit__row:last-child{border-bottom:none}

.bs-audit__n{width:30px;height:30px;border-radius:50%;background:var(--neon-dim);border:1px solid rgba(10,138,85,.22);
  color:var(--neon);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}

.bs-audit__t{font-size:16px;font-weight:750;color:var(--text-0);margin:0 0 5px}

.bs-audit__p{font-size:14.5px;color:var(--text-1);line-height:1.58;margin:0}

.bs-audit__card{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:32px 30px;
  background:linear-gradient(165deg,#16242f 0%,#0b141c 100%);color:#fff;
  box-shadow:0 30px 70px -40px rgba(10,138,85,.75)}

.bs-audit__card::before{content:"";position:absolute;width:280px;height:280px;right:-120px;top:-140px;border-radius:50%;
  background:radial-gradient(circle,rgba(10,138,85,.45),transparent 70%);pointer-events:none}

.bs-audit__tag{position:relative;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:750;color:var(--neon-bright);background:rgba(63,174,125,.12);
  border:1px solid rgba(63,174,125,.28);border-radius:var(--radius-pill);padding:6px 12px}

.bs-audit__price{position:relative;font-size:31px;font-weight:800;margin:14px 0 6px;letter-spacing:-.025em}

.bs-audit__sub{position:relative;font-size:13.8px;color:rgba(255,255,255,.68);line-height:1.58;margin:0}

.bs-audit__hr{position:relative;height:1px;background:rgba(255,255,255,.13);margin:24px 0}

.bs-audit__btn{position:relative;margin-top:22px;display:inline-flex;align-items:center;gap:9px;background:var(--neon);
  color:#fff;text-decoration:none;font-weight:750;font-size:14.5px;padding:13px 22px;border-radius:var(--radius-pill);
  transition:background .2s ease,transform .2s ease}

.bs-audit__btn:hover{background:var(--neon-bright);transform:translateY(-2px)}


/* ─── 6. боль → ответ ─── */
.bs-vs{max-width:1140px;margin:0 auto;display:grid;gap:16px}

.bs-vs__row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  transition:box-shadow .24s ease,border-color .24s ease}

.bs-vs__row:hover{border-color:rgba(10,138,85,.25);box-shadow:0 24px 50px -34px rgba(10,138,85,.4)}

.bs-vs__c{background:var(--bg-2);padding:26px 28px}

.bs-vs__c--bad{background:linear-gradient(180deg,rgba(223,86,48,.055),rgba(223,86,48,.02))}

.bs-vs__h{display:flex;align-items:center;gap:11px;margin-bottom:13px}

.bs-vs__b{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}

.bs-vs__b svg{width:16px;height:16px}

.bs-vs__b--bad{background:var(--amber-dim);border:1px solid rgba(223,86,48,.25);color:var(--amber)}

.bs-vs__b--good{background:var(--neon-dim);border:1px solid rgba(10,138,85,.25);color:var(--neon)}

.bs-vs__l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:750}

.bs-vs__l--bad{color:var(--amber)}

.bs-vs__l--good{color:var(--neon)}

.bs-vs__t{font-size:16.5px;font-weight:750;color:var(--text-0);margin:0 0 7px;line-height:1.3}

.bs-vs__p{font-size:14.5px;color:var(--text-1);line-height:1.58;margin:0}


/* ─── 7. доказательства ─── */
.bs-proof{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1140px;margin:0 auto}

.bs-proof__i{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 22px;overflow:hidden;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}

.bs-proof__i::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--neon),var(--neon-bright))}

.bs-proof__i:hover{transform:translateY(-4px);border-color:rgba(10,138,85,.28);box-shadow:0 24px 50px -30px rgba(10,138,85,.45)}

.bs-proof__ic{width:40px;height:40px;border-radius:11px;background:var(--neon-dim);border:1px solid rgba(10,138,85,.2);
  color:var(--neon);display:flex;align-items:center;justify-content:center;margin-bottom:16px}

.bs-proof__ic svg{width:19px;height:19px}

.bs-proof__t{font-size:15.5px;font-weight:750;color:var(--text-0);margin:0 0 7px;line-height:1.3}

.bs-proof__p{font-size:13.4px;color:var(--text-2);line-height:1.55;margin:0}


/* ─── 8. рыночный контекст в тарифах ─── */
.bs-mkt{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:26px auto 0}

.bs-mkt__i{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 22px 20px;text-align:left}

.bs-mkt__i--own{border-color:rgba(10,138,85,.28);background:linear-gradient(180deg,rgba(10,138,85,.05),var(--bg-2) 60%)}

.bs-mkt__k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;color:var(--text-3);margin-bottom:10px}

.bs-mkt__i--own .bs-mkt__k{color:var(--neon)}

.bs-mkt__v{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--text-0);line-height:1.1}

.bs-mkt__p{margin:9px 0 0;font-size:13.6px;color:var(--text-2);line-height:1.55}

.bs-mkt__note{max-width:960px;margin:16px auto 0;font-size:13.2px;color:var(--text-3);line-height:1.55;text-align:left}



/* ═══ ГРАФИКА ═══ */
.bs-fig{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 30px;max-width:1140px;margin:0 auto 18px}

.bs-fig__h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}

.bs-fig__t{font-size:15.5px;font-weight:750;color:var(--text-0);margin:0}

.bs-fig__s{font-size:12.5px;color:var(--text-3)}


/* — состав выдачи — */
.bs-serp{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}

.bs-serp__c{position:relative;height:66px;border-radius:10px;display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:8px;font-size:11px;font-weight:750;transition:transform .2s ease}

.bs-serp__c:hover{transform:translateY(-3px)}

.bs-serp__c--fed{background:linear-gradient(180deg,rgba(10,138,85,.16),rgba(10,138,85,.08));
  border:1px solid rgba(10,138,85,.28);color:var(--neon)}

.bs-serp__c--agg{background:linear-gradient(180deg,rgba(223,86,48,.16),rgba(223,86,48,.07));
  border:1px solid rgba(223,86,48,.28);color:var(--amber)}

.bs-legend{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:18px}

.bs-legend__i{display:inline-flex;align-items:center;gap:9px;font-size:13.2px;color:var(--text-1)}

.bs-legend__d{width:11px;height:11px;border-radius:3px;flex:none}

.bs-legend__d--fed{background:var(--neon)}

.bs-legend__d--agg{background:var(--amber)}

.bs-legend__d--none{background:var(--line-strong)}


/* — сроки — */
.bs-bars{display:grid;gap:16px}

.bs-bar__top{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:8px}

.bs-bar__n{font-weight:700;color:var(--text-0)}

.bs-bar__v{font-weight:750;color:var(--text-2)}

.bs-bar__track{height:14px;border-radius:var(--radius-pill);background:var(--bg-3);overflow:hidden}

.bs-bar__fill{height:100%;border-radius:var(--radius-pill)}

.bs-bar__fill--us{background:linear-gradient(90deg,var(--neon),var(--neon-bright))}

.bs-bar__fill--msk{background:linear-gradient(90deg,#c9d3db,#aab6c0)}


/* — ценовая шкала — */
.bs-scale__row{margin-bottom:40px}

.bs-scale__row:last-child{margin-bottom:6px}

.bs-scale__lbl{font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:34px}

.bs-scale__lbl--own{color:var(--neon)}

.bs-scale__rail{position:relative;height:10px;border-radius:var(--radius-pill);background:var(--bg-3)}

.bs-scale__span{position:absolute;top:0;height:100%;border-radius:var(--radius-pill)}

.bs-scale__span--mkt{background:linear-gradient(90deg,#cdd7df,#aeb9c3)}

.bs-scale__span--own{background:linear-gradient(90deg,var(--neon),var(--neon-bright))}

.bs-scale__pt{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:#fff;
  border:3px solid var(--neon);transform:translate(-50%,-50%);box-shadow:0 3px 10px -2px rgba(10,138,85,.5)}

.bs-scale__pt--mkt{border-color:#9aa6b1;box-shadow:none}

.bs-scale__v{position:absolute;bottom:20px;transform:translateX(-50%);white-space:nowrap;
  font-size:13.5px;font-weight:800;color:var(--text-0);letter-spacing:-.01em}

.bs-scale__v--own{color:var(--neon)}

.bs-scale__key{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px}

.bs-scale__key i{width:9px;height:9px;border-radius:50%;flex:none;margin-right:8px;display:inline-block}

.bs-scale__key i.own{background:var(--neon)}

.bs-scale__key i.mkt{background:#9aa6b1}

.bs-scale__key div{display:flex;align-items:center;font-size:13.2px;color:var(--text-1)}

.bs-scale__key b{font-weight:750;color:var(--text-0);margin-right:6px}


/* — воронка — */
.bs-funnel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:center}

.bs-funnel__s{position:relative;border-radius:var(--radius-md);padding:18px 20px;text-align:center;
  background:linear-gradient(180deg,rgba(10,138,85,.13),rgba(10,138,85,.05));border:1px solid rgba(10,138,85,.22)}

.bs-funnel__s--2{margin:0 8%;background:linear-gradient(180deg,rgba(10,138,85,.2),rgba(10,138,85,.08))}

.bs-funnel__s--3{margin:0 16%;background:linear-gradient(180deg,rgba(10,138,85,.3),rgba(10,138,85,.12))}

.bs-funnel__k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;color:var(--neon);margin-bottom:7px}

.bs-funnel__t{font-size:14.5px;font-weight:700;color:var(--text-0);line-height:1.35}
@media (max-width:640px){

  .bs-serp{grid-template-columns:repeat(4,1fr)}

  .bs-funnel{grid-template-columns:1fr}

  .bs-funnel__s--2,.bs-funnel__s--3{margin:0}

  .bs-fig{padding:22px 20px}

  .bs-scale__cap{font-size:11px}
}
@media (max-width:960px){

  .bs-stats{grid-template-columns:repeat(2,1fr)}

  .bs-need{grid-template-columns:repeat(2,1fr)}

  .bs-proof{grid-template-columns:repeat(3,1fr)}

  .bs-audit{grid-template-columns:1fr}
}
@media (max-width:640px){

  .bs-stats,.bs-find,.bs-need,.bs-niches,.bs-proof,.bs-mkt{grid-template-columns:1fr}

  .bs-vs__row{grid-template-columns:1fr}

  .bsc{padding:26px 22px}

  .bsc__ghost{font-size:68px}
}


/* Шаги аудита. Сначала это были три заливки-коробки разной высоты
   с отступами 8%/16% — читалось как небрежность. Потом коробки выровняла,
   но они всё равно оставались тремя тяжёлыми плашками ради трёх коротких
   фраз.

   Теперь без коробок: тонкая линия с точками — обычный степпер. Заливки,
   рамки и шевроны сняты, вес держат только точка и типографика. */
.bs-funnel {
  position: relative; gap: 26px; align-items: stretch; padding: 0;
  grid-template-columns: repeat(3, 1fr);
}

/* Линия с шагами и иконками. Прошлая версия провалилась на том, что
   сквозная линия задавалась в процентах (16.66%) и её концы не совпадали
   с центрами крайних маркеров — она обрывалась в воздухе.

   Теперь линия не сквозная: каждый шаг, кроме последнего, сам тянет
   отрезок от правого края своего маркера до левого края следующего.
   Отрезок уходит в междуколонник отрицательным right, поэтому стыкуется
   с соседним маркером точно, при любой ширине колонки. */
/* Читалось тяжело: три коротких фразы были растянуты на 1140px, иконка
   стояла НАД своим текстом, а выравнивание скакало (лево / центр / право).
   Глаз проходил всю ширину и по дороге терял связь маркера с подписью.

   Теперь каждый шаг — плотная пара «иконка + текст рядом», выравнивание
   у всех одно. Длинная линия убрана: она занимала всю ширину, но ничего
   не сообщала. Последовательность держат тонкие разделители между
   колонками и нарастание самих маркеров. */
.bs-funnel::before { content: none; }

.bs-funnel__s {
  background: none; margin: 0; border: none; position: relative;
  display: grid; grid-template-columns: 38px 1fr;
  column-gap: 14px; align-items: center; align-content: center;
  text-align: left; padding: 2px 28px;
}

.bs-funnel__s:first-child { padding-left: 0; }

.bs-funnel__s:last-child { padding-right: 0; }

.bs-funnel__s + .bs-funnel__s { border-left: 1px solid var(--line); }

.bs-funnel__s::before { content: none; }

.bs-funnel__s--2, .bs-funnel__s--3 { background: none; }


.bs-funnel__ic {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-0); border: 2px solid rgba(10, 138, 85, .3);
  color: var(--neon); flex: none;
  /* иконка держит обе строки текста слева от них */
  grid-row: 1 / span 2; align-self: center; margin: 0;
}

.bs-funnel__ic svg { width: 18px; height: 18px; }

/* нарастание к результату: последний шаг — залитый */
.bs-funnel__s--2 .bs-funnel__ic { border-color: rgba(10, 138, 85, .55); }

.bs-funnel__s--3 .bs-funnel__ic {
  background: var(--neon); border-color: var(--neon); color: #fff;
}


.bs-funnel__s:not(:last-child)::after { content: none; }

.bs-funnel__k { grid-column: 2; margin-bottom: 3px; }

.bs-funnel__t { grid-column: 2; font-size: 15px; line-height: 1.35; }


/* Степпер вынут из белой карточки: в секции и без того три вложенных
   блока подряд, и коробка вокруг трёх фраз только утяжеляла структуру.
   Модификатор, а не .bs-fig целиком — на странице ещё два таких блока
   (выдача и сроки), их карточки нужны. */
.bs-fig--bare {
  background: none; border: none; padding: 0;
  /* блок без карточки — его нижняя граница ничем не обозначена, поэтому
     воздуха под ним нужно больше, чем между обычными карточками */
  margin-bottom: 48px;
}

/* обводка точки маскирует линию под собой, поэтому её цвет обязан
   совпадать с тем, что теперь позади, — это фон секции, не карточки */
.bs-fig--bare .bs-funnel__s::before { border-color: var(--bg-0); }


/* Блок «Работаем в Брянске»: убрана градиентная плашка 3 px над карточками,
   последняя залита тем же светло-зелёным, что и выделенная карточка
   в блоке «ловушек» — rgba(10,138,85,.07) с бордюром .22. */
.bs-proof__i::before { content: none; }

.bs-proof__i:last-child {
  background: rgba(10, 138, 85, .07) !important;
  border-color: rgba(10, 138, 85, .22) !important;
}

.promo-scale-row .bs-fig.bs-scale {
  order: 1; margin: 0; max-width: none;
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 960px){

  .promo-scale-row .promo, .promo-scale-row .bs-fig.bs-scale { order: initial; }
}


.bs-scale2 { margin-top: 4px; }

.bs-scale2__ends {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  color: var(--text-3); margin-bottom: 10px;
}

.bs-scale2__track {
  position: relative; height: 14px;
  border-radius: var(--radius-pill); background: var(--bg-3);
}

.bs-scale2__own {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--neon), var(--neon-bright));
  border-radius: var(--radius-pill);
}

.bs-scale2__cap {
  margin: 14px 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.5;
}

.bs-scale2__cap b { color: var(--text-0); font-weight: 750; }


/* Две карточки разбора выдачи. Были две плоские широкие полосы друг под
   другом — растянуто на всю ширину ради 6 против 1 и двух диапазонов,
   и обе занимали лишнюю высоту. Сведены в один ряд и переделаны
   в нормальную графику. */
.bs-figrow {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 1140px; margin: 0 auto 18px;
}

.bs-figrow .bs-fig { margin: 0; max-width: none; display: flex; flex-direction: column; }
@media (max-width: 960px){
 .bs-figrow { grid-template-columns: 1fr; gap: 14px; }
}


/* Состав выдачи — пончик вместо полосы. Доля читается формой, а в центре
   стоит главный вывод раздела: местных студий в топе ноль. */
.bs-donut { display: flex; align-items: center; gap: 26px; margin-top: auto; }

.bs-donut__svg { width: 128px; height: 128px; flex: none; transform: rotate(-90deg); }

.bs-donut__bg { fill: none; stroke: var(--bg-3); stroke-width: 14; }

.bs-donut__arc { fill: none; stroke-width: 14; stroke-linecap: butt; }

.bs-donut__arc--fed { stroke: var(--neon); }

.bs-donut__arc--agg { stroke: var(--amber); }

.bs-donut__num, .bs-donut__cap {
  transform: rotate(90deg); transform-origin: 60px 60px;
  text-anchor: middle; fill: var(--text-0);
}

.bs-donut__num { font-family: var(--font-display); font-size: 30px; font-weight: 800; }

.bs-donut__cap { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text-3); }

.bs-donut__key { display: flex; flex-direction: column; gap: 11px; min-width: 0; }

.bs-donut__i { display: flex; align-items: baseline; gap: 9px; font-size: 13.2px; color: var(--text-2); line-height: 1.4; }

.bs-donut__i b { color: var(--text-0); font-weight: 750; }

.bs-donut__d { width: 10px; height: 10px; border-radius: 3px; flex: none; transform: translateY(1px); }

.bs-donut__d--fed { background: var(--neon); }

.bs-donut__d--agg { background: var(--amber); }

.bs-donut__d--none { background: var(--line-strong); }


/* Сроки — общая шкала месяцев вместо двух полос от нуля. Раньше Москва
   рисовалась на 100% ширины, и длинная полоса читалась как «лучше»,
   хотя это дольше. Теперь оба диапазона стоят на одной оси 0–6 месяцев
   в своих реальных границах: 2–3 против 4–6. */
.bs-tl { margin-top: auto; }

.bs-tl__row { margin-bottom: 16px; }

.bs-tl__top { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; }

.bs-tl__n { font-weight: 700; color: var(--text-0); }

.bs-tl__v { font-weight: 750; color: var(--text-2); }

.bs-tl__v--us { color: var(--neon); }

.bs-tl__track {
  position: relative; height: 14px;
  border-radius: var(--radius-pill); background: var(--bg-3);
}

.bs-tl__span { position: absolute; top: 0; bottom: 0; border-radius: var(--radius-pill); }

.bs-tl__span--us { background: linear-gradient(90deg, var(--neon), var(--neon-bright)); }

.bs-tl__span--msk { background: linear-gradient(90deg, #c9d3db, #aab6c0); }

.bs-tl__axis {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
}


/* Шесть выводов по выдаче. Было две колонки по три ряда: в каждой карточке
   иконка занимала отдельную строку над заголовком, а справа висел номер
   88px водяным знаком — он резервировал пустое место, но ничего не
   сообщал. Секция уезжала на три с лишним экрана.

   Стало три колонки в два ряда, иконка встала в строку с заголовком,
   номер — компактным индексом в углу вместо watermark. */
.bs-find { grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1200px){
 .bs-find { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
 .bs-find { grid-template-columns: 1fr; }
}


/* ВНИМАНИЕ: класс .bsc переиспользован на странице 17 раз в трёх секциях
   с разной внутренней структурой (в «Нишах Брянска» вместо .bsc__ic стоит
   .bs-niche__top). Поэтому всё ниже строго внутри .bs-find — иначе
   поедут соседние секции. */
.bs-find .bsc {
  display: grid; grid-template-columns: 34px 1fr;
  column-gap: 12px; row-gap: 10px; align-items: center;
  padding: 22px 20px;
}

/* margin-bottom у иконки остался от прежней раскладки, где она стояла
   отдельной строкой над заголовком: он раздувал строку грида до 54px
   (34 + 20) и ронял заголовок на 10px ниже центра иконки. */
.bs-find .bsc__ic { grid-column: 1; grid-row: 1; width: 34px; height: 34px; margin: 0; align-self: center; }

.bs-find .bsc__ic svg { width: 17px; height: 17px; }

.bs-find .bsc__t { grid-column: 2; grid-row: 1; font-size: 15.5px; margin: 0; padding-right: 26px; align-self: center; }

.bs-find .bsc__p { grid-column: 1 / -1; grid-row: 2; font-size: 13.8px; line-height: 1.55; }


/* номер больше не watermark, а подпись-индекс */
.bs-find .bsc__ghost {
  right: 16px; top: 16px; font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-3); opacity: 1;
}


/* Ниши Брянска: пять карточек в двух колонках — пятая висела сиротой
   в последнем ряду. Тот же приём, что уже применён к «ловушкам»: шесть
   колонок, первые три по 2, последние две по 3 — ряд заполнен. */
.bs-niches { grid-template-columns: repeat(6, 1fr); }

.bs-niches > * { grid-column: span 2; }

.bs-niches > *:nth-child(4) { grid-column: 1 / span 3; }

.bs-niches > *:nth-child(5) { grid-column: 4 / span 3; }
@media (max-width: 960px){

  .bs-niches { grid-template-columns: repeat(2, 1fr); }

  .bs-niches > *, .bs-niches > *:nth-child(4) { grid-column: auto; }

  .bs-niches > *:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 640px){

  .bs-niches { grid-template-columns: 1fr; }

  .bs-niches > *, .bs-niches > *:nth-child(5) { grid-column: auto; }
}


/* Последняя карточка в сетке — светло-зелёная с анимированной обводкой.
   Приём канонический для страницы: тот же conic-gradient на --cta-angle
   и маска, что у .pain-card, .why-card, .pb--hero и финального CTA.
   Кольцо рисуется в ::after — у .bsc он свободен (номер выводов сидит
   в отдельном .bsc__ghost, не в псевдоэлементе). */
.bs-need .bsc:last-child,
.bs-niches .bsc:last-child,
.bs-find .bsc:last-child {
  background: rgba(10, 138, 85, .07);
  border-color: rgba(10, 138, 85, .22);
}

.bs-need .bsc:last-child::after,
.bs-niches .bsc:last-child::after,
.bs-find .bsc:last-child::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--cta-angle),
    rgba(10,138,85,0) 0deg, rgba(10,138,85,0) 18deg, #7dd3a8 70deg,
    rgba(10,138,85,0) 120deg, rgba(10,138,85,0) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ctaAngle 5s linear infinite;
  pointer-events: none; z-index: 1;
}


/* Блок аудита. В тёмной карточке два разных предложения — платный тариф
   «Аудитор» и бесплатный экспресс-разбор — были набраны одним кеглем 31px
   и спорили за внимание. При этом кнопка ведёт только на бесплатный.
   Развожу по весу: платный уходит в компактную строку, бесплатный
   становится главным. Порядок в разметке не трогаю — он логичен
   (сначала продукт, потом бесплатный вход). */
.bs-audit__price { font-size: 21px; margin: 10px 0 6px; }

.bs-audit__hr ~ .bs-audit__price { font-size: 34px; margin: 12px 0 8px; }

.bs-audit__hr { margin: 20px 0; }


/* колонки были align-items:start — карточки кончались на разной высоте,
   и правая висела ниже левой. Тянем обе, кнопку прижимаем к низу. */
.bs-audit { align-items: stretch; }

.bs-audit__card { display: flex; flex-direction: column; }

.bs-audit__btn { margin-top: auto; align-self: flex-start; }

/* display:flex на карточке блокифицирует детей: .bs-audit__tag из
   inline-flex стал флекс-элементом и растянулся на всю ширину, а SVG
   внутри без заданных размеров раздулся вместе с ним. Прижимаем плашку
   к левому краю и задаём иконке явный размер. */
.bs-audit__tag { align-self: flex-start; }

.bs-audit__tag svg { width: 15px; height: 15px; flex: none; }



/* Блок «Наш метод». Читался сплошной серой плитой по двум причинам:
   левая колонка была залита коралловым на 5,5% — ниже порога
   различимости, то есть фактически никак; и подписи «как бывает / как
   у нас» повторялись по разу в каждой из восьми ячеек (16 упоминаний),
   давая основной визуальный шум при нулевой информативности.

   Собран заново как одна таблица сравнения: подписи вынесены в шапку
   один раз, наша колонка — сплошная светло-зелёная на всю высоту блока.
   Теперь сторона «как у нас» видна сразу, а не собирается взглядом
   из четырёх отдельных плит. */
/* Две самостоятельные карточки-колонки: белая с рыночными практиками
   и зелёная с нашими. Внутри каждой пункты идут столбцом. Так стороны
   не нужно сопоставлять построчно — сначала читается одна целиком,
   потом другая. */
.bs-vs {
  grid-template-columns: 1fr 1fr; gap: 16px;
  background: none; border: none; overflow: visible;
}

.bs-vs__col {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Каждая колонка — сплошная заливка своим цветом: коралловая у рыночных
   практик, зелёная у наших. Без внутренних разделителей — карточка
   читается как единое целое, а не как список отсеков. */
.bs-vs__col--bad {
  background: rgba(223, 86, 48, .06);
  border-color: rgba(223, 86, 48, .22);
}

.bs-vs__col--good {
  background: rgba(10, 138, 85, .07);
  border-color: rgba(10, 138, 85, .22);
}

.bs-vs__colhead {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 24px 4px; border: none;
  font-family: var(--font-mono); font-size: 11px; font-weight: 750;
  letter-spacing: .1em; text-transform: uppercase;
}

.bs-vs__col--bad  .bs-vs__colhead { color: var(--amber); }

.bs-vs__col--good .bs-vs__colhead { color: var(--neon); }


/* ячейки не несут своего фона и границ — цвет держит колонка.
   Базовое правило .bs-vs__c--bad задавало коралловый градиент,
   из-за него внутри колонки проступали полосы. */
.bs-vs__col .bs-vs__c { background: none; border: none; }
@media (max-width: 960px){
 .bs-vs { grid-template-columns: 1fr; }
}

.bs-vs__b { width: 24px; height: 24px; }

.bs-vs__b svg { width: 13px; height: 13px; }


/* Инфографика: у каждой строки своя пара иконок — они показывают,
   про что речь, до того как прочитан текст. Слева приглушённые,
   справа фирменные зелёные. Числа не выдумываю: в блоке их нет,
   поэтому визуал строится на иконках и переходе, а не на псевдоданных. */
.bs-vs__c {
  padding: 22px 28px;
  display: grid; grid-template-columns: 34px 1fr;
  column-gap: 14px; row-gap: 6px; align-items: start;
}

.bs-vs__ic {
  grid-row: 1 / span 2; grid-column: 1;
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex: none;
}

.bs-vs__ic svg { width: 17px; height: 17px; }

/* иконки в тон своей колонке: серые на коралловом фоне выглядели чужеродно */
.bs-vs__ic--bad  { background: rgba(223, 86, 48, .12); color: var(--amber); }

.bs-vs__ic--good { background: rgba(10, 138, 85, .12); color: var(--neon); }

.bs-vs__t, .bs-vs__p { grid-column: 2; }


/* «как бывает» — приглушённая сторона: тусклый текст, чтобы взгляд
   не задерживался на чужих проблемах и уходил в зелёную колонку */
.bs-vs__c--bad .bs-vs__t { color: var(--text-2); font-weight: 700; }

.bs-vs__c--bad .bs-vs__p { color: var(--text-3); }