/* VPS-only: layered scenery and a portrait emerging above a circular crop. */
html[data-page=vpn] .hero{isolation:isolate;background:#243128}
html[data-page=vpn] .character-stage{z-index:1}
.vps-scenery{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
.vps-plane{position:absolute;inset:-90px;will-change:transform}
.vps-plane-far{transform:translate3d(var(--vps-far-x,0px),var(--vps-far-y,0px),0)}
.vps-plane-near{transform:translate3d(var(--vps-near-x,0px),var(--vps-near-y,0px),0)}
.vps-grid{position:absolute;inset:0;background-image:radial-gradient(circle,#d7e8b327 1px,transparent 1.5px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent 28%,#000 95%)}
.vps-orbit{position:absolute;border:1px solid #e6c89832;border-radius:50%;width:590px;height:590px;right:5%;top:4%}
.orbit-wide::after{content:'';position:absolute;inset:48px;border:1px dashed #e6c89822;border-radius:inherit}
.orbit-small{width:385px;height:385px;right:12%;top:21%;border-color:#f9956455}
.vps-spark{position:absolute;color:#f6bf80;font-size:35px;font-weight:300;line-height:1}
.spark-one{right:11%;top:23%;font-size:46px;transform:rotate(12deg)}
.spark-two{right:43%;top:64%;font-size:39px;color:#d9e9a1}
.spark-three{right:6%;top:75%;font-size:26px;color:#d9e9a1}
.vps-node{position:absolute;width:9px;height:9px;border-radius:50%;background:#efb67b;box-shadow:0 0 0 7px #efb67b0d}
.node-one{right:44%;top:24%}.node-two{right:18%;top:86%;width:6px;height:6px;background:#d9e9a1}
.vps-trace{position:absolute;width:135px;height:1px;background:#f9956460;right:5%;top:42%;transform:rotate(-35deg)}
@media(max-width:760px){
 html[data-page=vpn] .hero{padding-bottom:28px}
 html[data-page=vpn] .character-stage{width:260px;max-width:100%;height:auto;aspect-ratio:260/350;margin:30px auto 0;overflow:visible}
 html[data-page=vpn] .character-stage::before{width:100%;height:auto;aspect-ratio:1;bottom:0;left:0;transform:none;background:linear-gradient(140deg,#ffc38d,#f99564 65%,#e67e55);box-shadow:inset 0 0 0 1px #fff5}
 html[data-page=vpn] .hero-character{width:110%;height:auto;aspect-ratio:2/3;max-width:none;top:0;left:50%;transform:translateX(-50%);object-fit:contain;z-index:1;-webkit-mask-image:linear-gradient(#000,#000),radial-gradient(ellipse 45.454545% 30.30303% at 50% 51.282051%,#000 99.7%,transparent 100%);mask-image:linear-gradient(#000,#000),radial-gradient(ellipse 45.454545% 30.30303% at 50% 51.282051%,#000 99.7%,transparent 100%);-webkit-mask-size:100% 51.282051%,100% 100%;mask-size:100% 51.282051%,100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-over;mask-composite:add}
 html[data-page=vpn] .character-stage::after{content:'';position:absolute;bottom:0;left:0;width:100%;aspect-ratio:1;border:1px solid #ffd9b8b3;border-radius:50%;z-index:2;pointer-events:none;mask-image:linear-gradient(transparent 50%,#000 51%)}
 .vps-plane{inset:-50px}.vps-grid{background-size:27px 27px;opacity:.65;mask-image:linear-gradient(180deg,transparent 20%,#000 95%)}
 .orbit-wide{width:510px;height:510px;right:-180px;top:auto;bottom:-40px}.orbit-small{width:340px;height:340px;right:-90px;top:auto;bottom:45px}
 .spark-one{font-size:34px;top:auto;bottom:373px;right:15%}.spark-two{font-size:29px;top:auto;bottom:184px;right:auto;left:10%}.spark-three{font-size:23px;top:auto;bottom:114px;right:12%}
 .node-one{right:9%;top:37%}.node-two{right:auto;left:15%;top:auto;bottom:370px}.vps-trace{width:84px;top:auto;bottom:246px;right:3%;opacity:.6}
}
@media(prefers-reduced-motion:reduce){.vps-plane{transform:none!important;will-change:auto}}