/* Nexomark scenes: per-service visual environments, the AI orb, the service explorer and the contact page.
   Loaded only where a scene appears. Everything here is decorative and readable without motion:
   the resting state of every animation is a finished, sensible picture. */

/* ------------------------------------------------------------------ palettes (animatable) */
@property --sa { syntax: '<color>'; inherits: true; initial-value: #5b8cff; }
@property --sb { syntax: '<color>'; inherits: true; initial-value: #56e6ff; }
@property --sc { syntax: '<color>'; inherits: true; initial-value: #9b7cff; }
:root { --sa: #5b8cff; --sb: #56e6ff; --sc: #9b7cff; }
.nxm-family-ai, [data-family="ai"]               { --sa: #4d7cff; --sb: #4de8ff; --sc: #9b6bff; --amb-a: rgb(77 124 255 / .22); --amb-b: rgb(155 107 255 / .16); }
.nxm-family-marketing, [data-family="marketing"] { --sa: #c06bff; --sb: #ff5fae; --sc: #ffa24c; --amb-a: rgb(255 95 174 / .16); --amb-b: rgb(192 107 255 / .16); }
.nxm-family-growth, [data-family="growth"]       { --sa: #ffb547; --sb: #ff8a5c; --sc: #ffd166; --amb-a: rgb(255 138 92 / .15); --amb-b: rgb(255 181 71 / .10); }
.nxm-family-search, [data-family="search"]       { --sa: #2fe0a8; --sb: #3fd0ff; --sc: #6f7dff; --amb-a: rgb(47 224 168 / .13); --amb-b: rgb(111 125 255 / .14); }
.nxm-family-build, [data-family="build"]         { --sa: #e3e9f5; --sb: #7aa2ff; --sc: #a58bff; --amb-a: rgb(122 162 255 / .14); --amb-b: rgb(227 233 245 / .07); }
.nxm-family-commerce, [data-family="commerce"]   { --sa: #ffcf5c; --sb: #3ddc97; --sc: #ff7aa8; --amb-a: rgb(61 220 151 / .13); --amb-b: rgb(255 207 92 / .10); }
/* the whole page takes the family accent: eyebrows, icons, gradient words, focus rings */
body[class*="nxm-family-"] { --lg-cyan: var(--sb); --lg-violet: var(--sc); --lg-blue: var(--sa); }

/* ------------------------------------------------------------------ hero with a scene */
.nxm-phero.has-scene { padding-top: clamp(112px, 15vh, 150px); padding-bottom: clamp(24px, 5vh, 56px); }
.nxm-phero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.nxm-phero__grid h1 { font-size: clamp(2.3rem, 1.1rem + 2.7vw, 4.1rem); max-width: 16ch; }
body[class*="nxm-family-"] .nxm-phero::before {
	background: radial-gradient(50% 70% at 85% 0%, color-mix(in srgb, var(--sa) 22%, transparent), transparent 70%),
	            radial-gradient(40% 60% at 100% 60%, color-mix(in srgb, var(--sc) 16%, transparent), transparent 70%),
	            radial-gradient(30% 40% at 70% 20%, color-mix(in srgb, var(--sb) 12%, transparent), transparent 70%);
}
.nxm-scene--flow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 1.6em; background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
.nxm-phero__scene { min-width: 0; }
@media (max-width: 1099px) {
	.nxm-phero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.nxm-phero__scene { width: min(100%, 560px); justify-self: center; }
}

/* ------------------------------------------------------------------ scene frame */
.nxm-scene {
	--px: 0; --py: 0;
	position: relative; isolation: isolate; width: 100%; aspect-ratio: 560 / 500; container-type: inline-size;
	font: 500 clamp(9.5px, 2.35cqw, 14px)/1.35 var(--font-text); color: var(--lg-ink); user-select: none;
}
.nxm-scene__amb {
	position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
	background: radial-gradient(45% 45% at 55% 45%, color-mix(in srgb, var(--sa) 26%, transparent), transparent 70%),
	            radial-gradient(40% 40% at 25% 75%, color-mix(in srgb, var(--sc) 20%, transparent), transparent 70%);
	filter: blur(10px);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.nxm-scene__amb { background: radial-gradient(45% 45% at 55% 45%, rgb(91 140 255 / .22), transparent 70%); }
}
.nxm-scene [data-depth] { translate: calc(var(--px) * var(--d, 0) * 1px) calc(var(--py) * var(--d, 0) * 1px); transition: translate 900ms cubic-bezier(.2, .7, .2, 1); }
.nxm-scene.is-tracking [data-depth] { transition-duration: 300ms; }

.nx-card {
	position: absolute; border-radius: 1.25em; padding: 1em 1.1em;
	background: rgb(9 12 24 / .78);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px rgb(255 255 255 / .08), 0 24px 50px -24px rgb(0 0 0 / .8);
}
@media (hover: hover) and (pointer: fine) {
	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.nx-card { background: rgb(9 12 24 / .62); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
	}
}
.nx-k { margin: 0 0 .35em; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; color: rgb(245 247 255 / .7); }
.nx-t { margin: 0 0 .5em; font: 650 1.12em/1.2 var(--font-display); letter-spacing: -.01em; }
.nx-pill {
	position: absolute; display: inline-flex; align-items: center; gap: .5em; padding: .55em .95em .55em .65em; border-radius: 999px;
	background: rgb(6 8 16 / .86); white-space: nowrap; font-size: .9em;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 16px 40px -18px rgb(0 0 0 / .8), 0 0 24px -8px var(--sa);
}
.nx-pill svg { width: 1.3em; height: 1.3em; fill: none; stroke: var(--sb); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-live { font-style: normal; display: inline-flex; align-items: center; gap: .35em; font-size: .82em; color: var(--sb); }
.nx-live::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.nx-avatar { display: inline-block; width: 1.6em; height: 1.6em; border-radius: 50%; background: linear-gradient(135deg, var(--sa), var(--sc)); flex: none; }
.nx-note { position: absolute; right: .4em; bottom: -.2em; font-size: .72em; letter-spacing: .06em; text-transform: uppercase; color: rgb(245 247 255 / .5); }
.nx-chart { display: block; width: 100%; height: 5.5em; }
.nx-chart__area { fill: rgb(91 140 255 / .2); fill: color-mix(in srgb, var(--sa) 22%, transparent); }
.nx-chart__line { fill: none; stroke: var(--sb); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.nx-center { position: absolute; }

/* ------------------------------------------------------------------ the orb (CSS version; WebGL draws over it where available) */
.nxm-orb { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; isolation: isolate; container-type: inline-size; }
.nxm-orb__css {
	position: absolute; inset: 0; border-radius: 50%; overflow: hidden; transition: opacity 700ms ease, scale 700ms cubic-bezier(.2, .9, .3, 1.1);
	background: radial-gradient(circle at 50% 55%, #070a1c 0 38%, #0e1238 72%, #1a1f55);
	box-shadow: 0 0 70px -14px var(--sa), 0 0 120px -40px var(--sc), inset 0 0 30px rgb(255 255 255 / .06);
}
.nxm-orb__css i { position: absolute; inset: -14%; border-radius: 44% 56% 52% 48% / 48% 44% 56% 52%; mix-blend-mode: screen; filter: blur(12px); filter: blur(7cqw); }
.nxm-orb__css i:nth-child(1) { background: radial-gradient(closest-side at 34% 38%, var(--sa), transparent 72%); }
.nxm-orb__css i:nth-child(2) { background: radial-gradient(closest-side at 66% 58%, var(--sc), transparent 72%); }
.nxm-orb__css i:nth-child(3) { background: radial-gradient(closest-side at 48% 74%, var(--sb), transparent 66%); }
.nxm-orb__css i:nth-child(4) { inset: 4%; opacity: .7; background: radial-gradient(closest-side at 70% 30%, rgb(255 110 199 / .85), transparent 70%), radial-gradient(closest-side at 28% 72%, color-mix(in srgb, var(--sb) 80%, transparent), transparent 70%); }
.nxm-orb__shine {
	position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
	background: radial-gradient(38% 30% at 34% 24%, rgb(255 255 255 / .32), transparent 70%),
	            radial-gradient(circle at 50% 50%, transparent 62%, rgb(255 255 255 / .16) 70%, transparent 72%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
}
.nxm-orb__gl { position: absolute; left: -16%; top: -16%; width: 132%; height: 132%; opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.nxm-orb.is-gl .nxm-orb__gl { opacity: 1; }
.nxm-orb.is-gl .nxm-orb__css { opacity: 0; }
.nxm-orb.is-gl .nxm-orb__shine { opacity: .7; }
.nxm-orb[data-state="listening"] .nxm-orb__css { scale: 1.04; }
.nxm-orb[data-state="processing"] .nxm-orb__css { scale: .94; }
.nxm-orb.is-mini { width: 2.4em; flex: none; }
.nxm-orb.is-mini .nxm-orb__css { box-shadow: 0 0 14px -2px var(--sa); }
.nxm-orb.is-mini .nxm-orb__css i { filter: blur(3px); }
.nxm-orb__css::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, transparent 55%, rgb(4 6 16 / .55) 100%); }
@media (prefers-reduced-motion: no-preference) {
	.nxm-orb__css i { animation: orb-a 9s linear infinite; }
	.nxm-orb__css i:nth-child(2) { animation-duration: 12s; animation-direction: reverse; }
	.nxm-orb__css i:nth-child(3) { animation-duration: 7s; }
	.nxm-orb__css i:nth-child(4) { animation: orb-b 5s linear infinite; }
	.nxm-orb[data-state="responding"] .nxm-orb__css { animation: orb-talk 900ms ease-in-out infinite; }
}
@keyframes orb-a { to { rotate: 1turn; } }
@keyframes orb-b { to { rotate: -1turn; } }
@keyframes orb-talk { 0%, 100% { scale: 1; } 30% { scale: 1.06; } 60% { scale: .99; } }

/* paused when off screen or in a background tab (scenes.js) */
.nxm-scene.is-paused *, .nxm-scene.is-paused *::before, .nxm-scene.is-paused *::after { animation-play-state: paused !important; }

/* ------------------------------------------------------------------ AI: neural network + robot */
.nx-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.nx-net__edges path { stroke: rgb(255 255 255 / .09); stroke-width: 1.2; fill: none; }
.nx-net__pulses path { stroke: var(--sb); stroke-width: 2; fill: none; stroke-dasharray: 9 91; stroke-dashoffset: 100; opacity: 0; filter: drop-shadow(0 0 4px var(--sb)); }
.nx-net__nodes circle { fill: var(--sa); filter: drop-shadow(0 0 6px var(--sa)); }
.nxm-scene--neural .nx-center { left: 27%; top: 20%; width: 46%; }
.nx-task { left: 0; top: 2%; width: 38%; }
.nx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; font-size: .92em; color: rgb(245 247 255 / .8); }
.nx-steps li { display: flex; align-items: center; gap: .55em; }
.nx-steps li::before { content: ""; width: .95em; height: .95em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sb); background: radial-gradient(circle, var(--sb) 0 34%, transparent 38%); flex: none; }
.nx-bot { right: 0; bottom: 6%; width: 44%; display: flex; align-items: center; gap: .8em; padding: .8em 1em; }
.nx-bot strong { display: block; font-weight: 650; }
.nx-robot { width: 3.6em; height: 3.6em; flex: none; overflow: visible; }
.nx-robot line { stroke: rgb(255 255 255 / .5); stroke-width: 2; }
.nx-robot__tip { fill: var(--sb); filter: drop-shadow(0 0 4px var(--sb)); }
.nx-robot__head { fill: rgb(255 255 255 / .1); stroke: rgb(255 255 255 / .45); stroke-width: 1.5; }
.nx-robot__visor { fill: #04060f; stroke: rgb(255 255 255 / .12); }
.nx-robot__ear { fill: rgb(255 255 255 / .25); }
.nx-robot__eyes { fill: var(--sb); filter: drop-shadow(0 0 3px var(--sb)); transform: translate(calc(var(--ex, 0) * 3.2px), calc(var(--ey, 0) * 2.2px)); transition: transform 240ms cubic-bezier(.2, .8, .2, 1); }
.nx-robot__eyes rect { transform-box: fill-box; transform-origin: center; }
.nx-approve { left: 4%; bottom: 4%; }
@media (prefers-reduced-motion: no-preference) {
	.nx-net__pulses path { animation: nx-pulse 3.2s linear infinite; animation-delay: calc(var(--i) * -.41s); }
	.nx-net__nodes circle { animation: nx-twinkle 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.33s); transform-box: fill-box; transform-origin: center; }
	.nx-steps li::before { animation: nx-step 6s ease-in-out infinite; }
	.nx-steps li:nth-child(2)::before { animation-delay: .9s; } .nx-steps li:nth-child(3)::before { animation-delay: 1.8s; } .nx-steps li:nth-child(4)::before { animation-delay: 2.7s; }
	.nx-robot__eyes rect { animation: nx-blink 5s infinite; }
	.nx-robot__tip { animation: nx-twinkle 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
	.nx-approve { animation: nx-float 6s ease-in-out infinite; }
	.nx-bot { animation: nx-float 7s ease-in-out infinite reverse; }
}
@keyframes nx-pulse { 0% { stroke-dashoffset: 100; opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes nx-twinkle { 0%, 100% { opacity: .55; scale: 1; } 50% { opacity: 1; scale: 1.35; } }
@keyframes nx-step { 0%, 8% { background: transparent; } 14%, 100% { background: radial-gradient(circle, var(--sb) 0 34%, transparent 38%); } }
@keyframes nx-blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes nx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.5em); } }

/* ------------------------------------------------------------------ AI: voice */
.nxm-scene--voice .nx-center { left: 31%; top: 4%; width: 38%; }
.nx-wave { position: absolute; left: 0; width: 100%; top: 44%; height: 20%; }
.nx-call { left: 0; top: 6%; width: 30%; display: grid; grid-template-columns: auto 1fr; gap: .2em .6em; align-items: center; padding: .8em .9em; }
.nx-call strong { display: block; font-size: .95em; }
.nx-call .nx-k { margin: 0; }
.nx-call__icon { grid-row: span 2; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: color-mix(in srgb, var(--sb) 22%, transparent); }
.nx-call__icon svg { width: 1.2em; height: 1.2em; fill: none; stroke: var(--sb); stroke-width: 2; stroke-linejoin: round; }
.nx-time { grid-column: 2; font: 600 1.1em/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--sb); }
.nx-transcript { left: 6%; right: 6%; bottom: 0; display: grid; gap: .5em; padding: .9em 1.1em; }
.nx-transcript p { margin: 0; padding-left: 1.4em; position: relative; font-size: .98em; }
.nx-transcript p::before { content: ""; position: absolute; left: 0; top: .45em; width: .6em; height: .6em; border-radius: 50%; background: rgb(255 255 255 / .4); }
.nx-transcript p.is-agent::before { background: var(--sb); box-shadow: 0 0 8px var(--sb); }
.nx-transcript p.is-agent { color: #fff; }
.nx-transcript p.is-caller { color: rgb(245 247 255 / .72); }
.js .nxm-scene--voice.is-live .nx-transcript p { display: none; }
.js .nxm-scene--voice.is-live .nx-transcript p.is-shown { display: block; animation: nx-in 400ms ease both; }

/* ------------------------------------------------------------------ AI: chat */
.nx-chat { left: 6%; top: 4%; width: 78%; height: 84%; display: flex; flex-direction: column; gap: .8em; padding: 1em; }
.nx-chat__head { display: flex; align-items: center; gap: .7em; padding-bottom: .7em; border-bottom: 1px solid rgb(255 255 255 / .08); }
.nx-chat__head strong { display: block; }
.nx-chat__msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .55em; overflow: hidden; }
.nx-msg { margin: 0; max-width: 80%; padding: .6em .85em; border-radius: 1.1em; font-size: .95em; line-height: 1.35; }
.nx-msg.is-in { align-self: flex-start; background: rgb(255 255 255 / .09); border-bottom-left-radius: .35em; }
.nx-msg.is-out { align-self: flex-end; background: linear-gradient(135deg, #3d5be0, #6a46d6); color: #fff; border-bottom-right-radius: .35em; }
.nx-typing { display: none; align-self: flex-end; gap: .25em; margin: 0; padding: .7em .9em; border-radius: 1em; background: rgb(255 255 255 / .09); }
.nx-typing i { width: .45em; height: .45em; border-radius: 50%; background: rgb(255 255 255 / .7); animation: nx-dot 1s ease-in-out infinite; }
.nx-typing i:nth-child(2) { animation-delay: .15s; } .nx-typing i:nth-child(3) { animation-delay: .3s; }
.js .nxm-scene--chat.is-live .nx-msg { display: none; }
.js .nxm-scene--chat.is-live .nx-msg.is-shown { display: block; animation: nx-in 380ms cubic-bezier(.2, .9, .3, 1.15) both; }
.js .nxm-scene--chat.is-live .nx-typing.is-shown { display: inline-flex; }
.nx-chat__chips { display: flex; flex-wrap: wrap; gap: .4em; }
.nx-chat__chips span { padding: .4em .8em; border-radius: 999px; font-size: .85em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb) 55%, transparent); color: var(--sb); }
.nx-toast { right: 0; top: 10%; }
@keyframes nx-dot { 0%, 100% { opacity: .3; translate: 0 0; } 50% { opacity: 1; translate: 0 -2px; } }
@keyframes nx-in { from { opacity: 0; transform: translateY(.6em) scale(.96); } }

/* ------------------------------------------------------------------ automation flow */
.nx-flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nx-flow__track { fill: none; stroke: rgb(255 255 255 / .1); stroke-width: 2; vector-effect: non-scaling-stroke; }
.nx-flow__run { fill: none; stroke: var(--sb); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 18 82; stroke-dashoffset: 100; opacity: .9; }
.nx-flow__packet { fill: var(--sb); filter: drop-shadow(0 0 6px var(--sb)); }
.nx-node {
	position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 1;
	display: inline-flex; align-items: center; gap: .55em; padding: .5em .95em .5em .5em; border-radius: 999px; white-space: nowrap;
	background: rgb(9 12 24 / .9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 12px 30px -14px rgb(0 0 0 / .8);
	transition: box-shadow 300ms ease, background-color 300ms ease;
}
.nx-node__n { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; font-size: .85em; font-weight: 700; background: rgb(255 255 255 / .1); transition: background-color 300ms ease, color 300ms ease; }
.nx-node__tip {
	position: absolute; left: 50%; top: calc(100% + .6em); width: 15em; translate: -50% 0; padding: .6em .8em; border-radius: .9em; white-space: normal;
	font-size: .86em; color: rgb(245 247 255 / .86); background: rgb(6 8 16 / .94); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb) 45%, transparent);
	opacity: 0; transform: translateY(-.3em) scale(.96); transition: opacity 260ms ease, transform 360ms cubic-bezier(.2, .9, .3, 1.15); pointer-events: none; z-index: 2;
}
.nx-node.is-active { box-shadow: inset 0 0 0 1px var(--sb), 0 0 30px -6px var(--sb); }
.nx-node.is-active .nx-node__n { background: var(--sb); color: #04121a; }
.nx-node.is-active .nx-node__tip { opacity: 1; transform: none; }
.nx-flow__log { right: 2%; bottom: 2%; }
@media (prefers-reduced-motion: no-preference) {
	.nx-flow__run { animation: nx-pulse 3.2s linear infinite; animation-delay: calc(var(--i) * .8s); }
}
@media (prefers-reduced-motion: reduce) { .nx-flow__packet { display: none; } }

/* ------------------------------------------------------------------ marketing: social */
.nx-phone {
	position: absolute; left: 2%; top: 0; width: 38%; aspect-ratio: 9 / 16; border-radius: 1.6em; overflow: hidden;
	background: #05060c; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 30px 60px -24px rgb(0 0 0 / .9), 0 0 50px -20px var(--sb);
}
.nx-phone__video { position: absolute; inset: 0; background: linear-gradient(160deg, #1b0f2e, #08070f); }
.nx-phone__video i { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; filter: blur(22px); opacity: .85; }
.nx-phone__video i:nth-child(1) { left: -10%; top: 8%; background: var(--sa); }
.nx-phone__video i:nth-child(2) { right: -18%; top: 34%; background: var(--sb); }
.nx-phone__video i:nth-child(3) { left: 10%; bottom: -8%; background: var(--sc); }
.nx-phone__side { position: absolute; right: .6em; bottom: 22%; display: grid; gap: .9em; justify-items: center; font-size: .8em; }
.nx-phone__side span { display: grid; justify-items: center; gap: .15em; }
.nx-phone__side svg { width: 1.9em; height: 1.9em; fill: rgb(255 255 255 / .92); stroke: none; }
.nx-phone__side span:nth-child(2) svg, .nx-phone__side span:nth-child(3) svg { fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nx-phone__cap { position: absolute; left: .8em; right: 3.6em; bottom: 1.6em; margin: 0; font-size: .86em; line-height: 1.3; text-shadow: 0 1px 6px rgb(0 0 0 / .6); }
.nx-phone__bar { position: absolute; left: .8em; right: .8em; bottom: .7em; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .25); overflow: hidden; }
.nx-phone__bar i { display: block; height: 100%; width: 62%; background: #fff; transform-origin: left; }
.nx-hearts { position: absolute; right: 1em; bottom: 34%; width: 2em; height: 40%; pointer-events: none; }
.nx-hearts i { position: absolute; bottom: 0; left: 30%; width: .9em; height: .9em; background: var(--sb); clip-path: path('M7 12.5 1.5 7A3.4 3.4 0 0 1 7 2.6 3.4 3.4 0 0 1 12.5 7z'); opacity: 0; }
.nx-post { right: 0; top: 4%; width: 40%; padding: .8em; }
.nx-post__who { display: flex; align-items: center; gap: .5em; margin: 0 0 .6em; font-size: .9em; }
.nx-post__img { aspect-ratio: 1; border-radius: .9em; background: linear-gradient(135deg, var(--sc), var(--sb) 55%, var(--sa)); position: relative; overflow: hidden; }
.nx-post__img span { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .8), rgb(255 255 255 / .1) 45%, transparent 70%); }
.nx-post__likes { display: flex; align-items: center; gap: .4em; margin: .6em 0 0; font-size: .9em; }
.nx-post__likes svg { width: 1.3em; height: 1.3em; fill: var(--sb); }
.nx-reach { right: 4%; bottom: 0; width: 42%; }
.nx-bars { display: flex; align-items: flex-end; gap: .35em; height: 4.5em; }
.nx-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: .3em .3em .1em .1em; background: linear-gradient(180deg, var(--sb), color-mix(in srgb, var(--sa) 60%, transparent)); transform-origin: bottom; }
.nx-follow { left: 36%; bottom: 30%; }
.nx-board { right: 0; top: 6%; width: 50%; }
.nx-board__frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35em; }
.nx-board__frames span { aspect-ratio: 3 / 4; border-radius: .6em; display: grid; place-items: end start; padding: .35em; font-size: .72em; background: linear-gradient(160deg, color-mix(in srgb, var(--sa) 50%, #111), color-mix(in srgb, var(--sb) 40%, #111)); }
.nx-board__head { display: block; position: relative; height: 3px; margin-top: .7em; border-radius: 2px; background: rgb(255 255 255 / .15); }
.nx-board__head::after { content: ""; position: absolute; top: -4px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--sb); box-shadow: 0 0 10px var(--sb); }
@media (prefers-reduced-motion: no-preference) {
	.nx-phone__video i { animation: nx-blob 8s ease-in-out infinite alternate; }
	.nx-phone__video i:nth-child(2) { animation-duration: 10s; } .nx-phone__video i:nth-child(3) { animation-duration: 12s; }
	.nx-phone__bar i { animation: nx-play 7s linear infinite; }
	.nx-hearts i { animation: nx-heart 3.2s ease-out infinite; }
	.nx-hearts i:nth-child(2) { animation-delay: .8s; left: 0; } .nx-hearts i:nth-child(3) { animation-delay: 1.6s; left: 55%; } .nx-hearts i:nth-child(4) { animation-delay: 2.4s; left: 20%; }
	.nx-bars i { animation: nx-grow 4.5s cubic-bezier(.2, .8, .2, 1) infinite; }
	.nx-bars i:nth-child(2) { animation-delay: .08s; } .nx-bars i:nth-child(3) { animation-delay: .16s; } .nx-bars i:nth-child(4) { animation-delay: .24s; } .nx-bars i:nth-child(5) { animation-delay: .32s; } .nx-bars i:nth-child(6) { animation-delay: .4s; } .nx-bars i:nth-child(7) { animation-delay: .48s; }
	.nx-follow { animation: nx-popin 5s cubic-bezier(.2, .9, .3, 1.2) infinite; }
	.nx-post { animation: nx-float 7s ease-in-out infinite; }
	.nx-board__head::after { animation: nx-scrub 5s linear infinite; }
}
@keyframes nx-blob { to { transform: translate(20%, -12%) scale(1.25); } }
@keyframes nx-play { from { transform: scaleX(0); } to { transform: scaleX(1.6); } }
@keyframes nx-heart { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-.8em, -9em) scale(1.3) rotate(-14deg); } }
@keyframes nx-grow { 0% { transform: scaleY(.15); } 30%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }
@keyframes nx-popin { 0%, 8% { opacity: 0; transform: scale(.6); } 16%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-.6em); } }
@keyframes nx-scrub { to { left: calc(100% - 11px); } }

/* ------------------------------------------------------------------ marketing: ads */
.nx-dash { left: 0; top: 4%; width: 72%; padding: 1em 1.1em 1.1em; }
.nx-dash__head { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .9em; }
.nx-dash__head .nx-k { margin: 0; }
.nx-tabs { position: relative; display: flex; padding: .2em; border-radius: 999px; background: rgb(255 255 255 / .06); font-size: .85em; }
.nx-tab { position: relative; z-index: 1; padding: .35em .8em; border-radius: 999px; color: rgb(245 247 255 / .7); transition: color 300ms ease; }
.nx-tab.is-on { color: #fff; }
.nx-tabs__ind { position: absolute; z-index: 0; top: .2em; bottom: .2em; left: 0; width: 0; border-radius: 999px; background: color-mix(in srgb, var(--sb) 30%, rgb(255 255 255 / .08)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb) 60%, transparent); transition: translate 520ms var(--ease-spring, ease), width 520ms var(--ease-spring, ease); }
.nx-dash__view { display: none; }
.nx-dash__view.is-on { display: block; animation: nx-in 420ms ease both; }
.nx-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; margin-bottom: .8em; }
.nx-kpis span { display: grid; gap: .15em; padding: .55em .65em; border-radius: .8em; background: rgb(255 255 255 / .05); }
.nx-kpis em { font-style: normal; font-size: .76em; color: rgb(245 247 255 / .7); }
.nx-kpis b { font: 650 1.3em/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.nx-ad { right: 0; bottom: 4%; width: 46%; }
.nx-lines { display: grid; gap: .35em; margin-bottom: .7em; }
.nx-lines i { display: block; height: .45em; border-radius: 1em; background: rgb(255 255 255 / .14); }
.nx-lines i:last-child { width: 70%; }
.nx-cta { display: inline-block; padding: .4em .9em; border-radius: 999px; font-size: .85em; font-weight: 650; color: #0a0d18; background: var(--sb); }
.nx-shift { right: 0; top: 0; }
@media (prefers-reduced-motion: no-preference) {
	.nx-dash__view.is-on .nx-chart__line { stroke-dasharray: 100; animation: nx-draw 1.4s cubic-bezier(.4, .1, .2, 1) both; }
	.nx-ad { animation: nx-float 7s ease-in-out infinite; }
	.nx-shift { animation: nx-popin 6s cubic-bezier(.2, .9, .3, 1.2) infinite 1s; }
}
@keyframes nx-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ growth: funnel, A/B, pipeline */
.nx-funnel { position: absolute; left: 6%; top: 2%; width: 66%; height: 90%; display: grid; grid-auto-rows: 1fr; gap: .45em; }
.nx-funnel__step { position: relative; display: grid; place-items: center; }
.nx-funnel__shape {
	position: absolute; inset: 0; margin-inline: calc(var(--i) * 9%); border-radius: .8em;
	clip-path: polygon(0 0, 100% 0, calc(100% - 4.5%) 100%, 4.5% 100%);
	background: linear-gradient(90deg, color-mix(in srgb, var(--sa) 75%, transparent), color-mix(in srgb, var(--sb) 75%, transparent));
	opacity: calc(1 - var(--i) * .12); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3);
}
.nx-funnel__txt { position: relative; display: flex; gap: .7em; align-items: baseline; color: #160c02; }
.nx-funnel__txt em { font-style: normal; font-size: .9em; font-weight: 600; }
.nx-funnel__txt b { font: 700 1.25em/1 var(--font-display); font-variant-numeric: tabular-nums; }
.nx-drops { position: absolute; left: 50%; top: 0; bottom: 0; width: 40%; translate: -50% 0; pointer-events: none; }
.nx-drops i { position: absolute; top: 0; width: .5em; height: .5em; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff; opacity: 0; }
.nx-drops i:nth-child(1) { left: 10%; } .nx-drops i:nth-child(2) { left: 30%; } .nx-drops i:nth-child(3) { left: 50%; } .nx-drops i:nth-child(4) { left: 70%; } .nx-drops i:nth-child(5) { left: 40%; } .nx-drops i:nth-child(6) { left: 60%; }
.nx-lead { right: 0; top: 30%; }
.nx-ab { position: absolute; inset: 0; }
.nx-ab__v { top: 12%; left: 2%; width: 44%; }
.nx-ab__v.is-win { left: auto; right: 2%; top: 4%; box-shadow: inset 0 0 0 1px var(--sb), 0 0 40px -12px var(--sb), 0 24px 50px -24px rgb(0 0 0 / .8); }
.nx-mock { display: grid; gap: .35em; padding: .6em; border-radius: .7em; background: rgb(255 255 255 / .05); margin-bottom: .7em; }
.nx-mock i { height: .5em; border-radius: 1em; background: rgb(255 255 255 / .16); }
.nx-mock i:first-child { height: 1.6em; border-radius: .4em; }
.nx-mock span { width: 45%; height: 1.2em; border-radius: 999px; background: rgb(255 255 255 / .22); }
.nx-ab__v.is-win .nx-mock span { background: var(--sb); }
.nx-ab__rate { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .4em; }
.nx-ab__rate em { font-style: normal; font-size: .82em; color: rgb(245 247 255 / .7); }
.nx-ab__rate b { font: 700 1.5em/1 var(--font-display); }
.nx-ab__bar { display: block; height: .5em; border-radius: 1em; background: rgb(255 255 255 / .08); overflow: hidden; }
.nx-ab__bar i { display: block; height: 100%; width: 58%; border-radius: inherit; background: rgb(255 255 255 / .35); transform-origin: left; }
.nx-ab__v.is-win .nx-ab__bar i { width: 94%; background: linear-gradient(90deg, var(--sa), var(--sb)); }
.nx-win { right: -4%; top: -1.2em; }
.nx-kanban { position: absolute; inset: 2% 0 40% 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.nx-kanban__col { padding: .7em .55em; border-radius: 1em; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); display: flex; flex-direction: column; gap: .45em; }
.nx-deal { display: grid; gap: .3em; padding: .55em; border-radius: .7em; background: rgb(9 12 24 / .9); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.nx-deal i { height: .45em; border-radius: 1em; background: rgb(255 255 255 / .18); }
.nx-deal i:first-child { width: 70%; background: color-mix(in srgb, var(--sb) 70%, transparent); }
.nx-deal--moving { position: absolute; left: 1%; top: 22%; width: 23%; box-shadow: inset 0 0 0 1px var(--sb), 0 0 24px -6px var(--sb); }
.nx-won { right: 0; bottom: 30%; }
.nx-next { left: 4%; bottom: 2%; width: 66%; }
.nx-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.nx-next li { display: flex; align-items: center; gap: .6em; font-size: .92em; }
.nx-next em { margin-left: auto; font-style: normal; font-size: .82em; color: var(--sb); }
.nx-exp { left: 10%; right: 10%; bottom: 2%; }
.nx-exp .nx-kpis { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
	.nx-drops i { animation: nx-drop 3s ease-in infinite; }
	.nx-drops i:nth-child(2) { animation-delay: .5s; } .nx-drops i:nth-child(3) { animation-delay: 1s; } .nx-drops i:nth-child(4) { animation-delay: 1.5s; } .nx-drops i:nth-child(5) { animation-delay: 2s; } .nx-drops i:nth-child(6) { animation-delay: 2.5s; }
	.nx-lead { animation: nx-popin 5s cubic-bezier(.2, .9, .3, 1.2) infinite; }
	.nx-ab__bar i { animation: nx-fill 5s cubic-bezier(.2, .8, .2, 1) infinite; }
	.nx-win { animation: nx-popin 5s cubic-bezier(.2, .9, .3, 1.2) infinite 1.2s; }
	.nx-deal--moving { animation: nx-deal 7s cubic-bezier(.6, 0, .2, 1) infinite; }
	.nx-won { animation: nx-popin 7s cubic-bezier(.2, .9, .3, 1.2) infinite 5.4s; }
}
@keyframes nx-drop { 0% { opacity: 0; transform: translateY(0) scale(1); } 10% { opacity: 1; } 90% { opacity: .8; } 100% { opacity: 0; transform: translateY(32em) scale(.4); } }
@keyframes nx-fill { 0% { transform: scaleX(0); } 35%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes nx-deal { 0%, 10% { left: 1%; } 30%, 38% { left: 26%; } 58%, 66% { left: 51%; } 86%, 100% { left: 76%; } }

/* ------------------------------------------------------------------ search: SEO, local, AI answers */
.nx-kw { position: absolute; inset: 0; width: 100%; height: 100%; }
.nx-kw__links path { stroke: color-mix(in srgb, var(--sb) 45%, transparent); stroke-width: 1.4; fill: none; stroke-dasharray: 4 6; }
.nx-kwn { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: .35em .8em; border-radius: 999px; font-size: .82em; white-space: nowrap; background: rgb(6 8 16 / .9); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sa) 50%, transparent); color: rgb(245 247 255 / .85); }
.nx-kwn.is-core { font-weight: 650; color: #04120c; background: var(--sa); box-shadow: 0 0 30px -4px var(--sa); }
.nx-serp { left: 0; top: 6%; width: 62%; }
.nx-search { display: flex; align-items: center; gap: .6em; padding: .55em .9em; border-radius: 999px; background: rgb(255 255 255 / .07); margin-bottom: .9em; font-size: .95em; }
.nx-search svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.nx-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.nx-results li { display: grid; grid-template-columns: 1.8em 1fr; gap: .6em; align-items: center; padding: .5em .6em; border-radius: .8em; background: rgb(255 255 255 / .04); }
.nx-results b { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; font-size: .85em; background: rgb(255 255 255 / .08); }
.nx-results span { display: grid; gap: .3em; }
.nx-results i { display: block; height: .45em; border-radius: 1em; background: rgb(255 255 255 / .14); }
.nx-results i + i { width: 70%; }
.nx-results li.is-you { background: color-mix(in srgb, var(--sa) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sa) 60%, transparent); }
.nx-results li.is-you b { background: var(--sa); color: #04120c; }
.nx-results li.is-you strong { font-size: .95em; color: var(--sa); }
.nx-results li { transition: transform 700ms cubic-bezier(.2, .9, .3, 1.1); }
.nx-rank { right: 0; bottom: 4%; }
.nx-map { position: absolute; inset: 0; border-radius: 1.6em; overflow: hidden; background: #0b1220; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.nx-map svg { width: 100%; height: 100%; }
.nx-map__roads path { stroke: rgb(255 255 255 / .1); stroke-width: 9; fill: none; }
.nx-map__river { stroke: color-mix(in srgb, var(--sb) 35%, transparent); stroke-width: 22; fill: none; }
.nx-map__park { fill: color-mix(in srgb, var(--sa) 18%, transparent); }
.nx-mpin { position: absolute; left: var(--x); top: var(--y); width: 1em; height: 1em; transform: translate(-50%, -50%); border-radius: 50%; background: rgb(255 255 255 / .45); box-shadow: 0 0 0 .3em rgb(255 255 255 / .08); }
.nx-mpin.is-you { width: 3em; height: 3em; display: grid; place-items: center; background: var(--sa); box-shadow: 0 0 0 .5em color-mix(in srgb, var(--sa) 25%, transparent), 0 0 40px var(--sa); }
.nx-mpin.is-you svg { width: 1.7em; height: 1.7em; fill: #04120c; stroke: none; }
.nx-search--local { position: absolute; left: 4%; top: 5%; width: auto; margin: 0; padding: .65em 1.1em; }
.nx-profile { right: 4%; bottom: 5%; width: 52%; }
.nx-open { margin: 0 0 .7em; font-size: .88em; color: var(--sa); }
.nx-actions { display: flex; gap: .35em; flex-wrap: wrap; }
.nx-actions span { padding: .4em .75em; border-radius: 999px; font-size: .82em; background: rgb(255 255 255 / .08); }
.nx-actions span:first-child { background: var(--sa); color: #04120c; font-weight: 650; }
.nx-answer { left: 2%; top: 0; width: 88%; }
.nx-q { margin: 0 0 .9em auto; max-width: 82%; padding: .65em .9em; border-radius: 1em 1em .3em 1em; background: rgb(255 255 255 / .09); font-size: .95em; }
.nx-answer__body { display: flex; gap: .8em; align-items: flex-start; }
.nx-answer__body p { margin: 0; font-size: 1em; line-height: 1.5; min-height: 6em; }
.nx-cites { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .9em; }
.nx-cites span { padding: .35em .75em; border-radius: 999px; font-size: .8em; background: rgb(255 255 255 / .06); color: rgb(245 247 255 / .75); }
.nx-cites span.is-you { background: color-mix(in srgb, var(--sa) 22%, transparent); box-shadow: inset 0 0 0 1px var(--sa); color: #fff; }
.nx-cited { right: 2%; bottom: 30%; }
.nx-prompts { left: 8%; bottom: 3%; width: 58%; }
.nx-prompts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4em; }
.nx-prompts li { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .45em .65em; border-radius: .7em; background: rgb(255 255 255 / .05); font-size: .9em; }
.nx-prompts b { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .2); flex: none; }
.nx-prompts li.is-yes b { background: var(--sa); box-shadow: none; }
.nx-prompts b svg { width: 1em; height: 1em; fill: none; stroke: #04120c; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
	.nx-kw__links path { animation: nx-dash 2.4s linear infinite; }
	.nx-kwn:not(.is-core) { animation: nx-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
	.nx-mpin.is-you { animation: nx-bounce 2.4s cubic-bezier(.3, 1.6, .5, 1) infinite; }
	.nx-rank, .nx-cited { animation: nx-popin 6s cubic-bezier(.2, .9, .3, 1.2) infinite 1.4s; }
}
@keyframes nx-dash { to { stroke-dashoffset: -20; } }
@keyframes nx-bounce { 0%, 60%, 100% { transform: translate(-50%, -50%); } 30% { transform: translate(-50%, -78%); } }

/* ------------------------------------------------------------------ build: web */
.nx-browser { position: absolute; left: 0; top: 3%; width: 76%; aspect-ratio: 16 / 11; border-radius: 1.1em; overflow: hidden; background: #0b0f1b; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 30px 70px -30px rgb(0 0 0 / .9), 0 0 60px -30px var(--sb); transform: perspective(900px) rotateX(calc(var(--py) * -4deg)) rotateY(calc(var(--px) * 5deg)); transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
.nx-browser__bar { display: flex; align-items: center; gap: .35em; padding: .55em .8em; background: rgb(255 255 255 / .05); border-bottom: 1px solid rgb(255 255 255 / .07); }
.nx-browser__bar i { width: .6em; height: .6em; border-radius: 50%; background: rgb(255 255 255 / .22); }
.nx-browser__bar span { margin-left: .8em; flex: 1; padding: .2em .8em; border-radius: 999px; font-size: .78em; color: rgb(245 247 255 / .7); background: rgb(255 255 255 / .06); }
.nx-browser__view { position: absolute; inset: 2.2em 0 0 0; }
.nx-site { position: absolute; inset: 0; padding: .9em; display: grid; grid-template-rows: auto 1fr auto; gap: .7em; }
.nx-site__nav { height: .7em; border-radius: 1em; width: 100%; }
.nx-site__hero { display: grid; align-content: center; gap: .45em; padding: 1em; border-radius: .8em; }
.nx-site__hero i { height: .9em; border-radius: 1em; width: 70%; }
.nx-site__hero i:nth-child(2) { width: 50%; height: .55em; }
.nx-site__hero i:nth-child(3) { width: 26%; height: 1.4em; margin-top: .3em; }
.nx-site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.nx-site__cards i { height: 3.6em; border-radius: .6em; }
.nx-site.is-wire .nx-site__nav, .nx-site.is-wire .nx-site__hero, .nx-site.is-wire i { background: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
.nx-site.is-wire .nx-site__hero i { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); }
.nx-site.is-final .nx-site__nav { background: rgb(255 255 255 / .12); }
.nx-site.is-final .nx-site__hero { background: linear-gradient(135deg, color-mix(in srgb, var(--sb) 55%, #0b0f1b), color-mix(in srgb, var(--sc) 50%, #0b0f1b)); }
.nx-site.is-final .nx-site__hero i { background: rgb(255 255 255 / .9); }
.nx-site.is-final .nx-site__hero i:nth-child(2) { background: rgb(255 255 255 / .55); }
.nx-site.is-final .nx-site__hero i:nth-child(3) { background: #0b0f1b; }
.nx-site.is-final .nx-site__cards i { background: rgb(255 255 255 / .08); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); }
.nx-code { right: 0; bottom: 4%; width: 48%; }
.nx-code pre { margin: 0; font: 500 .86em/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow: hidden; }
.nx-code__l { display: block; }
.nx-code__l.is-k { color: var(--sb); }
.nx-code__l.is-s { color: var(--sc); }
.nx-code__l.is-p { color: rgb(245 247 255 / .8); }
.nx-device { position: absolute; right: 2%; top: 0; width: 20%; aspect-ratio: 9 / 18; border-radius: 1.2em; padding: .45em; background: #0b0f1b; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 24px 50px -20px rgb(0 0 0 / .9); }
.nx-device__screen { height: 100%; border-radius: .8em; overflow: hidden; display: grid; grid-template-rows: 1.3fr 1fr 1fr; gap: .3em; padding: .35em; background: rgb(255 255 255 / .04); }
.nx-device__screen span { border-radius: .45em; background: rgb(255 255 255 / .1); }
.nx-device__screen span:first-child { background: linear-gradient(135deg, color-mix(in srgb, var(--sb) 60%, #0b0f1b), color-mix(in srgb, var(--sc) 55%, #0b0f1b)); }
.nx-plugin { left: 4%; bottom: 2%; }
@media (prefers-reduced-motion: no-preference) {
	.nx-site.is-final { animation: nx-wire 7s ease-in-out infinite; }
	.nx-code__l { animation: nx-type 7s steps(18, end) infinite; animation-delay: calc(var(--i) * .5s); clip-path: inset(0 100% 0 0); }
	.nx-device { animation: nx-morph 7s cubic-bezier(.6, 0, .2, 1) infinite; }
	.nx-plugin { animation: nx-popin 7s cubic-bezier(.2, .9, .3, 1.2) infinite 3s; }
}
@keyframes nx-wire { 0%, 30% { opacity: 0; } 45%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nx-type { 0% { clip-path: inset(0 100% 0 0); } 25%, 90% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes nx-morph { 0%, 35% { width: 20%; aspect-ratio: 9 / 18; } 50%, 85% { width: 30%; aspect-ratio: 3 / 4; } 100% { width: 20%; aspect-ratio: 9 / 18; } }

/* ------------------------------------------------------------------ commerce: store */
.nx-product { left: 2%; top: 2%; width: 48%; }
.nx-product__img { aspect-ratio: 1.15; border-radius: .9em; display: grid; place-items: center; margin-bottom: .8em; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--sa) 35%, transparent), transparent 70%), rgb(255 255 255 / .04); }
.nx-product__img svg { width: 62%; height: auto; overflow: visible; }
.nx-bag { fill: #2a8f6a; fill: color-mix(in srgb, var(--sb) 70%, #0b0f1b); stroke: rgb(255 255 255 / .4); stroke-width: 1.5; }
.nx-bag__h { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 4; stroke-linecap: round; }
.nx-price { display: flex; justify-content: space-between; align-items: center; margin: 0 0 .8em; font: 700 1.3em/1 var(--font-display); }
.nx-swatches { display: flex; gap: .3em; }
.nx-swatches i { width: .8em; height: .8em; border-radius: 50%; background: var(--sb); box-shadow: 0 0 0 2px rgb(255 255 255 / .15); }
.nx-swatches i:nth-child(2) { background: var(--sa); } .nx-swatches i:nth-child(3) { background: var(--sc); }
.nx-buy { display: flex; justify-content: center; align-items: center; gap: .5em; padding: .6em; border-radius: 999px; font-weight: 650; color: #0a0d18; background: var(--sa); }
.nx-buy svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-rev { right: 0; bottom: 6%; width: 50%; }
.nx-order { right: 2%; top: 6%; }
.nx-order b { color: var(--sa); }
@media (prefers-reduced-motion: no-preference) {
	.nx-buy { animation: nx-press 4s ease-in-out infinite; }
	.nx-order { animation: nx-island 4s cubic-bezier(.2, .9, .3, 1.15) infinite; transform-origin: right center; }
	.nx-rev .nx-chart__line { stroke-dasharray: 100; animation: nx-draw 4s cubic-bezier(.4, .1, .2, 1) infinite; }
	.nx-product { animation: nx-float 8s ease-in-out infinite; }
}
@keyframes nx-press { 0%, 30%, 40%, 100% { transform: scale(1); } 35% { transform: scale(.94); } }
@keyframes nx-island { 0%, 34% { opacity: 0; transform: scaleX(.3) scaleY(.7); } 46%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scaleX(.4) scaleY(.8); } }

/* ------------------------------------------------------------------ contact */
.nxm-scene--contact .nx-center { left: 20%; top: 2%; width: 60%; }
.nxm-scene--contact .nx-wave { top: 66%; height: 18%; }
.nx-status { position: absolute; left: 0; right: 0; bottom: 2%; margin: 0; text-align: center; font: 600 1.15em/1.3 var(--font-display); color: rgb(245 247 255 / .9); transition: opacity 300ms ease; }

/* ------------------------------------------------------------------ phones: fewer floating extras, same story */
@container (max-width: 420px) {
	.nx-approve, .nx-follow, .nx-shift, .nx-flow__log, .nx-plugin, .nx-cited, .nx-rank { display: none; }
	.nx-node__tip { width: 12em; }
}

/* ------------------------------------------------------------------ service explorer (home) */
.nxm-explore { transition: --sa 700ms ease, --sb 700ms ease, --sc 700ms ease; }
.nxm-explore__tabs {
	position: relative; display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 28px; padding: 6px; border-radius: 999px;
	overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
	background: rgb(6 9 17 / .78); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 20px 50px -30px rgb(0 0 0 / .8);
}
.nxm-explore__tabs::-webkit-scrollbar { display: none; }
.nxm-explore__tab {
	position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
	background: none; color: var(--lg-ink-2); font: 600 .95rem/1 var(--font-text); cursor: pointer; white-space: nowrap; scroll-snap-align: center;
	transition: color 300ms ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.nxm-explore__tab[aria-selected="true"] { color: #fff; }
.nxm-explore__tab .nxm-explore__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 10px var(--dot); }
.nxm-explore__ind {
	position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 999px; pointer-events: none;
	background: linear-gradient(135deg, color-mix(in srgb, var(--sa) 45%, transparent), color-mix(in srgb, var(--sc) 40%, transparent));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), inset 0 0 0 1px color-mix(in srgb, var(--sb) 60%, transparent), 0 0 30px -8px var(--sa);
}
.nxm-explore__stage { position: relative; border-radius: var(--r-l); padding: clamp(20px, 3vw, 40px); overflow: hidden; overflow: clip; touch-action: pan-y; }
.nxm-explore__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(60% 80% at 80% 30%, color-mix(in srgb, var(--sa) 18%, transparent), transparent 70%), radial-gradient(50% 60% at 10% 90%, color-mix(in srgb, var(--sc) 14%, transparent), transparent 70%), rgb(8 11 20 / .6); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.nxm-explore__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.nxm-explore__panel[hidden] { display: none; }
/* without JavaScript every category is listed, one after another */
html:not(.js) .nxm-explore__tabs, html:not(.js) .nxm-explore__hint { display: none; }
html:not(.js) .nxm-explore__panel[hidden] { display: grid; margin-top: 48px; }
.nxm-explore__panel h3 { font: 650 var(--step-3)/1.02 var(--font-display); letter-spacing: var(--track-display); margin: .1em 0 .3em; }
.nxm-explore__panel > div > p:not(.lg-eyebrow) { color: var(--lg-ink-2); font-size: var(--step-1); max-width: 34ch; }
.nxm-explore__list { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.nxm-explore__list a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--lg-ink); text-decoration: none; font-weight: 500; border-radius: 10px; }
.nxm-explore__list a:hover { color: var(--sb); }
.nxm-explore__list svg { width: 18px; height: 18px; color: var(--sb); flex: none; }
.nxm-explore__visual { min-width: 0; }
.nxm-explore__hint { margin: 14px 0 0; text-align: center; font-size: .85rem; color: var(--lg-ink-3); }
@media (max-width: 899px) {
	.nxm-explore__tabs { width: auto; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; padding-inline: var(--gutter); background: none; box-shadow: none; }
	.nxm-explore__ind { display: none; }
	.nxm-explore__tab { background: rgb(255 255 255 / .06); }
	.nxm-explore__tab[aria-selected="true"] { background: linear-gradient(135deg, color-mix(in srgb, var(--sa) 50%, transparent), color-mix(in srgb, var(--sc) 45%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb) 60%, transparent); }
	.nxm-explore__panel { grid-template-columns: minmax(0, 1fr); }
	.nxm-explore__visual { order: -1; }
	.nxm-explore__list { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) { .nxm-explore__hint { display: none; } }
@media (prefers-reduced-motion: no-preference) {
	.nxm-explore__panel.is-entering { animation: nx-panel-in 560ms cubic-bezier(.2, .9, .3, 1.05) both; }
}
@keyframes nx-panel-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 28px)) scale(.985); filter: blur(6px); } }

/* services hub: each group wears its family colours */
.nxm-service-group[data-family] .nxm-sh .lg-eyebrow { color: var(--sb); }
.nxm-service-group[data-family] .nxm-card__icon { color: var(--sb); }
.nxm-service-group__scene { width: min(100%, 300px); margin-left: auto; }
.nxm-service-group__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
@media (max-width: 899px) { .nxm-service-group__head { grid-template-columns: minmax(0, 1fr); } .nxm-service-group__scene { display: none; } }

/* ------------------------------------------------------------------ AI hub: assistant */
.nxm-assistant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.nxm-assistant__stage { position: relative; width: min(100%, 460px); justify-self: center; }
.nxm-assistant__stage .nxm-scene { aspect-ratio: 1 / 1.05; }
.nxm-assistant__stage .nx-center { left: 12%; top: 0; width: 76%; }
.nxm-assistant__stage .nx-wave { top: 74%; height: 18%; }
.nxm-assistant__stage .nx-status { display: none; }
.nxm-assistant__asks { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px; }
.nxm-assistant__asks button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; font: 500 .95rem/1.2 var(--font-text); color: var(--lg-ink); background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); transition: background-color 200ms ease, box-shadow 200ms ease; }
.nxm-assistant__asks button:hover, .nxm-assistant__asks button[aria-pressed="true"] { background: color-mix(in srgb, var(--sa) 26%, transparent); box-shadow: inset 0 0 0 1px var(--sb); }
.nxm-assistant__reply { min-height: 7.5em; padding: 18px 20px; border-radius: 20px; background: rgb(8 11 20 / .7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.nxm-assistant__reply p { margin: 0; }
.nxm-assistant__state { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sb); }
.nxm-assistant__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
@media (max-width: 899px) { .nxm-assistant { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ contact page */
.nxm-contact-hero .nxm-phero__scene { width: min(100%, 460px); justify-self: center; }
.nxm-contact-hero .nxm-scene { aspect-ratio: 1 / .95; }
.nxm-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.nxm-channel { position: relative; display: grid; gap: 6px; padding: 20px; border-radius: 22px; color: var(--lg-ink); text-decoration: none; background: rgb(10 14 26 / .7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); transition: transform 400ms var(--ease-spring, ease), box-shadow 300ms ease; }
.nxm-channel:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--ch, var(--sb)), 0 20px 50px -24px var(--ch, var(--sb)); }
.nxm-channel__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--ch, var(--sb)) 22%, transparent); color: var(--ch, var(--sb)); }
.nxm-channel__icon svg { width: 22px; height: 22px; }
.nxm-channel strong { font: 650 1.12rem/1.2 var(--font-display); }
.nxm-channel span { color: var(--lg-ink-2); font-size: .92rem; }
.nxm-channel--wa { --ch: #25d366; }
.nxm-contact-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 899px) { .nxm-contact-main { grid-template-columns: minmax(0, 1fr); } }

@media (forced-colors: active) {
	.nxm-scene { display: none; }
	.nxm-explore__ind { display: none; }
	.nxm-explore__tab[aria-selected="true"] { outline: 2px solid Highlight; }
}