/* ============================================================================
   NEXORA · HERO VISUALS (V2026.188)
   Replaces the 3D connector cluster on Studio, Tool market, How it works,
   Community, Pulse and AI team. Two honest columns: the words on the left, a
   real view of the product on the right — a live plan, real tool covers, an
   example order, the sources, the board. It never overlaps the text: the
   visual has its own column, and below 1100 px it steps aside.
   Brand v1.0: square, 1px hairlines, no shadow, Lime for action, Purple for
   people, one 450 ms Resolve on arrival, nothing moves on its own after that.
   ========================================================================== */
.nxhv{display:none}
@media (min-width:1100px){
  .nxhv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);column-gap:clamp(48px,5vw,88px);align-items:center}
  .nxhv-grid>.nxhv-text{grid-column:1;min-width:0}
  .nxhv-grid>.nxhv{grid-column:2;grid-row:1;display:block;min-width:0}
  .nxhv-grid>:not(.nxhv-text):not(.nxhv){grid-column:1/-1}
}

/* ---------- surfaces ---------- */
.nxhv{--hv-bg:#0E0E0E;--hv-line:#2A2A28;--hv-ink:#F7F6F2;--hv-mute:#8E8E88;--hv-soft:#151515;color:var(--hv-ink)}
[data-nxhv="light"] .nxhv{--hv-bg:#FFFFFF;--hv-line:#E4E3DD;--hv-ink:#050505;--hv-mute:#6B6B67;--hv-soft:#F7F6F2}
.nxhv-card{background:var(--hv-bg);border:1px solid var(--hv-line);padding:22px 22px 20px;font:400 14px/1.45 var(--nx-text,system-ui)}
.nxhv-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--hv-line)}
.nxhv-mono,.nxhv-live,.nxhv-tag,.nxhv em{font:500 10.5px/1.25 var(--nx-mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--hv-mute)}
.nxhv-live{display:inline-flex;align-items:center;gap:8px;color:var(--hv-ink)}
.nxhv-dot{width:7px;height:7px;background:#DAFF03;display:inline-block;flex:0 0 auto}
.nxhv-tag{border:1px solid var(--hv-line);padding:5px 7px;color:var(--hv-ink)}

/* ---------- Studio · the plan, live ---------- */
.nxhv-brief{margin:0 0 18px;font:400 15px/1.5 var(--nx-text,system-ui);color:var(--hv-ink);min-height:3em}
.nxhv-flow{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:12px}
.nxhv-flow::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:1px;background:var(--hv-line);transform-origin:top}
.nxhv-flow li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:center}
.nxhv-flow b{position:relative;z-index:1;width:36px;height:36px;display:grid;place-items:center;background:var(--hv-soft);border:1px solid var(--hv-line);color:#DAFF03;font:500 15px/1 var(--nx-mono,monospace)}
.nxhv-flow li:first-child b{background:#DAFF03;border-color:#DAFF03;color:#050505}
.nxhv-flow span{display:grid;gap:3px;min-width:0;font:500 15px/1.3 var(--nx-text,system-ui);color:var(--hv-ink)}
.nxhv-flow span strong{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nxhv-foot{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hv-line);border:1px solid var(--hv-line);margin-top:20px}
.nxhv-foot>div{background:var(--hv-bg);padding:12px 14px;display:grid;gap:6px}
.nxhv-foot strong{font:500 22px/1 var(--nx-display,system-ui);letter-spacing:-.01em;color:var(--hv-ink);font-variant-numeric:tabular-nums}
.nxhv-match{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--hv-line);text-decoration:none;color:inherit}
.nxhv-avatar{width:36px;height:36px;display:grid;place-items:center;background:#B003E8;color:#fff;font:600 12px/1 var(--nx-mono,monospace)}
.nxhv-match span:nth-child(2){display:grid;gap:3px;font:500 14px/1.3 var(--nx-text,system-ui)}
.nxhv-match .go{font:500 13px/1 var(--nx-text,system-ui);color:#DAFF03;white-space:nowrap}
.nxhv-match:hover .go{text-decoration:underline;text-underline-offset:3px}

/* ---------- Tool market · real covers ---------- */
.nxhv-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nxhv-mosaic a{display:block;aspect-ratio:16/9;overflow:hidden;background:#121212;border:1px solid var(--hv-line)}
.nxhv-mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 450ms cubic-bezier(.2,0,0,1)}
.nxhv-cap{margin:14px 0 0;display:flex;align-items:center;gap:8px;font:500 11px/1.3 var(--nx-mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-mute)}
.nxhv-cap b{color:var(--hv-ink);font-weight:500}

/* ---------- How it works · an example order ---------- */
.nxhv-escrow{font:500 10.5px/1 var(--nx-mono,monospace);letter-spacing:.12em;text-transform:uppercase;background:#F2FFC2;color:#3B4500;padding:6px 8px;white-space:nowrap}
.nxhv-title{margin:0 0 4px;font:600 22px/1.2 var(--nx-display,system-ui);letter-spacing:-.01em;color:var(--hv-ink)}
.nxhv-sub{margin:0 0 18px;font:400 14px/1.4 var(--nx-text,system-ui);color:var(--hv-mute)}
.nxhv-track{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.nxhv-track li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;color:var(--hv-mute)}
.nxhv-track b{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--hv-line);font:500 12px/1 var(--nx-mono,monospace);color:var(--hv-mute)}
.nxhv-track li.done,.nxhv-track li.now{color:var(--hv-ink)}
.nxhv-track li.done b{background:#050505;border-color:#050505;color:#DAFF03}
.nxhv-track li.now b{border-color:#050505;color:#050505}
.nxhv-track span{display:grid;gap:3px;font:500 15px/1.35 var(--nx-text,system-ui)}
.nxhv-bar{height:2px;background:var(--hv-line);margin-top:20px;position:relative}
.nxhv-bar i{position:absolute;left:0;top:0;bottom:0;background:#050505}

/* ---------- Community · how reputation works ---------- */
.nxhv-steps3{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.nxhv-steps3 li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;font:500 15px/1.35 var(--nx-text,system-ui)}
.nxhv-steps3 b{height:32px;display:grid;place-items:center;border:1px solid var(--hv-line);font:500 12px/1 var(--nx-mono,monospace);color:#D98BFF}
.nxhv-badges{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px;border-top:1px solid var(--hv-line)}
.nxhv-badges span{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 10px;border:1px solid var(--hv-line);font:500 12.5px/1 var(--nx-text,system-ui);color:var(--hv-ink)}
.nxhv-badges span::before{content:"";width:6px;height:6px;background:#B003E8}

/* ---------- Pulse · where it reads from ---------- */
.nxhv-sources{list-style:none;margin:0;padding:0;display:grid}
.nxhv-sources li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--hv-line);font:500 15px/1.3 var(--nx-text,system-ui)}
.nxhv-sources li:first-child{padding-top:0}
.nxhv-sources li span{color:var(--hv-mute);font:400 13px/1.3 var(--nx-text,system-ui);text-align:right}
.nxhv-note{margin:14px 0 0;color:var(--hv-mute);font:400 13px/1.45 var(--nx-text,system-ui)}

/* ---------- AI team · the board ---------- */
.nxhv-board{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hv-line);border:1px solid var(--hv-line)}
.nxhv-board span{aspect-ratio:1;display:grid;place-items:center;background:#050505;color:#F7F6F2;font:500 clamp(18px,1.6vw,24px)/1 var(--nx-mono,monospace);letter-spacing:.04em}
.nxhv-board span:nth-child(2){background:#DAFF03;color:#050505}

/* ---------- motion: one Resolve on arrival, live updates on Studio ---------- */
@keyframes nxhvUp{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@keyframes nxhvDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:no-preference){
  .nxhv{animation:nxhvUp 450ms cubic-bezier(.2,0,0,1) 150ms both}
  .nxhv-flow.is-live li{animation:nxhvUp 220ms cubic-bezier(.2,0,0,1) both;animation-delay:calc(var(--i,0) * 90ms)}
  .nxhv-flow.is-live::before{animation:nxhvDraw 450ms cubic-bezier(.2,0,0,1) both}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .nxhv-mosaic a:hover img{transform:scale(1.04)}
}

/* ---------- Studio hero: plain-language chips and hint (no code look) ---------- */
html:not(#_) body .nxst-chip{font:400 13.5px/1.35 var(--nx-text,system-ui)!important;letter-spacing:0!important;text-transform:none!important}
html:not(#_) body .nxst-hint{font:400 13px/1.4 var(--nx-text,system-ui)!important;letter-spacing:0!important;text-transform:none!important;color:#8E8E88!important}
html:not(#_) body .nxhv-sources li{color:var(--hv-ink)}
/* the narrower Studio input shows its two-line example in full */
@media (min-width:1100px){html:not(#_):not(#_):not(#_) body .nxst-input{min-height:72px;font-size:18px}}

/* ---------- V2026.190 · particle shapes (nx-particles.js) ----------
   Five heroes swap their static visual for a particle shape (the static
   visual stays in the page and returns if WebGL is unavailable); Studio keeps
   its live plan card and the particles stream behind it. */
.nxpt-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
@media (min-width:1100px){
  .nxhv.nxpt-on{position:relative;height:clamp(440px,38vw,580px)}
  .nxhv.nxpt-on:not(.nxhv--studio)>:not(.nxpt-canvas){display:none}
  .nxhv--pulse.nxpt-on{height:clamp(380px,32vw,480px)}
  .nxhv--studio.nxpt-on{height:auto}
  .nxhv--studio .nxpt-canvas{inset:auto;left:-14%;top:-18%;width:130%;height:136%;z-index:0}
  .nxhv--studio .nxhv-card{position:relative;z-index:1}
}
@media (max-width:1099px){
  .nxhv.nxpt-small{display:block;position:relative;height:clamp(260px,62vw,360px);margin:24px 0 0}
  .nxhv.nxpt-small>:not(.nxpt-canvas){display:none}
}