/* ==========================================================================
   MEDIA BOX — СТРАНИЦА «ЧТО ТАКОЕ MEDIA BOX» (p-how.css)
   --------------------------------------------------------------------------
   Подключается только на how-it-works.html: после pages.css и screens.css,
   перед future.css. Общие блоки (.page-hero, .flow, .split, .checklist,
   .feature, .faq, .cta, .mphone, .card…) — в pages.css и base.css;
   здесь только то, что нужно этой странице.

   Содержание:
     1. Короткие факты в шапке (.hw-facts)
     2. «Каждый телефон — рабочая единица»: карточка устройства (.hw-unit)
     3. «Один Media Box — несколько проектов» (.hw-rack, .hw-group, .hw-ph)
     4. Схема работы из 8 шагов (.hw-steps, .hw-step)
     5. «Главная идея»: цепочка звеньев (.hw-chain)
     6. «Что вы получаете»: три способа начать (.hw-offers, .hw-offer)
     7. Reduced motion

   Правила (как во всём проекте):
     • анимируются только transform и opacity (ключевые кадры v2-pulse
       и v2-blink — из pages.css, раздел v2.1);
     • hover — только внутри @media (hover: hover) and (pointer: fine);
     • брейкпоинты: телефон < 640px, планшет 640–1023px, ПК ≥ 1024px;
     • цвета — переменные из base.css; цвет проекта (--pc) подкрашивает
       фон через псевдоэлемент с opacity.
   Пауза анимаций вне экрана — атрибут [data-live] (how-it-works.js).
   ========================================================================== */


/* ==========================================================================
   1. ШАПКА: КОРОТКИЕ ФАКТЫ ПОД КНОПКАМИ
   ========================================================================== */

.hw-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

/* Чип по умолчанию не переносит текст; на узком экране — можно */
.hw-facts .chip {
  white-space: normal;
}


/* ==========================================================================
   2. «КАЖДЫЙ ТЕЛЕФОН — ОТДЕЛЬНАЯ РАБОЧАЯ ЕДИНИЦА»: КАРТОЧКА УСТРОЙСТВА
   ========================================================================== */

.hw-unit {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

.hw-unit__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(56, 217, 255, .14), rgba(123, 92, 255, .09) 50%, rgba(123, 92, 255, 0) 72%);
  pointer-events: none;
}

.hw-unit__card {
  position: relative;
  padding: clamp(16px, 2.6vw, 24px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 40px 90px -40px rgba(0, 0, 0, .95),
    0 30px 80px -50px rgba(123, 92, 255, .6);
}

/* Заголовок карточки: номер, имя, статус */
.hw-unit__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.hw-unit__id {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: .8125rem;
  font-weight: 800;
  color: var(--text-on-accent);
  background: var(--accent-grad);
  font-variant-numeric: tabular-nums;
}

.hw-unit__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
}

/* Статус «в работе»: точка мигает (opacity) */
.hw-unit__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 4px 11px;
  border: 1px solid rgba(52, 224, 161, .3);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent-3);
  background: rgba(52, 224, 161, .1);
}

.hw-unit__state::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 8px rgba(52, 224, 161, .9);
  animation: v2-pulse 1.6s ease-in-out infinite;
}

/* Тело: телефон слева, параметры справа */
.hw-unit__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
}

.hw-unit__phone {
  display: block;
}

.hw-unit__phone .mphone {
  --pw: 104px;
  --ph: calc(104px * 2.06);
}

@media (max-width: 639.98px) {
  .hw-unit__phone .mphone {
    --pw: 78px;
    --ph: calc(78px * 2.06);
  }
}

.hw-unit__spec {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hw-spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 9px;
  border-bottom: 1px solid var(--border);
}

.hw-spec:first-child {
  padding-top: 0;
}

.hw-spec:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.hw-spec__k {
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hw-spec__v {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  overflow-wrap: anywhere;
}

.hw-spec__v--icons .icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

/* Цветная точка проекта (A — как в блоке «Несколько проектов») */
.hw-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}


/* ==========================================================================
   3. «ОДИН MEDIA BOX — НЕСКОЛЬКО ПРОЕКТОВ»
   --------------------------------------------------------------------------
   Корпус Media Box (.hw-rack) и группы телефонов (.hw-group).
   Цвет проекта — переменная --pc: A — --accent, B — --accent-2, C — --accent-3.
   Размеры телефонов — переменные корпуса (свои для телефона, планшета, ПК):
     --hw-pw         ширина мини-телефона
     --hw-gap        промежуток между телефонами в группе
     --hw-group-gap  промежуток между группами
   ========================================================================== */

.hw-rack {
  --hw-pw: 42px;
  --hw-gap: 6px;
  --hw-group-gap: 12px;

  position: relative;
  isolation: isolate;
  max-width: 880px;
  margin-inline: auto;
  padding: 16px 12px 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(56, 217, 255, .08), rgba(56, 217, 255, 0) 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 40px 90px -60px rgba(0, 0, 0, .9);
}

@media (min-width: 640px) {
  .hw-rack {
    --hw-pw: 72px;
    --hw-gap: 10px;
    --hw-group-gap: 32px;

    padding: 22px 28px 30px;
  }
}

@media (min-width: 1024px) {
  .hw-rack {
    --hw-pw: 96px;
    --hw-gap: 14px;
    --hw-group-gap: 56px;

    padding: 26px 40px 36px;
  }
}

/* Верхняя строка корпуса: знак, название, число устройств */
.hw-rack__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(18px, 3vw, 30px);
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--border);
}

.hw-rack__mark {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-grad);
}

/* Силуэт телефона в знаке (как в логотипе) */
.hw-rack__mark::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 9px;
  width: 10px;
  height: 16px;
  border: 2px solid var(--text-on-accent);
  border-radius: 3px;
  background: rgba(255, 255, 255, .22);
}

.hw-rack__title {
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}

.hw-rack__count {
  margin-left: auto;
  padding: 4px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text-muted);
}

/* Группы телефонов */
.hw-rack__groups {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 20px var(--hw-group-gap);
}

.hw-group {
  --pc: var(--accent);

  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.hw-group--b {
  --pc: var(--accent-2);
}

.hw-group--c {
  --pc: var(--accent-3);
}

.hw-group__phones {
  display: flex;
  gap: var(--hw-gap);
}

.hw-ph {
  position: relative;
  display: block;
}

.hw-ph .mphone {
  --pw: var(--hw-pw);
  --ph: calc(var(--hw-pw) * 2.06);
}

/* «Экран» мини-телефона: оттенок проекта и крупный номер */
.hw-ph__screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.hw-ph__screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--pc) 0%, transparent 85%);
  opacity: .22;
}

.hw-ph__num {
  position: relative;
  font-size: calc(var(--hw-pw) * .42);
  font-weight: 800;
  line-height: 1;
  color: var(--pc);
  font-variant-numeric: tabular-nums;
}

/* Индикатор «на связи» у телефона (мигает, opacity) */
.hw-ph__led {
  position: absolute;
  z-index: 6;
  top: calc(var(--hw-pw) * -.06);
  right: calc(var(--hw-pw) * -.06);
  width: max(6px, calc(var(--hw-pw) * .1));
  height: max(6px, calc(var(--hw-pw) * .1));
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow:
    0 0 0 2px var(--surface),
    0 0 10px rgba(52, 224, 161, .8);
  animation: v2-blink 3s ease-in-out var(--d, 0s) infinite;
}

/* Скобка под группой — цвет проекта */
.hw-group__bracket {
  position: relative;
  align-self: stretch;
  height: 12px;
  margin-top: 14px;
  border: 2px solid var(--pc);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  opacity: .75;
}

/* «Хвостик» от скобки к подписи */
.hw-group__bracket::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  background: var(--pc);
}

/* Название проекта — «пилюля» цвета проекта */
.hw-group__name {
  position: relative;
  isolation: isolate;
  margin-top: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--pc);
}

.hw-group__name::before,
.hw-group__name::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.hw-group__name::before {
  z-index: -1;
  background: var(--pc);
  opacity: .14;
}

.hw-group__name::after {
  box-shadow: inset 0 0 0 1px var(--pc);
  opacity: .45;
}

.hw-group__hint {
  margin-top: 6px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--text-muted);
}

@media (max-width: 639.98px) {
  .hw-group__name {
    padding: 3px 9px;
    font-size: .75rem;
  }

  .hw-group__hint {
    font-size: .6875rem;
  }
}

/* Три коротких пункта под схемой */
.hw-points {
  margin-top: clamp(32px, 4.5vw, 52px);
}


/* ==========================================================================
   4. СХЕМА РАБОТЫ ИЗ 8 ШАГОВ
   Телефон — столбиком; планшет — 2 колонки; ПК — 4 колонки (2 ряда).
   Стрелка-шеврон показывает переход к следующему шагу в ряду.
   ========================================================================== */

.hw-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .hw-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .hw-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

.hw-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
  row-gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 60%),
    var(--surface);
}

.hw-step > * {
  margin: 0;
}

.hw-step__num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(56, 217, 255, .35);
  border-radius: 12px;
  font-size: .875rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  background: rgba(56, 217, 255, .08);
  font-variant-numeric: tabular-nums;
}

.hw-step__title {
  padding-top: 2px;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.hw-step__text {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Последний шаг — цель: трафик на основной источник */
.hw-step--final {
  border-color: rgba(56, 217, 255, .35);
  background:
    linear-gradient(135deg, rgba(56, 217, 255, .08), rgba(123, 92, 255, .1)),
    var(--surface);
}

.hw-step--final .hw-step__num {
  border-color: transparent;
  color: var(--text-on-accent);
  background: var(--accent-grad);
  box-shadow: 0 10px 22px -12px rgba(56, 217, 255, .8);
}

/* Планшет: стрелка от левой карточки ряда к правой */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hw-step:nth-child(odd)::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 36px;
    right: -12px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid rgba(56, 217, 255, .75);
    border-right: 1.5px solid rgba(56, 217, 255, .75);
    transform: rotate(45deg);
  }
}

/* ПК: карточки вертикальные, стрелки между карточками в ряду */
@media (min-width: 1024px) {
  .hw-step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
    padding: 22px;
  }

  .hw-step__num {
    grid-row: auto;
    margin-bottom: 8px;
  }

  .hw-step:not(:nth-child(4n))::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 40px;
    right: -14px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid rgba(56, 217, 255, .75);
    border-right: 1.5px solid rgba(56, 217, 255, .75);
    transform: rotate(45deg);
  }
}


/* ==========================================================================
   5. «ГЛАВНАЯ ИДЕЯ»: ЦЕПОЧКА ЗВЕНЬЕВ
   Телефон и планшет — столбиком с вертикальной линией; ПК — 6 звеньев
   в строку со стрелками. Подсветка бежит по звеньям: у каждого своя
   задержка --d (задана в HTML), меняется только opacity.
   ========================================================================== */

.hw-chain {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 440px;
  margin-inline: auto;
}

.hw-chain__item {
  --d: 0s;

  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  padding-bottom: 22px;
}

.hw-chain__item:last-child {
  padding-bottom: 0;
}

/* Линия к следующему звену */
.hw-chain__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 60px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(56, 217, 255, .6), rgba(123, 92, 255, .35));
}

.hw-chain__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(56, 217, 255, .3);
  border-radius: 16px;
  color: var(--accent);
  background:
    linear-gradient(135deg, rgba(56, 217, 255, .12), rgba(123, 92, 255, .12)),
    var(--surface);
}

.hw-chain__icon .icon {
  width: 26px;
  height: 26px;
}

/* Подсветка звена (готовая тень, меняется только opacity) */
.hw-chain__icon::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(56, 217, 255, .75),
    0 0 22px rgba(56, 217, 255, .45);
  opacity: 0;
  animation: hw-chain-glow 4.8s ease-in-out var(--d) infinite;
  pointer-events: none;
}

@keyframes hw-chain-glow {
  0%, 22%, 100% { opacity: 0; }
  8%, 14%       { opacity: 1; }
}

/* Звено «Media Box» — знак как в логотипе */
.hw-chain__icon--box,
.hw-chain__item--final .hw-chain__icon {
  border-color: transparent;
  color: var(--text-on-accent);
  background: var(--accent-grad);
  box-shadow: 0 14px 30px -14px rgba(56, 217, 255, .8);
}

.hw-chain__mark {
  position: relative;
  width: 16px;
  height: 26px;
  border: 2.5px solid var(--text-on-accent);
  border-radius: 5px;
  background: rgba(255, 255, 255, .22);
}

.hw-chain__mark::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 6px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: var(--text-on-accent);
}

.hw-chain__text {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.hw-chain__qty {
  color: var(--accent);
}

@media (min-width: 1024px) {
  .hw-chain {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: none;
  }

  /* align-content: start — иконки всех звеньев на одной высоте
     (линии между ними привязаны к top), даже если подписи разной длины */
  .hw-chain__item {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: center;
    row-gap: 16px;
    padding: 0 8px;
    text-align: center;
  }

  .hw-chain__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .hw-chain__icon::after {
    border-radius: 22px;
  }

  .hw-chain__icon .icon {
    width: 28px;
    height: 28px;
  }

  .hw-chain__mark {
    width: 18px;
    height: 30px;
  }

  /* Горизонтальная линия от звена к следующему */
  .hw-chain__item:not(:last-child)::before {
    left: calc(50% + 42px);
    right: calc(-50% + 42px);
    top: 31px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(56, 217, 255, .6), rgba(123, 92, 255, .45));
  }

  /* Стрелка на конце линии */
  .hw-chain__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    right: calc(-50% + 40px);
    width: 8px;
    height: 8px;
    border-top: 2px solid rgba(123, 92, 255, .75);
    border-right: 2px solid rgba(123, 92, 255, .75);
    transform: rotate(45deg);
  }

  .hw-chain__text {
    max-width: 14ch;
    font-size: 1rem;
  }

  .hw-chain__qty {
    display: block;
  }
}

.hw-idea-note {
  max-width: 62ch;
  margin: clamp(28px, 4vw, 44px) auto 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--text);
}


/* ==========================================================================
   6. «ЧТО ВЫ ПОЛУЧАЕТЕ»: ТРИ СПОСОБА НАЧАТЬ
   Цена: <span class="price__usd">$300</span> <span class="price__uah" data-uah="300">
   (гривны подставляет layout.js). Телефон — столбиком; планшет — карточка
   в две колонки; ПК — три карточки в ряд.
   ========================================================================== */

.hw-offers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 20px);
}

@media (min-width: 1024px) {
  .hw-offers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

.hw-offer {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hw-offer__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.hw-offer__head > *,
.hw-offer__body > * {
  margin: 0;
}

/* Объявлено после «> * { margin: 0 }» — отступ сверху сохраняется */
.hw-offer__name {
  margin-top: 10px;
  font-size: 1.25rem;
  line-height: 1.25;
}

.hw-offer__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.hw-offer__price .price__usd {
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.hw-offer__price .price__uah {
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
}

.hw-offer--featured .price__usd {
  color: var(--accent);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hw-offer--featured .price__usd {
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.hw-offer__tag {
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--accent);
}

.hw-offer__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
}

.hw-offer__text {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.hw-offer__body > .hw-offer__btn {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 639.98px) {
  .hw-offer__body > .hw-offer__btn {
    align-self: stretch;
  }
}

/* Планшет: цена слева, описание и кнопка справа */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hw-offer {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
    column-gap: 36px;
  }
}

.hw-offers__more {
  max-width: 76ch;
  margin: 24px auto 0;
  font-size: .9375rem;
  line-height: 1.6;
  text-align: center;
  color: var(--text-muted);
}


/* ==========================================================================
   7. REDUCED MOTION
   Глобальное правило в base.css уже «гасит» анимации; здесь элементы
   ставятся в спокойный кадр: индикаторы горят ровно, подсветки нет.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hw-unit__state::before,
  .hw-ph__led,
  .hw-chain__icon::after {
    animation: none !important;
  }
}