/* Hero: 3D stage with three plugin panels; an invisible 5x5 grid of <i> tilts the rig toward the mouse (CSS only). */
.hero{overflow-x:clip}
.hero-visual{background:none}
.hero-stage{position:relative;height:560px;margin:22px 0 16px;perspective:1400px}
.hero-stage>i{position:absolute;z-index:10;width:20%;height:20%}
.hero-rig{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.hero-shot{position:absolute;margin:0;border-radius:14px;overflow:hidden;border:1px solid #ffffff1f;background:#232323;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.hero-shot img{width:100%;height:auto;display:block}
.shot-main{left:50%;top:24px;width:228px;z-index:3;transform:translateX(-50%) translateZ(70px);box-shadow:0 60px 100px -30px #000000f2}
.shot-left{left:22px;top:90px;width:290px;z-index:1;opacity:.82;transform:rotate(-7deg) translateZ(-120px);box-shadow:0 40px 80px -30px #000000e6}
.shot-right{right:22px;top:90px;width:290px;z-index:1;opacity:.82;transform:rotate(7deg) translateZ(-120px);box-shadow:0 40px 80px -30px #000000e6}
.hero-stage>i:nth-child(1){left:0%;top:0%}.hero-stage>i:nth-child(1):hover~.hero-rig{transform:rotateY(-9deg) rotateX(7deg) translate3d(-10px,-8px,0)}
.hero-stage>i:nth-child(2){left:20%;top:0%}.hero-stage>i:nth-child(2):hover~.hero-rig{transform:rotateY(-4.5deg) rotateX(7deg) translate3d(-5px,-8px,0)}
.hero-stage>i:nth-child(3){left:40%;top:0%}.hero-stage>i:nth-child(3):hover~.hero-rig{transform:rotateY(0deg) rotateX(7deg) translate3d(0px,-8px,0)}
.hero-stage>i:nth-child(4){left:60%;top:0%}.hero-stage>i:nth-child(4):hover~.hero-rig{transform:rotateY(4.5deg) rotateX(7deg) translate3d(5px,-8px,0)}
.hero-stage>i:nth-child(5){left:80%;top:0%}.hero-stage>i:nth-child(5):hover~.hero-rig{transform:rotateY(9deg) rotateX(7deg) translate3d(10px,-8px,0)}
.hero-stage>i:nth-child(6){left:0%;top:20%}.hero-stage>i:nth-child(6):hover~.hero-rig{transform:rotateY(-9deg) rotateX(3.5deg) translate3d(-10px,-4px,0)}
.hero-stage>i:nth-child(7){left:20%;top:20%}.hero-stage>i:nth-child(7):hover~.hero-rig{transform:rotateY(-4.5deg) rotateX(3.5deg) translate3d(-5px,-4px,0)}
.hero-stage>i:nth-child(8){left:40%;top:20%}.hero-stage>i:nth-child(8):hover~.hero-rig{transform:rotateY(0deg) rotateX(3.5deg) translate3d(0px,-4px,0)}
.hero-stage>i:nth-child(9){left:60%;top:20%}.hero-stage>i:nth-child(9):hover~.hero-rig{transform:rotateY(4.5deg) rotateX(3.5deg) translate3d(5px,-4px,0)}
.hero-stage>i:nth-child(10){left:80%;top:20%}.hero-stage>i:nth-child(10):hover~.hero-rig{transform:rotateY(9deg) rotateX(3.5deg) translate3d(10px,-4px,0)}
.hero-stage>i:nth-child(11){left:0%;top:40%}.hero-stage>i:nth-child(11):hover~.hero-rig{transform:rotateY(-9deg) rotateX(0deg) translate3d(-10px,0px,0)}
.hero-stage>i:nth-child(12){left:20%;top:40%}.hero-stage>i:nth-child(12):hover~.hero-rig{transform:rotateY(-4.5deg) rotateX(0deg) translate3d(-5px,0px,0)}
.hero-stage>i:nth-child(13){left:40%;top:40%}.hero-stage>i:nth-child(13):hover~.hero-rig{transform:rotateY(0deg) rotateX(0deg) translate3d(0px,0px,0)}
.hero-stage>i:nth-child(14){left:60%;top:40%}.hero-stage>i:nth-child(14):hover~.hero-rig{transform:rotateY(4.5deg) rotateX(0deg) translate3d(5px,0px,0)}
.hero-stage>i:nth-child(15){left:80%;top:40%}.hero-stage>i:nth-child(15):hover~.hero-rig{transform:rotateY(9deg) rotateX(0deg) translate3d(10px,0px,0)}
.hero-stage>i:nth-child(16){left:0%;top:60%}.hero-stage>i:nth-child(16):hover~.hero-rig{transform:rotateY(-9deg) rotateX(-3.5deg) translate3d(-10px,4px,0)}
.hero-stage>i:nth-child(17){left:20%;top:60%}.hero-stage>i:nth-child(17):hover~.hero-rig{transform:rotateY(-4.5deg) rotateX(-3.5deg) translate3d(-5px,4px,0)}
.hero-stage>i:nth-child(18){left:40%;top:60%}.hero-stage>i:nth-child(18):hover~.hero-rig{transform:rotateY(0deg) rotateX(-3.5deg) translate3d(0px,4px,0)}
.hero-stage>i:nth-child(19){left:60%;top:60%}.hero-stage>i:nth-child(19):hover~.hero-rig{transform:rotateY(4.5deg) rotateX(-3.5deg) translate3d(5px,4px,0)}
.hero-stage>i:nth-child(20){left:80%;top:60%}.hero-stage>i:nth-child(20):hover~.hero-rig{transform:rotateY(9deg) rotateX(-3.5deg) translate3d(10px,4px,0)}
.hero-stage>i:nth-child(21){left:0%;top:80%}.hero-stage>i:nth-child(21):hover~.hero-rig{transform:rotateY(-9deg) rotateX(-7deg) translate3d(-10px,8px,0)}
.hero-stage>i:nth-child(22){left:20%;top:80%}.hero-stage>i:nth-child(22):hover~.hero-rig{transform:rotateY(-4.5deg) rotateX(-7deg) translate3d(-5px,8px,0)}
.hero-stage>i:nth-child(23){left:40%;top:80%}.hero-stage>i:nth-child(23):hover~.hero-rig{transform:rotateY(0deg) rotateX(-7deg) translate3d(0px,8px,0)}
.hero-stage>i:nth-child(24){left:60%;top:80%}.hero-stage>i:nth-child(24):hover~.hero-rig{transform:rotateY(4.5deg) rotateX(-7deg) translate3d(5px,8px,0)}
.hero-stage>i:nth-child(25){left:80%;top:80%}.hero-stage>i:nth-child(25):hover~.hero-rig{transform:rotateY(9deg) rotateX(-7deg) translate3d(10px,8px,0)}
@media(max-width:560px){.hero-stage{height:380px;margin:14px 0 10px}.shot-main{width:156px;top:16px}.shot-left,.shot-right{width:172px;top:64px}.shot-left{left:12px}.shot-right{right:12px}}
@media(prefers-reduced-motion:reduce){.hero-rig,.hero-shot{transition:none}}