/* Option 1: two independent translucent geometric planes. */
.hero-glass{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 82% 48%,#dfedf3 0%,transparent 65%)}
.glass-layer{position:absolute;will-change:transform;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.glass-layer-back{width:540px;height:590px;left:57%;top:-125px}
.glass-layer-front{width:550px;height:490px;left:67%;top:180px}
.glass-plane{width:100%;height:100%;border-radius:42px;border:1px solid rgba(255,255,255,.95);background:linear-gradient(130deg,rgba(255,255,255,.82),rgba(210,231,241,.24) 55%,rgba(180,210,225,.36));box-shadow:inset 2px 2px 2px #ffffffc9,inset -1px -1px 1px #9bbcc348,15px 24px 55px #54788c12;transform:rotate(-18deg)}
.glass-layer-front .glass-plane{transform:rotate(20deg);background:linear-gradient(140deg,#ffffff91,#dfedf44d 48%,#b7d3df59);border-color:#ffffffcf;box-shadow:inset 2px 2px 2px #ffffffe0,inset -1px -1px 1px #8cafbe3d,12px 25px 60px #426c821c;backdrop-filter:blur(3px)}
.hero-grid{z-index:1}
@media(min-width:1600px){.glass-layer-back{left:53%;width:610px;height:610px}.glass-layer-front{left:66%;width:600px;height:520px}}
@media(max-width:1000px){.glass-layer-back{left:48%;width:430px}.glass-layer-front{left:66%;width:420px}}
@media(max-width:767px){.glass-layer-back{left:45%;top:-70px;width:310px;height:430px}.glass-layer-front{left:32%;top:400px;width:380px;height:420px}.glass-layer{will-change:auto}}
@media(prefers-reduced-motion:reduce){.glass-layer{transition:none;will-change:auto}}