/* Первый экран: цикл «свет — блэкаут — работа от установки» */

.herocycle{position:relative}

/* Рамка сцены растворяется в фоне страницы, а не обрывается ровным краем:
   маска на самом контейнере затемняет края «сквозь» уже наложенные слои
   (base/city/obj + кабель + дым), поэтому дым, стела и кабель остаются
   на своих местах — гаснет только самая кромка кадра. Цвет фона —
   тот же --bg, что и у всей страницы, край сцены и фон совпадают день в день. */
.herocycle__stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg,22px);overflow:hidden;background:var(--bg,#0a0d10);
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
    linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
    linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-composite:intersect}

.hc-scene{position:absolute;inset:0;opacity:0;transition:opacity .6s linear}
.hc-scene.is-active{opacity:1}
.hc-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.hc-base{z-index:1}
.hc-city{z-index:2;mix-blend-mode:screen;opacity:0}
.hc-obj{z-index:3;mix-blend-mode:screen;opacity:0}

.hc-cable{position:absolute;inset:0;z-index:4;width:100%;height:100%}

.hc-smoke{position:absolute;z-index:5;width:9%;aspect-ratio:.72;transform-origin:50% 100%;
  background:radial-gradient(ellipse 42% 46% at 50% 84%, rgba(196,204,214,.50), rgba(196,204,214,.20) 52%, rgba(196,204,214,0) 78%);
  filter:blur(7px);opacity:0;pointer-events:none}

.hc-veil{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,13,16,0) 62%,rgba(10,13,16,.34) 82%,rgba(10,13,16,.78) 100%)}

.herocycle__caption{position:relative;min-height:132px;margin-top:22px}
.hc-cap{position:absolute;inset:0;opacity:0;transition:opacity .45s linear;pointer-events:none}
.hc-cap.is-active{opacity:1;pointer-events:auto}
.hc-cap__tag{display:inline-block;background:rgba(16,21,26,.9);border:1px solid rgba(255,156,49,.30);
  color:var(--accent-2,#ffb45c);font-size:13px;padding:6px 13px;border-radius:999px;margin-bottom:12px}
.hc-cap h2{font-size:clamp(22px,2.6vw,36px);line-height:1.15;font-weight:700;letter-spacing:-.01em;margin:0}
.hc-cap p{color:var(--text-muted,#93a1ad);margin:10px 0 0;font-size:clamp(14px,1.1vw,17px);max-width:64ch}

.herocycle__dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.herocycle__dots button{width:9px;height:9px;border-radius:50%;border:0;background:#2a343d;cursor:pointer;padding:0;transition:width .25s,background .25s}
.herocycle__dots button[aria-current="true"]{background:var(--accent,#ff9c31);width:24px;border-radius:999px}

.herocycle__note{color:var(--text-muted,#93a1ad);font-size:12px;margin-top:14px;line-height:1.45}

/* CTA-строка перенесена из старого .hero-ref дословно (текст, классы, ссылки).
   Сами .cta/.btn-a/.btn-b были описаны в critical.css только внутри .hero-ref
   и не подходили к новой секции .herocycle — здесь те же правила, пересчитанные
   на общие переменные из tokens.css (--text вместо локального --fg,
   --hairline вместо локального --line), картинка не менялась. */
.herocycle .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.herocycle .btn-a{background:var(--accent);color:#14100a}
.herocycle .btn-b{background:#1a1f24;color:var(--text);border:1px solid var(--hairline)}

@media(max-width:700px){
  .herocycle__caption{min-height:180px;margin-top:18px}
  .hc-smoke{width:12%}
}