/* The energy line connects the central Mstar platform to the selected product. */
.home-hero-art .hero-lit-image{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;filter:brightness(1.42) saturate(1.2);-webkit-mask-image:radial-gradient(ellipse var(--light-width,23%) var(--light-height,26%) at var(--light-x,50%) var(--light-y,50%),#000 35%,transparent 100%);mask-image:radial-gradient(ellipse var(--light-width,23%) var(--light-height,26%) at var(--light-x,50%) var(--light-y,50%),#000 35%,transparent 100%);transition:opacity .24s ease}
.hero-art-stage[data-flow="hrm"]{--light-x:21%;--light-y:21%;--light-width:24%;--light-height:27%}
.hero-art-stage[data-flow="lms"]{--light-x:78%;--light-y:20%;--light-width:25%;--light-height:28%}
.hero-art-stage[data-flow="social"]{--light-x:17%;--light-y:60%;--light-width:24%;--light-height:27%}
.hero-art-stage[data-flow="crm"]{--light-x:51%;--light-y:82%;--light-width:24%;--light-height:24%}
.hero-art-stage[data-flow="screen"]{--light-x:85%;--light-y:61%;--light-width:24%;--light-height:27%}
.hero-art-stage[data-flow]:not([data-flow=""]) .hero-lit-image{opacity:1}
.hero-flow-lines{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.hero-flow{opacity:0;transition:opacity .18s ease}
.hero-flow-base,.hero-flow-beam{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero-flow-base{stroke:#bdfa66;stroke-width:12;opacity:.87}
.hero-flow-beam{stroke:#fff;stroke-width:5;stroke-dasharray:18 30;animation:hero-electric-flow .85s linear infinite}
.hero-art-stage[data-flow="hrm"] .hero-flow--hrm,.hero-art-stage[data-flow="lms"] .hero-flow--lms,.hero-art-stage[data-flow="social"] .hero-flow--social,.hero-art-stage[data-flow="crm"] .hero-flow--crm,.hero-art-stage[data-flow="screen"] .hero-flow--screen{opacity:1}
.hero-core-spark{fill:none;stroke:#f7ffcb;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:hero-core-twinkle 3.6s ease-in-out infinite}
.hero-core-spark--two{stroke-width:3;animation-delay:.8s}
.hero-core-spark--three{stroke-width:3;animation-delay:1.5s}
.hero-core-spark--four{stroke-width:3;animation-delay:2.2s}
.hero-core-spark--five{stroke-width:2.5;animation-delay:2.9s}
.hero-core-name{position:absolute;z-index:2;left:50%;top:52%;display:block;min-width:13%;padding:5px 9px;border:1px solid #bde88e;border-radius:6px;background:#014d28;color:#fff;font:800 clamp(11px,1.05vw,15px)/1.1 var(--body);letter-spacing:.01em;text-align:center;white-space:nowrap;pointer-events:none;transform:translate(-50%,-50%)}
.hero-hotspots{position:absolute;inset:0;z-index:2}
.hero-product{position:absolute;display:block;padding:0;border:0;background:transparent;cursor:pointer}
.hero-product--hrm{left:5%;top:2%;width:34%;height:37%}
.hero-product--lms{left:62%;top:1%;width:36%;height:38%}
.hero-product--social{left:0;top:42%;width:32%;height:40%}
.hero-product--crm{left:36%;top:64%;width:34%;height:35%}
.hero-product--screen{left:72%;top:43%;width:28%;height:39%}
.hero-hotspot-dot{position:absolute;left:50%;top:64%;display:block;width:21px;height:21px;border:2px solid #fff;border-radius:50%;background:#8cc63f;box-shadow:0 3px 10px rgba(0,0,0,.23);transform:translate(-50%,-50%);transition:transform .2s,background .2s}
.hero-product--hrm .hero-hotspot-dot{left:67%;top:82%}
.hero-product--lms .hero-hotspot-dot{left:28%;top:82%}
.hero-hotspot-dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#014d28}
.hero-hotspot-label{position:absolute;z-index:2;left:50%;top:calc(64% + 19px);width:max-content;max-width:180px;padding:9px 13px;border-radius:10px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18);color:#06472a;font:.8rem/1.3 var(--body);font-weight:800;opacity:0;pointer-events:none;transform:translate(-50%,-6px);transition:opacity .2s,transform .2s}
.hero-product--hrm .hero-hotspot-label{left:67%;top:auto;bottom:calc(18% + 19px)}
.hero-product--lms .hero-hotspot-label{left:28%;top:auto;bottom:calc(18% + 19px)}
.hero-product--social .hero-hotspot-label,.hero-product--crm .hero-hotspot-label,.hero-product--screen .hero-hotspot-label{top:auto;bottom:calc(36% + 19px)}
.hero-product--screen .hero-hotspot-label{left:auto;right:0;transform:translateY(6px)}
.hero-product:is(:hover,:focus-visible,.is-active){z-index:3}
.hero-product:is(:hover,:focus-visible,.is-active) .hero-hotspot-dot{background:#fff;transform:translate(-50%,-50%) scale(1.18)}
.hero-product:is(:hover,:focus-visible,.is-active) .hero-hotspot-label{opacity:1;transform:translate(-50%,0)}
.hero-product--screen:is(:hover,:focus-visible,.is-active) .hero-hotspot-label{transform:translateY(0)}
.hero-product:focus-visible{outline:0}
.hero-product:focus-visible .hero-hotspot-dot{outline:3px solid #fff;outline-offset:5px}
.home-hero-art.is-motion-paused .hero-flow-beam,.home-hero-art.is-motion-paused .hero-core-spark{animation-play-state:paused}
@keyframes hero-electric-flow{to{stroke-dashoffset:-48}}
@keyframes hero-core-twinkle{0%,24%,54%,100%{opacity:.08;transform:scale(.7)}36%{opacity:1;transform:scale(1.14)}44%{opacity:.48;transform:scale(.94)}}
@media(max-width:700px){.hero-core-name{top:52%;padding:3px 5px;font-size:11px}.hero-hotspot-dot{width:18px;height:18px}.hero-hotspot-dot::after{inset:4px}.hero-hotspot-label{max-width:138px;padding:7px 9px;font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.hero-flow-beam,.hero-core-spark{animation:none!important}.hero-flow-beam{stroke-dasharray:none}.hero-core-spark{opacity:.6}}