.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; }
.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; } }