:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-header {
  transition:
    transform 320ms var(--motion-ease),
    background-color 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
  will-change: transform;
}

.site-header.is-hidden:not(:focus-within) {
  transform: translate3d(0, calc(-100% - 2px), 0);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(7, 26, 51, 0.1);
}

.hero {
  isolation: isolate;
  overflow: hidden;
}

.hero__backdrop {
  transform: scale(1.045);
  transform-origin: 50% 45%;
  animation: hero-backdrop-settle 1800ms var(--motion-ease) 120ms both;
}

.hero__content {
  animation: hero-content-enter 860ms var(--motion-ease) 180ms both;
}

.hero__actions .button {
  transition:
    transform 180ms var(--motion-ease-soft),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.hero__actions .button:hover,
.hero__actions .button:focus-visible {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 18px 44px rgba(7, 26, 51, 0.2);
}

[data-motion] {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(var(--motion-x, 0), var(--motion-y, 1.8rem), 0) scale(var(--motion-scale, 1));
  transition:
    opacity 760ms var(--motion-ease),
    filter 760ms var(--motion-ease),
    transform 760ms var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, filter, transform;
}

[data-motion="fade"] {
  --motion-y: 0.65rem;
}

[data-motion="scale"] {
  --motion-y: 1rem;
  --motion-scale: 0.975;
}

[data-motion="left"] {
  --motion-x: -1.5rem;
  --motion-y: 0.75rem;
}

[data-motion="right"] {
  --motion-x: 1.5rem;
  --motion-y: 0.75rem;
}

[data-motion].is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.stats-band {
  position: relative;
  overflow: hidden;
}

.stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.16), transparent 24rem),
    radial-gradient(circle at 82% 70%, rgba(118, 203, 221, 0.18), transparent 26rem);
  opacity: 0.75;
  pointer-events: none;
  transform: translate3d(0, var(--motion-band-shift, 0), 0);
}

.stats-band__grid {
  position: relative;
}

.stat img,
.benefit-item img,
.timeline__item img,
.contact-channel img {
  transition:
    transform 320ms var(--motion-ease),
    opacity 320ms ease;
}

.stat.is-visible img {
  animation: icon-settle 680ms var(--motion-ease) both;
}

.problem-visual,
.benefit-visual,
.story-side__avatar,
.contact-card__avatar {
  overflow: hidden;
}

.motion-parallax {
  transform: translate3d(0, var(--motion-parallax, 0), 0) scale(1.035);
  transition: transform 120ms linear;
  will-change: transform;
}

.problem-item,
.benefit-item,
.timeline__item,
.faq-item,
.contact-card,
.contact-channel,
.story-main section {
  transition:
    transform 220ms var(--motion-ease-soft),
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}

.problem-item:hover,
.benefit-item:hover,
.timeline__item:hover,
.faq-item:hover,
.contact-channel:hover,
.contact-channel:focus-visible,
.story-main section:hover {
  transform: translate3d(0, -2px, 0);
}

.timeline__item:hover,
.faq-item:hover,
.contact-card:hover {
  border-color: rgba(7, 26, 51, 0.16);
  box-shadow: 0 18px 48px rgba(7, 26, 51, 0.08);
}

.faq-panel:not([hidden]) {
  animation: faq-panel-open 240ms var(--motion-ease) both;
}

@keyframes hero-backdrop-settle {
  from {
    transform: scale(1.085);
  }

  to {
    transform: scale(1.045);
  }
}

@keyframes hero-content-enter {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(0, 1.25rem, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes icon-settle {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.6rem, 0) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes faq-panel-open {
  from {
    opacity: 0;
    transform: translate3d(0, -0.35rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (hover: hover) {
  .button:hover span[aria-hidden="true"] {
    transform: translate3d(0.18rem, 0, 0);
  }

  .button span[aria-hidden="true"] {
    display: inline-block;
    transition: transform 180ms var(--motion-ease-soft);
  }
}

@media (max-width: 47.98rem) {
  [data-motion] {
    --motion-y: 1.15rem;
    filter: blur(4px);
  }

  .site-header.is-hidden:not(:focus-within) {
    transform: translate3d(0, calc(-100% - 1px), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header.is-hidden:not(:focus-within),
  .hero__backdrop,
  .hero__content,
  [data-motion],
  [data-motion].is-visible,
  .motion-parallax,
  .faq-panel:not([hidden]) {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}