/* ==========================================================================
   ENHANCE — depth, motion and detail on top of the base layer.
   Loaded last so it wins without !important.
   ========================================================================== */

/* ---- Hero: layered background ------------------------------------------- */

.nx-hero {
	background:
		radial-gradient(90% 70% at 85% 0%, rgba(0, 163, 224, 0.13) 0%, transparent 60%),
		radial-gradient(70% 60% at 8% 15%, rgba(27, 79, 156, 0.10) 0%, transparent 55%),
		linear-gradient(175deg, #F2F6FB 0%, var(--nx-white) 62%);
}

/* Faint technical grid — reads as "engineered" without shouting */
.nx-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(11, 42, 91, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(11, 42, 91, 0.045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(80% 65% at 50% 30%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(80% 65% at 50% 30%, #000 0%, transparent 78%);
	pointer-events: none;
}

.nx-hero > * { position: relative; z-index: 1; }

/* Headline: last two words pick up the accent gradient */
.nx-hero__title {
	background: linear-gradient(135deg, var(--nx-navy-900) 0%, var(--nx-blue-600) 58%, var(--nx-accent) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Eyebrow gets a leading rule */
.nx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--nx-space-3);
}

.nx-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	flex-shrink: 0;
}

.nx-section-head--center .nx-eyebrow::after {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	flex-shrink: 0;
}

/* ---- Hero media: product stage ------------------------------------------ */

/* The hero product is rendered by template-parts/product-stage.php, which
   brings its own contact shadow, glow and drop-shadow. The wrapper only
   needs to get out of the way. */
.nx-hero__media::before,
.nx-hero__media::after { content: none; }

@keyframes nx-spin {
	to { transform: rotate(360deg); }
}

/* ---- Trust strip: lift it onto the fold --------------------------------- */

.nx-trust {
	border-radius: var(--nx-radius-lg);
	box-shadow: var(--nx-shadow);
	backdrop-filter: blur(6px);
	background: rgba(255, 255, 255, 0.86);
	transition: box-shadow var(--nx-dur) var(--nx-ease);
}

.nx-trust:hover { box-shadow: var(--nx-shadow-lg); }

.nx-trust__value {
	background: linear-gradient(135deg, var(--nx-navy-800), var(--nx-blue-500));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* ---- Buttons: sheen on hover -------------------------------------------- */

.nx-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.nx-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform var(--nx-dur-slow) var(--nx-ease);
}

.nx-btn:hover::after { transform: translateX(120%); }

.nx-btn--outline::after { display: none; }

/* Primary button gets a gradient */
.nx-btn:not(.nx-btn--outline):not(.nx-btn--ghost) {
	background: linear-gradient(135deg, var(--nx-navy-800) 0%, var(--nx-blue-600) 100%);
	box-shadow: 0 4px 14px rgba(11, 42, 91, 0.22);
}

.nx-btn:not(.nx-btn--outline):not(.nx-btn--ghost):hover {
	background: linear-gradient(135deg, var(--nx-navy-700) 0%, var(--nx-blue-500) 100%);
	box-shadow: 0 10px 26px rgba(11, 42, 91, 0.3);
}

.nx-btn--accent {
	background: linear-gradient(135deg, var(--nx-blue-500) 0%, var(--nx-accent) 100%) !important;
}

/* ---- Cards: depth and a hover glow -------------------------------------- */

.nx-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--nx-white) 0%, #FCFDFF 100%);
	box-shadow: var(--nx-shadow-xs);
}

.nx-card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--nx-blue-600), var(--nx-accent));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nx-dur) var(--nx-ease);
}

.nx-card:hover::after { transform: scaleX(1); }

.nx-card:hover { box-shadow: var(--nx-shadow-lg); }

/* Icon: gradient tile that tilts on hover */
.nx-card__icon {
	background: linear-gradient(135deg, var(--nx-navy-800) 0%, var(--nx-blue-600) 100%);
	box-shadow: 0 6px 16px rgba(11, 42, 91, 0.2);
	transition: transform var(--nx-dur) var(--nx-ease-out);
}

.nx-card:hover .nx-card__icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); }

/* Dark-section cards */
.nx-section--invert .nx-card {
	background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
	box-shadow: none;
}

.nx-section--invert .nx-card__icon {
	background: linear-gradient(135deg, var(--nx-blue-500) 0%, var(--nx-accent) 100%);
}

/* ---- Invert section: texture -------------------------------------------- */

.nx-section--invert {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(70% 90% at 12% 0%, rgba(46, 109, 196, 0.35) 0%, transparent 55%),
		radial-gradient(60% 80% at 90% 100%, rgba(0, 163, 224, 0.22) 0%, transparent 55%),
		var(--nx-navy-900);
}

.nx-section--invert::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

.nx-section--invert > * { position: relative; z-index: 1; }

/* ---- Pillars: bigger, more technical ------------------------------------ */

.nx-pillar {
	padding: var(--nx-space-8) var(--nx-space-6);
	background: linear-gradient(180deg, var(--nx-white) 0%, #FAFCFF 100%);
	text-align: center;
	box-shadow: var(--nx-shadow-xs);
}

.nx-pillar__label {
	font-size: var(--nx-text-2xl);
	background: linear-gradient(135deg, var(--nx-navy-800), var(--nx-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Connecting line between pillars on wide screens */
@media (min-width: 900px) {
	.nx-pillars { position: relative; }

	.nx-pillars::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 8%;
		right: 8%;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--nx-border-strong) 20%, var(--nx-border-strong) 80%, transparent);
		z-index: 0;
	}

	.nx-pillar { position: relative; z-index: 1; }
}

/* ---- Steps: connector rail ---------------------------------------------- */

.nx-step { border-top-width: 2px; }

.nx-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--nx-space-4);
	border-radius: var(--nx-radius);
	background: linear-gradient(135deg, var(--nx-navy-800), var(--nx-blue-600));
	color: var(--nx-white);
	font-size: var(--nx-text-sm);
	box-shadow: 0 6px 16px rgba(11, 42, 91, 0.2);
	transition: transform var(--nx-dur) var(--nx-ease-out);
}

.nx-step:hover .nx-step__num { transform: translateY(-3px) scale(1.05); }

/* ---- Spec table: cleaner rows ------------------------------------------- */

.nx-table-wrap {
	box-shadow: var(--nx-shadow-sm);
	background: var(--nx-white);
}

.nx-table tbody tr { transition: background-color var(--nx-dur-fast) var(--nx-ease); }

.nx-table tbody th {
	font-weight: var(--nx-weight-semibold);
	color: var(--nx-text-muted);
}

/* Flag unconfirmed values so they're obvious */
.nx-table td:has(> .nx-ph),
.nx-table td:first-letter { }

/* ---- Accordion: card-style items ---------------------------------------- */

.nx-accordion {
	border-top: 0;
	max-width: 940px;
	margin-inline: auto;
}

.nx-accordion__item {
	margin-bottom: var(--nx-space-3);
	padding-inline: var(--nx-space-5);
	background: var(--nx-white);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-md);
	transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease);
}

.nx-accordion__item:hover { border-color: var(--nx-border-strong); }

.nx-accordion__item[open] {
	border-color: var(--nx-action);
	box-shadow: var(--nx-shadow-sm);
}

.nx-accordion__trigger { font-size: var(--nx-text-base); }

/* ---- Docs: arrow affordance --------------------------------------------- */

.nx-doc {
	position: relative;
	background: linear-gradient(180deg, var(--nx-white) 0%, #FBFDFF 100%);
	box-shadow: var(--nx-shadow-xs);
}

.nx-doc::after {
	content: "→";
	position: absolute;
	right: var(--nx-space-5);
	top: 50%;
	transform: translateY(-50%) translateX(-6px);
	color: var(--nx-action);
	font-size: var(--nx-text-lg);
	opacity: 0;
	transition: opacity var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease);
}

a.nx-doc:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
a.nx-doc:hover { transform: translateY(-2px); }

.nx-doc__icon {
	background: linear-gradient(135deg, rgba(27,79,156,0.10), rgba(0,163,224,0.14));
}

/* ---- CTA band: richer ---------------------------------------------------- */

/* Both of these belong to the inset panel, not the section — the section is
   page-background now so the panel can float on white. */
.nx-cta__panel {
	background:
		radial-gradient(60% 100% at 15% 0%, rgba(46, 109, 196, 0.5) 0%, transparent 60%),
		radial-gradient(50% 90% at 88% 100%, rgba(0, 163, 224, 0.35) 0%, transparent 60%),
		linear-gradient(135deg, var(--nx-navy-900) 0%, var(--nx-navy-800) 100%);
	box-shadow: 0 24px 60px rgba(6, 24, 47, 0.18);
}

.nx-cta__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

.nx-cta h2 { font-size: var(--nx-text-3xl); }

.nx-cta .nx-btn:not(.nx-btn--outline) {
	background: var(--nx-white) !important;
	color: var(--nx-navy-800) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.nx-cta .nx-btn:not(.nx-btn--outline):hover {
	background: var(--nx-cyan) !important;
	color: var(--nx-navy-900) !important;
}

/* ---- Contact panel ------------------------------------------------------- */

.nx-contact__panel {
	background: linear-gradient(180deg, var(--nx-white) 0%, #FBFDFF 100%);
	box-shadow: var(--nx-shadow);
}

/* ---- Header: sharpen when stuck ------------------------------------------ */

.nx-header.is-stuck {
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 2px 20px rgba(6, 24, 47, 0.09);
}

.nx-header__inner { min-height: 76px; transition: min-height var(--nx-dur) var(--nx-ease); }
.nx-header.is-stuck .nx-header__inner { min-height: 64px; }

/* Scroll-progress rail under the header */
.nx-progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	background: linear-gradient(90deg, var(--nx-blue-600), var(--nx-accent));
	pointer-events: none;
}

/* ---- Footer -------------------------------------------------------------- */

.nx-footer {
	background:
		radial-gradient(70% 100% at 10% 0%, rgba(27, 79, 156, 0.28) 0%, transparent 55%),
		var(--nx-navy-900);
}

.nx-footer__col-title { color: var(--nx-cyan); }

.nx-footer a { position: relative; }

.nx-footer a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nx-dur) var(--nx-ease);
}

.nx-footer a:hover::after { transform: scaleX(1); }

/* ---- Section divider ----------------------------------------------------- */

.nx-section--alt {
	background: linear-gradient(180deg, #F4F7FB 0%, var(--nx-grey-50) 100%);
	border-block: 1px solid var(--nx-border);
}

/* ---- Reveal: slightly richer entrance ------------------------------------ */

.nx-reveal {
	transform: translateY(26px) scale(0.995);
}

.nx-reveal.is-visible { transform: none; }

/* ---- Counter animation --------------------------------------------------- */

.nx-count { font-variant-numeric: tabular-nums; }

/* ---- Mobile polish -------------------------------------------------------- */

@media (max-width: 767px) {
	.nx-hero__inner { text-align: center; }
	.nx-hero__sub, .nx-hero__support { margin-inline: auto; }
	.nx-btn-row { justify-content: center; }
	.nx-eyebrow { justify-content: center; }
	.nx-section-head { text-align: center; margin-inline: auto; }
	.nx-hero__media { order: -1; max-width: 340px; margin-inline: auto; }
	.nx-trust { padding: var(--nx-space-4); }
	.nx-trust__item + .nx-trust__item { border-left: 0; }
}

@media (max-width: 479px) {
	.nx-btn { width: 100%; }
	.nx-btn-row { flex-direction: column; }
	.nx-trust { grid-template-columns: repeat(2, 1fr); gap: var(--nx-space-4); }
}