.site-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--blue), var(--purple));
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 2px 10px rgba(6, 113, 150, .2);
}

.button-arrow {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  overflow: visible;
}

.button-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-spark {
  position: absolute;
  z-index: 0;
  display: grid;
  place-items: center;
  color: var(--orange);
  opacity: .36;
  animation: ambient-float 6s ease-in-out infinite;
}

.spark-one { left: 5%; top: 32%; font-size: 1.2rem; }
.spark-two { left: 47%; bottom: 13%; color: var(--purple); font-size: .7rem; animation-delay: -2s; }
.spark-three { right: 4%; top: 20%; color: var(--blue); font-size: 2.1rem; animation-delay: -4s; }

.promogen-section,
.loyalty-section,
.customer-focus {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.promogen-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 3%;
  top: 7%;
  width: 180px;
  height: 180px;
  opacity: .2;
  background-image: radial-gradient(circle, var(--purple) 1.5px, transparent 1.5px);
  background-size: 17px 17px;
  mask-image: linear-gradient(135deg, #000, transparent 75%);
}

.loyalty-section {
  position: relative;
  overflow: hidden;
}

.loyalty-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -120px;
  top: 120px;
  width: 310px;
  height: 310px;
  border: 62px solid rgba(6, 113, 150, .045);
  border-radius: 42% 58% 54% 46%;
  transform: rotate(18deg);
}

.step-card,
.promo-gallery figure,
.business-features article,
.download-card {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}

.promo-gallery figure:hover {
  transform: translateY(-8px) rotate(.4deg);
  box-shadow: 0 18px 38px rgba(11,31,51,.13);
}

.business-features article:hover {
  transform: translateX(7px);
  border-color: rgba(6,113,150,.2);
}

.brand-kicker img {
  animation: bee-breathe 4s ease-in-out infinite;
}

.merchant-hero-photo {
  will-change: transform;
  transition: transform .18s ease-out;
}

@keyframes ambient-float {
  0%, 100% { transform: translate3d(0,0,0) rotate(0); }
  50% { transform: translate3d(0,-14px,0) rotate(8deg); }
}

@keyframes bee-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-spark,
  .brand-kicker img { animation: none; }
  .merchant-hero-photo { transform: rotate(1.5deg)!important; }
}

@media (max-width: 900px) {
  .hero-spark { display: none; }
  .promogen-section::after { width: 120px; height: 120px; }
}