/*
Theme Name: MakeMyCX
Theme URI: https://makemycx.com
Author: MakeMyCX
Description: Modern Salesforce consulting and managed services theme — Agentforce, Data Cloud, Headless 360.
Version: 3.4.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: makemycx
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
	--ink:         #080B10;   /* obsidian */
	--navy:        #0D1117;   /* dark charcoal surface */
	--cloud-blue:  #A100FF;   /* acid lime — primary accent */
	--teal:        #A100FF;   /* merged to single accent */
	--green:       #A100FF;
	--slate:       #8B9DB0;   /* readable grey on dark */
	--muted:       #52637A;   /* muted text on dark */
	--offwhite:    #0D1117;   /* dark surface (was light) */
	--hairline:    #1E2632;   /* dark border */
	--white:       #F0F4F8;   /* cool white for text */

	--grad-hero:   linear-gradient(135deg, #080B10 0%, #0D1117 100%);
	--grad-accent: #A100FF;   /* solid lime */
	--grad-card:   linear-gradient(145deg, #0D1117 0%, #141B24 100%);

	--font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-body:    "Charter", "Georgia", "Iowan Old Style", serif;

	--max-width: 1160px;
	--max-text:  680px;

	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 0.18s;
	--dur-med:  0.3s;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.05rem;
	line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cloud-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

/* ============================================================
   UTILITIES
   ============================================================ */
.mcx-container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--navy);
	color: var(--white);
	padding: 0.6em 1em;
	z-index: 1000;
}
.skip-link:focus { left: 0; }

.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--cloud-blue);
	color: var(--white);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding: 0.75em 1.65em;
	border-radius: 6px;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease-out),
	            transform var(--dur-fast) var(--ease-out),
	            box-shadow var(--dur-fast) var(--ease-out);
}
.btn-primary:hover {
	background: var(--teal);
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: 0 6px 24px rgba(0,169,224,0.35);
}

.btn-ghost {
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: rgba(255,255,255,0.82);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 0.95rem;
	padding: 0.75em 1.4em;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.22);
	text-decoration: none;
	transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.btn-ghost:hover {
	border-color: rgba(255,255,255,0.55);
	color: var(--white);
	background: rgba(255,255,255,0.07);
}

.section-label {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cloud-blue);
	margin: 0 0 0.8rem;
}

.section-heading {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 2.8vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--ink);
	margin: 0 0 0.9rem;
}

.section-heading.on-dark { color: var(--white); }

.section-sub {
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: var(--slate);
	max-width: 52ch;
	margin: 0;
	line-height: 1.65;
}

.section-sub.on-dark { color: rgba(255,255,255,0.6); }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fade-up {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes glow-breathe {
	0%, 100% { opacity: 0.55; }
	50%       { opacity: 1; }
}

@keyframes orb-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%       { transform: translate(24px, -20px) scale(1.06); }
	66%       { transform: translate(-16px, 14px) scale(0.96); }
}

@keyframes marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── Scroll reveal ── */
.reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-d5 { transition-delay: 0.5s; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,0.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--hairline);
	transition: box-shadow var(--dur-med);
}

.site-header.is-scrolled {
	box-shadow: 0 2px 24px rgba(7,17,31,0.09);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
}

.site-branding { display: flex; align-items: center; }
.site-logo-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.site-logo {
    display: block;
    /* Use a wide box so object-fit:cover crops height, showing the center logo strip */
    width: 168px;
    height: 44px;
    object-fit: cover;
    object-position: center 50%;
    mix-blend-mode: screen; /* blends the dark canvas bg into the obsidian header */
    filter: hue-rotate(195deg) saturate(1.1); /* lime → purple to match brand */
}

.site-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: 800;
	letter-spacing: -0.025em;
}
.site-title a { color: var(--ink); text-decoration: none; }

.site-description {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.72rem;
	color: var(--muted);
	letter-spacing: 0.03em;
}

/* Primary nav */
.primary-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-navigation a {
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--slate);
	font-size: 0.9rem;
	text-decoration: none;
	padding: 0.4em 0.85em;
	border-radius: 5px;
	transition: color var(--dur-fast), background var(--dur-fast);
	display: block;
	white-space: nowrap;
}

.primary-navigation a:hover {
	color: var(--ink);
	background: var(--offwhite);
}

.primary-navigation ul li:last-child a {
	background: var(--cloud-blue);
	color: var(--white);
	padding: 0.4em 1.1em;
}
.primary-navigation ul li:last-child a:hover {
	background: var(--teal);
	color: var(--white);
}

.menu-toggle { display: none; }

/* Dropdown sub-menu */
.primary-navigation ul li {
	position: relative;
}

.primary-navigation ul .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: -0.75rem;
	background: var(--white);
	border: 1px solid var(--hairline);
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba(7,17,31,0.12), 0 2px 8px rgba(7,17,31,0.06);
	min-width: 240px;
	display: none;
	flex-direction: column;
	padding: 0.4rem;
	z-index: 200;
	/* Arrow pointer */
	margin-top: 4px;
}

.primary-navigation ul .sub-menu::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 1.2rem;
	width: 9px;
	height: 9px;
	background: var(--white);
	border-top: 1px solid var(--hairline);
	border-left: 1px solid var(--hairline);
	transform: rotate(45deg);
}

.primary-navigation ul li:hover > .sub-menu,
.primary-navigation ul li:focus-within > .sub-menu {
	display: flex;
}

.primary-navigation ul .sub-menu li a {
	font-size: 0.875rem;
	padding: 0.48em 0.9em;
	color: var(--slate);
	border-radius: 6px;
	white-space: nowrap;
	display: block;
}

.primary-navigation ul .sub-menu li a:hover {
	color: var(--ink);
	background: var(--offwhite);
}

/* Transparent bridge that covers the gap between the nav item and dropdown,
   so the hover state on the parent <li> is maintained while the mouse
   travels from the link down to the sub-menu. */
.primary-navigation ul li.menu-item-has-children::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -14px;
	left: 0;
	width: 100%;
	height: 14px;
	background: transparent;
}

/* Chevron on parent items with children */
.primary-navigation ul li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 4px solid currentColor;
	margin-left: 0.4em;
	vertical-align: middle;
	opacity: 0.5;
	transition: transform var(--dur-fast);
}

.primary-navigation ul li.menu-item-has-children:hover > a::after {
	transform: rotate(180deg);
	opacity: 0.8;
}

/* Sub-menu divider items */
.primary-navigation .sub-menu .mcx-menu-divider > a {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: default;
	pointer-events: none;
	padding-top: 0.7em;
	margin-top: 0.3em;
	border-top: 1px solid var(--hairline);
}

.primary-navigation .sub-menu .mcx-menu-divider:first-child > a {
	border-top: none;
	margin-top: 0;
	padding-top: 0.3em;
}

@media (max-width: 720px) {
	.menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		background: none;
		border: 1px solid var(--hairline);
		border-radius: 6px;
		padding: 0.5em 0.9em;
		font-family: var(--font-display);
		font-size: 0.9rem;
		color: var(--ink);
		cursor: pointer;
	}
	.primary-navigation { display: none; width: 100%; order: 3; }
	.primary-navigation.is-open { display: block; }
	.primary-navigation ul { flex-direction: column; gap: 0.3rem; padding: 0.8rem 0; border-top: 1px solid var(--hairline); }
}

/* ============================================================
   HERO
   ============================================================ */
/* Gradient orbs — depth without images */
.hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
	opacity: 1;
}
.hero-orb-1 {
	width: 500px; height: 500px;
	background: radial-gradient(circle, rgba(0,169,224,0.22), transparent 70%);
	top: -180px; right: -60px;
	animation: orb-float 13s ease-in-out infinite;
}
.hero-orb-2 {
	width: 350px; height: 350px;
	background: radial-gradient(circle, rgba(11,199,185,0.18), transparent 70%);
	bottom: -100px; left: 5%;
	animation: orb-float 17s ease-in-out infinite;
	animation-delay: -5s;
}
.hero-orb-3 {
	width: 220px; height: 220px;
	background: radial-gradient(circle, rgba(0,169,224,0.12), transparent 70%);
	top: 35%; left: 28%;
	animation: orb-float 10s ease-in-out infinite;
	animation-delay: -8s;
}

.mcx-hero {
	background: var(--grad-hero);
	position: relative;
	overflow: hidden;
	padding: 6rem 0 5.5rem;
}

.mcx-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0,169,224,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,169,224,0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

.mcx-hero-inner {
	display: grid;
	grid-template-columns: 1fr 460px;
	gap: 4rem;
	align-items: center;
	position: relative;
	z-index: 1;
}

.mcx-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	animation: fade-up 0.55s var(--ease-out) both;
}

.mcx-tag {
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--teal);
	background: rgba(11,199,185,0.1);
	border: 1px solid rgba(11,199,185,0.22);
	border-radius: 100px;
	padding: 0.3em 0.9em;
}

.mcx-tag.blue {
	color: var(--cloud-blue);
	background: rgba(0,169,224,0.1);
	border-color: rgba(0,169,224,0.22);
}

.mcx-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--white);
	margin: 0 0 1.1rem;
	animation: fade-up 0.55s 0.08s var(--ease-out) both;
}

.mcx-hero h1 .grad-word {
	background: var(--grad-accent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.mcx-hero .hero-sub {
	font-family: var(--font-display);
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	color: rgba(255,255,255,0.67);
	line-height: 1.65;
	max-width: 46ch;
	margin: 0 0 2.2rem;
	animation: fade-up 0.55s 0.16s var(--ease-out) both;
}

.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	animation: fade-up 0.55s 0.24s var(--ease-out) both;
}

.mcx-hero-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fade-up 0.7s 0.12s var(--ease-out) both;
}

.hero-svg {
	width: 100%;
	max-width: 460px;
	height: auto;
	filter: drop-shadow(0 0 48px rgba(0,169,224,0.18));
	animation: glow-breathe 4s ease-in-out infinite;
}

/* ============================================================
   MARQUEE STRIP
   ============================================================ */
.mcx-marquee {
	background: var(--navy);
	border-top: 1px solid rgba(255,255,255,0.05);
	border-bottom: 1px solid rgba(255,255,255,0.05);
	padding: 0.9rem 0;
	overflow: hidden;
}

.marquee-wrap {
	overflow: hidden;
	display: flex;
	user-select: none;
}

.marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: marquee-scroll 32s linear infinite;
}

.marquee-item {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 0 2rem;
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 600;
	color: rgba(255,255,255,0.38);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.marquee-item strong {
	color: rgba(255,255,255,0.75);
}

.marquee-sep {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--teal);
	opacity: 0.7;
	flex-shrink: 0;
}

/* ============================================================
   SERVICES — DARK BENTO GRID
   ============================================================ */
.mcx-services-bento {
	background: var(--ink);
	padding: 6rem 0;
	position: relative;
	overflow: hidden;
}

/* Subtle radial ambient light */
.mcx-services-bento::before {
	content: "";
	position: absolute;
	top: -200px; left: 50%;
	transform: translateX(-50%);
	width: 800px; height: 600px;
	background: radial-gradient(ellipse, rgba(0,169,224,0.06) 0%, transparent 70%);
	pointer-events: none;
}

.mcx-services-bento .section-header {
	margin-bottom: 2.5rem;
}

.bento-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto;
	gap: 0.85rem;
}

/* Layout: Strategy spans 2 cols | AI spans 2 rows (right col) */
.bento-strategy       { grid-column: 1 / 3; }
.bento-ai             { grid-column: 3 / 4; grid-row: 1 / 3; }
.bento-implementation { grid-column: 1 / 2; }
.bento-stats          { grid-column: 2 / 3; }

.bento-card {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 18px;
	padding: 2rem;
	position: relative;
	overflow: hidden;
	transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.bento-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(0,169,224,0.05) 0%, transparent 60%);
	opacity: 0;
	transition: opacity 0.3s;
}

.bento-card:hover {
	border-color: rgba(0,169,224,0.22);
	background: rgba(255,255,255,0.05);
	transform: translateY(-3px);
	box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,169,224,0.12);
}

.bento-card:hover::before { opacity: 1; }

/* Ghost number watermark */
.bento-num {
	position: absolute;
	bottom: -0.5rem;
	right: 1rem;
	font-family: var(--font-display);
	font-size: 8rem;
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: 1;
	background: var(--grad-accent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	opacity: 0.06;
	pointer-events: none;
	user-select: none;
	transition: opacity 0.3s;
}

.bento-card:hover .bento-num { opacity: 0.1; }

.bento-icon {
	width: 46px; height: 46px;
	border-radius: 12px;
	background: rgba(0,169,224,0.1);
	border: 1px solid rgba(0,169,224,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.3rem;
	transition: background 0.3s, border-color 0.3s;
}

.bento-card:hover .bento-icon {
	background: rgba(0,169,224,0.16);
	border-color: rgba(0,169,224,0.28);
}

.bento-icon svg {
	width: 20px; height: 20px;
	stroke: var(--cloud-blue);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bento-card h3 {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--white);
	margin: 0 0 0.55rem;
	letter-spacing: -0.015em;
	position: relative;
}

.bento-card p {
	font-size: 0.9rem;
	color: rgba(255,255,255,0.48);
	margin: 0 0 1.4rem;
	line-height: 1.65;
	position: relative;
}

.bento-link {
	font-family: var(--font-display);
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--cloud-blue);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	position: relative;
	transition: color 0.18s;
}
.bento-link::after { content: "→"; transition: transform 0.18s; }
.bento-card:hover .bento-link { color: var(--teal); }
.bento-card:hover .bento-link::after { transform: translateX(5px); }

/* Stats card */
.bento-stats-inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	height: 100%;
	justify-content: center;
}

.bento-stat {
	border-left: 2px solid rgba(0,169,224,0.25);
	padding-left: 1rem;
	transition: border-color 0.3s;
}

.bento-card:hover .bento-stat { border-color: rgba(0,169,224,0.5); }

.bento-stat-val {
	font-family: var(--font-display);
	font-size: 1.8rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	background: var(--grad-accent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
	margin-bottom: 0.2rem;
}

.bento-stat-lbl {
	font-family: var(--font-display);
	font-size: 0.78rem;
	color: rgba(255,255,255,0.38);
	line-height: 1.4;
}

/* AI card — extra glow treatment */
.bento-ai {
	background: linear-gradient(160deg, rgba(0,169,224,0.07) 0%, rgba(11,199,185,0.04) 60%, rgba(255,255,255,0.02) 100%);
}

.bento-ai .bento-ai-orb {
	position: absolute;
	bottom: -60px; right: -60px;
	width: 220px; height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(11,199,185,0.2), transparent 70%);
	filter: blur(40px);
	pointer-events: none;
}

/* ============================================================
   STATEMENT SECTION — TYPOGRAPHIC VISUAL
   ============================================================ */
.mcx-statement {
	background: var(--offwhite);
	padding: 7rem 0;
	overflow: hidden;
	position: relative;
}

.statement-bg-word {
	position: absolute;
	font-family: var(--font-display);
	font-size: clamp(7rem, 18vw, 18rem);
	font-weight: 900;
	letter-spacing: -0.06em;
	color: rgba(7,17,31,0.042);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 1;
}

.statement-inner {
	position: relative;
	z-index: 1;
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
}

.statement-inner .section-label { display: inline-block; margin-bottom: 1.2rem; }

.statement-inner h2 {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 3.2vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ink);
	line-height: 1.15;
	margin: 0 0 1.1rem;
}

.statement-inner p {
	font-family: var(--font-display);
	color: var(--slate);
	font-size: 1.05rem;
	line-height: 1.7;
	max-width: 52ch;
	margin: 0 auto 2rem;
}


/* ============================================================
   AGENTFORCE / AI SECTION
   ============================================================ */
.mcx-ai {
	background: var(--grad-hero);
	padding: 6rem 0;
	position: relative;
	overflow: hidden;
}

.mcx-ai::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0,169,224,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,169,224,0.04) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
}

.mcx-ai-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4.5rem;
	align-items: start;
	position: relative;
	z-index: 1;
}

.ai-points {
	list-style: none;
	margin: 1.8rem 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.ai-points li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-family: var(--font-display);
	font-size: 0.95rem;
	color: rgba(255,255,255,0.72);
	line-height: 1.5;
}

.ai-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--teal);
	flex-shrink: 0;
	margin-top: 0.42rem;
}

/* Stats grid */
.ai-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.ai-stat {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 12px;
	padding: 1.4rem;
	transition: border-color var(--dur-med), background var(--dur-med);
}

.ai-stat:hover {
	background: rgba(255,255,255,0.07);
	border-color: rgba(0,169,224,0.25);
}

.ai-stat-num {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	background: var(--grad-accent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
	margin-bottom: 0.35rem;
}

.ai-stat-label {
	font-family: var(--font-display);
	font-size: 0.82rem;
	color: rgba(255,255,255,0.45);
	line-height: 1.4;
}

/* ============================================================
   METHODOLOGY
   ============================================================ */
.mcx-methodology {
	padding: 6rem 0;
	background: var(--offwhite);
}

.mcx-methodology-header {
	text-align: center;
	margin-bottom: 3.5rem;
}

.mcx-methodology-header .section-sub {
	margin: 0.7rem auto 0;
}

.method-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	position: relative;
}

.method-steps::before {
	content: "";
	position: absolute;
	top: 27px;
	left: calc(100% / 6);
	right: calc(100% / 6);
	height: 1px;
	background: var(--grad-accent);
	opacity: 0.25;
}

.method-step { text-align: center; }

.method-num {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--white);
	border: 2px solid rgba(0,169,224,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.3rem;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--cloud-blue);
	position: relative;
	z-index: 1;
	transition: background var(--dur-med), border-color var(--dur-med);
}

.method-step:hover .method-num {
	background: var(--cloud-blue);
	color: var(--white);
	border-color: var(--cloud-blue);
}

.method-step h3 {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 0.5rem;
	letter-spacing: -0.01em;
}

.method-step p {
	font-size: 0.92rem;
	color: var(--slate);
	margin: 0;
	line-height: 1.6;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.mcx-cta {
	background: var(--navy);
	padding: 5.5rem 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.mcx-cta::before {
	content: "";
	position: absolute;
	top: -80px;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	height: 350px;
	background: radial-gradient(ellipse, rgba(0,169,224,0.13) 0%, transparent 70%);
	pointer-events: none;
}

.mcx-cta .section-heading,
.mcx-cta .section-sub {
	position: relative;
	z-index: 1;
}

.mcx-cta .section-sub {
	margin: 0.9rem auto 2.2rem;
}

.mcx-cta .btn-primary {
	font-size: 1rem;
	padding: 0.9em 2.2em;
	position: relative;
	z-index: 1;
	box-shadow: 0 8px 36px rgba(0,169,224,0.32);
}

/* ============================================================
   INNER PAGES
   ============================================================ */
.mcx-page-hero {
	background: var(--offwhite);
	border-bottom: 1px solid var(--hairline);
	padding: 3.5rem 0 2.5rem;
}

.mcx-page-hero .page-title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.2vw, 2.7rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin: 0;
}

.mcx-page-content { padding: 3rem 0 5rem; }

.entry-content { max-width: var(--max-text); }

.entry-content h1 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 3.8vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.12;
	color: var(--ink);
	margin: 0 0 0.5em;
}

.entry-content h2 {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2vw, 1.65rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin-top: 2.4em;
	padding-top: 1.2em;
	border-top: 1px solid var(--hairline);
}

.entry-content h1 + h2 {
	margin-top: 0.25em;
	padding-top: 0;
	border-top: none;
	font-weight: 400;
	color: var(--slate);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-family: var(--font-body);
	letter-spacing: 0;
}

.entry-content p { margin: 0 0 1.1em; }
.entry-content ul, .entry-content ol { padding-left: 1.5em; }

.entry-content a[href*="/contact/"],
.entry-content a[href*="/contact"] {
	display: inline-flex;
	background: var(--cloud-blue);
	color: var(--white);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.7em 1.5em;
	border-radius: 6px;
	text-decoration: none;
	margin: 0.4em 0.3em 0.4em 0;
	transition: background var(--dur-fast), transform var(--dur-fast);
}
.entry-content a[href*="/contact/"]:hover,
.entry-content a[href*="/contact"]:hover {
	background: var(--teal);
	color: var(--white);
	transform: translateY(-1px);
}
.entry-content a:not([href*="/contact"]) {
	border-bottom: 1px solid rgba(0,169,224,0.3);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background: var(--ink);
	color: var(--offwhite);
	padding: 4rem 0 2rem;
}

.footer-inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 3rem;
	margin-bottom: 3rem;
}

.footer-brand-name {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--white);
	margin: 0 0 0.5rem;
}

.footer-tagline {
	font-family: var(--font-display);
	font-size: 0.86rem;
	color: rgba(255,255,255,0.38);
	line-height: 1.55;
	margin: 0 0 1.5rem;
	max-width: 28ch;
}

.footer-contact-link {
	font-family: var(--font-display);
	font-size: 0.88rem;
	color: var(--teal);
	text-decoration: none;
	transition: color var(--dur-fast);
}
.footer-contact-link:hover { color: var(--white); }

.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.2rem;
}
.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #1E2632;
    color: var(--slate);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.footer-social-link:hover {
    border-color: #A100FF;
    color: #A100FF;
    background: rgba(161,0,255,0.06);
}

.footer-col h4 {
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.3);
	margin: 0 0 1rem;
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.footer-col a {
	font-family: var(--font-display);
	font-size: 0.9rem;
	color: rgba(255,255,255,0.55);
	text-decoration: none;
	transition: color var(--dur-fast);
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.07);
	padding-top: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.footer-copyright {
	font-family: var(--font-display);
	font-size: 0.8rem;
	color: rgba(255,255,255,0.25);
	margin: 0;
}

.footer-sf-badge {
	font-family: var(--font-display);
	font-size: 0.76rem;
	color: rgba(255,255,255,0.25);
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
a:focus-visible, button:focus-visible {
	outline: 2px solid var(--cloud-blue);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   RESPONSIVE (legacy)
   ============================================================ */
@media (max-width: 980px) {
	.mcx-ai-inner { grid-template-columns: 1fr; gap: 3rem; }
	.method-steps { grid-template-columns: 1fr; }
	.method-steps::before { display: none; }
	.footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.ai-stats { grid-template-columns: 1fr 1fr; }
	.footer-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
   V3 — MINIMALIST REDESIGN
   ============================================================ */

/* ── Hero: full-screen, centered, SVG floats behind ── */
.mcx-hero {
	min-height: 100vh;
	padding: 10rem 0 7rem;
	display: flex;
	align-items: center;
}

.mcx-hero-inner {
	display: block;
	text-align: center;
	max-width: 820px;
	margin: 0 auto;
}

.hero-network-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(680px, 90vw);
	height: auto;
	opacity: 0.18;
	pointer-events: none;
	filter: drop-shadow(0 0 60px rgba(0,169,224,0.15));
}

.hero-eyebrow {
	font-family: var(--font-display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--cloud-blue);
	display: block;
	margin: 0 0 2rem;
	opacity: 0.85;
}

.mcx-hero h1 {
	font-size: clamp(3.2rem, 7.5vw, 6.2rem) !important;
	letter-spacing: -0.045em !important;
	line-height: 1.03 !important;
	margin: 0 0 1.8rem !important;
}

.hero-tagline {
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.28);
	margin: 0 0 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.hero-tagline b { color: rgba(255,255,255,0.5); font-weight: 600; }

.hero-dot {
	width: 3px; height: 3px;
	border-radius: 50%;
	background: var(--teal);
	opacity: 0.55;
	display: inline-block;
	flex-shrink: 0;
}

.hero-ctas { justify-content: center !important; }

.hero-sub-min {
	font-family: var(--font-display);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.22);
	margin: 0 0 3rem;
}

/* ── Numbers strip ── */
.mcx-numbers {
	background: var(--navy);
	padding: 5.5rem 0;
	border-top: 1px solid rgba(255,255,255,0.04);
	border-bottom: 1px solid rgba(255,255,255,0.04);
}

.numbers-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.num-item {
	text-align: center;
	padding: 1rem 2rem;
	border-right: 1px solid rgba(255,255,255,0.06);
}

.num-item:last-child { border-right: none; }

.num-val {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.8rem, 5vw, 4.6rem);
	font-weight: 900;
	letter-spacing: -0.05em;
	background: var(--grad-accent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
	margin-bottom: 0.7rem;
}

.num-label {
	display: block;
	font-family: var(--font-display);
	font-size: 0.76rem;
	color: rgba(255,255,255,0.32);
	line-height: 1.55;
	max-width: 14ch;
	margin: 0 auto;
}

/* ── Services directory list ── */
.mcx-services-dir {
	background: var(--white);
	padding: 7rem 0;
}

.svc-dir-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 0.5rem;
}

.svc-dir-header a {
	font-family: var(--font-display);
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--cloud-blue);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.svc-dir-header a:hover { color: var(--teal); }

.svc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.svc-row {
	display: grid;
	grid-template-columns: 3rem 1fr auto 2rem;
	align-items: center;
	gap: 1.5rem;
	padding: 1.65rem 0;
	border-bottom: 1px solid var(--hairline);
	text-decoration: none;
	transition: padding-left 0.28s var(--ease-out);
	position: relative;
}

.svc-list > li:first-child .svc-row,
.svc-row:first-child { border-top: 1px solid var(--hairline); }

.svc-row:hover { padding-left: 1.4rem; }

.svc-num {
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--cloud-blue);
	opacity: 0.55;
}

.svc-name {
	font-family: var(--font-display);
	font-size: clamp(1rem, 2vw, 1.45rem);
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.02em;
	transition: color 0.2s;
}

.svc-row:hover .svc-name { color: var(--cloud-blue); }

.svc-badge {
	font-family: var(--font-display);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--offwhite);
	border: 1px solid var(--hairline);
	border-radius: 100px;
	padding: 0.25em 0.85em;
	white-space: nowrap;
	transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.svc-row:hover .svc-badge {
	color: var(--cloud-blue);
	background: rgba(0,169,224,0.07);
	border-color: rgba(0,169,224,0.2);
}

.svc-arrow {
	font-size: 1.1rem;
	color: rgba(7,17,31,0.15);
	transition: transform 0.25s, color 0.25s;
}

.svc-row:hover .svc-arrow {
	transform: translateX(6px);
	color: var(--cloud-blue);
}

/* ── AI: product chips ── */
.product-chips {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.65rem;
	margin: 2rem 0 2.5rem;
}

.product-chip {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	padding: 1rem 1.3rem;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}

.product-chip:hover {
	background: rgba(0,169,224,0.08);
	border-color: rgba(0,169,224,0.22);
	transform: translateY(-2px);
}

.chip-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--grad-accent);
	flex-shrink: 0;
}

.chip-name {
	font-family: var(--font-display);
	font-size: 0.86rem;
	font-weight: 600;
	color: rgba(255,255,255,0.68);
}

/* ── Signal / Reality-check section ── */
.mcx-signal {
	background: var(--ink);
	padding: 8rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}

.signal-headline {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 5vw, 4.2rem);
	font-weight: 800;
	letter-spacing: -0.038em;
	line-height: 1.08;
	color: var(--white);
	text-align: center;
	max-width: 18ch;
	margin: 0 auto 5rem;
}

.signal-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 16px;
	overflow: hidden;
}

.signal-card {
	padding: 2.5rem 2rem;
	border-right: 1px solid rgba(255,255,255,0.07);
	position: relative;
	transition: background 0.25s;
}

.signal-card:last-child { border-right: none; }
.signal-card:hover { background: rgba(255,255,255,0.025); }

.signal-card::before {
	content: "";
	position: absolute;
	top: -1px; left: 0; right: 0;
	height: 2px;
	background: var(--grad-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--ease-out);
}

.signal-card:hover::before { transform: scaleX(1); }

.signal-num {
	font-family: var(--font-display);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cloud-blue);
	display: block;
	margin-bottom: 1.5rem;
}

.signal-card h3 {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--white);
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0 0 0.8rem;
}

.signal-card p {
	font-size: 0.87rem;
	color: rgba(255,255,255,0.38);
	line-height: 1.75;
	margin: 0;
}

/* ── Agentforce architecture stack ── */
.mcx-agentstack {
	background: var(--navy);
	padding: 8rem 0;
	position: relative;
	overflow: hidden;
}

.mcx-agentstack::after {
	content: "";
	position: absolute;
	bottom: -80px; right: -80px;
	width: 420px; height: 420px;
	background: radial-gradient(circle, rgba(0,169,224,0.07), transparent 70%);
	pointer-events: none;
}

.agentstack-header { margin-bottom: 4rem; }

.agentstack-header h2 {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 3.5vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.12;
	color: var(--white);
	max-width: 22ch;
	margin: 0.5rem 0 0;
}

.agentstack-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: 6rem;
	align-items: center;
}

.stack-diagram {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* Vertical connector line */
.stack-diagram::before {
	content: "";
	position: absolute;
	left: 46px;
	top: 0; bottom: 0;
	width: 1px;
	background: linear-gradient(
		to bottom,
		rgba(0,169,224,0.9) 0%,
		rgba(0,169,224,0.6) 25%,
		rgba(11,199,185,0.5) 50%,
		rgba(11,199,185,0.25) 75%,
		rgba(255,255,255,0.06) 100%
	);
	pointer-events: none;
}

.stack-layer {
	display: flex;
	align-items: center;
	padding: 1.2rem 1.5rem 1.2rem 4.2rem;
	border-radius: 10px;
	border: 1px solid transparent;
	position: relative;
	transition: border-color 0.25s, transform 0.25s, background 0.25s;
	cursor: default;
}

.stack-layer:hover {
	border-color: rgba(0,169,224,0.2);
	transform: translateX(8px);
}

/* Node on connector line */
.stack-layer::before {
	content: "";
	position: absolute;
	left: 42px;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--navy);
	border: 2px solid currentColor;
	z-index: 1;
	transition: box-shadow 0.25s;
}

.stack-layer:hover::before { box-shadow: 0 0 10px currentColor; }

.sl-num {
	position: absolute;
	left: 0;
	width: 2.8rem;
	text-align: center;
	font-family: var(--font-display);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: rgba(255,255,255,0.2);
}

.sl-body {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.sl-name {
	font-family: var(--font-display);
	font-size: 0.98rem;
	font-weight: 700;
	color: rgba(255,255,255,0.8);
	letter-spacing: -0.01em;
	transition: color 0.2s;
}

.stack-layer:hover .sl-name { color: var(--white); }

.sl-tag {
	font-family: var(--font-display);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	opacity: 0.6;
	white-space: nowrap;
}

/* Layer-specific: top = bright, bottom = foundation */
.sl-outcomes { background: rgba(0,169,224,0.13); color: var(--cloud-blue); }
.sl-agents   { background: rgba(0,169,224,0.08); color: var(--cloud-blue); }
.sl-trust    { background: rgba(11,199,185,0.07); color: var(--teal); }
.sl-data     { background: rgba(11,199,185,0.04); color: var(--teal); }
.sl-clouds   { background: rgba(255,255,255,0.025); color: rgba(255,255,255,0.28); }

.agentstack-content { position: relative; z-index: 1; }

.as-callout {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1.8vw, 1.35rem);
	font-weight: 700;
	color: var(--white);
	letter-spacing: -0.025em;
	line-height: 1.4;
	margin: 0 0 1.2rem;
}

.as-sub {
	font-size: 0.9rem;
	color: rgba(255,255,255,0.38);
	line-height: 1.8;
	margin: 0 0 2.2rem;
}

/* ── Responsive for v3 ── */
/* ============================================================
   V4 — ACCENTURE + VALUEHUBIT MERGE
   Left-aligned editorial hero · Credential-forward · Icon cards
   ============================================================ */

/* ── Hero: left-aligned 2-col (editorial, Accenture-style) ── */
.mcx-hero-inner {
	display: grid !important;
	grid-template-columns: 1fr 440px !important;
	gap: 5rem !important;
	text-align: left !important;
	max-width: none !important;
	margin: 0 !important;
	align-items: center !important;
}

.mcx-hero-content { position: relative; z-index: 1; }

.mcx-hero .hero-eyebrow  { text-align: left; }
.mcx-hero .hero-sub-min  { text-align: left; }
.mcx-hero .hero-tagline  { display: none !important; }
.mcx-hero .hero-ctas     { justify-content: flex-start !important; }
.hero-network-bg         { display: none !important; }

.mcx-hero-visual {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.hero-svg {
	width: 100%;
	max-width: 440px;
	height: auto;
	filter: drop-shadow(0 0 60px rgba(0,169,224,0.22));
	animation: glow-breathe 4s ease-in-out infinite;
}

/* ── Partner credentials strip (Valuehubit-inspired) ── */
.mcx-creds {
	background: var(--navy);
	padding: 0;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}

.creds-inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
}

.cred-item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 1.2rem 2.4rem;
	border-right: 1px solid rgba(255,255,255,0.07);
	transition: background 0.2s;
}

.cred-item:last-child { border-right: none; }
.cred-item:hover { background: rgba(255,255,255,0.03); }

.cred-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--teal);
	flex-shrink: 0;
}

.cred-label {
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
	white-space: nowrap;
}

/* ── Stats block (Valuehubit-inspired, 4 large numbers) ── */
.mcx-stats-block {
	background: var(--white);
	padding: 6rem 0;
	border-bottom: 1px solid var(--hairline);
}

.stats-block-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.stat-block {
	text-align: center;
	padding: 2rem 2.5rem;
	border-right: 1px solid var(--hairline);
	transition: background 0.2s;
}

.stat-block:last-child { border-right: none; }
.stat-block:hover { background: var(--offwhite); }

.stat-block-val {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.8rem, 5vw, 4.2rem);
	font-weight: 900;
	letter-spacing: -0.05em;
	background: linear-gradient(135deg, var(--cloud-blue), var(--teal));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
	margin-bottom: 0.6rem;
}

.stat-block-lbl {
	display: block;
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--slate);
	line-height: 1.5;
	max-width: 16ch;
	margin: 0 auto;
}

/* ── Visual service cards (Accenture + Valuehubit icon cards) ── */
.mcx-svc-cards {
	background: var(--offwhite);
	padding: 7rem 0;
}

.svc-cards-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 3rem;
	gap: 2rem;
}

.svc-cards-header a {
	font-family: var(--font-display);
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--cloud-blue);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color 0.18s;
}

.svc-cards-header a:hover { color: var(--teal); }

.svc-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
}

.svc-vis-card {
	border-radius: 20px;
	padding: 2.6rem 2.4rem;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	transition: transform 0.32s var(--ease-out), box-shadow 0.32s;
	text-decoration: none;
	cursor: pointer;
}

.svc-vis-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 32px 80px rgba(0,0,0,0.28);
}

.svc-card--strategy    { background: linear-gradient(145deg, #091724 0%, #0F2245 55%, #091724 100%); }
.svc-card--ai         { background: linear-gradient(145deg, #091A18 0%, #0D2E22 55%, #091A18 100%); }
.svc-card--integration { background: linear-gradient(145deg, #0C0E22 0%, #131634 55%, #0C0E22 100%); }

/* Radial glow orb per card */
.svc-vis-card::after {
	content: "";
	position: absolute;
	top: -80px; right: -80px;
	width: 260px; height: 260px;
	border-radius: 50%;
	pointer-events: none;
	transition: opacity 0.3s;
}

.svc-card--strategy::after    { background: radial-gradient(circle, rgba(0,169,224,0.2), transparent 70%); }
.svc-card--ai::after          { background: radial-gradient(circle, rgba(11,199,185,0.2), transparent 70%); }
.svc-card--integration::after { background: radial-gradient(circle, rgba(0,169,224,0.16), transparent 70%); }

.svc-vis-icon {
	width: 48px; height: 48px;
	border-radius: 12px;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: auto;
	position: relative;
	z-index: 1;
	transition: background 0.25s, border-color 0.25s;
}

.svc-vis-card:hover .svc-vis-icon {
	background: rgba(0,169,224,0.15);
	border-color: rgba(0,169,224,0.3);
}

.svc-vis-icon svg {
	width: 22px; height: 22px;
	stroke: rgba(255,255,255,0.7);
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.25s;
}

.svc-vis-card:hover .svc-vis-icon svg { stroke: var(--cloud-blue); }

.svc-vis-num {
	font-family: var(--font-display);
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.22);
	display: block;
	margin: 2rem 0 0.7rem;
	position: relative;
	z-index: 1;
}

.svc-vis-title {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	font-weight: 800;
	color: var(--white);
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0 0 0.7rem;
	position: relative;
	z-index: 1;
}

.svc-vis-sub {
	font-size: 0.85rem;
	color: rgba(255,255,255,0.38);
	line-height: 1.65;
	margin: 0 0 2rem;
	position: relative;
	z-index: 1;
}

.svc-vis-link {
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--cloud-blue);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	position: relative;
	z-index: 1;
	transition: gap 0.2s, color 0.2s;
	margin-top: auto;
}

.svc-vis-link::after { content: "→"; }
.svc-vis-card:hover .svc-vis-link { gap: 0.8rem; color: var(--teal); }

/* ── Pull quote (Accenture-style full-width statement) ── */
.mcx-pullquote {
	background: var(--ink);
	padding: 9rem 0;
	position: relative;
	overflow: hidden;
}

.mcx-pullquote::before {
	content: "\201C";
	position: absolute;
	top: -4rem; left: -1rem;
	font-size: 26rem;
	font-family: Georgia, serif;
	color: rgba(255,255,255,0.025);
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

.pq-inner {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 7rem;
	align-items: center;
}

.pq-statement {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.5vw, 3.8rem);
	font-weight: 800;
	letter-spacing: -0.038em;
	line-height: 1.1;
	color: var(--white);
	margin: 0;
}

.pq-right {
	border-left: 1px solid rgba(255,255,255,0.08);
	padding-left: 3rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.pq-stat { display: flex; flex-direction: column; gap: 0.3rem; }

.pq-stat-val {
	font-family: var(--font-display);
	font-size: 2.4rem;
	font-weight: 900;
	letter-spacing: -0.05em;
	background: var(--grad-accent);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1;
}

.pq-stat-lbl {
	font-family: var(--font-display);
	font-size: 0.77rem;
	color: rgba(255,255,255,0.3);
	line-height: 1.5;
}

/* ── Responsive for V4 ── */
@media (max-width: 980px) {
	.mcx-hero-inner {
		grid-template-columns: 1fr !important;
		gap: 3rem !important;
	}
	.mcx-hero-visual { order: -1; max-width: 300px; }
	.hero-svg { max-width: 300px; }
	.creds-inner { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
	.stats-block-grid { grid-template-columns: 1fr 1fr; }
	.stat-block:nth-child(2) { border-right: none; }
	.stat-block:nth-child(3) { border-top: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
	.stat-block:nth-child(4) { border-top: 1px solid var(--hairline); }
	.svc-cards-grid { grid-template-columns: 1fr; }
	.svc-vis-card { min-height: 260px; }
	.pq-inner { grid-template-columns: 1fr; gap: 3rem; }
	.pq-right { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); padding-left: 0; padding-top: 2.5rem; flex-direction: row; flex-wrap: wrap; gap: 2rem; }
}

@media (max-width: 600px) {
	.cred-item { padding: 1rem 1.4rem; }
	.pq-statement { font-size: 2rem; }
}

@media (max-width: 980px) {
	.mcx-hero { padding: 8rem 0 5rem; min-height: 90vh; }
	.numbers-grid { grid-template-columns: 1fr 1fr; }
	.num-item:nth-child(2) { border-right: none; }
	.num-item:nth-child(3) {
		border-top: 1px solid rgba(255,255,255,0.06);
		border-right: 1px solid rgba(255,255,255,0.06);
	}
	.num-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.06); }
	.svc-row { grid-template-columns: 2.5rem 1fr 2rem; }
	.svc-badge { display: none; }
	.mcx-ai-inner { grid-template-columns: 1fr; gap: 3rem; }
	.signal-cards { grid-template-columns: 1fr; border-radius: 12px; }
	.signal-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
	.signal-card:last-child { border-bottom: none; }
	.agentstack-layout { grid-template-columns: 1fr; gap: 3rem; }
	.agentstack-layout .agentstack-content { order: -1; }
}

@media (max-width: 600px) {
	.mcx-hero { padding: 7rem 0 4rem; min-height: 85vh; }
	.mcx-hero h1 { font-size: clamp(2.6rem, 11vw, 3.5rem) !important; }
	.hero-tagline { gap: 0.6rem; font-size: 0.72rem; }
	.svc-row { grid-template-columns: 2rem 1fr 1.5rem; gap: 0.8rem; }
	.svc-name { font-size: 1rem; }
	.product-chips { grid-template-columns: 1fr; }
	.numbers-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   OBSIDIAN + ACID LIME — v2.5.0
   #080B10 base · #A100FF accent · #F0F4F8 text
   ============================================================ */

/* Base dark canvas */
body { background: var(--ink); color: var(--white); }
a:hover { color: var(--white); }

/* Dark glass header */
.site-header {
	background: rgba(8,11,16,0.94);
	border-bottom-color: rgba(255,255,255,0.05);
}
.site-header.is-scrolled { box-shadow: 0 2px 32px rgba(0,0,0,0.55); }
.site-title a { color: var(--white); }
.site-description { color: rgba(255,255,255,0.28); }
.primary-navigation a { color: rgba(255,255,255,0.50); }
.primary-navigation a:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.primary-navigation ul li:last-child a { background: #A100FF; color: #FFFFFF; }
.primary-navigation ul li:last-child a:hover { background: #B833FF; color: #FFFFFF; }
.menu-toggle { border-color: rgba(255,255,255,0.12); color: var(--white); }

/* Dropdown — dark glass */
.primary-navigation ul .sub-menu {
	background: #0D1117;
	border-color: #1E2632;
	box-shadow: 0 12px 48px rgba(0,0,0,0.6);
}
.primary-navigation ul .sub-menu::before { background: #0D1117; border-color: #1E2632; }
.primary-navigation ul .sub-menu li a { color: rgba(255,255,255,0.52); }
.primary-navigation ul .sub-menu li a:hover { color: var(--white); background: rgba(255,255,255,0.05); }

/* Buttons — purple fill with white text */
.btn-primary { background: #A100FF; color: #FFFFFF; }
.btn-primary:hover {
	background: #B833FF;
	color: #FFFFFF;
	box-shadow: 0 6px 24px rgba(161,0,255,0.40);
}
.btn-ghost {
	color: rgba(161,0,255,0.85);
	border-color: rgba(161,0,255,0.28);
	background: transparent;
}
.btn-ghost:hover {
	border-color: rgba(161,0,255,0.62);
	color: #A100FF;
	background: rgba(161,0,255,0.07);
}

/* Hero — lime atmospheric orbs */
.hero-orb-1 { background: radial-gradient(circle, rgba(161,0,255,0.09), transparent 70%); }
.hero-orb-2 { background: radial-gradient(circle, rgba(161,0,255,0.06), transparent 70%); }
.hero-orb-3 { background: radial-gradient(circle, rgba(161,0,255,0.05), transparent 70%); }
.mcx-hero::before {
	background-image:
		linear-gradient(rgba(161,0,255,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(161,0,255,0.04) 1px, transparent 1px);
}
/* Hero layout — widen right column, fill SVG */
.mcx-hero-inner { grid-template-columns: 1fr 600px !important; }
.hero-svg {
	max-width: none;
	filter: drop-shadow(0 0 72px rgba(161,0,255,0.2));
}

/* Tags */
.mcx-tag,
.mcx-tag.blue {
	color: #A100FF;
	background: rgba(161,0,255,0.08);
	border-color: rgba(161,0,255,0.2);
}

/* Credentials strip */
.mcx-creds { background: #0D1117; }
.cred-dot { background: #A100FF; }

/* Stats block — dark canvas, lime numbers */
.mcx-stats-block { background: #080B10; border-bottom-color: #1E2632; }
.stat-block { border-right-color: #1E2632; }
.stat-block:hover { background: #0D1117; }
.stat-block-val {
	background: #A100FF;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.stat-block-lbl { color: var(--slate); }

@media (max-width: 980px) {
	.stat-block:nth-child(3) { border-top-color: #1E2632; border-right-color: #1E2632; }
	.stat-block:nth-child(4) { border-top-color: #1E2632; }
}

/* Service cards — obsidian tiles, lime glow */
.mcx-svc-cards { background: #0D1117; }
.svc-cards-header .section-heading { color: var(--white) !important; }
.svc-card--strategy    { background: linear-gradient(145deg, #0A0C14 0%, #0F1420 55%, #0A0C14 100%); }
.svc-card--ai          { background: linear-gradient(145deg, #080C0A 0%, #0C1410 55%, #080C0A 100%); }
.svc-card--integration { background: linear-gradient(145deg, #090A16 0%, #0E0F22 55%, #090A16 100%); }
.svc-card--strategy::after    { background: radial-gradient(circle, rgba(161,0,255,0.16), transparent 70%); }
.svc-card--ai::after           { background: radial-gradient(circle, rgba(161,0,255,0.13), transparent 70%); }
.svc-card--integration::after { background: radial-gradient(circle, rgba(161,0,255,0.11), transparent 70%); }
.svc-vis-card:hover .svc-vis-icon { background: rgba(161,0,255,0.12); border-color: rgba(161,0,255,0.28); }
.svc-vis-card:hover .svc-vis-icon svg { stroke: #A100FF; }
.svc-vis-link { color: rgba(161,0,255,0.7); }
.svc-vis-card:hover .svc-vis-link { color: #A100FF; gap: 0.8rem; }

/* Pull quote — pq-stat-val inherits lime via --grad-accent */
.pq-right { border-left-color: rgba(255,255,255,0.07); }

/* Architecture stack — lime connector + lime layer spectrum */
.mcx-agentstack { background: #080B10; }
.mcx-agentstack::after { background: radial-gradient(circle, rgba(161,0,255,0.06), transparent 70%); }
.stack-diagram::before {
	background: linear-gradient(
		to bottom,
		rgba(161,0,255,0.9) 0%,
		rgba(161,0,255,0.6) 25%,
		rgba(161,0,255,0.35) 50%,
		rgba(161,0,255,0.12) 75%,
		rgba(255,255,255,0.04) 100%
	);
}
.stack-layer:hover { border-color: rgba(161,0,255,0.22); }
.stack-layer::before { background: #080B10; }
.sl-outcomes { background: rgba(161,0,255,0.13); color: #A100FF; }
.sl-agents   { background: rgba(161,0,255,0.08); color: #A100FF; }
.sl-trust    { background: rgba(161,0,255,0.05); color: rgba(161,0,255,0.8); }
.sl-data     { background: rgba(161,0,255,0.03); color: rgba(161,0,255,0.6); }
.sl-clouds   { background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.28); }

/* CTA */
.mcx-cta { background: #0D1117; }
.mcx-cta::before { background: radial-gradient(ellipse, rgba(161,0,255,0.07) 0%, transparent 70%); }
.mcx-cta .btn-primary { box-shadow: 0 8px 36px rgba(161,0,255,0.2); }

/* Footer */
.site-footer { background: #080B10; }
.footer-contact-link { color: #A100FF; }
.footer-contact-link:hover { color: var(--white); }

/* Focus ring */
a:focus-visible, button:focus-visible { outline-color: #A100FF; }

/* ── Visual break banner ────────────────────────────────── */
.mcx-visual-break {
	position: relative;
	height: 460px;
	overflow: hidden;
}
.vb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	opacity: 0.78;
	filter: hue-rotate(195deg) saturate(1.1);
}
.vb-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(8,11,16,0.94) 0%,
		rgba(8,11,16,0.62) 45%,
		rgba(8,11,16,0.08) 100%
	);
	display: flex;
	align-items: center;
}
.vb-label {
	font-family: var(--font-display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #A100FF;
	margin: 0 0 1.2rem;
}
.vb-heading {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4.5vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.05;
	color: #F0F4F8;
	margin: 0;
}

@media (max-width: 720px) {
	.mcx-visual-break { height: 320px; }
	.vb-overlay {
		background: linear-gradient(
			to bottom,
			rgba(8,11,16,0.65) 0%,
			rgba(8,11,16,0.92) 100%
		);
	}
}

/* ── Service cards — Canva imagery fading to dark ───────── */
/* Image lives in ::before so hue-rotate only shifts the photo, not text or glow */
.svc-card--strategy,
.svc-card--ai,
.svc-card--integration {
	overflow: hidden;
}

.svc-card--strategy::before,
.svc-card--ai::before,
.svc-card--integration::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	filter: hue-rotate(195deg) saturate(1.2);
}
.svc-card--strategy::before {
	background:
		linear-gradient(to bottom, rgba(10,12,20,0) 0%, rgba(10,12,20,0.68) 38%, #0A0C14 64%),
		url('/wp-content/uploads/mcx-brand/mcx-strategy.png') center top / cover no-repeat;
}
.svc-card--ai::before {
	background:
		linear-gradient(to bottom, rgba(8,12,10,0) 0%, rgba(8,12,10,0.68) 38%, #080C0A 64%),
		url('/wp-content/uploads/mcx-brand/mcx-ai.png') center top / cover no-repeat;
}
.svc-card--integration::before {
	background:
		linear-gradient(to bottom, rgba(9,10,22,0) 0%, rgba(9,10,22,0.68) 38%, #090A16 64%),
		url('/wp-content/uploads/mcx-brand/mcx-integration.png') center top / cover no-repeat;
}

/* Card content sits above the ::before image layer */
.svc-card--strategy > *,
.svc-card--ai > *,
.svc-card--integration > * {
	position: relative;
	z-index: 1;
}

/* Glass icon box floats over the image */
.svc-card--strategy .svc-vis-icon,
.svc-card--ai .svc-vis-icon,
.svc-card--integration .svc-vis-icon {
	background: rgba(8,11,16,0.45);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-color: rgba(255,255,255,0.18);
}

/* Taller cards on desktop to show more image */
@media (min-width: 980px) {
	.svc-vis-card { min-height: 400px; }
}

/* ── Inner pages — editorial dark layout ─────────────────── */
.mcx-page-hero { display: none; } /* replaced by pg-hero below */

.pg-hero {
	background: #080B10;
	padding: 8rem 0 5rem;
	border-bottom: 1px solid #1E2632;
	position: relative;
	overflow: hidden;
}
.pg-hero::after {
	content: "";
	position: absolute;
	bottom: -60px; right: 8%;
	width: 600px; height: 350px;
	background: radial-gradient(ellipse, rgba(161,0,255,0.05), transparent 70%);
	pointer-events: none;
}
.pg-hero-inner { position: relative; z-index: 1; }

.pg-eyebrow {
	display: block;
	font-family: var(--font-display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #A100FF;
	margin-bottom: 1.6rem;
}

.pg-title {
	font-family: var(--font-display);
	font-size: clamp(2.8rem, 6vw, 5.2rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.04;
	color: var(--white);
	max-width: 18ch;
	margin: 0 0 1.8rem;
}

.pg-intro {
	font-family: var(--font-display);
	font-size: clamp(1rem, 1.5vw, 1.18rem);
	color: rgba(255,255,255,0.48);
	max-width: 52ch;
	line-height: 1.7;
	margin: 0;
}

/* Body — minimal editorial strip */
.pg-body {
	background: #0D1117;
	padding: 5rem 0 6rem;
}
.pg-body-inner {
	max-width: 720px;
	margin: 0 auto;
}

/* Content typography */
.pg-content,
.pg-content p,
.pg-content li { color: rgba(255,255,255,0.68); line-height: 1.8; }
.pg-content p  { margin: 0 0 1.3em; font-size: 1.02rem; }
.pg-content ul,
.pg-content ol { padding-left: 1.5em; margin: 0 0 1.3em; }
.pg-content li { margin-bottom: 0.55em; }
.pg-content strong { color: var(--white); font-weight: 600; }

.pg-content h1,
.pg-content h2,
.pg-content h3 {
	font-family: var(--font-display);
	color: var(--white);
	letter-spacing: -0.025em;
	line-height: 1.2;
}
.pg-content h2 {
	font-size: clamp(1.35rem, 2.2vw, 1.9rem);
	font-weight: 700;
	margin: 3rem 0 0.8rem;
	padding-top: 2.5rem;
	border-top: 1px solid #1E2632;
}
.pg-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.pg-content h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 2rem 0 0.5rem;
	color: rgba(255,255,255,0.85);
}

/* Links inside content */
.pg-content a:not([class]) {
	color: #A100FF;
	text-decoration: none;
	border-bottom: 1px solid rgba(161,0,255,0.25);
	transition: border-color 0.18s, color 0.18s;
}
.pg-content a:not([class]):hover {
	color: #BFFF5A;
	border-bottom-color: rgba(161,0,255,0.6);
}

/* CTA button links in content */
.pg-content a[href*="/contact/"],
.pg-content a[href*="/contact"],
.entry-content a[href*="/contact/"],
.entry-content a[href*="/contact"] {
	display: inline-flex;
	background: #A100FF;
	color: #FFFFFF !important;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.7em 1.5em;
	border-radius: 6px;
	text-decoration: none;
	border-bottom: none;
	margin: 0.4em 0.3em 0.4em 0;
	transition: background 0.18s;
}
.pg-content a[href*="/contact/"]:hover,
.pg-content a[href*="/contact"]:hover,
.entry-content a[href*="/contact/"]:hover,
.entry-content a[href*="/contact"]:hover { background: #B833FF; color: #FFFFFF !important; }

/* Bottom CTA strip */
.pg-cta {
	background: #080B10;
	padding: 6rem 0;
	text-align: center;
	border-top: 1px solid #1E2632;
	position: relative;
	overflow: hidden;
}
.pg-cta::before {
	content: "";
	position: absolute;
	top: -60px; left: 50%;
	transform: translateX(-50%);
	width: 700px; height: 300px;
	background: radial-gradient(ellipse, rgba(161,0,255,0.06), transparent 70%);
	pointer-events: none;
}
.pg-cta-label {
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #A100FF;
	margin: 0 0 1.8rem;
	position: relative;
	z-index: 1;
}
.pg-cta-heading {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	color: var(--white);
	line-height: 1.1;
	margin: 0 0 2.5rem;
	position: relative;
	z-index: 1;
}
.pg-cta-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

@media (max-width: 720px) {
	.pg-hero { padding: 7rem 0 4rem; }
	.pg-title { font-size: clamp(2.2rem, 9vw, 3.2rem); }
	.pg-body { padding: 3rem 0 4rem; }
	.pg-cta { padding: 4rem 0; }
}

/* ── Content cards (auto-generated from h2 sections) ─────── */
.content-card {
	background: rgba(255,255,255,0.025);
	border: 1px solid #1E2632;
	border-radius: 16px;
	padding: 2rem 2.4rem;
	margin-bottom: 0.9rem;
	position: relative;
	overflow: hidden;
	transition: border-color 0.25s var(--ease-out), background 0.25s;
}
.content-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 2px; height: 100%;
	background: #A100FF;
	opacity: 0;
	transition: opacity 0.25s;
}
.content-card:hover {
	border-color: rgba(161,0,255,0.22);
	background: rgba(255,255,255,0.04);
}
.content-card:hover::before { opacity: 1; }

/* Override pg-content typography inside cards */
.content-card h2 {
	font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
	margin: 0 0 0.75rem !important;
	padding-top: 0 !important;
	border-top: none !important;
	color: var(--white);
}
.content-card p:last-child,
.content-card ul:last-child,
.content-card ol:last-child { margin-bottom: 0; }

/* Two-column grid for 4+ cards */
.pg-body-inner.grid-wide { max-width: 960px; }
.pg-content.cards-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
}
.pg-content.cards-grid .content-card { margin-bottom: 0; }

@media (max-width: 720px) {
	.pg-content.cards-grid { grid-template-columns: 1fr; }
	.content-card { padding: 1.5rem 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════
   V3 REDESIGN — Grain · Mesh · Bento · Cursor · Counters
════════════════════════════════════════════════════════════ */

/* ── Stage 1: Grain texture overlay ── */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0.055;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
	background-size: 300px 300px;
}

/* ── Stage 1: Gradient mesh orbs ── */
.mesh-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform;
}
.mesh-orb-1 {
	width: 800px; height: 800px;
	background: radial-gradient(circle, rgba(161,0,255,0.18) 0%, transparent 65%);
	top: -260px; right: -200px;
	filter: blur(60px);
}
.mesh-orb-2 {
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(161,0,255,0.10) 0%, transparent 65%);
	bottom: -180px; left: -120px;
	filter: blur(80px);
}
.mesh-orb-3 {
	width: 350px; height: 350px;
	background: radial-gradient(circle, rgba(100,0,200,0.08) 0%, transparent 65%);
	top: 38%; left: 28%;
	filter: blur(60px);
}
.mesh-orb-4 {
	width: 250px; height: 250px;
	background: radial-gradient(circle, rgba(161,0,255,0.06) 0%, transparent 65%);
	top: 60%; right: 15%;
	filter: blur(50px);
}

/* ── Stage 2: Full-viewport hero ── */
.mcx-hero {
	min-height: 100vh !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 7rem 0 5rem !important;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.hero-full-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.hero-display {
	font-family: var(--font-display);
	font-size: clamp(3.4rem, 8.5vw, 7.8rem);
	font-weight: 800;
	line-height: 1.01;
	letter-spacing: -0.035em;
	color: var(--white);
	margin: 1rem 0 1.6rem;
}
.hero-display .grad-word {
	background: linear-gradient(135deg, #A100FF 0%, #CC44FF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.hero-full-sub {
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	color: var(--slate);
	max-width: 480px;
	line-height: 1.65;
	margin: 0 0 2.8rem;
}
.hero-ctas { justify-content: center !important; }
.btn-lg {
	padding: 0.9em 2.2em !important;
	font-size: 1rem !important;
}

/* Scroll hint */
.hero-scroll-hint {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	z-index: 1;
}
.scroll-line {
	width: 1px;
	height: 52px;
	background: linear-gradient(to bottom, rgba(161,0,255,0.6), transparent);
	animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
	0%, 100% { opacity: 0.3; transform: scaleY(1); }
	50%       { opacity: 1;   transform: scaleY(0.7); }
}

/* Kill the old two-column hero layout overrides */
.mcx-hero-inner { display: block !important; grid-template-columns: none !important; }
.mcx-hero .hero-eyebrow { text-align: center !important; }
.mcx-hero .hero-sub-min { text-align: center !important; }
.mcx-hero .hero-ctas { justify-content: center !important; }

/* ── Stage 3: Bento services grid ── */
.svc-bento-grid {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 1rem;
	min-height: 560px;
}
.svc-bento-main {
	grid-row: 1 / 3;
	min-height: 400px;
}
.svc-bento-sm {
	min-height: 0;
}
@media (max-width: 820px) {
	.svc-bento-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		min-height: auto;
	}
	.svc-bento-main { grid-row: auto; min-height: 280px; }
	.svc-bento-sm   { min-height: 220px; }
}

/* ── Stage 4: Cursor glow ── */
.cursor-glow {
	position: fixed;
	top: 0; left: 0;
	width: 440px; height: 440px;
	background: radial-gradient(circle, rgba(161,0,255,0.09) 0%, transparent 68%);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9997;
	mix-blend-mode: screen;
	transform: translate(-220px, -220px);
	transition: opacity 0.4s;
}
body:not(:hover) .cursor-glow { opacity: 0; }

@media (max-width: 768px) {
	.hero-display { font-size: clamp(2.6rem, 10vw, 4rem) !important; }
	.cursor-glow  { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   GLASS LAYERS — Accenture depth · v3.2
════════════════════════════════════════════════════════════ */

/* Glass text — headline has a crystalline fade */
.hero-display {
	background: linear-gradient(170deg, #FFFFFF 0%, rgba(255,255,255,0.76) 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}
.hero-display .grad-word {
	background: linear-gradient(130deg, #CC55FF 0%, #A100FF 55%, #D080FF 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}

/* Hero — frosted glass panel behind content */
.hero-full-inner {
	position: relative;
	padding: 3.8rem 5rem;
	isolation: isolate;
}
.hero-full-inner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.032);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
	border-radius: 28px;
	border: 1px solid rgba(255,255,255,0.07);
	z-index: -1;
}

/* Header — stronger glass */
.site-header {
	background: rgba(8,11,16,0.65) !important;
	backdrop-filter: blur(28px) !important;
	-webkit-backdrop-filter: blur(28px) !important;
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Service cards — glass elevation */
.svc-vis-card {
	background: rgba(12,14,24,0.55) !important;
	backdrop-filter: blur(24px) !important;
	-webkit-backdrop-filter: blur(24px) !important;
	border: 1px solid rgba(255,255,255,0.09) !important;
	box-shadow:
		0 8px 40px rgba(0,0,0,0.45),
		inset 0 1px 0 rgba(255,255,255,0.07) !important;
	transition: border-color 0.28s, box-shadow 0.28s, transform 0.28s !important;
}
.svc-vis-card:hover {
	border-color: rgba(161,0,255,0.38) !important;
	box-shadow:
		0 16px 56px rgba(161,0,255,0.16),
		inset 0 1px 0 rgba(255,255,255,0.10) !important;
	transform: translateY(-3px) !important;
}

/* Stats — glass cells */
.stat-block {
	background: rgba(255,255,255,0.022) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-right-color: rgba(255,255,255,0.055) !important;
}
.stat-block:hover { background: rgba(255,255,255,0.04) !important; }

/* Pull-quote panel — glass */
.pq-inner {
	background: rgba(255,255,255,0.028);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 22px;
	padding: 3.5rem 4rem !important;
}

/* Architecture stack cards — glass */
.stack-layer {
	background: rgba(255,255,255,0.028) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255,255,255,0.07) !important;
}
.stack-layer:hover {
	background: rgba(255,255,255,0.05) !important;
	border-color: rgba(161,0,255,0.25) !important;
}

/* CTA section glass */
.mcx-cta::before {
	backdrop-filter: blur(30px);
}

/* Inner page content cards — glass */
.content-card {
	background: rgba(255,255,255,0.028) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border-color: rgba(255,255,255,0.07) !important;
}
.content-card:hover {
	background: rgba(255,255,255,0.05) !important;
	border-color: rgba(161,0,255,0.22) !important;
}

/* Inner page hero — glass panel */
.pg-hero {
	background: rgba(8,11,16,0.92) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

/* Footer glass */
.site-footer {
	background: rgba(5,7,12,0.96) !important;
	backdrop-filter: blur(20px);
	border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* Credential strip */
.mcx-creds {
	background: rgba(255,255,255,0.018) !important;
	backdrop-filter: blur(20px);
	border-top: 1px solid rgba(255,255,255,0.05);
	border-bottom: 1px solid rgba(255,255,255,0.05);
}

@media (max-width: 760px) {
	.hero-full-inner { padding: 2.5rem 1.8rem; }
	.hero-full-inner::before { border-radius: 18px; }
	.pq-inner { padding: 2rem 1.8rem !important; }
}