:root {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-reveal: 0.75s;
  --dur-hero: 0.9s;
}
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-spring),
    transform var(--dur-reveal) var(--ease-spring);
  transition-delay: var(--reveal-delay, 0s);
}
.hero__card {
  animation: heroCardIn 0.85s var(--ease-spring) forwards;
}

@keyframes heroCardIn {
  0% { transform: translate3d(0, 20px, 0) scale(0.985); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: 0.06em;
  margin: 0 0 1rem;
}

.hero__title-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}

.hero__title-inner {
  display: block;
  transform: translate3d(0, 115%, 0);
  animation: heroTextSlide var(--dur-hero) var(--ease-spring) forwards;
}

.hero__title-line:nth-child(1) .hero__title-inner {
  animation-delay: 0s;
}

.hero__title-line:nth-child(2) .hero__title-inner {
  animation-delay: 0.1s;
}

@keyframes heroTextSlide {
  to { transform: translate3d(0, 0, 0); }
}

.hero__lead {
  opacity: 0;
  animation: heroFadeUp 0.65s var(--ease-spring) forwards;
  animation-delay: 0.15s;
}

.hero__actions {
  opacity: 0;
  animation: heroFadeUp 0.65s var(--ease-spring) forwards;
  animation-delay: 0.25s;
}

@keyframes heroFadeUp {
  0% { opacity: 0; transform: translate3d(0, 16px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero__media {
  animation: heroMediaIn 0.8s var(--ease-spring) forwards;
}

@keyframes heroMediaIn {
  0% { transform: translate3d(0, 24px, 0) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.hero__media img {
  transform: scale(1.06);
  animation: heroImgScale 1s var(--ease-smooth) forwards;
}

@keyframes heroImgScale {
  to { transform: scale(1); }
}
.site-header {
  transition:
    box-shadow 0.35s var(--ease-smooth),
    background 0.35s var(--ease-smooth);
}
.site-header.is-scrolled {
  box-shadow: 0 10px 40px rgba(10, 22, 40, 0.06);
  background: rgba(255, 255, 255, 0.97);
}
.carousel__track {
  transition: transform 0.72s var(--ease-smooth);
  will-change: transform;
}
.carousel__btn {
  transition:
    transform 0.25s var(--ease-spring),
    box-shadow 0.25s ease,
    background 0.25s ease;
}
.carousel__btn:active {
  transform: translateY(-50%) scale(0.94);
}
.card-compare {
  transition:
    transform 0.35s var(--ease-spring),
    box-shadow 0.35s ease;
}
.card-compare:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(10, 22, 40, 0.07);
}
.client-pill {
  transition:
    transform 0.35s var(--ease-spring),
    opacity 0.35s ease,
    border-color 0.25s ease;
}
.client-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(10, 22, 40, 0.18);
}
.btn {
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s ease,
    background 0.25s ease,
    opacity 0.25s ease;
}
.btn:active {
  transform: scale(0.98);
}
.timeline__row[data-reveal]:not(.is-visible) .timeline__marker {
  transform: scale(0.65);
  opacity: 0;
}
.timeline__row[data-reveal].is-visible .timeline__marker {
  transform: scale(1);
  opacity: 1;
  transition:
    transform 0.55s var(--ease-spring),
    opacity 0.45s ease;
  transition-delay: 0.1s;
}
.team-card,
.blog-card,
.solution-card {
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s ease;
}
.team-card:hover,
.blog-card:hover,
.solution-card:hover {
  transform: translateY(-3px);
}
.blog-card:hover,
.solution-card:hover {
  box-shadow: 0 18px 48px rgba(10, 22, 40, 0.08);
}
.stats-bar__num {
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .hero__card,
  .hero__lead,
  .hero__actions,
  .hero__media,
  .hero__title-inner,
  .hero__media img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .carousel__track {
    transition-duration: 0.01ms !important;
  }
  .timeline__marker {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .timeline__row[data-reveal]:not(.is-visible) .timeline__marker,
  .timeline__row[data-reveal] .timeline__marker {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .card-compare:hover,
  .client-pill:hover,
  .team-card:hover,
  .blog-card:hover,
  .solution-card:hover {
    transform: none;
  }
}