.hero--template .hero__media {
  overflow: visible;
  position: relative;
  z-index: 0;
}

.hero--template .hero__media-img {
  position: relative;
  z-index: 0;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform;
  transition: transform 120ms linear;
}

.hero--template .hero__media-star {
  transform-origin: center;
  transform: scale(var(--hero-star-base-scale, 0.72));
  will-change: transform;
}

.solutions-hero--template .solutions-hero__media {
  overflow: visible;
  position: relative;
  z-index: 0;
}

.solutions-hero--template .solutions-hero__media-img {
  position: relative;
  z-index: 0;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  will-change: transform;
  transition: transform 120ms linear;
  animation: solutions-hero-template-float 8.6s ease-in-out infinite;
}

.solutions-hero--template .solutions-hero__media-img > picture,
.solutions-hero--template .solutions-hero__media-img > picture > img,
.solutions-hero--template .solutions-hero__media-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.solutions-hero--template .solutions-hero__media_star-top,
.solutions-hero--template .solutions-hero__media_star-left,
.solutions-hero--template .solutions-hero__media_star-right {
  transform-origin: center;
  transform: scale(var(--hero-star-base-scale, 0.72));
  will-change: transform;
}

.hero--template .hero__content {
  position: relative;
  z-index: 1;
}

.hero--template .hero__media-star-image {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transform-origin: center;
  will-change: transform, opacity;
}

.banner--deco-motion .banner__deco {
  opacity: 0;
  transform: translate3d(120%, 0, 0) scale(0.94);
  transform-origin: 70% 60%;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
  will-change: transform, opacity;
}

.banner--deco-motion .banner__deco picture,
.banner--deco-motion .banner__deco img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 70% 60%;
}

.banner--deco-motion.is-banner-deco-visible .banner__deco {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.banner--deco-motion.is-banner-deco-visible .banner__deco picture,
.banner--deco-motion.is-banner-deco-visible .banner__deco img {
  animation: banner-template-hand 4.8s ease-in-out 320ms infinite;
}

.banner--deco-motion-2 .banner__deco {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  transition: none;
  will-change: transform, opacity;
}

.banner--deco-motion-2 .banner__deco > picture,
.banner--deco-motion-2 .banner__deco > img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center;
}

.banner--deco-motion-2 .banner__deco > picture,
.banner--deco-motion-2 .banner__deco > img {
  animation: banner-template-soft-float 5.2s ease-in-out infinite;
}

.how-it-works--deco-motion .how-it-works__deco {
  opacity: 0;
  transform: translate3d(140%, 0, 0) scale(0.82);
  transform-origin: 70% 60%;
  transition:
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
  will-change: transform, opacity;
}

.how-it-works--deco-motion .how-it-works__deco > picture,
.how-it-works--deco-motion .how-it-works__deco > img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 70% 60%;
  object-fit: contain;
}

.how-it-works--deco-motion.is-how-it-works-deco-visible .how-it-works__deco {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.how-it-works--deco-motion.is-how-it-works-deco-visible .how-it-works__deco > picture,
.how-it-works--deco-motion.is-how-it-works-deco-visible .how-it-works__deco > img {
  animation: banner-template-hand 4.8s ease-in-out 320ms infinite;
}

.banner-how-it-works--deco-motion .banner-how-it-works__deco-img {
  opacity: 0;
  transform: translate3d(140%, 0, 0) scale(0.8);
  transform-origin: 70% 60%;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
  will-change: transform, opacity;
}

.banner-how-it-works--deco-motion .banner-how-it-works__deco-img > picture,
.banner-how-it-works--deco-motion .banner-how-it-works__deco-img > img,
.banner-how-it-works--deco-motion .banner-how-it-works__deco-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 70% 60%;
}

.banner-how-it-works--deco-motion .banner-how-it-works__deco_star-top,
.banner-how-it-works--deco-motion .banner-how-it-works__deco_star-left,
.banner-how-it-works--deco-motion .banner-how-it-works__deco_star-right {
  opacity: 0;
  transform: translate3d(20px, 18px, 0) scale(0.58);
  transform-origin: center;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease;
  will-change: transform, opacity;
}

.banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco-img {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco-img > picture,
.banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco-img > img,
.banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco-img img {
  animation: banner-how-it-works-orbit 6s ease-in-out 320ms infinite;
}

@media (max-width: 767px) {
  .banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco-img > picture,
  .banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco-img > img,
  .banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco-img img {
    animation-duration: 9.6s;
  }
}

.banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco_star-top,
.banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco_star-left,
.banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco_star-right {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco_star-top {
  animation: hero-template-star-breathe 4.2s ease-in-out 100ms infinite;
}

.banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco_star-left {
  animation: hero-template-star-breathe 4.2s ease-in-out 260ms infinite;
}

.banner-how-it-works--deco-motion.is-banner-how-it-works-deco-visible .banner-how-it-works__deco_star-right {
  animation: hero-template-star-breathe 4.2s ease-in-out 420ms infinite;
}

.section-title__img.is-section-title-deco-ready .section-title__img1,
.section-title__img.is-section-title-deco-ready .section-title__img2,
.section-title__img.is-section-title-deco-ready .section-title__img3 {
  transform-origin: center;
  transform: scale(var(--hero-star-base-scale, 0.72));
  will-change: transform;
}

.section-title__img.is-section-title-deco-ready .section-title__img1 > picture,
.section-title__img.is-section-title-deco-ready .section-title__img1 > img,
.section-title__img.is-section-title-deco-ready .section-title__img2 > picture,
.section-title__img.is-section-title-deco-ready .section-title__img2 > img,
.section-title__img.is-section-title-deco-ready .section-title__img3 > picture,
.section-title__img.is-section-title-deco-ready .section-title__img3 > img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transform-origin: center;
  will-change: transform, opacity;
}

.section-title__img.is-section-title-deco-ready .section-title__img1 {
  animation: hero-template-star-breathe 4.2s ease-in-out calc(220ms + var(--hero-star-delay, 0ms)) infinite;
}

.section-title__img.is-section-title-deco-ready .section-title__img1 > picture,
.section-title__img.is-section-title-deco-ready .section-title__img1 > img {
  animation:
    hero-template-star-in-left 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--hero-star-delay, 0ms) both,
    hero-template-star-twinkle 3.4s ease-in-out calc(800ms + var(--hero-star-delay, 0ms)) infinite;
}

.section-title__img.is-section-title-deco-ready .section-title__img2 {
  animation: hero-template-star-breathe 4.2s ease-in-out calc(220ms + var(--hero-star-delay, 0ms)) infinite;
}

.section-title__img.is-section-title-deco-ready .section-title__img2 > picture,
.section-title__img.is-section-title-deco-ready .section-title__img2 > img {
  animation:
    hero-template-star-in-right 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--hero-star-delay, 0ms) both,
    hero-template-star-twinkle 3.4s ease-in-out calc(800ms + var(--hero-star-delay, 0ms)) infinite;
}

.section-title__img.is-section-title-deco-ready .section-title__img3 {
  animation: hero-template-star-breathe 4.2s ease-in-out calc(220ms + var(--hero-star-delay, 0ms)) infinite;
}

.section-title__img.is-section-title-deco-ready .section-title__img3 > picture,
.section-title__img.is-section-title-deco-ready .section-title__img3 > img {
  animation:
    hero-template-star-in-bottom 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--hero-star-delay, 0ms) both,
    hero-template-star-twinkle 3.4s ease-in-out calc(800ms + var(--hero-star-delay, 0ms)) infinite;
}

.features.is-features-icon-motion-ready .feature-card__head .feature-card__img {
  transform-origin: center;
  transform: scale(1);
  will-change: transform;
}

.features.is-features-icon-motion-ready.is-features-icon-motion-active .feature-card__head .feature-card__img {
  animation:
    features-icon-sequence var(--feature-icon-cycle, 1400ms) ease-in-out var(--feature-icon-delay, 0ms)
    infinite;
}

.blog__article.blog-article--deco-motion .blog__article-deco > picture,
.blog__article.blog-article--deco-motion .blog__article-deco > img {
  display: block;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.blog__article.blog-article--deco-motion.is-blog-article-deco-active .blog__article-deco > picture,
.blog__article.blog-article--deco-motion.is-blog-article-deco-active .blog__article-deco > img {
  animation: blog-article-deco-float 4.8s ease-in-out infinite;
}

.hero--template.is-ready .hero__media-star {
  animation: hero-template-star-breathe 4.2s ease-in-out calc(220ms + var(--hero-star-delay, 0ms)) infinite;
}

.hero--template.is-ready .hero__media-star--left {
  animation: hero-template-star-breathe 4.2s ease-in-out calc(220ms + var(--hero-star-delay, 0ms)) infinite;
}

.hero--template.is-ready .hero__media-star-image--left {
  animation:
    hero-template-star-in-left 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--hero-star-delay, 0ms) both,
    hero-template-star-twinkle 3.4s ease-in-out calc(800ms + var(--hero-star-delay, 0ms)) infinite;
}

.hero--template.is-ready .hero__media-star--right {
  animation: hero-template-star-breathe 4.2s ease-in-out calc(220ms + var(--hero-star-delay, 0ms)) infinite;
}

.hero--template.is-ready .hero__media-star-image--right {
  animation:
    hero-template-star-in-right 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--hero-star-delay, 0ms) both,
    hero-template-star-twinkle 3.4s ease-in-out calc(800ms + var(--hero-star-delay, 0ms)) infinite;
}

.hero--template.is-ready .hero__media-star--bottom {
  animation: hero-template-star-breathe 4.2s ease-in-out calc(220ms + var(--hero-star-delay, 0ms)) infinite;
}

.hero--template.is-ready .hero__media-star-image--bottom {
  animation:
    hero-template-star-in-bottom 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--hero-star-delay, 0ms) both,
    hero-template-star-twinkle 3.4s ease-in-out calc(800ms + var(--hero-star-delay, 0ms)) infinite;
}

.solutions-hero--template.is-ready .solutions-hero__media_star-top,
.solutions-hero--template.is-ready .solutions-hero__media_star-left,
.solutions-hero--template.is-ready .solutions-hero__media_star-right {
  animation: hero-template-star-breathe 4.2s ease-in-out calc(220ms + var(--hero-star-delay, 0ms)) infinite;
}

.solutions-hero--template.is-ready .solutions-hero__media_star-top img {
  animation:
    hero-template-star-in-right 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--hero-star-delay, 0ms) both,
    hero-template-star-twinkle 3.4s ease-in-out calc(800ms + var(--hero-star-delay, 0ms)) infinite;
}

.solutions-hero--template.is-ready .solutions-hero__media_star-left img {
  animation:
    hero-template-star-in-left 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--hero-star-delay, 0ms) both,
    hero-template-star-twinkle 3.4s ease-in-out calc(800ms + var(--hero-star-delay, 0ms)) infinite;
}

.solutions-hero--template.is-ready .solutions-hero__media_star-right img {
  animation:
    hero-template-star-in-bottom 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--hero-star-delay, 0ms) both,
    hero-template-star-twinkle 3.4s ease-in-out calc(800ms + var(--hero-star-delay, 0ms)) infinite;
}

.solutions-hero--template .solutions-hero__media::after {
  content: "";
  position: absolute;
  inset: 12% 14% 8% 14%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(121, 67, 34, 0.12) 0%, rgba(121, 67, 34, 0.03) 38%, transparent 72%);
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}

.hero--template.is-ready .hero__media::after {
  animation: hero-template-glow 1400ms ease-out forwards;
}

.solutions-hero--template.is-ready .solutions-hero__media::after {
  animation: hero-template-glow 1400ms ease-out forwards;
}

@keyframes solutions-hero-template-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  15% {
    transform: translate3d(-8px, -6px, 0) rotate(2deg);
  }
  30% {
    transform: translate3d(-4px, 6px, 0) rotate(-2deg);
  }
  45% {
    transform: translate3d(0, -5px, 0) rotate(2deg);
  }
  60% {
    transform: translate3d(6px, 8px, 0) rotate(-2deg);
  }
  75% {
    transform: translate3d(8px, -6px, 0) rotate(2deg);
  }
}

@keyframes hero-template-star-breathe {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(var(--hero-star-base-scale, 1)) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -1px, 0) scale(var(--hero-star-min-scale, 0.2)) rotate(-2deg);
  }
}

@keyframes hero-template-star-in-left {
  0% {
    opacity: 0;
    transform: translate3d(-16px, 10px, 0) rotate(-14deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes hero-template-star-in-right {
  0% {
    opacity: 0;
    transform: translate3d(16px, 10px, 0) rotate(14deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes hero-template-star-in-bottom {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) rotate(-8deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes hero-template-star-twinkle {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(121, 67, 34, 0));
  }
  50% {
    opacity: 0.82;
    filter: drop-shadow(0 0 10px rgba(121, 67, 34, 0.12));
  }
}

@keyframes hero-template-glow {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes banner-template-hand {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(2px, -8px, 0) rotate(6deg);
  }
  50% {
    transform: translate3d(0, -2px, 0) rotate(1deg);
  }
  75% {
    transform: translate3d(-2px, 6px, 0) rotate(-4deg);
  }
}

@keyframes banner-template-soft-float {
  0%,
  100% {
    transform: translate3d(0, 6px, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -12px, 0) rotate(0deg);
  }
}

@keyframes banner-how-it-works-orbit {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(10px, -12px, 0);
  }
  50% {
    transform: translate3d(0, -18px, 0);
  }
  75% {
    transform: translate3d(-10px, 10px, 0);
  }
}

@keyframes features-icon-sequence {
  0%,
  8%,
  100% {
    transform: scale(1);
  }
  28% {
    transform: scale(var(--feature-icon-max-scale, 1.08));
  }
  54% {
    transform: scale(1);
  }
}

@keyframes blog-article-deco-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -30px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--template .hero__media-img,
  .hero--template .hero__media-star,
  .hero--template .hero__media-star-image,
  .hero--template .hero__media::after,
  .solutions-hero--template .solutions-hero__media-img,
  .solutions-hero--template .solutions-hero__media_star-top,
  .solutions-hero--template .solutions-hero__media_star-left,
  .solutions-hero--template .solutions-hero__media_star-right,
  .solutions-hero--template .solutions-hero__media::after,
  .section-title__img .section-title__img1,
  .section-title__img .section-title__img2,
  .section-title__img .section-title__img3,
  .section-title__img .section-title__img1 > picture,
  .section-title__img .section-title__img1 > img,
  .section-title__img .section-title__img2 > picture,
  .section-title__img .section-title__img2 > img,
  .section-title__img .section-title__img3 > picture,
  .section-title__img .section-title__img3 > img,
  .features .feature-card__head .feature-card__img,
  .blog__article .blog__article-deco > picture,
  .blog__article .blog__article-deco > img,
  .banner--deco-motion .banner__deco,
  .banner--deco-motion .banner__deco picture,
  .banner--deco-motion .banner__deco img,
  .how-it-works--deco-motion .how-it-works__deco,
  .how-it-works--deco-motion .how-it-works__deco > picture,
  .how-it-works--deco-motion .how-it-works__deco > img {
    animation: none !important;
    opacity: 1;
    transform: none;
    transition: none !important;
  }

}