/* hub map (dynamic) */
.hm{position:relative;margin:30px 0 8px}
.hm-stage{position:relative;aspect-ratio:1410/840;width:100%;border-radius:10px;overflow:hidden;background:radial-gradient(120% 90% at 55% 45%,#121a24 0%,#0b0e13 55%,#0b0b0b 100%);border:1px solid #1d232b}
.hm-dots,.hm-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.hm-dots{-webkit-mask-image:radial-gradient(ellipse 75% 78% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 75% 78% at 50% 50%,#000 62%,transparent 100%)}
.hm-zone{opacity:var(--o,.2);transition:opacity .4s}
.is-live .hm-zone{animation:hm-breathe 6s ease-in-out infinite}
.hm-zone.on{opacity:.95!important;animation:none}
@keyframes hm-breathe{0%,100%{opacity:var(--o,.2)}50%{opacity:calc(var(--o,.2) * .55)}}
.hm-zl{font:600 15px/1 Montserrat,Helvetica,Arial,sans-serif;letter-spacing:.06em;fill:#ffd2b8;text-transform:uppercase;opacity:0;transition:opacity .3s;pointer-events:none;paint-order:stroke;stroke:#0b0b0b;stroke-width:4px}
.hm-zl.on{opacity:.95}
.hm-arc{fill:none;stroke:#FF5B01;stroke-width:1.4;stroke-opacity:.38;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke-opacity .3s}
.hm-flow{fill:none;stroke:#ffb48a;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:0 1;transition:opacity .3s}
.hm.is-sel .hm-arc{stroke-opacity:.1}.hm.is-sel .hm-flow{opacity:.12}
.hm.is-sel .hm-arc.on{stroke-opacity:.85}.hm.is-sel .hm-flow.on{opacity:1}
.hm-pins{position:absolute;inset:0}
.hm-pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:opacity .3s}
.hm-dot{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#FF5B01;box-shadow:0 0 0 2px rgba(11,11,11,.9),0 0 12px rgba(255,91,1,.75)}
.hm-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid #FF5B01;opacity:0}
.is-live .hm-dot::after{animation:hm-pulse 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.hm-pin:nth-child(2) .hm-dot::after{animation-delay:.4s}.hm-pin:nth-child(3) .hm-dot::after{animation-delay:.8s}.hm-pin:nth-child(4) .hm-dot::after{animation-delay:1.2s}.hm-pin:nth-child(5) .hm-dot::after{animation-delay:1.6s}.hm-pin:nth-child(6) .hm-dot::after{animation-delay:2s}.hm-pin:nth-child(7) .hm-dot::after{animation-delay:2.4s}
@keyframes hm-pulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(3.4);opacity:0}}
.hm-pl{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:-4px;white-space:nowrap;font:600 .7rem/1 Montserrat,Helvetica,Arial,sans-serif;letter-spacing:.05em;color:#cfcfcf;text-transform:uppercase;pointer-events:none;text-shadow:0 1px 3px #000}
.hm-pin[data-hub=mar] .hm-pl{top:auto;bottom:100%;margin:0 0 -4px}
.hm-pin.on .hm-dot,.hm-pin:hover .hm-dot,.hm-pin:focus-visible .hm-dot{transform:scale(1.35);background:#ff7a2e}
.hm-pin.on .hm-pl{color:#fff}
.hm.is-sel .hm-pin:not(.on){opacity:.55}
.hm-pin:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hm-dot{transition:transform .2s,background .2s}
.hm-card{position:absolute;z-index:3;width:290px;max-width:calc(100% - 16px);background:rgba(18,20,24,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #2b3038;border-top:3px solid #FF5B01;border-radius:8px;padding:16px 18px 14px;color:#ddd;box-shadow:0 18px 40px rgba(0,0,0,.45);animation:hm-in .22s ease-out}
.hm-card h4{color:#fff;margin:.15em 0 .5em;font-size:1.25rem}
.hm-kind{display:block;color:#FF5B01;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding-right:24px}
.hm-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:.84rem;line-height:1.4}
.hm-card dt{color:#8d96a3;font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.hm-card dd{margin:0;color:#e6e6e6}
.hm-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;background:transparent;color:#9aa3ae;font-size:1.3rem;line-height:1;cursor:pointer;border-radius:50%}
.hm-x:hover,.hm-x:focus-visible{color:#fff;background:#262a31}
@keyframes hm-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.hm-chips::before{content:"Tap a hub";align-self:center;color:#8a8a8a;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-right:4px}
.hm-chip{font:600 .8rem/1 Montserrat,Helvetica,Arial,sans-serif;color:#d6d6d6;background:#141414;border:1px solid #2c2c2c;border-radius:999px;padding:9px 13px;cursor:pointer;touch-action:manipulation;transition:border-color .2s,background .2s,color .2s}
.hm-chip:hover{border-color:#555}
.hm-chip[aria-pressed=true]{background:#FF5B01;border-color:#FF5B01;color:#fff}
.hm-slot .hm-card{position:relative;width:auto;max-width:none;margin-top:12px;left:auto;top:auto}
.hm-cap{color:#8a8a8a;font-size:.8rem;margin:12px 0 0}
.hm-cap a{color:#cfcfcf}
.hm-fail .hm-chips,.hm-fail .hm-cap{display:none}
.hm-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#222;border:1px solid #222;border-radius:8px;overflow:hidden;margin:28px 0 30px}
.hm-stat{background:#0f0f0f;padding:20px 18px 18px}
.hm-stat b{display:block;font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;font-size:clamp(2rem,4vw,2.8rem);line-height:1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-stat b i{font-style:normal}
.hm-stat b small{font-family:Montserrat,Helvetica,Arial,sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#FF5B01;vertical-align:middle;margin-right:2px}
.hm-stat b .u{color:#FF5B01;font-style:normal}
.hm-stat > span{display:block;margin-top:8px;color:#a9a9a9;font-size:.82rem;line-height:1.35}
@media (max-width:760px){.hm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hm-pl,.hm-zl{display:none}.hm-pin{width:26px;height:26px;margin:-13px 0 0 -13px}.hm-dot{width:8px;height:8px;margin:-4px 0 0 -4px}.hm-stage{border-radius:8px}.hm-stat{padding:16px 14px}}
@media (prefers-reduced-motion:reduce){.is-live .hm-zone,.is-live .hm-dot::after{animation:none}.hm-card{animation:none}}
