/* ============================================================
   КУДА ВСТАЁТ ИИ — СХЕМА (29.09.2026)
   Три колонки: узлы-источники → ядро (картинка) → узлы-результаты.
   Линии и огоньки — SVG поверх, координаты считает dir-flow.js.
   ============================================================ */
.flow__map{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(260px, .95fr) minmax(0, 1fr);
  align-items:center;
  gap:clamp(40px, 6vw, 120px);
}
.flow__lines{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.flow__lines path{ fill:none; stroke:rgba(var(--accent-rgb), .28); stroke-width:1.5; stroke-dasharray:3 6; }
.flow__lines path.is-out{ stroke:rgba(var(--accent-rgb), .42); stroke-dasharray:none; }
.flow__lines circle{ fill:var(--accent-1); filter:drop-shadow(0 0 5px rgba(var(--accent-rgb), .8)); }

.flow__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.flow__cap{
  margin:0 0 14px;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-muted, #8a8f99);
}
.flow__node{
  position:relative; z-index:1;
  display:grid; gap:2px;
  padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 4px 14px rgba(15, 20, 40, .04);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.flow__node b{ font-weight:650; font-size:clamp(15px, 1.05vw, 17px); color:var(--fg); }
.flow__node span{ font-size:13.5px; line-height:1.4; color:var(--fg-lead); }
.flow__col--out .flow__node{ border-color:var(--accent-line); background:linear-gradient(120deg, var(--accent-wash), #fff 70%); }
/* узел, по линии которого сейчас бежит огонёк, — dir-flow.js ставит .is-hot */
.flow__node.is-hot{ border-color:rgba(var(--accent-rgb), .55); box-shadow:0 6px 22px rgba(var(--accent-rgb), .16); }

.flow__core{ position:relative; z-index:1; display:grid; justify-items:center; }
.flow__pic{
  position:relative; z-index:1; display:block;
  width:min(100%, 380px);
  mix-blend-mode:multiply;
  animation:flow-float 6s ease-in-out infinite;
}
.flow__pic img{ display:block; width:100%; height:auto; }
.flow__halo{
  position:absolute; left:50%; top:46%;
  width:min(125%, 470px); aspect-ratio:1;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(var(--accent-rgb), .20), rgba(var(--accent-rgb), .05) 60%, rgba(var(--accent-rgb), 0));
}
.flow__halo i{
  position:absolute; inset:var(--k); border-radius:50%;
  border:1px solid rgba(var(--accent-rgb), .18);
  animation:flow-pulse 3.6s ease-out infinite;
}
.flow__halo i:nth-child(1){ --k:18%; }
.flow__halo i:nth-child(2){ --k:18%; animation-delay:1.8s; }
.flow__core-name{
  position:relative; z-index:1;
  margin:-8px 0 0; text-align:center;
  font:650 clamp(17px, 1.3vw, 21px)/1.3 var(--font); color:var(--fg);
}
.flow__core-name em{ font-style:normal; color:var(--accent-1); }

@keyframes flow-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes flow-pulse{ 0%{ transform:scale(.8); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }

@media (hover:hover) and (pointer:fine){
  .flow__node:hover{ transform:translateY(-2px); border-color:rgba(var(--accent-rgb), .45); }
}
@media (max-width: 900px){
  .flow__map{ grid-template-columns:minmax(0, 1fr); gap:28px; }
  .flow__lines{ display:none; }
  .flow__core{ order:-1; }
  .flow__pic{ width:min(70%, 300px); }
  .flow__col ul{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (prefers-reduced-motion:reduce){
  .flow__pic, .flow__halo i{ animation:none; }
}

/* ореол ядра шире колонки на телефоне — не даём ему раздвинуть страницу */
.flow{ overflow-x:clip; }

/* ===== ГДЕ РАБОТАЕТ ИИ (29.09.2026) =====
   Контур компании рисует dir-flow.js в том же SVG, что и линии:
   «на вашем сервере» — один контур вокруг всей схемы, ядро внутри;
   облачные варианты — контуры только вокруг колонок, ядро снаружи. */
/* без заливки: картинка ядра (multiply) лежит в своём слое наложения и на тонированном
   фоне давала белый квадрат */
.flow__lines .contour rect{ fill:none; stroke:rgba(var(--accent-rgb), .45); stroke-width:1.5; stroke-dasharray:6 6; }
.flow__lines .contour text{ font:600 11px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; fill:var(--accent-1); }
.flow__lines .contour{ opacity:0; transition:opacity .45s var(--ease); }
.flow__lines .contour.is-on{ opacity:1; }
.flow__badge{
  position:relative; z-index:1;
  display:inline-block; margin-top:10px;
  padding:6px 11px; border-radius:3px;
  background:var(--accent-1); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.06em;
  transition:background .3s var(--ease);
}
.flow__map[data-mode="local"] .flow__badge{ background:#1d7c49; }   /* внутри контура — зелёный: ничего не уходит */

.flow__where{
  margin-top:clamp(28px, 3vw, 44px);
  padding:clamp(20px, 2.2vw, 32px);
  border:1px solid var(--line); border-radius:calc(var(--r-card) + 2px);
  background:linear-gradient(160deg, #fff 40%, var(--accent-wash));
}
.flow__where-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; }
.flow__where-cap{ margin:0; font:650 clamp(18px, 1.4vw, 22px)/1.25 var(--font); color:var(--fg); }
.flow__where-cap em{ font-style:normal; color:var(--accent-1); }
.flow__seg{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px;
  padding:4px; border-radius:6px; background:rgba(var(--accent-rgb), .08);
}
.flow__seg button{
  min-height:40px; padding:8px 16px; border:0; border-radius:4px;
  background:transparent; color:var(--fg-lead);
  font:600 14px/1.2 var(--font); cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.flow__seg button:hover{ color:var(--fg); }
.flow__seg button[aria-selected="true"]{ background:#fff; color:var(--accent-1); box-shadow:0 2px 8px rgba(var(--accent-rgb), .18); }
.flow__seg button:focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; }

.flow__facts{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 32px);
  margin:clamp(18px, 1.8vw, 26px) 0 0;
  animation:fw-in .4s var(--ease);
}
.flow__facts[hidden]{ display:none; }
.flow__facts dt{ margin-bottom:6px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute); }
.flow__facts dd{ margin:0; font-size:clamp(14px, 1vw, 16px); line-height:1.5; color:var(--fg); }
.flow__fact-out dd{ font-weight:600; }
@keyframes fw-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

@media (max-width: 900px){
  .flow__facts{ grid-template-columns:minmax(0, 1fr); }
  .flow__seg{ width:100%; }
  .flow__seg button{ padding:8px 6px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){ .flow__facts{ animation:none; } .flow__lines .contour{ transition:none; } }
.flow__lines .contour rect.lg{ fill:var(--bg, #fff); stroke:none; }