* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #000;
}

/* Zachowujemy proporcje 1365×768 aby layout 1:1 odpowiadał grafice */
.stage {
  position: relative;
  max-width: min(1400px, 95vw);
  margin: 0 auto;
  aspect-ratio: 1365 / 768;
}

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

/* ---- OBRYS RAMKI WIDEO ----
   Poniższe wartości procentowe dopasowane są do widocznego
   na obrazie szarego panelu z czarno-białym gradientem.
   W razie potrzeby można je skorygować o 0.5–1%.
*/
.video-frame {
  position: absolute;
  left: 0.5%;
  top: 17.8%;
  width: 57.3%;
  height: 65.1%;
  border-radius: 24px;
  overflow: hidden;
  background: #000; /* maska w czasie ładowania */
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.demo-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}