/* ============================================================
   ЧТО ПОДКЛЮЧАЕМ К CRM (30.09.2026): круговая схема связок.
   Узлы стоят по кругу (поворот --a и контр-поворот), линии от центра,
   по линиям бегут короткие штрихи к центру — данные «приходят в CRM».
   ============================================================ */
.chb__box{ display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(28px, 5vw, 90px); align-items:center; }
.chb__panes{ display:grid; margin-top:clamp(18px, 2vw, 28px); }
.chb__pane{
  grid-area:1 / 1; margin:0; padding:18px 20px; border-left:3px solid var(--accent-1); background:var(--accent-wash);
  font-size:clamp(15px, 1.08vw, 17.5px); line-height:1.5; color:var(--fg-lead);
  opacity:0; visibility:hidden; transition:opacity .2s, visibility 0s linear .2s;
}
.chb__pane.is-on{ opacity:1; visibility:visible; transition:opacity .25s .05s, visibility 0s; }
.chb__pane b{ display:block; margin-bottom:6px; font:700 clamp(20px, 1.6vw, 26px)/1.2 var(--font-display); letter-spacing:-.02em; color:var(--fg); }

.chb__map{ position:relative; aspect-ratio:1; width:100%; max-width:600px; justify-self:center; container-type:inline-size; }
.chb__lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.chb__lines line{
  stroke:rgba(var(--accent-rgb), .6); stroke-width:.5; stroke-dasharray:2.2 3.4;
  animation:chb-flow 1.6s linear infinite; animation-delay:var(--d, 0s);
}
@keyframes chb-flow{ to{ stroke-dashoffset:5.6; } }
.chb__core{
  position:absolute; left:50%; top:50%; width:30%; aspect-ratio:1; translate:-50% -50%;
  display:grid; place-content:center; justify-items:center; gap:4px; text-align:center;
  border-radius:50%; background:var(--accent-1); color:#fff;
  box-shadow:0 0 0 10px rgba(var(--accent-rgb), .12), 0 0 0 22px rgba(var(--accent-rgb), .06), 0 24px 50px -16px rgba(var(--accent-rgb), .6);
}
.chb__core b{ font:800 clamp(22px, 5cqw, 34px)/1 var(--font-display); letter-spacing:-.02em; }
.chb__core span{ font:500 clamp(10.5px, 1.9cqw, 12.5px)/1.25 var(--font); opacity:.85; max-width:12ch; }
.chb__nodes{ position:absolute; inset:0; }
.chb__node{
  position:absolute; left:50%; top:50%; width:0; height:0; padding:0; border:0; background:none; cursor:pointer;
  transform:rotate(var(--a)) translateY(-40cqw) rotate(calc(-1 * var(--a)));
}
.chb__node span{
  position:absolute; left:0; top:0; translate:-50% -50%; white-space:nowrap;
  padding:9px 13px; border-radius:6px; background:#fff; border:1px solid var(--line);
  box-shadow:0 8px 20px -10px rgba(13,15,32,.3);
  font:600 13.5px/1 var(--font); color:var(--fg);
  transition:background .2s, color .2s, border-color .2s, transform .2s cubic-bezier(.2,.8,.2,1);
}
.chb__node:hover span{ border-color:var(--accent-1); transform:translateY(-2px); }
.chb__node.is-on span{ background:var(--fg); color:#fff; border-color:var(--fg); }
.chb__node:focus-visible span{ outline:2px solid var(--accent-1); outline-offset:2px; }

.chb__steps{
  list-style:none; margin:clamp(40px, 5vw, 70px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0;
  border-top:2px solid var(--fg);
}
.chb__steps li{ position:relative; padding:16px 14px 0 0; font:600 clamp(14px, 1vw, 16px)/1.35 var(--font); color:var(--fg); }
.chb__steps i{ display:block; margin-bottom:8px; font:500 12px/1 var(--font-mono); font-style:normal; color:var(--accent-1); }
.chb__steps li::before{ content:""; position:absolute; left:0; top:-7px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--fg); }

@media (max-width: 900px){
  .chb__box{ grid-template-columns:1fr; }
  .chb__map{ order:-1; max-width:440px; }
  .chb__node span{ font-size:11.5px; padding:7px 9px; }
  .chb__steps{ grid-template-columns:1fr; border-top:0; border-left:2px solid var(--fg); gap:14px; }
  .chb__steps li{ padding:0 0 0 18px; }
  .chb__steps li::before{ left:-7px; top:2px; }
}
@media (prefers-reduced-motion: reduce){ .chb__lines line{ animation:none; } }