/* Carry the hero's water contours through the product-video sections. */
.screen-showcase::before {
  left: -80px;
  bottom: -55px;
  width: min(100%, 1100px);
  height: 280px;
  background-image: url('assets/hero-water-contours.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: brightness(0.6) saturate(1.3);
  opacity: 0.65;
}
.screen-showcase.alt::before {
  left: auto;
  right: -80px;
  transform: scaleX(-1);
  filter: none;
  opacity: 0.85;
}
@media (max-width: 768px) {
  .screen-showcase::before {
    width: 780px;
    height: 220px;
    bottom: -45px;
  }
}

.homepage-ui-loop {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border: 1px solid rgba(12, 58, 116, 0.14);
  border-radius: 18px;
  background: #f1f6f9;
  box-shadow: 0 18px 48px rgba(12, 58, 116, 0.18), 0 3px 10px rgba(12, 58, 116, 0.1);
  contain: layout paint;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.homepage-ui-loop::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.45); border-radius: inherit; pointer-events: none; }
.homepage-ui-loop:hover { transform: translateY(-2px); box-shadow: 0 23px 56px rgba(12,58,116,.22),0 5px 14px rgba(12,58,116,.12); }
.homepage-ui-loop video { display: block; width: 100%; height: 100%; object-fit: cover; background: #f1f6f9; }
.homepage-ui-loop-control { position:absolute; right:12px; bottom:12px; z-index:1; border:1px solid rgba(255,255,255,.72); border-radius:999px; padding:7px 11px; color:#fff; background:rgba(12,58,116,.82); box-shadow:0 2px 8px rgba(0,0,0,.18); font:600 12px/1 var(--font-body, sans-serif); cursor:pointer; opacity:.35; transition:opacity 160ms ease,background-color 160ms ease; }
.homepage-ui-loop:hover .homepage-ui-loop-control,.homepage-ui-loop-control:focus-visible,.homepage-ui-loop video[data-autoplay-blocked="true"] + .homepage-ui-loop-control { opacity:1; }
.homepage-ui-loop-control:hover { background:rgba(12,58,116,.96); }
.homepage-ui-loop-control:focus-visible { outline:3px solid #75e2d6; outline-offset:2px; }
.screen-showcase.alt .homepage-ui-loop { border-color: rgba(117,226,214,.22); box-shadow: 0 22px 56px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.18); }
.screen-showcase.alt .homepage-ui-loop:hover { box-shadow: 0 27px 64px rgba(0,0,0,.36),0 7px 16px rgba(0,0,0,.2); }
@media (max-width:768px) { .homepage-ui-loop { max-width:620px; margin:0 auto; border-radius:16px; } }
@media (prefers-reduced-motion:reduce) { .homepage-ui-loop { transition:none; } .homepage-ui-loop:hover { transform:none; } .homepage-ui-loop-control { opacity:1; transition:none; } }