.slate-accent {
  position: absolute;
  z-index: 0;
  width: clamp(58px, 6vw, 86px);
  height: auto;
  border-radius: 18%;
  opacity: .28;
  pointer-events: none;
  filter: saturate(.88) drop-shadow(0 12px 24px rgba(0, 0, 0, .28));
}

.hero-visual > :not(.slate-accent),
#features > :not(.slate-accent),
#platforms > :not(.slate-accent),
.final-cta > :not(.slate-accent) {
  position: relative;
  z-index: 1;
}

.slate-accent-hero {
  top: -30px;
  right: -24px;
  width: clamp(70px, 7vw, 100px);
  opacity: .82;
  transform: rotate(5deg);
}

#features,
#platforms,
.final-cta {
  position: relative;
  overflow: hidden;
}

.slate-accent-features {
  top: 3.5rem;
  right: clamp(1.25rem, 6vw, 7rem);
  transform: rotate(-7deg);
}

.slate-accent-platforms {
  bottom: 2.5rem;
  left: clamp(1.25rem, 3vw, 3.5rem);
  opacity: .18;
  transform: rotate(8deg);
}

.slate-accent-final {
  top: 50%;
  right: clamp(1.25rem, 6vw, 7rem);
  width: clamp(72px, 8vw, 112px);
  opacity: .2;
  transform: translateY(-50%) rotate(-5deg);
}

@media (max-width: 760px) {
  .slate-accent-features {
    top: 1.4rem;
    right: 1rem;
  }

  .slate-accent-platforms {
    bottom: 1rem;
    left: auto;
    right: 1rem;
  }

  .slate-accent-final {
    top: 1.5rem;
    right: 1rem;
    transform: rotate(-5deg);
  }
}