.hero-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  padding:0;
  border:1px solid rgba(255,
  255,
  255,
  .32);
  border-radius:999px;
  background:rgba(7,
  29,
  22,
  .7);
  color:#fff;
  box-shadow:0 8px 28px rgba(0,
  0,
  0,
  .22);
  backdrop-filter:blur(8px);
  transition:background .2s ease,
  border-color .2s ease,
  color .2s ease,
  transform .2s ease
}
.hero-arrow svg {
  display:block;
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round
}
.hero-arrow:hover,
.hero-arrow:focus-visible {
  background:var(--yellow);
  color:var(--ink);
  border-color:var(--yellow);
  transform:scale(1.06);
  outline:none
}
.hero-controls {
  gap:12px
}
@media(max-width:540px) {
  .hero-controls {
    left:14px;
    right:14px;
    bottom:18px;
    justify-content:space-between
  }
  .hero-dots {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    margin:0
  }
  .hero-arrow {
    width:46px;
    height:46px
  }
  .hero-arrow svg {
    width:22px;
    height:22px
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero-arrow {
    transition:none
  }
}