/* How it works — scroll hint, active card, industries ease, mobile polish */

.hiw-scroll-hint {
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}
.hiw-scroll-hint.is-faded {
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
}

.hiw-panel-step {
  opacity: 0.78;
  filter: saturate(0.9);
  transition:
    background .35s,
    transform .35s cubic-bezier(.34, 1.2, .64, 1),
    box-shadow .35s,
    opacity .35s ease,
    filter .35s ease;
}
.hiw-panel-step.is-active {
  opacity: 1;
  filter: none;
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 16px 40px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.hiw-panel-step.hiw-step-final.is-active {
  background: rgba(34, 197, 94, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(134, 239, 172, 0.55),
    0 16px 40px rgba(0, 0, 0, 0.22);
}
.hiw-panel-step.is-active .hiw-step-badge {
  transform: scale(1.06);
}

/* Soft entrance after HIW */
#industries.hiw-exit-ease {
  opacity: 0;
  transform: translateY(32px);
}
#industries.hiw-exit-ease.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hiw-scroll-hint,
  .hiw-panel-step,
  #industries.hiw-exit-ease,
  #industries.hiw-exit-ease.is-visible {
    transition: none !important;
  }
  #industries.hiw-exit-ease {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .hiw-sticky {
    padding: 52px 0 64px !important;
  }
  .hiw-track {
    padding: 0 16px !important;
    gap: 18px !important;
  }
  .hiw-panel-head {
    padding: 0 4px 28px !important;
    margin-bottom: 4px;
  }
  .hiw-panel-step {
    width: 100%;
    min-width: unset;
    padding: 22px 18px 20px !important;
    border-radius: 20px !important;
    opacity: 0.88;
    scroll-margin-top: 96px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.4),
      0 10px 28px rgba(0, 0, 0, 0.14);
  }
  .hiw-panel-step.is-active {
    opacity: 1;
    transform: translateY(0) scale(1.01);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 16px 36px rgba(0, 0, 0, 0.2);
  }
  .hiw-step-img {
    border-radius: 14px;
    aspect-ratio: 16 / 9;
  }
  .hiw-main-heading {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }
  .hiw-head-desc {
    margin-bottom: 0;
  }
}