/* How it works: server → Axis Edge → your devices, one light pulse per beat. */
.nxh{--stage:280px;max-width:1120px;margin-inline:auto}
.nxh-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(36px,.34fr) minmax(0,1fr) minmax(36px,.34fr) minmax(0,1.16fr);align-items:start}
.nxh-st{text-align:center;min-width:0}
.nxh-stage{position:relative;height:var(--stage);display:grid;place-items:center;margin-bottom:18px}
.nxh-link{align-self:start;margin-top:calc(var(--stage) / 2 - 1px)}

/* 1. server */
.nxh-server{width:min(100%,318px)}
.nxh-led{left:44%;top:56%;width:52%;height:14%;transform:rotate(-13deg);--o0:.25;--o1:.45;opacity:.45}
.nxh-online{position:absolute;left:50%;bottom:34px;z-index:3;transform:translateX(-50%);font-size:12px;padding:6px 12px 6px 10px}

/* 2. Axis Edge */
.nxh-shield{width:min(64%,176px);--nx-pool:.34}
.nxh-mark{left:14%;top:21%;width:64%;height:48%;--o0:.15;--o1:.35;opacity:.35}
.nxh-signin{position:absolute;z-index:3;left:calc(50% + 34px);bottom:-4px;width:max-content;min-width:154px;padding:11px 10px 10px;box-sizing:border-box;border-radius:14px;display:grid;gap:5px;text-align:left}
.nxh-signin b{display:block;margin:0 2px 4px;font:600 11.5px/1.2 'DM Sans',sans-serif;color:#eef2f0;letter-spacing:-.01em}
.nxh-opt{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font:500 10.5px/1 'DM Sans',sans-serif;color:#c3cac7;white-space:nowrap}
.nxh-opt svg{width:12px;height:12px;flex:none;color:#dfe5e2}
.nxh-opt-hit{position:relative}
.nxh-opt-hit::after{content:"";position:absolute;inset:-1px;border-radius:8px;border:1px solid rgba(55,205,188,.75);box-shadow:0 0 0 3px rgba(55,205,188,.12),0 0 18px rgba(55,205,188,.25);opacity:0}

/* 3. devices: official Apple bezels showing real Axis captures */
.nxh-devices{position:relative;width:min(100%,322px);aspect-ratio:100/56;margin-top:6px}
.nxh-mac{position:absolute;left:0;bottom:0;width:84%;aspect-ratio:3/2}
.nxh-phone{position:absolute;z-index:3;right:7%;bottom:0;width:22%;aspect-ratio:800/1633;filter:drop-shadow(-10px 14px 18px rgba(0,0,0,.85))}
.nxh-bezel{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none;user-select:none}
.nxh-screen{position:absolute;overflow:hidden;background:#05070a}
.nxh-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;filter:brightness(.82) saturate(.95)}
.nxh-mac-screen{left:9.4366%;top:10.669%;width:81.1268%;height:78.662%}
.nxh-mac-screen img{object-position:center top}
.nxh-phone-screen{left:5.102%;top:2.2%;width:89.796%;height:95.6%;border-radius:12%/5.6%}
.nxh-wake{position:absolute;inset:0;background:linear-gradient(180deg,rgba(132,228,216,.16),rgba(55,205,188,0) 60%);mix-blend-mode:screen;opacity:0}
.nxh-pool{position:absolute;left:8%;right:4%;bottom:-6%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(55,205,188,.42),rgba(55,205,188,0));filter:blur(20px);opacity:.3;z-index:-1}
.nxh-in{position:absolute;z-index:4;left:4px;top:18px;opacity:1}

/* beats: 1 server→edge, 2 edge→devices */
.nx.is-live .nxh-led{animation:nx-boot var(--nx-cycle) ease-out infinite}
.nx.is-live .nxh-mark{animation:nx-arrive1 var(--nx-cycle) ease-out infinite}
.nx.is-live .nxh-opt-hit::after{--o1:0;animation:nx-arrive1 var(--nx-cycle) ease-out infinite}
.nx.is-live .nxh-wake{--o1:0;animation:nx-arrive2 var(--nx-cycle) ease-out infinite}
.nx.is-live .nxh-pool{--o0:.3;--o1:.42;animation:nx-arrive2 var(--nx-cycle) ease-out infinite}
.nx.is-live .nxh-in{animation:nx-pop2 var(--nx-cycle) cubic-bezier(.2,.8,.2,1) infinite}
.nx.nx-armed:not(.is-live) .nxh-in{opacity:0}

@media (max-width:1100px){.nxh{--stage:250px}.nxh-signin{left:auto;right:-8px;bottom:-6px;transform:scale(.84);transform-origin:100% 100%}.nxh-shield{transform:translateX(-14%)}}
@media (max-width:860px){
  .nxh{--stage:230px;max-width:400px}
  .nxh-server{width:min(78%,280px)}
  .nxh-online{bottom:4px}
  .nxh-row{grid-template-columns:1fr;justify-items:center;row-gap:0}
  .nxh-st{width:100%}
  .nxh-link{flex:none;width:2px;height:46px;min-width:0;margin:14px 0}
  .nxh-link::before{background:linear-gradient(180deg,rgba(132,228,216,0),rgba(132,228,216,.26) 14%,rgba(132,228,216,.26) 86%,rgba(132,228,216,0))}
  .nxh-link i{top:0;left:50%;width:2px;height:44px;max-width:none;margin:0 0 0 -1px;background:linear-gradient(180deg,rgba(55,205,188,0),#37cdbc 68%,#e9fffb);transform:translateY(-100%)}
  .nx.is-live .nxh-link[data-w="1"] i{animation-name:nx-w1v}
  .nx.is-live .nxh-link[data-w="2"] i{animation-name:nx-w2v}
  .nxh-signin{left:auto;right:0;bottom:4px;transform:scale(.92)}
  .nxh-shield{transform:translateX(-22%)}
}