/* =====================================================================
   NEW HOME: every section below the hero (page-new-hero.php)
   =====================================================================
   Same language as the two comps the owner supplied: white page, Inter 800
   headings whose last words turn to the logo red, a small eyebrow with a red
   dot and a hairline, white cards with a soft border, and icons that
   alternate the logo's red and charcoal.

   Sections reveal as they scroll into view: new-hero.js adds .is-in to each
   [data-nh-reveal] section, and .nw-r children rise in with a stagger set
   by --i. Without JavaScript nothing is hidden (the hidden state only
   applies under .nh-js). Looping decoration waits until its section is in
   view, and all of it stops for reduced motion.

   Loaded after new-hero.css, so it shares its tokens (--nh-red etc.).
   ===================================================================== */

.nh-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================ SCAFFOLDING */

.nw, .nx {
	position: relative;
	padding: clamp(72px, 6.2vw, 120px) var(--nh-pad) 0;
	--nx-a:    var(--nh-red);
	--nx-t:    var(--nh-red-t);
	--nx-wash: rgba(239, 68, 68, .045);
}
.is-g, .nw-card--g, .nw-ways--g, .nw-tile--g {
	--nx-a:    #2A2F35;
	--nx-t:    var(--nh-grey-t);
	--nx-wash: rgba(18, 21, 24, .03);
}

.nw-eyebrow {
	display: flex;
	align-items: center;
	margin: 0;
	font-size: clamp(12px, 1vw, 18px);
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #3B4147;
}
.nw-eyebrow::before {
	content: "";
	flex: none;
	width: .62em; height: .62em;
	margin-right: 1.3em;
	border-radius: 50%;
	background: var(--nh-red);
	box-shadow: 0 0 0 5px rgba(239, 68, 68, .12);
}
.nw-eyebrow::after {
	content: "";
	width: clamp(40px, 5.8vw, 104px);
	height: 1px;
	margin-left: 1.2em;
	background: rgba(18, 21, 24, .18);
}

.nw-title {
	margin: clamp(14px, 1.3vw, 24px) 0 0;
	font-family: var(--nh-head);
	font-size: clamp(32px, 3.75vw, 72px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -.045em;
	color: var(--nh-ink);
	text-wrap: balance;
}
.nw-title em {
	font-style: normal;
	background: linear-gradient(95deg, #F35A5F 0%, var(--nh-red) 45%, var(--nh-red-d) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.nw-sub {
	margin: clamp(14px, 1.5vw, 28px) 0 0;
	max-width: 40em;
	font-size: clamp(16px, 1.22vw, 22px);
	line-height: 1.52;
	color: var(--nh-body);
}

/* round or square icon holder, coloured by the card's accent */
.nx-ic {
	display: grid;
	place-items: center;
	flex: none;
	width: clamp(48px, 3.4vw, 62px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--nx-t);
	color: var(--nx-a);
	transition: background .35s var(--nh-ease), color .35s var(--nh-ease), transform .35s var(--nh-ease);
}
.nx-ic svg { width: 46%; }
.nx-ic--sq { border-radius: 30%; }

/* "Learn More  ->" */
.nx-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(14.5px, .96vw, 17px);
	font-weight: 600;
	color: var(--nx-a);
	white-space: nowrap;
}
.nx-more svg { width: 1.05em; transition: transform .3s var(--nh-ease); }
.nx-more:hover svg { transform: translateX(4px); }
.nx-more--head { align-self: end; justify-self: end; color: var(--nh-red); }

/* heading on the left, paragraph or link on the right */
.nx-head2 {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(20px, 4vw, 80px);
	align-items: end;
}
.nx-head2 .nw-sub { margin: 0; }
.nx-head2__side { display: grid; gap: 18px; justify-items: start; }

/* ----------------------------------------------------------- reveal */
.nh-js [data-nh-reveal] .nw-r {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--nh-ease) calc(var(--i, 0) * 80ms), transform .9s var(--nh-ease) calc(var(--i, 0) * 80ms);
}
.nh-js [data-nh-reveal].is-in .nw-r { opacity: 1; transform: none; }
.nh-js [data-nh-reveal]:not(.is-in) * { animation-play-state: paused !important; }

/* ========================================================= 2. WHO WE ARE */

.nx-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 96px);
	align-items: end;
}
.nx-intro__body p {
	margin: 0;
	font-size: clamp(16px, 1.12vw, 20px);
	line-height: 1.6;
	color: var(--nh-body);
}
.nx-intro__body .nx-intro__lead {
	margin-bottom: 18px;
	font-family: var(--nh-head);
	font-size: clamp(19px, 1.5vw, 27px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.015em;
	color: var(--nh-ink);
}
.nx-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: clamp(36px, 3.4vw, 64px) 0 0;
	padding: clamp(20px, 1.5vw, 28px) 0 0;
	border-top: 1px solid rgba(18, 21, 24, .09);
}
.nx-facts li { display: flex; align-items: center; gap: 16px; padding-right: 16px; }
.nx-facts li + li { padding-left: clamp(16px, 2vw, 36px); border-left: 1px solid rgba(18, 21, 24, .09); }
.nx-facts .nx-ic { width: clamp(44px, 2.8vw, 52px); }
.nx-facts b { display: block; font-size: clamp(15px, 1.02vw, 18px); font-weight: 600; color: var(--nh-ink); }
.nx-facts small { display: block; margin-top: 3px; font-size: clamp(13.5px, .88vw, 16px); color: #6A7178; }

/* ========================================================= 3. WHAT WE DO */

.nw-head { position: relative; }
.nw-copy { position: relative; z-index: 2; width: 50vw; }
.nw-copy .nw-sub { max-width: 35em; }

.nw-cards {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(14px, 1.58vw, 28px);
	margin-top: clamp(32px, 2.7vw, 48px);
}
.nw-card, .nx-bcard, .nx-gcard, .nx-wcard, .nx-case {
	position: relative;
	border-radius: clamp(18px, 1.25vw, 22px);
	background: linear-gradient(160deg, #FFFFFF 52%, var(--nx-wash) 100%);
	border: 1px solid rgba(18, 21, 24, .085);
	transition: opacity .8s var(--nh-ease) calc(var(--i, 0) * 80ms), transform .9s var(--nh-ease) calc(var(--i, 0) * 80ms), translate .4s var(--nh-ease), box-shadow .4s var(--nh-ease), border-color .4s var(--nh-ease);
}
.nw-card:hover, .nx-bcard:hover, .nx-gcard:hover, .nx-wcard:hover, .nx-case:hover {
	translate: 0 -6px;
	border-color: color-mix(in srgb, var(--nx-a) 26%, transparent);
	box-shadow: 0 34px 60px -38px rgba(60, 30, 30, .42);
}
.nw-card:hover .nx-ic, .nx-bcard:hover .nx-ic, .nx-gcard:hover .nx-ic, .nx-wcard:hover .nx-ic, .nx-why__list li:hover .nx-ic { background: var(--nx-a); color: #fff; }
.nw-card:has(:focus-visible), .nx-gcard:has(:focus-visible) { outline: 2px solid var(--nx-a); outline-offset: 3px; }

.nw-card {
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 1.55vw, 28px) clamp(20px, 1.55vw, 28px) clamp(24px, 1.9vw, 34px);
}
.nw-card .nx-ic { width: clamp(56px, 4.05vw, 72px); }
.nw-card h3 {
	margin: clamp(20px, 1.75vw, 32px) 0 0;
	font-family: var(--nh-head);
	font-size: clamp(15px, 1.08vw, 19.5px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--nh-ink);
}
.nw-card p { margin: 12px 0 0; font-size: clamp(14.5px, .96vw, 17px); line-height: 1.45; color: var(--nh-body); }
.nw-card__go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: clamp(20px, 1.6vw, 30px);
	font-size: clamp(14.5px, .96vw, 17px);
	font-weight: 600;
	color: var(--nx-a);
}
.nw-card__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nw-card__go:focus-visible { outline: none; }
.nw-card__go svg { width: 1.05em; transition: transform .3s var(--nh-ease); }
.nw-card:hover .nw-card__go svg { transform: translateX(5px); }

.nw-ways {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: clamp(32px, 2.4vw, 44px) 0 0;
	padding: clamp(20px, 1.3vw, 24px) 0 0;
	border-top: 1px solid rgba(18, 21, 24, .09);
}
.nw-ways li { display: flex; align-items: center; gap: clamp(14px, 1.1vw, 20px); padding-right: 12px; }
.nw-ways li + li { padding-left: clamp(16px, 2.3vw, 42px); border-left: 1px solid rgba(18, 21, 24, .09); }
.nw-ways__ic {
	display: grid; place-items: center; flex: none;
	width: clamp(42px, 2.75vw, 50px); aspect-ratio: 1; border-radius: 50%;
	background: var(--nx-t); color: var(--nx-a);
}
.nw-ways__ic svg { width: 46%; }
.nw-ways b { display: block; font-size: clamp(15px, 1.02vw, 18px); font-weight: 600; color: var(--nh-ink); }
.nw-ways small { display: block; margin-top: 3px; font-size: clamp(13.5px, .9vw, 16px); color: #6A7178; }

/* ---- the illustration top right ---- */
.nw-art {
	position: absolute;
	z-index: 1;
	right: calc(2vw - var(--nh-pad));
	top: -2.6vw;
	width: 44.8vw;
	aspect-ratio: 794 / 370;
	container-type: inline-size;
	pointer-events: none;
}
.nw-art__glow {
	position: absolute;
	left: 34%; top: 1.4%;
	width: 45.3%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, #FBE8E8 0%, #FCEEEE 78%, rgba(252, 238, 238, 0) 100%);
	animation: nh-breathe 11s ease-in-out infinite;
}
.nw-art__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nw-curve { fill: none; stroke: var(--nh-red); stroke-width: 1.4; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nw-curve { animation: nh-draw 1.8s .5s var(--nh-ease) forwards; }
.is-in .nw-curve--b { animation-delay: 1.1s; }
.nw-dot { fill: var(--nh-red); transform-box: fill-box; transform-origin: center; animation: nw-pulse 2.6s ease-in-out infinite; }
.nw-flow { fill: none; stroke: #A3A8AE; stroke-width: 1.5; stroke-dasharray: 5 5; animation: nw-flow 1.4s linear infinite; }
.nw-arrowhead { fill: none; stroke: #A3A8AE; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nw-scribble { fill: none; stroke: #5E6166; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nw-scribble { animation: nh-draw .9s 1.5s var(--nh-ease) forwards; }
.is-in .nw-scribble--h { animation-delay: 2.2s; }
.nw-art__hand {
	position: absolute;
	left: .6%; top: 12%;
	margin: 0;
	font-family: 'Caveat', cursive;
	font-size: 3.1cqw;
	font-weight: 500;
	line-height: 1.05;
	color: #4E555B;
	transform: rotate(-21deg);
	transform-origin: left bottom;
	clip-path: inset(0 100% 0 0);
}
.nw-art__hand span { display: block; }
.nw-art__hand span + span { padding-left: .9em; }
.is-in .nw-art__hand { animation: nw-write 1.3s .9s steps(24) forwards; }
.nw-art__card {
	position: absolute;
	left: 28.3%; top: 33.8%;
	width: 34.3%;
	display: flex;
	align-items: center;
	gap: 2.8cqw;
	padding: 3.4cqw 3cqw;
	border-radius: 2.2cqw;
	background: #fff;
	box-shadow: 0 26px 50px -30px rgba(60, 30, 30, .4), 0 0 0 1px rgba(18, 21, 24, .05);
	font-size: 2.25cqw;
	line-height: 1.45;
	color: #4E555B;
	animation: nh-float 7s ease-in-out infinite;
}
.nw-art__code { display: grid; place-items: center; flex: none; width: 9cqw; aspect-ratio: 1; border-radius: 1.8cqw; background: #EEF0F3; color: #1E2730; }
.nw-art__code svg { width: 52%; }
.nw-tile {
	position: absolute;
	display: grid; place-items: center;
	width: 10.2cqw; aspect-ratio: 1;
	border-radius: 2.3cqw;
	background: linear-gradient(150deg, color-mix(in srgb, var(--nx-t) 45%, #fff) 0%, var(--nx-t) 100%);
	box-shadow: 0 22px 40px -26px rgba(60, 30, 30, .45), 0 0 0 1px rgba(18, 21, 24, .05);
	color: var(--nx-a);
	--nx-a: var(--nh-red); --nx-t: #FDE3E3;
}
.nw-tile svg { width: 43%; }
.nw-tile--g { --nx-a: #3A3F45; --nx-t: #ECEDEF; }
.nw-tile--chart  { --nx-a: var(--nh-red); --nx-t: #FDE3E3; left: 62%;   top: 8.1%;  animation: nh-float 6.2s ease-in-out infinite; }
.nw-tile--rocket { left: 73.4%; top: 37.8%; animation: nh-float2 5.6s ease-in-out infinite; }
.nw-tile--db     { left: 68.3%; top: 69.5%; animation: nh-float 6.8s -2s ease-in-out infinite; }

@keyframes nw-flow  { to { stroke-dashoffset: -20; } }
@keyframes nw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes nw-write { to { clip-path: inset(0 0 0 0); } }

/* ============================================================ 4. BUILD */

.nx-split {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: start;
}
.nx-split__aside { position: sticky; top: 40px; }
.nx-path {
	display: grid;
	gap: 0;
	list-style: none;
	margin: clamp(26px, 2.2vw, 40px) 0 0;
	padding: 0;
	max-width: 380px;
}
.nx-path li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	font-size: clamp(15px, 1.02vw, 18px);
	font-weight: 500;
	color: var(--nh-ink);
}
.nx-path li span {
	display: grid; place-items: center; flex: none;
	width: 34px; aspect-ratio: 1; border-radius: 50%;
	border: 1.5px solid rgba(239, 68, 68, .35);
	font-size: 14px; font-weight: 700; color: var(--nh-red);
	background: #fff;
	position: relative; z-index: 1;
}
.nx-path li:last-child span { background: var(--nh-red); border-color: var(--nh-red); color: #fff; }
.nx-path li + li::before {
	content: "";
	position: absolute;
	left: 16.5px; top: -12px;
	width: 1.5px; height: 24px;
	background: repeating-linear-gradient(180deg, rgba(239, 68, 68, .45) 0 4px, transparent 4px 8px);
}

.nx-build__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.4vw, 24px);
}
.nx-bcard { padding: clamp(22px, 1.7vw, 32px); }
.nx-bcard__top { display: flex; align-items: flex-start; justify-content: space-between; }
.nx-bcard__n { font-family: var(--nh-head); font-size: clamp(13px, .85vw, 15px); font-weight: 700; letter-spacing: .08em; color: #B0B4B9; }
.nx-bcard h3, .nx-gcard h3, .nx-wcard h3, .nx-why__list h3, .nx-ai__grid h3 {
	margin: clamp(18px, 1.5vw, 28px) 0 0;
	font-family: var(--nh-head);
	font-size: clamp(17px, 1.22vw, 22px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--nh-ink);
}
.nx-bcard p, .nx-gcard p, .nx-wcard p, .nx-why__list p {
	margin: 10px 0 0;
	font-size: clamp(14.5px, .98vw, 17.5px);
	line-height: 1.5;
	color: var(--nh-body);
}

/* =============================================================== 5. AI */

.nx-ai__panel {
	position: relative;
	overflow: hidden;
	padding: clamp(36px, 4.4vw, 84px) clamp(24px, 4.4vw, 84px) clamp(32px, 3.6vw, 68px);
	border-radius: clamp(24px, 2vw, 36px);
	background: #111417;
	color: #fff;
	isolation: isolate;
}
.nx-ai__glow {
	position: absolute; z-index: -1; inset: 0;
	background:
		radial-gradient(42% 60% at 88% 18%, rgba(239, 68, 68, .32), transparent 70%),
		radial-gradient(30% 40% at 6% 100%, rgba(239, 68, 68, .16), transparent 70%);
}
.nx-ai__panel::before {
	content: "";
	position: absolute; z-index: -1; inset: 0;
	background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(70% 80% at 70% 30%, #000, transparent 75%);
	-webkit-mask-image: radial-gradient(70% 80% at 70% 30%, #000, transparent 75%);
}
.nw-eyebrow--light { color: rgba(255, 255, 255, .78); }
.nw-eyebrow--light::after { background: rgba(255, 255, 255, .22); }
.nx-ai .nw-title { color: #fff; }
.nx-ai .nw-title em { background: linear-gradient(95deg, #FF7A7E 0%, #F35A5F 50%, #EF4444 100%); -webkit-background-clip: text; background-clip: text; }
.nx-ai .nw-sub { color: rgba(255, 255, 255, .72); }
.nx-ai__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
	gap: clamp(32px, 4.5vw, 88px);
	align-items: center;
}
.nx-btn-light {
	margin-top: clamp(24px, 2vw, 36px);
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .2);
	font-weight: 600;
}
.nx-btn-light:hover { background: rgba(255, 255, 255, .14); }

/* the agent demo */
.nx-demo {
	position: relative;
	padding: clamp(16px, 1.3vw, 24px);
	border-radius: 22px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
	backdrop-filter: blur(6px);
	font-size: clamp(14px, .95vw, 16.5px);
}
.nx-demo__bar { display: flex; align-items: center; gap: 6px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: rgba(255, 255, 255, .6); }
.nx-demo__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.nx-demo__bar span { margin-left: 8px; }
.nx-demo__bar em { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-style: normal; color: #FF8A8E; }
.nx-demo__bar em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF4A50; animation: nw-pulse 1.6s ease-in-out infinite; }
.nx-demo__msg { max-width: 82%; padding: 12px 16px; border-radius: 16px; line-height: 1.45; }
.nx-demo__msg small { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.nx-demo__msg--in { background: rgba(255, 255, 255, .09); border-bottom-left-radius: 4px; }
.nx-demo__msg--out { margin-left: auto; background: linear-gradient(160deg, #F35A5F, #EF4444); border-bottom-right-radius: 4px; box-shadow: 0 16px 30px -18px rgba(239, 68, 68, .9); }
.nx-demo__work { display: flex; align-items: center; gap: 16px; margin: 16px 0; padding: 14px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, .16); }
.nx-demo__core {
	display: grid; place-items: center; flex: none;
	width: 54px; aspect-ratio: 1; border-radius: 16px;
	background: rgba(239, 68, 68, .16); color: #FF6B70;
	box-shadow: 0 0 0 0 rgba(239, 68, 68, .5);
	animation: nx-ring 2.4s ease-out infinite;
}
.nx-demo__core svg { width: 56%; }
.nx-demo__tools { display: grid; gap: 7px; flex: 1; list-style: none; margin: 0; padding: 0; }
.nx-demo__tools li {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 10px; border-radius: 10px;
	background: rgba(255, 255, 255, .04);
	color: rgba(255, 255, 255, .55);
	font-size: .9em;
	animation: nx-tool 6s ease-in-out infinite;
}
.nx-demo__tools li:nth-child(2) { animation-delay: .5s; }
.nx-demo__tools li:nth-child(3) { animation-delay: 1s; }
.nx-demo__tools svg { width: 16px; flex: none; }
.nx-demo__tools b { margin-left: auto; font-size: .85em; font-weight: 600; color: #7BE0A5; opacity: 0; animation: nx-tick 6s ease-in-out infinite; animation-delay: inherit; }
.nx-demo__msg--out { animation: nx-answer 6s ease-in-out infinite; }

@keyframes nx-ring { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); } 80%, 100% { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); } }
@keyframes nx-tool {
	0%, 8%   { background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .55); }
	14%, 88% { background: rgba(255, 255, 255, .1);  color: #fff; }
	100%     { background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .55); }
}
@keyframes nx-tick   { 0%, 6% { opacity: 0; } 12%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes nx-answer { 0%, 30% { opacity: 0; transform: translateY(8px); } 38%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.nx-ai__label {
	margin: clamp(40px, 3.6vw, 68px) 0 0;
	padding-top: clamp(24px, 2vw, 36px);
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: clamp(12px, .8vw, 14px);
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
.nx-ai__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 2.6vw, 48px) clamp(24px, 3vw, 56px);
	list-style: none;
	margin: clamp(20px, 1.8vw, 32px) 0 0;
	padding: 0;
}
.nx-ai__grid li { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
.nx-ai__grid .nx-ic { grid-row: span 2; width: clamp(44px, 2.9vw, 52px); border-radius: 30%; background: rgba(239, 68, 68, .14); color: #FF6B70; }
.nx-ai__grid li:nth-child(even) .nx-ic { background: rgba(255, 255, 255, .08); color: #fff; }
.nx-ai__grid h3 { margin: 2px 0 0; color: #fff; font-size: clamp(16.5px, 1.12vw, 20px); }
.nx-ai__grid p { margin: 6px 0 0; font-size: clamp(14px, .95vw, 16.5px); line-height: 1.5; color: rgba(255, 255, 255, .62); }

/* =========================================================== 6. GROWTH */

.nx-grow__body {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(16px, 1.6vw, 28px);
	margin-top: clamp(32px, 3vw, 56px);
}
.nx-chart {
	position: relative;
	min-height: 360px;
	padding: clamp(20px, 1.6vw, 30px);
	border-radius: clamp(18px, 1.25vw, 22px);
	background: linear-gradient(180deg, #FFFFFF, #FFF8F8);
	border: 1px solid rgba(18, 21, 24, .085);
	overflow: hidden;
}
.nx-chart__head { display: flex; align-items: center; gap: 8px; font-family: var(--nh-head); font-size: clamp(15px, 1vw, 18px); font-weight: 700; color: var(--nh-ink); }
.nx-chart__head i { width: 22px; height: 6px; border-radius: 6px; background: #EDEEF0; }
.nx-chart__head i:first-of-type { margin-left: auto; background: var(--nh-red); opacity: .8; }
.nx-chart svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; overflow: visible; }
.nx-chart__grid { stroke: rgba(18, 21, 24, .06); stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.nx-chart__line { fill: none; stroke: var(--nh-red); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.nx-chart__area { opacity: 0; }
.is-in .nx-chart__line { animation: nh-draw 2s .5s var(--nh-ease) forwards; }
.is-in .nx-chart__area { animation: nx-fade 1.2s 1.6s ease forwards; }
.nx-chart__plot { position: absolute; left: 0; right: 0; bottom: 0; height: 78%; }
/* each pin is a point on the line: a ringed dot, with its label above */
.nx-chart__pin {
	position: absolute;
	left: var(--x); top: var(--y);
	width: 0; height: 0;
	opacity: 0;
}
.nx-chart__pin::after {
	content: "";
	position: absolute;
	left: -7px; top: -7px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--nh-red);
	box-sizing: border-box;
}
.nx-chart__pin > span {
	position: absolute;
	left: 0; bottom: 16px;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px 6px 6px;
	border-radius: 99px;
	background: #fff;
	box-shadow: 0 14px 30px -18px rgba(60, 30, 30, .45), 0 0 0 1px rgba(18, 21, 24, .06);
	font-size: clamp(13px, .85vw, 15px); font-weight: 600; color: var(--nh-ink);
	transform: translateX(-50%);
	white-space: nowrap;
}
.nx-chart__pin.is-hot > span { transform: translateX(-78%); }
.nx-chart__pin b { display: grid; place-items: center; width: 24px; aspect-ratio: 1; border-radius: 50%; background: var(--nh-grey-t); font-size: 12px; }
.nx-chart__pin.is-hot b { background: var(--nh-red); color: #fff; }
.is-in .nx-chart__pin { animation: nx-pin .6s var(--nh-ease) forwards; }
.is-in .nx-chart__pin:nth-child(1) { animation-delay: 1s; }
.is-in .nx-chart__pin:nth-child(2) { animation-delay: 1.5s; }
.is-in .nx-chart__pin:nth-child(3) { animation-delay: 2.1s; }
@keyframes nx-fade { to { opacity: 1; } }
@keyframes nx-pin  { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

.nx-grow__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px); }
.nx-gcard { display: flex; flex-direction: column; padding: clamp(22px, 1.6vw, 30px); }
.nx-gcard p { margin-bottom: 18px; }
.nx-gcard .nx-more { margin-top: auto; }
.nx-gcard .nx-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nx-gcard .nx-more:focus-visible { outline: none; }
.nx-gcard:hover .nx-more svg { transform: translateX(5px); }

/* ============================================================== 7. WHO */

.nx-who__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.4vw, 24px);
	margin-top: clamp(32px, 3vw, 56px);
}
.nx-wcard { display: flex; gap: clamp(16px, 1.3vw, 22px); padding: clamp(22px, 1.7vw, 32px); }
.nx-wcard h3 { margin-top: 4px; }
.nx-wcard .nx-ic { align-self: flex-start; }

/* ============================================================== 8. WHY */

.nx-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: center;
}
.nx-merge { position: relative; margin-top: clamp(28px, 2.6vw, 48px); max-width: 560px; aspect-ratio: 560 / 230; }
.nx-merge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nx-merge__l { fill: none; stroke: rgba(239, 68, 68, .45); stroke-width: 1.5; stroke-dasharray: 5 6; animation: nw-flow 1.2s linear infinite reverse; }
.nx-merge ul { position: absolute; left: 0; top: 0; bottom: 0; width: 30.4%; display: flex; flex-direction: column; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.nx-merge li {
	padding: 7px 0; border-radius: 99px; text-align: center;
	background: #fff; border: 1px solid rgba(18, 21, 24, .1);
	font-size: clamp(12.5px, .85vw, 15px); font-weight: 600; color: #3B4147;
	box-shadow: 0 10px 22px -16px rgba(18, 21, 24, .35);
}
.nx-merge__one {
	position: absolute; right: 0; top: 50%;
	display: grid; place-items: center;
	width: 23%; aspect-ratio: 1; border-radius: 50%;
	transform: translateY(-50%);
	background: linear-gradient(160deg, #F35A5F, #EF4444);
	color: #fff; font-family: var(--nh-head); font-weight: 700; font-size: clamp(13px, .95vw, 17px); text-align: center; line-height: 1.1;
	box-shadow: 0 20px 40px -18px rgba(239, 68, 68, .8);
	animation: nx-ring 2.6s ease-out infinite;
}
.nx-why__list { list-style: none; margin: 0; padding: 0; }
.nx-why__list li {
	position: relative;
	display: flex; gap: clamp(16px, 1.4vw, 24px);
	padding: clamp(22px, 1.8vw, 32px) 0;
	border-bottom: 1px solid rgba(18, 21, 24, .09);
}
.nx-why__list li:first-child { border-top: 1px solid rgba(18, 21, 24, .09); }
.nx-why__list h3 { margin-top: 4px; }
.nx-why__list p { max-width: 30em; }
.nx-why__n { margin-left: auto; font-family: var(--nh-head); font-size: clamp(13px, .85vw, 15px); font-weight: 700; letter-spacing: .08em; color: #B0B4B9; }

/* ============================================================= 9. WORK */

.nx-work__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.4vw, 24px);
	margin-top: clamp(32px, 3vw, 56px);
}
.nx-case { display: flex; flex-direction: column; padding: clamp(22px, 1.6vw, 30px); --nx-a: var(--nh-red); }
.nx-case__top { display: flex; align-items: center; justify-content: space-between; }
.nx-case__cat { padding: 6px 12px; border-radius: 99px; background: var(--nh-grey-t); font-size: 13px; font-weight: 600; color: #3B4147; }
.nx-case__go { display: grid; place-items: center; width: 38px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(18, 21, 24, .12); color: var(--nh-ink); transition: background .3s, color .3s, transform .3s var(--nh-ease); }
.nx-case__go svg { width: 16px; }
.nx-case__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.nx-case:hover .nx-case__go { background: var(--nh-red); border-color: var(--nh-red); color: #fff; transform: rotate(45deg); }
.nx-case__num {
	margin: clamp(26px, 2.4vw, 44px) 0 0;
	font-family: var(--nh-head);
	font-size: clamp(40px, 3.6vw, 66px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.05em;
	background: linear-gradient(95deg, #F35A5F, var(--nh-red-d));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.nx-case__label { margin: 8px 0 0; font-size: clamp(13.5px, .9vw, 16px); font-weight: 600; color: #6A7178; }
.nx-case h3 {
	margin: clamp(18px, 1.5vw, 28px) 0 0;
	padding-top: clamp(16px, 1.3vw, 22px);
	border-top: 1px solid rgba(18, 21, 24, .08);
	font-family: var(--nh-head); font-size: clamp(16.5px, 1.12vw, 20px); font-weight: 700; letter-spacing: -.02em; color: var(--nh-ink);
}
.nx-case__desc { margin: 8px 0 0; font-size: clamp(14px, .94vw, 16.5px); line-height: 1.5; color: var(--nh-body); }
.nx-case__tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: auto 0 0; padding: 18px 0 0; }
.nx-case__tags li { padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(18, 21, 24, .1); font-size: 12.5px; color: #4E555B; }
.nx-note { margin: 18px 0 0; font-size: 14px; color: #7A8087; }

/* ========================================================= 10. PROCESS */
/* Built from the owner's process comp (1774 x 887): steps on a timeline at
   left, a project dashboard with a phone and a result card at right. The art
   is one box in the comp's proportions; everything in it is placed in % of
   that box and sized in cqw, so it holds together at any width. */

.nx-proc__grid {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 56px);
	align-items: center;
}
.nx-proc .nw-title em .nx-sw {
	position: relative;
	display: inline-block;
	background: inherit;
	-webkit-background-clip: text;
	background-clip: text;
}
.nx-sw svg { position: absolute; left: 4%; bottom: -.1em; width: 92%; height: .14em; overflow: visible; }
.nx-sw path { fill: none; stroke: #F5B5B8; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-sw path { animation: nh-draw 1s 1s var(--nh-ease) forwards; }

.nx-proc__steps {
	position: relative;
	display: grid;
	gap: clamp(12px, 1.05vw, 20px);
	list-style: none;
	margin: clamp(24px, 1.8vw, 34px) 0 0;
	padding: 0 0 0 clamp(26px, 2vw, 36px);
}
/* the dashed timeline, and a red fill that runs down it on reveal */
.nx-proc__steps::before, .nx-proc__steps::after {
	content: "";
	position: absolute;
	left: 5px; top: 52px; bottom: 52px;
	width: 2px;
}
.nx-proc__steps::before { background: repeating-linear-gradient(180deg, rgba(18, 21, 24, .16) 0 5px, transparent 5px 10px); }
.nx-proc__steps::after {
	background: var(--nh-red);
	transform-origin: top;
	transform: scaleY(0);
	transition: transform 2.4s var(--nh-ease) .6s;
}
.is-in .nx-proc__steps::after { transform: scaleY(1); }
.nx-proc__steps li { position: relative; display: flex; align-items: center; }
.nx-proc__steps li::before {
	content: "";
	position: absolute;
	left: calc(-1 * clamp(26px, 2vw, 36px));
	top: 50%;
	width: 12px; height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--nx-a);
	box-shadow: 0 0 0 5px #fff;
	z-index: 1;
	animation: nx-step 8s ease-in-out infinite;
	animation-delay: calc((var(--i) - 3) * 2s);
}
@keyframes nx-step { 0%, 20%, 100% { box-shadow: 0 0 0 5px #fff, 0 0 0 5px transparent; } 6%, 14% { box-shadow: 0 0 0 5px #fff, 0 0 0 11px color-mix(in srgb, var(--nx-a) 22%, transparent); } }
.nx-proc__n {
	display: grid; place-items: center; flex: none;
	width: clamp(46px, 3vw, 54px); aspect-ratio: 1;
	margin-right: -10px;
	border-radius: 50%;
	background: var(--nx-t);
	font-family: var(--nh-head); font-size: clamp(15px, 1.1vw, 20px); font-weight: 700;
	color: var(--nx-a);
}
.nx-proc__card {
	position: relative;
	z-index: 1;
	flex: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(14px, 1.3vw, 24px);
	padding: clamp(14px, 1vw, 18px) clamp(16px, 1.3vw, 24px) clamp(14px, 1vw, 18px) clamp(14px, 1.1vw, 20px);
	border-radius: clamp(16px, 1.1vw, 20px);
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .07);
	box-shadow: 0 18px 40px -30px rgba(18, 21, 24, .35);
	color: inherit;
	transition: translate .4s var(--nh-ease), box-shadow .4s var(--nh-ease), border-color .4s;
}
.nx-proc__card:hover { translate: 6px 0; border-color: color-mix(in srgb, var(--nx-a) 26%, transparent); box-shadow: 0 26px 50px -30px rgba(60, 30, 30, .42); }
.nx-proc__card:focus-visible { outline: 2px solid var(--nx-a); outline-offset: 3px; }
.nx-proc__card .nx-ic { width: clamp(50px, 3.9vw, 70px); }
.nx-proc__card:hover .nx-ic { background: var(--nx-a); color: #fff; }
.nx-proc__txt h3 { margin: 0; font-family: var(--nh-head); font-size: clamp(17px, 1.24vw, 22px); font-weight: 700; letter-spacing: -.02em; color: var(--nh-ink); }
.nx-proc__txt p { margin: 4px 0 0; font-size: clamp(14.5px, 1.02vw, 18px); line-height: 1.42; color: var(--nh-body); }
.nx-proc__go {
	display: grid; place-items: center; flex: none;
	width: clamp(38px, 2.6vw, 46px); aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(18, 21, 24, .14);
	color: var(--nh-ink);
	transition: background .3s, color .3s, border-color .3s;
}
.nx-proc__go svg { width: 40%; }
.nx-proc__card:hover .nx-proc__go { background: var(--nx-a); border-color: var(--nx-a); color: #fff; }

/* ---- the art ---- */
.nx-proc__art {
	position: relative;
	margin-right: calc(2vw - var(--nh-pad));
	aspect-ratio: 874 / 800;
	container-type: inline-size;
	pointer-events: none;
}
.nx-proc__glow {
	position: absolute;
	left: 19.5%; top: 3.75%;
	width: 75.5%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, #FDEEEE 0%, #FEF5F5 62%, rgba(255, 255, 255, 0) 100%);
	animation: nh-breathe 12s ease-in-out infinite;
}
.nx-proc__orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nx-proc__orbit #nx-orb { fill: none; stroke: var(--nh-red); stroke-width: 1.4; opacity: .5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-proc__orbit #nx-orb { animation: nh-draw 2.2s .6s var(--nh-ease) forwards; }
.nx-proc__orbit circle { fill: var(--nh-red); }
.nx-proc__orbit circle.is-g { fill: #8E9196; }
.nx-proc__scribble { fill: none; stroke: #5E6166; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-proc__scribble { animation: nh-draw .9s 1.8s var(--nh-ease) forwards; }
.nx-proc__burst { fill: none; stroke: var(--nh-red); stroke-width: 3; stroke-linecap: round; }

.nx-hand {
	position: absolute;
	margin: 0;
	font-family: 'Caveat', cursive;
	font-weight: 500;
	line-height: 1.05;
	color: #4E555B;
	clip-path: inset(0 100% 0 0);
}
.nx-hand span { display: block; }
.nx-hand--a { left: 8%; top: 1.5%; font-size: 3.4cqw; transform: rotate(-14deg); transform-origin: left bottom; }
.nx-hand--a span + span { padding-left: .8em; }
.nx-hand--b { left: 80%; top: 80%; font-size: 3.1cqw; transform: rotate(-18deg); }
.nx-hand--b span:nth-child(2) { padding-left: .3em; }
.nx-hand--b span:nth-child(3) { padding-left: .2em; }
.nx-hand--b span:nth-child(4) { padding-left: .5em; }
.is-in .nx-hand { animation: nw-write 1.4s 1.2s steps(26) forwards; }
.is-in .nx-hand--b { animation-delay: 2s; }

/* tablet */
.nx-tab {
	position: absolute;
	left: 16.5%; top: 17.3%;
	width: 80.1%;
	aspect-ratio: 700 / 437;
	container-type: inline-size;
	display: grid;
	grid-template-columns: 19% 1fr;
	padding: 2.6cqw 2.4cqw 2.4cqw 1.6cqw;
	border-radius: 3cqw;
	background: #fff;
	border: 1px solid rgba(18, 21, 24, .07);
	box-shadow: 0 50px 90px -50px rgba(60, 30, 30, .45), 0 0 0 7px #F4F4F5, 0 0 0 8px rgba(18, 21, 24, .06);
	transform: perspective(1600px) rotateY(-9deg) rotateX(3deg);
	animation: nh-float 7.5s ease-in-out infinite;
}
.nx-tab__side { display: flex; flex-direction: column; gap: .5cqw; font-size: 1.45cqw; color: #4E555B; }
.nx-tab__side > span:not(.nx-tab__brand) { display: flex; align-items: center; gap: 1.2cqw; padding: 1.1cqw 1.3cqw; border-radius: 1.2cqw; }
.nx-tab__side svg { width: 1.8cqw; opacity: .75; }
.nx-tab__side .is-on { background: var(--nh-red-t); color: var(--nh-red); font-weight: 600; }
.nx-tab__brand { display: flex; align-items: center; gap: .9cqw; margin: 0 0 2.4cqw 1.3cqw; font-family: var(--nh-head); font-size: 2.4cqw; font-weight: 800; color: var(--nh-ink); }
.nx-tab__brand i { width: 3.4cqw; aspect-ratio: 1; background-size: 248% auto; background-position: 2% 50%; background-repeat: no-repeat; }
.nx-tab__main { display: flex; flex-direction: column; gap: 2cqw; padding: 2.4cqw 2.6cqw; border-radius: 2cqw; background: #FBFBFB; }
.nx-tab__head { display: flex; justify-content: space-between; align-items: flex-start; }
.nx-tab__head b { display: block; font-family: var(--nh-head); font-size: 2.5cqw; letter-spacing: -.02em; color: var(--nh-ink); }
.nx-tab__head small { display: block; margin-top: .4cqw; font-size: 1.4cqw; color: #61686E; }
.nx-tab__pill { padding: .9cqw 1.6cqw; border-radius: 99px; border: 1px solid rgba(18, 21, 24, .1); background: #fff; font-size: 1.35cqw; color: #4E555B; }
.nx-tab__bar { position: relative; height: .9cqw; margin-top: 1cqw; border-radius: 99px; background: #ECEDEF; }
.nx-tab__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 68%; border-radius: inherit; background: linear-gradient(90deg, #F87171, var(--nh-red)); transform-origin: left; transform: scaleX(0); }
.is-in .nx-tab__bar i { animation: nh-bar-x 1.8s 1s var(--nh-ease) forwards; }
.nx-tab__bar em { position: absolute; right: 0; top: -2.6cqw; font-style: normal; font-size: 1.35cqw; font-weight: 700; color: var(--nh-ink); }
@keyframes nh-bar-x { to { transform: scaleX(1); } }
.nx-tab__stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; list-style: none; margin: 0; padding: 0; }
.nx-tab__stages li { display: grid; grid-template-columns: auto 1fr; column-gap: 1cqw; align-items: center; padding: 1.3cqw; border-radius: 1.4cqw; background: #fff; border: 1px solid rgba(18, 21, 24, .06); }
.nx-tab__stages i { grid-row: span 2; display: grid; place-items: center; width: 2.8cqw; aspect-ratio: 1; border-radius: 50%; border: .3cqw solid #E2E3E6; }
.nx-tab__stages b { font-size: 1.35cqw; color: var(--nh-ink); }
.nx-tab__stages small { font-size: 1.15cqw; color: #8A9097; }
.nx-tab__stages .is-done i { border: 0; background: var(--nh-red); color: #fff; }
.nx-tab__stages .is-done i svg { width: 60%; }
.nx-tab__stages .is-now i { border-color: var(--nh-red); border-right-color: #F5C2C4; animation: nx-spin 1.6s linear infinite; }
.nx-tab__stages .is-now small { color: var(--nh-red); }
@keyframes nx-spin { to { transform: rotate(360deg); } }
.nx-tab__lower { flex: 1; display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.6cqw; min-height: 0; }
.nx-tab__chart, .nx-tab__users { display: flex; flex-direction: column; padding: 1.8cqw; border-radius: 1.6cqw; background: #fff; border: 1px solid rgba(18, 21, 24, .06); }
.nx-tab__t { display: flex; justify-content: space-between; align-items: center; font-size: 1.35cqw; font-weight: 600; color: var(--nh-ink); }
.nx-tab__t b { padding: .4cqw .9cqw; border-radius: .9cqw; background: var(--nh-red-t); color: var(--nh-red); font-size: 1.3cqw; }
.nx-tab__bars { flex: 1; display: flex; align-items: flex-end; gap: 1.8cqw; margin-top: 1.2cqw; }
.nx-tab__bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: .8cqw; background: linear-gradient(180deg, #F87171, rgba(239, 68, 68, .45)); transform-origin: bottom; transform: scaleY(0); }
.is-in .nx-tab__bars i { animation: nh-bar .9s var(--nh-ease) forwards; }
.is-in .nx-tab__bars i:nth-child(2) { animation-delay: .08s; }
.is-in .nx-tab__bars i:nth-child(3) { animation-delay: .16s; }
.is-in .nx-tab__bars i:nth-child(4) { animation-delay: .24s; }
.is-in .nx-tab__bars i:nth-child(5) { animation-delay: .32s; }
.is-in .nx-tab__bars i:nth-child(6) { animation-delay: .4s; }
.is-in .nx-tab__bars i:nth-child(7) { animation-delay: .48s; }
.nx-tab__users > b { margin-top: 1.4cqw; font-family: var(--nh-head); font-size: 3.2cqw; letter-spacing: -.03em; color: var(--nh-ink); }
.nx-tab__users > em { font-style: normal; font-size: 1.3cqw; font-weight: 600; color: var(--nh-red); }
.nx-tab__users svg { width: 100%; height: 5cqw; margin-top: auto; overflow: visible; }
.nx-tab__users path { fill: none; stroke: var(--nh-red); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .nx-tab__users path { animation: nh-draw 1.6s 1.4s var(--nh-ease) forwards; }

/* phone */
.nx-phone {
	position: absolute;
	left: 3%; top: 47%;
	width: 26%;
	aspect-ratio: 235 / 420;
	padding: 1.3cqw;
	border-radius: 5cqw;
	background: #15181B;
	box-shadow: 0 40px 70px -36px rgba(18, 21, 24, .65);
	rotate: -8deg;
	animation: nh-float2 6.4s ease-in-out infinite;
}
.nx-phone__screen { position: relative; height: 100%; display: flex; flex-direction: column; padding: 4.6cqw 2.4cqw 0; border-radius: 4cqw; background: #fff; overflow: hidden; }
.nx-phone__notch { position: absolute; left: 50%; top: 1.1cqw; width: 34%; height: 2.2cqw; margin-left: -17%; border-radius: 99px; background: #15181B; }
.nx-phone__bar { display: flex; justify-content: space-between; align-items: center; }
.nx-phone__bar .nx-tab__brand { margin: 0; font-size: 2.3cqw; }
.nx-phone__bar > i { width: 2.4cqw; height: 1.4cqw; border-top: .3cqw solid #444; border-bottom: .3cqw solid #444; }
.nx-phone__h { margin-top: 3.4cqw; font-family: var(--nh-head); font-size: 2.2cqw; line-height: 1.15; letter-spacing: -.02em; color: var(--nh-ink); }
.nx-phone__p { margin-top: 1.2cqw; font-size: 1.2cqw; line-height: 1.4; color: #61686E; }
.nx-phone__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: .8cqw; margin-top: 1.8cqw; padding: 1.1cqw 1.9cqw; border-radius: 99px; background: var(--nh-red); color: #fff; font-size: 1.25cqw; font-weight: 600; }
.nx-phone__btn svg { width: 1.6cqw; }
/* an abstract room in place of the comp's photo */
.nx-phone__img { position: relative; flex: 1; min-height: 12cqw; margin: 2.4cqw -2.4cqw 0; background: linear-gradient(180deg, #F6EEEA 0%, #EDE3DD 70%, #DCCFC6 100%); overflow: hidden; }
.nx-phone__img i { position: absolute; display: block; }
.nx-phone__img i:nth-child(1) { left: 48%; top: 10%; width: 40%; height: 55%; border-radius: 1cqw; background: linear-gradient(180deg, #FFFFFF, #F1F4F6); box-shadow: inset 0 0 0 .6cqw #E6DCD5; }
.nx-phone__img i:nth-child(2) { left: 10%; bottom: 14%; width: 46%; height: 22%; border-radius: 1.6cqw 1.6cqw .6cqw .6cqw; background: #3A3F45; }
.nx-phone__img i:nth-child(3) { right: 6%; bottom: 10%; width: 18%; height: 42%; border-radius: 50% 50% 20% 20%; background: radial-gradient(circle at 50% 30%, #6E9B6B, #3F6B45); }

/* result card */
.nx-result {
	position: absolute;
	left: 31.8%; top: 74.4%;
	width: 37.2%;
	display: flex;
	align-items: center;
	gap: 3cqw;
	padding: 3cqw 3.2cqw;
	border-radius: 2.6cqw;
	background: #fff;
	box-shadow: 0 34px 60px -34px rgba(60, 30, 30, .45), 0 0 0 1px rgba(18, 21, 24, .05);
	opacity: 0;
}
.is-in .nx-result { animation: nh-pop .8s 1.4s var(--nh-ease) forwards, nh-float 6.8s 2.4s ease-in-out infinite; }
.nx-result .nx-ic { width: 7.4cqw; }
.nx-result b { display: block; font-family: var(--nh-head); font-size: 1.9cqw; font-weight: 600; color: var(--nh-ink); }
.nx-result strong { display: flex; align-items: center; gap: .8cqw; margin-top: .6cqw; font-family: var(--nh-head); font-size: 3.6cqw; font-weight: 800; letter-spacing: -.03em; color: var(--nh-ink); }
.nx-result strong svg { width: 2.4cqw; color: var(--nh-red); }
.nx-result small { display: block; margin-top: .6cqw; font-size: 1.6cqw; color: #61686E; }

/* ============================================================== 11. FAQ */

.nx-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: start;
}
.nx-faq__aside { position: sticky; top: 40px; }
.nx-faq__cta { display: grid; gap: 18px; justify-items: start; margin-top: clamp(24px, 2vw, 36px); }
.nx-faq__cta .nh-btn svg { width: 1.2em; }
.nx-q { border-bottom: 1px solid rgba(18, 21, 24, .1); }
.nx-q:first-child { border-top: 1px solid rgba(18, 21, 24, .1); }
.nx-q summary {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: clamp(18px, 1.5vw, 26px) 0;
	cursor: pointer;
	list-style: none;
}
.nx-q summary::-webkit-details-marker { display: none; }
.nx-q summary h3 { margin: 0; font-family: var(--nh-head); font-size: clamp(16.5px, 1.18vw, 21px); font-weight: 600; letter-spacing: -.015em; color: var(--nh-ink); transition: color .25s; }
.nx-q summary:hover h3 { color: var(--nh-red); }
.nx-q summary:focus-visible { outline: 2px solid var(--nh-red); outline-offset: 4px; border-radius: 6px; }
.nx-q__ic {
	display: grid; place-items: center; flex: none;
	width: 36px; aspect-ratio: 1; border-radius: 50%;
	background: var(--nh-grey-t); color: var(--nh-ink);
	transition: transform .35s var(--nh-ease), background .3s, color .3s;
}
.nx-q__ic svg { width: 16px; }
.nx-q[open] .nx-q__ic { transform: rotate(45deg); background: var(--nh-red); color: #fff; }
.nx-q__a p { margin: 0; padding: 0 56px clamp(20px, 1.6vw, 28px) 0; font-size: clamp(15px, 1.02vw, 18px); line-height: 1.6; color: var(--nh-body); }
.nx-q[open] .nx-q__a { animation: nx-open .45s var(--nh-ease); }
@keyframes nx-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================== 12. CTA */

.nx-cta { padding-bottom: clamp(72px, 6.2vw, 120px); }
.nx-cta__panel {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(44px, 5vw, 96px) clamp(24px, 5vw, 96px);
	border-radius: clamp(24px, 2vw, 36px);
	background: linear-gradient(135deg, #F35A5F 0%, var(--nh-red) 40%, #EA3A3A 100%);
	color: #fff;
	text-align: center;
}
.nx-cta__panel::before {
	content: "";
	position: absolute; z-index: -1; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.2px);
	background-size: 26px 26px;
	mask-image: radial-gradient(60% 70% at 50% 50%, transparent 30%, #000 100%);
	-webkit-mask-image: radial-gradient(60% 70% at 50% 50%, transparent 30%, #000 100%);
}
.nx-cta__rings { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.nx-cta__rings i { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); animation: nh-breathe 9s ease-in-out infinite; }
.nx-cta__rings i:nth-child(1) { width: 420px; height: 420px; left: -140px; top: -180px; }
.nx-cta__rings i:nth-child(2) { width: 560px; height: 560px; right: -220px; bottom: -300px; animation-delay: -3s; }
.nx-cta__rings i:nth-child(3) { width: 200px; height: 200px; right: 12%; top: -90px; animation-delay: -6s; }
.nx-cta__t { max-width: 17em; margin: 0 auto; font-family: var(--nh-head); font-size: clamp(30px, 3.6vw, 68px); font-weight: 800; line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.nx-cta__p { max-width: 34em; margin: clamp(16px, 1.4vw, 24px) auto 0; font-size: clamp(16px, 1.22vw, 22px); line-height: 1.5; color: rgba(255, 255, 255, .86); }
.nx-cta__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(26px, 2.4vw, 42px); }
.nx-btn-white { color: var(--nh-red-d); background: #fff; font-weight: 600; box-shadow: 0 18px 34px -18px rgba(60, 0, 0, .6); }
.nx-btn-line { color: #fff; border: 1px solid rgba(255, 255, 255, .45); font-weight: 600; }
.nx-btn-line:hover { background: rgba(255, 255, 255, .1); }
.nx-btn-line svg { width: 1.2em; }
.nx-cta__line { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: clamp(24px, 2.2vw, 40px) 0 0; font-size: clamp(13px, .9vw, 16px); color: rgba(255, 255, 255, .78); letter-spacing: .04em; }
.nx-cta__line span + span::before { content: "\00B7"; margin: 0 .8em; color: rgba(255, 255, 255, .5); }

/* =========================================================== FOOTER */

.nf {
	padding: clamp(48px, 4.4vw, 84px) var(--nh-pad) clamp(24px, 2vw, 36px);
	border-top: 1px solid rgba(18, 21, 24, .08);
	background: #FAFAFA;
}
.nf__top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 56px);
}
.nf__brand .nh-logo img { height: clamp(42px, 3vw, 56px); }
.nf__brand p { max-width: 30em; margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--nh-body); }
.nf__contact { display: grid; gap: 10px; list-style: none; margin: 22px 0 0; padding: 0; font-size: 15px; }
.nf__contact li { display: flex; align-items: flex-start; gap: 10px; color: var(--nh-body); }
.nf__contact svg { width: 18px; flex: none; margin-top: 1px; color: var(--nh-red); }
.nf__contact a { color: var(--nh-ink); }
.nf__contact a:hover, .nf__col a:hover { color: var(--nh-red); }
.nf__col h2 { margin: 0 0 16px; font-family: var(--nh-head); font-size: 15px; font-weight: 700; color: var(--nh-ink); }
.nf__col ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.nf__col a { font-size: 15px; color: var(--nh-body); transition: color .2s; }
.nf__bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
	margin-top: clamp(36px, 3.4vw, 64px);
	padding-top: 22px;
	border-top: 1px solid rgba(18, 21, 24, .08);
	font-size: 14px; color: #7A8087;
}
.nf__bottom p { margin: 0; }
.nf__bottom ul { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nf__bottom a { color: #7A8087; }
.nf__bottom a:hover { color: var(--nh-red); }

/* ======================================================= RESPONSIVE */

@media (max-width: 1280px) {
	.nw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nx-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nw-ways, .nx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
	.nw-ways li:nth-child(3), .nx-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
	.nf__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nf__brand { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
	.nw-copy { width: auto; }
	.nw-art { position: relative; right: auto; top: auto; width: 100%; max-width: 640px; margin: 32px 0 0 auto; }
	.nx-intro__grid, .nx-head2, .nx-split, .nx-ai__top, .nx-why__grid, .nx-faq__grid, .nx-grow__body, .nx-proc__grid { grid-template-columns: minmax(0, 1fr); }
	.nx-proc__art { margin: 24px auto 0; width: 100%; max-width: 720px; }
	.nx-split__aside, .nx-faq__aside { position: static; }
	.nx-more--head { justify-self: start; }
	.nx-who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nx-ai__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.nw-cards, .nx-build__grid, .nx-grow__cards, .nx-who__grid, .nx-work__grid, .nx-ai__grid { grid-template-columns: minmax(0, 1fr); }
	.nx-proc__card { grid-template-columns: auto minmax(0, 1fr); }
	.nx-proc__go { display: none; }
	.nx-proc__n { display: none; }
	.nw-ways, .nx-facts { grid-template-columns: minmax(0, 1fr); }
	.nw-ways li + li, .nx-facts li + li { padding-left: 0; border-left: 0; }
	.nf__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nw-eyebrow { letter-spacing: .22em; }
	.nx-chart { min-height: 300px; }
	.nx-demo__msg { max-width: 92%; }
	.nx-demo__work { flex-direction: column; align-items: stretch; }
	.nx-demo__core { width: 44px; }
	.nx-q__a p { padding-right: 0; }
	.nx-cta__acts .nh-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.nh-js [data-nh-reveal] .nw-r { opacity: 1; transform: none; }
	.nw-curve, .nw-scribble, .nx-chart__line { stroke-dashoffset: 0; }
	.nw-art__hand { clip-path: none; }
	.nx-chart__area, .nx-chart__pin, .nx-demo__msg--out, .nx-demo__tools b { opacity: 1; }
	.nx-proc__steps::after { transform: scaleY(1); }
	.nx-sw path, .nx-proc__scribble, .nx-tab__users path { stroke-dashoffset: 0; }
	.nx-hand { clip-path: none; }
	.nx-result { opacity: 1; }
	.nx-tab__bar i, .nx-tab__bars i { transform: none; }
}