/* Home hero slider: rotating rings, product pictures and a changing caption. */
.hero-stage{position:relative;width:min(620px,88vw);aspect-ratio:1/1;margin:0 auto 104px;z-index:2}
.hero-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.hero-rings circle,.hero-rings path{fill:none;vector-effect:non-scaling-stroke}
.hero-rings .r-base{stroke:rgba(255,255,255,.16);stroke-width:1}
.hero-rings .r-dash{stroke:rgba(255,255,255,.26);stroke-width:1;stroke-dasharray:3 13;stroke-linecap:round}
.hero-rings .r-dash2{stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:22 14}
.hero-rings .r-thin{stroke:rgba(255,255,255,.10);stroke-width:1}
.hero-rings .r-arc{stroke:#1d8fe8;stroke-width:6;stroke-linecap:round;opacity:.95}
.hero-rings .r-arc.thin{stroke-width:4;opacity:.75}
.hero-rings .r-arc.faint{stroke:#62c9f4;stroke-width:2;opacity:.55}
.hero-rings .r-dot{fill:#8dd6fb;stroke:none}
.hero-rings .r-dot.soft{fill:#62c9f4;opacity:.8}
.hero-rings .r-spin{transform-box:view-box;transform-origin:50% 50%}
.hero-rings .a{animation:heroSpin 70s linear infinite}
.hero-rings .b{animation:heroSpin 110s linear infinite reverse}
.hero-rings .c{animation:heroSpin 48s linear infinite}
@keyframes heroSpin{to{transform:rotate(360deg)}}
.hero-slides{position:absolute;inset:0;z-index:2}
.hero-stage .hero-slide{position:absolute;inset:0;margin:0;display:grid;place-items:center;opacity:0;pointer-events:none;transform:scale(.88) rotate(-7deg);transition:opacity .7s ease,transform .95s cubic-bezier(.2,.7,.2,1)}
.hero-stage .hero-slide.is-prev{transform:scale(.88) rotate(7deg)}
.hero-stage .hero-slide.is-active{opacity:1;transform:none}
.hero-stage .hero-slide img{display:block;width:71%;height:71%;max-width:none;object-fit:contain;transform:none;filter:drop-shadow(0 26px 24px rgba(0,0,0,.38))}
.hero-stage .hero-slide.is-active img{animation:heroFloat 6s ease-in-out infinite alternate}
@keyframes heroFloat{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
.hero-meta{position:absolute;left:0;right:0;top:100%;padding-top:26px;text-align:center;z-index:3}
.hero-caps{position:relative;min-height:62px}
.hero-cap{position:absolute;left:0;right:0;top:0;margin:0;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .6s ease;pointer-events:none}
.hero-cap.is-active{opacity:1;transform:none;pointer-events:auto}
.hero-cap b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8dd6fb;font-weight:700}
.hero-cap span{display:block;margin-top:7px;font-size:17px;line-height:1.4;color:#e8f3fb}
.hero-dots{display:flex;justify-content:center;gap:9px;margin-top:12px}
.hero-dot{width:9px;height:9px;padding:0;border:0;border-radius:6px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .3s,background .3s}
.hero-dot:hover{background:rgba(255,255,255,.6)}
.hero-dot.is-active{width:28px;background:#62c9f4}
.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:700px){.hero-stage{margin-bottom:112px}.hero-cap span{font-size:15px}}
@media(prefers-reduced-motion:reduce){.hero-rings .r-spin,.hero-stage .hero-slide.is-active img{animation:none}.hero-stage .hero-slide,.hero-cap{transition:opacity .2s}}