/* iCube Labs hero motion: four scenes that tell one story.
   Order: 1 Your building (C) → 2 The server (A) → 3 The setup (B) → 4 The plan (D)
   Each scene plays Map → Install → Tune → Run, then cross-fades to the next. */
.hm{position:relative;height:600px;border-radius:28px;overflow:hidden;background:#050B1C;isolation:isolate}
.hm .sc{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.hm .sc.on{opacity:1;visibility:visible;transition:opacity .7s ease}
.hm svg text{font-family:var(--sans)}
.hm .navyBg{background:radial-gradient(circle at 50% 35%,#0E2A66 0%,#081633 45%,#050B1C 100%)}
.hm .gridBg:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(86,214,252,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(86,214,252,.07) 1px,transparent 1px);background-size:28px 28px;-webkit-mask:radial-gradient(circle at 50% 45%,#000 30%,transparent 75%);mask:radial-gradient(circle at 50% 45%,#000 30%,transparent 75%)}

/* scene tabs */
.hm .hm-tabs{position:absolute;left:18px;right:18px;top:16px;z-index:8;display:flex;gap:6px;flex-wrap:wrap}
.hm .hm-tabs button{font:500 12px var(--sans);height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(5,11,28,.55);color:rgba(255,255,255,.7);cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hm .hm-tabs button.on{background:#fff;color:#07122B;border-color:#fff}
.hm.lt-on .tabs button{border-color:rgba(7,18,43,.16);background:rgba(255,255,255,.7);color:#2E3A52}
.hm.lt-on .tabs button.on{background:#0B5BDB;border-color:#0B5BDB;color:#fff}
.hm .hm-tabs button:focus-visible{outline:2px solid #56D6FC;outline-offset:2px}

/* step rail */
.hm .steps{position:absolute;left:20px;right:20px;bottom:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;z-index:6}
.hm .steps div{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:10px 10px 0;border-top:2px solid rgba(255,255,255,.14);color:rgba(255,255,255,.4);transition:all .5s}
.hm .steps div b{display:block;font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;font-weight:500;margin-top:3px}
.hm .steps div.on{border-color:#56D6FC;color:#fff}
.hm .lt .steps div{border-color:rgba(7,18,43,.16);color:#5E6A80}
.hm .lt .steps div.on{border-color:#0B5BDB;color:#07122B}
.hm .chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:999px;background:#fff;color:#07122B;box-shadow:0 10px 24px -12px rgba(7,18,43,.45);white-space:nowrap}
.hm .chip i{width:8px;height:8px;border-radius:50%;background:var(--orb)}

/* ---------- scene C · your building ---------- */
.hm-c .bp{fill:none;stroke:rgba(86,214,252,.55);stroke-width:1.5;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2s ease}
.hm-c:not([data-s="-1"]) .bp{stroke-dashoffset:0}
.hm-c .cube{transition:transform 1.2s cubic-bezier(.6,0,.2,1),opacity .6s}
.hm-c[data-s="-1"] .cube,.hm-c[data-s="0"] .cube{opacity:0;transform:translateY(-120px)}
.hm-c .ring{fill:none;stroke:#56D6FC;opacity:0;transform-box:fill-box;transform-origin:center}
.hm-c:not([data-s="-1"]):not([data-s="0"]) .ring{animation:hmRing 2.4s infinite}
.hm-c .ring.r2{animation-delay:1.2s!important}
@keyframes hmRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.8);opacity:0}}
.hm-c .doc{opacity:0;transform-box:view-box}
.hm-c[data-s="2"] .doc{animation:hmFly 1.6s ease-in infinite}
@keyframes hmFly{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
.hm-c .hm-agent{position:absolute;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:all .7s cubic-bezier(.3,1.4,.5,1);left:50%;top:45%;z-index:4}
.hm-c[data-s="3"] .hm-agent{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}
.hm-c[data-s="3"] .hm-agent:nth-of-type(2){transition-delay:.12s}.hm-c[data-s="3"] .hm-agent:nth-of-type(3){transition-delay:.24s}.hm-c[data-s="3"] .hm-agent:nth-of-type(4){transition-delay:.36s}
.hm-c .wall{fill:none;stroke:rgba(255,255,255,.35);stroke-dasharray:4 7;opacity:0;transition:opacity .8s}
.hm-c[data-s="3"] .wall{opacity:1}
.hm-c .count{position:absolute;left:0;right:0;top:62px;text-align:center;color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.06em;z-index:4}
.hm-c .count b{color:#56D6FC;font-weight:500}

/* ---------- scene A · the server ---------- */
.hm-a .cube{position:absolute;width:118px;left:50%;top:70px;margin-left:-59px;transition:transform 1.4s cubic-bezier(.6,0,.2,1);filter:drop-shadow(0 20px 30px rgba(30,155,240,.55));z-index:3}
.hm-a[data-s="-1"] .cube,.hm-a[data-s="0"] .cube{transform:translateY(-10px) rotate(-6deg)}
.hm-a[data-s="1"] .cube,.hm-a[data-s="2"] .cube,.hm-a[data-s="3"] .cube{transform:translateY(140px) scale(.62)}
.hm-a .cable{fill:none;stroke:#56D6FC;stroke-width:2;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s ease}
.hm-a[data-s="2"] .cable,.hm-a[data-s="3"] .cable{stroke-dashoffset:0}
.hm-a .led{fill:#1b3566}
.hm-a:not([data-s="-1"]):not([data-s="0"]) .led{animation:hmLed 1.2s infinite}
@keyframes hmLed{0%,100%{fill:#56D6FC}50%{fill:#1E5BB8}}
.hm-a .node{opacity:.35;transition:opacity .6s}
.hm-a[data-s="2"] .node,.hm-a[data-s="3"] .node{opacity:1}
.hm-a .floor{stroke:rgba(86,214,252,.35);fill:rgba(30,155,240,.06);stroke-dasharray:6 6}
.hm-a[data-s="0"] .floor{animation:hmScan 1.6s infinite}
@keyframes hmScan{50%{stroke:rgba(86,214,252,.9)}}
.hm-a .pkt{opacity:0}
.hm-a[data-s="2"] .pkt,.hm-a[data-s="3"] .pkt{opacity:1}
.hm-a .stat{position:absolute;right:22px;top:62px;width:230px;opacity:0;transform:translateY(10px);transition:all .6s;z-index:4}
.hm-a[data-s="3"] .stat{opacity:1;transform:none}
.hm-a .lbl{position:absolute;left:22px;top:62px;z-index:4}

/* ---------- scene B · the setup ---------- */
.hm-b{background:linear-gradient(160deg,#EAF2FE,#F7F9FC 60%)}
.hm-b .con{position:absolute;left:30px;right:30px;top:64px;bottom:104px;background:#07122B;border-radius:18px;box-shadow:0 40px 80px -30px rgba(7,18,43,.55);overflow:hidden;color:rgba(255,255,255,.8);font-family:var(--mono);font-size:12.5px}
.hm-b .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:11px;color:rgba(255,255,255,.5)}
.hm-b .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.hm-b .bar .chip{margin-left:auto;font-family:var(--sans);font-size:11.5px;padding:3px 10px;opacity:0;transition:opacity .5s}
.hm-b[data-s="3"] .bar .chip{opacity:1}
.hm-b .bar img{width:18px;margin-left:10px}
.hm-b .body{padding:16px 18px;display:flex;flex-direction:column;gap:11px}
.hm-b .ln{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;opacity:0;transform:translateY(6px);transition:all .45s}
.hm-b .ln.on{opacity:1;transform:none}
.hm-b .ln .ok{color:#56D6FC}
.hm-b .ln .pb{grid-column:2/4;height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:2px}
.hm-b .ln .pb s{display:block;height:100%;width:0;background:var(--spectrum);transition:width 1.6s ease}
.hm-b .ln.on .pb s{width:100%}
.hm-b .ln em{font-style:normal;color:rgba(255,255,255,.45)}
.hm-b .agents{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.hm-b .agents span{font-family:var(--sans);font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid rgba(86,214,252,.35);color:#fff;opacity:0;transform:scale(.9);transition:all .4s}
.hm-b .agents.on span{opacity:1;transform:none}
.hm-b .agents.on span:nth-child(2){transition-delay:.15s}.hm-b .agents.on span:nth-child(3){transition-delay:.3s}
.hm-b .cur{display:inline-block;width:7px;height:14px;background:#56D6FC;vertical-align:-2px;animation:hmBlink 1s steps(1) infinite}
@keyframes hmBlink{50%{opacity:0}}

/* ---------- scene D · the plan ---------- */
.hm-d{background:#F2F6FC;padding:62px 20px 0}
.hm-d .board{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:420px}
.hm-d .pn{position:relative;background:#fff;border:1px solid rgba(7,18,43,.09);border-radius:18px;overflow:hidden;transition:all .6s;opacity:.45;filter:saturate(.3)}
.hm-d .pn.on{opacity:1;filter:none;box-shadow:0 30px 60px -28px rgba(11,91,219,.55);border-color:rgba(11,91,219,.35);transform:translateY(-3px)}
.hm-d .pn.past{opacity:.9;filter:none}
.hm-d .pn .h{position:absolute;left:14px;top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5E6A80}
.hm-d .pn .h b{color:#0B5BDB;font-weight:500}
.hm-d .pn svg{position:absolute;inset:0;width:100%;height:100%}
.hm-d .draw{fill:none;stroke:#0B5BDB;stroke-width:2;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.8s ease}
.hm-d .pn.on .draw,.hm-d .pn.past .draw{stroke-dashoffset:0}
.hm-d .slot{transition:transform 1.2s cubic-bezier(.6,0,.2,1),opacity .6s}
.hm-d .p2:not(.on):not(.past) .slot{transform:translateY(-60px);opacity:0}
.hm-d .fill{transition:width 2s ease;width:0}
.hm-d .p3.on .fill,.hm-d .p3.past .fill{width:180px}
.hm-d .bar3{transition:height 1.2s ease}
.hm-d .p4:not(.on):not(.past) .bar3{height:0!important}
.hm-d .p4 .call{position:absolute;right:12px;bottom:12px;opacity:0;transition:opacity .6s .6s}
.hm-d .p4.on .call{opacity:1}

@media (max-width:1000px){.hm{height:560px}.hm-c .hm-agent{font-size:11.5px}}
@media (max-width:560px){
 .hm{height:520px;border-radius:22px}
 .hm .hm-tabs button{height:26px;padding:0 9px;font-size:11px}
 .hm .steps div{font-size:9px;padding:8px 4px 0}.hm .steps div b{font-size:11px}
 .hm-c[data-s="3"] .hm-agent{transform:translate(calc(-50% + var(--x)*.62),calc(-50% + var(--y)*.62)) scale(.88)}
 .hm-a .stat{width:200px;right:12px}
 .hm-b .con{left:14px;right:14px;font-size:10.5px}.hm-b .ln em{display:none}
 .hm-d .board{height:360px}
}
@media (prefers-reduced-motion:reduce){.hm *{animation:none!important;transition:none!important}}
@media (max-width:560px){
 .hm .hm-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;left:12px;right:12px;top:12px}
 .hm .hm-tabs::-webkit-scrollbar{display:none}
 .hm .hm-tabs button{flex:none}
 .hm-c .count{top:50px;font-size:11px}
 .hm-a .lbl{top:50px;left:12px}.hm-a .stat{top:88px}
 .hm-b .con{top:52px}
 .hm-d{padding-top:50px}
}
/* one-scene version on service pages (no tabs) */
.hm-solo .hm-c .count{top:26px}
.hm-solo .hm-a .lbl{top:22px}.hm-solo .hm-a .stat{top:22px}
.hm-solo .hm-b .con{top:26px}
.hm-solo .hm-d{padding-top:22px}
.hm-solo .hm-d .board{height:440px}
.phero .hm{height:560px}
.phero.dark .hm{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
@media (max-width:560px){.phero .hm{height:520px}.hm-solo .hm-d .board{height:380px}}
/* status card keeps its own colours on dark pages */
.hm .stat{color:#2E3A52}.hm .stat .h{color:#5E6A80}.hm .stat b{color:#07122B}.hm .stat .rows div span:first-child{color:#5E6A80}.hm .stat .rows div span:last-child{color:#07122B}
.hm-solo .hm-b .con{bottom:132px}
.hm-solo .hm-b .body{gap:9px;padding-top:14px}