/* Фон раздела "Пять этапов" (js/process-bg.js): WebGL-сеть по спецификации Interactive Hero.
   .process-pin становится отдельным контекстом наложения, поэтому фон с z-index: -1 лежит
   под карточками, но над темно-синей заливкой раздела. Градиент поверх холста, как в
   исходнике (from #050508 via 60% to transparent), держит контраст текста слева;
   на узком экране сцена стоит по центру, и холст равномерно притемнен. */
.process-pin { position: relative; z-index: 0; }
.process-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.process-bg canvas { display: block; width: 100%; height: 100%; opacity: .85; }
.process-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, color-mix(in srgb, var(--navy) 60%, transparent) 40%, transparent 72%);
}
@media (max-width: 768px) {
  .process-bg::after { background: color-mix(in srgb, var(--navy) 55%, transparent); }
}
html.a11y .process-bg, html[data-a11y-img="off"] .process-bg { display: none; }
/* Карточки этапов как стекло из спецификации (bg-white/5 + backdrop-blur-md): сеть за ними
   размывается и не спорит с текстом. */
.process .flow-node { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }