.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  backdrop-filter: blur(4px);
}

.hero-arrow:hover { background: rgba(255,255,255,0.25); }

.hero-arrow-prev { left: 24px; }
.hero-arrow-next { right: 24px; }