.bg-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-ambient::before,
.bg-ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;

  background: radial-gradient(circle,
              var(--color-accent) 0%,
              rgba(162, 253, 91, 0.35) 30%,
              transparent 72%);
  filter: blur(200px);
}

.bg-ambient::before {
  width: 72vmax;
  height: 72vmax;
  top: 20%;
  left: -24vmax;
  opacity: 0.05;
}

.bg-ambient::after {
  width: 64vmax;
  height: 64vmax;
  top: 58%;
  right: -22vmax;
  opacity: 0.04;
}

.hero,
.site-footer {
  position: relative;
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
}
.hero__visual {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .bg-ambient::before { animation: drift-a 46s ease-in-out infinite alternate; }
  .bg-ambient::after  { animation: drift-b 54s ease-in-out infinite alternate; }
}

@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(11vmax, 7vmax) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-9vmax, -6vmax) scale(1.08); }
}

.feature-card,
.advantage-card {
  transform: translate3d(0, calc(var(--reveal-y, 0px) + var(--hover-y, 0px)), 0);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

.feature-card:hover,
.advantage-card:hover {
  --hover-y: -6px;
  border-color: rgba(162, 253, 91, 0.30);
  box-shadow: 0 14px 46px rgba(0, 0, 0, 0.40),
              0 0 48px rgba(162, 253, 91, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .feature-card:hover,
  .advantage-card:hover { --hover-y: 0px; }
}

.step__img {
  transition: filter 0.35s ease;
}
.step:hover .step__img {
  filter: drop-shadow(0 0 26px rgba(162, 253, 91, 0.45)) brightness(1.07);
}

@media (prefers-reduced-motion: no-preference) {

  .has-js .feature-card,
  .has-js .advantage-card {
    --reveal-y: 24px;
    opacity: 0;
  }
  .has-js .feature-card.is-visible,
  .has-js .advantage-card.is-visible {
    --reveal-y: 0px;
    opacity: 1;
  }

  .has-js .section-head,
  .has-js .step,
  .has-js .api__text,
  .has-js .api__action,
  .has-js .cta-banner {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .has-js .section-head.is-visible,
  .has-js .step.is-visible,
  .has-js .api__text.is-visible,
  .has-js .api__action.is-visible,
  .has-js .cta-banner.is-visible {
    opacity: 1;
    transform: none;
  }

  .has-js .api__preview {
    opacity: 0;
    transform: translate(-50%, 24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .has-js .api__preview.is-visible {
    opacity: 1;
    transform: translateX(-50%);
  }

  .has-js .steps__list .step:nth-child(2) { transition-delay: 0.1s; }
  .has-js .steps__list .step:nth-child(3) { transition-delay: 0.2s; }

  .has-js .hero__content > * {
    opacity: 0;
    animation: rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .has-js .hero .badge    { animation-delay: 0.10s; }
  .has-js .hero__title    { animation-delay: 0.22s; }
  .has-js .hero__subtitle { animation-delay: 0.34s; }
  .has-js .hero__cta      { animation-delay: 0.46s; }

  .has-js .hero__visual {
    opacity: 0;

    animation: fade-in 0.9s ease 0.55s forwards,
               float 7s ease-in-out 1.4s infinite;
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes fade-in { to { opacity: 1; } }
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }

  .has-js .step__img {
    animation: float-icon 5s ease-in-out infinite;
  }
  .has-js .step:nth-child(2) .step__img { animation-duration: 6s;   animation-delay: 0.5s; }
  .has-js .step:nth-child(3) .step__img { animation-duration: 5.4s; animation-delay: 1s; }
  @keyframes float-icon {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }

  .has-js .steps::before,
  .has-js .steps::after {
    background-color: var(--color-border-tile);
    background-image:
      linear-gradient(90deg, transparent 0%, rgba(162, 253, 91, 0.9) 50%, transparent 100%),
      linear-gradient(90deg, var(--color-accent), var(--color-accent-0) 74%);
    background-repeat: no-repeat;
    background-size: 26% 100%, 100% 100%;
    background-position: -26% 0, 0 0;
    animation: line-pulse 3.2s linear infinite;
  }
  .has-js .steps::after { animation-delay: 1.6s; }
  @keyframes line-pulse {
    0%   { background-position: -26% 0, 0 0; }
    100% { background-position: 126% 0, 0 0; }
  }

  .has-js .badge__icon {
    animation: twinkle 3s ease-in-out infinite;
    transform-origin: center;
  }
  @keyframes twinkle {
    0%, 100% { opacity: 0.5;  transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.22); }
  }

  .has-js .tile::after {
    animation: tile-glow 4.5s ease-in-out infinite;
  }
  .has-js .feature-card:nth-child(2) .tile::after { animation-duration: 5.3s; }
  .has-js .feature-card:nth-child(3) .tile::after { animation-duration: 4.1s; }
  .has-js .feature-card:nth-child(4) .tile::after { animation-duration: 5.8s; }
  .has-js .step:nth-child(2) .tile::after         { animation-duration: 5.5s; }
  .has-js .step:nth-child(3) .tile::after         { animation-duration: 4.8s; }
  @keyframes tile-glow {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
  }

  .btn--light,
  .btn--accent {
    position: relative;
    overflow: hidden;
  }
  .btn--light::after,
  .btn--accent::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: sheen 6s ease-in-out infinite;
  }
  .btn--accent::after {
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  }
  @keyframes sheen {
    0%        { left: -75%; }
    22%, 100% { left: 130%; }
  }
}