:root {
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes motion-soft-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes motion-pulse-ring {
  0% {
    opacity: 0;
    transform: scale(0.84);
  }
  35% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

@keyframes motion-scan {
  0% {
    opacity: 0;
    transform: translate3d(0, -130%, 0);
  }
  14%,
  74% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 620%, 0);
  }
}

@keyframes motion-label-arrive {
  from {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html {
  scroll-behavior: smooth;
}

.site-header {
  transition:
    min-height 420ms var(--motion-ease-out),
    background-color 420ms ease,
    box-shadow 420ms ease,
    backdrop-filter 420ms ease;
}

.motion-ready .site-header {
  animation: motion-header-arrive 760ms var(--motion-ease-out) both;
}

@keyframes motion-header-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, -28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.motion-scrolled .site-header {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 32px rgba(31, 71, 131, 0.09);
  backdrop-filter: blur(18px) saturate(135%);
}

.primary-nav a,
.primary-nav button,
.contact-button {
  transition:
    color 240ms ease,
    background-color 240ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--motion-ease-out);
}

.primary-nav a:hover,
.primary-nav button:hover {
  transform: translate3d(0, -2px, 0);
}

.contact-button:hover {
  box-shadow: 0 10px 26px rgba(0, 103, 250, 0.25);
  transform: translate3d(0, -2px, 0);
}

.software-hero {
  --motion-hero-x: 0px;
  --motion-hero-y: 0px;
}

.software-hero::before {
  transform: translate3d(
      calc(-3.5% + var(--motion-hero-x)),
      calc(-4% + var(--motion-hero-y)),
      0
    )
    scale(1.08);
  transition: transform 220ms ease-out;
  will-change: transform;
}

.motion-ready .software-hero__copy > *,
.motion-ready .feature-overview {
  opacity: 0;
}

.motion-ready .software-hero.is-motion-visible .software-hero__copy > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 820ms ease,
    transform 900ms var(--motion-ease-out);
}

.motion-ready .software-hero__copy > h1 {
  transform: translate3d(0, 34px, 0);
  transition-delay: 120ms !important;
}

.motion-ready .software-hero__copy > p {
  transform: translate3d(0, 26px, 0);
  transition-delay: 230ms !important;
}

.motion-ready .software-hero__title-line {
  clip-path: inset(0 100% 0 0);
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 520ms ease 350ms,
    transform 720ms var(--motion-ease-out) 350ms,
    clip-path 820ms var(--motion-ease-out) 390ms !important;
}

.motion-ready .software-hero.is-motion-visible .software-hero__title-line {
  clip-path: inset(0 0 0 0);
}

.motion-ready .software-hero__copy > small {
  transform: translate3d(0, 22px, 0);
  transition-delay: 480ms !important;
}

.motion-ready .software-hero.is-motion-visible .feature-overview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 700ms ease 520ms,
    transform 900ms var(--motion-ease-out) 520ms;
}

.motion-ready .feature-overview {
  transform: translate3d(0, 34px, 0);
}

.feature-overview > a {
  transition:
    color 260ms ease,
    transform 420ms var(--motion-ease-out),
    filter 420ms ease;
}

.motion-ready .feature-overview > a {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.96);
}

.motion-ready .software-hero.is-motion-visible .feature-overview > a {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 620ms ease,
    transform 720ms var(--motion-ease-out),
    filter 360ms ease;
  transition-delay: calc(660ms + var(--motion-index, 0) * 55ms);
}

.feature-overview > a:hover {
  filter: drop-shadow(0 10px 12px rgba(0, 103, 250, 0.13));
  transform: translate3d(0, -7px, 0) scale(1.025) !important;
}

.feature-overview > a img {
  transition: transform 420ms var(--motion-ease-out);
}

.feature-overview > a:hover img {
  transform: scale(1.08) rotate(-2deg);
}

.feature-overview__indicator {
  box-shadow: 0 5px 16px rgba(0, 103, 250, 0.34);
}

.motion-ready .software-feature .feature-copy,
.motion-ready .software-feature .feature-media {
  opacity: 0;
  transition:
    opacity 820ms ease,
    transform 980ms var(--motion-ease-out);
}

.motion-ready .software-feature .feature-copy {
  transform: translate3d(-42px, 24px, 0);
}

.motion-ready .software-feature .feature-media {
  transform: translate3d(48px, 18px, 0) scale(0.975);
}

.motion-ready .software-feature.is-reverse .feature-copy {
  transform: translate3d(42px, 24px, 0);
}

.motion-ready .software-feature.is-reverse .feature-media {
  transform: translate3d(-48px, 18px, 0) scale(0.975);
}

.motion-ready .software-feature.motion-in-view .feature-copy,
.motion-ready .software-feature.motion-in-view .feature-media {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-ready .software-feature.motion-in-view .feature-media {
  transition-delay: 90ms;
}

.motion-ready .software-feature .feature-copy > header,
.motion-ready .software-feature .feature-copy > p,
.motion-ready .software-feature .feature-highlights,
.motion-ready .software-feature .demo-button {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 620ms ease,
    transform 720ms var(--motion-ease-out);
}

.motion-ready .software-feature.motion-in-view .feature-copy > header,
.motion-ready .software-feature.motion-in-view .feature-copy > p,
.motion-ready .software-feature.motion-in-view .feature-highlights,
.motion-ready .software-feature.motion-in-view .demo-button {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-ready .software-feature.motion-in-view .feature-copy > header {
  transition-delay: 120ms;
}

.motion-ready .software-feature.motion-in-view .feature-copy > p {
  transition-delay: 210ms;
}

.motion-ready .software-feature.motion-in-view .feature-highlights {
  transition-delay: 300ms;
}

.motion-ready .software-feature.motion-in-view .demo-button {
  transition-delay: 410ms;
}

.motion-ready .feature-highlights article {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 520ms ease,
    transform 620ms var(--motion-ease-out);
  transition-delay: calc(340ms + var(--motion-index, 0) * 65ms);
}

.motion-ready .software-feature.motion-in-view .feature-highlights article {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.feature-highlight-icon {
  transition:
    transform 420ms var(--motion-ease-out),
    filter 420ms ease;
}

.feature-highlights article:hover .feature-highlight-icon {
  filter: drop-shadow(0 8px 10px rgba(0, 103, 250, 0.18));
  transform: translate3d(0, -4px, 0) scale(1.055);
}

.feature-media:not(.feature-media--comparison) > img {
  transition:
    transform 700ms var(--motion-ease-out),
    filter 500ms ease;
}

.feature-media:not(.feature-media--comparison):hover > img:first-child {
  filter: saturate(1.04) contrast(1.02);
  transform: translate3d(0, -7px, 0) scale(1.008);
}

.feature-media--assistant:hover > img:last-child {
  transform: translate3d(-4px, -12px, 0) rotate(-0.7deg);
}

.demo-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 260ms ease,
    box-shadow 360ms ease,
    transform 360ms var(--motion-ease-out);
}

.demo-button::after {
  position: absolute;
  z-index: -1;
  top: -60%;
  left: -45%;
  width: 36%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.46), transparent);
  content: "";
  transform: rotate(18deg);
  transition: left 700ms var(--motion-ease-out);
}

.demo-button:hover {
  box-shadow: 0 12px 28px rgba(0, 103, 250, 0.2);
  transform: translate3d(0, -3px, 0);
}

.demo-button:hover::after {
  left: 112%;
}

.before-after {
  transition:
    box-shadow 480ms ease,
    transform 560ms var(--motion-ease-out);
}

.motion-ready .software-feature.motion-in-view .before-after:is(:hover, :focus-within) {
  box-shadow: 0 24px 56px rgba(23, 64, 122, 0.18);
  transform: translate3d(0, -5px, 0);
}

.before-after__handle::after {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(0, 103, 250, 0.36);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  animation: motion-pulse-ring 2.1s ease-out infinite;
}

.software-feature.motion-in-view .feature-media--tma::after {
  position: absolute;
  z-index: 3;
  top: 8%;
  right: 4%;
  left: 4%;
  height: 3px;
  border-radius: 100%;
  background: linear-gradient(90deg, transparent, #48c8ff 22%, #fff 50%, #1785ff 78%, transparent);
  box-shadow: 0 0 18px 5px rgba(35, 168, 255, 0.33);
  content: "";
  pointer-events: none;
  animation: motion-scan 1.75s var(--motion-ease-smooth) 520ms both;
}

.motion-ready .tma-result-label {
  opacity: 0;
}

.motion-ready .software-feature.motion-in-view .tma-result-label {
  animation: motion-label-arrive 680ms var(--motion-ease-out) 1.05s both;
}

.feature-progress {
  transition:
    opacity 360ms ease,
    transform 520ms var(--motion-ease-out);
}

.feature-progress:not(.is-visible) {
  transform: translate3d(-24px, -50%, 0);
}

.feature-progress li::after,
.feature-progress a {
  transition:
    color 300ms ease,
    background-color 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease,
    transform 300ms var(--motion-ease-out);
}

.feature-progress li.is-active::after {
  box-shadow:
    0 0 0 5px rgba(0, 103, 250, 0.12),
    0 0 18px rgba(0, 103, 250, 0.38);
  transform: scale(1.08);
}

.motion-ready .site-footer__inner > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 700ms ease,
    transform 800ms var(--motion-ease-out);
}

.motion-ready .site-footer.motion-in-view .site-footer__inner > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: calc(90ms + var(--motion-index, 0) * 75ms);
}

.footer-social a {
  transition:
    transform 360ms var(--motion-ease-out),
    filter 360ms ease;
}

.footer-social a:hover {
  filter: drop-shadow(0 8px 12px rgba(30, 139, 255, 0.24));
  transform: translate3d(0, -5px, 0) scale(1.04);
}

.video-modal__backdrop {
  backdrop-filter: blur(0);
  transition:
    opacity 320ms ease,
    backdrop-filter 420ms ease;
}

.video-modal.is-open .video-modal__backdrop {
  backdrop-filter: blur(10px);
}

.video-modal__dialog {
  transform: translate3d(0, 30px, 0) scale(0.94);
  transition:
    opacity 340ms ease,
    transform 520ms var(--motion-ease-out);
}

.video-modal.is-open .video-modal__dialog {
  transform: translate3d(0, 0, 0) scale(1);
}

@media (min-width: 1751px) {
  .software-hero::before {
    transform: translate3d(
        calc(-2.5% + var(--motion-hero-x)),
        calc(-3% + var(--motion-hero-y)),
        0
      )
      scale(1.05);
  }
}

@media (max-width: 991.98px) {
  .software-hero::before {
    transition: none;
  }

  .motion-ready .software-feature .feature-copy,
  .motion-ready .software-feature.is-reverse .feature-copy,
  .motion-ready .software-feature .feature-media,
  .motion-ready .software-feature.is-reverse .feature-media {
    transform: translate3d(0, 0, 0) scale(0.985);
  }

  .feature-overview > a:hover {
    transform: translate3d(0, -3px, 0) scale(1.01) !important;
  }

  .before-after__handle::after {
    inset: -6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .motion-ready .software-hero__copy > *,
  .motion-ready .feature-overview,
  .motion-ready .feature-overview > a,
  .motion-ready .software-feature .feature-copy,
  .motion-ready .software-feature .feature-media,
  .motion-ready .software-feature .feature-copy > *,
  .motion-ready .feature-highlights article,
  .motion-ready .site-footer__inner > * {
    opacity: 1;
    clip-path: none;
    transform: none;
  }
}