.site-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #02070b;
  box-shadow: var(--shadow);
  color: white;
}
.site-video video { width: 100%; height: 100%; display: block; object-fit: contain; }
.video-center-play {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--action) 88%, transparent); color: white;
  font-size: 28px; cursor: pointer; box-shadow: 0 12px 35px #0007; transition: .2s;
}
.video-center-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.video-center-play.hidden { opacity: 0; pointer-events: none; }
.video-controls {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center;
  gap: 12px; padding: 32px 16px 13px; background: linear-gradient(transparent, #000c);
  opacity: 0; transition: .2s;
}
.site-video:hover .video-controls, .site-video:focus-within .video-controls { opacity: 1; }
.video-controls button { border: 0; background: transparent; color: white; font-size: 18px; cursor: pointer; padding: 5px; }
.video-controls input { flex: 1; accent-color: var(--action); }
.video-controls span { font-size: 12px; white-space: nowrap; }
@media (max-width: 600px) {
  .video-controls { opacity: 1; gap: 6px; padding: 26px 8px 8px; }
  .video-controls span { display: none; }
  .video-center-play { width: 60px; height: 60px; }
}