/* Слайд «Одно подключение — все модели»: схема программа → Tropai API → провайдеры.
   Перенесена со старой главной (tropai-site/lib/flow.php) на палитру лендинга. */

.s1f .flow-wrap{margin:34px auto 0;padding:28px 24px;max-width:1080px}
.flow-svg{display:block;width:100%;height:auto;max-width:1000px;margin:0 auto}
.flow-lines path{fill:none;stroke:var(--accent);stroke-width:2;stroke-opacity:.5;stroke-dasharray:6 7;
  animation:flow-run 1.6s linear infinite}
.flow-lines path.own{stroke:var(--accent-2);stroke-width:2.5;stroke-opacity:.9}
@keyframes flow-run{to{stroke-dashoffset:-26}}

.flow-box rect,.flow-card rect{fill:var(--card-solid);stroke:var(--line);stroke-width:1.5}
.flow-card:hover rect{stroke:var(--accent)}
.flow-box text{fill:var(--text);font:500 15px Inter,system-ui,sans-serif}
.flow-box.own rect{stroke:var(--accent);stroke-width:2}
.flow-box.own text{fill:var(--accent-2);font-weight:700}
.flow-box .flow-title{font:700 15px Inter,system-ui,sans-serif;fill:var(--text)}
.flow-box .flow-sub{font:500 12.5px Inter,system-ui,sans-serif;fill:var(--muted)}

.flow-hub rect{fill:url(#flowHubGrad);fill:var(--accent);filter:drop-shadow(0 0 18px rgba(141,90,255,.55))}
.flow-hub .hub-title{fill:#fff;font:800 22px "Bricolage Grotesque",Inter,sans-serif}
.flow-hub .hub-sub{fill:#fff;font:500 13px Inter,sans-serif;opacity:.85}
.flow-logo{color:var(--text)}
.flow-pile-cap{fill:var(--dim);font:600 11px Inter,sans-serif;text-transform:uppercase;letter-spacing:.05em}

/* Телефон: вместо схемы — столбики */
.flow-stack{display:none}
.flow-col{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.flow-h{width:100%;text-align:center;margin:0 0 4px;color:var(--dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.flow-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card-solid);
  border-radius:999px;padding:6px 12px;font-size:.88rem;color:var(--text)}
.flow-chip img{border-radius:4px}
.flow-chip small{color:var(--muted);font-size:.78rem}
.flow-chip.own{border-color:var(--accent);color:var(--accent-2);font-weight:700}
[data-theme="dark"] .flow-chip img[src*="openai"],[data-theme="dark"] .flow-chip img[src*="anthropic"],
[data-theme="dark"] .flow-chip img[src*="grok"]{filter:invert(1)}
.flow-arrow{text-align:center;color:var(--accent);font-size:1.6rem;line-height:1;margin:10px 0}
.flow-hub-m{background:var(--accent);color:#fff;border-radius:14px;padding:16px;text-align:center;
  box-shadow:0 0 24px rgba(141,90,255,.45)}
.flow-hub-m b{display:block;font-size:1.2rem}
.flow-hub-m span{font-size:.85rem;opacity:.85}

@media (max-width:640px){.flow-svg{display:none}.flow-stack{display:block}.s1f .flow-wrap{padding:18px 12px}}
@media (prefers-reduced-motion:reduce){.flow-lines path{animation:none}}