body.product-demo::before {
    content: "";
    position: fixed;
    top: 80px;
    right: -180px;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    background: rgb(var(--accent-rgb));
    filter: blur(130px);
    opacity: .16;
    box-shadow: none;
    pointer-events: none;
    z-index: 0;
}
body.product-demo > header { z-index: 1050; }
body.product-demo > main { position: relative; z-index: 1; }

@media (min-width: 901px) {
    .demo-screen {
        transform: perspective(1250px) rotateY(-9deg) rotateX(3deg) rotateZ(1deg);
        transform-origin: center center;
        box-shadow: 34px 42px 100px rgba(0,0,0,.68), -10px -8px 60px rgba(var(--accent-rgb),.10);
        transition: transform .45s ease, box-shadow .45s ease;
    }
    .demo-screen:hover {
        transform: perspective(1250px) rotateY(-5deg) rotateX(1.5deg) rotateZ(.3deg) translateY(-4px);
        box-shadow: 42px 52px 120px rgba(0,0,0,.72), -10px -8px 75px rgba(var(--accent-rgb),.14);
    }
}