/* ==========================================================================
   Noesis landing
   ========================================================================== */
.nx code { font-family: var(--mono); font-size: 0.86em; color: var(--glow); background: rgba(var(--glow-rgb), 0.08); padding: 1px 6px; border-radius: 6px; }
.nx-h3 { font-size: var(--fs-h3); font-weight: 300; letter-spacing: -0.025em; line-height: 1.12; }
.nx-h3 em, .nx-hero__tag em { font-style: normal; color: var(--glow); }
.nx-label { color: var(--dim); margin-bottom: 16px; }
.nx-note { color: var(--dim); margin-top: 18px; }
.nx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- hero ---------- */
.nx-hero { position: relative; padding-top: clamp(120px, 12vw, 170px); padding-bottom: clamp(56px, 6vw, 90px); overflow: hidden; isolation: isolate; }
.nx-hero__grid-bg { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 10%, transparent 70%); opacity: 0.55; }
.nx-hero__grid-bg::after { content: ""; position: absolute; left: 62%; top: 38%; width: 60vw; height: 60vw; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(var(--glow-rgb), 0.12), transparent 60%); }
.nx-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.nx-hero__copy { display: grid; gap: 20px; justify-items: start; }
.nx-word { font-size: clamp(64px, 10.5vw, 168px); font-weight: 200; letter-spacing: 0.08em; line-height: 0.9; margin-left: -0.04em; color: var(--text); text-shadow: 0 0 60px rgba(var(--glow-rgb), 0.25); white-space: nowrap; }
.nx-word__ch { display: inline-block; min-width: 0.6em; text-align: center; }
.nx-word__ch.is-scr { color: var(--glow); font-family: var(--mono); font-weight: 300; font-size: 0.8em; }
.nx-by { color: var(--muted); margin-top: -10px; letter-spacing: 0.4em; }
.nx-hero__tag { font-size: clamp(24px, 2.2vw, 34px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.18; }
.nx-hero__copy .lead { max-width: 52ch; }
.nx-hero__vis { position: relative; perspective: 1400px; }
.nx-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-top: clamp(48px, 6vw, 90px); border-top: 1px solid var(--line); }
.nx-stat { padding: 26px 18px 0 0; display: grid; gap: 8px; align-content: start; }
.nx-stat + .nx-stat { padding-left: 18px; border-left: 1px solid var(--line); }
.nx-stat b { display: flex; align-items: flex-start; font-size: clamp(40px, 4.4vw, 68px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--text); }
.nx-stat b sup { font-size: 0.45em; color: var(--glow); margin-left: 4px; line-height: 1.2; }
.nx-stat > span { color: var(--muted); font-size: 14px; line-height: 1.35; }

/* ---------- runtime ---------- */
.nx-image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: start; padding: clamp(28px, 3.5vw, 52px); border-radius: 26px; background: var(--graphite); border: 1px solid var(--line); }
.nx-image__copy { display: grid; gap: 18px; }
.nx-image__copy p { color: var(--muted); font-size: 16.5px; line-height: 1.65; }
.nx-specs { list-style: none; margin: 0; padding: 0; display: grid; }
.nx-specs li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.nx-specs li:first-child { border-top: 1px solid var(--line); }
.nx-specs i { width: 8px; height: 8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px var(--glow); }
.nx-specs span { color: var(--muted); }
.nx-specs b { font-weight: 400; color: var(--text); }

.nx-edge { margin-top: clamp(80px, 9vw, 140px); }
.nx-edge__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; }
.nx-switch { display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--graphite); cursor: pointer; transition: border-color 0.4s; }
.nx-switch:hover { border-color: rgba(var(--glow-rgb), 0.5); }
.nx-switch__track { position: relative; width: 52px; height: 30px; border-radius: 999px; background: rgba(63, 224, 127, 0.18); transition: background 0.4s; }
.nx-switch__track i { position: absolute; top: 4px; left: 26px; width: 22px; height: 22px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px var(--signal); transition: left 0.5s var(--ease), background 0.4s, box-shadow 0.4s; }
.nx-switch[aria-pressed="false"] .nx-switch__track { background: rgba(255, 106, 77, 0.16); }
.nx-switch[aria-pressed="false"] .nx-switch__track i { left: 4px; background: var(--alert); box-shadow: 0 0 14px var(--alert); }
.nx-switch__label { color: var(--text); }
.nx-edge__stage { position: relative; display: grid; gap: clamp(70px, 9vw, 120px); padding: clamp(28px, 4vw, 56px); border-radius: 26px; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 0%, rgba(var(--glow-rgb), 0.08), transparent 60%), var(--ink-2); overflow: hidden; }
.nx-edge__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nx-wire { fill: none; stroke: var(--line-2); stroke-width: 1.4; transition: stroke 0.5s, opacity 0.5s; }
.nx-wire--lit { stroke: var(--glow); stroke-width: 2; stroke-dasharray: 6 18; animation: nx-flow 1.2s linear infinite; filter: drop-shadow(0 0 4px var(--glow)); }
@keyframes nx-flow { to { stroke-dashoffset: -24; } }
.is-off .nx-wire--lit { opacity: 0; }
.is-off .nx-wire:not(.nx-wire--lit) { stroke: rgba(255, 106, 77, 0.45); stroke-dasharray: 3 9; }
.nx-cloud { position: relative; justify-self: center; display: grid; justify-items: center; gap: 10px; padding: 22px 34px; border-radius: 22px; border: 1px solid rgba(var(--glow-rgb), 0.4); background: var(--graphite); box-shadow: 0 0 60px -14px rgba(var(--glow-rgb), 0.45); transition: all 0.6s var(--ease); }
.nx-cloud__ic img { width: 34px; }
.nx-cloud b { font-weight: 400; }
.nx-cloud__st { color: var(--signal); }
.is-off .nx-cloud { opacity: 0.45; border-color: rgba(255, 106, 77, 0.5); box-shadow: none; filter: grayscale(1); }
.is-off .nx-cloud__st { color: var(--alert); }
.nx-rooms { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nx-room { display: grid; gap: 8px; padding: 20px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--graphite); }
.nx-room > .mono { color: var(--dim); }
.nx-room b { font-weight: 400; font-size: 20px; }
.nx-room__st { color: var(--signal); display: flex; align-items: center; gap: 8px; }
.nx-room__st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: cv-blink 1.6s steps(2) infinite; }
.is-off .nx-room { border-color: rgba(var(--glow-rgb), 0.45); box-shadow: 0 0 40px -16px rgba(var(--glow-rgb), 0.5); }
.nx-journal { position: absolute; right: 22px; top: 22px; display: flex; align-items: baseline; gap: 8px; color: var(--dim); }
.nx-journal b { display: inline-block; font: 300 28px var(--font); color: var(--text); letter-spacing: -0.02em; min-width: 1.4em; text-align: right; }
.nx-edge__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.nx-card { padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: var(--graphite); display: grid; gap: 12px; align-content: start; transition: border-color 0.5s, box-shadow 0.5s; }
.nx-card h4 { font-size: 20px; font-weight: 400; }
.nx-card p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.nx-card__ic svg, .nx-svcs svg { width: 30px; height: 30px; fill: none; stroke: var(--glow); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nx-card.is-hot { border-color: rgba(var(--glow-rgb), 0.45); box-shadow: 0 0 50px -24px rgba(var(--glow-rgb), 0.7); }

/* ---------- connectivity ---------- */
.nx-conn__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.nx-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nx-medium { position: relative; padding: 24px; border-radius: 20px; background: var(--graphite); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; min-height: 230px; transition: border-color 0.5s; overflow: hidden; }
.nx-medium:hover { border-color: rgba(var(--glow-rgb), 0.4); }
.nx-medium__tag { color: var(--glow); }
.nx-medium h4 { font-size: 22px; font-weight: 400; }
.nx-medium p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.nx-sig { position: absolute; right: 22px; top: 22px; display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.nx-sig i { width: 3px; border-radius: 2px; background: var(--glow); animation: nx-sig 1.4s ease-in-out infinite; }
.nx-sig i:nth-child(1) { height: 30%; } .nx-sig i:nth-child(2) { height: 55%; animation-delay: 0.15s; } .nx-sig i:nth-child(3) { height: 80%; animation-delay: 0.3s; } .nx-sig i:nth-child(4) { height: 100%; animation-delay: 0.45s; }
@keyframes nx-sig { 50% { opacity: 0.25; } }
.nx-bay { position: relative; border-radius: 22px; background: radial-gradient(ellipse at 40% 30%, rgba(var(--glow-rgb), 0.1), transparent 65%), var(--ink-2); border: 1px solid var(--line); padding: 26px 26px 0; overflow: hidden; }
.nx-bay__ctrl { max-width: 520px; margin: 0 auto; }
.nx-bay__boot { min-height: 128px; padding: 16px 0 20px; display: grid; gap: 6px; align-content: start; color: var(--muted); text-transform: none; letter-spacing: 0.04em; font-size: 12px; }
.nx-bay__boot .is-ok { color: var(--signal); }
.nx-cards { display: grid; gap: 10px; margin-top: 12px; }
.nx-xcard { text-align: left; display: grid; gap: 6px; padding: 18px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--graphite); color: var(--text); cursor: pointer; transition: border-color 0.4s, background 0.4s; }
.nx-xcard b { font-weight: 400; font-size: 18px; }
.nx-xcard span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.nx-xcard.is-active { border-color: rgba(var(--glow-rgb), 0.55); background: linear-gradient(90deg, rgba(var(--glow-rgb), 0.08), transparent 70%), var(--graphite); }
.nx-xcard.is-active b { color: var(--glow); }

/* ---------- architecture ---------- */
.nx-arch { position: relative; }
.nx-arch__pin { min-height: 100vh; display: flex; align-items: center; padding: clamp(96px, 10vw, 140px) 0; }
.nx-arch__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.nx-rules { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 4px; counter-reset: r; }
.nx-rules li { position: relative; padding: 14px 0 14px 34px; border-top: 1px solid var(--line); counter-increment: r; transition: opacity 0.5s; opacity: 0.4; }
.nx-rules li::before { content: "✓"; position: absolute; left: 0; top: 14px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: var(--ink); background: var(--off-2); transition: background 0.4s, box-shadow 0.4s; }
.nx-rules li.is-on { opacity: 1; }
.nx-rules li.is-on::before { background: var(--glow); box-shadow: 0 0 14px var(--glow); }
.nx-rules b { font-weight: 400; font-size: 17px; }
.nx-rules p { color: var(--muted); font-size: 14.5px; line-height: 1.55; max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease), margin 0.6s var(--ease); }
.nx-rules li.is-on p { max-height: 120px; margin-top: 6px; }
.nx-stack { position: relative; height: clamp(380px, 40vw, 560px); display: grid; place-items: center; perspective: 1800px; transform-style: preserve-3d; }
.nx-stack { transform-style: preserve-3d; }
.nx-layer { position: absolute; width: min(100%, 460px); aspect-ratio: 1.7; border-radius: 22px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 6px 14px; padding: 22px 24px; background: linear-gradient(140deg, rgba(40, 40, 44, 0.7), rgba(18, 18, 20, 0.55)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); transition: border-color 0.6s, box-shadow 0.6s, background 0.6s; transform-style: preserve-3d; }
.nx-layer .mono { color: var(--dim); padding-top: 6px; }
.nx-layer b { font-weight: 300; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.02em; }
.nx-layer em { grid-column: 2; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.nx-layer.is-lit { border-color: rgba(var(--glow-rgb), 0.55); background: linear-gradient(140deg, rgba(72, 62, 48, 0.72), rgba(20, 19, 18, 0.5)); box-shadow: 0 0 60px -20px rgba(var(--glow-rgb), 0.55), 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.nx-layer.is-lit .mono { color: var(--glow); }

/* ---------- terminals / code ---------- */
.nx-term { position: relative; border-radius: 20px; background: #0c0c0e; border: 1px solid var(--line-2); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.nx-term__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.nx-term__bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--off); }
.nx-term__bar > .mono { margin-left: 10px; color: var(--muted); text-transform: none; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-live { margin-left: auto !important; display: inline-flex; align-items: center; gap: 6px; color: var(--signal) !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; flex: none; }
.nx-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); animation: cv-blink 1.2s steps(2) infinite; }
.nx-code { margin: 0; padding: 20px 22px 24px; font: 13px/1.75 var(--mono); color: #c9c4bc; white-space: pre; overflow-x: auto; scrollbar-width: thin; }
.nx-code--lines, .nx-api__term .nx-code { counter-reset: ln; }
.nx-code .ln { display: block; position: relative; padding-left: 40px; }
.nx-code .ln::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 24px; text-align: right; color: var(--dim); }
.t-k { color: #ffe3b8; } .t-s { color: #9fd8a8; } .t-n { color: #ffb547; } .t-kw { color: #c7a6ff; } .t-c { color: #5b5853; font-style: italic; } .t-p { color: #8f8b85; }
.nx-editor .nx-code.is-done .ln:last-child::after { content: ""; display: inline-block; width: 8px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--glow); animation: cv-blink 1s steps(2) infinite; }

/* ---------- components ---------- */
.nx-comp__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.nx-comp__list { display: grid; gap: 6px; }
.nx-comp__item { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--graphite); color: var(--text); text-align: left; cursor: pointer; overflow: hidden; transition: border-color 0.4s; }
.nx-comp__item b { font: 400 15px var(--mono); letter-spacing: 0.02em; }
.nx-comp__item .mono { color: var(--dim); }
.nx-comp__item i { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--glow); box-shadow: 0 0 10px var(--glow); transform: scaleY(0); transition: transform 0.5s var(--ease); }
.nx-comp__item.is-active { border-color: rgba(var(--glow-rgb), 0.45); }
.nx-comp__item.is-active b { color: var(--glow); }
.nx-comp__item.is-active i { transform: scaleY(1); }
.nx-term__desc { padding: 18px 22px 0; color: var(--muted); font-size: 15px; }
#nx-comp-term { position: sticky; top: 110px; }
#nx-comp-code { min-height: 220px; }

/* ---------- function blocks ---------- */
.nx-fbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nx-fb { position: relative; padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: var(--graphite); display: grid; gap: 12px; grid-template-rows: auto auto 1fr auto; transition: border-color 0.5s, transform 0.6s var(--ease); }
.nx-fb:hover { border-color: rgba(var(--glow-rgb), 0.45); }
.nx-fb__cat { color: var(--glow); }
.nx-fb h4 { font: 400 22px var(--font); letter-spacing: -0.01em; }
.nx-fb p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.nx-ports { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font: 11px var(--mono); color: var(--muted); letter-spacing: 0.04em; }
.nx-ports span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nx-ports span i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--glow); }
.nx-ports__wire { height: 1px; background: repeating-linear-gradient(90deg, var(--glow) 0 6px, transparent 6px 12px); background-size: 12px 1px; opacity: 0.5; animation: nx-wire 0.8s linear infinite; }
@keyframes nx-wire { to { background-position: 12px 0; } }
.nx-script { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(64px, 8vw, 120px); }
.nx-script__copy { display: grid; gap: 20px; }
.nx-script__copy p { color: var(--muted); font-size: 16.5px; line-height: 1.65; }

/* ---------- scenes ---------- */
.nx-scenes__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.nx-scene-tabs { display: grid; gap: 8px; }
.nx-stab { position: relative; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--graphite); color: var(--text); text-align: left; cursor: pointer; overflow: hidden; transition: border-color 0.4s; }
.nx-stab .mono { color: var(--dim); }
.nx-stab b { font-weight: 300; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.02em; }
.nx-stab em { font-style: normal; color: var(--dim); }
.nx-stab__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--glow); transform: scaleX(0); transform-origin: left; }
.nx-stab.is-active { border-color: rgba(var(--glow-rgb), 0.45); }
.nx-stab.is-active b, .nx-stab.is-active .mono:first-child { color: var(--glow); }
.nx-scene-run { padding: clamp(24px, 3vw, 40px); border-radius: 24px; border: 1px solid var(--line-2); background: radial-gradient(ellipse at 80% 0%, rgba(var(--glow-rgb), 0.1), transparent 60%), var(--ink-2); display: grid; gap: 28px; align-content: start; }
.nx-scene-run__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.nx-scene-run__head .mono { color: var(--dim); }
.nx-scene-run__head b { font-weight: 300; font-size: clamp(32px, 3.4vw, 52px); letter-spacing: -0.035em; }
.nx-scene-run__ms { margin-left: auto; color: var(--signal); }
.nx-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.nx-steps li { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); color: var(--muted); transition: color 0.4s, border-color 0.4s, background 0.4s; }
.nx-steps li i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--off-2); display: grid; place-items: center; transition: all 0.4s var(--ease); }
.nx-steps li.is-done { color: var(--text); border-color: rgba(var(--glow-rgb), 0.3); background: rgba(var(--glow-rgb), 0.05); }
.nx-steps li.is-done i { border-color: var(--glow); background: var(--glow); box-shadow: 0 0 12px var(--glow); }
.nx-steps li.is-done i::after { content: "✓"; font-size: 11px; color: var(--ink); font-style: normal; }
.nx-trig { display: grid; gap: 12px; }
.nx-trig > .mono { color: var(--dim); }
.nx-trig > div { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- flow editor ---------- */
.nx-canvas { position: relative; height: clamp(440px, 42vw, 560px); border-radius: 24px; border: 1px solid var(--line-2); background-color: var(--ink-2); background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 22px 22px; overflow: hidden; }
.nx-canvas__bar { position: absolute; z-index: 3; left: 16px; right: 16px; top: 14px; display: flex; align-items: center; gap: 8px; }
.nx-canvas__bar > span { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--graphite); color: var(--muted); }
.nx-deploy { margin-left: auto; padding: 9px 16px; border-radius: 10px; background: var(--btn-glow); color: #17120a; cursor: pointer; box-shadow: 0 0 24px -6px rgba(var(--glow-rgb), 0.7); transition: transform 0.3s var(--ease); }
.nx-deploy:hover { transform: translateY(-2px); }
.nx-canvas__scroll { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.nx-canvas__scroll::-webkit-scrollbar { display: none; }
.nx-canvas__board { position: relative; width: 100%; min-width: 760px; height: 100%; }
.nx-canvas__pan { display: none; }
.nx-canvas__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nx-edge { fill: none; stroke: rgba(var(--glow-rgb), 0.3); stroke-width: 1.6; }
.nx-edge--lit { stroke: var(--glow); stroke-width: 2.6; filter: drop-shadow(0 0 6px var(--glow)); stroke-dashoffset: 9999; stroke-dasharray: 9999; }
.nx-edge__dot { fill: var(--glow); filter: drop-shadow(0 0 4px var(--glow)); }
.nx-canvas__nodes { position: absolute; inset: 0; }
.nx-node { position: absolute; left: 0; top: 0; z-index: 2; width: clamp(130px, 13vw, 168px); display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--graphite); border: 1px solid var(--line-2); cursor: grab; user-select: none; touch-action: none; transition: border-color 0.3s, box-shadow 0.3s; will-change: transform; }
.nx-node .mono { color: var(--dim); font-size: 10px; text-transform: none; letter-spacing: 0.04em; }
.nx-node b { font-weight: 400; font-size: 14.5px; }
.nx-node em { font-style: normal; color: var(--glow); font-size: 10px; }
.nx-node--block { border-color: rgba(var(--glow-rgb), 0.3); }
.nx-node--scene { background: linear-gradient(140deg, rgba(var(--glow-rgb), 0.16), var(--graphite)); border-color: rgba(var(--glow-rgb), 0.5); }
.nx-node__in, .nx-node__out { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--glow); }
.nx-node__in { left: -5px; } .nx-node__out { right: -5px; }
.nx-node.is-drag { cursor: grabbing; border-color: var(--glow); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8), 0 0 30px -10px rgba(var(--glow-rgb), 0.6); z-index: 4; }
.nx-node.is-hit { border-color: var(--glow); box-shadow: 0 0 40px -6px rgba(var(--glow-rgb), 0.8); }
.nx-canvas__note { position: absolute; z-index: 3; left: 18px; bottom: 14px; pointer-events: none; color: var(--dim); text-transform: none; letter-spacing: 0.04em; }

/* ---------- modbus ---------- */
.nx-mb { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.nx-mb__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; position: sticky; top: 120px; }
.nx-mb__steps > li:not(.nx-mb__chips) { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); opacity: 0.4; transition: opacity 0.5s; }
.nx-mb__steps > li > .mono { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--muted); transition: all 0.4s; }
.nx-mb__steps > li.is-on { opacity: 1; }
.nx-mb__steps > li.is-on > .mono { background: var(--glow); color: var(--ink); border-color: var(--glow); box-shadow: 0 0 16px rgba(var(--glow-rgb), 0.6); }
.nx-mb__steps b { font-weight: 400; font-size: 18px; }
.nx-mb__steps p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-top: 6px; }
.nx-mb__chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.nx-mb__panels { display: grid; gap: 16px; }
.nx-regs__tools { display: flex; gap: 8px; padding: 16px 22px 0; }
.nx-regs__tools button, .nx-regs__add { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--muted); cursor: pointer; transition: color 0.3s, border-color 0.3s; }
.nx-regs__tools button:hover, .nx-regs__add:hover { color: var(--text); border-color: rgba(var(--glow-rgb), 0.5); }
.nx-regs__t { width: calc(100% - 44px); margin: 16px 22px 0; border-collapse: collapse; font: 13px var(--mono); }
.nx-regs__t th { text-align: left; font-weight: 400; color: var(--dim); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 8px; border-bottom: 1px solid var(--line-2); }
.nx-regs__t td { padding: 12px 8px; border-bottom: 1px solid var(--line); color: #c9c4bc; }
.nx-regs__t td:first-child { color: var(--glow); }
.nx-regs__live { color: var(--signal) !important; }
.nx-regs__live.is-flash { animation: nx-flash 0.8s var(--ease); }
@keyframes nx-flash { from { background: rgba(63, 224, 127, 0.22); } }
.nx-regs__add { margin: 14px 22px 0; border-style: dashed; }
.nx-regs__note { padding: 16px 22px 22px; color: var(--muted); font-size: 14.5px; }

/* ---------- store ---------- */
.nx-store__tabs { margin-top: 0; }
.nx-store__desc { color: var(--muted); margin: 22px 0 32px; min-height: 1.6em; }
.nx-pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.nx-pkg { display: grid; gap: 12px; padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--graphite); transition: border-color 0.4s; }
.nx-pkg:hover { border-color: rgba(var(--glow-rgb), 0.4); }
.nx-pkg__top { display: flex; justify-content: space-between; align-items: center; }
.nx-pkg__ab { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 13px; color: var(--glow); background: rgba(var(--glow-rgb), 0.08); border: 1px solid rgba(var(--glow-rgb), 0.3); letter-spacing: 0.06em; }
.nx-pkg__sub { color: var(--dim); }
.nx-pkg h4 { font-weight: 400; font-size: 20px; }
.nx-pkg p { color: var(--muted); font-size: 14.5px; line-height: 1.55; min-height: 4.6em; }
.nx-pkg__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.nx-pkg__foot > .mono { color: var(--dim); }
.nx-imp { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); cursor: pointer; transition: border-color 0.3s, background 0.3s, color 0.3s; }
.nx-imp:hover { border-color: rgba(var(--glow-rgb), 0.6); }
.nx-imp svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.nx-imp circle { fill: none; stroke: var(--glow); stroke-width: 2.2; stroke-dasharray: 50.3; stroke-dashoffset: 50.3; }
.nx-imp.is-done { background: rgba(63, 224, 127, 0.1); border-color: rgba(63, 224, 127, 0.5); color: var(--signal); }
.nx-imp.is-done circle { stroke: var(--signal); stroke-dashoffset: 0; fill: rgba(63, 224, 127, 0.25); }

/* ---------- configuration app ---------- */
.nx-app { border-radius: 22px; border: 1px solid var(--line-2); background: #0c0c0e; overflow: hidden; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02); }
.nx-app__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.nx-app__bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--off); }
.nx-app__url { margin: 0 auto; padding: 6px 16px; border-radius: 8px; background: var(--fill); color: var(--muted); text-transform: none; letter-spacing: 0.04em; }
.nx-app__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 420px; }
.nx-app__side { display: grid; align-content: start; gap: 2px; padding: 18px 12px; border-right: 1px solid var(--line); }
.nx-app__side img { width: 26px; margin: 0 10px 18px; }
.nx-app__side a { padding: 10px 12px; border-radius: 10px; color: var(--muted); font-size: 14px; cursor: pointer; transition: background 0.3s, color 0.3s; }
.nx-app__side a:hover { color: var(--text); }
.nx-app__side a.is-active { background: var(--fill-2); color: var(--text); }
.nx-app__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px; align-content: start; }
.nx-tile { position: relative; display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--graphite); min-height: 150px; }
.nx-tile > .mono { color: var(--dim); text-transform: none; letter-spacing: 0.03em; font-size: 10.5px; }
.nx-tile > .mono em { font-style: normal; color: var(--glow); }
.nx-tile b { font-weight: 400; font-size: 17px; }
.nx-tile b em { font-style: normal; color: var(--glow); margin-left: 6px; }
.nx-tile__big { font-weight: 300; font-size: 38px; letter-spacing: -0.03em; }
.nx-tile__occ { color: var(--signal); }
.nx-toggle { position: absolute; right: 18px; bottom: 18px; width: 52px; height: 30px; border-radius: 999px; background: var(--off); cursor: pointer; transition: background 0.4s; }
.nx-toggle i { position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: left 0.45s var(--ease), background 0.4s, box-shadow 0.4s; }
.nx-toggle.is-on { background: rgba(var(--glow-rgb), 0.25); }
.nx-toggle.is-on i { left: 26px; background: var(--glow); box-shadow: 0 0 14px var(--glow); }
.nx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin-top: 22px; border-radius: 6px; background: linear-gradient(90deg, var(--glow) var(--v, 72%), var(--off) var(--v, 72%)); cursor: pointer; }
.nx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 4px rgba(var(--glow-rgb), 0.25); }
.nx-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--text); }
.nx-cur { display: flex; gap: 6px; margin-top: 6px; }
.nx-cur button { flex: 1; padding: 8px 0; border-radius: 10px; border: 1px solid var(--line-2); color: var(--muted); font-size: 13px; cursor: pointer; transition: color 0.3s, border-color 0.3s; }
.nx-cur button:hover { color: var(--text); border-color: rgba(var(--glow-rgb), 0.5); }
.nx-cur__bar { height: 4px; border-radius: 4px; background: var(--off); overflow: hidden; }
.nx-cur__bar i { display: block; height: 100%; background: var(--glow); transform-origin: left; }

/* ---------- api ---------- */
.nx-api__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.nx-api__side { display: grid; gap: 28px; }
.nx-ns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nx-ns span { padding: 16px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--graphite); font: 13px var(--mono); color: var(--muted); text-align: center; transition: color 0.4s, border-color 0.4s, box-shadow 0.4s; }
.nx-ns span:hover, .nx-ns span.is-ping { color: var(--glow); border-color: rgba(var(--glow-rgb), 0.5); box-shadow: 0 0 30px -12px rgba(var(--glow-rgb), 0.7); }
.nx-sec { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-api__tabs { gap: 4px; }
.nx-api__tabs button { padding: 7px 12px; border-radius: 9px; color: var(--muted); cursor: pointer; transition: color 0.3s, background 0.3s; }
.nx-api__tabs button.is-active { color: var(--ink); background: var(--glow); }
.nx-api__tabs .nx-copy { margin-left: auto; border: 1px solid var(--line-2); }
.nx-api__term .nx-code { min-height: 330px; }

/* ---------- services + summary ---------- */
.nx-svcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nx-svcs article { position: relative; display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: var(--graphite); overflow: hidden; isolation: isolate; transition: border-color 0.4s; }
.nx-svcs article::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(260px circle at var(--mx, -300px) var(--my, -300px), rgba(var(--glow-rgb), 0.12), transparent 70%); }
.nx-svcs article:hover { border-color: rgba(var(--glow-rgb), 0.35); }
.nx-svcs h4 { font-weight: 400; font-size: 19px; margin-top: 8px; }
.nx-svcs p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.nx-table { margin: 0; border-top: 1px solid var(--line-2); }
.nx-table > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.nx-table dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--glow); padding-top: 4px; }
.nx-table dd { margin: 0; color: var(--text); font-size: 17px; line-height: 1.55; }

/* ---------- dock ---------- */
.nx-dock { position: fixed; z-index: 60; left: 50%; bottom: 20px; display: flex; gap: 2px; padding: 5px; max-width: calc(100vw - 32px); border-radius: 999px; background: var(--glass); border: 1px solid var(--line-2); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8); transform: translate(-50%, 140%); opacity: 0; transition: transform 0.7s var(--ease), opacity 0.5s; overflow-x: auto; scrollbar-width: none; }
.nx-dock::-webkit-scrollbar { display: none; }
.nx-dock.is-on { transform: translate(-50%, 0); opacity: 1; }
.nx-dock a { position: relative; z-index: 1; flex: none; padding: 10px 16px; border-radius: 999px; font-size: 13.5px; color: var(--muted); transition: color 0.4s; }
.nx-dock a.is-active { color: var(--ink); }
.nx-dock__pill { position: absolute; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 999px; background: var(--glow); box-shadow: 0 0 20px -4px rgba(var(--glow-rgb), 0.8); opacity: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-stat:nth-child(4) { border-left: 0; padding-left: 0; }
  .nx-stat:nth-child(n+4) { margin-top: 24px; border-top: 1px solid var(--line); }
  .nx-fbs, .nx-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-app__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .nx-hero__inner, .nx-image, .nx-conn__grid, .nx-arch__grid, .nx-comp__grid, .nx-script, .nx-scenes__grid, .nx-mb, .nx-api__grid { grid-template-columns: minmax(0, 1fr); }
  .nx-hero__vis { order: -1; max-width: 520px; width: 100%; margin: 0 auto; }
  .nx-word { font-size: clamp(56px, 17vw, 110px); }
  .nx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-stat:nth-child(n) { border-left: 0; padding-left: 0; margin-top: 0; border-top: 0; }
  .nx-stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .nx-stat:nth-child(n+3) { margin-top: 20px; border-top: 1px solid var(--line); }
  .nx-rooms, .nx-edge__cards, .nx-fbs, .nx-pkgs, .nx-svcs { grid-template-columns: minmax(0, 1fr); }
  .nx-rooms { gap: 10px; }
  .nx-edge__stage { gap: 64px; }
  .nx-journal { position: static; justify-self: center; }
  .nx-media { grid-template-columns: minmax(0, 1fr); }
  .nx-medium { min-height: 0; }
  .nx-arch__pin { min-height: 0; padding: 96px 0; }
  .nx-stack { height: auto; display: grid; gap: 10px; perspective: none; margin-top: 28px; }
  .nx-layer { position: relative; width: 100%; aspect-ratio: auto; padding: 18px 20px; }
  .nx-rules p { max-height: none; margin-top: 6px; }
  #nx-comp-term, .nx-mb__steps { position: static; }
  .nx-code { font-size: 11.5px; padding: 16px; }
  .nx-code .ln { padding-left: 30px; }
  .nx-canvas { height: 520px; }
  .nx-node { width: 132px; padding: 10px 12px; }
  .nx-canvas__pan { display: inline; }
  .nx-canvas__bar > span:not(:first-child) { display: none; }
  .nx-regs__t { font-size: 11px; width: calc(100% - 24px); margin: 12px; }
  .nx-regs__t th:nth-child(5), .nx-regs__t td:nth-child(5), .nx-regs__t th:nth-child(4), .nx-regs__t td:nth-child(4) { display: none; }
  .nx-app__body { grid-template-columns: minmax(0, 1fr); }
  .nx-app__side { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; scrollbar-width: none; }
  .nx-app__side img { display: none; }
  .nx-app__side a { flex: none; }
  .nx-app__tiles { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .nx-table > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .nx-table dd { font-size: 15.5px; }
  .nx-api__tabs { overflow-x: auto; scrollbar-width: none; }
  .nx-api__tabs > i { display: none; }
  .nx-dock { bottom: 12px; }
}