/* Round 4 motion layer styles. Off = finished picture, no transitions. */
.mstage{margin:34px auto 0;max-width:760px}
.mstage svg{width:100%;height:auto;display:block;overflow:visible}
.mstage .axis{stroke:var(--line);stroke-width:2}
.mstage .floor{stroke:#C0392B;stroke-width:2;stroke-dasharray:6 6;opacity:.7}
.mstage .ln{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.mstage .ln.hl{stroke:var(--hl,#2563A6)}
.mstage .ln.muted{stroke:#B8C3D1;stroke-width:4}
.mstage .dot{fill:var(--hl,#2563A6);stroke:#fff;stroke-width:3}
.mstage .dot.bad{fill:#C0392B}
.mstage .lab{font:700 var(--fs,15px) Poppins,sans-serif;fill:var(--ink)}
.mstage .lab.hl{fill:var(--hl,#2563A6)}.mstage .lab.muted{fill:var(--muted)}
.mstage .lab.bad{fill:#C0392B}.mstage .lab.good{fill:#16835A}
.mstage .note{font:500 var(--fn,12px) "DM Mono",monospace;fill:var(--muted)}
.mstage .chip rect{fill:var(--peach-soft,#FDEEE6);stroke:var(--peach,#E8855A);stroke-width:1.5}
.mstage .chip text{font:600 var(--fn,12px) Poppins,sans-serif;fill:var(--peach-d,#C46A43)}
.mstage .wk{fill:#fff;stroke:#C9D3DF;stroke-width:1.5;transition:fill .35s}
.mstage .wk.on{fill:var(--hl,#E8855A)}
.mstage .bk{fill:var(--ink)}
.mstage .kn{font:600 12px "DM Mono",monospace;fill:var(--muted);pointer-events:none}

/* home hero: three products, one at a time */
.range img{transition:opacity .9s ease,transform 3.2s ease}
.range img.on{opacity:1;transform:scale(1.02)}
.range img:not(.on){opacity:0}

/* steps: a line fills 1 → 3, each number pops as it is reached */
.mx-steps{position:relative}
.mx-steps::before{content:"";position:absolute;left:22px;top:24px;bottom:24px;width:3px;background:var(--line);border-radius:2px}
.mx-steps::after{content:"";position:absolute;left:22px;top:24px;width:3px;height:0;background:var(--hl,#2563A6);border-radius:2px;transition:height 1.4s cubic-bezier(.2,.8,.2,1)}
.mx-steps.go::after{height:calc(100% - 48px)}
.mx-steps .s3 b{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.mx-steps.go .s3:nth-child(1) b{transform:scale(1.12);transition-delay:.1s}
.mx-steps.go .s3:nth-child(2) b{transform:scale(1.12);transition-delay:.6s}
.mx-steps.go .s3:nth-child(3) b{transform:scale(1.12);transition-delay:1.1s}
.mx-steps .s3{position:relative;z-index:1}

/* cart feedback */
.jelly{animation:jelly .5s}
@keyframes jelly{30%{transform:scale(1.06,.94)}55%{transform:scale(.97,1.03)}80%{transform:scale(1.01,.99)}}
.cartcount.pop{animation:pop .45s}
@keyframes pop{40%{transform:scale(1.45)}}

/* product cards: lift = "this is clickable" */
html:not([data-motion=off]) .pcard{transition:transform .25s,box-shadow .25s}
html:not([data-motion=off]) .pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,30,51,.12)}
html:not([data-motion=off]) .pcard .ph.img img{transition:transform .6s}
html:not([data-motion=off]) .pcard:hover .ph.img img{transform:scale(1.04)}

/* OFF: finished state, no movement */
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{transition:none !important;animation:none !important}
html[data-motion=off] .mx-steps::after{height:calc(100% - 48px)}

/* X-RAY: label every element by how it was made */
html[data-motion=xray] [data-x]{outline:2px dashed var(--peach,#E8855A);outline-offset:3px;position:relative}
html[data-motion=xray] [data-x]::after{content:attr(data-x);position:absolute;top:6px;left:6px;z-index:5;font:700 10px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;padding:3px 7px;border-radius:5px}
html[data-motion=xray] [data-x=code]{outline-color:#16835A}
html[data-motion=xray] [data-x=screen]{outline-color:#2563A6}

/* home orbit: the whole range as one globe of real product images */
.orbit{background:radial-gradient(120% 90% at 50% 40%,#1B3354 0%,#0E1E33 70%);border-radius:24px;padding:10px 10px 0;box-shadow:0 30px 60px rgba(14,30,51,.18);overflow:hidden}
.orbit-stage{position:relative;height:clamp(360px,42vw,540px);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.orbit-stage.grab{cursor:grabbing}
.otile{position:absolute;left:0;top:0;padding:0;border:0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.35);cursor:pointer;will-change:transform,opacity;transform-origin:50% 50%}
.otile img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform .3s}
.otile:hover img,.otile:focus-visible img{transform:scale(1.06)}
.otile:hover,.otile:focus-visible{outline:3px solid var(--peach,#E8855A);outline-offset:2px}
.otile.play:hover,.otile.play:focus-visible{outline-color:#1E9E8E}
.orbit-hint{display:flex;justify-content:space-between;gap:12px;margin:0;padding:12px 10px 14px;font:500 11px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#9FB2CA}
.olight[hidden]{display:none}
.olight{position:fixed;inset:0;z-index:200;background:rgba(9,18,32,.82);display:grid;place-items:center;padding:16px}
.olight-card{position:relative;background:#fff;border-radius:18px;max-width:min(720px,100%);width:100%;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.olight-card img{display:block;width:100%;max-height:72vh;object-fit:contain;background:#F5F7FA}
.olight-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px}
.olight-bar b{font:700 17px Poppins,sans-serif;color:var(--navy,#0E1E33)}
.olight-bar span{display:flex;gap:8px;align-items:center}
.olight-prev,.olight-next{width:40px;height:40px;border-radius:50%;border:1px solid var(--line,#D9E1EA);background:#fff;font-size:22px;line-height:1;cursor:pointer}
.olight-x{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(14,30,51,.75);color:#fff;font-size:22px;cursor:pointer;z-index:2}
html:not([data-motion=off]) .olight:not([hidden]) .olight-card{animation:olin .28s cubic-bezier(.2,.8,.2,1)}
@keyframes olin{from{transform:scale(.94);opacity:0}}
@media (max-width:480px){.orbit-hint{letter-spacing:.04em;font-size:10px}.orbit-hint span{white-space:nowrap}}

/* feature callouts: spotlight dims in, ring lands, caption pops, ring pulses once */
.callshot .cring{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .8s ease}
.callshot .clabel{transition:opacity .35s ease .45s,transform .45s cubic-bezier(.3,1.5,.5,1) .45s}
html:not([data-motion=off]) .callshot:not(.go) .cring{opacity:0;transform:scale(1.18);box-shadow:0 0 0 200vmax rgba(9,18,32,0)}
html:not([data-motion=off]) .callshot:not(.go) .clabel{opacity:0;transform:translateY(8px) scale(.92)}
html:not([data-motion=off]) .callshot.go .cring{animation:ringpulse 1.6s ease 1.1s 1}
@keyframes ringpulse{40%{outline:6px solid rgba(245,184,61,.35);outline-offset:6px}100%{outline:6px solid rgba(245,184,61,0);outline-offset:14px}}

/* category tiles: covers fan out on hover = a preview of what's inside */
html:not([data-motion=off]) .cattile .cfan img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
html:not([data-motion=off]) .cattile:hover .cfan img,html:not([data-motion=off]) .cattile:focus-visible .cfan img{
  transform:translateX(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * 100px)) translateY(-6px) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 11deg))}
html:not([data-motion=off]) .cattile{transition:transform .25s,box-shadow .25s}
html:not([data-motion=off]) .cattile:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(14,30,51,.22)}

/* round 4b: bigger statement scenes */
.mstage{max-width:960px}
.mstage .lab.big{font:800 calc(var(--fs,15px) * 1.9) Poppins,sans-serif;fill:var(--ink);letter-spacing:-.02em}
.mstage .dot.good{fill:#16835A}
.mstage .burst{fill:none;stroke:var(--hl,#2563A6);stroke-width:3;opacity:.5}
.mstage .evpill rect{fill:#E5F3EC;stroke:#16835A;stroke-width:1.5}
.mstage .evpill text{font:700 var(--fn,12px) Poppins,sans-serif;fill:#0F6B49}
.mstage .chip.pay rect{fill:#E5F3EC;stroke:#16835A}
.mstage .chip.pay text{fill:#0F6B49}
.mstage .chip.mv rect{fill:#FDF1D8;stroke:#E0A21C;stroke-width:2}
.mstage .chip.mv text{fill:#8A5A00}
.mstage .floorband{fill:#C0392B;opacity:.05;transition:fill .5s,opacity .5s}
.mstage .floorband.hot{opacity:.16}
.mstage .floorband.ok{fill:#16835A;opacity:.1}
.mstage .mpop{transform-box:fill-box;transform-origin:center;animation:mpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes mpop{0%{opacity:0;transform:scale(.4)}100%{transform:scale(1)}}
.orbit-stage{isolation:isolate;z-index:0}