.hero-product{--base-x:4deg;--base-y:-8deg;--base-z:0deg;--tilt-x:0deg;--tilt-y:0deg;--light-x:50%;--light-y:45%;--lift:0px;perspective:1500px}
.hero-surface{position:relative;isolation:isolate;border:1px solid #466075;border-radius:9px;background:#191e26;transform:translateY(var(--lift)) rotateY(calc(var(--base-y) + var(--tilt-y))) rotateX(calc(var(--base-x) + var(--tilt-x))) rotateZ(var(--base-z));transform-style:preserve-3d;box-shadow:0 30px 60px -28px #0b1e3299,0 12px 24px -14px #0b1e3255;transition:transform 650ms cubic-bezier(.2,.75,.2,1),box-shadow 650ms ease}
.hero-product .hero-surface img{width:100%;height:auto;display:block;transform:none;border:0;border-radius:8px;box-shadow:none;user-select:none;-webkit-user-drag:none}
.hero-surface::before{content:"";position:absolute;inset:0;z-index:1;border-radius:8px;pointer-events:none;background:radial-gradient(ellipse at 15% 0%,#c9ebff13,transparent 60%);box-shadow:inset 0 1px 0 #d9edff40,inset 1px 0 0 #b8dfff20}
.hero-surface::after{content:"";position:absolute;inset:0;z-index:2;border-radius:8px;pointer-events:none;background:radial-gradient(440px circle at var(--light-x) var(--light-y),#e5f6ff26 0%,#58c6ef12 30%,transparent 68%);opacity:0;transition:opacity 500ms ease}
.hero-product.is-lit{--lift:-5px}.hero-product.is-lit .hero-surface{transition:transform 150ms ease-out,box-shadow 500ms ease;box-shadow:0 36px 70px -30px #0b1e32aa,0 14px 28px -16px #0b1e3266}.hero-product.is-lit .hero-surface::after{opacity:1;transition:opacity 300ms ease}
@media(max-width:760px){.hero-product{--base-x:2deg;--base-y:-4deg;--base-z:0deg}}
@media(prefers-reduced-motion:reduce){.hero-surface,.hero-product.is-lit .hero-surface{transition:none;transform:rotateY(var(--base-y)) rotateX(var(--base-x)) rotateZ(var(--base-z))}.hero-surface::after{display:none}}