html { scroll-behavior: smooth; }
body { color: #0b1424; background: #fff; }
.font-extrabold { font-weight: 800; }
.container-page { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.section-pad { padding-block: 6rem; }
.section-pad-sm { padding-block: 4rem; }

.hero-primary-cta {
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.hero-primary-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 158, 196, .22); }
.hero-primary-cta:active { transform: translateY(0); }
.hero-primary-cta .ti { transition: transform 180ms ease; }
.hero-primary-cta:hover .ti { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .hero-primary-cta { transition: none; }
  .hero-primary-cta:hover,
  .hero-primary-cta:active { transform: none; }
  .hero-primary-cta .ti { transition: none; }
  .hero-primary-cta:hover .ti { transform: none; }
}

@media (max-width: 1023px) {
  .section-pad { padding-block: 4.5rem; }
}

@media (max-width: 767px) {
  .section-pad { padding-block: 3.7rem; }
  .section-pad-sm { padding-block: 3rem; }
  .container-page { width: min(100% - 1.25rem, 1180px); }
  .workflow-step:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -1.3rem; transform: translateX(50%); }
}