/* Perspective is confined to the showcase; inputs stay still and readable. */
.stage{perspective:1200px}
.stage:before{content:"";position:absolute;left:-8%;right:-12%;bottom:20px;height:115px;background:radial-gradient(ellipse,#01090dc4 0,#030d1370 34%,transparent 70%);transform:rotate(-7deg);pointer-events:none;z-index:-1}
.hero-photo{inset:8px 10px 51px 0;border-radius:72px 18px 18px 18px;transform-origin:60% 50%;transform:rotateX(var(--frame-x,4deg)) rotateY(var(--frame-y,-13deg)) rotateZ(2deg);box-shadow:1px 1px 0 #738286,3px 3px 0 #46565c,6px 6px 0 #24343a,9px 9px 0 #1a272d,12px 12px 0 #0a1319,20px 25px 38px #0007,36px 45px 75px #0005;transition:transform .6s ease;border:1px solid #acbabd70}
.hero-photo:after{background:linear-gradient(115deg,#ffffff12,transparent 35%),linear-gradient(180deg,#07151900 45%,#071519a8)}
.float{bottom:94px;left:-39px;transform-style:preserve-3d;animation:depth-float 9s ease-in-out infinite}
@keyframes depth-float{0%,100%{translate:0 0}50%{translate:0 -13px}}
.tilt{transform:rotateX(var(--tilt-x,12deg)) rotateY(var(--tilt-y,17deg)) rotateZ(-6deg);width:335px}
.tilt:before,.tilt:after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;border:1px solid #708c86}
.tilt:before{background:linear-gradient(135deg,#35514a,#122d25);transform:translate3d(15px,19px,-28px);box-shadow:0 30px 50px #0006}
.tilt:after{background:linear-gradient(135deg,#aabfb4,#355b4d);transform:translate3d(7px,9px,-12px);border-color:#a0b5a9}
.card{transform:translateZ(20px);backdrop-filter:none;background:linear-gradient(135deg,#fff,#eef4f0 65%,#dce8df);border-bottom:4px solid #acbcb4;border-right:4px solid #cbd9d1;box-shadow:1px 2px 0 #f9fffc,2px 4px 0 #bacac1,3px 6px 0 #718e80,0 27px 48px #04150e88;isolation:isolate}
.card:after{z-index:2;background:linear-gradient(110deg,transparent 25%,#ffffffaa 47%,transparent 70%);opacity:.6}
.profile-avatar{box-shadow:0 3px 0 #09251b,inset 0 1px 0 #6b9b81,0 6px 12px #173a2425;background:linear-gradient(135deg,#376654,#17382b)}
.pill{border-top:1px solid #fafffc;box-shadow:0 2px 0 #c4d7cd}
.scene-label{top:31px;right:-17px;transform:rotate(-3deg) translateY(var(--badge-y,0px));border-bottom:4px solid #b8c9be;border-right:3px solid #d9e4dc;box-shadow:2px 3px 0 #6c8976,0 18px 35px #071c2073;transition:transform .6s ease}
.scene-icon{box-shadow:inset 0 2px 3px #184c2420,0 1px 0 white;background:linear-gradient(#bcd9c9,#e8f3eb)}
.hero h1{text-shadow:0 2px 0 #78858935,0 4px 0 #142329,0 10px 25px #0005}
.hero h1 em{text-shadow:0 1px 0 #d06838,0 2px 0 #a54b21,0 3px 0 #7c351d,0 5px 0 #4f261b,0 12px 22px #0005}
.btn-primary,.nav-cta{box-shadow:0 3px 0 #ae4b22,0 5px 0 #692d1a,0 11px 22px #0003,inset 0 1px 0 #ffd4bb;transition:transform .2s,box-shadow .2s}
.btn-primary:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 5px 0 #ae4b22,0 7px 0 #692d1a,0 15px 24px #0004,inset 0 1px 0 #ffd4bb}
.btn-primary:active,.nav-cta:active{transform:translateY(3px);box-shadow:0 1px 0 #ae4b22,0 4px 8px #0003}
.step{border-bottom:5px solid #dce5df;box-shadow:0 4px 0 #cbd7cf,0 12px 24px #203b2310}
.step:hover{transform:perspective(1000px) rotateX(3deg) translateY(-6px);box-shadow:0 6px 0 #cbd7cf,0 22px 34px #203b2319}
.benefit{border-bottom:4px solid #d0ded4;box-shadow:0 5px 12px #18332207}
.motion-toggle{position:absolute;right:0;bottom:-5px;padding:7px 10px;border:1px solid #7590986b;border-radius:7px;background:#15292f;color:#b4c9d0;font-size:10px;line-height:1.4;z-index:9;cursor:pointer}
.motion-toggle:hover{background:#243c43;color:white}
.card-caption{text-align:left;width:calc(100% - 118px);font-size:10px;bottom:0;padding-left:5px}
[data-motion="paused"] .float{animation-play-state:paused}
[data-motion="paused"] .hero-photo,[data-motion="paused"] .tilt,[data-motion="paused"] .scene-label,[data-motion="paused"] .hero-photo img{transition:none}
@media(max-width:1150px){.tilt{width:295px}.float{left:-20px}.hero-photo{inset:8px 5px 51px 0}.scene-label{right:-8px}}
@media(max-width:850px){.hero-photo{inset:4px 4px 39px 0;transform:rotateX(4deg) rotateY(-9deg) rotateZ(1deg)}.float{bottom:75px;left:-12px}.scene-label{right:-9px}.card-caption{bottom:0}.motion-toggle{bottom:-5px}}
@media(max-width:520px){.tilt{width:255px;transform:rotateX(9deg) rotateY(13deg) rotateZ(-5deg)}.float{left:-7px;bottom:64px}.card{padding:17px}.hero-photo{border-radius:48px 14px 14px 14px;inset:4px 7px 39px 0;box-shadow:3px 3px 0 #46565c,6px 6px 0 #24343a,9px 9px 0 #0a1319,16px 22px 32px #0006}.scene-label{top:17px;right:-9px}.card-caption{font-size:9px;width:calc(100% - 103px)}.motion-toggle{font-size:9px;padding:7px 8px}.stage{margin-bottom:7px}}
@media(hover:none),(pointer:coarse){.tilt{transform:rotateX(9deg) rotateY(13deg) rotateZ(-5deg)}.hero-photo{transform:rotateX(4deg) rotateY(-9deg) rotateZ(1deg)}.float{animation-duration:11s}.step:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.float{animation:none}.hero-photo{transform:rotateY(-7deg)!important}.tilt{transform:rotateY(9deg) rotateZ(-3deg)!important}.scene-label{transform:rotate(-3deg)!important}.motion-toggle{display:none}.step:hover,.btn-primary:hover,.nav-cta:hover{transform:none}}