/* DPDP Theme — New Home template (template-new-home.php).
   Loads after main.css + home.css. Shared homepage sections keep their home.css styles;
   everything unique to this template is prefixed `nh-`. */

/* ═══════════════════════════════════════════════════════════════
   TRANSPARENT HEADER
   The navbar markup is the shared header.php. On this template it sits
   transparently over the dark hero (white logo + links) and switches back to
   the regular white bar once the hero scrolls away (`.nh-nav-solid`, set by
   assets/js/new-home.js) or while the mobile drawer is open
   (`body.nav-drawer-open`, set by theme.js).
═══════════════════════════════════════════════════════════════ */
.nh-transparent-header .navbar {
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background .3s ease, border-color .3s ease;
}
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) { box-shadow: none !important; }
.nh-transparent-header:not(.nav-drawer-open) .navbar.nh-nav-blurred:not(.nh-nav-solid) {
	background: rgba(4, 8, 24, .34);
	border-bottom-color: rgba(255,255,255,.12);
	box-shadow: 0 8px 32px rgba(2,6,23,.16) !important;
	backdrop-filter: blur(18px) saturate(145%);
	-webkit-backdrop-filter: blur(18px) saturate(145%);
}
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-inner { background: transparent; }
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-logo { color: #fff; }
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-logo-image { filter: brightness(0) invert(1); }
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-logo-icon { background: rgba(255,255,255,.16); }
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > li > a,
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > li > .nav-link-group > a { color: rgba(255,255,255,.88); }
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > li > a:hover,
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > li > .nav-link-group > a:hover,
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > li.current-menu-item > a,
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > li.current-menu-ancestor > .nav-link-group > a,
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > .menu-item-has-children:hover > .nav-link-group > a,
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > .menu-item-has-children:focus-within > .nav-link-group > a,
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > .menu-item-has-children.submenu-open > .nav-link-group > a {
	color: #fff;
	background: rgba(255,255,255,.14);
}
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > li > .nav-link-group > .submenu-toggle { color: rgba(255,255,255,.78); }
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > li > .nav-link-group > .submenu-toggle:hover,
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > .menu-item-has-children:hover > .nav-link-group > .submenu-toggle,
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > .menu-item-has-children:focus-within > .nav-link-group > .submenu-toggle,
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-links > .menu-item-has-children.submenu-open > .nav-link-group > .submenu-toggle {
	color: #fff;
	background: rgba(255,255,255,.14);
}
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .btn-outline {
	color: #fff;
	border-color: rgba(255,255,255,.45);
}
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .btn-outline:hover {
	color: #fff;
	border-color: #fff;
	background: rgba(255,255,255,.1);
}
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .btn-primary {
	background: #fff;
	color: var(--slate-900);
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-toggle { background: transparent; }
.nh-transparent-header:not(.nav-drawer-open) .navbar:not(.nh-nav-solid) .nav-toggle-bar { background: #fff; }

/* Solid state: restore the default header look from main.css. */
.nh-transparent-header .navbar.nh-nav-solid,
.nh-transparent-header.nav-drawer-open .navbar {
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom-color: var(--slate-200);
}
@media (max-width: 1024px) {
	.nh-transparent-header .navbar.nh-nav-solid,
	.nh-transparent-header.nav-drawer-open .navbar { background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO — dark, continuously moving gradient
═══════════════════════════════════════════════════════════════ */
.nh-hero {
	position: relative;
	--nh-shift-x: 0px;
	--nh-shift-y: 0px;
	/* Slide under the 68px sticky navbar so the header floats over the hero. */
	margin-top: -68px;
	padding: calc(68px + 96px) 24px 88px;
	background: #0a173a;
	color: #fff;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}
.nh-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	background: linear-gradient(120deg, #0a173a 0%, #10265e 28%, #1e3a8a 50%, #312e81 70%, #0a173a 100%);
	background-size: 300% 300%;
	animation: nh-gradient-shift 18s ease-in-out infinite;
}
.nh-hero-bg::before {
	content: '';
	position: absolute;
	inset: -20%;
	background:
		conic-gradient(from 210deg at 48% 48%, transparent 0 20%, rgba(37,99,235,.38) 29%, transparent 39% 58%, rgba(124,58,237,.28) 67%, transparent 77%),
		radial-gradient(circle at 50% 45%, rgba(96,165,250,.2), transparent 38%);
	filter: blur(34px);
	transform: translate3d(var(--nh-shift-x), var(--nh-shift-y), 0) rotate(0deg);
	animation: nh-hero-orbit 24s linear infinite;
	transition: transform .5s ease-out;
}
.nh-hero-bg::after {
	/* Keep copy readable: darken the centre and the bottom edge. */
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 35%, rgba(10,23,58,.08) 0%, rgba(10,23,58,.48) 60%, rgba(10,23,58,.84) 100%),
		linear-gradient(180deg, rgba(10,23,58,.25) 0%, rgba(10,23,58,0) 30%, rgba(10,23,58,.64) 100%);
}
.nh-hero-blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .8;
	mix-blend-mode: screen;
	will-change: transform;
	animation: nh-drift 20s ease-in-out infinite alternate;
}
.nh-hero-blob-1 {
	width: 60vw; height: 60vw; max-width: 820px; max-height: 820px;
	left: -18%; top: -25%;
	background: radial-gradient(circle, rgba(59,130,246,.95) 0%, rgba(59,130,246,0) 65%);
}
.nh-hero-blob-2 {
	width: 50vw; height: 50vw; max-width: 700px; max-height: 700px;
	right: -14%; top: 5%;
	background: radial-gradient(circle, rgba(139,92,246,.9) 0%, rgba(139,92,246,0) 65%);
	animation-duration: 24s;
	animation-delay: -7s;
}
.nh-hero-blob-3 {
	width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
	left: 28%; bottom: -30%;
	background: radial-gradient(circle, rgba(14,165,233,.85) 0%, rgba(14,165,233,0) 65%);
	animation-duration: 28s;
	animation-delay: -13s;
}
.nh-hero-arc {
	/* The sweeping light arc from the reference hero. */
	position: absolute;
	left: -30vw;
	top: -40vh;
	width: 120vw;
	height: 160vh;
	border-radius: 50%;
	border: 14vw solid transparent;
	border-left-color: rgba(96,165,250,.55);
	border-top-color: rgba(129,140,248,.25);
	filter: blur(40px);
	opacity: .75;
	transform: rotate(-18deg);
	animation: nh-arc 26s ease-in-out infinite alternate;
}
.nh-hero-ribbon {
	position: absolute;
	display: block;
	width: 90vw;
	height: 24vw;
	border-radius: 50%;
	border: 2px solid rgba(147,197,253,.3);
	filter: blur(1px) drop-shadow(0 0 22px rgba(59,130,246,.45));
	opacity: .65;
	transform-origin: center;
}
.nh-hero-ribbon-1 { left: -18vw; top: 18%; transform: rotate(-13deg); animation: nh-ribbon-one 14s ease-in-out infinite alternate; }
.nh-hero-ribbon-2 { right: -25vw; top: 42%; transform: rotate(17deg); opacity: .38; animation: nh-ribbon-two 18s ease-in-out infinite alternate; }
.nh-hero-particles {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle, rgba(255,255,255,.72) 0 1px, transparent 1.6px),
		radial-gradient(circle, rgba(96,165,250,.55) 0 1px, transparent 1.8px);
	background-size: 74px 74px, 113px 113px;
	background-position: 0 0, 35px 52px;
	mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 72%, transparent 96%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 72%, transparent 96%);
	opacity: .28;
	animation: nh-particles 22s linear infinite;
}
@keyframes nh-gradient-shift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@keyframes nh-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(9vw, 7vh, 0) scale(1.18); }
	100% { transform: translate3d(-7vw, -5vh, 0) scale(.92); }
}
@keyframes nh-arc {
	0%   { transform: rotate(-18deg) translate3d(0, 0, 0); opacity: .6; }
	50%  { transform: rotate(-8deg) translate3d(4vw, 3vh, 0); opacity: .85; }
	100% { transform: rotate(-24deg) translate3d(-3vw, -2vh, 0); opacity: .65; }
}
@keyframes nh-hero-orbit { to { transform: translate3d(var(--nh-shift-x), var(--nh-shift-y), 0) rotate(360deg); } }
@keyframes nh-ribbon-one { to { transform: translate3d(9vw, 4vh, 0) rotate(-5deg) scale(1.08); opacity: .9; } }
@keyframes nh-ribbon-two { to { transform: translate3d(-8vw, -3vh, 0) rotate(9deg) scale(.94); opacity: .62; } }
@keyframes nh-particles { to { background-position: 74px -74px, -78px -61px; } }
.nh-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.nh-hero-title {
	font-size: clamp(38px, 5.6vw, 72px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: #fff;
	max-width: 1080px;
	margin: 0 0 26px;
	text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.nh-hero-highlight,
.nh-hero-title em {
	color: #60a5fa;
	text-shadow: 0 0 30px rgba(59,130,246,.4);
	font-style: normal;
}
.nh-hero-line { display: block; }
.nh-hero-sub {
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.7;
	color: rgba(255,255,255,.82);
	max-width: 780px;
	margin: 0 auto 36px;
}
.nh-hero-ctas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.nh-btn-light {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 30px;
	background: #fff;
	color: var(--slate-900);
	font-size: 15px;
	font-weight: 700;
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.4) inset;
	transition: transform .15s, box-shadow .15s;
}
.nh-btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.nh-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 30px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	border-radius: 999px;
	border: 1.5px solid rgba(255,255,255,.45);
	background: rgba(255,255,255,.06);
	backdrop-filter: blur(6px);
	transition: border-color .15s, background .15s, transform .15s;
}
.nh-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.14); transform: translateY(-2px); }

/* Compliance logos inside the hero */
.nh-certs {
	width: 100%;
	max-width: 1120px;
	margin-top: 96px;
}
.nh-certs-title {
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 500;
	letter-spacing: -.01em;
	color: #fff;
	margin-bottom: 40px;
}
.nh-certs-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center;
	gap: 24px;
}
.nh-cert {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 112px;
	padding: 8px 14px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.nh-cert img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 84px;
	max-width: 140px;
	object-fit: contain;
}
.nh-awards { max-width: 1120px; margin: 32px auto; padding: 0 24px; }
.nh-awards .nh-cert { height: auto; min-height: 140px; flex-direction: column; gap: 16px; text-align: center; }
.nh-awards .nh-cert p { font-size: 14px; font-weight: 600; color: var(--slate-700); }
.nh-awards .nh-cert img { height: 84px; }

/* ═══════════════════════════════════════════════════════════════
   CLIENT LOGO SLIDER — infinite loop
═══════════════════════════════════════════════════════════════ */
.nh-clients {
	background: var(--white);
	border-bottom: 1px solid var(--slate-200);
	padding: 52px 24px;
	overflow: hidden;
}
.nh-clients-inner {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 40px;
}
.nh-clients-label {
	flex: 0 0 280px;
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--slate-800);
}
.nh-clients-label span,
.nh-clients-label em {
	background: linear-gradient(135deg, var(--blue-600), var(--indigo-600));
	-webkit-background-clip: text; -webkit-text-fill-color: transparent;
	background-clip: text;
	font-style: normal;
}

.nh-dash .section-title em,
.nh-products .section-title em {
	font-style: normal;
	background: linear-gradient(135deg, var(--blue-600), var(--indigo-600));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.nh-clients-marquee {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.nh-clients-track {
	display: flex;
	align-items: center;
	gap: 20px;
	width: max-content;
	animation: nh-marquee 32s linear infinite;
}
.nh-clients-marquee:hover .nh-clients-track { animation-play-state: paused; }
.nh-client {
	flex: 0 0 auto;
	width: 270px;
	height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: transform .2s;
}
.nh-client:hover { transform: translateY(-2px); }
.nh-client img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 74px;
	object-fit: contain;
}
@keyframes nh-marquee {
	from { transform: translateX(0); }
	/* Track holds two copies of the logo list: shift by one copy (+ one gap) for a seamless loop. */
	to   { transform: translateX(calc(-50% - 10px)); }
}

/* ═══════════════════════════════════════════════════════════════
   HERO DASHBOARD (product tour)
═══════════════════════════════════════════════════════════════ */
.nh-dash {
	padding: 96px 24px 72px;
	background: linear-gradient(180deg, #ffffff 0%, #f3f6ff 100%);
	overflow: hidden;
}
.nh-dash-inner { max-width: 1200px; margin: 0 auto; }
.nh-dash-header { text-align: center; margin-bottom: 8px; }
.nh-dash-subtitle {
	font-size: clamp(16px, 1.5vw, 19px);
	font-weight: 500;
	color: var(--slate-500);
	max-width: 700px;
	margin: 0 auto;
	line-height: 1.6;
}
.nh-dash .hero-media { margin: 40px 0 0; }
.nh-dash .hero-media { perspective: none; }
.nh-dash .hero-media-frame {
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: transparent;
	box-shadow: none;
	transform: none;
}
.nh-dash .hero-media-frame::before,
.nh-dash .hero-media-frame::after { display: none; }
.nh-dash .hero-media-frame .dpdp-dash {
	transform: none;
	box-shadow: 0 1px 3px rgba(15,23,42,.08);
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT DASHBOARDS — "The Platform" bento cards
   Four soft-tinted feature cards (2 × 2): title + summary on top,
   the interactive code-driven dashboard mockup underneath.
═══════════════════════════════════════════════════════════════ */
.nh-products { padding: 96px 24px; background: var(--white); }
.nh-products-inner { max-width: 1200px; margin: 0 auto; }
.nh-products-header { text-align: center; margin-bottom: 56px; }
.nh-products-header .section-sub { margin: 0 auto; max-width: 620px; }
.nh-products-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
}
.nh-product {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 40px 40px 40px;
	border-radius: 28px;
	background: linear-gradient(180deg, #f9f9fe 0%, #f3f4fd 100%);
	border: 1px solid #e4e6f4;
	box-shadow: 0 1px 2px rgba(15,23,42,.03);
	overflow: hidden;
	transition: transform .3s cubic-bezier(.2,.75,.25,1), box-shadow .3s ease, border-color .3s ease;
}
.nh-product::before {
	/* Soft brand glow behind the mockup. */
	content: '';
	position: absolute;
	right: -18%;
	bottom: -28%;
	width: 62%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(79,70,229,.12), rgba(37,99,235,.06) 45%, transparent 68%);
	pointer-events: none;
}
.nh-product:hover {
	transform: translateY(-4px);
	border-color: #cdd3f5;
	box-shadow: 0 32px 54px -30px rgba(37,99,235,.3), 0 1px 2px rgba(15,23,42,.03);
}
.nh-product-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 34px;
}
.nh-product-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.nh-product-head .op-card-icon { margin-bottom: 0; width: 40px; height: 40px; border-radius: 11px; }
.nh-product-head .op-card-icon svg { width: 20px; height: 20px; }
.nh-product-name {
	font-size: clamp(21px, 1.8vw, 25px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--slate-900);
}
.nh-product-summary {
	font-size: 16px;
	line-height: 1.7;
	color: var(--slate-600);
	margin: 0 0 18px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}
.nh-product-visual {
	position: relative;
	z-index: 1;
	margin-top: auto;
	perspective: none;
}
.nh-product-visual .op-visual-frame {
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: transparent;
	box-shadow: none;
	transform: none;
	transition: transform .35s cubic-bezier(.2,.75,.25,1);
}
.nh-product-visual .op-visual-frame::before,
.nh-product-visual .op-visual-frame::after { display: none; }
.nh-product-visual .op-visual-frame .dpdp-clog,
.nh-product-visual .op-visual-frame .dpdp-pdd,
.nh-product-visual .op-visual-frame .dpdp-cmd,
.nh-product-visual .op-visual-frame .dpdp-abm {
	border-radius: 14px;
	box-shadow: 0 26px 50px -24px rgba(15,23,42,.3), 0 0 0 1px rgba(15,23,42,.06);
	transform: none;
}
.nh-product:hover .nh-product-visual .op-visual-frame { transform: translateY(-6px); }

/* ═══════════════════════════════════════════════════════════════
   ALL-IN-ONE SOLUTION — 8 capability cards (2 rows × 4)
   Title + copy on top, a code-driven "bento" illustration anchored to
   the bottom (icon tiles + a dark panel) that bleeds off the card edge.
   One container-query font-size on `.nh-sol-art`; everything inside
   is sized in em so the art scales with the column.
═══════════════════════════════════════════════════════════════ */
.nh-solution { padding: 96px 24px; background: var(--white); }
.nh-solution-inner { max-width: 1200px; margin: 0 auto; }
.nh-solution-header { text-align: center; margin-bottom: 56px; }
.nh-solution-header .section-tag svg { width: 13px; height: 13px; stroke-width: 2.5; }
.nh-solution-sub { margin: 0 auto; max-width: 720px; }
.nh-sol-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}
.nh-sol-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 30px 26px 0;
	border-radius: 26px;
	background: linear-gradient(180deg, #f9f9fe 0%, #f3f4fd 100%);
	border: 1px solid #e4e6f4;
	overflow: hidden;
	container-type: inline-size;
	transition: transform .3s cubic-bezier(.2,.75,.25,1), box-shadow .3s ease, border-color .3s ease;
}
.nh-sol-card:hover {
	transform: translateY(-4px);
	border-color: #cdd3f5;
	box-shadow: 0 30px 50px -30px rgba(37,99,235,.32);
}
.nh-sol-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--slate-900);
	margin: 0 0 10px;
}
.nh-sol-desc { font-size: 15.5px; line-height: 1.65; color: var(--slate-600); margin: 0 0 26px; }

/* Bento art */
.nh-sol-art {
	position: relative;
	margin: auto -1.3em -1.5em 0;
	font-size: clamp(9.5px, 4cqw, 13px);
	line-height: 1.3;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 5.6em;
	gap: .6em;
}
.nh-sol-art.has-custom-image { display: block; margin-right: 0; min-height: 16.8em; }
.nh-sol-image { display: block; width: 100%; height: 16.8em; object-fit: cover; border-radius: 1em; }
.nh-tile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: .75em .7em;
	border-radius: .9em;
	background: #eaedf7;
	color: var(--slate-700);
	transition: transform .25s ease;
}
.nh-tile svg { width: 1.6em; height: 1.6em; color: var(--blue-600); }
.nh-tile span { font-size: .76em; font-weight: 600; line-height: 1.25; }
.nh-tile.is-blue { background: linear-gradient(135deg, var(--blue-600), var(--blue-500)); color: #fff; box-shadow: 0 10px 20px -12px rgba(37,99,235,.7); }
.nh-tile.is-blue svg { color: #fff; }
.nh-sol-card:hover .nh-tile.is-blue { transform: translateY(-2px); }
.nh-panel {
	display: flex;
	flex-direction: column;
	gap: .55em;
	min-width: 0;
	padding: .9em .95em;
	border-radius: 1em;
	background: linear-gradient(160deg, #10224f 0%, #1e3a8a 62%, #1d4ed8 135%);
	color: #fff;
	overflow: hidden;
	box-shadow: 0 18px 32px -18px rgba(30,58,138,.65);
}
.nh-sol-card-a .nh-panel { grid-column: 2 / 4; grid-row: 1 / 3; }
.nh-sol-card-b .nh-panel { grid-column: 1 / 3; grid-row: 2 / 4; }
.nh-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5em; }
.nh-panel-head > span { font-size: .85em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-panel-pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .3em;
	font-size: .66em;
	font-weight: 700;
	padding: .3em .65em;
	border-radius: 999px;
	background: rgba(255,255,255,.14);
	color: #fff;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.nh-panel-pill svg { width: 1.1em; height: 1.1em; stroke-width: 2.5; }
.nh-panel-pill.is-green { background: rgba(34,197,94,.22); color: #86efac; }
.nh-panel-pill.is-red { background: rgba(239,68,68,.26); color: #fca5a5; }
.nh-panel-kv { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; font-size: .74em; }
.nh-panel-kv span { color: rgba(255,255,255,.62); flex: 0 0 auto; }
.nh-panel-kv strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-panel-seal {
	display: flex;
	align-items: center;
	gap: .45em;
	margin-top: auto;
	padding: .5em .6em;
	border-radius: .6em;
	background: rgba(255,255,255,.1);
	font-size: .68em;
}
.nh-panel-seal svg { width: 1.25em; height: 1.25em; color: #93c5fd; flex: 0 0 auto; }
.nh-panel-seal code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-panel-chips { display: flex; flex-wrap: wrap; gap: .3em; }
.nh-panel-chips span { font-size: .66em; font-weight: 600; padding: .3em .6em; border-radius: 999px; background: rgba(255,255,255,.13); white-space: nowrap; }
.nh-panel-track { display: flex; align-items: center; gap: .35em; margin-top: auto; font-size: .7em; }
.nh-panel-track i { width: .75em; height: .75em; border-radius: 50%; background: rgba(255,255,255,.3); }
.nh-panel-track i.is-done { background: #60a5fa; }
.nh-panel-track i.is-now { background: #4ade80; box-shadow: 0 0 0 .25em rgba(74,222,128,.25); }
.nh-panel-track em { font-style: normal; margin-left: .3em; color: rgba(255,255,255,.72); white-space: nowrap; }
.nh-panel-lines { display: flex; flex-direction: column; gap: .4em; }
.nh-panel-lines i { display: block; height: .45em; border-radius: 999px; background: rgba(255,255,255,.18); }
.nh-panel-lines i:last-child { width: 68%; }
.nh-panel-btns { display: flex; gap: .4em; margin-top: auto; }
.nh-panel-btns span {
	flex: 1;
	text-align: center;
	font-size: .68em;
	font-weight: 700;
	padding: .55em .4em;
	border-radius: .55em;
	border: 1px solid rgba(255,255,255,.4);
	white-space: nowrap;
}
.nh-panel-btns .is-primary { background: #fff; color: #1e3a8a; border-color: #fff; }
.nh-panel-foot { font-size: .64em; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-panel-otp { display: flex; gap: .3em; }
.nh-panel-otp i {
	flex: 1;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: .45em;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.25);
	font-style: normal;
	font-weight: 700;
	font-size: .85em;
}
.nh-panel-otp i:empty { border-style: dashed; background: transparent; }
.nh-panel-sla { display: flex; flex-direction: column; gap: .4em; margin-top: auto; font-size: .7em; }
.nh-panel-sla > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.8); }
.nh-panel-sla i { display: block; height: .55em; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.nh-panel-sla b { display: block; height: 100%; width: var(--w, 10%); border-radius: inherit; background: linear-gradient(90deg, #60a5fa, #4ade80); }
.nh-panel-steps { display: flex; gap: .3em; margin-top: auto; }
.nh-panel-steps span {
	flex: 1;
	text-align: center;
	font-size: .62em;
	font-weight: 700;
	padding: .5em .2em;
	border-radius: .5em;
	background: rgba(255,255,255,.1);
	color: rgba(255,255,255,.65);
	white-space: nowrap;
}
.nh-panel-steps .is-done { background: rgba(96,165,250,.3); color: #fff; }
.nh-panel-steps .is-now { background: #4ade80; color: #052e16; }
.nh-panel-table { display: flex; flex-direction: column; gap: .25em; font-size: .64em; }
.nh-panel-table > div {
	display: grid;
	grid-template-columns: 1.25fr 1fr .95fr;
	gap: .4em;
	padding: .32em .45em;
	border-radius: .45em;
	background: rgba(255,255,255,.09);
}
.nh-panel-table > div:first-child {
	background: transparent;
	padding-top: 0;
	padding-bottom: .1em;
	color: rgba(255,255,255,.55);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .9em;
}
.nh-panel-table span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-panel-live { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: #4ade80; }
.nh-panel-bars { display: flex; flex-direction: column; gap: .45em; font-size: .68em; }
.nh-panel-bars > div { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); align-items: center; gap: .5em; }
.nh-panel-bars i { position: relative; display: block; height: .65em; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.nh-panel-bars i::after { content: ''; position: absolute; inset: 0; width: var(--w, 50%); border-radius: inherit; background: #4ade80; }
.nh-panel-bars i.is-red::after { background: #f87171; }
.nh-panel-bars i.is-amber::after { background: #fbbf24; }
.nh-panel-vendors { display: flex; flex-direction: column; gap: .3em; margin-top: auto; font-size: .66em; }
.nh-panel-vendors > div { display: flex; align-items: center; gap: .45em; padding: .32em .5em; border-radius: .45em; background: rgba(255,255,255,.09); }
.nh-panel-vendors i { flex: 0 0 auto; width: .65em; height: .65em; border-radius: 50%; }
.nh-panel-vendors i.is-green { background: #4ade80; }
.nh-panel-vendors i.is-amber { background: #fbbf24; }
.nh-panel-vendors i.is-red { background: #f87171; }
.nh-panel-vendors span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-panel-vendors b { font-weight: 700; color: rgba(255,255,255,.85); }

@media (max-width: 1100px) {
	.nh-sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 768px) {
	.nh-solution { padding: 72px 20px; }
	.nh-solution-header { margin-bottom: 42px; }
	.nh-sol-card { padding: 26px 22px 0; border-radius: 22px; }
}
@media (max-width: 600px) {
	.nh-sol-grid { grid-template-columns: 1fr; gap: 18px; }
	.nh-sol-art { max-width: 420px; }
}
@media (max-width: 480px) {
	.nh-solution { padding: 56px 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   HOW IT WORKS — alternating timeline
   Copy on one side of a central rail, a code-driven product scene on
   the other; sides swap per step. The rail fills as you scroll and each
   node lights up once it passes the middle of the viewport
   (assets/js/new-home.js sets --nh-rail-progress and `.is-active`).
   Scenes scale with their column: one container-query font-size on
   `.nh-scene`, everything inside sized in em.
═══════════════════════════════════════════════════════════════ */
.nh-steps {
	position: relative;
	padding: 104px 24px 112px;
	background: linear-gradient(180deg, #f6f8ff 0%, #ffffff 42%, #f3f6ff 100%);
	overflow: hidden;
	isolation: isolate;
}
.nh-steps-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse at 12% 18%, rgba(37,99,235,.12), transparent 46%),
		radial-gradient(ellipse at 88% 78%, rgba(99,102,241,.12), transparent 46%),
		linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px);
	background-size: auto, auto, 56px 56px, 56px 56px;
	mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 82%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 25%, transparent 82%);
}
.nh-steps-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.nh-steps-header { text-align: center; margin-bottom: 72px; }
.nh-steps-header .section-tag svg { width: 13px; height: 13px; }
.nh-steps-sub { margin: 0 auto; max-width: 640px; }

/* Rail + nodes */
.nh-steps-timeline { position: relative; }
.nh-steps-rail {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: var(--slate-200);
	overflow: hidden;
}
.nh-steps-rail-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--blue-500), var(--indigo-600));
	transform-origin: top;
	transform: scaleY(var(--nh-rail-progress, 0));
	transition: transform .2s linear;
}
.nh-step {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
	align-items: center;
	gap: 0 24px;
	padding: 24px 0;
}
.nh-step-copy { grid-column: 1; grid-row: 1; padding-right: 32px; }
.nh-step-node { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 2; }
.nh-step-visual { grid-column: 3; grid-row: 1; padding-left: 8px; container-type: inline-size; }
.nh-step-flip .nh-step-copy { grid-column: 3; padding-right: 0; padding-left: 32px; }
.nh-step-flip .nh-step-visual { grid-column: 1; padding-left: 0; padding-right: 8px; }
.nh-step-node-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--slate-200);
	color: var(--slate-500);
	font-size: 15px;
	font-weight: 800;
	box-shadow: 0 0 0 8px #f9faff, 0 8px 20px rgba(15,23,42,.08);
	transition: border-color .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.nh-step.is-active .nh-step-node-dot {
	border-color: var(--blue-600);
	background: linear-gradient(135deg, var(--blue-600), var(--indigo-600));
	color: #fff;
	box-shadow: 0 0 0 8px #f9faff, 0 0 0 14px rgba(37,99,235,.14), 0 10px 26px rgba(37,99,235,.35);
	transform: scale(1.06);
}
.nh-steps-arrow { position: relative; z-index: 2; display: flex; justify-content: center; padding: 6px 0; }
.nh-steps-arrow span {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--blue-600), var(--indigo-600));
	color: #fff;
	box-shadow: 0 0 0 6px #f9faff, 0 8px 22px rgba(37,99,235,.35);
	animation: nh-arrow-bob 2.2s ease-in-out infinite;
}
.nh-steps-arrow svg { width: 18px; height: 18px; stroke-width: 2.5; }
@keyframes nh-arrow-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Copy column */
.nh-step-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.nh-step-index {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(79,70,229,.10));
	border: 1px solid rgba(37,99,235,.18);
	color: var(--blue-700);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.nh-step-kicker-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid var(--slate-200);
	color: var(--blue-600);
	box-shadow: var(--shadow-sm);
}
.nh-step-kicker-icon svg { width: 17px; height: 17px; }
.nh-step-title {
	font-size: clamp(26px, 2.8vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.025em;
	color: var(--slate-900);
	margin: 0 0 14px;
}
.nh-step-desc { font-size: 16.5px; line-height: 1.7; color: var(--slate-500); margin: 0 0 22px; max-width: 520px; }
.nh-step-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 26px; }
.nh-step-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--slate-700); }
.nh-step-bullet {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--blue-50);
	border: 1.5px solid var(--blue-200);
	color: var(--blue-600);
}
.nh-step-bullet svg { width: 12px; height: 12px; stroke-width: 3; }
.nh-step-callout {
	position: relative;
	margin: 0 0 28px;
	padding: 18px 20px 18px 24px;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,246,255,.92));
	border: 1px solid rgba(37,99,235,.16);
	box-shadow: 0 12px 30px -18px rgba(37,99,235,.4);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	overflow: hidden;
}
.nh-step-callout::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--blue-500), var(--indigo-600));
}
.nh-step-callout-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.nh-step-callout-head strong { font-size: 15px; font-weight: 700; color: var(--slate-900); }
.nh-step-callout-icon {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--blue-600), var(--indigo-600));
	color: #fff;
	box-shadow: 0 4px 12px rgba(37,99,235,.3);
}
.nh-step-callout-icon svg { width: 15px; height: 15px; }
.nh-step-callout p { font-size: 14.5px; line-height: 1.65; color: var(--slate-600); margin: 0; }
.nh-step-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 26px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--blue-600), var(--indigo-600));
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 10px 24px -8px rgba(37,99,235,.55);
	transition: transform .2s ease, box-shadow .2s ease;
}
.nh-step-cta svg { width: 16px; height: 16px; stroke-width: 2.5; transition: transform .2s ease; }
.nh-step-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(37,99,235,.6); }
.nh-step-cta:hover svg { transform: translateX(3px); }
.nh-step-cta:active { transform: translateY(0) scale(.98); }
.nh-step-cta:focus-visible { outline: 3px solid var(--blue-200); outline-offset: 3px; }

/* Scenes (code-driven illustrations) */
.nh-scene {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 460 / 400;
	margin: 0 auto;
	font-size: clamp(9px, 2.85cqw, 13.5px);
	line-height: 1.35;
	color: var(--slate-900);
}
.nh-scene-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nh-line {
	fill: none;
	stroke: var(--blue-400);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 5 6;
	animation: nh-dash 1.4s linear infinite;
}
.nh-line-dot { fill: #fff; stroke: var(--blue-500); stroke-width: 2.5; }
@keyframes nh-dash { to { stroke-dashoffset: -22; } }
.nh-mock {
	position: absolute;
	padding: 1.1em 1.2em;
	border-radius: 1.15em;
	background: rgba(255,255,255,.88);
	border: 1px solid rgba(255,255,255,.95);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.9),
		0 22px 48px -20px rgba(15,23,42,.3),
		0 0 0 1px rgba(15,23,42,.05);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.nh-mock ul { display: flex; flex-direction: column; }
.nh-mock-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .9em; }
.nh-mock-head > span { display: inline-flex; align-items: center; gap: .45em; font-size: 1em; font-weight: 700; color: var(--slate-900); white-space: nowrap; }
.nh-mock-head > span svg { width: 1.15em; height: 1.15em; color: var(--blue-600); }
.nh-mock-head em {
	font-style: normal;
	font-size: .78em;
	font-weight: 700;
	color: var(--green-600);
	background: var(--green-100);
	border-radius: 999px;
	padding: .3em .75em;
	white-space: nowrap;
}
.nh-mock-head em.is-blue { color: var(--blue-700); background: var(--blue-50); }
.nh-mock-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	border-radius: .6em;
	font-style: normal;
}
.nh-mock-ico svg { width: 1.15em; height: 1.15em; }
.nh-mock-ico.is-blue   { background: var(--blue-50);   color: var(--blue-600); }
.nh-mock-ico.is-indigo { background: var(--indigo-50); color: var(--indigo-600); }
.nh-mock-ico.is-violet { background: var(--violet-100); color: var(--violet-600); }
.nh-mock-ico.is-teal   { background: var(--teal-100);  color: var(--teal-600); }
.nh-mock-ico.is-orange { background: var(--orange-100); color: var(--orange-600); }
.nh-pill {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	font-size: .78em;
	font-weight: 700;
	border-radius: 999px;
	padding: .32em .75em;
	white-space: nowrap;
}
.nh-pill svg { width: 1em; height: 1em; stroke-width: 3; }
.nh-pill.is-ok { background: var(--green-100); color: var(--green-600); }
.nh-pill.is-sync { background: var(--orange-100); color: var(--orange-600); }
.nh-dots { display: inline-flex; gap: .22em; margin-left: .15em; }
.nh-dots i { width: .34em; height: .34em; border-radius: 50%; background: currentColor; animation: nh-blink 1.2s ease-in-out infinite; }
.nh-dots i:nth-child(2) { animation-delay: .2s; }
.nh-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes nh-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.nh-check {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--green-100);
	color: var(--green-600);
	font-style: normal;
}
.nh-check svg { width: .9em; height: .9em; stroke-width: 3; }

/* Small "row" cards: icon + label/value (+ status) */
.nh-mock-row { display: flex; align-items: center; gap: .8em; padding: .9em 1em; animation: nh-float 6s ease-in-out infinite; }
.nh-mock-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12em; }
.nh-mock-row span { font-size: .72em; font-weight: 700; color: var(--slate-400); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-mock-row strong { font-size: .88em; font-weight: 700; color: var(--slate-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-mock-row code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em;
	font-weight: 600;
	color: var(--slate-800);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@keyframes nh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Scene 1 — connect */
.nh-mock-sources { left: 0; top: 7.5%; width: 54.3%; }
.nh-mock-sources li {
	display: flex;
	align-items: center;
	gap: .7em;
	padding: .55em 0;
	border-top: 1px solid var(--slate-100);
	font-size: .95em;
	font-weight: 600;
	color: var(--slate-700);
}
.nh-mock-sources li:first-child { border-top: 0; }
.nh-mock-sources li > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-mock-hub {
	left: 65.2%;
	top: 5%;
	width: 32.6%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.4em 1em 1.3em;
}
.nh-mock-hub-logo {
	position: relative;
	z-index: 1;
	width: 3.4em;
	height: 3.4em;
	border-radius: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--blue-600), var(--indigo-600));
	color: #fff;
	box-shadow: 0 8px 20px rgba(37,99,235,.35);
	margin-bottom: .7em;
}
.nh-mock-hub-logo svg { width: 1.8em; height: 1.8em; }
.nh-mock-hub strong { position: relative; z-index: 1; font-size: 1.05em; font-weight: 800; }
.nh-mock-hub-sub { position: relative; z-index: 1; font-size: .8em; font-weight: 600; color: var(--slate-500); }
.nh-mock-hub-ring {
	position: absolute;
	left: 50%;
	top: 3.1em;
	width: 4.4em;
	height: 4.4em;
	margin: -2.2em 0 0 -2.2em;
	border-radius: 50%;
	border: 2px solid rgba(37,99,235,.4);
	animation: nh-pulse 2.6s ease-out infinite;
}
.nh-mock-hub-ring-2 { animation-delay: 1.3s; }
@keyframes nh-pulse { 0% { transform: scale(.72); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.nh-mock-key { left: 47.8%; top: 74%; width: 52.2%; animation-delay: -2s; }
.nh-mock-copy {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: .5em;
	border: 1px solid var(--slate-200);
	color: var(--slate-500);
	font-style: normal;
}
.nh-mock-copy svg { width: 1em; height: 1em; }

/* Scene 2 — configure */
.nh-mock-config { left: 0; top: 4%; width: 60%; }
.nh-scan-pct { font-variant-numeric: tabular-nums; }
.nh-progress { height: .55em; border-radius: 999px; background: var(--slate-100); overflow: hidden; margin: -.2em 0 .9em; }
.nh-progress span {
	display: block;
	height: 100%;
	width: 87%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--blue-500), var(--indigo-500));
	transform-origin: left;
	transform: scaleX(0);
	transition: transform 1.4s cubic-bezier(.2,.8,.2,1) .35s;
}
.nh-step.visible .nh-progress span { transform: scaleX(1); }
.nh-mock-config li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8em;
	padding: .7em 0;
	border-top: 1px solid var(--slate-100);
	font-size: .95em;
	font-weight: 600;
	color: var(--slate-700);
}
.nh-mock-config li:first-child { border-top: 0; }
.nh-toggle {
	position: relative;
	flex: 0 0 auto;
	width: 2.6em;
	height: 1.45em;
	border-radius: 999px;
	background: var(--slate-300);
	transition: background .3s ease;
}
.nh-toggle::after {
	content: '';
	position: absolute;
	top: .18em;
	left: .18em;
	width: 1.09em;
	height: 1.09em;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.nh-toggle.is-on { background: var(--blue-600); }
.nh-toggle.is-on::after { transform: translateX(1.15em); }
.nh-step.visible .nh-toggle.is-late { background: var(--blue-600); transition-delay: 1.6s; }
.nh-step.visible .nh-toggle.is-late::after { transform: translateX(1.15em); transition-delay: 1.6s; }
.nh-mock-draft { left: 63%; top: 9%; width: 37%; }
.nh-mock-pii { left: 44%; top: 61%; width: 56%; animation: nh-float 7s ease-in-out infinite; animation-delay: -3s; }
.nh-chips { display: flex; flex-wrap: wrap; gap: .45em; }
.nh-chips span {
	font-size: .8em;
	font-weight: 700;
	padding: .35em .8em;
	border-radius: 999px;
	background: var(--indigo-50);
	border: 1px solid var(--indigo-100);
	color: var(--indigo-700);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .4s ease, transform .4s ease;
}
.nh-step.visible .nh-chips span { opacity: 1; transform: none; }
.nh-step.visible .nh-chips span:nth-child(1) { transition-delay: .5s; }
.nh-step.visible .nh-chips span:nth-child(2) { transition-delay: .62s; }
.nh-step.visible .nh-chips span:nth-child(3) { transition-delay: .74s; }
.nh-step.visible .nh-chips span:nth-child(4) { transition-delay: .86s; }
.nh-step.visible .nh-chips span:nth-child(5) { transition-delay: .98s; }
.nh-step.visible .nh-chips span:nth-child(6) { transition-delay: 1.1s; }

/* Scene 3 — live */
.nh-mock-health { left: 0; top: 16%; width: 66%; }
.nh-mock-health-body { display: flex; align-items: center; gap: 1.1em; }
.nh-ring { position: relative; flex: 0 0 auto; width: 7.4em; height: 7.4em; }
.nh-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nh-ring-bg { fill: none; stroke: var(--slate-100); stroke-width: 10; }
.nh-ring-fg {
	fill: none;
	stroke: url(#nh-ring-grad);
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 326.7;
	stroke-dashoffset: 326.7;
	transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) .3s;
}
.nh-step.visible .nh-ring-fg { stroke-dashoffset: 6.5; }
.nh-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nh-ring-label strong { font-size: 1.75em; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--slate-900); }
.nh-ring-label sup { font-size: .5em; font-weight: 700; color: var(--blue-600); vertical-align: top; }
.nh-ring-label span { font-size: .68em; font-weight: 700; color: var(--green-600); text-transform: uppercase; letter-spacing: .06em; margin-top: .35em; }
.nh-mock-health ul { flex: 1; min-width: 0; gap: .6em; }
.nh-mock-health li { display: flex; align-items: center; gap: .6em; }
.nh-mock-health li .nh-step-bullet { width: 1.6em; height: 1.6em; margin-top: 0; border-width: 1px; }
.nh-mock-health li .nh-step-bullet svg { width: .85em; height: .85em; }
.nh-mock-health li > div { display: flex; flex-direction: column; min-width: 0; }
.nh-mock-health li span { font-size: .74em; font-weight: 600; color: var(--slate-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-mock-health li strong { font-size: .9em; font-weight: 700; color: var(--slate-900); }
.nh-live { display: inline-flex; align-items: center; gap: .45em; }
.nh-live i { width: .55em; height: .55em; border-radius: 50%; background: var(--green-500); animation: nh-live-pulse 1.8s ease-out infinite; }
@keyframes nh-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 100% { box-shadow: 0 0 0 .7em rgba(34,197,94,0); } }
.nh-mock-notice { left: 56%; top: 0; width: 44%; }
.nh-mock-export { left: 34%; top: 70%; width: 66%; animation-delay: -2.5s; }

/* Timeline responsive */
@media (max-width: 1024px) {
	.nh-step { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }
	.nh-step-copy { padding-right: 12px; }
	.nh-step-flip .nh-step-copy { padding-left: 12px; }
}
@media (max-width: 900px) {
	.nh-steps { padding: 72px 20px 80px; }
	.nh-steps-header { margin-bottom: 44px; }
	.nh-steps-rail { left: 22px; transform: none; }
	.nh-step,
	.nh-step-flip {
		grid-template-columns: 44px minmax(0, 1fr);
		grid-template-rows: auto auto;
		gap: 28px 20px;
		padding: 12px 0 36px;
		align-items: start;
	}
	.nh-step-node,
	.nh-step-flip .nh-step-node { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; margin-top: 2px; }
	.nh-step-copy,
	.nh-step-flip .nh-step-copy { grid-column: 2; grid-row: 1; padding: 0; }
	.nh-step-visual,
	.nh-step-flip .nh-step-visual { grid-column: 2; grid-row: 2; padding: 0; }
	.nh-step-desc { max-width: none; }
	.nh-steps-arrow { justify-content: flex-start; padding-left: 2px; }
	.nh-scene { margin: 0; }
}
@media (max-width: 480px) {
	.nh-steps { padding: 56px 16px 64px; }
	.nh-steps-rail { left: 18px; }
	.nh-step,
	.nh-step-flip { grid-template-columns: 36px minmax(0, 1fr); gap: 22px 14px; }
	.nh-step-node-dot { width: 36px; height: 36px; font-size: 13px; box-shadow: 0 0 0 6px #f9faff, 0 6px 16px rgba(15,23,42,.08); }
	.nh-step.is-active .nh-step-node-dot { box-shadow: 0 0 0 6px #f9faff, 0 0 0 10px rgba(37,99,235,.14), 0 8px 20px rgba(37,99,235,.35); }
	.nh-steps-arrow { padding-left: 0; }
	.nh-steps-arrow span { width: 36px; height: 36px; box-shadow: 0 0 0 5px #f9faff, 0 6px 18px rgba(37,99,235,.35); }
	.nh-step-title { font-size: 25px; }
	.nh-step-desc { font-size: 15.5px; }
	.nh-step-list li { font-size: 15px; }
	.nh-step-callout { padding: 16px 16px 16px 20px; }
	.nh-step-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.nh-steps-arrow span,
	.nh-line,
	.nh-dots i,
	.nh-mock-hub-ring,
	.nh-mock-row,
	.nh-mock-pii,
	.nh-live i { animation: none; }
	.nh-steps-rail-fill,
	.nh-step-node-dot,
	.nh-progress span,
	.nh-toggle,
	.nh-toggle::after,
	.nh-chips span,
	.nh-ring-fg { transition: none; }
	.nh-progress span { transform: scaleX(1); }
	.nh-toggle.is-late { background: var(--blue-600); }
	.nh-toggle.is-late::after { transform: translateX(1.15em); }
	.nh-chips span { opacity: 1; transform: none; }
	.nh-ring-fg { stroke-dashoffset: 6.5; }
}

/* ═══════════════════════════════════════════════════════════════
   INDUSTRIES WE WORK WITH — dark panel, 3-column grid with the
   illustration in the centre of the first row (replaces the tabbed
   "Solutions by Industry" section on this template)
═══════════════════════════════════════════════════════════════ */
.nh-industries {
	position: relative;
	padding: 96px 24px;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(37,99,235,.35) 0%, rgba(37,99,235,0) 55%),
		linear-gradient(180deg, #060a1c 0%, #0a1130 60%, #060a1c 100%);
	color: #fff;
	overflow: hidden;
}
.nh-industries-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.nh-industries-header { text-align: center; margin-bottom: 56px; }
.nh-industries-tag {
	color: #bfdbfe;
	border-color: rgba(147,197,253,.3);
	background: rgba(59,130,246,.14);
}
.nh-industries-title {
	font-size: clamp(32px, 4vw, 54px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.025em;
	color: #fff;
	margin-bottom: 18px;
}
.nh-industries-sub {
	font-size: clamp(15px, 1.4vw, 19px);
	line-height: 1.6;
	color: rgba(255,255,255,.72);
	max-width: 760px;
	margin: 0 auto;
}
.nh-industries-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
}
.nh-industry {
	padding: 30px 30px 32px;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	transition: border-color .2s, transform .2s, background .2s;
}
.nh-industry:hover {
	border-color: rgba(96,165,250,.45);
	background: linear-gradient(180deg, rgba(59,130,246,.14), rgba(255,255,255,.03));
	transform: translateY(-3px);
}
.nh-industry-name {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	margin-bottom: 14px;
}
.nh-industry-desc {
	font-size: 15.5px;
	line-height: 1.75;
	color: rgba(255,255,255,.72);
}
.nh-industry-media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	padding: 12px;
}
.nh-industry-media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 380px;
	object-fit: contain;
	filter: drop-shadow(0 24px 40px rgba(0,0,0,.45));
}
.nh-industry-media-placeholder {
	width: 100%;
	height: 100%;
	min-height: 260px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 40%, rgba(59,130,246,.35), rgba(59,130,246,0) 65%);
	color: rgba(147,197,253,.9);
}
.nh-industry-media-placeholder svg { width: 96px; height: 96px; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.nh-products-grid { gap: 22px; }
	.nh-product { padding: 32px 30px; border-radius: 24px; }
	.nh-clients-label { flex-basis: 220px; }
}
@media (max-width: 900px) {
	.nh-industries { padding: 72px 20px; }
	.nh-industries-inner { padding: 0; border-radius: 0; }
	.nh-industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	/* Illustration spans the full width on top; the five cards follow. */
	.nh-industry-media { grid-column: 1 / -1; order: -1; min-height: 0; }
	.nh-industry-media img { max-height: 300px; }
	.nh-products-grid { grid-template-columns: 1fr; gap: 24px; }
	.nh-clients-inner { flex-direction: column; align-items: stretch; gap: 26px; }
	.nh-clients-label { flex-basis: auto; text-align: center; }
	.nh-clients-marquee { width: 100%; }
}
@media (max-width: 768px) {
	.nh-hero { padding: calc(68px + 72px) 20px 64px; }
	.nh-hero-title { font-size: clamp(32px, 8.5vw, 44px); }
	.nh-hero-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
	.nh-btn-light, .nh-btn-ghost { justify-content: center; }
	.nh-certs { margin-top: 64px; }
	.nh-certs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.nh-cert { height: 96px; padding: 12px 14px; }
	.nh-cert img { max-height: 70px; max-width: 140px; }
	.nh-clients { padding: 40px 20px; }
	.nh-client { width: 220px; height: 84px; padding: 6px 16px; }
	.nh-client img { max-height: 60px; }
	.nh-dash { padding: 72px 20px 56px; }
	.nh-dash .hero-media { margin-top: 32px; }
	.nh-products { padding: 72px 20px; }
	.nh-products-header { margin-bottom: 42px; }
	.nh-product { padding: 28px 24px; }
	.nh-product-body { margin-bottom: 26px; }
}
@media (max-width: 600px) {
	.nh-industries-grid { grid-template-columns: 1fr; }
	.nh-industries-inner { padding: 0; }
	.nh-industry { padding: 24px 22px 26px; }
}
@media (max-width: 480px) {
	.nh-hero { padding-left: 16px; padding-right: 16px; }
	.nh-hero-sub { font-size: 15.5px; }
	.nh-certs-title { margin-bottom: 28px; }
	.nh-certs-row { gap: 12px; }
	.nh-cert { height: 82px; padding: 10px; border-radius: 12px; }
	.nh-cert img { max-height: 60px; }
	.nh-clients { padding: 32px 16px; }
	.nh-clients-track { gap: 14px; }
	.nh-client { width: 180px; height: 72px; }
	.nh-dash { padding: 56px 16px 44px; }
	.nh-products { padding: 56px 16px; }
	.nh-products-grid { gap: 18px; }
	.nh-product { padding: 24px 20px; border-radius: 20px; }
	.nh-product-name { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
	.nh-hero-bg,
	.nh-hero-blob,
	.nh-hero-arc,
	.nh-hero-ribbon,
	.nh-hero-particles,
	.nh-clients-track { animation: none; }
	.nh-sol-card,
	.nh-tile { transition: none; }
	.nh-sol-card:hover { transform: none; }
}