/* Complete windows share the original glass frame and perspective. */
.hero-preview{--float-rise:-6px;position:relative;isolation:isolate;padding:8px;border-radius:19px;border-color:#c8ddff4d;background:linear-gradient(145deg,#b1ceff22,#4878d518 45%,#1e408630);box-shadow:0 2px 3px #07143820,0 18px 34px -16px #020d4a70,0 44px 75px -28px #020a3666,inset 0 1px 0 #e6f1ff30;backdrop-filter:blur(12px);animation:quiet-enter 1s var(--ease-out) .22s backwards,hero-window-float 9s cubic-bezier(.45,0,.55,1) 1.22s infinite}
@keyframes hero-window-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 var(--float-rise);rotate:.18deg}}
/* Two quiet back plates reveal the stack without adding another content block. */
.hero-preview:before,.hero-preview:after{content:"";position:absolute;inset:0;border:1px solid #b5d3ff22;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(125deg,#aacdff0a,#487be905)}
.hero-preview:before{transform:translate(8px,-9px) scale(.985);opacity:.8}
.hero-preview:after{transform:translate(16px,-17px) scale(.967);opacity:.45}
.hero-preview .preview-top{height:42px;padding:0 10px 5px;font-size:9px;letter-spacing:1.5px}
.hero-preview .preview-top>span:last-child{letter-spacing:.3px;padding:5px 9px;background:#aac7ff10;border:1px solid #bed6ff20;border-radius:6px;color:#d9e6ff}
.hero-preview .preview-bottom{min-height:46px;padding:10px 8px 2px;gap:10px;color:#c8d9fa}
.hero-preview .live-dot{width:5px;height:5px;background:#bcd4ff;box-shadow:0 0 0 3px #c0d8ff10}
/* Steady the window during interaction; the inner carousel remains independent. */
.hero-preview:focus-within{animation-play-state:running,paused}
@media(hover:hover){.hero-preview:hover{animation-play-state:running,paused}}
@media(max-width:480px){.hero-preview{--float-rise:-4px}}
.hero-deck{position:relative;aspect-ratio:1.56;overflow:hidden;border-radius:11px;background:#eaf0fb;touch-action:pan-y pinch-zoom;isolation:isolate;cursor:grab;box-shadow:0 0 0 1px #e3edff2e,0 7px 18px #020e3320}
.hero-deck .hero-slide{position:absolute;inset:0;width:100%;height:100%;border-radius:8px;will-change:transform,opacity;cursor:grab;user-select:none;-webkit-user-select:none}
.hero-deck .hero-slide img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.hero-deck.is-dragging,.hero-deck.is-dragging .hero-slide{cursor:grabbing}
.hero-caption{min-width:0;flex:1;line-height:1.6}
.hero-pagination{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0;padding:2px;border-radius:9px;background:#081b4d26;border:1px solid #a4c7ff17;box-shadow:inset 0 1px 0 #d9e8ff08}
.hero-arrow{display:grid;place-items:center;width:28px;height:27px;font-size:19px;line-height:1;border-radius:6px;background:transparent;color:#c1d1f8;transition:background .2s,color .2s,scale .2s}
.hero-arrow svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-arrow:active{scale:.9}
.hero-arrow:hover{background:#ffffff20;color:white}
.hero-dots{display:flex;align-items:center;gap:0}
.hero-dots button{display:grid;place-items:center;width:18px;height:26px;padding:0;background:transparent;border-radius:4px}
.hero-dots i{width:4px;height:4px;border-radius:4px;background:#b0c4f160;transition:width .45s cubic-bezier(.22,1,.36,1),background .3s}
.hero-dots button[aria-pressed=true] i{width:13px;background:#cfddff}
.hero-count{font-size:9px;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#b1c6f6;white-space:nowrap;margin-inline:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hero-preview button:focus-visible{outline:2px solid #e8f2ff;outline-offset:2px}
@media(max-width:800px){.hero-preview:before{transform:translate(5px,-7px) scale(.985)}.hero-preview:after{transform:translate(10px,-13px) scale(.967)}}
@media(max-width:480px){.hero-preview{padding:5px;border-radius:14px}.hero-preview .preview-top{height:32px;font-size:8px;letter-spacing:.9px;padding:0 6px 3px}.hero-preview .preview-top>span:last-child{padding:3px 6px;font-size:8px}.hero-preview .preview-bottom{min-height:37px;padding:6px 5px 1px;gap:6px}.hero-pagination{padding:1px;border-radius:7px}.hero-deck{border-radius:9px}}
@media(max-width:480px){.hero-pagination{gap:0}.hero-count{font-size:8px;letter-spacing:0;margin-inline:3px}.hero-dots{display:none}.hero-arrow{width:24px;height:25px;font-size:19px}.hero-caption{font-size:9px}.preview-bottom{gap:6px}}

/* Float the carrier; transition the complete glass window as a separate layer. */
.hero-stack{position:relative;min-width:0;isolation:isolate;--float-rise:-5px;animation:quiet-enter 1s var(--ease-out) .22s backwards,hero-carrier-float 8s ease-in-out 1.22s infinite}
@keyframes hero-carrier-float{0%,100%{translate:0 0}50%{translate:0 var(--float-rise)}}
.hero-stack.is-interacting{animation-play-state:running,paused}
.hero-stack>.hero-preview{animation:none;position:relative;width:100%;margin:0;z-index:3}
.hero-stack>.hero-window-outgoing,.hero-stack>.hero-window-rear{position:absolute;inset:0 auto auto 0;z-index:2;pointer-events:none}
.hero-stack>.hero-window-rear{z-index:1;translate:18px -24px;scale:.955;background:#224782;border-color:#b6d0ff52}
.hero-window-outgoing:before,.hero-window-outgoing:after{display:none}
.hero-stack>.hero-preview{backdrop-filter:none;-webkit-backdrop-filter:none;will-change:translate,scale;backface-visibility:hidden}
.hero-window-outgoing .hero-deck>img,.hero-window-rear .hero-deck>img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.hero-stack{clip-path:inset(-56px -130px -48px -48px)}
.hero-stack:before{content:"";position:absolute;inset:0;border:1px solid #c6dbff40;border-radius:19px;background:#20447e;transform:perspective(1500px) rotateY(-7deg) rotateX(2deg);translate:28px -42px;scale:.91;pointer-events:none}
.hero-stack>.hero-preview{background:linear-gradient(135deg,#264a84,#24468c 55%,#203e79);box-shadow:0 14px 30px -12px #020d4a60,inset 0 1px 0 #e6f1ff30}
.hero-stack>.hero-preview:before,.hero-stack>.hero-preview:after{display:none}
@media(max-width:800px){.hero-stack{width:min(640px,100%);margin:auto}}
@media(max-width:480px){.hero-stack{--float-rise:-3px}}