@charset "UTF-8";
/* ==========================================================================
   Home page 2026 — the whole design system for the new front page.
   Spec: G:\01-Projects\Project Nxbazar\DESIGN-HOME-2026.md

   Scope. Everything is a child of .nxb2, or is a page-level rule on
   body.nxb2-page. Two page-level rules exist and nothing else outside .nxb2
   is touched, so no other screen can be affected by this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts, tokens and the footer moved out.

   The @font-face declarations and the token block that used to be here now live
   in inc/nxb-site.css and inc/storefront.css, because the whole site renders in
   this face and this palette, not just this page. The footer's rules moved to
   inc/nxb-site.css section 7, so that a page which never loads this file still
   gets the footer. Keeping a second copy here is how the two drift apart.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Page-level rules. These two are the only selectors that reach outside
      the .nxb2 wrapper.
   -------------------------------------------------------------------------- */
body.nxb2-page {
	background-color: var(--nxb2-bg);
}

/* the theme's Elementor footer is replaced by the footer inside this design */
body.nxb2-page #page-footer-wrapper {
	display: none !important;
}

/* the theme paints #page-content; keep it out of the way so the section
   backgrounds run edge to edge */
body.nxb2-page #page-content,
body.nxb2-page .content-wrapper {
	background-color: transparent !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* --------------------------------------------------------------------------
   3. Shell
   -------------------------------------------------------------------------- */
.nxb2 {
	--nxb2-wrap-pad: 24px;
	position: relative;
	overflow-x: clip;
	background-color: var(--nxb2-bg);
	font-family: var(--nxb2-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--nxb2-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.nxb2 *,
.nxb2 *::before,
.nxb2 *::after {
	box-sizing: border-box;
}

.nxb2-wrap {
	width: 100%;
	max-width: var(--nxb2-wrap);
	margin-inline: auto;
	padding-inline: var(--nxb2-wrap-pad);
}

.nxb2-sec {
	padding-block: 88px;
}

.nxb2-sec--top-tight {
	padding-top: 0;
}

/* Headings and copy reset.
   Wrapped in :where() on purpose. A plain `.nxb2 p` is 0,1,1, which would beat
   every component rule below it (0,1,0) and quietly strip the badge's padding and
   the sub-headings' margins. :where() contributes no specificity, so this rule is
   0,1,0 and the component rules win on source order. */
.nxb2 :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) {
	margin: 0;
	padding: 0;
	font-family: var(--nxb2-font);
}

/* The heading face, restated at page level.

   Elementor puts its global element styles on the body as
   `.elementor-kit-16698 h1 { font-family: ... }` — that is 0,1,1, one class plus
   one element. The reset above is 0,1,0, so it never reached a single h1, h2 or h3
   on this page and the browser fell back to the theme's Nunito for every heading,
   while the paragraphs beside them were already in Plus Jakarta Sans. It was not
   visible in the measurements that fixed the size and the colour, because those
   live on the four body.nxb2-page rules below; the family was never one of them.

   `body.nxb2-page h1` is 0,1,2 and wins outright. Found and fixed 2026-10-12.
   See DESIGN-HOME-2026.md §8.1. */
body.nxb2-page h1,
body.nxb2-page h2,
body.nxb2-page h3,
body.nxb2-page h4,
body.nxb2-page h5,
body.nxb2-page h6 {
	font-family: var(--nxb2-font);
}

.nxb2 :where(ul, ol) {
	list-style: none;
}

.nxb2 :where(img) {
	max-width: 100%;
	height: auto;
	display: block;
}

/* An inline SVG with no width or height falls back to 300x150, which is how the
   outline button's arrow ended up 127px square. Every glyph that needs another
   size has its own rule, and those are all 0,1,1 or later, so they still win.
   flex: 0 0 auto because a glyph inside one of the flex rows below would
   otherwise be squeezed the same way the circles were. */
.nxb2 :where(svg) {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* Every one of these is a fixed-size box sitting inside a flex row, so every one
   of them will be squashed into an ellipse the moment the text beside it needs the
   room. Two did it in the first live render: the step disc (66.8 x 92) and the
   value-card icon (42.5 x 52). The text blocks are the parts that take up the
   flexibility instead, which is what min-width: 0 lets them do. */
.nxb2-val__tile,
.nxb2-stats__tile,
.nxb2-micro__tile,
.nxb2-socials a,
.nxb2-pay,
.nxb2-btn__play,
.nxb2-card__tick,
.nxb2-plat__logo {
	flex: 0 0 auto;
}

.nxb2-val > span:last-child,
.nxb2-stats__cell > span:last-child,
.nxb2-micro__text {
	flex: 1 1 auto;
	min-width: 0;
}

body.nxb2-page .nxb2 a {
	text-decoration: none;
	color: inherit;
}

.nxb2 svg {
	display: block;
	flex: 0 0 auto;
}

/* the theme underlines and re-colours links on hover in places; this design
   never wants that */
body.nxb2-page .nxb2 a:hover,
body.nxb2-page .nxb2 a:focus {
	text-decoration: none !important;
}

/* 3.1 heading block, centred and split variants */
.nxb2-head {
	max-width: 760px;
	margin: 0 auto 54px;
	text-align: center;
}

.nxb2-eyebrow {
	display: block;
	margin-bottom: 14px;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--nxb2-indigo);
}

body.nxb2-page .nxb2-h2 {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--nxb2-ink);
}

.nxb2-sub {
	margin-top: 14px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--nxb2-body);
}

/* split head: heading block left, action button right */
.nxb2-head--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 24px 40px;
	max-width: none;
	margin-bottom: 44px;
	text-align: left;
}

.nxb2-head--split .nxb2-sub {
	max-width: 640px;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.nxb2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 66px;
	padding: 0 34px;
	border: 1px solid transparent;
	border-radius: var(--nxb2-r-md);
	font-family: var(--nxb2-font);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.1px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease,
		color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.nxb2-btn__icon {
	width: 19px;
	height: 19px;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.18s ease;
}

.nxb2-btn:hover .nxb2-btn__icon {
	transform: translateX(3px);
}

/* primary */
.nxb2-btn--primary {
	background-color: var(--nxb2-indigo) !important;
	border-color: var(--nxb2-indigo);
	color: #fff !important;
	box-shadow: 0 10px 24px -10px rgba(89, 62, 247, 0.62);
}

.nxb2-btn--primary:hover,
.nxb2-btn--primary:focus {
	background-color: var(--nxb2-indigo-dark) !important;
	border-color: var(--nxb2-indigo-dark);
	color: #fff !important;
	transform: translateY(-1px);
}

/* secondary, on light backgrounds */
.nxb2-btn--ghost {
	background-color: var(--nxb2-surface) !important;
	border-color: var(--nxb2-line-2);
	color: var(--nxb2-ink) !important;
	box-shadow: var(--nxb2-shadow-1);
}

.nxb2-btn--ghost:hover,
.nxb2-btn--ghost:focus {
	border-color: var(--nxb2-indigo);
	color: var(--nxb2-indigo) !important;
	transform: translateY(-1px);
}

/* white, on the dark call to action */
.nxb2-btn--white {
	background-color: #fff !important;
	border-color: #fff;
	color: var(--nxb2-ink) !important;
}

.nxb2-btn--white:hover,
.nxb2-btn--white:focus {
	color: var(--nxb2-indigo) !important;
	transform: translateY(-1px);
}

/* small outline action, used by the "view all" split head */
.nxb2-btn--outline {
	min-height: 52px;
	padding: 0 24px;
	font-size: 15px;
	background-color: var(--nxb2-surface) !important;
	border: 1.5px solid var(--nxb2-indigo);
	border-radius: var(--nxb2-r-sm);
	color: var(--nxb2-indigo) !important;
}

.nxb2-btn--outline:hover,
.nxb2-btn--outline:focus {
	background-color: var(--nxb2-indigo) !important;
	color: #fff !important;
}

/* the play glyph on the secondary hero button */
.nxb2-btn__play {
	width: 26px;
	height: 26px;
	border-radius: var(--nxb2-r-full);
	background-color: var(--nxb2-indigo-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--nxb2-indigo);
}

.nxb2-btn__play svg {
	width: 12px;
	height: 12px;
	margin-left: 1px;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.nxb2-hero {
	position: relative;
	padding-block: 56px 46px;
	overflow: hidden;
}

/* two soft blobs, matching the reference's light wash behind the artwork */
.nxb2-hero::before,
.nxb2-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.nxb2-hero::before {
	top: -160px;
	right: -120px;
	width: 720px;
	height: 720px;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(89, 62, 247, 0.13) 0%,
		rgba(89, 62, 247, 0) 68%
	);
}

.nxb2-hero::after {
	bottom: -220px;
	left: -140px;
	width: 640px;
	height: 640px;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(37, 112, 247, 0.09) 0%,
		rgba(37, 112, 247, 0) 70%
	);
}

.nxb2-hero .nxb2-wrap {
	position: relative;
	z-index: 1;
}

/* The wrap is 1320px with 24px of padding, so the grid has 1272px to divide. At
   1.35fr against 1fr with a 32px gap that is 712px of copy against 528px of artwork,
   which is what the reference measures. The copy column has to be that wide because
   the three-item trust row sits in it on one line. */
.nxb2-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: center;
	gap: 32px;
}

/* 5.1 badge */
.nxb2-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px 9px 14px;
	background-color: var(--nxb2-surface);
	border: 1px solid var(--nxb2-line);
	border-radius: var(--nxb2-r-full);
	box-shadow: var(--nxb2-shadow-1);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--nxb2-indigo);
}

.nxb2-badge svg {
	width: 17px;
	height: 17px;
}

/* 5.2 heading and copy */
body.nxb2-page .nxb2-hero__title {
	margin-top: 26px !important;
	/* keeps the reference's two-line break: "Grow your social presence," then
	   "the smarter way", rather than letting the wider column pull "the" up */
	max-width: 620px;
	font-size: 46px;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.6px;
	color: var(--nxb2-ink);
}

.nxb2-hero__title em {
	font-style: normal;
	color: var(--nxb2-indigo);
}

.nxb2-hero__lead {
	max-width: 640px;
	margin-top: 22px !important;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.85;
	color: var(--nxb2-body);
}

.nxb2-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 34px;
}

/* 5.3 trust micro-row */
/* three equal columns rather than a wrapping flex row: the notes are longer than
   the reference's, and equal columns guarantee they can never push onto a third
   line and change the hero's height. */
.nxb2-micro {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 24px;
	margin-top: 34px;
}

.nxb2-micro__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.nxb2-micro__tile {
	width: 42px;
	height: 42px;
	border-radius: var(--nxb2-r-md);
	background-color: var(--nxb2-indigo-soft);
	color: var(--nxb2-indigo);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nxb2-micro__tile svg {
	width: 20px;
	height: 20px;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nxb2-micro__tile--send svg {
}

.nxb2-micro__text {
	display: block;
}

.nxb2-micro__title {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nxb2-ink);
}

.nxb2-micro__note {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--nxb2-muted);
}

/* 5.4 artwork */
.nxb2-hero__media {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

.nxb2-hero__media img {
	width: 100%;
	max-width: 600px;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 26px 48px rgba(18, 26, 74, 0.16));
}

/* 5.5 statistics strip */
.nxb2-stats {
	margin-top: 8px;
	background-color: var(--nxb2-surface);
	border: 1px solid var(--nxb2-line);
	border-radius: var(--nxb2-r-xl);
	box-shadow: var(--nxb2-shadow-2);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
}

.nxb2-stats__cell {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 30px 22px;
}

.nxb2-stats__cell + .nxb2-stats__cell {
	border-left: 1px solid var(--nxb2-line);
}

.nxb2-stats__tile {
	width: 46px;
	height: 46px;
	border-radius: var(--nxb2-r-full);
	background-color: var(--nxb2-blue-soft);
	color: var(--nxb2-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nxb2-stats__tile svg {
	width: 22px;
	height: 22px;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nxb2-stats__num {
	display: block;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--nxb2-ink);
	font-variant-numeric: tabular-nums;
}

.nxb2-stats__label {
	display: block;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--nxb2-muted);
}

/* --------------------------------------------------------------------------
   6. Platform cards
   -------------------------------------------------------------------------- */
.nxb2-plats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--nxb2-gap);
}

.nxb2-plat {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 26px 24px 24px;
	border-radius: var(--nxb2-r-lg);
	background-color: var(--nxb2-soft);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nxb2-plat:hover {
	transform: translateY(-4px);
	box-shadow: var(--nxb2-shadow-2);
}

.nxb2-plat--facebook {
	background: linear-gradient(180deg, #f1f7fe 0%, #ecf4fe 100%);
}

.nxb2-plat--instagram {
	background: linear-gradient(180deg, #fef4f9 0%, #fdf1f6 100%);
}

.nxb2-plat--tiktok {
	background: linear-gradient(180deg, #effbfa 0%, #eefaf9 100%);
}

.nxb2-plat--youtube {
	background: linear-gradient(180deg, #fef4f5 0%, #fef2f3 100%);
}

.nxb2-plat__logo {
	width: 104px;
	height: 104px;
	margin-bottom: 18px;
}

.nxb2-plat__logo svg {
	width: 100%;
	height: 100%;
}

.nxb2-plat__name {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.2px;
	color: var(--nxb2-ink);
}

.nxb2-plat__text {
	margin-top: 8px;
	min-height: 72px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--nxb2-muted);
}

.nxb2-plat__btn {
	margin-top: 18px;
	width: 100%;
	min-height: 46px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background-color: var(--nxb2-surface);
	border: 1px solid var(--nxb2-line-2);
	border-radius: var(--nxb2-r-sm);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: var(--nxb2-ink);
	transition: border-color 0.18s ease, color 0.18s ease;
}

.nxb2-plat__btn svg {
	width: 16px;
	height: 16px;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nxb2-plat:hover .nxb2-plat__btn {
	border-color: var(--nxb2-indigo);
	color: var(--nxb2-indigo);
}

/* --------------------------------------------------------------------------
   7. Product cards
   -------------------------------------------------------------------------- */
.nxb2-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--nxb2-gap);
}

.nxb2-card {
	display: flex;
	flex-direction: column;
	padding: 14px;
	background-color: var(--nxb2-surface);
	border: 1px solid var(--nxb2-line);
	border-radius: var(--nxb2-r-lg);
	box-shadow: var(--nxb2-shadow-1);
	transition: transform 0.2s ease, box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.nxb2-card:hover {
	transform: translateY(-4px);
	border-color: var(--nxb2-line-2);
	box-shadow: var(--nxb2-shadow-2);
}

/* 7.1 the gradient tile */
.nxb2-card__tile {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--nxb2-r-md);
	overflow: hidden;
	isolation: isolate;
}

/* faint silhouettes, echoing the reference's background figures */
.nxb2-card__tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(
			circle at 14% 74%,
			rgba(255, 255, 255, 0.22) 0 14px,
			transparent 15px
		),
		radial-gradient(circle at 27% 84%, rgba(255, 255, 255, 0.16) 0 10px, transparent 11px),
		radial-gradient(circle at 88% 30%, rgba(255, 255, 255, 0.16) 0 12px, transparent 13px);
	pointer-events: none;
}

.nxb2-card__mark {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nxb2-card__mark svg {
	width: 48%;
	max-width: 132px;
	height: auto;
	filter: drop-shadow(0 12px 20px rgba(9, 14, 45, 0.32));
	transition: transform 0.28s ease;
}

.nxb2-card:hover .nxb2-card__mark svg {
	transform: translateY(-4px) scale(1.04);
}

/* the eight tile backgrounds, sampled from the reference */
.nxb2-tile--fb-page {
	background:
		radial-gradient(circle at 74% 20%, rgba(165, 216, 252, 0.95) 0%, rgba(165, 216, 252, 0) 58%),
		linear-gradient(140deg, #1e7bf7 0%, #0a4cbe 100%);
}

.nxb2-tile--fb-react {
	background:
		radial-gradient(circle at 76% 22%, rgba(127, 192, 255, 0.9) 0%, rgba(127, 192, 255, 0) 58%),
		linear-gradient(150deg, #1668db 0%, #0b3fa8 100%);
}

.nxb2-tile--ig-follow {
	background:
		radial-gradient(circle at 20% 22%, rgba(252, 162, 168, 0.85) 0%, rgba(252, 162, 168, 0) 58%),
		linear-gradient(140deg, #d97ddb 0%, #c276e8 48%, #fa9fb8 100%);
}

.nxb2-tile--ig-likes {
	background:
		radial-gradient(circle at 26% 24%, rgba(251, 140, 193, 0.9) 0%, rgba(251, 140, 193, 0) 58%),
		linear-gradient(140deg, #fd8d98 0%, #fc78bf 100%);
}

.nxb2-tile--tt-follow {
	background:
		radial-gradient(circle at 82% 14%, rgba(11, 105, 135, 0.95) 0%, rgba(11, 105, 135, 0) 56%),
		linear-gradient(150deg, #061c2e 0%, #04101c 100%);
}

.nxb2-tile--tt-views {
	background:
		radial-gradient(circle at 78% 20%, rgba(99, 36, 81, 0.95) 0%, rgba(99, 36, 81, 0) 56%),
		linear-gradient(150deg, #1e1429 0%, #0e1120 100%);
}

.nxb2-tile--yt-subs {
	background:
		radial-gradient(circle at 30% 22%, rgba(253, 169, 177, 0.95) 0%, rgba(253, 169, 177, 0) 58%),
		linear-gradient(140deg, #fc5b67 0%, #f8495e 100%);
}

.nxb2-tile--yt-views {
	background:
		radial-gradient(circle at 70% 20%, rgba(253, 176, 184, 0.95) 0%, rgba(253, 176, 184, 0) 58%),
		linear-gradient(140deg, #fd95a1 0%, #f75e6d 100%);
}

/* 7.2 copy block */
body.nxb2-page .nxb2-card__title {
	margin-top: 16px !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.2px;
	color: var(--nxb2-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

.nxb2-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 6px;
}

.nxb2-card__from {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--nxb2-muted);
}

.nxb2-card__amount {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.3px;
	color: var(--nxb2-ink);
}

.nxb2-card__amount .woocommerce-Price-currencySymbol {
	font-weight: 700;
}

.nxb2-card__amount del {
	display: none;
}

.nxb2-card__amount ins {
	text-decoration: none;
	color: inherit;
}

.nxb2-card__list {
	margin-top: 14px !important;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.nxb2-card__list li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--nxb2-ink);
}

.nxb2-card__tick {
	width: 18px;
	height: 18px;
	border-radius: var(--nxb2-r-full);
	background-color: var(--nxb2-green);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nxb2-card__tick svg {
	width: 10px;
	height: 10px;
	stroke-width: 3.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nxb2-card__btn {
	margin-top: auto;
	padding-top: 16px;
}

.nxb2-card__btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	background-color: var(--nxb2-indigo) !important;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #fff !important;
	transition: background-color 0.18s ease;
}

.nxb2-card__btn a:hover,
.nxb2-card__btn a:focus {
	background-color: var(--nxb2-indigo-dark) !important;
	color: #fff !important;
}

.nxb2-card__btn svg {
	width: 17px;
	height: 17px;
	stroke-width: 2.1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   8. How it works
   -------------------------------------------------------------------------- */
.nxb2-how {
	--nxb2-disc: 92px;
	background-color: var(--nxb2-surface);
	border: 1px solid var(--nxb2-line);
	border-radius: var(--nxb2-r-xl);
	box-shadow: var(--nxb2-shadow-1);
	padding: 44px 40px;
	display: flex;
	align-items: stretch;
	gap: 24px;
}

.nxb2-step {
	flex: 1 1 0;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	min-width: 0;
}

/* The arrow is a real flex child of the row, not an absolutely positioned pseudo
   element. Positioning it meant guessing an offset, which put it 2px from one
   column and 4px from the next. As a flex child the row's own 24px gap applies to
   both its sides, and align-self: center puts it in the vertical middle no matter
   how tall the steps are. */
.nxb2-step__arrow {
	flex: 0 0 auto;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.nxb2-step__arrow::before {
	content: "";
	width: 12px;
	height: 12px;
	border-top: 2.4px solid var(--nxb2-indigo);
	border-right: 2.4px solid var(--nxb2-indigo);
	border-radius: 1px;
	transform: rotate(45deg);
}

/* flex-shrink: 0 is the whole fix. Without it the disc is a flex item with a
   smaller basis than the text beside it, so the browser shrinks its width and
   leaves its height, turning a circle into an ellipse. aspect-ratio is the belt. */
.nxb2-step__disc {
	flex: 0 0 auto;
	width: var(--nxb2-disc);
	height: var(--nxb2-disc);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: linear-gradient(150deg, #6a4dff 0%, #4c30e0 100%);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 14px 26px -12px rgba(89, 62, 247, 0.7);
}

.nxb2-step__disc svg {
	width: 38px;
	height: 38px;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nxb2-step__body {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 8px;
	max-width: 300px;
}

.nxb2-step__title,
.nxb2-step__text,
.nxb2-val__title,
.nxb2-val__text {
	display: block;
}

.nxb2-step__title {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.2px;
	color: var(--nxb2-ink);
}

.nxb2-step__text {
	margin-top: 7px !important;
	font-size: 15px;
	line-height: 1.65;
	color: var(--nxb2-muted);
}

/* --------------------------------------------------------------------------
   9. Value cards
   -------------------------------------------------------------------------- */
.nxb2-vals {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.nxb2-val {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 22px;
	background-color: var(--nxb2-surface);
	border: 1px solid var(--nxb2-line);
	border-radius: 16px;
	box-shadow: var(--nxb2-shadow-1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nxb2-val:hover {
	transform: translateY(-3px);
	box-shadow: var(--nxb2-shadow-2);
}

.nxb2-val__tile {
	width: 52px;
	height: 52px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--nxb2-blue-soft);
	color: var(--nxb2-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.nxb2-val__tile svg {
	width: 25px;
	height: 25px;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nxb2-val__title {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--nxb2-ink);
}

.nxb2-val__text {
	margin-top: 5px !important;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--nxb2-muted);
}

/* --------------------------------------------------------------------------
   10. Closing call to action
   -------------------------------------------------------------------------- */
.nxb2-cta {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px 40px;
	padding: 40px 46px;
	border-radius: var(--nxb2-r-xl);
	background: linear-gradient(
		115deg,
		var(--nxb2-cta-from) 0%,
		var(--nxb2-cta-mid) 46%,
		var(--nxb2-cta-to) 100%
	);
	box-shadow: var(--nxb2-shadow-3);
	overflow: hidden;
}

/* the swoosh */
.nxb2-cta::before {
	content: "";
	position: absolute;
	right: -80px;
	top: -120px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(89, 62, 247, 0.42) 0%,
		rgba(89, 62, 247, 0) 62%
	);
	pointer-events: none;
}

.nxb2-cta::after {
	content: "";
	position: absolute;
	left: -140px;
	bottom: -260px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	border: 90px solid rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

.nxb2-cta > * {
	position: relative;
	z-index: 1;
}

.nxb2-cta__eyebrow {
	display: block;
	margin-bottom: 12px;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--nxb2-lav);
}

body.nxb2-page .nxb2-cta__title {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.5px;
	color: #fff;
}

.nxb2-cta__text {
	margin-top: 12px !important;
	font-size: 16px;
	line-height: 1.6;
	color: #c9ccec;
}

.nxb2-cta .nxb2-btn {
	min-height: 56px;
	padding: 0 30px;
	border-radius: 12px;
	font-size: 16px;
}

/* --------------------------------------------------------------------------
   11. Footer — moved to inc/nxb-site.css section 7. The markup is unchanged
       and still carries the nxb2-foot classes; only the rules moved, so that
       every page renders the same footer from nxb_site_footer().
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   12. Reveal on scroll
   Visible by default, so a JavaScript failure leaves the page complete.
   -------------------------------------------------------------------------- */
.nxb2-js [data-nxb2-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.nxb2-js [data-nxb2-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
	:root {
		--nxb2-wrap: 100%;
	}

	.nxb2-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	body.nxb2-page .nxb2-hero__title {
		font-size: 40px;
	}

	.nxb2-plats,
	.nxb2-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* four value cards, so three columns would leave an orphan on its own row */
	.nxb2-vals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1024px) {
	.nxb2-sec {
		padding-block: 64px;
	}

	body.nxb2-page .nxb2-h2 {
		font-size: 30px;
	}

	body.nxb2-page .nxb2-cta__title {
		font-size: 28px;
	}

	.nxb2-how {
		flex-direction: column;
		align-items: stretch;
		padding: 34px 28px;
		gap: 6px;
	}

	/* Stacked, the same chevron points down and tucks under the disc. Rotating it
	   is all that changes: the gap above and below it is the column gap. */
	.nxb2-step__arrow {
		align-self: flex-start;
		margin-left: calc(var(--nxb2-disc) / 2 - 11px);
	}

	.nxb2-step__arrow::before {
		transform: rotate(135deg);
	}

	.nxb2-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nxb2-stats__cell:nth-child(3) {
		border-left: 0;
		border-top: 1px solid var(--nxb2-line);
	}

	.nxb2-stats__cell:nth-child(4) {
		border-top: 1px solid var(--nxb2-line);
	}

	.nxb2-cta {
		grid-template-columns: minmax(0, 1fr);
		padding: 36px 32px;
	}

	.nxb2-cta .nxb2-btn {
		justify-self: start;
	}
}

@media (max-width: 860px) {
	.nxb2 {
		--nxb2-wrap-pad: 20px;
	}

	.nxb2-plats,
	.nxb2-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nxb2-hero {
		padding-block: 34px 30px;
	}

	.nxb2-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.nxb2-hero__media {
		order: -1;
		justify-content: center;
	}

	.nxb2-hero__media img {
		max-width: 420px;
	}

	body.nxb2-page .nxb2-hero__title {
		margin-top: 20px !important;
		font-size: 33px;
		letter-spacing: -0.4px;
	}

	.nxb2-hero__lead {
		font-size: 16px;
		line-height: 1.75;
	}

	.nxb2-hero__ctas .nxb2-btn {
		flex: 1 1 100%;
		min-height: 58px;
	}

	.nxb2-micro {
		gap: 14px 26px;
	}

	.nxb2-micro__item {
		min-width: 0;
	}

	.nxb2-head--split {
		grid-template-columns: minmax(0, 1fr);
	}

	.nxb2-sec {
		padding-block: 52px;
	}

	.nxb2-head {
		margin-bottom: 38px;
	}
}

@media (max-width: 640px) {
	.nxb2 {
		--nxb2-wrap-pad: 16px;
	}

	body.nxb2-page .nxb2-hero__title {
		font-size: 29px;
	}

	body.nxb2-page .nxb2-h2 {
		font-size: 26px;
	}

	.nxb2-plats,
	.nxb2-grid,
	.nxb2-vals {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.nxb2-plat__text {
		min-height: 0;
	}

	.nxb2-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.nxb2-stats__cell + .nxb2-stats__cell {
		border-left: 0;
		border-top: 1px solid var(--nxb2-line);
	}

	.nxb2-stats__cell:nth-child(3) {
		border-top: 1px solid var(--nxb2-line);
	}

	.nxb2-how {
		--nxb2-disc: 66px;
		padding: 28px 20px;
	}

	.nxb2-step {
		gap: 14px;
	}

	.nxb2-step__disc svg {
		width: 28px;
		height: 28px;
	}

	.nxb2-cta {
		padding: 30px 24px;
		border-radius: var(--nxb2-r-lg);
	}

	body.nxb2-page .nxb2-cta__title {
		font-size: 24px;
	}

	.nxb2-cta .nxb2-btn {
		width: 100%;
		justify-self: stretch;
	}

}

/* --------------------------------------------------------------------------
   14. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nxb2-js [data-nxb2-reveal],
	.nxb2-js [data-nxb2-reveal].is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.nxb2 *,
	.nxb2 *::before,
	.nxb2 *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* --------------------------------------------------------------------------
   15. Print
   -------------------------------------------------------------------------- */
@media print {
	.nxb2-hero__ctas,
	.nxb2-card__btn,
	.nxb2-cta,
	.nxb2-socials {
		display: none;
	}
}