/* Selected effects 3, 5 and 6. Geometry and content stay in the base styles. */
.hero__nav a { position: relative; }
.hero__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: #ff5c00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.hero__nav a:focus-visible::after,
.hero__nav a:active::after { transform: scaleX(1); }
.hero a:focus-visible,
.hero button:enabled:focus-visible {
  outline: 2px solid #ff5c00;
  outline-offset: 4px;
}
.hero__button--secondary { transition: background-color 200ms ease; }
.hero__button--secondary:active { background-color: #e5e9ee; }

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .hero__nav a:hover::after { transform: scaleX(1); }
  .hero__button--secondary:hover { background-color: #fff; }
  .hero__button--secondary:active { background-color: #e5e9ee; }
  .services-catalog__column,
  .ready-bundles__card { transition: border-color 200ms ease; }
  .services-catalog__column:hover,
  .ready-bundles__card:hover { border-color: #ff7423; }
  .services-catalog__column--promotion:hover { border-color: #fff0dd; }
}

/* Progressive enhancement: everything remains visible without JavaScript. */
.chain-motion-ready .business-chain__connection,
.chain-motion-ready .business-chain__dot,
.chain-motion-ready .business-chain__automation { opacity: 0; }
.chain-motion-ready.is-chain-visible .business-chain__connection,
.chain-motion-ready.is-chain-visible .business-chain__dot,
.chain-motion-ready.is-chain-visible .business-chain__automation {
  opacity: 1;
  transition: opacity 400ms ease-out var(--line-delay, 0ms);
}
.is-chain-visible .business-chain__connection--02,
.is-chain-visible .business-chain__dot--02 { --line-delay: 60ms; }
.is-chain-visible .business-chain__connection--03,
.is-chain-visible .business-chain__dot--03 { --line-delay: 120ms; }
.is-chain-visible .business-chain__connection--04,
.is-chain-visible .business-chain__dot--04 { --line-delay: 180ms; }
.chain-motion-ready.is-chain-visible .business-chain__automation { transition-delay: 300ms; }

@media (max-width: 767px), (hover: none), (pointer: coarse) {
  .chain-motion-ready.is-chain-visible .business-chain__connection,
  .chain-motion-ready.is-chain-visible .business-chain__dot,
  .chain-motion-ready.is-chain-visible .business-chain__automation {
    transition-duration: 240ms;
    transition-delay: 0ms;
  }
}
/* Visible feedback also applies to contact placeholders and every service row. */
.hero__button,
.final-cta__button,
.services-catalog__list li {
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}
.hero__button span,
.final-cta__button span,
.services-catalog__list img { transition: transform 220ms ease; }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .hero__button:hover,
  .final-cta__button:hover {
    transform: translateY(-4px);
    filter: brightness(1.12);
    box-shadow: 0 8px 24px #ff5c0059;
  }
  .hero__button:hover span,
  .final-cta__button:hover span { transform: translateX(7px); }
  .services-catalog__list li:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
    box-shadow: inset 0 0 0 2px #ff8a40, 0 6px 16px #12213126;
  }
  .services-catalog__column--promotion .services-catalog__list li:hover {
    box-shadow: inset 0 0 0 2px #fff0dd, 0 6px 16px #67240038;
  }
  .services-catalog__list li:hover img { transform: scale(1.14); }
}
.hero__button.is-pressed,
.final-cta__button.is-pressed,
.services-catalog__list li.is-pressed {
  transform: translateY(1px) scale(.98);
  filter: brightness(.92);
  box-shadow: inset 0 0 0 2px #ffaf79;
  transition-duration: 90ms;
}
@media (prefers-reduced-motion: reduce) {
  .hero__button,
  .final-cta__button,
  .services-catalog__list li,
  .hero__button span,
  .final-cta__button span,
  .services-catalog__list img { transition: none !important; transform: none !important; }
  .hero__nav a::after,
  .hero__button,
  .services-catalog__column,
  .ready-bundles__card { transition: none; }
  .chain-motion-ready .business-chain__connection,
  .chain-motion-ready .business-chain__dot,
  .chain-motion-ready .business-chain__automation { opacity: 1; transition: none; }
}