/* @property declaration ensures --angle is interpreted as an angle in calc()/sin()/cos() */
	@property --angle {
		syntax: '<angle>';
		inherits: true;
		initial-value: 0deg;
	}

	/* ============================================
   DESIGN TOKENS — DARK (default)
   ============================================ */
	:root,
	:root[data-theme="dark"] {
		--bg: #050818;
		--bg-deep: #02030B;
		--surface: #0C1024;
		--surface-2: #141832;
		--surface-3: #1A1F3D;
		--border: rgba(255, 255, 255, 0.08);
		--border-bright: rgba(255, 255, 255, 0.15);

		--text: #FFFFFF;
		--text-mute: #A0A8C0;
		--text-dim: #6B7494;

		--hub-bg-1: #1A1F3D;
		--hub-bg-2: #050818;
		--pill-bg: rgba(5, 8, 24, 0.7);
		--grid-overlay: rgba(77, 142, 255, 0.04);
	}

	/* ============================================
   DESIGN TOKENS — LIGHT
   ============================================ */
	:root[data-theme="light"] {
		--bg: #FAF6EC;
		--bg-deep: #FFFFFF;
		--surface: #FFFFFF;
		--surface-2: #F5EFE2;
		--surface-3: #EBE4D3;
		--border: rgba(10, 14, 26, 0.1);
		--border-bright: rgba(10, 14, 26, 0.2);

		--text: #0A0E1A;
		--text-mute: #4A5468;
		--text-dim: #7B8597;

		--hub-bg-1: #FFFFFF;
		--hub-bg-2: #F5EFE2;
		--pill-bg: rgba(255, 255, 255, 0.85);
		--grid-overlay: rgba(10, 14, 26, 0.04);
	}

	:root {
		--electric: #4D8EFF;
		--cyan: #00D4FF;
		--violet: #A855F7;
		--magenta: #EC4899;
		--gold: #FFB800;
		--emerald: #10E5A0;

		--gradient-electric: linear-gradient(135deg, #4D8EFF 0%, #00D4FF 100%);
		--gradient-aurora: linear-gradient(120deg, #4D8EFF 0%, #A855F7 50%, #EC4899 100%);
		--gradient-cyber: linear-gradient(135deg, #00D4FF 0%, #4D8EFF 50%, #A855F7 100%);

		--serif: 'Instrument Serif', Georgia, serif;
		--sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

		--container: 100%;
		--gutter: clamp(1.5rem, 5vw, 5rem);

		--radius: 16px;
		--radius-lg: 24px;
		--radius-xl: 32px;

		--shadow-glow: 0 0 60px rgba(77, 142, 255, 0.3);
		--shadow-glow-cyan: 0 0 80px rgba(0, 212, 255, 0.25);
		--shadow-glow-violet: 0 0 80px rgba(168, 85, 247, 0.25);
	}

	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	html {
		scroll-behavior: smooth;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	body {
		font-family: var(--sans);
		background: var(--bg);
		color: var(--text);
		line-height: 1.6;
		font-size: 16px;
		overflow-x: hidden;
		position: relative;
	}

	/* Global noise + grid texture */
	body::before {
		content: "";
		position: fixed;
		inset: 0;
		background-image:
			linear-gradient(rgba(77, 142, 255, 0.04) 1px, transparent 1px),
			linear-gradient(90deg, rgba(77, 142, 255, 0.04) 1px, transparent 1px);
		background-size: 80px 80px;
		pointer-events: none;
		z-index: 1;
		mask-image: radial-gradient(ellipse at center top, black 0%, transparent 70%);
		-webkit-mask-image: radial-gradient(ellipse at center top, black 0%, transparent 70%);
	}

	img,
	svg {
		display: block;
		max-width: 100%;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	button {
		font-family: inherit;
		cursor: pointer;
		border: none;
		background: none;
		color: inherit;
	}

	.container {
		max-width: var(--container);
		margin: 0 auto;
		padding: 0 var(--gutter);
		position: relative;
		z-index: 2;
	}

	/* ============================================
   TYPOGRAPHY
   ============================================ */
	.serif {
		font-family: var(--serif);
		font-weight: 400;
		letter-spacing: -0.02em;
	}

	.italic {
		font-style: italic;
	}

	.eyebrow {
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		display: inline-flex;
		align-items: center;
		gap: 0.7rem;
	}

	.eyebrow-dot {
		width: 6px;
		height: 6px;
		background: var(--cyan);
		border-radius: 50%;
		box-shadow: 0 0 12px var(--cyan);
		animation: pulse 2s ease-in-out infinite;
	}

	@keyframes pulse {

		0%,
		100% {
			opacity: 1;
			transform: scale(1);
		}

		50% {
			opacity: 0.5;
			transform: scale(1.2);
		}
	}

	.gradient-text {
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	/* ============================================
   BUTTONS
   ============================================ */
	.btn {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		padding: 1rem 1.8rem;
		border-radius: 100px;
		font-weight: 600;
		font-size: 0.95rem;
		transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		white-space: nowrap;
		position: relative;
		border: 1px solid transparent;
	}

	.btn-primary {
		background: var(--gradient-electric);
		color: white;
		box-shadow: 0 8px 32px rgba(77, 142, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	}

	.btn-primary:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 40px rgba(77, 142, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	}

	.btn-glass {
		background: rgba(255, 255, 255, 0.05);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid var(--border-bright);
		color: white;
	}

	.btn-glass:hover {
		background: rgba(255, 255, 255, 0.1);
		border-color: var(--electric);
		transform: translateY(-2px);
	}

	.btn-arrow {
		display: inline-block;
		transition: transform 0.3s ease;
	}

	.btn:hover .btn-arrow {
		transform: translateX(5px);
	}

	/* ============================================
   NAVIGATION
   ============================================ */
	.nav-wrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: rgba(5, 8, 24, 0.7);
		backdrop-filter: blur(20px) saturate(180%);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		border-bottom: 1px solid var(--border);
		transition: all 0.3s;
	}

	.nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1.1rem 0;
	}

	.logo {
		font-family: var(--serif);
		font-size: 1.5rem;
		font-weight: 500;
		letter-spacing: -0.02em;
		display: flex;
		align-items: center;
		gap: 0.7rem;
		color: white;
	}

	.logo-mark {
		width: 36px;
		height: 36px;
		background: var(--gradient-electric);
		border-radius: 10px;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 24px rgba(77, 142, 255, 0.5);
	}

	.logo-mark::before {
		content: "R";
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.2rem;
		color: white;
		font-weight: 500;
	}

	.logo-text {
		font-style: italic;
	}

	.nav-links {
		display: flex;
		gap: 2.2rem;
		align-items: center;
		list-style: none;
	}

	.nav-links a {
		font-size: 0.92rem;
		font-weight: 500;
		color: var(--text-mute);
		transition: color 0.2s;
		position: relative;
	}

	.nav-links a:hover {
		color: white;
	}

	[data-theme="light"] .nav-links a:hover {
		color: var(--text);
	}

	/* Flagship product nav link — subtle "live" accent */
	.nav-product {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
	}

	.nav-product-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--cyan);
		box-shadow: 0 0 10px var(--cyan);
		animation: pulse 2s ease-in-out infinite;
		flex-shrink: 0;
	}

	/* ============================================
   MEGA MENU (Services dropdown)
   ============================================ */
	.nav-dropdown {
		position: relative;
	}

	.nav-link-caret {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		cursor: pointer;
	}

	.nav-caret {
		width: 11px;
		height: 11px;
		transition: transform 0.3s ease;
		opacity: 0.7;
	}

	.nav-dropdown:hover .nav-caret,
	.nav-dropdown:focus-within .nav-caret {
		transform: rotate(180deg);
		opacity: 1;
	}

	.mega-menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: min(960px, calc(100vw - 3rem));
		padding-top: 18px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(8px);
		transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
		z-index: 1000;
	}

	.nav-dropdown:hover .mega-menu,
	.nav-dropdown:focus-within .mega-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.mega-menu-inner {
		background: rgba(10, 14, 26, 0.985);
		backdrop-filter: blur(28px) saturate(160%);
		-webkit-backdrop-filter: blur(28px) saturate(160%);
		border: 1px solid var(--border-bright);
		border-radius: 22px;
		padding: 2rem 2rem 1.6rem;
		box-shadow:
			0 30px 80px rgba(0, 0, 0, 0.5),
			0 0 0 1px rgba(255, 255, 255, 0.03) inset;
		position: relative;
		overflow: hidden;
	}

	.mega-menu-inner::before {
		content: "";
		position: absolute;
		top: -50%;
		right: -10%;
		width: 60%;
		height: 200%;
		background: radial-gradient(ellipse at center, rgba(77, 142, 255, 0.08), transparent 60%);
		pointer-events: none;
	}

	.mega-menu-grid {
		display: grid;
		grid-template-columns: 1.3fr 1.4fr 1fr;
		gap: 2.5rem;
		padding-bottom: 1.4rem;
		margin-bottom: 1.4rem;
		border-bottom: 1px solid var(--border);
		position: relative;
		z-index: 1;
	}

	.mega-col-title {
		display: flex !important;
		align-items: center;
		gap: 0.6rem;
		font-size: 0.68rem !important;
		font-weight: 800;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--text) !important;
		margin: 0 0 0.85rem;
		padding: 0 0 0.7rem !important;
		border-bottom: 1px solid var(--border);
		transition: color 0.2s ease, border-color 0.2s ease;
		border-radius: 0;
	}

	a.mega-col-title:hover {
		color: var(--cyan) !important;
		border-bottom-color: rgba(0, 212, 255, 0.4);
		background: transparent !important;
	}

	.mega-col-title-spaced {
		margin-top: 1.4rem;
	}

	.mega-col-title-static {
		cursor: default;
	}

	.mega-col-name {
		flex-grow: 1;
	}

	.mega-col-arrow {
		font-size: 0.85rem;
		color: var(--cyan);
		opacity: 0;
		transform: translateX(-3px);
		transition: all 0.25s ease;
		font-weight: 400;
		letter-spacing: 0;
	}

	a.mega-col-title:hover .mega-col-arrow {
		opacity: 1;
		transform: translateX(0);
	}

	.mega-col-eyebrow {
		width: 24px;
		height: 24px;
		border-radius: 7px;
		background: var(--gradient-electric);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.62rem;
		color: white;
		font-weight: 800;
		letter-spacing: 0;
		font-family: var(--serif);
		font-style: italic;
		box-shadow: 0 4px 12px rgba(77, 142, 255, 0.3);
	}

	.mega-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
	}

	.mega-list a {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		padding: 0.55rem 0.7rem !important;
		margin: 0 -0.7rem;
		font-size: 0.84rem !important;
		color: var(--text-mute) !important;
		font-weight: 500;
		border-radius: 8px;
		transition: all 0.2s ease;
		line-height: 1.3;
	}

	.mega-link-text {
		display: block;
	}

	.mega-link-arrow {
		font-size: 0.78rem;
		color: var(--cyan);
		opacity: 0;
		transform: translateX(-4px);
		transition: all 0.25s ease;
		margin-left: 0.5rem;
		flex-shrink: 0;
	}

	.mega-list a:hover {
		background: rgba(77, 142, 255, 0.08) !important;
		color: var(--text) !important;
	}

	.mega-list a:hover .mega-link-arrow {
		opacity: 1;
		transform: translateX(0);
	}

	/* Featured strip */
	.mega-menu-featured {
		position: relative;
		z-index: 1;
	}

	.mega-featured-label {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.65rem;
		font-weight: 800;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--gold);
		margin-bottom: 0.9rem;
	}

	.mega-featured-dot {
		width: 7px;
		height: 7px;
		background: var(--gold);
		border-radius: 50%;
		box-shadow: 0 0 12px var(--gold);
		animation: pulse-dot 2s ease-in-out infinite;
	}

	@keyframes pulse-dot {

		0%,
		100% {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(1.4);
			opacity: 0.6;
		}
	}

	.mega-featured-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.7rem;
	}

	.mega-featured-card {
		display: flex !important;
		align-items: flex-start;
		gap: 0.75rem;
		padding: 0.85rem 0.9rem !important;
		background: var(--surface) !important;
		border: 1px solid var(--border);
		border-radius: 12px;
		transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
		color: var(--text) !important;
	}

	.mega-featured-card:hover {
		background: var(--surface-2) !important;
		border-color: rgba(77, 142, 255, 0.4);
		transform: translateY(-3px);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
	}

	.mega-featured-icon {
		width: 36px;
		height: 36px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		color: white;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.mega-featured-icon svg {
		width: 18px;
		height: 18px;
	}

	.mega-featured-text {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.mega-featured-name {
		font-size: 0.8rem !important;
		font-weight: 700 !important;
		color: var(--text);
		letter-spacing: -0.005em;
		line-height: 1.25;
	}

	.mega-featured-desc {
		font-size: 0.7rem !important;
		color: var(--text-mute);
		line-height: 1.35;
		font-weight: 500;
	}

	/* Light theme adjustments */
	[data-theme="light"] .mega-menu-inner {
		background: rgba(255, 255, 255, 0.97);
		border-color: rgba(10, 14, 26, 0.08);
		box-shadow: 0 30px 80px rgba(10, 14, 26, 0.15);
	}

	[data-theme="light"] .mega-featured-card {
		background: var(--surface) !important;
	}

	/* Mobile: hide mega menu, keep simple link behavior */
	@media (max-width: 1100px) {
		.mega-menu {
			display: none;
		}

		.nav-caret {
			display: none;
		}
	}

	.nav-cta {
		padding: 0.75rem 1.4rem;
		font-size: 0.88rem;
	}

	.mobile-toggle {
		display: none;
		width: 40px;
		height: 40px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
	}

	.mobile-toggle span {
		width: 22px;
		height: 1.5px;
		background: white;
	}

	/* ============================================
   HERO
   ============================================ */
	.hero {
		position: relative;
		min-height: 100vh;
		height: 100vh;
		padding: clamp(6rem, 12vh, 9rem) 0 clamp(3rem, 6vh, 5rem);
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	/* Animated gradient mesh background */
	.hero-bg {
		position: absolute;
		inset: 0;
		overflow: hidden;
		z-index: 0;
	}

	.orb {
		position: absolute;
		border-radius: 50%;
		filter: blur(100px);
		opacity: 0.55;
		animation: drift 20s ease-in-out infinite;
	}

	.orb-1 {
		width: 800px;
		height: 800px;
		background: var(--electric);
		top: -250px;
		left: -150px;
		animation-delay: 0s;
	}

	.orb-2 {
		width: 700px;
		height: 700px;
		background: var(--violet);
		top: 10%;
		right: -200px;
		animation-delay: -7s;
	}

	.orb-3 {
		width: 600px;
		height: 600px;
		background: var(--cyan);
		bottom: -150px;
		left: 35%;
		animation-delay: -14s;
		opacity: 0.35;
	}

	@keyframes drift {

		0%,
		100% {
			transform: translate(0, 0) scale(1);
		}

		33% {
			transform: translate(50px, -30px) scale(1.1);
		}

		66% {
			transform: translate(-30px, 40px) scale(0.95);
		}
	}

	/* Aurora line at top */
	.aurora-line {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--electric), var(--cyan), var(--violet), transparent);
		opacity: 0.8;
	}

	.hero-content {
		position: relative;
		z-index: 3;
		width: 100%;
	}

	.hero-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 4rem;
		align-items: center;
	}

	@media (min-width: 1000px) {
		.hero-grid {
			grid-template-columns: 1fr 1.1fr;
			gap: 5rem;
		}
	}

	.hero-badge {
		display: inline-flex;
		align-items: center;
		gap: 0.7rem;
		padding: 0.5rem 1rem 0.5rem 0.5rem;
		background: rgba(255, 255, 255, 0.04);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid var(--border);
		border-radius: 100px;
		margin-bottom: 2rem;
		font-size: 0.82rem;
		color: var(--text-mute);
	}

	.hero-badge-pill {
		background: var(--gradient-electric);
		color: white;
		font-weight: 700;
		font-size: 0.7rem;
		padding: 0.25rem 0.7rem;
		border-radius: 100px;
		letter-spacing: 0.08em;
	}

	.hero-headline {
		font-size: clamp(3rem, 10vw, 9rem);
		line-height: 0.92;
		letter-spacing: -0.045em;
		font-weight: 800;
		margin-bottom: 2rem;
	}

	.hero-headline .line {
		display: block;
		overflow: hidden;
	}

	.hero-headline .line-inner {
		display: block;
	}

	.hero-headline .italic {
		font-family: var(--serif);
		font-weight: 400;
		font-style: italic;
		letter-spacing: -0.02em;
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		display: inline-block;
	}

	.hero-sub {
		font-size: clamp(1.05rem, 1.5vw, 1.2rem);
		line-height: 1.55;
		color: var(--text-mute);
		max-width: 42ch;
		margin-bottom: 2.5rem;
	}

	.hero-ctas {
		display: flex;
		gap: 0.9rem;
		flex-wrap: wrap;
		margin-bottom: 3rem;
	}

	.hero-meta {
		display: flex;
		gap: 2.5rem;
		flex-wrap: wrap;
		padding-top: 2rem;
		border-top: 1px solid var(--border);
	}

	.hero-meta-item .num {
		font-family: var(--serif);
		font-size: 2.4rem;
		font-style: italic;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		line-height: 1;
		display: block;
		margin-bottom: 4px;
	}

	.hero-meta-item .label {
		font-size: 0.78rem;
		color: var(--text-dim);
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}

	/* Hero Visual — floating dashboard preview */
	.hero-visual {
		position: relative;
		width: 100%;
		aspect-ratio: 1 / 1.05;
		max-width: 820px;
		margin-left: auto;
		perspective: 1500px;
	}

	.hero-visual-inner {
		width: 100%;
		height: 100%;
		position: relative;
		animation: gentleFloat 8s ease-in-out infinite;
	}

	@keyframes gentleFloat {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-12px);
		}
	}

	/* ============================================
   HR TRANSFORMATION WHEEL
   ============================================ */
	.hr-wheel {
		position: relative;
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1;
	}

	.wheel-svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		filter: drop-shadow(0 0 30px rgba(77, 142, 255, 0.15));
	}

	.wheel-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 36%;
		height: 36%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		z-index: 5;
		padding: 0.5rem;
	}

	.wheel-eyebrow {
		font-size: clamp(0.55rem, 0.85vw, 0.68rem);
		letter-spacing: 0.25em;
		color: var(--cyan);
		font-weight: 700;
		margin-bottom: 0.6rem;
	}

	.wheel-title {
		font-family: var(--serif);
		font-style: italic;
		font-size: clamp(1.1rem, 2.4vw, 1.9rem);
		font-weight: 400;
		line-height: 1;
		letter-spacing: -0.02em;
		background: linear-gradient(135deg, #FFFFFF 0%, #4D8EFF 50%, #00D4FF 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-bottom: 0.75rem;
	}

	.wheel-divider {
		width: 32px;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--cyan), transparent);
		margin-bottom: 0.55rem;
	}

	.wheel-pill {
		font-size: clamp(0.55rem, 0.85vw, 0.68rem);
		font-weight: 600;
		letter-spacing: 0.15em;
		padding: 0.3rem 0.75rem;
		border: 1px solid var(--border-bright);
		border-radius: 100px;
		color: var(--text-mute);
		background: rgba(255, 255, 255, 0.03);
	}

	/* Inner ring labels — using rotation wrapper for guaranteed positioning */
	.ring-label {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 3;
		transform: rotate(calc(var(--angle) + 90deg));
	}

	.ring-label-inner {
		position: absolute;
		top: 24%;
		left: 50%;
		width: 110px;
		text-align: center;
		font-size: clamp(0.72rem, 1.1vw, 0.86rem);
		font-weight: 700;
		color: white;
		line-height: 1.18;
		letter-spacing: -0.005em;
		transform: translate(-50%, -50%) rotate(calc(-1 * var(--angle) - 90deg));
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	}

	.ring-label-inner strong {
		display: block;
		font-size: clamp(0.55rem, 0.82vw, 0.64rem);
		color: var(--cyan);
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		margin-bottom: 3px;
		opacity: 0.9;
	}

	/* Outer numbered stage nodes — rotation wrapper, with icons + per-stage colors */
	.wheel-node {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 4;
		transform: rotate(calc(var(--angle) + 90deg));
	}

	.wheel-node-inner {
		position: absolute;
		top: 2.5%;
		left: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		pointer-events: auto;
		cursor: pointer;
		transform: translateX(-50%) rotate(calc(-1 * var(--angle) - 90deg));
		transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.node-bubble {
		width: clamp(96px, 16vw, 132px);
		height: clamp(96px, 16vw, 132px);
		background: linear-gradient(135deg, rgba(26, 31, 61, 0.95) 0%, rgba(5, 8, 24, 0.95) 100%);
		border: 1.5px solid var(--color, var(--electric));
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color, var(--electric));
		position: relative;
		transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	}

	.node-bubble::before {
		content: "";
		position: absolute;
		inset: -10px;
		border-radius: 50%;
		background: var(--color, var(--electric));
		z-index: -1;
		opacity: 0.25;
		filter: blur(16px);
		transition: opacity 0.4s ease;
	}

	.node-icon {
		width: clamp(40px, 7vw, 56px);
		height: clamp(40px, 7vw, 56px);
	}

	.wheel-node-inner:hover .node-bubble {
		background: var(--color, var(--electric));
		color: white;
		transform: scale(1.15);
		box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6), 0 0 40px var(--color, var(--electric));
	}

	.wheel-node-inner:hover .node-bubble::before {
		opacity: 0.7;
	}

	.node-text {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		gap: 0.35rem;
		padding: 0.25rem 0.6rem;
		background: rgba(5, 8, 24, 0.7);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 100px;
		transition: all 0.3s ease;
	}

	.wheel-node-inner:hover .node-text {
		border-color: var(--color, var(--electric));
		background: rgba(5, 8, 24, 0.9);
	}

	.node-num {
		font-family: var(--serif);
		font-style: italic;
		font-size: clamp(0.7rem, 1vw, 0.78rem);
		color: var(--color, var(--electric));
		font-weight: 500;
		line-height: 1;
	}

	.node-name {
		font-size: clamp(0.72rem, 1.05vw, 0.8rem);
		font-weight: 700;
		color: white;
		letter-spacing: -0.005em;
		line-height: 1;
	}

	/* Sequential glow pulse — each node pulses in turn around the wheel */
	@keyframes wheelPulse {

		0%,
		100% {
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
		}

		50% {
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 32px var(--color, var(--electric));
		}
	}

	.wheel-node:nth-child(7) .node-bubble {
		animation: wheelPulse 7s ease-in-out infinite 0s;
	}

	.wheel-node:nth-child(8) .node-bubble {
		animation: wheelPulse 7s ease-in-out infinite 1s;
	}

	.wheel-node:nth-child(9) .node-bubble {
		animation: wheelPulse 7s ease-in-out infinite 2s;
	}

	.wheel-node:nth-child(10) .node-bubble {
		animation: wheelPulse 7s ease-in-out infinite 3s;
	}

	.wheel-node:nth-child(11) .node-bubble {
		animation: wheelPulse 7s ease-in-out infinite 4s;
	}

	.wheel-node:nth-child(12) .node-bubble {
		animation: wheelPulse 7s ease-in-out infinite 5s;
	}

	.wheel-node:nth-child(13) .node-bubble {
		animation: wheelPulse 7s ease-in-out infinite 6s;
	}

	.dash-card {
		position: absolute;
		background: linear-gradient(160deg, rgba(20, 24, 50, 0.9) 0%, rgba(12, 16, 36, 0.95) 100%);
		border: 1px solid var(--border-bright);
		border-radius: var(--radius-lg);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
		overflow: hidden;
	}

	.dash-card::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 1px;
		background: linear-gradient(135deg, rgba(77, 142, 255, 0.4), transparent 40%);
		-webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
		mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		pointer-events: none;
	}

	/* Main dashboard card */
	.dash-main {
		top: 0;
		left: 0;
		width: 78%;
		height: 75%;
		padding: 1.4rem;
	}

	.dash-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1.2rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid var(--border);
	}

	.dash-title {
		font-size: 0.7rem;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--cyan);
		font-weight: 600;
	}

	.dash-dots {
		display: flex;
		gap: 5px;
	}

	.dash-dots span {
		width: 7px;
		height: 7px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
	}

	.dash-greeting {
		font-family: var(--serif);
		font-size: 1.3rem;
		margin-bottom: 0.3rem;
	}

	.dash-greeting .italic {
		color: var(--electric);
	}

	.dash-sub {
		font-size: 0.72rem;
		color: var(--text-dim);
		margin-bottom: 1.2rem;
	}

	.dash-chart {
		height: 70px;
		background: linear-gradient(180deg, rgba(77, 142, 255, 0.15) 0%, transparent 100%);
		border-radius: 8px;
		margin-bottom: 1rem;
		position: relative;
		overflow: hidden;
	}

	.dash-chart svg {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.dash-stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.6rem;
	}

	.dash-stat {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid var(--border);
		border-radius: 10px;
		padding: 0.7rem;
	}

	.dash-stat-label {
		font-size: 0.65rem;
		color: var(--text-dim);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		margin-bottom: 4px;
	}

	.dash-stat-val {
		font-family: var(--serif);
		font-size: 1.2rem;
		font-style: italic;
	}

	.dash-stat-val.up {
		color: var(--emerald);
	}

	.dash-stat-val.electric {
		color: var(--cyan);
	}

	/* AI chat card overlay */
	.dash-chat {
		bottom: 0;
		right: 0;
		width: 62%;
		height: 38%;
		padding: 1.1rem;
		background: linear-gradient(160deg, rgba(168, 85, 247, 0.15) 0%, rgba(12, 16, 36, 0.95) 100%);
		border: 1px solid rgba(168, 85, 247, 0.3);
	}

	.dash-chat::before {
		display: none;
	}

	.chat-header {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		margin-bottom: 0.8rem;
	}

	.chat-avatar {
		width: 32px;
		height: 32px;
		background: var(--gradient-aurora);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--serif);
		font-style: italic;
		font-weight: 500;
		font-size: 0.9rem;
	}

	.chat-name {
		font-size: 0.78rem;
		font-weight: 600;
	}

	.chat-status {
		font-size: 0.65rem;
		color: var(--emerald);
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.chat-status::before {
		content: "";
		width: 6px;
		height: 6px;
		background: var(--emerald);
		border-radius: 50%;
		box-shadow: 0 0 8px var(--emerald);
	}

	.chat-msg {
		font-size: 0.75rem;
		color: var(--text-mute);
		line-height: 1.5;
		background: rgba(168, 85, 247, 0.08);
		padding: 0.6rem 0.8rem;
		border-radius: 10px;
		border-left: 2px solid var(--violet);
	}

	/* Floating stat badge */
	.dash-float {
		position: absolute;
		top: 18%;
		right: -8%;
		background: var(--surface);
		border: 1px solid var(--border-bright);
		border-radius: var(--radius);
		padding: 0.9rem 1.2rem;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 212, 255, 0.15);
		z-index: 10;
		animation: floatY 5s ease-in-out infinite;
	}

	@keyframes floatY {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10px);
		}
	}

	.dash-float-label {
		font-size: 0.65rem;
		color: var(--text-dim);
		text-transform: uppercase;
		letter-spacing: 0.1em;
		margin-bottom: 3px;
	}

	.dash-float-val {
		font-family: var(--serif);
		font-size: 1.6rem;
		font-style: italic;
		color: var(--cyan);
	}

	/* Scroll indicator */
	.scroll-hint {
		position: absolute;
		bottom: 2rem;
		left: 50%;
		transform: translateX(-50%);
		z-index: 5;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.6rem;
		font-size: 0.7rem;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--text-dim);
		animation: scrollBob 2s ease-in-out infinite;
	}

	.scroll-hint-line {
		width: 1px;
		height: 36px;
		background: linear-gradient(180deg, transparent, var(--cyan));
		position: relative;
		overflow: hidden;
	}

	.scroll-hint-line::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 50%;
		background: linear-gradient(180deg, transparent, white);
		animation: scrollLine 2s ease-in-out infinite;
	}

	@keyframes scrollLine {
		0% {
			transform: translateY(-100%);
		}

		100% {
			transform: translateY(200%);
		}
	}

	@keyframes scrollBob {

		0%,
		100% {
			transform: translateX(-50%) translateY(0);
		}

		50% {
			transform: translateX(-50%) translateY(-5px);
		}
	}

	@media (max-height: 700px) {
		.scroll-hint {
			display: none;
		}

		.hero {
			height: auto;
			min-height: 100vh;
		}
	}

	/* ============================================
   LOGO MARQUEE
   ============================================ */
	.marquee-section {
		padding: 3rem 0;
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		background: var(--bg-deep);
		position: relative;
		z-index: 2;
	}

	.marquee-label {
		text-align: center;
		font-size: 0.75rem;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--text-dim);
		margin-bottom: 2rem;
		font-weight: 500;
	}

	.marquee {
		display: flex;
		overflow: hidden;
		mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
		-webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
	}

	.marquee-track {
		display: flex;
		gap: 4rem;
		animation: scroll 35s linear infinite;
		flex-shrink: 0;
		padding-right: 4rem;
	}

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

	.marquee-item {
		font-family: var(--serif);
		font-size: 1.6rem;
		color: var(--text-dim);
		white-space: nowrap;
		display: flex;
		align-items: center;
		gap: 0.6rem;
		transition: color 0.3s;
		font-weight: 500;
		letter-spacing: -0.01em;
	}

	.marquee-item:hover {
		color: white;
	}

	.marquee-item .dot {
		width: 5px;
		height: 5px;
		background: var(--electric);
		border-radius: 50%;
		margin-right: 0.4rem;
	}

	/* ============================================
   SECTIONS
   ============================================ */
	.section {
		padding: clamp(5rem, 10vw, 8rem) 0;
		position: relative;
		z-index: 2;
	}

	.section-header {
		max-width: 900px;
		margin-bottom: 4.5rem;
	}

	.section-title {
		font-size: clamp(2.4rem, 6.5vw, 6rem);
		line-height: 1.02;
		letter-spacing: -0.04em;
		font-weight: 800;
		margin-top: 1.2rem;
	}

	.section-title .italic {
		font-family: var(--serif);
		font-weight: 400;
		font-style: italic;
		letter-spacing: -0.02em;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.section-intro {
		font-size: 1.1rem;
		color: var(--text-mute);
		line-height: 1.6;
		margin-top: 1.5rem;
		max-width: 60ch;
	}

	/* ============================================
   STATS BAND
   ============================================ */
	.stats-band {
		padding: clamp(4rem, 8vw, 6rem) 0;
		background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		position: relative;
		overflow: hidden;
	}

	.stats-band::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		height: 200%;
		background: radial-gradient(ellipse at center, rgba(77, 142, 255, 0.08) 0%, transparent 50%);
		pointer-events: none;
	}

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

	@media (min-width: 800px) {
		.stats-grid {
			grid-template-columns: repeat(4, 1fr);
			gap: 2rem;
		}
	}

	.stat-card {
		text-align: left;
		position: relative;
	}

	.stat-num {
		font-family: var(--serif);
		font-size: clamp(3.5rem, 9vw, 8rem);
		line-height: 1;
		font-weight: 400;
		letter-spacing: -0.04em;
		margin-bottom: 0.8rem;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		display: inline-block;
	}

	.stat-num.violet {
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.stat-num .small {
		font-size: 0.5em;
		font-style: normal;
	}

	.stat-label {
		font-size: 0.95rem;
		color: var(--text-mute);
		line-height: 1.5;
		max-width: 24ch;
		font-weight: 500;
	}

	/* ============================================
   SERVICES
   ============================================ */
	.services-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	@media (min-width: 800px) {
		.services-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1400px) {
		.services-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.service-card {
		position: relative;
		padding: 2.5rem;
		background: linear-gradient(160deg, var(--surface) 0%, var(--bg-deep) 100%);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		overflow: hidden;
		transition: all 0.4s ease;
		min-height: 360px;
		display: flex;
		flex-direction: column;
	}

	.service-card::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(77, 142, 255, 0.12) 0%, transparent 50%);
		opacity: 0;
		transition: opacity 0.4s ease;
		pointer-events: none;
	}

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

	.service-card:hover {
		border-color: rgba(77, 142, 255, 0.4);
		transform: translateY(-4px);
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(77, 142, 255, 0.1);
	}

	.service-num {
		font-family: var(--serif);
		font-size: 4rem;
		font-style: italic;
		line-height: 1;
		color: var(--text-dim);
		opacity: 0.3;
		position: absolute;
		top: 1.5rem;
		right: 2rem;
		transition: all 0.4s ease;
	}

	.service-card:hover .service-num {
		opacity: 0.6;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.service-icon-wrap {
		width: 64px;
		height: 64px;
		background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
		border: 1px solid var(--border-bright);
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 2rem;
		transition: all 0.4s ease;
		position: relative;
		z-index: 2;
	}

	.service-card:hover .service-icon-wrap {
		background: var(--gradient-electric);
		border-color: transparent;
		box-shadow: 0 0 30px rgba(77, 142, 255, 0.4);
	}

	.service-icon-wrap svg {
		width: 28px;
		height: 28px;
		stroke: white;
	}

	.service-title {
		font-size: 1.7rem;
		font-weight: 700;
		letter-spacing: -0.02em;
		margin-bottom: 0.8rem;
		line-height: 1.15;
		position: relative;
		z-index: 2;
	}

	.service-desc {
		font-size: 0.95rem;
		color: var(--text-mute);
		line-height: 1.6;
		margin-bottom: 1.8rem;
		flex-grow: 1;
		position: relative;
		z-index: 2;
	}

	.service-link {
		font-size: 0.88rem;
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--cyan);
		transition: gap 0.3s;
		position: relative;
		z-index: 2;
	}

	.service-card:hover .service-link {
		gap: 0.8rem;
	}

	/* Click affordance for the service cards */
	.service-card {
		cursor: pointer;
		user-select: none;
	}

	.service-card .service-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
	}

	.service-chev {
		display: inline-flex;
		width: 14px;
		height: 14px;
		transition: transform 0.35s ease;
	}

	.service-chev svg {
		width: 100%;
		height: 100%;
	}

	.service-card.is-active .service-chev {
		transform: rotate(180deg);
	}

	.service-card.is-active {
		border-color: rgba(168, 85, 247, 0.45);
		background: linear-gradient(160deg, rgba(168, 85, 247, 0.07) 0%, var(--bg-deep) 100%);
		box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.22), 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 40px rgba(168, 85, 247, 0.12);
	}

	.service-card.is-active .service-link {
		color: var(--violet);
	}

	.service-card:focus-visible {
		outline: 2px solid var(--cyan);
		outline-offset: 4px;
	}

	[data-theme="light"] .service-card.is-active {
		background: linear-gradient(160deg, rgba(168, 85, 247, 0.06) 0%, var(--surface) 100%);
	}

	/* HR Advisory sub-band — surfaces specializations under the four practices */
	.services-sub-container {
		position: relative;
	}

	.services-sub {
		display: none;
		margin-top: 3.5rem;
		padding-top: 2.5rem;
		border-top: 1px dashed var(--border);
		animation: subFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.services-sub.is-open {
		display: block;
	}

	@keyframes subFadeIn {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.services-sub-header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 0.6rem;
		margin-bottom: 1.8rem;
	}

	.services-sub-label {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 0.18em;
		color: var(--text-mute);
		font-weight: 700;
	}

	.services-sub-dot {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--violet);
		box-shadow: 0 0 8px var(--violet);
	}

	.services-sub-tagline {
		font-size: 0.82rem;
		color: var(--text-dim);
		font-style: italic;
		font-family: var(--font-serif);
	}

	.services-sub-grid {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 4px;
		scrollbar-width: thin;
		scrollbar-color: rgba(168, 85, 247, 0.35) transparent;
		-webkit-overflow-scrolling: touch;
		padding: 4px 4px 14px 4px;
		/* prevent vertical scrollbar appearance from tiles */
		align-items: stretch;
	}

	.services-sub-grid::-webkit-scrollbar {
		height: 6px;
	}

	.services-sub-grid::-webkit-scrollbar-track {
		background: transparent;
	}

	.services-sub-grid::-webkit-scrollbar-thumb {
		background: rgba(168, 85, 247, 0.35);
		border-radius: 100px;
	}

	.services-sub-grid::-webkit-scrollbar-thumb:hover {
		background: rgba(168, 85, 247, 0.55);
	}

	.services-sub-tile {
		flex: 1 0 260px;
		/* grow to fill, don't shrink, min 260px → scrolls when more than fit */
		min-width: 260px;
		scroll-snap-align: start;
		display: flex;
		align-items: flex-start;
		gap: 0.85rem;
		padding: 1.1rem 1.2rem;
		background: rgba(255, 255, 255, 0.025);
		border: 1px solid var(--border-bright);
		border-radius: 14px;
		transition: border-color 0.25s, transform 0.25s, background 0.25s;
	}

	.services-sub-tile:hover {
		border-color: rgba(168, 85, 247, 0.35);
		transform: translateY(-2px);
		background: rgba(168, 85, 247, 0.04);
	}

	.services-sub-num {
		flex-shrink: 0;
		width: 26px;
		height: 26px;
		border-radius: 8px;
		background: linear-gradient(135deg, rgba(77, 142, 255, 0.16), rgba(168, 85, 247, 0.16));
		border: 1px solid rgba(168, 85, 247, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-serif);
		font-style: italic;
		font-size: 0.82rem;
		color: var(--cyan);
		font-weight: 400;
		letter-spacing: 0;
	}

	.services-sub-tile h4 {
		font-size: 0.93rem;
		font-weight: 700;
		color: var(--text);
		margin-bottom: 0.3rem;
		line-height: 1.25;
	}

	.services-sub-tile p {
		font-size: 0.8rem;
		color: var(--text-mute);
		line-height: 1.5;
	}

	[data-theme="light"] .services-sub-tile {
		background: rgba(10, 14, 26, 0.025);
	}

	[data-theme="light"] .services-sub-tile:hover {
		background: rgba(168, 85, 247, 0.04);
	}

	/* ============================================
   PRODUCT FEATURE (BENEFITS REIMAGINED)
   ============================================ */
	.product {
		padding: clamp(5rem, 10vw, 9rem) 0;
		position: relative;
		overflow: hidden;
		background:
			radial-gradient(ellipse at 20% 30%, rgba(168, 85, 247, 0.12) 0%, transparent 50%),
			radial-gradient(ellipse at 80% 70%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
			var(--bg);
	}

	.product-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 4rem;
		align-items: center;
	}

	@media (min-width: 1000px) {
		.product-grid {
			grid-template-columns: 1fr 1.1fr;
			gap: 5rem;
		}
	}

	.product-title {
		font-size: clamp(2.4rem, 7vw, 6.5rem);
		line-height: 1;
		letter-spacing: -0.04em;
		font-weight: 800;
		margin: 1.2rem 0 1.8rem;
	}

	.product-title .italic {
		font-family: var(--serif);
		font-weight: 400;
		font-style: italic;
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.product-desc {
		color: var(--text-mute);
		font-size: 1.1rem;
		line-height: 1.6;
		margin-bottom: 2.5rem;
		max-width: 50ch;
	}

	.product-features {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		margin-bottom: 2.5rem;
		list-style: none;
	}

	.product-features li {
		font-size: 0.92rem;
		color: var(--text);
		display: flex;
		align-items: flex-start;
		gap: 0.7rem;
		padding: 0.7rem 0;
	}

	.feature-dot {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: rgba(0, 212, 255, 0.15);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-top: 1px;
	}

	.feature-dot svg {
		width: 12px;
		height: 12px;
		stroke: var(--cyan);
	}

	/* Detailed product mockup */
	.product-mockup {
		position: relative;
		width: 100%;
		perspective: 1500px;
	}

	.mockup-frame {
		background: linear-gradient(160deg, #161B36 0%, #0A0E22 100%);
		border: 1px solid var(--border-bright);
		border-radius: var(--radius-xl);
		padding: 1.2rem;
		box-shadow:
			0 40px 100px rgba(0, 0, 0, 0.5),
			0 0 80px rgba(77, 142, 255, 0.15),
			inset 0 1px 0 rgba(255, 255, 255, 0.06);
		position: relative;
		transform: rotateY(-4deg) rotateX(4deg);
		transition: transform 0.6s ease;
	}

	.mockup-frame:hover {
		transform: rotateY(-2deg) rotateX(2deg);
	}

	.mockup-topbar {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0 0.5rem 1rem;
		border-bottom: 1px solid var(--border);
		margin-bottom: 1.2rem;
	}

	.mockup-topbar .dot {
		width: 11px;
		height: 11px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.15);
	}

	.mockup-topbar .dot.r {
		background: #FF5F57;
	}

	.mockup-topbar .dot.y {
		background: #FEBC2E;
	}

	.mockup-topbar .dot.g {
		background: #28C840;
	}

	.mockup-url {
		flex: 1;
		background: rgba(255, 255, 255, 0.04);
		padding: 0.35rem 0.8rem;
		border-radius: 6px;
		font-size: 0.7rem;
		color: var(--text-dim);
		margin-left: 0.8rem;
		font-family: ui-monospace, monospace;
	}

	.mockup-url::before {
		content: "🔒 ";
	}

	.mockup-app {
		display: grid;
		grid-template-columns: 60px 1fr;
		gap: 1rem;
		min-height: 640px;
	}

	.mockup-sidebar {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 12px;
		padding: 0.8rem;
		display: flex;
		flex-direction: column;
		gap: 0.7rem;
		align-items: center;
	}

	.sidebar-logo {
		width: 36px;
		height: 36px;
		background: var(--gradient-electric);
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--serif);
		font-style: italic;
		font-weight: 500;
		margin-bottom: 0.5rem;
	}

	.sidebar-icon {
		width: 36px;
		height: 36px;
		border-radius: 9px;
		background: rgba(255, 255, 255, 0.04);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.95rem;
		transition: background 0.2s;
	}

	.sidebar-icon.active {
		background: rgba(77, 142, 255, 0.2);
		border: 1px solid rgba(77, 142, 255, 0.4);
	}

	.mockup-content {
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
	}

	.mockup-header-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.4rem;
	}

	.mockup-h1 {
		font-family: var(--serif);
		font-size: 1.4rem;
		font-weight: 400;
	}

	.mockup-h1 .italic {
		color: var(--cyan);
	}

	.mockup-pill {
		font-size: 0.65rem;
		background: rgba(16, 229, 160, 0.15);
		color: var(--emerald);
		padding: 0.3rem 0.7rem;
		border-radius: 100px;
		border: 1px solid rgba(16, 229, 160, 0.3);
		font-weight: 600;
		letter-spacing: 0.05em;
	}

	.mockup-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.7rem;
	}

	.mockup-card-sm {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid var(--border);
		border-radius: 10px;
		padding: 0.8rem;
		position: relative;
		overflow: hidden;
	}

	.mockup-card-sm::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 60px;
		height: 60px;
		background: radial-gradient(circle, rgba(77, 142, 255, 0.2) 0%, transparent 70%);
	}

	.card-icon-sm {
		width: 24px;
		height: 24px;
		border-radius: 6px;
		background: var(--gradient-electric);
		margin-bottom: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.7rem;
	}

	.mockup-card-sm:nth-child(2) .card-icon-sm {
		background: linear-gradient(135deg, #A855F7, #EC4899);
	}

	.mockup-card-sm:nth-child(3) .card-icon-sm {
		background: linear-gradient(135deg, #10E5A0, #00D4FF);
	}

	.mockup-card-sm:nth-child(4) .card-icon-sm {
		background: linear-gradient(135deg, #FFB800, #EC4899);
	}

	.card-label-sm {
		font-size: 0.68rem;
		color: var(--text-dim);
		margin-bottom: 2px;
	}

	.card-val-sm {
		font-family: var(--serif);
		font-size: 1.05rem;
		font-style: italic;
	}

	.mockup-chart-block {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid var(--border);
		border-radius: 10px;
		padding: 0.9rem;
	}

	.chart-block-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.6rem;
	}

	.chart-block-title {
		font-size: 0.78rem;
		font-weight: 600;
	}

	.chart-block-val {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1rem;
		color: var(--cyan);
	}

	.chart-block svg {
		width: 100%;
		height: 50px;
	}

	.mockup-ai-block {
		background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(77, 142, 255, 0.05) 100%);
		border: 1px solid rgba(168, 85, 247, 0.3);
		border-radius: 10px;
		padding: 0.9rem;
		display: flex;
		gap: 0.7rem;
		align-items: flex-start;
	}

	.ai-avatar {
		width: 30px;
		height: 30px;
		background: var(--gradient-aurora);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--serif);
		font-style: italic;
		font-size: 0.85rem;
		flex-shrink: 0;
	}

	.ai-content {
		flex: 1;
	}

	.ai-name {
		font-size: 0.72rem;
		font-weight: 600;
		color: var(--violet);
		margin-bottom: 3px;
	}

	.ai-msg {
		font-size: 0.72rem;
		color: var(--text-mute);
		line-height: 1.4;
	}

	.ai-msg strong {
		color: white;
		font-weight: 700;
	}

	/* ============================================
   NEW MOCKUP — IntelliSuggest dashboard
   ============================================ */
	.mockup-content {
		display: flex;
		flex-direction: column;
		gap: 0.7rem;
	}

	.mock-eyebrow {
		font-size: 0.6rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--cyan);
		font-weight: 700;
		margin-bottom: 4px;
	}

	/* IntelliSuggest hero card */
	.mock-suggest-card {
		background: linear-gradient(135deg, rgba(77, 142, 255, 0.07) 0%, rgba(168, 85, 247, 0.04) 100%);
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 0.85rem 0.9rem;
		position: relative;
		overflow: hidden;
	}

	.mock-suggest-card::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 140px;
		height: 140px;
		background: radial-gradient(circle, rgba(168, 85, 247, 0.18) 0%, transparent 60%);
		pointer-events: none;
	}

	.mock-suggest-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 0.6rem;
		margin-bottom: 0.7rem;
		padding-bottom: 0.6rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		position: relative;
		z-index: 1;
	}

	.mock-suggest-title {
		font-family: var(--serif);
		font-size: 0.95rem;
		color: white;
		font-weight: 400;
		line-height: 1.1;
		letter-spacing: -0.01em;
	}

	.mock-suggest-title .italic {
		color: var(--cyan);
		font-style: italic;
	}

	.mock-profile-chips {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		align-items: flex-end;
	}

	.mock-chip {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.08);
		padding: 0.2rem 0.5rem;
		border-radius: 100px;
		font-size: 0.62rem;
		color: var(--text-mute);
		font-weight: 500;
		white-space: nowrap;
	}

	.chip-icon {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.55rem;
		color: white;
	}

	.mock-suggest-list {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		position: relative;
		z-index: 1;
	}

	.mock-suggest-row {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.5rem 0.6rem;
		background: rgba(255, 255, 255, 0.025);
		border: 1px solid rgba(255, 255, 255, 0.06);
		border-radius: 8px;
		transition: all 0.2s ease;
	}

	.mock-suggest-row:hover {
		background: rgba(255, 255, 255, 0.05);
		border-color: rgba(77, 142, 255, 0.3);
	}

	.mock-suggest-icon {
		width: 26px;
		height: 26px;
		border-radius: 7px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.8rem;
		color: white;
		font-weight: 700;
		flex-shrink: 0;
	}

	.mock-suggest-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 1px;
		min-width: 0;
	}

	.mock-suggest-info strong {
		font-size: 0.74rem;
		color: white;
		font-weight: 600;
		letter-spacing: -0.005em;
	}

	.mock-suggest-info span {
		font-size: 0.62rem;
		color: var(--text-dim);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mock-match {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 3px;
		flex-shrink: 0;
	}

	.match-bar {
		width: 50px;
		height: 4px;
		background: rgba(255, 255, 255, 0.08);
		border-radius: 100px;
		overflow: hidden;
		display: block;
	}

	.match-fill {
		display: block;
		height: 100%;
		border-radius: 100px;
	}

	.mock-match.best .match-fill {
		background: linear-gradient(90deg, #10E5A0, #00D4FF);
		box-shadow: 0 0 8px rgba(16, 229, 160, 0.5);
	}

	.mock-match.good .match-fill {
		background: linear-gradient(90deg, #4D8EFF, #00D4FF);
	}

	.mock-match.ok .match-fill {
		background: linear-gradient(90deg, #FFB800, #EC4899);
	}

	.match-pct {
		font-size: 0.7rem;
		font-weight: 800;
		letter-spacing: -0.01em;
		font-family: var(--serif);
		font-style: italic;
	}

	.mock-match.best .match-pct {
		color: #10E5A0;
	}

	.mock-match.good .match-pct {
		color: var(--cyan);
	}

	.mock-match.ok .match-pct {
		color: var(--gold);
	}

	/* Progress row */
	.mock-progress-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.55rem;
	}

	.mock-progress-card {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(255, 255, 255, 0.06);
		border-radius: 10px;
		padding: 0.65rem 0.75rem;
	}

	.mock-progress-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.55rem;
	}

	.mock-progress-title {
		font-size: 0.72rem;
		color: white;
		font-weight: 600;
	}

	.mock-pill-sm {
		font-size: 0.55rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		padding: 0.18rem 0.45rem;
		border-radius: 100px;
	}

	.mock-pill-sm.new {
		background: rgba(168, 85, 247, 0.15);
		color: var(--violet);
		border: 1px solid rgba(168, 85, 247, 0.3);
	}

	.mock-pill-sm.available {
		background: rgba(16, 229, 160, 0.15);
		color: var(--emerald);
		border: 1px solid rgba(16, 229, 160, 0.3);
	}

	.mock-bar {
		height: 5px;
		background: rgba(255, 255, 255, 0.06);
		border-radius: 100px;
		margin-bottom: 0.45rem;
		overflow: hidden;
	}

	.mock-bar-fill {
		height: 100%;
		background: linear-gradient(90deg, #4D8EFF, #A855F7);
		border-radius: 100px;
		box-shadow: 0 0 8px rgba(77, 142, 255, 0.5);
	}

	.mock-bar-fill.cyan {
		background: linear-gradient(90deg, #00D4FF, #10E5A0);
		box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
	}

	.mock-progress-meta {
		font-size: 0.62rem;
		color: var(--text-dim);
	}

	.mock-progress-meta strong {
		color: white;
		font-weight: 600;
	}

	/* ============================================
   NEW MOCKUP — Stats row (Documents + Tickets)
   ============================================ */
	.mock-stats-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.55rem;
	}

	.mock-stat-card {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid rgba(255, 255, 255, 0.06);
		border-radius: 10px;
		padding: 0.7rem 0.75rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.mock-stat-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mock-stat-label {
		font-size: 0.7rem;
		color: white;
		font-weight: 600;
	}

	.mock-stat-trend {
		font-size: 0.55rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		padding: 0.15rem 0.45rem;
		border-radius: 100px;
		background: rgba(255, 255, 255, 0.06);
		color: var(--text-mute);
	}

	.mock-stat-trend.up {
		background: rgba(16, 229, 160, 0.15);
		color: var(--emerald);
	}

	.mock-stat-body {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 0.6rem;
	}

	.mock-stat-num {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.5rem;
		color: white;
		line-height: 1;
		font-weight: 400;
	}

	.mock-stat-sub {
		font-size: 0.58rem;
		color: var(--text-dim);
		margin-top: 2px;
		margin-bottom: 6px;
	}

	.mock-legend {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.mock-legend span {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 0.55rem;
		color: var(--text-mute);
	}

	.mock-legend i {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
	}

	/* Donut chart */
	.mock-donut {
		width: 70px;
		height: 70px;
		flex-shrink: 0;
		filter: drop-shadow(0 0 8px rgba(77, 142, 255, 0.2));
	}

	/* Horizontal bar chart */
	.mock-bars {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.mock-bar-h-row {
		display: grid;
		grid-template-columns: 50px 1fr 28px;
		align-items: center;
		gap: 0.4rem;
		font-size: 0.58rem;
	}

	.mock-bar-h-label {
		color: var(--text-dim);
		font-weight: 500;
		white-space: nowrap;
	}

	.mock-bar-h-track {
		height: 5px;
		background: rgba(255, 255, 255, 0.06);
		border-radius: 100px;
		overflow: hidden;
	}

	.mock-bar-h-fill {
		height: 100%;
		border-radius: 100px;
	}

	.mock-bar-h-val {
		color: white;
		font-weight: 600;
		font-family: var(--serif);
		font-style: italic;
		font-size: 0.65rem;
		text-align: right;
	}

	/* ============================================
   NEW MOCKUP — Athena rich chatbot
   ============================================ */
	.mock-chat-block {
		background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(77, 142, 255, 0.05) 100%);
		border: 1px solid rgba(168, 85, 247, 0.3);
		border-radius: 12px;
		padding: 0.75rem;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
		position: relative;
		overflow: hidden;
	}

	.mock-chat-block::before {
		content: "";
		position: absolute;
		top: -20px;
		right: -20px;
		width: 100px;
		height: 100px;
		background: radial-gradient(circle, rgba(168, 85, 247, 0.25), transparent 60%);
		pointer-events: none;
	}

	.mock-chat-head {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding-bottom: 0.55rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		position: relative;
		z-index: 1;
	}

	.mock-chat-meta {
		flex: 1;
	}

	.mock-chat-meta .ai-name {
		color: var(--violet);
		margin-bottom: 2px;
	}

	.mock-chat-status {
		font-size: 0.58rem;
		color: var(--text-dim);
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.pulse-dot {
		width: 6px;
		height: 6px;
		background: var(--emerald);
		border-radius: 50%;
		box-shadow: 0 0 8px var(--emerald);
		animation: chatPulse 1.8s ease-in-out infinite;
	}

	@keyframes chatPulse {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.4;
		}
	}

	.mock-chat-reactions {
		display: flex;
		gap: 4px;
	}

	.mock-chat-reactions span {
		width: 22px;
		height: 22px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.6rem;
	}

	.mock-chat-thread {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		position: relative;
		z-index: 1;
	}

	.mock-msg {
		font-size: 0.68rem;
		line-height: 1.45;
		padding: 0.55rem 0.7rem;
		border-radius: 12px;
		max-width: 88%;
	}

	.mock-msg.user {
		background: linear-gradient(135deg, #4D8EFF, #00D4FF);
		color: white;
		font-weight: 500;
		align-self: flex-end;
		border-bottom-right-radius: 4px;
	}

	.mock-msg.bot {
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(168, 85, 247, 0.25);
		color: var(--text);
		align-self: flex-start;
		border-bottom-left-radius: 4px;
	}

	.mock-msg.bot strong {
		color: var(--cyan);
		font-weight: 700;
	}

	.mock-msg-chips {
		display: flex;
		gap: 4px;
		margin-top: 6px;
		flex-wrap: wrap;
	}

	.mock-msg-chips button {
		font-size: 0.58rem;
		font-weight: 600;
		padding: 3px 8px;
		background: rgba(168, 85, 247, 0.15);
		border: 1px solid rgba(168, 85, 247, 0.35);
		border-radius: 100px;
		color: var(--violet);
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.mock-msg-chips button:hover {
		background: rgba(168, 85, 247, 0.25);
	}

	.mock-chat-input {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.4rem 0.4rem 0.4rem 0.7rem;
		background: rgba(0, 0, 0, 0.25);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 100px;
		position: relative;
		z-index: 1;
	}

	.mock-chat-placeholder {
		flex: 1;
		font-size: 0.65rem;
		color: var(--text-dim);
	}

	.mock-chat-send {
		width: 24px;
		height: 24px;
		background: linear-gradient(135deg, #A855F7, #EC4899);
		border: none;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color: white;
		flex-shrink: 0;
		box-shadow: 0 2px 10px rgba(168, 85, 247, 0.4);
	}

	.mock-chat-send svg {
		width: 12px;
		height: 12px;
	}

	/* ============================================ */

	/* Floating tags */
	.product-float {
		position: absolute;
		background: var(--surface);
		border: 1px solid var(--border-bright);
		border-radius: 12px;
		padding: 0.7rem 1rem;
		font-size: 0.78rem;
		color: white;
		font-weight: 500;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
		z-index: 5;
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.product-float-1 {
		top: -10px;
		left: -20px;
		animation: floatY 6s ease-in-out infinite;
	}

	.product-float-2 {
		bottom: 30px;
		right: -30px;
		animation: floatY 7s ease-in-out infinite;
		animation-delay: -2s;
	}

	.product-float .icon {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: var(--gradient-electric);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.65rem;
	}

	.product-float-2 .icon {
		background: var(--gradient-aurora);
	}

	/* ============================================
   METHODOLOGY (Horizontal Timeline)
   ============================================ */
	.methodology {
		position: relative;
		background: var(--bg-deep);
	}

	.method-track {
		position: relative;
		margin-top: 2rem;
	}

	.method-line {
		position: absolute;
		top: 30px;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, var(--electric), var(--cyan), var(--violet));
		opacity: 0.3;
		display: none;
	}

	@media (min-width: 900px) {
		.method-line {
			display: block;
		}
	}

	.method-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
		position: relative;
	}

	@media (min-width: 900px) {
		.method-grid {
			grid-template-columns: repeat(5, 1fr);
		}
	}

	.method-step {
		position: relative;
		padding: 0 0.5rem;
	}

	.method-dot {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: var(--surface);
		border: 2px solid var(--border-bright);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1.5rem;
		font-family: var(--serif);
		font-size: 1.4rem;
		font-style: italic;
		font-weight: 500;
		position: relative;
		z-index: 2;
		transition: all 0.3s;
	}

	.method-step:hover .method-dot {
		background: var(--gradient-electric);
		border-color: transparent;
		box-shadow: 0 0 30px rgba(77, 142, 255, 0.5);
		transform: scale(1.1);
	}

	.method-step:nth-child(2):hover .method-dot {
		background: linear-gradient(135deg, var(--electric), var(--cyan));
	}

	.method-step:nth-child(3):hover .method-dot {
		background: linear-gradient(135deg, var(--cyan), var(--violet));
	}

	.method-step:nth-child(4):hover .method-dot {
		background: linear-gradient(135deg, var(--violet), var(--magenta));
	}

	.method-step:nth-child(5):hover .method-dot {
		background: linear-gradient(135deg, var(--magenta), var(--gold));
	}

	.method-step-title {
		font-size: 1.3rem;
		font-weight: 700;
		letter-spacing: -0.02em;
		margin-bottom: 0.5rem;
	}

	.method-step-desc {
		font-size: 0.88rem;
		color: var(--text-mute);
		line-height: 1.55;
	}

	/* ============================================
   TESTIMONIALS
   ============================================ */
	.testimonials {
		background: var(--bg);
	}

	.testimonial-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	@media (min-width: 800px) {
		.testimonial-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1100px) {
		.testimonial-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.testimonial-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--bg-deep) 100%);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		padding: 2.2rem;
		transition: all 0.4s ease;
		display: flex;
		flex-direction: column;
	}

	.testimonial-card:hover {
		border-color: var(--border-bright);
		transform: translateY(-4px);
	}

	.testimonial-card.featured {
		background: linear-gradient(160deg, rgba(77, 142, 255, 0.12) 0%, var(--bg-deep) 100%);
		border-color: rgba(77, 142, 255, 0.3);
	}

	.t-quote-mark {
		font-family: var(--serif);
		font-size: 4rem;
		line-height: 0.5;
		color: var(--electric);
		margin-bottom: 1rem;
		font-style: italic;
	}

	.t-quote {
		font-family: var(--serif);
		font-size: 1.25rem;
		line-height: 1.45;
		margin-bottom: 1.8rem;
		flex-grow: 1;
		letter-spacing: -0.01em;
	}

	.t-author {
		display: flex;
		align-items: center;
		gap: 0.9rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--border);
	}

	.t-avatar {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--gradient-electric);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--serif);
		font-style: italic;
		font-weight: 500;
		font-size: 1.1rem;
	}

	.testimonial-card:nth-child(2) .t-avatar {
		background: linear-gradient(135deg, var(--violet), var(--magenta));
	}

	.testimonial-card:nth-child(3) .t-avatar {
		background: linear-gradient(135deg, var(--emerald), var(--cyan));
	}

	.t-name {
		font-size: 0.92rem;
		font-weight: 600;
	}

	.t-role {
		font-size: 0.78rem;
		color: var(--text-dim);
	}

	/* ============================================
   CTA SECTION
   ============================================ */
	.cta-section {
		padding: clamp(4rem, 9vw, 7rem) 0;
		position: relative;
		overflow: hidden;
	}

	.cta-inner {
		background: linear-gradient(160deg, var(--surface) 0%, var(--bg-deep) 100%);
		border: 1px solid var(--border-bright);
		border-radius: var(--radius-xl);
		padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem);
		text-align: center;
		position: relative;
		overflow: hidden;
	}

	.cta-inner::before {
		content: "";
		position: absolute;
		top: -50%;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		height: 200%;
		background:
			radial-gradient(circle at 30% 30%, rgba(77, 142, 255, 0.2) 0%, transparent 40%),
			radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.2) 0%, transparent 40%);
		pointer-events: none;
	}

	.cta-inner::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
		background-size: 40px 40px;
		pointer-events: none;
	}

	.cta-content {
		position: relative;
		z-index: 2;
	}

	.cta-title {
		font-size: clamp(2.6rem, 8vw, 7rem);
		line-height: 1;
		letter-spacing: -0.045em;
		font-weight: 800;
		margin: 1.2rem 0 1.5rem;
	}

	.cta-title .italic {
		font-family: var(--serif);
		font-weight: 400;
		font-style: italic;
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.cta-sub {
		font-size: 1.15rem;
		color: var(--text-mute);
		max-width: 56ch;
		margin: 0 auto 2.5rem;
		line-height: 1.55;
	}

	.cta-buttons {
		display: inline-flex;
		gap: 0.9rem;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* ============================================
   FOOTER
   ============================================ */
	.footer {
		background: var(--bg-deep);
		border-top: 1px solid var(--border);
		padding: 0;
		position: relative;
		z-index: 2;
		overflow: hidden;
	}

	/* Thin gradient accent line at the very top of the footer */
	.footer::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: linear-gradient(90deg,
				transparent 0%,
				rgba(77, 142, 255, 0.4) 20%,
				rgba(0, 212, 255, 0.6) 50%,
				rgba(168, 85, 247, 0.4) 80%,
				transparent 100%);
		z-index: 2;
	}

	/* Ambient background — soft radial glows + faint dot grid */
	.footer-bg {
		position: absolute;
		inset: 0;
		pointer-events: none;
		background:
			radial-gradient(ellipse 60% 50% at 15% 10%, rgba(77, 142, 255, 0.08) 0%, transparent 60%),
			radial-gradient(ellipse 60% 60% at 85% 60%, rgba(168, 85, 247, 0.05) 0%, transparent 65%);
	}

	.footer-bg::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
		background-size: 32px 32px;
		mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
		-webkit-mask-image: linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
	}

	.footer .container {
		position: relative;
		z-index: 1;
	}

	/* Featured CTA card (top of footer) */
	.footer-cta {
		background:
			linear-gradient(135deg,
				rgba(77, 142, 255, 0.07) 0%,
				rgba(0, 212, 255, 0.05) 50%,
				rgba(168, 85, 247, 0.05) 100%);
		border: 1px solid var(--border-bright);
		border-radius: 24px;
		padding: 2.5rem;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 2rem;
		margin-top: 3.5rem;
		margin-bottom: 3.5rem;
		position: relative;
		overflow: hidden;
	}

	.footer-cta::before {
		content: "";
		position: absolute;
		top: 0;
		left: 5%;
		right: 5%;
		height: 1px;
		background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.45), transparent);
	}

	.footer-cta-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		font-size: 0.7rem;
		text-transform: uppercase;
		letter-spacing: 0.18em;
		color: var(--cyan);
		font-weight: 700;
		margin-bottom: 0.9rem;
	}

	.footer-cta-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--cyan);
		box-shadow: 0 0 10px var(--cyan);
		animation: pulse 2s ease-in-out infinite;
	}

	.footer-cta-title {
		font-size: 1.85rem;
		line-height: 1.15;
		letter-spacing: -0.01em;
		margin-bottom: 0.7rem;
		color: var(--text);
		font-weight: 700;
	}

	.footer-cta-title .italic {
		font-family: var(--font-serif);
		font-style: italic;
		font-weight: 400;
		background: linear-gradient(135deg, var(--electric), var(--cyan));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.footer-cta-sub {
		font-size: 0.95rem;
		color: var(--text-mute);
		line-height: 1.55;
		max-width: 540px;
	}

	.footer-cta-actions {
		display: flex;
		flex-direction: column;
		gap: 0.7rem;
		align-items: flex-end;
	}

	@media (max-width: 900px) {
		.footer-cta {
			grid-template-columns: 1fr;
			gap: 1.6rem;
			padding: 2rem;
		}

		.footer-cta-actions {
			flex-direction: row;
			align-items: stretch;
			flex-wrap: wrap;
		}

		.footer-cta-title {
			font-size: 1.5rem;
		}
	}

	/* Main link grid */
	.footer-top {
		display: grid;
		grid-template-columns: 1fr;
		gap: 3rem;
		padding-bottom: 3rem;
	}

	@media (min-width: 700px) {
		.footer-top {
			grid-template-columns: 2fr 1fr 1fr 1fr;
			gap: 2.5rem;
		}
	}

	.footer-brand {
		max-width: 360px;
	}

	.footer-brand .logo {
		margin-bottom: 1.2rem;
	}

	.footer-tag {
		font-size: 0.92rem;
		color: var(--text-mute);
		line-height: 1.6;
		margin-bottom: 1.4rem;
	}

	/* Trust badges */
	.footer-badges {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin-bottom: 1.6rem;
	}

	.footer-badge {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.4rem 0.85rem;
		font-size: 0.68rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--text);
		background: rgba(255, 255, 255, 0.035);
		border: 1px solid var(--border-bright);
		border-radius: 100px;
	}

	.footer-badge-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--cyan);
		box-shadow: 0 0 8px var(--cyan);
	}

	.footer-badge-dot-violet {
		background: var(--violet);
		box-shadow: 0 0 8px var(--violet);
	}

	.footer-badge-sap {
		display: inline-flex;
		align-items: center;
		padding: 0.45rem 1rem;
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #ffffff;
		text-decoration: none;
		background: linear-gradient(180deg, #2d8df3 0%, #0b4eb8 100%);
		border-radius: 100px;
		border: 1px solid rgba(255, 255, 255, 0.28);
		box-shadow:
			0 0 14px rgba(45, 141, 243, 0.42),
			0 2px 6px rgba(0, 0, 0, 0.32),
			inset 0 1px 0 rgba(255, 255, 255, 0.22);
		transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
	}

	.footer-badge-sap:hover {
		transform: translateY(-1px);
		filter: brightness(1.08);
		box-shadow:
			0 0 18px rgba(45, 141, 243, 0.6),
			0 4px 10px rgba(0, 0, 0, 0.38),
			inset 0 1px 0 rgba(255, 255, 255, 0.28);
	}

	[data-theme="light"] .footer-badge-sap {
		box-shadow:
			0 0 10px rgba(45, 141, 243, 0.28),
			0 2px 4px rgba(0, 0, 0, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.25);
	}

	/* Newsletter — pill with leading icon + focus glow */
	.footer-newsletter {
		display: flex;
		align-items: center;
		gap: 0;
		border: 1px solid var(--border-bright);
		border-radius: 100px;
		padding: 4px 4px 4px 14px;
		max-width: 340px;
		background: var(--surface);
		transition: border-color 0.2s, box-shadow 0.2s;
	}

	.footer-newsletter:focus-within {
		border-color: rgba(0, 212, 255, 0.45);
		box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.08);
	}

	.footer-newsletter-icon {
		width: 16px;
		height: 16px;
		color: var(--text-dim);
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
	}

	.footer-newsletter-icon svg {
		width: 100%;
		height: 100%;
	}

	.footer-newsletter input {
		flex: 1;
		background: transparent;
		border: none;
		outline: none;
		color: white;
		padding: 0.55rem 0.7rem;
		font-family: inherit;
		font-size: 0.85rem;
		min-width: 0;
	}

	.footer-newsletter input::placeholder {
		color: var(--text-dim);
	}

	.footer-newsletter button {
		background: var(--gradient-electric);
		color: white;
		border: none;
		padding: 0.55rem 1.2rem;
		border-radius: 100px;
		font-weight: 600;
		font-size: 0.82rem;
		cursor: pointer;
		font-family: inherit;
		white-space: nowrap;
		transition: transform 0.2s, box-shadow 0.2s;
	}

	.footer-newsletter button:hover {
		transform: translateY(-1px);
		box-shadow: 0 6px 20px rgba(0, 212, 255, 0.25);
	}

	/* Column titles with leading dot */
	.footer-col-title {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.68rem;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--cyan);
		margin-bottom: 1.4rem;
		font-weight: 700;
	}

	.footer-col-dot {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--cyan);
		box-shadow: 0 0 8px var(--cyan);
	}

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

	.footer-col a {
		position: relative;
		color: var(--text-mute);
		font-size: 0.92rem;
		transition: color 0.2s, padding-left 0.2s;
		display: inline-block;
	}

	.footer-col a::before {
		content: "→";
		position: absolute;
		left: 0;
		opacity: 0;
		color: var(--cyan);
		transition: opacity 0.2s, transform 0.2s;
		transform: translateX(-8px);
	}

	.footer-col a:hover {
		color: var(--text);
		padding-left: 18px;
	}

	.footer-col a:hover::before {
		opacity: 1;
		transform: translateX(0);
	}

	/* Bottom bar */
	.footer-bottom {
		border-top: 1px solid var(--border);
		padding: 1.8rem 0 2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 1.4rem;
	}

	.footer-bottom-left {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1.4rem;
		font-size: 0.82rem;
		color: var(--text-dim);
	}

	.footer-copyright {
		font-weight: 500;
	}

	.footer-legal {
		display: flex;
		align-items: center;
		gap: 0.7rem;
	}

	.footer-legal a {
		color: var(--text-dim);
		transition: color 0.2s;
	}

	.footer-legal a:hover {
		color: var(--text);
	}

	.footer-legal-sep {
		color: var(--text-dim);
		opacity: 0.5;
	}

	/* Social pills — glass squares with gradient hover */
	.footer-social {
		display: flex;
		gap: 0.55rem;
	}

	.footer-social a {
		position: relative;
		width: 40px;
		height: 40px;
		border-radius: 12px;
		border: 1px solid var(--border-bright);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;
		color: var(--text-mute);
		background: rgba(255, 255, 255, 0.025);
		overflow: hidden;
	}

	.footer-social a::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, var(--electric), var(--cyan));
		opacity: 0;
		transition: opacity 0.3s;
	}

	.footer-social a:hover {
		border-color: transparent;
		color: white;
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(0, 212, 255, 0.25);
	}

	.footer-social a:hover::before {
		opacity: 1;
	}

	.footer-social svg {
		width: 17px;
		height: 17px;
		position: relative;
		z-index: 1;
	}

	/* Light theme overrides */
	[data-theme="light"] .footer {
		background: var(--surface);
	}

	[data-theme="light"] .footer-cta {
		background: linear-gradient(135deg,
				rgba(77, 142, 255, 0.06) 0%,
				rgba(0, 212, 255, 0.04) 50%,
				rgba(168, 85, 247, 0.04) 100%);
	}

	[data-theme="light"] .footer-badge {
		background: rgba(10, 14, 26, 0.03);
	}

	[data-theme="light"] .footer-newsletter {
		background: white;
	}

	[data-theme="light"] .footer-newsletter input {
		color: var(--text);
	}

	[data-theme="light"] .footer-social a {
		background: rgba(10, 14, 26, 0.02);
	}

	[data-theme="light"] .footer-bg::after {
		background-image: radial-gradient(circle at 1px 1px, rgba(10, 14, 26, 0.04) 1px, transparent 1px);
	}

	/* ============================================
   THEME TOGGLE
   ============================================ */
	.theme-toggle {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border: 1px solid var(--border-bright);
		background: rgba(255, 255, 255, 0.04);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--text);
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		margin-left: 0.5rem;
	}

	.theme-toggle:hover {
		border-color: var(--cyan);
		box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
		transform: translateY(-1px);
	}

	.theme-toggle svg {
		width: 17px;
		height: 17px;
		position: absolute;
		transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.theme-toggle .icon-sun {
		opacity: 0;
		transform: rotate(-90deg) scale(0.3);
	}

	.theme-toggle .icon-moon {
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}

	[data-theme="light"] .theme-toggle .icon-sun {
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}

	[data-theme="light"] .theme-toggle .icon-moon {
		opacity: 0;
		transform: rotate(90deg) scale(0.3);
	}

	[data-theme="light"] .theme-toggle {
		background: rgba(10, 14, 26, 0.04);
	}

	/* ============================================
   THEME TRANSITIONS — smooth toggle between modes
   ============================================ */
	body,
	.nav-wrap,
	.service-card,
	.testimonial-card,
	.method-step,
	.method-dot,
	.product,
	.methodology,
	.testimonials,
	.cta-inner,
	.stats-band,
	.marquee-section,
	.btn-glass,
	.hero-badge,
	.hero-meta,
	.footer-newsletter,
	.node-bubble,
	.node-text,
	.theme-toggle,
	.ring-label-inner,
	.wheel-center,
	.dash-float,
	.service-card *,
	.stat-card *,
	.testimonial-card *,
	.method-step *,
	.product *,
	.footer * {
		transition:
			background-color 0.45s ease,
			color 0.45s ease,
			border-color 0.45s ease,
			box-shadow 0.45s ease;
	}

	/* ============================================
   LIGHT THEME — element-specific overrides
   ============================================ */
	[data-theme="light"] body::before {
		background-image:
			linear-gradient(rgba(10, 14, 26, 0.04) 1px, transparent 1px),
			linear-gradient(90deg, rgba(10, 14, 26, 0.04) 1px, transparent 1px);
	}

	/* Hero background orbs softer on light */
	[data-theme="light"] .orb {
		opacity: 0.3;
		filter: blur(120px);
	}

	/* Nav */
	[data-theme="light"] .nav-wrap {
		background: rgba(250, 246, 236, 0.8) !important;
		border-bottom-color: rgba(10, 14, 26, 0.08);
	}

	/* Hero badge */
	[data-theme="light"] .hero-badge {
		background: rgba(255, 255, 255, 0.6);
	}

	/* btn-glass on light bg */
	[data-theme="light"] .btn-glass {
		background: rgba(255, 255, 255, 0.6);
		color: var(--text);
		border-color: var(--border-bright);
	}

	[data-theme="light"] .btn-glass:hover {
		background: rgba(255, 255, 255, 0.9);
	}

	/* Marquee */
	[data-theme="light"] .marquee-section {
		background: var(--surface-2);
	}

	/* Stats band */
	[data-theme="light"] .stats-band {
		background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%);
	}

	/* Service cards */
	[data-theme="light"] .service-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
		box-shadow: 0 4px 20px rgba(10, 14, 26, 0.04);
	}

	[data-theme="light"] .service-card:hover {
		border-color: rgba(77, 142, 255, 0.4);
		box-shadow: 0 20px 60px rgba(10, 14, 26, 0.1), 0 0 40px rgba(77, 142, 255, 0.08);
	}

	[data-theme="light"] .service-icon-wrap {
		background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
		border-color: var(--border-bright);
	}

	[data-theme="light"] .service-icon-wrap svg {
		stroke: var(--text);
	}

	/* Methodology section */
	[data-theme="light"] .methodology {
		background: var(--surface-2);
	}

	[data-theme="light"] .method-step {
		background: var(--surface);
		box-shadow: 0 4px 20px rgba(10, 14, 26, 0.04);
	}

	[data-theme="light"] .method-dot {
		background: var(--surface);
		border-color: var(--border-bright);
	}

	/* Product section keeps dark/dramatic feel (visualization area) */
	/* But adjust text colors slightly... actually product section stays dark for impact */

	/* Testimonials */
	[data-theme="light"] .testimonials {
		background: var(--bg);
	}

	[data-theme="light"] .testimonial-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
		box-shadow: 0 4px 20px rgba(10, 14, 26, 0.04);
	}

	[data-theme="light"] .testimonial-card.featured {
		background: linear-gradient(160deg, rgba(77, 142, 255, 0.08) 0%, var(--surface) 100%);
		border-color: rgba(77, 142, 255, 0.3);
	}

	/* CTA section */
	[data-theme="light"] .cta-inner {
		background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
	}

	/* Footer stays dark for elegance */
	[data-theme="light"] .footer {
		background: #0A0E1A;
	}

	[data-theme="light"] .footer-tag {
		color: rgba(255, 255, 255, 0.65);
	}

	[data-theme="light"] .footer-col a {
		color: rgba(255, 255, 255, 0.7);
	}

	[data-theme="light"] .footer-col a:hover {
		color: white;
	}

	[data-theme="light"] .footer-bottom {
		color: rgba(255, 255, 255, 0.5);
	}

	[data-theme="light"] .footer-bottom {
		border-top-color: rgba(255, 255, 255, 0.1);
	}

	[data-theme="light"] .footer-social a {
		border-color: rgba(255, 255, 255, 0.2);
		color: rgba(255, 255, 255, 0.7);
	}

	/* WHEEL — light theme adjustments */
	[data-theme="light"] .ring-label-inner {
		color: var(--text);
		text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
	}

	[data-theme="light"] .ring-label-inner strong {
		color: var(--electric);
		opacity: 1;
	}

	[data-theme="light"] .node-bubble {
		background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
		box-shadow: 0 4px 20px rgba(10, 14, 26, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
	}

	[data-theme="light"] .node-text {
		background: rgba(255, 255, 255, 0.92);
		border-color: rgba(10, 14, 26, 0.1);
	}

	[data-theme="light"] .node-name {
		color: var(--text);
	}

	[data-theme="light"] .wheel-eyebrow {
		color: var(--electric);
	}

	[data-theme="light"] .wheel-pill {
		background: rgba(255, 255, 255, 0.6);
		color: var(--text-mute);
	}

	[data-theme="light"] .dash-float {
		background: var(--surface);
		border-color: var(--border-bright);
		box-shadow: 0 12px 40px rgba(10, 14, 26, 0.1), 0 0 40px rgba(0, 212, 255, 0.15);
	}

	[data-theme="light"] .dash-float-label {
		color: var(--text-mute);
	}

	/* Hero meta border in light */
	[data-theme="light"] .hero-meta {
		border-top-color: var(--border);
	}

	/* Newsletter input visible in light footer (footer stays dark) */
	/* No change needed since footer stays dark */

	/* Stat cards labels */
	[data-theme="light"] .stat-label {
		color: var(--text-mute);
	}

	/* ============================================
   RESPONSIVE
   ============================================ */
	@media (max-width: 900px) {
		.nav-links {
			display: none;
		}

		.mobile-toggle {
			display: flex;
		}

		.nav-cta {
			display: none;
		}

		.theme-toggle {
			margin-left: auto;
		}

		.hero-visual {
			max-width: 100%;
			margin: 2rem auto 0;
		}

		.dash-float {
			right: -2%;
		}

		.product-float-1 {
			left: 0;
			top: -20px;
		}

		.product-float-2 {
			right: 0;
			bottom: -10px;
		}

		.product-features {
			grid-template-columns: 1fr;
		}
	}

	/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */
	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(40px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.anim {
		animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.anim-d1 {
		animation-delay: 0.15s;
	}

	.anim-d2 {
		animation-delay: 0.3s;
	}

	.anim-d3 {
		animation-delay: 0.45s;
	}

	.anim-d4 {
		animation-delay: 0.6s;
	}

	.anim-d5 {
		animation-delay: 0.75s;
	}

	@keyframes shimmer {
		0% {
			background-position: -200% center;
		}

		100% {
			background-position: 200% center;
		}
	}

	/* ============================================
   CLIENT LOGO PLACEHOLDERS (replaces marquee items)
   ============================================ */
	.logos-section .marquee-track {
		gap: 2rem;
		padding-right: 2rem;
	}

	.client-logo {
		flex-shrink: 0;
		min-width: 180px;
		/* no max-width — slot auto-expands so every logo renders at exact 75px height */
		height: 110px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 1.6rem;
		transition: transform 0.35s ease, opacity 0.35s ease;
		opacity: 0.88;
	}

	.client-logo:hover {
		transform: translateY(-2px);
		opacity: 1;
	}

	.client-logo img,
	.client-logo>svg {
		height: 75px;
		width: auto;
		/* no max-width — image renders at natural width for exact 75px height */
		object-fit: contain;
		display: block;
	}

	.client-logo>svg {
		height: 75px;
	}

	/* Theme-aware logo swap: each logo has two versions (.logo-light / .logo-dark) */
	.client-logo .logo-light {
		display: none;
	}

	.client-logo .logo-dark {
		display: block;
	}

	[data-theme="light"] .client-logo .logo-light {
		display: block;
	}

	[data-theme="light"] .client-logo .logo-dark {
		display: none;
	}

	.client-logo .logo-fallback {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.05rem;
		color: var(--text-mute);
		letter-spacing: -0.01em;
		white-space: nowrap;
		display: none;
		transition: color 0.3s ease;
	}

	.client-logo:hover .logo-fallback {
		color: var(--text);
	}

	/* ============================================
   SUCCESSFACTORS MODULES GRID + RECOGNITION
   ============================================ */
	.sf-modules {
		background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
	}

	/* ---- Recognition banner ---- */
	.modules-recognition {
		background: linear-gradient(135deg, rgba(77, 142, 255, 0.08) 0%, rgba(168, 85, 247, 0.05) 100%);
		border: 1px solid var(--border-bright);
		border-radius: 20px;
		padding: 1.8rem 2rem;
		margin-bottom: 3rem;
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.8rem;
		position: relative;
		overflow: hidden;
	}

	.modules-recognition::before {
		content: "";
		position: absolute;
		top: -50%;
		left: -10%;
		width: 60%;
		height: 200%;
		background: radial-gradient(ellipse at center, rgba(77, 142, 255, 0.15), transparent 60%);
		pointer-events: none;
	}

	@media (min-width: 900px) {
		.modules-recognition {
			grid-template-columns: 1fr 1.4fr;
			align-items: center;
			gap: 3rem;
		}
	}

	.recog-gartner {
		display: flex;
		align-items: center;
		gap: 1rem;
		position: relative;
		z-index: 1;
	}

	.recog-gartner-icon {
		width: 56px;
		height: 56px;
		background: linear-gradient(135deg, #FFB800, #EC4899);
		border-radius: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		flex-shrink: 0;
		box-shadow: 0 8px 24px rgba(255, 184, 0, 0.3);
	}

	.recog-gartner-icon svg {
		width: 28px;
		height: 28px;
	}

	.recog-gartner-label {
		font-size: 0.66rem;
		font-weight: 700;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: var(--gold);
		margin-bottom: 3px;
	}

	.recog-gartner-title {
		font-family: var(--serif);
		font-size: clamp(1.15rem, 1.8vw, 1.45rem);
		font-weight: 400;
		letter-spacing: -0.01em;
		line-height: 1.15;
		color: var(--text);
	}

	.recog-gartner-title .italic {
		font-style: italic;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.recog-gartner-sub {
		font-size: 0.78rem;
		color: var(--text-mute);
		margin-top: 4px;
	}

	.recog-stats {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		position: relative;
		z-index: 1;
	}

	@media (min-width: 700px) {
		.recog-stats {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.recog-stat {
		text-align: center;
		padding: 0.5rem;
		border-right: 1px solid var(--border);
	}

	.recog-stat:last-child {
		border-right: none;
	}

	.recog-stat-num {
		font-family: var(--serif);
		font-style: italic;
		font-size: clamp(1.7rem, 3.5vw, 2.4rem);
		font-weight: 400;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		display: block;
		line-height: 1;
		letter-spacing: -0.02em;
	}

	.recog-stat-num .plus {
		font-size: 0.65em;
		vertical-align: super;
	}

	.recog-stat-label {
		font-size: 0.7rem;
		color: var(--text-mute);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-weight: 600;
		margin-top: 0.4rem;
		display: block;
	}

	.recog-disclaimer {
		grid-column: 1 / -1;
		font-size: 0.65rem;
		color: var(--text-dim);
		text-align: center;
		font-style: italic;
		padding-top: 0.5rem;
		border-top: 1px dashed var(--border);
		position: relative;
		z-index: 1;
	}

	/* ---- Enhanced module cards ---- */
	.modules-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	@media (min-width: 600px) {
		.modules-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1100px) {
		.modules-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.module-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--bg-deep) 100%);
		border: 1px solid var(--border);
		border-radius: 18px;
		padding: 0;
		overflow: hidden;
		transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
		display: flex;
		flex-direction: column;
	}

	.module-card:hover {
		border-color: rgba(77, 142, 255, 0.4);
		transform: translateY(-5px);
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 50px rgba(77, 142, 255, 0.1);
	}

	/* Visual header — dark surface with subtle category accent */
	.module-visual {
		position: relative;
		height: 130px;
		background:
			linear-gradient(160deg, rgba(12, 16, 36, 0.92) 0%, rgba(2, 3, 11, 0.96) 100%),
			linear-gradient(135deg, var(--mod-c1, #4D8EFF), var(--mod-c2, #00D4FF));
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		border-bottom: 1px solid var(--border);
	}

	.module-visual::before {
		/* Thin colored category accent strip at top */
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, var(--mod-c1, #4D8EFF), var(--mod-c2, #00D4FF));
		opacity: 0.85;
		pointer-events: none;
		z-index: 3;
		transition: opacity 0.4s ease, height 0.4s ease;
	}

	.module-card:hover .module-visual::before {
		opacity: 1;
		height: 3px;
	}

	.module-visual::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
		background-size: 24px 24px;
		mask-image: linear-gradient(135deg, black, transparent 70%);
		-webkit-mask-image: linear-gradient(135deg, black, transparent 70%);
		pointer-events: none;
	}

	.module-icon-lg {
		position: relative;
		z-index: 2;
		width: 70px;
		height: 70px;
		background: rgba(255, 255, 255, 0.22);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	}

	.module-card:hover .module-icon-lg {
		transform: scale(1.08) rotate(-3deg);
	}

	.module-icon-lg svg {
		width: 34px;
		height: 34px;
	}

	/* New: depictive SVG illustration that fills the visual area */
	.module-illus {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		pointer-events: none;
		transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.module-card:hover .module-illus {
		transform: scale(1.04);
	}

	.module-visual-tag {
		position: absolute;
		top: 12px;
		right: 12px;
		z-index: 4;
		background: rgba(255, 255, 255, 0.05);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		color: rgba(255, 255, 255, 0.78);
		font-size: 0.6rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		padding: 0.3rem 0.65rem;
		border-radius: 100px;
		border: 1px solid var(--border-bright);
		text-transform: uppercase;
	}

	.module-body {
		padding: 1.4rem 1.4rem 1.2rem;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	.module-card h4 {
		font-size: 1.15rem;
		font-weight: 700;
		margin-bottom: 0.35rem;
		letter-spacing: -0.01em;
		color: var(--text);
	}

	.module-desc {
		font-size: 0.86rem;
		color: var(--text-mute);
		line-height: 1.5;
		margin-bottom: 1rem;
	}

	.module-benefits {
		list-style: none;
		padding: 0;
		margin: 0 0 1.2rem;
		display: flex;
		flex-direction: column;
		gap: 0.45rem;
		flex-grow: 1;
	}

	.module-benefits li {
		font-size: 0.79rem;
		color: var(--text);
		display: flex;
		align-items: flex-start;
		gap: 0.55rem;
		line-height: 1.4;
	}

	.module-benefits li::before {
		content: "";
		width: 14px;
		height: 14px;
		margin-top: 2px;
		flex-shrink: 0;
		border-radius: 50%;
		background: rgba(0, 212, 255, 0.12);
		border: 1px solid rgba(0, 212, 255, 0.4);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300D4FF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 9px;
	}

	.module-footer {
		padding-top: 0.9rem;
		border-top: 1px solid var(--border);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.module-stat {
		font-size: 0.78rem;
		color: var(--text-mute);
	}

	.module-stat strong {
		color: var(--text);
		font-weight: 700;
		font-family: var(--serif);
		font-style: italic;
		font-size: 0.95rem;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-right: 4px;
	}

	/* Light theme adjustments */
	[data-theme="light"] .sf-modules {
		background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%);
	}

	[data-theme="light"] .module-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
		box-shadow: 0 4px 20px rgba(10, 14, 26, 0.04);
	}

	[data-theme="light"] .module-card:hover {
		box-shadow: 0 20px 50px rgba(10, 14, 26, 0.1), 0 0 50px rgba(77, 142, 255, 0.06);
	}

	[data-theme="light"] .module-visual {
		background:
			linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 239, 226, 0.96) 100%),
			linear-gradient(135deg, var(--mod-c1, #4D8EFF), var(--mod-c2, #00D4FF));
		border-bottom: 1px solid var(--border);
	}

	[data-theme="light"] .module-visual::after {
		background-image:
			linear-gradient(rgba(10, 14, 26, 0.04) 1px, transparent 1px),
			linear-gradient(90deg, rgba(10, 14, 26, 0.04) 1px, transparent 1px);
	}

	[data-theme="light"] .module-visual-tag {
		background: rgba(10, 14, 26, 0.04);
		color: rgba(10, 14, 26, 0.7);
		border-color: var(--border-bright);
	}

	/* Flip lightness on the decorative SVG so white-on-color mocks become
   dark-on-light, while colored accents (cyan/magenta/emerald) stay on-hue.
   `invert(1)` flips white → black; `hue-rotate(180deg)` cancels invert's
   hue shift on colored fills, so the net effect is "lightness invert only". */
	[data-theme="light"] .module-illus {
		filter: invert(1) hue-rotate(180deg);
		opacity: 0.78;
	}

	[data-theme="light"] .modules-recognition {
		background: linear-gradient(135deg, rgba(77, 142, 255, 0.06) 0%, rgba(168, 85, 247, 0.04) 100%);
	}

	/* ============================================
   CASE STUDIES
   ============================================ */
	.cases-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	@media (min-width: 900px) {
		.cases-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: 1.8rem;
		}
	}

	.case-card {
		position: relative;
		background: linear-gradient(160deg, var(--surface) 0%, var(--bg-deep) 100%);
		border: 1px solid var(--border);
		border-radius: 20px;
		padding: 1.8rem;
		transition: all 0.4s ease;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.case-card::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 150px;
		height: 150px;
		background: radial-gradient(circle, rgba(77, 142, 255, 0.12), transparent 60%);
		pointer-events: none;
	}

	.case-card.featured {
		background: linear-gradient(160deg, rgba(77, 142, 255, 0.1) 0%, var(--bg-deep) 100%);
		border-color: rgba(77, 142, 255, 0.35);
	}

	.case-card.featured::before {
		background: radial-gradient(circle, rgba(168, 85, 247, 0.18), transparent 60%);
	}

	.case-card:hover {
		transform: translateY(-4px);
		border-color: rgba(77, 142, 255, 0.5);
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 40px rgba(77, 142, 255, 0.1);
	}

	.case-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1.4rem;
		position: relative;
	}

	.case-industry {
		font-size: 0.65rem;
		font-weight: 700;
		letter-spacing: 0.18em;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.case-year {
		font-size: 0.7rem;
		color: var(--text-dim);
		font-weight: 500;
	}

	.case-metric {
		margin-bottom: 1.2rem;
		position: relative;
	}

	.case-number {
		font-family: var(--serif);
		font-style: italic;
		font-size: clamp(2.8rem, 6vw, 4rem);
		font-weight: 400;
		line-height: 1;
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		display: block;
		margin-bottom: 0.5rem;
		letter-spacing: -0.03em;
	}

	.case-metric-label {
		font-size: 0.88rem;
		color: var(--text-mute);
		line-height: 1.4;
		display: block;
		max-width: 28ch;
	}

	.case-title {
		font-family: var(--serif);
		font-size: 1.4rem;
		line-height: 1.2;
		font-weight: 400;
		margin-bottom: 0.7rem;
		letter-spacing: -0.01em;
		color: var(--text);
	}

	.case-desc {
		font-size: 0.9rem;
		color: var(--text-mute);
		line-height: 1.55;
		flex-grow: 1;
		margin-bottom: 1.5rem;
	}

	.case-meta {
		padding-top: 1.2rem;
		border-top: 1px solid var(--border);
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.6rem;
	}

	.case-client {
		font-size: 0.78rem;
		color: var(--text-dim);
	}

	.case-client strong {
		color: var(--text);
		font-weight: 600;
	}

	.case-link {
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--cyan);
		transition: all 0.2s ease;
		white-space: nowrap;
	}

	.case-card:hover .case-link {
		color: var(--electric);
	}

	/* Full-content case card styling (homepage tells the story end-to-end) */
	.case-title-brand {
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: 600;
		font-family: var(--font-sans, "Manrope", sans-serif);
		font-style: normal;
		letter-spacing: -0.01em;
	}

	.case-body {
		font-size: 0.93rem;
		color: var(--text-mute);
		line-height: 1.6;
		flex-grow: 1;
		margin-bottom: 1.5rem;
		display: flex;
		flex-direction: column;
		gap: 0.95rem;
	}

	.case-body p {
		margin: 0;
	}

	.case-body em {
		color: var(--text);
		font-style: italic;
		font-weight: 600;
		background: linear-gradient(transparent 62%, rgba(0, 212, 255, 0.18) 62%);
		padding: 0 2px;
	}

	.case-pullquote {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.05rem;
		color: var(--cyan);
		line-height: 1.45;
		padding-left: 1rem;
		border-left: 2px solid rgba(0, 212, 255, 0.4);
		font-weight: 400;
		margin-top: 0.25rem;
	}

	.case-source {
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--text-dim);
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
	}

	.case-source::before {
		content: "";
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--cyan);
		box-shadow: 0 0 6px var(--cyan);
	}

	.cases-cta {
		margin-top: 2.5rem;
		text-align: center;
	}

	/* ============================================
   INDUSTRIES STRIP
   ============================================ */
	.industries {
		background: var(--bg-deep);
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
	}

	.industries-header {
		text-align: center;
		max-width: 700px;
		margin: 0 auto 3.5rem;
	}

	.industries-header .eyebrow {
		justify-content: center;
	}

	.industries-header .eyebrow::before {
		content: none;
	}

	.industries-title {
		font-family: var(--serif);
		font-size: clamp(2rem, 4.5vw, 3.4rem);
		font-weight: 400;
		letter-spacing: -0.025em;
		margin-top: 1rem;
		line-height: 1.1;
	}

	.industries-title .italic {
		font-style: italic;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.industries-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	@media (min-width: 700px) {
		.industries-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.industry-card {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
		padding: 1.5rem;
		text-align: center;
		transition: all 0.3s ease;
		position: relative;
	}

	.industry-card:hover {
		background: var(--surface-2);
		border-color: var(--border-bright);
		transform: translateY(-3px);
	}

	.industry-card-real {
		border-color: rgba(16, 229, 160, 0.35);
		background: linear-gradient(160deg, rgba(16, 229, 160, 0.08), var(--surface));
	}

	.industry-card-real::before {
		content: "✓ CONFIRMED";
		position: absolute;
		top: 8px;
		right: 8px;
		font-size: 0.55rem;
		font-weight: 800;
		letter-spacing: 0.1em;
		color: var(--emerald);
	}

	.industry-icon {
		width: 48px;
		height: 48px;
		background: var(--surface-2);
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 0.9rem;
		color: var(--cyan);
		transition: all 0.3s ease;
	}

	.industry-card:hover .industry-icon {
		background: var(--gradient-electric);
		color: white;
	}

	.industry-icon svg {
		width: 22px;
		height: 22px;
	}

	.industry-card h4 {
		font-size: 0.92rem;
		font-weight: 700;
		margin-bottom: 0.3rem;
		letter-spacing: -0.005em;
	}

	.industry-card p {
		font-size: 0.7rem;
		color: var(--text-dim);
		font-weight: 500;
	}

	[data-theme="light"] .industries {
		background: var(--surface-2);
	}

	[data-theme="light"] .industry-card {
		background: var(--surface);
	}

	/* ============================================
   LEADERSHIP TEAM
   ============================================ */
	.team-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.3rem;
	}

	@media (min-width: 600px) {
		.team-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1100px) {
		.team-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.team-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--bg-deep) 100%);
		border: 1px solid var(--border);
		border-radius: 18px;
		padding: 1.8rem 1.5rem;
		transition: all 0.4s ease;
		text-align: left;
	}

	.team-card:hover {
		border-color: rgba(77, 142, 255, 0.35);
		transform: translateY(-4px);
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
	}

	.team-avatar {
		width: 68px;
		height: 68px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--serif);
		font-style: italic;
		color: white;
		font-weight: 500;
		font-size: 1.6rem;
		margin-bottom: 1.2rem;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	}

	.team-name {
		font-size: 1.15rem;
		font-weight: 700;
		margin-bottom: 0.3rem;
		letter-spacing: -0.01em;
	}

	.team-role {
		font-size: 0.78rem;
		color: var(--cyan);
		font-weight: 600;
		letter-spacing: 0.04em;
		display: block;
		margin-bottom: 0.9rem;
	}

	.team-bio {
		font-size: 0.88rem;
		color: var(--text-mute);
		line-height: 1.5;
		margin-bottom: 1.2rem;
	}

	.team-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 1rem;
		border-top: 1px solid var(--border);
	}

	.team-years {
		font-family: var(--serif);
		font-style: italic;
		font-size: 0.95rem;
		color: var(--text);
		font-weight: 500;
	}

	.team-social {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid var(--border-bright);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--text-mute);
		transition: all 0.3s;
	}

	.team-social:hover {
		background: var(--gradient-electric);
		color: white;
		border-color: transparent;
		transform: translateY(-2px);
	}

	.team-social svg {
		width: 14px;
		height: 14px;
	}

	[data-theme="light"] .team-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
	}

	/* ============================================
   INSIGHTS HUB
   ============================================ */
	.insights {
		background: var(--bg);
		border-top: 1px solid var(--border);
	}

	.insights-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	@media (min-width: 700px) {
		.insights-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.insight-card {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
		padding: 1.8rem 1.6rem 1.5rem;
		display: flex;
		flex-direction: column;
		transition: all 0.4s ease;
		position: relative;
		overflow: hidden;
	}

	.insight-card::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, var(--electric), var(--cyan));
		opacity: 0.55;
		transition: opacity 0.35s ease, height 0.35s ease;
	}

	.insight-card--product::before {
		background: linear-gradient(90deg, var(--electric), var(--cyan));
	}

	.insight-card--field::before {
		background: linear-gradient(90deg, var(--violet), var(--magenta));
	}

	.insight-card--methodology::before {
		background: linear-gradient(90deg, var(--emerald), var(--cyan));
	}

	.insight-card:hover {
		transform: translateY(-3px);
		border-color: var(--border-bright);
		box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
	}

	.insight-card:hover::before {
		opacity: 1;
		height: 3px;
	}

	.insight-tag {
		align-self: flex-start;
		font-size: 0.65rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		padding: 0.35rem 0.75rem;
		border-radius: 999px;
		background: rgba(77, 142, 255, 0.12);
		color: var(--electric);
		border: 1px solid rgba(77, 142, 255, 0.28);
		margin-bottom: 0.9rem;
	}

	.insight-tag--product {
		background: rgba(77, 142, 255, 0.12);
		color: var(--electric);
		border-color: rgba(77, 142, 255, 0.28);
	}

	.insight-tag--field {
		background: rgba(168, 85, 247, 0.14);
		color: var(--violet);
		border-color: rgba(168, 85, 247, 0.3);
	}

	.insight-tag--methodology {
		background: rgba(16, 229, 160, 0.12);
		color: var(--emerald);
		border-color: rgba(16, 229, 160, 0.3);
	}

	.insight-meta {
		font-size: 0.7rem;
		color: var(--text-dim);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		margin-bottom: 0.6rem;
	}

	.insight-title {
		font-family: var(--serif);
		font-size: 1.18rem;
		line-height: 1.28;
		font-weight: 400;
		letter-spacing: -0.01em;
		margin-bottom: 0.65rem;
	}

	.insight-excerpt {
		font-size: 0.88rem;
		color: var(--text-mute);
		line-height: 1.55;
		margin-bottom: 1.1rem;
		flex-grow: 1;
	}

	.insight-link {
		align-self: flex-start;
		font-size: 0.82rem;
		font-weight: 700;
		color: var(--cyan);
		text-decoration: none;
		transition: color 0.2s, gap 0.2s;
	}

	.insight-card:hover .insight-link {
		color: var(--electric);
	}

	/* ============================================
   FREE HR HEALTH ASSESSMENT
   ============================================ */
	.assessment-section {
		padding: clamp(3.5rem, 8vw, 6rem) 0;
	}

	.assessment-inner {
		position: relative;
		background: linear-gradient(135deg, rgba(77, 142, 255, 0.12) 0%, rgba(16, 229, 160, 0.06) 50%, rgba(168, 85, 247, 0.08) 100%);
		border: 1px solid rgba(77, 142, 255, 0.3);
		border-radius: 28px;
		padding: clamp(2.5rem, 5vw, 4.5rem);
		overflow: hidden;
	}

	.assessment-bg {
		position: absolute;
		inset: 0;
		background-image:
			radial-gradient(circle at 20% 30%, rgba(77, 142, 255, 0.18), transparent 50%),
			radial-gradient(circle at 80% 70%, rgba(16, 229, 160, 0.12), transparent 50%);
		pointer-events: none;
	}

	.assessment-content {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: 1fr;
		gap: 3rem;
		align-items: center;
	}

	@media (min-width: 900px) {
		.assessment-content {
			grid-template-columns: 1.1fr 1fr;
			gap: 4rem;
		}
	}

	.assessment-title {
		font-family: var(--serif);
		font-size: clamp(2.4rem, 5.5vw, 4rem);
		font-weight: 400;
		line-height: 1.05;
		letter-spacing: -0.03em;
		margin: 1rem 0 1.5rem;
	}

	.assessment-title .italic {
		font-style: italic;
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.assessment-desc {
		font-size: 1.05rem;
		line-height: 1.55;
		color: var(--text-mute);
		margin-bottom: 2rem;
		max-width: 50ch;
	}

	.assessment-checks {
		list-style: none;
		padding: 0;
		margin: 0 0 2rem;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.8rem;
	}

	.assessment-checks li {
		font-size: 0.9rem;
		color: var(--text);
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	.assessment-checks svg {
		width: 18px;
		height: 18px;
		color: var(--emerald);
		flex-shrink: 0;
	}

	/* Assessment "sample" card */
	.assessment-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--bg-deep) 100%);
		border: 1px solid var(--border-bright);
		border-radius: 20px;
		padding: 1.6rem;
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
		transform: rotate(2deg);
		transition: transform 0.4s ease;
	}

	.assessment-card:hover {
		transform: rotate(0deg);
	}

	.assessment-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1.5rem;
		padding-bottom: 0.9rem;
		border-bottom: 1px solid var(--border);
	}

	.assessment-card-eyebrow {
		font-size: 0.62rem;
		letter-spacing: 0.18em;
		color: var(--cyan);
		font-weight: 700;
	}

	.assessment-card-status {
		font-size: 0.6rem;
		color: var(--emerald);
		font-weight: 600;
		background: rgba(16, 229, 160, 0.12);
		padding: 0.2rem 0.5rem;
		border-radius: 100px;
		border: 1px solid rgba(16, 229, 160, 0.3);
	}

	.assessment-score-circle {
		position: relative;
		width: 140px;
		height: 140px;
		margin: 0 auto 1.5rem;
	}

	.assessment-score-circle svg {
		width: 100%;
		height: 100%;
	}

	.assessment-score-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.assessment-score-num {
		font-family: var(--serif);
		font-style: italic;
		font-size: 2.6rem;
		font-weight: 400;
		display: block;
		line-height: 1;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.assessment-score-label {
		font-size: 0.65rem;
		color: var(--text-dim);
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.assessment-rows {
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
	}

	.assessment-row {
		display: grid;
		grid-template-columns: 100px 1fr 24px;
		gap: 0.6rem;
		align-items: center;
		font-size: 0.7rem;
	}

	.assessment-row span:first-child {
		color: var(--text-mute);
		font-weight: 500;
	}

	.assessment-row-val {
		font-family: var(--serif);
		font-style: italic;
		font-size: 0.85rem;
		color: var(--text);
		font-weight: 500;
		text-align: right;
	}

	.assessment-bar {
		height: 5px;
		background: rgba(255, 255, 255, 0.06);
		border-radius: 100px;
		overflow: hidden;
	}

	.assessment-bar>div {
		height: 100%;
		border-radius: 100px;
	}

	[data-theme="light"] .assessment-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
		box-shadow: 0 24px 60px rgba(10, 14, 26, 0.12);
	}

	/* ============================================
   Athena FLOATING CHAT WIDGET
   ============================================ */





	50% {
		background-position: 100% 50%;
	}
	}




	100% {
		transform: scale(1.6);
		opacity: 0;
	}
	}




	.athena-widget.open .athena-widget.open .athena-widget.open 50% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
	}




	/* Header */
	.athena-header {
		position: relative;
		padding: 1.2rem 1.3rem;
		border-bottom: 1px solid var(--border);
		display: flex;
		align-items: center;
		gap: 0.8rem;
		overflow: hidden;
	}

	.athena-header-bg {
		position: absolute;
		inset: 0;
		background:
			linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(77, 142, 255, 0.12) 100%),
			radial-gradient(circle at top right, rgba(236, 72, 153, 0.25), transparent 60%);
		pointer-events: none;
	}

	.athena-avatar-lg {
		position: relative;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: linear-gradient(135deg, #A855F7, #EC4899);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--serif);
		font-style: italic;
		color: white;
		font-weight: 500;
		font-size: 1.2rem;
		box-shadow: 0 4px 16px rgba(168, 85, 247, 0.5);
		z-index: 1;
	}

	.athena-info {
		flex: 1;
		position: relative;
		z-index: 1;
	}

	.athena-name {
		font-weight: 700;
		color: var(--text);
		font-size: 1rem;
		letter-spacing: -0.01em;
	}

	.athena-status {
		font-size: 0.7rem;
		color: var(--text-mute);
		display: flex;
		align-items: center;
		gap: 5px;
		margin-top: 2px;
	}

	.athena-dot {
		width: 7px;
		height: 7px;
		background: var(--emerald);
		border-radius: 50%;
		box-shadow: 0 0 8px var(--emerald);
		animation: chatPulse 1.8s ease-in-out infinite;
	}

	/* Body */
	.athena-body {
		flex: 1;
		padding: 1.1rem 1rem;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: 0.9rem;
		scrollbar-width: thin;
		scrollbar-color: var(--border-bright) transparent;
	}

	.athena-body::-webkit-scrollbar {
		width: 6px;
	}

	.athena-body::-webkit-scrollbar-track {
		background: transparent;
	}

	.athena-body::-webkit-scrollbar-thumb {
		background: var(--border-bright);
		border-radius: 100px;
	}

	.athena-msg {
		display: flex;
		gap: 0.5rem;
		align-items: flex-end;
		animation: msgIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	.athena-msg.bot {
		justify-content: flex-start;
	}

	.athena-msg.user {
		justify-content: flex-end;
		flex-direction: row-reverse;
	}

	@keyframes msgIn {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.athena-msg-avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: linear-gradient(135deg, #A855F7, #EC4899);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--serif);
		font-style: italic;
		color: white;
		font-size: 0.7rem;
		font-weight: 500;
		flex-shrink: 0;
		margin-bottom: 2px;
	}

	.athena-msg.user .athena-msg-avatar {
		display: none;
	}

	.athena-msg-bubble {
		max-width: 78%;
		padding: 0.7rem 0.95rem;
		border-radius: 16px;
		font-size: 0.85rem;
		line-height: 1.45;
	}

	.athena-msg.bot .athena-msg-bubble {
		background: var(--surface-2);
		border: 1px solid var(--border);
		color: var(--text);
		border-bottom-left-radius: 4px;
	}

	.athena-msg.bot .athena-msg-bubble strong {
		color: var(--cyan);
		font-weight: 700;
	}

	.athena-msg.user .athena-msg-bubble {
		background: linear-gradient(135deg, #4D8EFF, #00D4FF);
		color: white;
		font-weight: 500;
		border-bottom-right-radius: 4px;
	}

	/* Typing indicator */
	.athena-typing {
		display: flex;
		gap: 3px;
		padding: 0.2rem 0;
	}

	.athena-typing span {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--text-dim);
		animation: typingDot 1.4s ease-in-out infinite;
	}

	.athena-typing span:nth-child(2) {
		animation-delay: 0.2s;
	}

	.athena-typing span:nth-child(3) {
		animation-delay: 0.4s;
	}

	@keyframes typingDot {

		0%,
		60%,
		100% {
			transform: translateY(0);
			opacity: 0.4;
		}

		30% {
			transform: translateY(-4px);
			opacity: 1;
		}
	}

	/* Suggested questions */
	.athena-suggestions {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		margin-top: 0.3rem;
	}

	.athena-suggestions-label {
		font-size: 0.65rem;
		color: var(--text-dim);
		text-transform: uppercase;
		letter-spacing: 0.14em;
		font-weight: 700;
		margin-bottom: 0.3rem;
	}

	.athena-suggestions button {
		text-align: left;
		padding: 0.65rem 0.85rem;
		background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(77, 142, 255, 0.05));
		border: 1px solid rgba(168, 85, 247, 0.2);
		border-radius: 10px;
		color: var(--text);
		font-size: 0.82rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
		font-family: inherit;
	}

	.athena-suggestions button:hover {
		background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(77, 142, 255, 0.1));
		border-color: rgba(168, 85, 247, 0.5);
		transform: translateX(3px);
	}

	/* Input */
	.athena-input {
		padding: 0.7rem;
		border-top: 1px solid var(--border);
		display: flex;
		gap: 0.5rem;
		background: var(--bg-deep);
	}

	.athena-input input {
		flex: 1;
		background: var(--surface-2);
		border: 1px solid var(--border);
		border-radius: 100px;
		padding: 0.6rem 1rem;
		color: var(--text);
		font-family: inherit;
		font-size: 0.85rem;
		outline: none;
		transition: all 0.2s ease;
	}

	.athena-input input:focus {
		border-color: var(--violet);
		box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
	}

	.athena-input input::placeholder {
		color: var(--text-dim);
	}

	.athena-send {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: linear-gradient(135deg, #A855F7, #EC4899);
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		flex-shrink: 0;
		box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
		transition: all 0.2s ease;
	}

	.athena-send:hover {
		transform: scale(1.05);
		box-shadow: 0 6px 18px rgba(168, 85, 247, 0.6);
	}

	.athena-send svg {
		width: 16px;
		height: 16px;
	}

	.athena-foot {
		padding: 0.5rem;
		text-align: center;
		font-size: 0.65rem;
		color: var(--text-dim);
		border-top: 1px solid var(--border);
		background: var(--bg-deep);
	}

	.athena-foot strong {
		color: var(--text-mute);
		font-weight: 600;
	}

	/* Light theme overrides for the widget */
	[data-theme="light"] [data-theme="light"] .athena-msg.bot .athena-msg-bubble {
		background: var(--surface-2);
	}

	[data-theme="light"] .athena-input,
	[data-theme="light"] .athena-foot {
		background: var(--surface-2);
	}

	[data-theme="light"] .athena-input input {
		background: white;
	}

	[data-theme="light"]
	/* Mobile */
	@media (max-width: 480px) {}

	/* ============================================
   ============================================
   ============================================
   INLINE HR ADVISORY VIEW
   All styles scoped to #hr-advisory to avoid
   conflicts with the homepage classes above
   ============================================
   ============================================
   ============================================ */

	/* Section divider when entering advisory view */
	#hr-advisory {
		scroll-margin-top: 80px;
		border-top: 1px solid var(--border);
	}

	#hr-advisory .hra-back-link {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		font-size: 0.78rem;
		color: var(--cyan);
		font-weight: 700;
		padding: 0.6rem 1.1rem;
		background: var(--surface);
		border: 1px solid var(--border-bright);
		border-radius: 100px;
		margin-bottom: 1rem;
		transition: all 0.3s ease;
	}

	#hr-advisory .hra-back-link:hover {
		background: var(--surface-2);
		transform: translateX(-3px);
	}

	/* PAGE HERO */
	#hr-advisory .page-hero {
		position: relative;
		padding: clamp(5rem, 10vh, 8rem) 0 clamp(4rem, 8vh, 6rem);
		overflow: hidden;
	}

	#hr-advisory .page-hero-bg {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 0;
	}

	#hr-advisory .page-hero-bg::before,
	#hr-advisory .page-hero-bg::after {
		content: "";
		position: absolute;
		border-radius: 50%;
		filter: blur(120px);
		opacity: 0.45;
	}

	#hr-advisory .page-hero-bg::before {
		width: 560px;
		height: 560px;
		background: radial-gradient(circle, var(--electric), transparent 70%);
		top: -10%;
		right: -10%;
		animation: orbFloat 18s ease-in-out infinite;
	}

	#hr-advisory .page-hero-bg::after {
		width: 480px;
		height: 480px;
		background: radial-gradient(circle, var(--violet), transparent 70%);
		bottom: -15%;
		left: -5%;
		animation: orbFloat 22s ease-in-out infinite reverse;
	}

	[data-theme="light"] #hr-advisory .page-hero-bg::before,
	[data-theme="light"] #hr-advisory .page-hero-bg::after {
		opacity: 0.22;
	}

	#hr-advisory .page-hero-grid-bg {
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
		background-size: 60px 60px;
		mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
		-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
		pointer-events: none;
		z-index: 1;
	}

	#hr-advisory .page-hero-particles {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 1;
		overflow: hidden;
	}

	#hr-advisory .particle {
		position: absolute;
		width: 4px;
		height: 4px;
		background: var(--cyan);
		border-radius: 50%;
		box-shadow: 0 0 12px var(--cyan);
		opacity: 0.6;
		animation: particleDrift 14s ease-in-out infinite;
	}

	#hr-advisory .particle:nth-child(1) {
		top: 25%;
		left: 12%;
		animation-delay: 0s;
		animation-duration: 16s;
	}

	#hr-advisory .particle:nth-child(2) {
		top: 40%;
		left: 65%;
		animation-delay: 2s;
		background: var(--violet);
		box-shadow: 0 0 12px var(--violet);
		animation-duration: 18s;
	}

	#hr-advisory .particle:nth-child(3) {
		top: 70%;
		left: 25%;
		animation-delay: 4s;
		background: var(--emerald);
		box-shadow: 0 0 12px var(--emerald);
		animation-duration: 14s;
	}

	#hr-advisory .particle:nth-child(4) {
		top: 55%;
		left: 80%;
		animation-delay: 6s;
		background: var(--magenta);
		box-shadow: 0 0 12px var(--magenta);
		animation-duration: 20s;
	}

	#hr-advisory .particle:nth-child(5) {
		top: 15%;
		left: 55%;
		animation-delay: 8s;
		animation-duration: 17s;
	}

	#hr-advisory .particle:nth-child(6) {
		top: 85%;
		left: 50%;
		animation-delay: 1s;
		background: var(--gold);
		box-shadow: 0 0 12px var(--gold);
		animation-duration: 19s;
	}

	@keyframes particleDrift {

		0%,
		100% {
			transform: translate(0, 0);
			opacity: 0.6;
		}

		25% {
			transform: translate(80px, -40px);
			opacity: 1;
		}

		50% {
			transform: translate(-30px, 60px);
			opacity: 0.4;
		}

		75% {
			transform: translate(50px, 30px);
			opacity: 0.8;
		}
	}

	#hr-advisory .page-hero .container {
		position: relative;
		z-index: 2;
	}

	#hr-advisory .hero-layout {
		display: grid;
		grid-template-columns: 1fr;
		gap: 3rem;
		align-items: center;
	}

	@media (min-width: 1100px) {
		#hr-advisory .hero-layout {
			grid-template-columns: 1.05fr 1fr;
			gap: 4rem;
		}
	}

	#hr-advisory .breadcrumb {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.78rem;
		color: var(--text-mute);
		margin-bottom: 1.6rem;
		padding: 0.45rem 0.95rem;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 100px;
	}

	#hr-advisory .breadcrumb a {
		color: var(--text-mute);
		transition: color 0.2s;
	}

	#hr-advisory .breadcrumb a:hover {
		color: var(--cyan);
	}

	#hr-advisory .breadcrumb-sep {
		color: var(--text-dim);
		font-weight: 300;
	}

	#hr-advisory .breadcrumb-current {
		color: var(--text);
		font-weight: 600;
	}

	#hr-advisory .page-hero-title {
		font-family: var(--serif);
		font-size: clamp(2.8rem, 7vw, 5.6rem);
		font-weight: 400;
		line-height: 1;
		letter-spacing: -0.035em;
		margin-bottom: 1.5rem;
		max-width: 14ch;
	}

	#hr-advisory .page-hero-title .italic {
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	#hr-advisory .page-hero-sub {
		font-size: clamp(1.05rem, 1.6vw, 1.25rem);
		color: var(--text-mute);
		line-height: 1.55;
		max-width: 50ch;
		margin-bottom: 2.2rem;
	}

	#hr-advisory .page-hero-ctas {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		margin-bottom: 2.2rem;
	}

	#hr-advisory .page-hero-meta {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.4rem 2rem;
		padding-top: 1.8rem;
		border-top: 1px solid var(--border);
	}

	@media (min-width: 700px) {
		#hr-advisory .page-hero-meta {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	#hr-advisory .page-hero-meta-item {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	#hr-advisory .page-hero-meta-num {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.7rem;
		font-weight: 400;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		line-height: 1;
		letter-spacing: -0.02em;
	}

	#hr-advisory .page-hero-meta-label {
		font-size: 0.72rem;
		color: var(--text-mute);
		letter-spacing: 0.04em;
		line-height: 1.4;
	}

	/* HERO VISUAL — HR Health Check Report Mockup */
	#hr-advisory .hero-visual {
		position: relative;
		perspective: 1500px;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 480px;
	}

	@media (max-width: 1099px) {
		#hr-advisory .hero-visual {
			min-height: 380px;
			margin-top: 1rem;
		}
	}

	#hr-advisory .hero-visual-card {
		position: relative;
		width: 100%;
		max-width: 440px;
		background: linear-gradient(160deg, rgba(15, 22, 41, 0.95) 0%, rgba(5, 8, 24, 0.98) 100%);
		border: 1px solid var(--border-bright);
		border-radius: 20px;
		overflow: hidden;
		box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 60px rgba(77, 142, 255, 0.15);
		transform: rotateY(-4deg) rotateX(2deg) rotateZ(0.5deg);
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	}

	#hr-advisory .hero-visual:hover .hero-visual-card {
		transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
	}

	[data-theme="light"] #hr-advisory .hero-visual-card {
		background: linear-gradient(160deg, #ffffff 0%, #FAF6EC 100%);
		box-shadow: 0 30px 80px rgba(10, 14, 26, 0.18), 0 0 0 1px rgba(10, 14, 26, 0.04) inset;
	}

	#hr-advisory .hv-chrome {
		padding: 0.7rem 1rem;
		border-bottom: 1px solid var(--border);
		display: flex;
		align-items: center;
		gap: 0.6rem;
		background: rgba(255, 255, 255, 0.02);
	}

	#hr-advisory .hv-dots {
		display: flex;
		gap: 0.32rem;
	}

	#hr-advisory .hv-dots span {
		width: 9px;
		height: 9px;
		border-radius: 50%;
	}

	#hr-advisory .hv-dots span:nth-child(1) {
		background: #FF5F57;
	}

	#hr-advisory .hv-dots span:nth-child(2) {
		background: #FFBD2E;
	}

	#hr-advisory .hv-dots span:nth-child(3) {
		background: #28C940;
	}

	#hr-advisory .hv-url {
		flex: 1;
		text-align: center;
		font-size: 0.7rem;
		color: var(--text-dim);
		background: var(--surface);
		padding: 0.3rem 0.7rem;
		border-radius: 100px;
		font-family: ui-monospace, monospace;
	}

	#hr-advisory .hv-content {
		padding: 1.4rem;
		display: flex;
		flex-direction: column;
		gap: 1.2rem;
	}

	#hr-advisory .hv-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 1rem;
		border-bottom: 1px solid var(--border);
	}

	#hr-advisory .hv-header-left {
		flex-grow: 1;
	}

	#hr-advisory .hv-eyebrow {
		font-size: 0.6rem;
		font-weight: 700;
		letter-spacing: 0.18em;
		color: var(--cyan);
		display: block;
		margin-bottom: 4px;
	}

	#hr-advisory .hv-title {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.15rem;
		font-weight: 400;
		color: var(--text);
		letter-spacing: -0.01em;
	}

	#hr-advisory .hv-date {
		font-size: 0.65rem;
		color: var(--text-dim);
		font-weight: 600;
		padding: 0.25rem 0.55rem;
		background: var(--surface);
		border-radius: 100px;
		letter-spacing: 0.06em;
	}

	#hr-advisory .hv-score-row {
		display: flex;
		align-items: center;
		gap: 1.2rem;
	}

	#hr-advisory .hv-score-circle {
		position: relative;
		width: 110px;
		height: 110px;
		flex-shrink: 0;
	}

	#hr-advisory .hv-score-circle svg {
		width: 100%;
		height: 100%;
	}

	#hr-advisory .hv-score-text-overlay {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	#hr-advisory .hv-score-num {
		font-family: var(--serif);
		font-style: italic;
		font-size: 2.4rem;
		font-weight: 400;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		display: block;
		line-height: 1;
		letter-spacing: -0.02em;
	}

	#hr-advisory .hv-score-out {
		font-size: 0.55rem;
		color: var(--text-dim);
		letter-spacing: 0.12em;
		font-weight: 700;
		text-transform: uppercase;
	}

	#hr-advisory .hv-score-info {
		flex-grow: 1;
	}

	#hr-advisory .hv-score-info-label {
		font-size: 0.62rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		color: var(--text-mute);
		text-transform: uppercase;
		margin-bottom: 6px;
	}

	#hr-advisory .hv-score-info-status {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.05rem;
		color: var(--text);
		font-weight: 400;
		margin-bottom: 8px;
	}

	#hr-advisory .hv-score-info-trend {
		font-size: 0.7rem;
		font-weight: 700;
		color: var(--emerald);
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}

	#hr-advisory .hv-bars {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	#hr-advisory .hv-bar-row {
		display: grid;
		grid-template-columns: 75px 1fr 22px;
		gap: 0.55rem;
		align-items: center;
		font-size: 0.7rem;
	}

	#hr-advisory .hv-bar-row-label {
		color: var(--text-mute);
		font-weight: 500;
	}

	#hr-advisory .hv-bar-row-val {
		font-family: var(--serif);
		font-style: italic;
		color: var(--text);
		font-weight: 500;
		font-size: 0.85rem;
		text-align: right;
	}

	#hr-advisory .hv-bar {
		height: 5px;
		background: var(--surface);
		border-radius: 100px;
		overflow: hidden;
	}

	#hr-advisory .hv-bar>div {
		height: 100%;
		border-radius: 100px;
		animation: barFill 1.4s ease-out forwards;
		transform-origin: left;
	}

	@keyframes barFill {
		from {
			transform: scaleX(0);
		}

		to {
			transform: scaleX(1);
		}
	}

	#hr-advisory .hv-recs {
		padding-top: 1rem;
		border-top: 1px solid var(--border);
	}

	#hr-advisory .hv-recs-label {
		font-size: 0.62rem;
		font-weight: 800;
		letter-spacing: 0.18em;
		color: var(--gold);
		margin-bottom: 0.6rem;
		display: flex;
		align-items: center;
		gap: 0.4rem;
	}

	#hr-advisory .hv-recs-label::before {
		content: "";
		width: 6px;
		height: 6px;
		background: var(--gold);
		border-radius: 50%;
		box-shadow: 0 0 8px var(--gold);
	}

	#hr-advisory .hv-recs ul {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		list-style: none;
		padding: 0;
	}

	#hr-advisory .hv-recs li {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		font-size: 0.78rem;
		color: var(--text);
		font-weight: 500;
		line-height: 1.35;
	}

	#hr-advisory .hv-recs li::before {
		content: "";
		width: 14px;
		height: 14px;
		flex-shrink: 0;
		border-radius: 4px;
		background: rgba(16, 229, 160, 0.15);
		border: 1px solid rgba(16, 229, 160, 0.4);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310E5A0' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 9px;
	}

	#hr-advisory .hero-visual-badge {
		position: absolute;
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
		padding: 0.5rem 0.9rem;
		background: rgba(15, 22, 41, 0.95);
		border: 1px solid var(--border-bright);
		border-radius: 100px;
		font-size: 0.75rem;
		font-weight: 700;
		color: var(--text);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
		animation: float 6s ease-in-out infinite;
		z-index: 3;
	}

	[data-theme="light"] #hr-advisory .hero-visual-badge {
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 12px 30px rgba(10, 14, 26, 0.12);
	}

	#hr-advisory .hero-visual-badge .badge-dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		box-shadow: 0 0 10px currentColor;
	}

	#hr-advisory .hero-visual-badge-1 {
		top: 6%;
		left: -12%;
		color: var(--cyan);
		animation-delay: 0s;
	}

	#hr-advisory .hero-visual-badge-2 {
		top: 38%;
		right: -10%;
		color: var(--violet);
		animation-delay: 1.5s;
	}

	#hr-advisory .hero-visual-badge-3 {
		bottom: 8%;
		left: -8%;
		color: var(--emerald);
		animation-delay: 3s;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10px);
		}
	}

	/* INTRO */
	#hr-advisory .advisory-intro {
		background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
	}

	#hr-advisory .intro-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	@media (min-width: 900px) {
		#hr-advisory .intro-grid {
			grid-template-columns: 1fr 1.4fr;
			gap: 5rem;
			align-items: start;
		}
	}

	#hr-advisory .intro-header {
		position: sticky;
		top: 6rem;
	}

	#hr-advisory .intro-header h2 {
		font-family: var(--serif);
		font-size: clamp(2rem, 4vw, 3rem);
		font-weight: 400;
		letter-spacing: -0.025em;
		line-height: 1.1;
		margin-top: 0.8rem;
	}

	#hr-advisory .intro-header h2 .italic {
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	#hr-advisory .intro-body {
		display: flex;
		flex-direction: column;
		gap: 1.6rem;
	}

	#hr-advisory .intro-body p {
		font-size: clamp(1rem, 1.3vw, 1.1rem);
		line-height: 1.7;
		color: var(--text);
	}

	#hr-advisory .intro-body p:first-child::first-letter {
		font-family: var(--serif);
		font-style: italic;
		font-size: 3.5em;
		float: left;
		line-height: 0.85;
		margin: 0.05em 0.12em 0 0;
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: 400;
	}

	#hr-advisory .intro-body p strong {
		color: var(--text);
		font-weight: 700;
	}

	#hr-advisory .intro-body a {
		color: var(--cyan);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
		transition: color 0.2s;
	}

	#hr-advisory .intro-body a:hover {
		color: var(--electric);
	}

	/* ENGAGEMENT JOURNEY */
	#hr-advisory .journey-section {
		background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 50%, var(--bg) 100%);
		position: relative;
		overflow: hidden;
	}

	#hr-advisory .journey-bg-grid {
		position: absolute;
		inset: 0;
		background-image:
			radial-gradient(circle at 10% 30%, rgba(77, 142, 255, 0.06), transparent 40%),
			radial-gradient(circle at 90% 70%, rgba(168, 85, 247, 0.06), transparent 40%);
		pointer-events: none;
	}

	#hr-advisory .journey-timeline {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
		z-index: 1;
	}

	@media (min-width: 700px) {
		#hr-advisory .journey-timeline {
			grid-template-columns: repeat(2, 1fr);
			gap: 2.5rem 2rem;
		}
	}

	@media (min-width: 1100px) {
		#hr-advisory .journey-timeline {
			grid-template-columns: repeat(4, 1fr);
			gap: 1.5rem;
		}
	}

	#hr-advisory .journey-track {
		position: absolute;
		top: 30px;
		left: 5%;
		right: 5%;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--electric), var(--violet), var(--magenta), transparent);
		z-index: 0;
		display: none;
	}

	@media (min-width: 1100px) {
		#hr-advisory .journey-track {
			display: block;
		}
	}

	#hr-advisory .journey-step {
		position: relative;
		z-index: 1;
	}

	#hr-advisory .journey-step-num {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.5rem;
		font-weight: 400;
		color: white;
		background: var(--gradient-electric);
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 1.4rem;
		box-shadow: 0 8px 24px rgba(77, 142, 255, 0.4);
		border: 3px solid var(--bg);
		position: relative;
		z-index: 2;
	}

	#hr-advisory .journey-step:nth-child(2) .journey-step-num {
		background: linear-gradient(135deg, #4D8EFF, #A855F7);
		box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
	}

	#hr-advisory .journey-step:nth-child(3) .journey-step-num {
		background: linear-gradient(135deg, #A855F7, #EC4899);
		box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4);
	}

	#hr-advisory .journey-step:nth-child(4) .journey-step-num {
		background: linear-gradient(135deg, #EC4899, #FFB800);
		box-shadow: 0 8px 24px rgba(255, 184, 0, 0.4);
	}

	#hr-advisory .journey-step-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--bg-deep) 100%);
		border: 1px solid var(--border);
		border-radius: 16px;
		padding: 1.6rem;
		height: 100%;
		display: flex;
		flex-direction: column;
		transition: all 0.4s ease;
	}

	#hr-advisory .journey-step:hover .journey-step-card {
		border-color: rgba(77, 142, 255, 0.4);
		transform: translateY(-4px);
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
	}

	[data-theme="light"] #hr-advisory .journey-step-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
	}

	#hr-advisory .journey-step-icon {
		width: 38px;
		height: 38px;
		border-radius: 10px;
		background: var(--surface-2);
		border: 1px solid var(--border-bright);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--cyan);
		margin-bottom: 0.9rem;
		transition: all 0.3s;
	}

	#hr-advisory .journey-step:hover .journey-step-icon {
		background: var(--gradient-electric);
		color: white;
		border-color: transparent;
	}

	#hr-advisory .journey-step-icon svg {
		width: 18px;
		height: 18px;
	}

	#hr-advisory .journey-step-time {
		font-size: 0.65rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--cyan);
		margin-bottom: 0.5rem;
		display: block;
	}

	#hr-advisory .journey-step-title {
		font-family: var(--serif);
		font-size: 1.3rem;
		font-weight: 400;
		letter-spacing: -0.01em;
		margin-bottom: 0.65rem;
	}

	#hr-advisory .journey-step-desc {
		font-size: 0.85rem;
		color: var(--text-mute);
		line-height: 1.55;
		margin-bottom: 1.2rem;
		flex-grow: 1;
	}

	#hr-advisory .journey-step-deliverable {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 0.9rem;
		border-top: 1px dashed var(--border);
		gap: 0.7rem;
	}

	#hr-advisory .journey-deliv-label {
		font-size: 0.6rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--text-dim);
	}

	#hr-advisory .journey-deliv-text {
		font-size: 0.8rem;
		font-weight: 700;
		color: var(--text);
		font-style: italic;
		font-family: var(--serif);
	}

	#hr-advisory .journey-summary {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
		margin-top: 3rem;
		padding-top: 2.5rem;
		border-top: 1px solid var(--border);
	}

	@media (min-width: 700px) {
		#hr-advisory .journey-summary {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	#hr-advisory .journey-summary-pill {
		text-align: center;
		padding: 1.2rem;
	}

	#hr-advisory .journey-summary-num {
		font-family: var(--serif);
		font-size: 2.5rem;
		font-weight: 400;
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		display: block;
		line-height: 1;
		letter-spacing: -0.025em;
		margin-bottom: 0.5rem;
	}

	#hr-advisory .journey-summary-num .italic {
		font-style: italic;
	}

	#hr-advisory .journey-summary-label {
		font-size: 0.78rem;
		color: var(--text-mute);
		letter-spacing: 0.04em;
	}

	/* ADVISORY SERVICE CARDS (renamed from .service-card to avoid conflict) */
	#hr-advisory .advisory-services {
		background: var(--bg);
	}

	#hr-advisory .adv-services-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	@media (min-width: 700px) {
		#hr-advisory .adv-services-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1200px) {
		#hr-advisory .adv-services-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	#hr-advisory .adv-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--bg-deep) 100%);
		border: 1px solid var(--border);
		border-radius: 22px;
		overflow: hidden;
		transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
		display: flex;
		flex-direction: column;
		position: relative;
		scroll-margin-top: 100px;
	}

	[data-theme="light"] #hr-advisory .adv-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
		box-shadow: 0 4px 20px rgba(10, 14, 26, 0.04);
	}

	#hr-advisory .adv-card:hover {
		transform: translateY(-6px);
		border-color: rgba(77, 142, 255, 0.4);
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 60px rgba(77, 142, 255, 0.1);
	}

	#hr-advisory .adv-card:target {
		border-color: rgba(77, 142, 255, 0.6);
		box-shadow: 0 0 0 4px rgba(77, 142, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 80px rgba(77, 142, 255, 0.25);
		animation: targetGlowAdv 2s ease-out;
	}

	@keyframes targetGlowAdv {
		0% {
			box-shadow: 0 0 0 0 rgba(77, 142, 255, 0.7);
		}

		100% {
			box-shadow: 0 0 0 4px rgba(77, 142, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 80px rgba(77, 142, 255, 0.25);
		}
	}

	#hr-advisory .adv-visual {
		position: relative;
		height: 180px;
		background: linear-gradient(135deg, var(--mod-c1, #4D8EFF), var(--mod-c2, #00D4FF));
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	#hr-advisory .adv-visual::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.25) 0%, transparent 45%),
			radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.18) 0%, transparent 45%);
		pointer-events: none;
	}

	#hr-advisory .adv-visual::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
		background-size: 26px 26px;
		mask-image: linear-gradient(135deg, black, transparent 75%);
		-webkit-mask-image: linear-gradient(135deg, black, transparent 75%);
		pointer-events: none;
	}

	#hr-advisory .adv-illus {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		pointer-events: none;
		transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	#hr-advisory .adv-card:hover .adv-illus {
		transform: scale(1.05);
	}

	#hr-advisory .adv-number {
		position: absolute;
		top: 16px;
		left: 16px;
		z-index: 2;
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.4rem;
		font-weight: 400;
		color: white;
		letter-spacing: -0.02em;
		background: rgba(0, 0, 0, 0.35);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		width: 44px;
		height: 44px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(255, 255, 255, 0.2);
	}

	#hr-advisory .adv-body {
		padding: 1.6rem 1.6rem 1.4rem;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	#hr-advisory .adv-card h3 {
		font-family: var(--serif);
		font-size: 1.6rem;
		font-weight: 400;
		letter-spacing: -0.01em;
		line-height: 1.15;
		margin-bottom: 0.8rem;
	}

	#hr-advisory .adv-card h3 .italic {
		font-style: italic;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	#hr-advisory .adv-desc {
		font-size: 0.92rem;
		color: var(--text-mute);
		line-height: 1.6;
		margin-bottom: 1.4rem;
		flex-grow: 1;
	}

	#hr-advisory .adv-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin-bottom: 1.4rem;
	}

	#hr-advisory .adv-tag {
		font-size: 0.65rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--text-mute);
		padding: 0.3rem 0.65rem;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 100px;
	}

	#hr-advisory .adv-link {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		font-size: 0.88rem;
		font-weight: 700;
		color: var(--cyan);
		margin-top: auto;
		transition: gap 0.25s ease, color 0.2s;
	}

	#hr-advisory .adv-card:hover .adv-link {
		gap: 0.7rem;
		color: var(--electric);
	}

	/* TESTIMONIAL */
	#hr-advisory .testimonial-section-adv {
		background: var(--bg);
		padding: clamp(3rem, 7vw, 5rem) 0;
	}

	#hr-advisory .testimonial-card-adv {
		position: relative;
		background: linear-gradient(135deg, rgba(77, 142, 255, 0.1) 0%, rgba(168, 85, 247, 0.06) 100%);
		border: 1px solid rgba(77, 142, 255, 0.25);
		border-radius: 28px;
		padding: clamp(2.5rem, 5vw, 4rem);
		overflow: hidden;
	}

	#hr-advisory .testimonial-bg-adv {
		position: absolute;
		inset: 0;
		background-image:
			radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.15), transparent 50%),
			radial-gradient(circle at 20% 80%, rgba(77, 142, 255, 0.1), transparent 50%);
		pointer-events: none;
	}

	#hr-advisory .testimonial-content-adv {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.5rem;
		align-items: center;
		max-width: 900px;
		margin: 0 auto;
	}

	#hr-advisory .testimonial-quote-mark-adv {
		width: 60px;
		height: 48px;
		display: block;
	}

	#hr-advisory .testimonial-quote-adv {
		font-family: var(--serif);
		font-size: clamp(1.6rem, 3.3vw, 2.6rem);
		font-weight: 400;
		line-height: 1.25;
		letter-spacing: -0.015em;
		color: var(--text);
	}

	#hr-advisory .testimonial-quote-adv .italic {
		font-style: italic;
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	#hr-advisory .testimonial-author-adv {
		display: flex;
		align-items: center;
		gap: 1rem;
		flex-wrap: wrap;
	}

	#hr-advisory .testimonial-avatar-adv {
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: var(--gradient-electric);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.5rem;
		color: white;
		font-weight: 500;
		box-shadow: 0 8px 20px rgba(77, 142, 255, 0.4);
	}

	#hr-advisory .testimonial-author-info-adv {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	#hr-advisory .testimonial-author-name-adv {
		font-size: 1rem;
		font-weight: 700;
		color: var(--text);
	}

	#hr-advisory .testimonial-author-role-adv {
		font-size: 0.85rem;
		color: var(--text-mute);
	}

	#hr-advisory .testimonial-badge-adv {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.4rem 0.8rem;
		background: rgba(16, 229, 160, 0.12);
		border: 1px solid rgba(16, 229, 160, 0.4);
		border-radius: 100px;
		font-size: 0.7rem;
		font-weight: 700;
		color: var(--emerald);
		letter-spacing: 0.06em;
	}

	#hr-advisory .testimonial-badge-dot-adv {
		width: 6px;
		height: 6px;
		background: var(--emerald);
		border-radius: 50%;
		box-shadow: 0 0 8px var(--emerald);
	}

	/* ADVISORY STATS */
	#hr-advisory .advisory-stats {
		background: linear-gradient(135deg, rgba(77, 142, 255, 0.06) 0%, rgba(168, 85, 247, 0.04) 100%);
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		padding: clamp(3rem, 6vw, 5rem) 0;
	}

	#hr-advisory .stats-eyebrow {
		text-align: center;
		margin-bottom: 2.5rem;
	}

	#hr-advisory .stats-eyebrow h3 {
		font-family: var(--serif);
		font-size: clamp(1.6rem, 3vw, 2.4rem);
		font-weight: 400;
		letter-spacing: -0.02em;
		margin-top: 0.8rem;
	}

	#hr-advisory .stats-eyebrow h3 .italic {
		background: var(--gradient-aurora);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	#hr-advisory .adv-stats-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	@media (min-width: 700px) {
		#hr-advisory .adv-stats-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	#hr-advisory .adv-stat-card {
		text-align: center;
		padding: 2rem 1.5rem;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 18px;
		transition: all 0.4s ease;
	}

	#hr-advisory .adv-stat-card:hover {
		border-color: rgba(77, 142, 255, 0.35);
		transform: translateY(-4px);
		background: var(--surface-2);
	}

	#hr-advisory .adv-stat-num {
		font-family: var(--serif);
		font-style: italic;
		font-size: clamp(3rem, 6vw, 4.5rem);
		font-weight: 400;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		display: block;
		line-height: 1;
		letter-spacing: -0.025em;
		margin-bottom: 0.7rem;
	}

	#hr-advisory .adv-stat-num.violet {
		background: linear-gradient(135deg, var(--violet), var(--magenta));
		-webkit-background-clip: text;
		background-clip: text;
	}

	#hr-advisory .adv-stat-num.emerald {
		background: var(--gradient-emerald);
		-webkit-background-clip: text;
		background-clip: text;
	}

	#hr-advisory .adv-stat-label {
		font-size: 0.88rem;
		color: var(--text-mute);
		line-height: 1.45;
		max-width: 26ch;
		margin: 0 auto;
	}

	/* DIFFERENTIATORS */
	#hr-advisory .differentiators {
		background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
	}

	#hr-advisory .diff-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.4rem;
	}

	@media (min-width: 700px) {
		#hr-advisory .diff-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1100px) {
		#hr-advisory .diff-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	#hr-advisory .diff-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--bg-deep) 100%);
		border: 1px solid var(--border);
		border-radius: 20px;
		padding: 2rem 1.6rem;
		transition: all 0.4s ease;
		display: flex;
		flex-direction: column;
	}

	[data-theme="light"] #hr-advisory .diff-card {
		background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
	}

	#hr-advisory .diff-card:hover {
		transform: translateY(-6px);
		border-color: rgba(77, 142, 255, 0.4);
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 50px rgba(77, 142, 255, 0.1);
	}

	#hr-advisory .diff-icon {
		width: 56px;
		height: 56px;
		border-radius: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		margin-bottom: 1.4rem;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
		transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	#hr-advisory .diff-card:hover .diff-icon {
		transform: scale(1.1) rotate(-5deg);
	}

	#hr-advisory .diff-icon svg {
		width: 26px;
		height: 26px;
	}

	#hr-advisory .diff-card h4 {
		font-family: var(--serif);
		font-size: 1.4rem;
		font-weight: 400;
		letter-spacing: -0.01em;
		line-height: 1.2;
		margin-bottom: 0.8rem;
	}

	#hr-advisory .diff-card h4 .italic {
		font-style: italic;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	#hr-advisory .diff-card p {
		font-size: 0.88rem;
		color: var(--text-mute);
		line-height: 1.6;
		margin-bottom: 1.4rem;
		flex-grow: 1;
	}

	#hr-advisory .diff-stat {
		padding-top: 1rem;
		border-top: 1px solid var(--border);
		font-size: 0.75rem;
		color: var(--text-mute);
	}

	#hr-advisory .diff-stat strong {
		color: var(--text);
		font-weight: 700;
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.1em;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-left: 4px;
	}

	/* SECTION HEADER ADJUSTMENTS */
	#hr-advisory .section-header {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.4rem;
		align-items: end;
		margin-bottom: clamp(2.5rem, 5vw, 4rem);
	}

	@media (min-width: 900px) {
		#hr-advisory .section-header {
			grid-template-columns: 1.2fr 1fr;
			gap: 3rem;
		}
	}






	/* ============ TRUST-FORWARD FOOTER (Pattern B) ============ */
	.altf {
		font-family: var(--font-sans);
		padding: clamp(3rem, 5vw, 4.5rem) 0 2rem;
		background: color-mix(in srgb, var(--text) 2.5%, var(--bg));
		border-top: 1px solid var(--border);
	}

	.altf-wrap {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 clamp(1.4rem, 4vw, 2.4rem);
	}

	/* === 1. FEATURED CTA BANNER === */
	.altf-cta {
		margin-bottom: 2.5rem;
		padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.4rem);
		background: linear-gradient(135deg,
				color-mix(in srgb, var(--electric) 8%, transparent),
				color-mix(in srgb, #00D4FF 6%, transparent));
		border: 1px solid color-mix(in srgb, var(--electric) 22%, transparent);
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		flex-wrap: wrap;
		position: relative;
		overflow: hidden;
	}

	.altf-cta::before {
		content: "";
		position: absolute;
		top: 0;
		left: 10%;
		right: 10%;
		height: 1px;
		background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--electric) 60%, transparent), transparent);
	}

	.altf-cta-text {
		flex: 1;
		min-width: 280px;
	}

	.altf-cta-eb {
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--electric);
		margin: 0 0 0.7rem;
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
	}

	.altf-cta-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--electric);
		box-shadow: 0 0 8px var(--electric);
	}

	.altf-cta-title {
		font-family: var(--serif);
		font-style: italic;
		font-weight: 400;
		font-size: clamp(1.4rem, 2.4vw, 1.85rem);
		color: var(--text);
		margin: 0 0 0.45rem;
		line-height: 1.2;
		letter-spacing: -0.01em;
	}

	.altf-cta-title em {
		font-style: italic;
		color: var(--electric);
	}

	.altf-cta-sub {
		font-size: 0.95rem;
		color: var(--text-dim);
		margin: 0;
		line-height: 1.45;
	}

	.altf-cta-btns {
		display: flex;
		gap: 0.6rem;
		align-items: center;
		flex-wrap: wrap;
	}

	.altf-cta-btn {
		padding: 0.8rem 1.4rem;
		border-radius: 999px;
		font-size: 0.92rem;
		font-weight: 600;
		text-decoration: none;
		transition: all 0.2s;
		white-space: nowrap;
	}

	.altf-cta-btn.primary {
		background: var(--text);
		color: var(--bg);
	}

	.altf-cta-btn.primary:hover {
		transform: translateY(-1px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	}

	.altf-cta-btn.ghost {
		border: 1px solid var(--border-bright);
		color: var(--text-dim);
	}

	.altf-cta-btn.ghost:hover {
		color: var(--text);
		border-color: var(--text-mute);
	}

	/* === 2. TRUST STRIP === */
	.altf-trust {
		padding: 1.2rem 0;
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
		flex-wrap: wrap;
		margin-bottom: 2.5rem;
	}

	.altf-trust-label {
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--text);
		margin: 0;
	}

	.altf-trust-items {
		display: flex;
		gap: 1.5rem;
		align-items: center;
		flex-wrap: wrap;
	}

	.altf-trust-item {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		font-family: var(--serif);
		font-style: italic;
		font-size: 0.96rem;
		color: var(--text-dim);
	}

	.altf-trust-dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--electric);
	}

	.altf-trust-dot.green {
		background: #0EA88A;
	}

	.altf-trust-dot.violet {
		background: #8B5CD6;
	}

	.altf-trust-dot.amber {
		background: #C9930E;
	}

	/* === 3. LINK GRID === */
	.altf-links {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
		margin-bottom: 2.5rem;
	}

	@media (min-width: 760px) {
		.altf-links {
			grid-template-columns: 1.3fr repeat(3, 1fr);
			gap: 2.5rem;
		}
	}

	.altf-brand-col {
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
	}

	.altf-brand-logo {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.7rem;
		font-weight: 400;
		letter-spacing: -0.02em;
		color: var(--text);
		text-decoration: none;
		margin: 0;
		display: inline-block;
		line-height: 1;
	}

	.altf-brand-tag {
		font-family: var(--serif);
		font-size: 1rem;
		line-height: 1.55;
		color: var(--text-dim);
		margin: 0;
		max-width: 280px;
	}

	.altf-newsletter {
		display: flex;
		align-items: center;
		border: 1px solid var(--border-bright);
		border-radius: 999px;
		padding: 0.3rem 0.3rem 0.3rem 1rem;
		background: rgba(255, 255, 255, 0.025);
		max-width: 320px;
		margin-top: 0.6rem;
		transition: border-color 0.2s;
	}

	.altf-newsletter:focus-within {
		border-color: var(--electric);
	}

	.altf-newsletter input {
		flex: 1;
		background: transparent;
		border: 0;
		padding: 0.5rem 0;
		font-size: 0.92rem;
		color: var(--text);
		outline: none;
		font-family: var(--font-sans);
		min-width: 0;
	}

	.altf-newsletter input::placeholder {
		color: var(--text-mute);
	}

	.altf-newsletter button {
		background: var(--text);
		color: var(--bg);
		border: 0;
		padding: 0.55rem 1.1rem;
		border-radius: 999px;
		font-size: 0.85rem;
		font-weight: 600;
		cursor: pointer;
		transition: transform 0.2s;
		white-space: nowrap;
	}

	.altf-newsletter button:hover {
		transform: translateY(-1px);
	}

	.altf-col-title {
		font-size: 0.74rem;
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--text);
		margin: 0 0 1rem;
	}

	.altf-col-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}

	.altf-col-list a {
		font-family: var(--serif);
		font-size: 1rem;
		color: var(--text-dim);
		text-decoration: none;
		transition: color 0.2s, padding-left 0.2s;
		display: inline-block;
	}

	.altf-col-list a:hover {
		color: var(--electric);
		padding-left: 0.2rem;
	}

	/* === 4. CREDITS === */
	.altf-credits {
		padding-top: 1.5rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 1rem;
		font-size: 0.92rem;
		color: var(--text-mute);
		border-top: 1px solid var(--border);
		font-family: var(--serif);
		font-style: italic;
	}

	.altf-credits-left {
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
		align-items: center;
	}

	.altf-credits-left a {
		color: var(--text-mute);
		text-decoration: none;
		font-style: italic;
		transition: color 0.2s;
	}

	.altf-credits-left a:hover {
		color: var(--text);
	}

	.altf-credits-social {
		display: flex;
		gap: 0.5rem;
		align-items: center;
		flex-wrap: wrap;
	}

	.altf-credits-social a {
		width: 36px;
		height: 36px;
		border-radius: 10px;
		border: 1px solid var(--border-bright);
		background: rgba(255, 255, 255, 0.025);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--text-mute);
		text-decoration: none;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.altf-credits-social a::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, var(--electric), #00D4FF);
		opacity: 0;
		transition: opacity 0.3s;
	}

	.altf-credits-social a:hover {
		border-color: transparent;
		color: white;
		transform: translateY(-2px);
		box-shadow: 0 6px 16px color-mix(in srgb, var(--electric) 25%, transparent);
	}

	.altf-credits-social a:hover::before {
		opacity: 1;
	}

	.altf-credits-social svg {
		width: 15px;
		height: 15px;
		position: relative;
		z-index: 1;
	}

	/* Light theme overrides */
	[data-theme="light"] .altf {
		background: color-mix(in srgb, var(--text) 2.5%, var(--bg));
	}

	[data-theme="light"] .altf-newsletter {
		background: white;
	}

	[data-theme="light"] .altf-credits-social a {
		background: rgba(10, 14, 26, 0.02);
	}


	/* ============ CASE STUDY BRAND MARKS ============ */
	.case-brand-mark {
		display: inline-flex;
		align-items: center;
		gap: 0.7rem;
		margin-bottom: 0.9rem;
		padding-top: 1rem;
		border-top: 1px solid var(--border);
		width: 100%;
	}

	.case-brand-icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		background: color-mix(in srgb, var(--mark-c) 16%, transparent);
		border: 1px solid color-mix(in srgb, var(--mark-c) 32%, transparent);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--mark-c);
		flex-shrink: 0;
	}

	.case-brand-icon svg {
		width: 17px;
		height: 17px;
	}

	.case-brand-text {
		display: flex;
		flex-direction: column;
		gap: 1px;
		line-height: 1.15;
	}

	.case-brand-name {
		font-family: var(--serif);
		font-style: italic;
		font-weight: 400;
		font-size: 1.05rem;
		color: var(--text);
		letter-spacing: -0.012em;
	}

	.case-brand-tag {
		font-size: 0.66rem;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--mark-c);
	}

	.case-meta {
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
	}


	/* === Hero stat italic-word variant === */
	.hero-meta-item .num em {
		font-family: var(--serif);
		font-style: italic;
		font-weight: 400;
		letter-spacing: -0.02em;
	}


	/* ============ REDESIGNED STATS BAND (positioning grid) ============ */
	.stats-band {
		padding: clamp(4rem, 7vw, 6rem) 0;
		position: relative;
		background: transparent;
		border-top: 1px solid var(--border);
	}

	.stats-band-header {
		text-align: center;
		margin: 0 auto clamp(3rem, 5vw, 4rem);
		max-width: 640px;
		padding: 0 clamp(1.4rem, 4vw, 2.4rem);
	}

	.stats-band-eb {
		display: inline-flex;
		align-items: center;
		gap: 0.7rem;
		font-size: 0.74rem;
		font-weight: 700;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--text-mute);
		margin: 0 0 1.4rem;
	}

	.stats-band-eb::before,
	.stats-band-eb::after {
		content: "";
		width: 26px;
		height: 1px;
		background: currentColor;
		opacity: 0.45;
	}

	.stats-band-title {
		font-family: var(--serif);
		font-style: italic;
		font-weight: 400;
		font-size: clamp(1.8rem, 3.4vw, 2.6rem);
		line-height: 1.15;
		color: var(--text);
		letter-spacing: -0.02em;
		margin: 0;
	}

	.stats-band-title em {
		font-style: italic;
		color: var(--electric);
	}

	.stats-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 clamp(1.4rem, 4vw, 2.4rem);
		border-top: 1px solid var(--border);
	}

	@media (min-width: 760px) {
		.stats-grid {
			grid-template-columns: repeat(4, 1fr);
			border-top: none;
		}
	}

	.stat-card {
		padding: clamp(2rem, 4vw, 3rem) clamp(1.2rem, 2.5vw, 2rem);
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		border-bottom: 1px solid var(--border);
		transition: background 0.4s;
	}

	@media (min-width: 760px) {
		.stat-card {
			border-bottom: none;
			border-right: 1px solid var(--border);
		}

		.stat-card:last-child {
			border-right: none;
		}
	}

	.stat-card::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 36px;
		height: 2px;
		background: var(--stat-c, var(--electric));
		transition: width 0.5s ease;
	}

	.stat-card:hover::before {
		width: calc(100% - 2.4rem);
	}

	.stat-card:hover {
		background: color-mix(in srgb, var(--stat-c) 4%, transparent);
	}

	.stat-num {
		font-family: var(--serif);
		font-style: italic;
		font-weight: 400;
		font-size: clamp(3rem, 5.5vw, 4.4rem);
		line-height: 0.95;
		color: var(--stat-c, var(--electric));
		letter-spacing: -0.04em;
		margin: 0;
	}

	.stat-num em {
		font-style: italic;
		color: inherit;
	}

	.stat-eyebrow {
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--text);
		margin: 0;
	}

	.stat-label {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.02rem;
		line-height: 1.5;
		color: var(--text-dim);
		margin: 0;
		font-weight: 400;
	}

	.stat-label strong {
		font-style: normal;
		color: var(--text);
		font-weight: 600;
	}

	.stat-card-tag {
		margin-top: auto;
		padding-top: 0.8rem;
		border-top: 1px solid var(--border);
		font-size: 0.68rem;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--stat-c, var(--electric));
	}


	/* ============================================
   SAP SUCCESSFACTORS SCALE (FAST FACTS)
   Visually distinct from #credentials —
   smaller, sans-serif, more "data" than "editorial"
   ============================================ */
	.sap-scale {
		padding: clamp(3.5rem, 6.5vw, 5rem) 0;
		background: var(--surface);
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		position: relative;
		overflow: hidden;
	}

	.sap-scale::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 720px;
		height: 280px;
		transform: translateX(-50%);
		background: radial-gradient(ellipse at center top, rgba(77, 142, 255, 0.07), transparent 70%);
		pointer-events: none;
	}

	.sap-scale-header {
		text-align: center;
		max-width: 720px;
		margin: 0 auto 3rem;
		position: relative;
	}

	.sap-scale-header .eyebrow {
		justify-content: center;
		margin-bottom: 0.9rem;
	}

	.sap-scale-title {
		font-family: var(--serif);
		font-size: clamp(1.6rem, 3.2vw, 2.3rem);
		line-height: 1.2;
		font-weight: 400;
		color: var(--text);
		letter-spacing: -0.01em;
		margin: 0.4rem 0 1rem;
	}

	.sap-scale-title .italic {
		font-style: italic;
		background: var(--gradient-electric);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.sap-scale-intro {
		font-size: 0.95rem;
		color: var(--text-mute);
		line-height: 1.55;
		margin: 0;
	}

	.sap-scale-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem 2.4rem;
		position: relative;
		max-width: 1100px;
		margin: 0 auto;
	}

	@media (min-width: 880px) {
		.sap-scale-grid {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	.sap-scale-stat {
		text-align: left;
		position: relative;
	}

	.sap-scale-num {
		font-size: clamp(2.2rem, 4.5vw, 3.2rem);
		line-height: 1;
		font-weight: 800;
		color: var(--electric);
		letter-spacing: -0.025em;
		margin-bottom: 0.7rem;
		display: inline-flex;
		align-items: baseline;
	}

	.sap-scale-suffix,
	.sap-scale-unit {
		font-size: 0.55em;
		font-weight: 700;
		margin-left: 0.05em;
		letter-spacing: 0;
	}

	.sap-scale-asterisk {
		font-size: 0.45em;
		font-weight: 600;
		vertical-align: super;
		color: var(--text-mute);
		margin-left: 0.12em;
	}

	.sap-scale-label {
		font-size: 0.88rem;
		color: var(--text-mute);
		line-height: 1.5;
		font-weight: 500;
		max-width: 23ch;
	}

	.sap-scale-footer {
		margin-top: 2.8rem;
		padding-top: 1.4rem;
		border-top: 1px solid var(--border);
		font-size: 0.72rem;
		color: var(--text-dim);
		line-height: 1.6;
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}

	.sap-scale-source {
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--text-dim);
	}

	.sap-scale-caveat {
		font-style: italic;
		opacity: 0.85;
	}

	/* Light theme override */
	[data-theme="light"] .sap-scale {
		background: var(--surface);
	}

	[data-theme="light"] .sap-scale::before {
		background: radial-gradient(ellipse at center top, rgba(77, 142, 255, 0.10), transparent 70%);
	}


	/* ============================================
   FEATURED READING (real published Insights content)
   Lives inside #insights, below the differentiator cards
   ============================================ */
	.featured-reading {
		margin-top: 4.5rem;
		padding-top: 3rem;
		border-top: 1px solid var(--border);
		position: relative;
	}

	.featured-reading-divider {
		text-align: center;
		margin-bottom: 2.5rem;
		position: relative;
		margin-top: -3.5rem;
	}

	.featured-reading-divider-text {
		display: inline-block;
		padding: 0.45rem 1.2rem;
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: 999px;
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--text-mute);
	}

	.reading-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.4rem;
	}

	@media (min-width: 760px) {
		.reading-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.reading-card {
		display: block;
		text-decoration: none;
		padding: 1.7rem 1.7rem 1.5rem;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
		color: inherit;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.reading-card::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, var(--electric), var(--cyan));
		opacity: 0.55;
		transition: opacity 0.35s ease, height 0.35s ease;
	}

	.reading-card--pdf::before {
		background: linear-gradient(90deg, var(--violet), var(--magenta));
	}

	.reading-card:hover {
		transform: translateY(-3px);
		border-color: var(--border-bright);
		box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
	}

	.reading-card:hover::before {
		opacity: 1;
		height: 3px;
	}

	.reading-card-meta {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		margin-bottom: 0.95rem;
		flex-wrap: wrap;
	}

	.reading-card-type {
		display: inline-block;
		padding: 0.32rem 0.7rem;
		border-radius: 999px;
		font-size: 0.62rem;
		font-weight: 700;
		letter-spacing: 0.11em;
		text-transform: uppercase;
	}

	.reading-card-type.article {
		background: rgba(77, 142, 255, 0.14);
		color: var(--electric);
		border: 1px solid rgba(77, 142, 255, 0.3);
	}

	.reading-card-type.pdf {
		background: rgba(168, 85, 247, 0.14);
		color: var(--violet);
		border: 1px solid rgba(168, 85, 247, 0.3);
	}

	.reading-card-time {
		font-size: 0.7rem;
		color: var(--text-dim);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.reading-card-title {
		font-family: var(--serif);
		font-size: 1.18rem;
		line-height: 1.28;
		font-weight: 400;
		letter-spacing: -0.01em;
		margin: 0 0 0.7rem;
		color: var(--text);
	}

	.reading-card-excerpt {
		font-size: 0.88rem;
		color: var(--text-mute);
		line-height: 1.55;
		margin: 0 0 1.1rem;
	}

	.reading-card-cta {
		display: inline-flex;
		font-size: 0.82rem;
		font-weight: 700;
		color: var(--cyan);
		transition: color 0.2s;
	}

	.reading-card:hover .reading-card-cta {
		color: var(--electric);
	}

	/* Light theme tweaks */
	[data-theme="light"] .featured-reading-divider-text {
		background: var(--bg);
	}


	/* Insights mega-menu — narrative column description */
	.mega-col-desc {
		font-size: 0.85rem;
		line-height: 1.55;
		color: var(--text-mute);
		margin: 0.4rem 0 0;
		max-width: 28ch;
	}


	/* Single-item Insights dropdown — compact width override */
	.mega-menu--single {
		min-width: 360px;
		max-width: 420px;
		left: auto;
		right: 0;
		transform: translateX(0);
	}

	.mega-menu--single .mega-menu-grid {
		grid-template-columns: 1fr;
		padding-bottom: 0;
	}

	.mega-menu--single .mega-list {
		margin-top: 0.6rem;
	}


	/* Accessibility: respect prefers-reduced-motion */
	@media (prefers-reduced-motion: reduce) {

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}

		.marquee-track,
		.ring-pulse,
		.pulse-dot,
		.particle {
			animation: none !important;
		}
	}

	/* Skip-to-content link styling */
	.skip-link {
		position: absolute;
		left: -9999px;
		top: 0;
		z-index: 9999;
		padding: 0.75rem 1.25rem;
		background: #0a0a14;
		color: #f0f0f5;
		text-decoration: none;
		font-weight: 600;
		font-family: 'Manrope', system-ui, sans-serif;
		border: 2px solid #00D4FF;
		border-radius: 8px;
		box-shadow: 0 0 24px rgba(0, 212, 255, 0.4);
	}

	.skip-link:focus {
		left: 1rem;
		top: 1rem;
	}

	/* Screen-reader-only utility */
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	/* Newsletter feedback message */
	.newsletter-feedback {
		width: 100%;
		font-size: 0.78rem;
		margin-top: 0.6rem;
		min-height: 1.2rem;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.newsletter-feedback.success {
		opacity: 1;
		color: var(--emerald, #10E5A0);
	}

	.newsletter-feedback.error {
		opacity: 1;
		color: var(--magenta, #EC4899);
	}

	/* Launcher button */
	.athena-launcher {
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.6rem;
		background: linear-gradient(135deg, #4D8EFF, #A855F7);
		color: #fff;
		border: none;
		padding: 0.85rem 1.2rem 0.85rem 1.05rem;
		border-radius: 999px;
		cursor: pointer;
		box-shadow: 0 12px 32px rgba(77, 142, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.25s ease;
	}

	.athena-launcher:hover {
		transform: translateY(-3px) scale(1.04);
		box-shadow: 0 20px 48px rgba(168, 85, 247, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
	}

	.athena-launcher.hidden {
		opacity: 0;
		pointer-events: none;
		transform: scale(0.85);
	}

	.athena-launcher-halo {
		position: absolute;
		inset: -6px;
		border-radius: 999px;
		background: radial-gradient(circle, rgba(0, 212, 255, 0.45) 0%, transparent 70%);
		z-index: -1;
		animation: athena-pulse 2.5s ease-in-out infinite;
	}

	@keyframes athena-pulse {

		0%,
		100% {
			transform: scale(1);
			opacity: 0.55;
		}

		50% {
			transform: scale(1.18);
			opacity: 0.25;
		}
	}

	.athena-launcher-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
	}

	.athena-launcher-icon svg {
		width: 22px;
		height: 22px;
	}

	.athena-launcher-label {
		font-size: 0.93rem;
		font-weight: 700;
		letter-spacing: -0.005em;
	}



	.athena-panel::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, #00D4FF, #4D8EFF, #A855F7, #EC4899);
		z-index: 2;
	}

	/* Header */
	.athena-header {
		padding: 1rem 1.1rem;
		display: flex;
		align-items: center;
		gap: 0.85rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		background: linear-gradient(180deg, rgba(77, 142, 255, 0.08), transparent);
	}

	.athena-avatar {
		width: 38px;
		height: 38px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #4D8EFF, #A855F7);
		color: #fff;
		flex-shrink: 0;
		box-shadow: 0 4px 16px rgba(168, 85, 247, 0.35);
	}

	.athena-avatar svg {
		width: 20px;
		height: 20px;
	}

	.athena-header-text {
		flex: 1;
		min-width: 0;
	}

	.athena-title {
		font-family: 'Instrument Serif', Georgia, serif;
		font-style: italic;
		font-size: 1.4rem;
		color: #fff;
		line-height: 1;
		margin-bottom: 0.2rem;
	}

	.athena-subtitle {
		font-size: 0.7rem;
		color: rgba(240, 240, 245, 0.55);
		display: flex;
		align-items: center;
		gap: 0.4rem;
		font-weight: 500;
	}

	.athena-status-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #10E5A0;
		box-shadow: 0 0 8px #10E5A0;
		animation: athena-status-pulse 2s ease-in-out infinite;
	}

	@keyframes athena-status-pulse {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}
	}

	.athena-close {
		background: none;
		border: none;
		color: rgba(240, 240, 245, 0.5);
		cursor: pointer;
		padding: 6px;
		border-radius: 8px;
		transition: background 0.2s, color 0.2s;
		flex-shrink: 0;
	}

	.athena-close:hover {
		color: #fff;
		background: rgba(255, 255, 255, 0.08);
	}

	.athena-close svg {
		width: 18px;
		height: 18px;
		display: block;
	}

	/* Messages area */
	.athena-messages {
		flex: 1;
		overflow-y: auto;
		padding: 1.2rem 1.1rem;
		display: flex;
		flex-direction: column;
		gap: 0.85rem;
		scroll-behavior: smooth;
	}

	.athena-messages::-webkit-scrollbar {
		width: 5px;
	}

	.athena-messages::-webkit-scrollbar-track {
		background: transparent;
	}

	.athena-messages::-webkit-scrollbar-thumb {
		background: rgba(168, 85, 247, 0.3);
		border-radius: 999px;
	}

	.athena-msg {
		max-width: 85%;
		padding: 0.7rem 0.95rem;
		border-radius: 14px;
		font-size: 0.88rem;
		line-height: 1.5;
		animation: athena-msg-in 0.3s ease;
	}

	@keyframes athena-msg-in {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.athena-msg.bot {
		align-self: flex-start;
		background: rgba(168, 85, 247, 0.08);
		border: 1px solid rgba(168, 85, 247, 0.18);
		color: #f0f0f5;
		border-bottom-left-radius: 4px;
	}

	.athena-msg.user {
		align-self: flex-end;
		background: linear-gradient(135deg, rgba(0, 212, 255, 0.16), rgba(77, 142, 255, 0.18));
		border: 1px solid rgba(0, 212, 255, 0.28);
		color: #f0f0f5;
		border-bottom-right-radius: 4px;
	}

	.athena-msg.typing {
		display: flex;
		gap: 4px;
		padding: 0.85rem 1rem;
	}

	.athena-msg.typing span {
		width: 6px;
		height: 6px;
		background: rgba(168, 85, 247, 0.7);
		border-radius: 50%;
		animation: athena-bounce 1.2s ease-in-out infinite;
	}

	.athena-msg.typing span:nth-child(2) {
		animation-delay: 0.15s;
	}

	.athena-msg.typing span:nth-child(3) {
		animation-delay: 0.3s;
	}

	@keyframes athena-bounce {

		0%,
		60%,
		100% {
			transform: translateY(0);
			opacity: 0.5;
		}

		30% {
			transform: translateY(-5px);
			opacity: 1;
		}
	}

	/* Suggestion chips */
	.athena-suggestions {
		padding: 0 1.1rem 0.6rem;
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
	}

	.athena-chip {
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.1);
		color: rgba(240, 240, 245, 0.85);
		font-size: 0.72rem;
		padding: 0.4rem 0.7rem;
		border-radius: 999px;
		cursor: pointer;
		font-family: inherit;
		transition: all 0.2s ease;
		font-weight: 500;
	}

	.athena-chip:hover {
		background: rgba(0, 212, 255, 0.12);
		border-color: rgba(0, 212, 255, 0.4);
		color: #fff;
	}

	/* Input row */
	.athena-input-row {
		display: flex;
		gap: 0.5rem;
		padding: 0.9rem 1.1rem;
		border-top: 1px solid rgba(255, 255, 255, 0.06);
	}

	.athena-input-row input {
		flex: 1;
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid rgba(255, 255, 255, 0.1);
		color: #f0f0f5;
		padding: 0.7rem 0.95rem;
		border-radius: 999px;
		font-family: inherit;
		font-size: 0.85rem;
		outline: none;
		transition: border-color 0.2s, background 0.2s;
	}

	.athena-input-row input:focus {
		border-color: rgba(0, 212, 255, 0.5);
		background: rgba(255, 255, 255, 0.06);
	}

	.athena-input-row input::placeholder {
		color: rgba(240, 240, 245, 0.35);
	}

	.athena-input-row button {
		background: linear-gradient(135deg, #00D4FF, #4D8EFF);
		border: none;
		color: #fff;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition: transform 0.2s, box-shadow 0.2s;
		box-shadow: 0 4px 16px rgba(0, 212, 255, 0.35);
	}

	.athena-input-row button:hover {
		transform: scale(1.08);
		box-shadow: 0 6px 22px rgba(0, 212, 255, 0.5);
	}

	.athena-input-row button:active {
		transform: scale(0.95);
	}

	.athena-input-row button svg {
		width: 18px;
		height: 18px;
	}

	/* Footer */
	.athena-footer {
		padding: 0.55rem 1.1rem 0.7rem;
		font-size: 0.65rem;
		color: rgba(240, 240, 245, 0.35);
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.4rem;
		background: rgba(255, 255, 255, 0.02);
	}

	.athena-footer-dot {
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #FFB800;
		box-shadow: 0 0 6px #FFB800;
	}

	/* Mobile */
	@media (max-width: 480px) {


		.athena-launcher-label {
			display: none;
		}

		.athena-launcher {
			padding: 0.85rem;
		}
	}

	/* Live demo badge in the embedded Athena panel */
	.athena-live-badge {
		position: absolute;
		top: 16px;
		right: 16px;
		padding: 0.28rem 0.7rem;
		background: linear-gradient(135deg, rgba(0, 212, 255, 0.18), rgba(77, 142, 255, 0.18));
		border: 1px solid rgba(0, 212, 255, 0.4);
		border-radius: 999px;
		font-size: 0.62rem;
		font-weight: 700;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #00D4FF;
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
	}

	.athena-live-badge::before {
		content: "";
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #10E5A0;
		box-shadow: 0 0 6px #10E5A0;
		animation: athena-live-pulse 2s ease-in-out infinite;
	}

	@keyframes athena-live-pulse {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0.4;
		}
	}

	/* ============================================
   AI READINESS ASSESSMENT — wizard + results
   ============================================ */
	.assessment-section {
		background:
			radial-gradient(ellipse at 80% 20%, rgba(168, 85, 247, 0.10) 0%, transparent 55%),
			radial-gradient(ellipse at 15% 80%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
			transparent;
		position: relative;
	}

	.assessment-section::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, transparent, rgba(77, 142, 255, 0.04));
		pointer-events: none;
	}

	.assessment-section .container {
		position: relative;
		z-index: 1;
		max-width: 920px;
	}

	/* ============ Intro card ============ */
	.assessment-intro {
		text-align: center;
	}

	.assessment-intro .eyebrow {
		margin: 0 auto 1rem;
		justify-content: center;
	}

	.assessment-intro .section-title {
		margin-bottom: 1.2rem;
	}

	.assessment-intro .section-intro {
		max-width: 640px;
		margin: 0 auto 2.5rem;
		text-align: center;
	}

	.assessment-features {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.2rem;
		margin: 2.5rem auto 2.5rem;
		max-width: 720px;
	}

	@media (min-width: 720px) {
		.assessment-features {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.assessment-feature {
		text-align: left;
		display: flex;
		gap: 0.85rem;
		align-items: flex-start;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
		padding: 1.05rem 1.1rem;
	}

	.assessment-feature-icon {
		width: 38px;
		height: 38px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		color: white;
	}

	.assessment-feature-icon svg {
		width: 18px;
		height: 18px;
	}

	.assessment-feature-text strong {
		display: block;
		font-size: 0.92rem;
		font-weight: 700;
		margin-bottom: 0.2rem;
		color: var(--text);
	}

	.assessment-feature-text span {
		font-size: 0.78rem;
		color: var(--text-mute);
		line-height: 1.5;
	}

	.assessment-start-btn {
		font-size: 1rem !important;
		padding: 0.95rem 1.8rem !important;
	}

	.assessment-meta {
		margin-top: 1.4rem;
		display: flex;
		justify-content: center;
		gap: 0.7rem;
		font-size: 0.78rem;
		color: var(--text-dim);
		flex-wrap: wrap;
	}

	/* ============ Wizard ============ */
	.assessment-wizard {
		max-width: 720px;
		margin: 0 auto;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 22px;
		padding: 2rem;
		position: relative;
		overflow: hidden;
	}

	.assessment-wizard::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: linear-gradient(90deg, #00D4FF, #4D8EFF, #A855F7, #EC4899);
	}

	.wizard-progress {
		margin-bottom: 2rem;
	}

	.wizard-progress-track {
		height: 4px;
		background: rgba(255, 255, 255, 0.06);
		border-radius: 999px;
		overflow: hidden;
		margin-bottom: 0.7rem;
	}

	.wizard-progress-fill {
		height: 100%;
		background: linear-gradient(90deg, #00D4FF, #A855F7);
		border-radius: 999px;
		width: 0%;
		transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.wizard-progress-text {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.76rem;
		color: var(--text-dim);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-weight: 600;
	}

	.wizard-exit {
		background: none;
		border: none;
		color: var(--text-dim);
		font-size: 0.76rem;
		cursor: pointer;
		font-family: inherit;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-weight: 600;
	}

	.wizard-exit:hover {
		color: var(--text);
	}

	.wizard-cards {
		position: relative;
		min-height: 360px;
	}

	.wizard-card {
		display: none;
		animation: wizard-fade-in 0.35s ease;
	}

	.wizard-card.active {
		display: block;
	}

	@keyframes wizard-fade-in {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.wizard-card-eyebrow {
		display: inline-block;
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: #00D4FF;
		margin-bottom: 0.7rem;
	}

	.wizard-card-title {
		font-family: var(--serif);
		font-style: italic;
		font-size: clamp(1.5rem, 3vw, 2rem);
		line-height: 1.2;
		font-weight: 400;
		color: var(--text);
		margin-bottom: 0.6rem;
		letter-spacing: -0.01em;
	}

	.wizard-card-sub {
		font-size: 0.9rem;
		color: var(--text-mute);
		margin-bottom: 1.4rem;
		line-height: 1.5;
	}

	.wizard-options {
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
	}

	.wizard-option {
		background: rgba(255, 255, 255, 0.03);
		border: 1px solid var(--border);
		color: var(--text);
		font-family: inherit;
		font-size: 0.92rem;
		font-weight: 500;
		padding: 0.85rem 1.1rem;
		border-radius: 12px;
		text-align: left;
		cursor: pointer;
		transition: all 0.2s ease;
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.7rem;
	}

	.wizard-option::before {
		content: "";
		width: 18px;
		height: 18px;
		border-radius: 50%;
		border: 1.5px solid rgba(255, 255, 255, 0.25);
		flex-shrink: 0;
		transition: all 0.2s ease;
		background: transparent;
	}

	.wizard-options[data-type="multi"] .wizard-option::before {
		border-radius: 4px;
	}

	.wizard-option:hover {
		background: rgba(0, 212, 255, 0.07);
		border-color: rgba(0, 212, 255, 0.4);
	}

	.wizard-option:hover::before {
		border-color: rgba(0, 212, 255, 0.7);
	}

	.wizard-option.selected {
		background: rgba(0, 212, 255, 0.12);
		border-color: #00D4FF;
		color: var(--text);
	}

	.wizard-option.selected::before {
		background: linear-gradient(135deg, #00D4FF, #4D8EFF);
		border-color: transparent;
		box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.15);
	}

	.wizard-option.selected::after {
		content: "✓";
		position: absolute;
		left: 1.15rem;
		top: 50%;
		transform: translateY(-50%);
		color: white;
		font-size: 0.65rem;
		font-weight: 800;
		pointer-events: none;
	}

	/* Form fields on the last question */
	.wizard-form {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	@media (min-width: 540px) {
		.wizard-form {
			grid-template-columns: 1fr 1fr;
		}
	}

	.wizard-field {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
	}

	.wizard-label {
		font-size: 0.72rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--text-mute);
	}

	.wizard-field input {
		background: rgba(255, 255, 255, 0.04);
		border: 1px solid var(--border);
		color: var(--text);
		font-family: inherit;
		font-size: 0.95rem;
		padding: 0.8rem 1rem;
		border-radius: 10px;
		outline: none;
		transition: border-color 0.2s, background 0.2s;
	}

	.wizard-field input:focus {
		border-color: #00D4FF;
		background: rgba(255, 255, 255, 0.06);
	}

	.wizard-form-error {
		margin-top: 1rem;
		font-size: 0.82rem;
		color: #EC4899;
		min-height: 1rem;
	}

	/* Navigation */
	.wizard-nav {
		margin-top: 2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
	}

	.wizard-back {
		background: none;
		border: 1px solid var(--border);
		color: var(--text-mute);
		font-family: inherit;
		font-size: 0.85rem;
		font-weight: 600;
		padding: 0.7rem 1.2rem;
		border-radius: 10px;
		cursor: pointer;
		transition: all 0.2s;
	}

	.wizard-back:hover:not(:disabled) {
		background: rgba(255, 255, 255, 0.05);
		color: var(--text);
	}

	.wizard-back:disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}

	/* ============ Processing animation ============ */
	.assessment-processing {
		text-align: center;
		padding: 4rem 1rem;
		max-width: 600px;
		margin: 0 auto;
	}

	.processing-spinner {
		width: 100px;
		height: 100px;
		margin: 0 auto 1.8rem;
		animation: process-rotate 1.4s linear infinite;
	}

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

	.processing-spinner svg {
		width: 100%;
		height: 100%;
	}

	.processing-title {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.7rem;
		font-weight: 400;
		margin-bottom: 0.6rem;
		background: linear-gradient(120deg, #00D4FF, #A855F7);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.processing-step {
		font-size: 0.9rem;
		color: var(--text-mute);
		min-height: 1.2rem;
		transition: opacity 0.3s ease;
	}

	/* ============ Results ============ */
	.assessment-results {
		animation: results-fade-in 0.5s ease;
	}

	@keyframes results-fade-in {
		from {
			opacity: 0;
			transform: translateY(12px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.results-header {
		text-align: center;
		margin-bottom: 2.5rem;
	}

	.results-header .section-title {
		margin: 0;
	}

	.results-score-card {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 22px;
		padding: 2.2rem;
		margin-bottom: 1.6rem;
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.8rem;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	@media (min-width: 720px) {
		.results-score-card {
			grid-template-columns: 220px 1fr;
		}
	}

	.results-score-card::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, #00D4FF, #A855F7);
	}

	.results-score-visual {
		width: 200px;
		height: 200px;
		margin: 0 auto;
	}

	.results-score-visual svg {
		width: 100%;
		height: 100%;
	}

	.results-score-text {
		min-width: 0;
	}

	.results-tier-label {
		display: inline-block;
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		padding: 0.32rem 0.7rem;
		border-radius: 999px;
		background: rgba(0, 212, 255, 0.12);
		color: #00D4FF;
		border: 1px solid rgba(0, 212, 255, 0.3);
		margin-bottom: 0.85rem;
	}

	.results-tier-headline {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.6rem;
		font-weight: 400;
		margin-bottom: 0.7rem;
		letter-spacing: -0.01em;
	}

	.results-tier-body {
		color: var(--text-mute);
		font-size: 0.95rem;
		line-height: 1.55;
	}

	.results-section {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 16px;
		padding: 1.6rem 1.7rem;
		margin-bottom: 1.2rem;
	}

	.results-section-eyebrow {
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--text-dim);
		margin-bottom: 1rem;
	}

	.results-rec-name {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.4rem;
		font-weight: 400;
		margin-bottom: 0.5rem;
		color: var(--text);
	}

	.results-rec-desc {
		font-size: 0.95rem;
		color: var(--text-mute);
		line-height: 1.6;
		margin-bottom: 1rem;
	}

	.results-rec-meta {
		display: flex;
		gap: 0.6rem;
		flex-wrap: wrap;
	}

	.results-rec-pill {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.35rem 0.75rem;
		border-radius: 999px;
		font-size: 0.72rem;
		font-weight: 600;
		background: rgba(168, 85, 247, 0.1);
		border: 1px solid rgba(168, 85, 247, 0.3);
		color: #A855F7;
	}

	.results-steps {
		list-style: none;
		counter-reset: step-counter;
		padding: 0;
		margin: 0;
	}

	.results-steps li {
		counter-increment: step-counter;
		position: relative;
		padding: 0.7rem 0 0.7rem 3rem;
		font-size: 0.95rem;
		color: var(--text);
		line-height: 1.55;
		border-bottom: 1px solid var(--border);
	}

	.results-steps li:last-child {
		border-bottom: none;
	}

	.results-steps li::before {
		content: counter(step-counter, decimal-leading-zero);
		position: absolute;
		left: 0;
		top: 0.85rem;
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.2rem;
		color: #00D4FF;
		font-weight: 400;
		width: 2.2rem;
		text-align: left;
	}

	.results-cta {
		background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(0, 212, 255, 0.1));
		border: 1px solid rgba(168, 85, 247, 0.3);
		border-radius: 18px;
		padding: 1.8rem 2rem;
		margin: 1.5rem 0;
		display: grid;
		grid-template-columns: 1fr;
		gap: 1.2rem;
		align-items: center;
	}

	@media (min-width: 700px) {
		.results-cta {
			grid-template-columns: 1fr auto;
		}
	}

	.results-cta-text h3 {
		font-family: var(--serif);
		font-style: italic;
		font-size: 1.35rem;
		font-weight: 400;
		margin-bottom: 0.4rem;
		color: var(--text);
	}

	.results-cta-text p {
		font-size: 0.88rem;
		color: var(--text-mute);
		line-height: 1.5;
	}

	.results-meta {
		text-align: center;
		margin-top: 1.6rem;
	}

	.results-restart {
		background: none;
		border: none;
		color: var(--text-dim);
		font-family: inherit;
		font-size: 0.85rem;
		cursor: pointer;
		text-decoration: underline;
	}

	.results-restart:hover {
		color: var(--text);
	}

	/* Light theme overrides */
	[data-theme="light"] .wizard-option {
		background: rgba(0, 0, 0, 0.02);
		border-color: rgba(0, 0, 0, 0.08);
	}

	[data-theme="light"] .wizard-option:hover {
		background: rgba(0, 212, 255, 0.05);
	}


	/* ============================================
   ATHENA FLOATING LAUNCHER (FAB)
   Persistent CTA, bottom-right; auto-hides when the dedicated section is visible.
   ============================================ */
	.athena-fab {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.55rem 1.05rem 0.55rem 0.55rem;
		background: rgba(13, 13, 24, 0.92);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border: 1px solid rgba(168, 85, 247, 0.35);
		border-radius: 999px;
		cursor: pointer;
		font-family: 'Manrope', system-ui, sans-serif;
		color: #f0f0f5;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
		transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
			box-shadow 0.3s ease,
			border-color 0.3s ease;
	}

	.athena-fab:hover {
		transform: translateY(-3px);
		border-color: rgba(168, 85, 247, 0.6);
		box-shadow: 0 18px 44px rgba(168, 85, 247, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
	}

	.athena-fab:active {
		transform: translateY(-1px) scale(0.98);
	}


	.athena-fab-icon {
		position: relative;
		z-index: 1;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #A855F7 0%, #EC4899 100%);
		color: #fff;
		font-family: 'Instrument Serif', Georgia, serif;
		font-style: italic;
		font-size: 1.3rem;
		font-weight: 400;
		box-shadow: 0 4px 14px rgba(168, 85, 247, 0.5);
		flex-shrink: 0;
	}

	.athena-fab-label {
		position: relative;
		z-index: 1;
		font-size: 0.85rem;
		font-weight: 600;
		letter-spacing: -0.005em;
		white-space: nowrap;
	}

	.athena-fab-halo {
		position: absolute;
		inset: -6px;
		border-radius: 999px;
		background: radial-gradient(circle at 25% 50%, rgba(168, 85, 247, 0.4) 0%, transparent 65%);
		z-index: 0;
		animation: athena-fab-pulse 3s ease-in-out infinite;
		pointer-events: none;
	}

	@keyframes athena-fab-pulse {

		0%,
		100% {
			transform: scale(1);
			opacity: 0.55;
		}

		50% {
			transform: scale(1.18);
			opacity: 0.2;
		}
	}

	/* Light theme adaptation */
	[data-theme="light"] .athena-fab {
		background: rgba(255, 255, 255, 0.95);
		border-color: rgba(168, 85, 247, 0.35);
		color: #0a0a14;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.03) inset;
	}

	[data-theme="light"] .athena-fab:hover {
		box-shadow: 0 18px 44px rgba(168, 85, 247, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
	}

	/* Mobile: collapse to icon-only, smaller footprint */
	@media (max-width: 540px) {
		.athena-fab {
			bottom: 1rem;
			right: 1rem;
			padding: 0.4rem;
		}

		.athena-fab-label {
			display: none;
		}

		.athena-fab-icon {
			width: 44px;
			height: 44px;
			font-size: 1.5rem;
		}
	}

	/* Respect reduced motion */
	@media (prefers-reduced-motion: reduce) {
		.athena-fab-halo {
			animation: none !important;
		}
	}


	/* Chat panel — floating overlay anchored bottom-right above the FAB */
	.athena-panel {
		position: absolute;
		bottom: 78px;
		right: 0;
		width: 380px;
		max-width: calc(100vw - 2.5rem);
		height: 560px;
		max-height: calc(100vh - 7rem);
		background: var(--surface);
		border: 1px solid var(--border-bright);
		border-radius: 22px;
		box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		transform: translateY(20px) scale(0.92);
		opacity: 0;
		pointer-events: none;
		transform-origin: bottom right;
		transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
	}

	.athena-floating-wrap.open .athena-panel {
		transform: translateY(0) scale(1);
		opacity: 1;
		pointer-events: auto;
	}

	/* ============================================
   ATHENA FLOATING WRAP — container for FAB + panel
   ============================================ */
	.athena-floating-wrap {
		position: fixed;
		bottom: 1.5rem;
		right: 1.5rem;
		z-index: 9000;
		font-family: 'Manrope', system-ui, sans-serif;
	}

	/* Close button inside the panel header */
	.athena-close-btn {
		position: absolute;
		top: 14px;
		right: 14px;
		width: 30px;
		height: 30px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.08);
		color: rgba(240, 240, 245, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: background 0.2s, color 0.2s, transform 0.2s;
		z-index: 5;
	}

	.athena-close-btn:hover {
		background: rgba(255, 255, 255, 0.1);
		color: #fff;
		transform: scale(1.05);
	}

	.athena-close-btn svg {
		width: 16px;
		height: 16px;
		display: block;
	}

	/* When panel is open: nudge the "Live demo" badge left to make room for close btn */
	.athena-floating-wrap.open .athena-live-badge {
		right: 56px;
	}

	/* FAB transformation when panel open: rotate icon, soften halo */
	.athena-floating-wrap.open .athena-fab-halo {
		opacity: 0;
	}

	.athena-floating-wrap.open .athena-fab-icon {
		transform: rotate(45deg) scale(0.85);
		font-size: 1.6rem;
	}

	/* Light theme overrides for close button */
	[data-theme="light"] .athena-close-btn {
		background: rgba(0, 0, 0, 0.05);
		border-color: rgba(0, 0, 0, 0.08);
		color: rgba(10, 10, 20, 0.65);
	}

	[data-theme="light"] .athena-close-btn:hover {
		background: rgba(0, 0, 0, 0.1);
		color: #0a0a14;
	}

	/* Mobile — panel fills viewport bottom */
	@media (max-width: 540px) {
		.athena-floating-wrap {
			bottom: 1rem;
			right: 1rem;
			left: 1rem;
		}

		.athena-panel {
			width: calc(100vw - 2rem);
			height: 75vh;
			max-height: calc(100vh - 6rem);
			right: 0;
		}
	}


	/* ============================================
   USER REQUEST: BIGGER STAGES, NO BACKGROUND, RICH SIDE PANEL IN OPEN SPACE
   ============================================ */
	.wheel-svg>circle[fill="url(#bigHalo)"],
	.wheel-svg>circle[fill="url(#centerHalo)"] {
		display: none !important;
	}

	.wheel-svg .particles {
		display: none !important;
	}

	.node-text {
		display: none !important;
	}

	.node-bubble {
		border-width: 2.5px !important;
		background: linear-gradient(135deg, rgba(26, 31, 61, 0.55) 0%, rgba(5, 8, 24, 0.55) 100%) !important;
	}

	.node-bubble::before {
		inset: -16px !important;
		filter: blur(22px) !important;
		opacity: 0.45 !important;
	}

	.wheel-node-inner:hover .node-bubble {
		transform: scale(1.12);
	}

	.wheel-node-inner.active .node-bubble {
		background: var(--color, var(--electric)) !important;
		color: white !important;
		transform: scale(1.18);
		box-shadow: 0 8px 36px rgba(0, 0, 0, 0.6), 0 0 56px var(--color, var(--electric)) !important;
	}

	.wheel-node-inner.active .node-bubble::before {
		opacity: 0.85 !important;
	}

	/* ============================================
   RICH SIDE PANEL — fills the open space in the hero
   ============================================ */
	.wheel-side-panel {
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		width: 460px;
		max-width: calc(100vw - 60px);
		padding: 22px 24px 18px;
		border: 1px solid rgba(255, 255, 255, 0.10);
		border-radius: 20px;
		background: linear-gradient(160deg, rgba(13, 16, 36, 0.72) 0%, rgba(8, 11, 28, 0.62) 100%);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
		z-index: 10;
		opacity: 0;
		animation: wsp-fade-in 0.6s ease 0.4s forwards;
	}

	@keyframes wsp-fade-in {
		to {
			opacity: 1;
		}
	}

	.wsp-header {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.wsp-stage-num {
		font-family: var(--serif);
		font-style: italic;
		font-size: 12px;
		letter-spacing: 0.1em;
		color: var(--current-color, var(--electric));
		transition: color 0.4s ease;
	}

	.wsp-pillar {
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.12em;
		color: rgba(240, 240, 245, 0.55);
		text-transform: uppercase;
	}

	.wsp-stage-title {
		font-family: var(--serif);
		font-size: 28px;
		font-weight: 400;
		font-style: italic;
		line-height: 1.1;
		color: var(--current-color, var(--electric));
		margin: 0 0 8px;
		transition: color 0.4s ease;
	}

	.wsp-tagline {
		font-style: italic;
		font-size: 14px;
		line-height: 1.45;
		color: rgba(240, 240, 245, 0.85);
		margin: 0 0 14px;
	}

	.wsp-points {
		list-style: none;
		padding: 0;
		margin: 0 0 14px;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.wsp-points li {
		position: relative;
		padding-left: 22px;
		font-size: 13px;
		line-height: 1.5;
		color: rgba(240, 240, 245, 0.82);
	}

	.wsp-points li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 7px;
		width: 14px;
		height: 14px;
		border-radius: 4px;
		background: var(--current-color, var(--electric));
		opacity: 0.85;
		transition: background 0.4s ease;
	}

	.wsp-points li::after {
		content: "";
		position: absolute;
		left: 3px;
		top: 9px;
		width: 8px;
		height: 4px;
		border-left: 1.6px solid #0a0e1a;
		border-bottom: 1.6px solid #0a0e1a;
		transform: rotate(-45deg);
		opacity: 0.9;
	}

	.wsp-br {
		position: relative;
		margin: 10px 0;
		padding: 10px 12px 10px 14px;
		border-radius: 10px;
		border: 1px solid rgba(255, 128, 66, 0.30);
		background: linear-gradient(135deg, rgba(255, 128, 66, 0.10) 0%, rgba(168, 85, 247, 0.06) 100%);
	}

	.wsp-br::before {
		content: "BR";
		position: absolute;
		top: -8px;
		left: 10px;
		font-family: var(--serif);
		font-style: italic;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.05em;
		color: #FF8042;
		background: #0a0e1a;
		padding: 1px 6px;
		border-radius: 4px;
	}

	.wsp-br-label {
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: 0.12em;
		color: #FF8042;
		margin-bottom: 3px;
		text-transform: uppercase;
	}

	.wsp-br-text {
		font-size: 12.5px;
		line-height: 1.5;
		color: rgba(240, 240, 245, 0.85);
	}

	.wsp-bp {
		font-size: 12px;
		line-height: 1.45;
		color: rgba(240, 240, 245, 0.7);
		padding: 8px 0 2px;
		border-top: 1px dashed rgba(255, 255, 255, 0.08);
	}

	.wsp-bp strong {
		color: rgba(240, 240, 245, 0.95);
		font-weight: 600;
	}

	.wsp-bp::before {
		content: "💡 ";
		margin-right: 2px;
	}

	.wsp-dots {
		display: flex;
		gap: 6px;
		margin-top: 14px;
	}

	.wsp-dots button {
		width: 26px;
		height: 4px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.12);
		border: none;
		cursor: pointer;
		padding: 0;
		transition: background 0.3s ease, width 0.3s ease;
	}

	.wsp-dots button.active {
		background: var(--current-color, var(--electric));
		width: 40px;
	}

	/* Light theme adjustments */
	[data-theme="light"] .wheel-side-panel {
		background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 247, 253, 0.85) 100%);
		border-color: rgba(10, 14, 26, 0.10);
	}

	[data-theme="light"] .wsp-tagline,
	[data-theme="light"] .wsp-points li,
	[data-theme="light"] .wsp-br-text {
		color: rgba(10, 14, 26, 0.78);
	}

	[data-theme="light"] .wsp-bp {
		color: rgba(10, 14, 26, 0.65);
	}

	[data-theme="light"] .wsp-bp strong {
		color: rgba(10, 14, 26, 0.95);
	}

	[data-theme="light"] .wsp-pillar {
		color: rgba(10, 14, 26, 0.55);
	}

	[data-theme="light"] .wsp-br::before {
		background: #ffffff;
	}

	[data-theme="light"] .wsp-points li::after {
		border-color: #ffffff;
	}

	/* Responsive */
	@media (max-width: 1100px) {
		.wheel-side-panel {
			bottom: 24px;
			left: 50%;
			transform: translateX(-50%);
			width: calc(100% - 48px);
			max-width: 460px;
		}
	}

	@media (max-width: 768px) {
		.wheel-side-panel {
			padding: 16px 16px 14px;
			bottom: 16px;
			left: 50%;
			transform: translateX(-50%);
			right: auto;
			width: calc(100% - 32px);
		}

		.wsp-stage-title {
			font-size: 22px;
		}

		.wsp-points li {
			font-size: 12px;
		}
	}



	/* ============================================
   WHEEL NODE TOOLTIP — custom replacement for browser default
   ============================================ */
	.wheel-tooltip {
		position: absolute;
		pointer-events: none;
		padding: 12px 16px;
		min-width: 220px;
		max-width: 320px;
		background: linear-gradient(160deg, rgba(13, 16, 36, 0.96) 0%, rgba(8, 11, 28, 0.94) 100%);
		border: 1.5px solid var(--tooltip-color, #4D8EFF);
		border-radius: 12px;
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		box-shadow:
			0 16px 40px rgba(0, 0, 0, 0.55),
			0 0 32px var(--tooltip-color, #4D8EFF),
			inset 0 1px 0 rgba(255, 255, 255, 0.06);
		opacity: 0;
		transform: translate(-50%, calc(-100% - 4px)) scale(0.95);
		transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
		z-index: 50;
		left: 0;
		top: 0;
	}

	.wheel-tooltip.visible {
		opacity: 1;
		transform: translate(-50%, calc(-100% - 14px)) scale(1);
	}

	/* Pointer arrow at the bottom of the tooltip */
	.wheel-tooltip::after {
		content: "";
		position: absolute;
		bottom: -7px;
		left: 50%;
		width: 14px;
		height: 14px;
		background: linear-gradient(135deg, rgba(13, 16, 36, 0.96) 50%, rgba(8, 11, 28, 0.94) 100%);
		border-right: 1.5px solid var(--tooltip-color, #4D8EFF);
		border-bottom: 1.5px solid var(--tooltip-color, #4D8EFF);
		transform: translateX(-50%) rotate(45deg);
	}

	.wt-title {
		font-family: var(--serif);
		font-style: italic;
		font-size: 17px;
		font-weight: 500;
		line-height: 1.2;
		color: var(--tooltip-color, #4D8EFF);
		margin-bottom: 5px;
		letter-spacing: -0.005em;
	}

	.wt-body {
		font-size: 12.5px;
		line-height: 1.5;
		color: rgba(240, 240, 245, 0.88);
		letter-spacing: 0.005em;
	}

	/* When the tooltip appears below a node (for bottom nodes), flip the arrow */
	.wheel-tooltip.below {
		transform: translate(-50%, calc(100% + 4px)) scale(0.95);
	}

	.wheel-tooltip.below.visible {
		transform: translate(-50%, calc(100% + 14px)) scale(1);
	}

	.wheel-tooltip.below::after {
		bottom: auto;
		top: -7px;
		border-right: none;
		border-bottom: none;
		border-left: 1.5px solid var(--tooltip-color, #4D8EFF);
		border-top: 1.5px solid var(--tooltip-color, #4D8EFF);
	}

	/* Light theme */
	[data-theme="light"] .wheel-tooltip {
		background: linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%, rgba(245, 247, 253, 0.94) 100%);
	}

	[data-theme="light"] .wt-body {
		color: rgba(10, 14, 26, 0.80);
	}

	[data-theme="light"] .wheel-tooltip::after {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 50%, rgba(245, 247, 253, 0.94) 100%);
	}

	@media (max-width: 768px) {
		.wheel-tooltip {
			display: none;
		}

		/* hide on small screens where space is tight */
	}


	/* ============================================
   COMPREHENSIVE ASSESSMENT — preview, multi-grid, modules, elevate sections
   ============================================ */

	/* ABC Inc sample report preview — collapsible */
	.assessment-preview-wrap {
		margin-top: 2.5rem;
		text-align: left;
	}

	.assessment-preview-toggle-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 1rem;
		margin-bottom: 1.25rem;
	}

	.assessment-preview-eyebrow {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(240, 240, 245, 0.55);
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
	}

	.assessment-preview-eyebrow .dot {
		width: 6px;
		height: 6px;
		background: var(--electric, #4D8EFF);
		border-radius: 50%;
		box-shadow: 0 0 12px var(--electric, #4D8EFF);
	}

	.assessment-preview-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		padding: 0.55rem 1rem;
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 100px;
		color: #f0f0f5;
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.25s ease;
	}

	.assessment-preview-toggle:hover {
		border-color: var(--electric, #4D8EFF);
		background: rgba(77, 142, 255, 0.08);
	}

	.assessment-preview-toggle .ap-toggle-chevron {
		transition: transform 0.3s ease;
	}

	.assessment-preview-toggle[aria-expanded="true"] .ap-toggle-chevron {
		transform: rotate(180deg);
	}

	.assessment-preview-card {
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 18px;
		background: linear-gradient(160deg, rgba(13, 16, 36, 0.55) 0%, rgba(8, 11, 28, 0.40) 100%);
		padding: 1.75rem 1.5rem;
		position: relative;
		overflow: hidden;
	}

	.assessment-preview-card::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
			radial-gradient(80% 80% at 100% 0%, rgba(0, 212, 255, 0.08), transparent 60%),
			radial-gradient(80% 80% at 0% 100%, rgba(168, 85, 247, 0.08), transparent 60%);
		pointer-events: none;
		z-index: 0;
	}

	.assessment-preview-card>* {
		position: relative;
		z-index: 1;
	}

	.ap-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 1.5rem;
		padding-bottom: 1.25rem;
		margin-bottom: 1.25rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		flex-wrap: wrap;
	}

	.ap-header-eyebrow {
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.14em;
		color: rgba(240, 240, 245, 0.55);
		margin-bottom: 0.4rem;
	}

	.ap-header-company {
		font-family: var(--serif);
		font-size: 24px;
		color: #fff;
		font-weight: 500;
	}

	.ap-header-sub {
		font-family: var(--font-sans, inherit);
		font-size: 13px;
		color: rgba(240, 240, 245, 0.6);
		font-weight: 400;
	}

	.ap-header-score {
		display: flex;
		align-items: center;
		gap: 0.85rem;
	}

	.ap-score-svg {
		width: 64px;
		height: 64px;
		flex-shrink: 0;
	}

	.ap-score-tier {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.12em;
		color: #00D4FF;
		margin-bottom: 0.2rem;
	}

	.ap-score-tag {
		font-size: 12px;
		color: rgba(240, 240, 245, 0.78);
	}

	.ap-narrative {
		font-size: 14px;
		line-height: 1.6;
		color: rgba(240, 240, 245, 0.85);
		font-style: italic;
		padding: 0.5rem 0 1rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.ap-narrative em {
		color: #fff;
		font-style: italic;
		font-family: var(--serif);
	}

	.ap-block {
		padding: 1rem 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.ap-block:last-child {
		border-bottom: none;
	}

	.ap-block-label {
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.14em;
		color: rgba(240, 240, 245, 0.55);
		margin-bottom: 0.65rem;
	}

	.ap-block-icon-row {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		margin-bottom: 0.75rem;
	}

	.ap-block-icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}

	.ap-block-icon svg {
		width: 16px;
		height: 16px;
	}

	.ap-block-icon-row .ap-block-label {
		margin-bottom: 0;
		flex: 1;
	}

	.ap-block-body {
		font-size: 13.5px;
		line-height: 1.6;
		color: rgba(240, 240, 245, 0.82);
	}

	.ap-block-body strong {
		color: #fff;
		font-weight: 600;
	}

	.ap-block-body .ap-impact {
		display: block;
		margin-top: 0.5rem;
		padding: 0.45rem 0.7rem;
		font-size: 12px;
		font-weight: 600;
		color: #10E5A0;
		background: rgba(16, 229, 160, 0.08);
		border-left: 2px solid #10E5A0;
		border-radius: 4px;
		font-style: normal;
	}

	/* Module grid (sample + real) */
	.ap-modules-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 0.45rem;
		margin: 0.65rem 0;
	}

	.ap-module {
		display: flex;
		align-items: center;
		gap: 0.45rem;
		padding: 0.5rem 0.7rem;
		font-size: 12px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.02);
		color: rgba(240, 240, 245, 0.85);
	}

	.ap-module-status {
		font-size: 14px;
		line-height: 1;
	}

	.ap-module-tag {
		margin-left: auto;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.04em;
		color: rgba(240, 240, 245, 0.5);
		padding: 2px 6px;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.04);
	}

	.ap-module.recommended {
		border-color: rgba(0, 212, 255, 0.30);
		background: rgba(0, 212, 255, 0.05);
	}

	.ap-module.recommended .ap-module-status {
		color: #00D4FF;
	}

	.ap-module.recommended .ap-module-tag {
		color: #00D4FF;
		background: rgba(0, 212, 255, 0.12);
	}

	.ap-module.suggested {
		border-color: rgba(168, 85, 247, 0.25);
		background: rgba(168, 85, 247, 0.04);
	}

	.ap-module.suggested .ap-module-status {
		color: #A855F7;
	}

	.ap-module.suggested .ap-module-tag {
		color: #A855F7;
		background: rgba(168, 85, 247, 0.10);
	}

	.ap-module.future .ap-module-status {
		color: rgba(240, 240, 245, 0.35);
	}

	.ap-modules-legend {
		display: flex;
		gap: 1.2rem;
		flex-wrap: wrap;
		font-size: 11px;
		color: rgba(240, 240, 245, 0.6);
		margin-top: 0.6rem;
	}

	.ap-modules-legend span {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
	}

	.ap-legend-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: rgba(240, 240, 245, 0.4);
	}

	.ap-legend-dot.recommended {
		background: #00D4FF;
		box-shadow: 0 0 6px rgba(0, 212, 255, 0.6);
	}

	.ap-legend-dot.suggested {
		background: #A855F7;
		box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
	}

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

	.ap-steps li {
		padding: 0.45rem 0 0.45rem 1.2rem;
		position: relative;
		font-size: 13px;
		line-height: 1.55;
		color: rgba(240, 240, 245, 0.82);
		border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
	}

	.ap-steps li:last-child {
		border-bottom: none;
	}

	.ap-steps li::before {
		content: "→";
		position: absolute;
		left: 0;
		color: #00D4FF;
		font-weight: 700;
	}

	.ap-steps li strong {
		color: #fff;
		font-weight: 600;
	}

	.ap-foot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1.5rem;
		flex-wrap: wrap;
		margin-top: 1.25rem;
		padding-top: 1.25rem;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	.ap-foot-text {
		flex: 1;
		min-width: 240px;
		font-size: 13px;
		line-height: 1.5;
		color: rgba(240, 240, 245, 0.78);
	}

	.ap-foot-text strong {
		display: block;
		color: #fff;
		font-weight: 600;
		margin-bottom: 0.25rem;
	}

	/* Multi-select grid for module questions */
	.wizard-options-grid {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
		gap: 0.6rem !important;
	}

	/* Results: module roadmap grid */
	.results-modules-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 0.5rem;
		margin: 0.75rem 0;
	}

	.results-module-cell {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.6rem 0.8rem;
		font-size: 13px;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.02);
		color: rgba(240, 240, 245, 0.85);
	}

	.results-module-cell .rm-dot {
		font-size: 16px;
		line-height: 1;
	}

	.results-module-cell .rm-label {
		flex: 1;
		font-weight: 500;
		color: #fff;
	}

	.results-module-cell .rm-tag {
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.04em;
		color: rgba(240, 240, 245, 0.55);
		padding: 2px 6px;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.04);
	}

	.results-module-cell.live {
		border-color: rgba(16, 229, 160, 0.40);
		background: rgba(16, 229, 160, 0.06);
	}

	.results-module-cell.live .rm-dot {
		color: #10E5A0;
	}

	.results-module-cell.live .rm-tag {
		color: #10E5A0;
		background: rgba(16, 229, 160, 0.12);
	}

	.results-module-cell.planned {
		border-color: rgba(0, 212, 255, 0.32);
		background: rgba(0, 212, 255, 0.05);
	}

	.results-module-cell.planned .rm-dot {
		color: #00D4FF;
	}

	.results-module-cell.planned .rm-tag {
		color: #00D4FF;
		background: rgba(0, 212, 255, 0.12);
	}

	.results-module-cell.recommended {
		border-color: rgba(168, 85, 247, 0.32);
		background: rgba(168, 85, 247, 0.05);
	}

	.results-module-cell.recommended .rm-dot {
		color: #A855F7;
	}

	.results-module-cell.recommended .rm-tag {
		color: #A855F7;
		background: rgba(168, 85, 247, 0.12);
	}

	.results-module-cell.future .rm-dot {
		color: rgba(240, 240, 245, 0.35);
	}

	.results-modules-legend {
		display: flex;
		gap: 1.4rem;
		flex-wrap: wrap;
		margin-top: 0.6rem;
		font-size: 11.5px;
		color: rgba(240, 240, 245, 0.62);
	}

	.results-modules-legend span {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
	}

	.rml-dot {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: rgba(240, 240, 245, 0.4);
	}

	.rml-dot.live {
		background: #10E5A0;
		box-shadow: 0 0 8px rgba(16, 229, 160, 0.7);
	}

	.rml-dot.planned {
		background: #00D4FF;
		box-shadow: 0 0 8px rgba(0, 212, 255, 0.7);
	}

	.rml-dot.recommended {
		background: #A855F7;
		box-shadow: 0 0 8px rgba(168, 85, 247, 0.7);
	}

	/* Results: "Elevate" sections (HR Transformation / Change Mgmt / BTP) */
	.results-elevate-section {
		display: flex;
		gap: 1.25rem;
		padding: 1.5rem 1.5rem;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 16px;
		background: linear-gradient(160deg, rgba(13, 16, 36, 0.45) 0%, rgba(8, 11, 28, 0.30) 100%);
		margin-bottom: 1.25rem;
	}

	.results-elevate-icon {
		width: 48px;
		height: 48px;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		flex-shrink: 0;
	}

	.results-elevate-icon svg {
		width: 24px;
		height: 24px;
	}

	.results-elevate-content {
		flex: 1;
	}

	.results-elevate-eyebrow {
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.14em;
		color: rgba(240, 240, 245, 0.55);
		margin-bottom: 0.5rem;
	}

	.results-elevate-title {
		font-family: var(--serif);
		font-size: 22px;
		font-weight: 500;
		font-style: italic;
		color: #fff;
		margin: 0 0 0.6rem;
		line-height: 1.2;
	}

	.results-elevate-body {
		font-size: 14px;
		line-height: 1.6;
		color: rgba(240, 240, 245, 0.85);
		margin: 0 0 0.65rem;
	}

	.results-elevate-impact {
		display: inline-block;
		padding: 0.5rem 0.85rem;
		font-size: 12.5px;
		font-weight: 600;
		color: #10E5A0;
		background: rgba(16, 229, 160, 0.08);
		border-left: 2px solid #10E5A0;
		border-radius: 4px;
	}

	/* Light theme */
	[data-theme="light"] .assessment-preview-card,
	[data-theme="light"] .results-elevate-section {
		background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 247, 253, 0.65) 100%);
		border-color: rgba(10, 14, 26, 0.10);
	}

	[data-theme="light"] .ap-narrative,
	[data-theme="light"] .ap-block-body,
	[data-theme="light"] .ap-foot-text,
	[data-theme="light"] .results-elevate-body {
		color: rgba(10, 14, 26, 0.80);
	}

	[data-theme="light"] .ap-header-company,
	[data-theme="light"] .results-elevate-title,
	[data-theme="light"] .results-module-cell .rm-label {
		color: #0a0e1a;
	}

	/* Mobile */
	@media (max-width: 768px) {
		.results-elevate-section {
			flex-direction: column;
			padding: 1.25rem;
		}

		.ap-header {
			flex-direction: column;
			align-items: flex-start;
		}

		.ap-foot {
			flex-direction: column;
			align-items: stretch;
			text-align: left;
		}
	}



	/* ============================================
   COMPREHENSIVE REPORT — Impact hero, score breakdown, BR section
   ============================================ */

	/* IMPACT METRICS HERO */
	.results-impact-hero {
		position: relative;
		margin: 1.5rem 0 2rem;
		padding: 1.5rem 1.75rem;
		border-radius: 18px;
		border: 1px solid rgba(255, 255, 255, 0.10);
		background:
			radial-gradient(120% 80% at 100% 0%, rgba(0, 212, 255, 0.10), transparent 60%),
			radial-gradient(120% 80% at 0% 100%, rgba(168, 85, 247, 0.10), transparent 60%),
			linear-gradient(160deg, rgba(13, 16, 36, 0.65) 0%, rgba(8, 11, 28, 0.50) 100%);
		overflow: hidden;
	}

	.results-impact-hero::before {
		content: "";
		position: absolute;
		inset: -1px;
		border-radius: 18px;
		padding: 1px;
		background: linear-gradient(135deg, rgba(0, 212, 255, 0.5), rgba(168, 85, 247, 0.5), rgba(16, 229, 160, 0.4));
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		mask-composite: exclude;
		pointer-events: none;
		opacity: 0.5;
	}

	.rih-label {
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(240, 240, 245, 0.55);
		margin-bottom: 1rem;
	}

	.rih-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}

	.rih-stat {
		padding-right: 1rem;
		border-right: 1px solid rgba(255, 255, 255, 0.08);
	}

	.rih-stat:last-child {
		border-right: none;
	}

	.rih-num {
		font-family: var(--serif);
		font-style: italic;
		font-size: clamp(28px, 4.5vw, 44px);
		line-height: 1;
		background: linear-gradient(135deg, #00D4FF 0%, #A855F7 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		margin-bottom: 0.4rem;
		display: flex;
		align-items: baseline;
		gap: 0.2rem;
	}

	.rih-num-unit {
		font-size: 0.5em;
		font-style: normal;
		font-family: var(--font-sans, inherit);
		font-weight: 600;
		color: rgba(240, 240, 245, 0.6);
		-webkit-text-fill-color: rgba(240, 240, 245, 0.6);
	}

	.rih-name {
		font-size: 13px;
		font-weight: 600;
		color: #fff;
		margin-bottom: 0.15rem;
	}

	.rih-sub {
		font-size: 11.5px;
		color: rgba(240, 240, 245, 0.55);
		line-height: 1.35;
	}

	/* SCORE BREAKDOWN — horizontal bar chart */
	.results-breakdown-grid {
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
		margin: 0.75rem 0;
	}

	.breakdown-row {
		display: grid;
		grid-template-columns: minmax(160px, 220px) 1fr 80px;
		align-items: center;
		gap: 0.85rem;
	}

	.bd-label {
		font-size: 12.5px;
		color: rgba(240, 240, 245, 0.78);
		font-weight: 500;
	}

	.bd-bar-wrap {
		position: relative;
		height: 8px;
		background: rgba(255, 255, 255, 0.04);
		border-radius: 100px;
		overflow: hidden;
	}

	.bd-bar {
		height: 100%;
		border-radius: 100px;
		transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
		box-shadow: 0 0 12px currentColor;
	}

	.bd-value {
		font-size: 12px;
		color: #fff;
		font-weight: 600;
		text-align: right;
		font-variant-numeric: tabular-nums;
	}

	.bd-value .bd-max {
		color: rgba(240, 240, 245, 0.45);
		font-weight: 400;
	}

	/* BR DEDICATED SECTION */
	.results-br-section {
		position: relative;
		padding: 1.75rem 1.75rem;
		border-radius: 18px;
		border: 1px solid rgba(255, 128, 66, 0.30);
		background:
			radial-gradient(120% 80% at 100% 0%, rgba(255, 184, 0, 0.08), transparent 55%),
			radial-gradient(120% 80% at 0% 100%, rgba(168, 85, 247, 0.08), transparent 55%),
			linear-gradient(160deg, rgba(13, 16, 36, 0.65) 0%, rgba(8, 11, 28, 0.50) 100%);
		margin-bottom: 1.5rem;
		overflow: hidden;
	}

	.results-br-header {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-bottom: 1rem;
	}

	.results-br-icon-wrap {
		flex-shrink: 0;
	}

	.results-br-icon-rect {
		width: 56px;
		height: 56px;
		border-radius: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--serif);
		font-style: italic;
		font-size: 22px;
		font-weight: 600;
		color: #0a0e1a;
		letter-spacing: -0.02em;
		box-shadow: 0 8px 24px rgba(255, 128, 66, 0.25);
	}

	.results-br-eyebrow {
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.14em;
		color: #FF8042;
		margin-bottom: 0.35rem;
	}

	.results-br-title {
		font-family: var(--serif);
		font-size: 24px;
		font-weight: 500;
		font-style: italic;
		color: #fff;
		margin: 0;
		line-height: 1.2;
	}

	.results-br-body {
		font-size: 14px;
		line-height: 1.65;
		color: rgba(240, 240, 245, 0.88);
		margin: 0 0 1.25rem;
	}

	.results-br-modules {
		margin-bottom: 1rem;
	}

	.results-br-mod-label {
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.14em;
		color: rgba(240, 240, 245, 0.55);
		margin-bottom: 0.6rem;
	}

	.results-br-mod-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 0.55rem;
	}

	.br-mod-cell {
		padding: 0.7rem 0.9rem;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 10px;
		background: rgba(255, 128, 66, 0.04);
		transition: all 0.25s ease;
	}

	.br-mod-cell:hover {
		border-color: rgba(255, 128, 66, 0.35);
		background: rgba(255, 128, 66, 0.07);
		transform: translateY(-1px);
	}

	.br-mod-name {
		font-size: 13px;
		font-weight: 700;
		color: #FFB800;
		margin-bottom: 0.2rem;
		letter-spacing: -0.01em;
	}

	.br-mod-desc {
		font-size: 12px;
		line-height: 1.45;
		color: rgba(240, 240, 245, 0.75);
	}

	.results-br-impact {
		display: inline-block;
		padding: 0.55rem 0.85rem;
		font-size: 12.5px;
		font-weight: 600;
		color: #FFB800;
		background: rgba(255, 184, 0, 0.08);
		border-left: 2px solid #FFB800;
		border-radius: 4px;
	}

	/* Light theme */
	[data-theme="light"] .results-impact-hero,
	[data-theme="light"] .results-br-section {
		background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(245, 247, 253, 0.65) 100%);
		border-color: rgba(10, 14, 26, 0.10);
	}

	[data-theme="light"] .rih-name,
	[data-theme="light"] .results-br-title {
		color: #0a0e1a;
	}

	[data-theme="light"] .rih-sub,
	[data-theme="light"] .results-br-body,
	[data-theme="light"] .bd-label,
	[data-theme="light"] .br-mod-desc {
		color: rgba(10, 14, 26, 0.75);
	}

	[data-theme="light"] .bd-value {
		color: #0a0e1a;
	}

	/* Mobile */
	@media (max-width: 900px) {
		.rih-grid {
			grid-template-columns: 1fr 1fr;
			gap: 1rem;
		}

		.rih-stat {
			border-right: none;
			border-bottom: 1px solid rgba(255, 255, 255, 0.06);
			padding-bottom: 1rem;
		}

		.rih-stat:nth-last-child(-n+2) {
			border-bottom: none;
			padding-bottom: 0;
		}

		.breakdown-row {
			grid-template-columns: 1fr 60px;
			gap: 0.5rem;
		}

		.breakdown-row .bd-label {
			grid-column: 1 / -1;
			margin-bottom: 0.2rem;
		}

		.breakdown-row .bd-bar-wrap {
			grid-column: 1;
		}

		.breakdown-row .bd-value {
			grid-column: 2;
		}
	}

	@media (max-width: 600px) {
		.rih-grid {
			grid-template-columns: 1fr;
		}

		.rih-stat {
			border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		}

		.rih-stat:last-child {
			border-bottom: none;
		}
	}



	/* ABC Inc sample-specific styling (impact metrics + BR block) */
	.ap-impact-hero {
		margin: 0.75rem 0 1rem;
		padding: 0.95rem 1.1rem;
		border-radius: 12px;
		border: 1px solid rgba(255, 255, 255, 0.10);
		background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(168, 85, 247, 0.05));
	}

	.ap-impact-label {
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: 0.14em;
		color: rgba(240, 240, 245, 0.55);
		margin-bottom: 0.55rem;
	}

	.ap-impact-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0.85rem;
	}

	.ap-impact-stat {
		text-align: left;
		border-right: 1px solid rgba(255, 255, 255, 0.05);
		padding-right: 0.6rem;
	}

	.ap-impact-stat:last-child {
		border-right: none;
	}

	.ap-impact-num {
		font-family: var(--serif);
		font-style: italic;
		font-size: 22px;
		line-height: 1;
		background: linear-gradient(135deg, #00D4FF 0%, #A855F7 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		margin-bottom: 0.25rem;
	}

	.ap-impact-unit {
		font-size: 0.55em;
		font-style: normal;
		font-family: var(--font-sans, inherit);
		font-weight: 600;
		-webkit-text-fill-color: rgba(240, 240, 245, 0.6);
		margin-left: 0.15rem;
	}

	.ap-impact-name {
		font-size: 11px;
		font-weight: 600;
		color: rgba(240, 240, 245, 0.8);
	}

	.ap-br-rect {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--serif);
		font-style: italic;
		font-weight: 600;
		font-size: 13px;
		color: #0a0e1a;
		background: linear-gradient(135deg, #FFB800, #FF8042, #A855F7);
	}

	.ap-br-modules {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 0.4rem;
		margin: 0.65rem 0;
	}

	.ap-br-mod {
		padding: 0.45rem 0.6rem;
		border: 1px solid rgba(255, 128, 66, 0.20);
		border-radius: 8px;
		background: rgba(255, 128, 66, 0.05);
	}

	.ap-br-mod strong {
		display: block;
		font-size: 11.5px;
		font-weight: 700;
		color: #FFB800;
		margin-bottom: 0.15rem;
	}

	.ap-br-mod span {
		font-size: 11px;
		color: rgba(240, 240, 245, 0.72);
		line-height: 1.35;
	}

	@media (max-width: 600px) {
		.ap-impact-grid {
			grid-template-columns: 1fr 1fr;
		}

		.ap-impact-stat:nth-child(2) {
			border-right: none;
		}
	}


	/* ============================================
   BTP IMPACT BLOCK IN WHEEL SIDE PANEL
   Mirrors the BR block but uses cyan/blue accent for SAP BTP
   ============================================ */
	.wsp-btp {
		position: relative;
		margin: 10px 0;
		padding: 10px 12px 10px 14px;
		border-radius: 10px;
		border: 1px solid rgba(0, 212, 255, 0.30);
		background: linear-gradient(135deg, rgba(0, 212, 255, 0.10) 0%, rgba(77, 142, 255, 0.06) 100%);
	}

	.wsp-btp::before {
		content: "BTP";
		position: absolute;
		top: -8px;
		left: 10px;
		font-family: var(--serif);
		font-style: italic;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.05em;
		color: #00D4FF;
		background: #0a0e1a;
		padding: 1px 6px;
		border-radius: 4px;
	}

	.wsp-btp-label {
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: 0.12em;
		color: #00D4FF;
		margin-bottom: 3px;
		text-transform: uppercase;
	}

	.wsp-btp-text {
		font-size: 12.5px;
		line-height: 1.5;
		color: rgba(240, 240, 245, 0.85);
	}

	[data-theme="light"] .wsp-btp-text {
		color: rgba(10, 14, 26, 0.78);
	}

	[data-theme="light"] .wsp-btp::before {
		background: #ffffff;
	}


	/* ============================================
   SLOW & DRAMATIC ACTIVE STATE — wheel rotation feel
   ============================================ */
	.wheel-node .node-bubble {
		animation: none !important;
	}

	.node-bubble {
		transition:
			background 0.45s ease,
			color 0.3s ease,
			border-color 0.4s ease,
			transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
			box-shadow 0.45s ease,
			opacity 0.45s ease !important;
	}

	.node-bubble::before {
		transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease !important;
	}

	.wheel-node-inner.active .node-bubble {
		background: var(--color, var(--electric)) !important;
		color: #0a0e1a !important;
		transform: scale(1.22) !important;
		box-shadow:
			0 10px 44px rgba(0, 0, 0, 0.65),
			0 0 36px var(--color, var(--electric)),
			0 0 80px var(--color, var(--electric)) !important;
		animation: activeNodeBreathe 3.2s ease-in-out infinite !important;
	}

	.wheel-node-inner.active .node-bubble::before {
		opacity: 0.95 !important;
		filter: blur(28px) !important;
		inset: -22px !important;
	}

	@keyframes activeNodeBreathe {

		0%,
		100% {
			box-shadow:
				0 10px 44px rgba(0, 0, 0, 0.65),
				0 0 36px var(--color, var(--electric)),
				0 0 80px var(--color, var(--electric));
			transform: scale(1.22);
		}

		50% {
			box-shadow:
				0 12px 52px rgba(0, 0, 0, 0.7),
				0 0 52px var(--color, var(--electric)),
				0 0 110px var(--color, var(--electric));
			transform: scale(1.28);
		}
	}

	.wheel-node-inner:not(.active) .node-bubble {
		opacity: 0.62;
	}

	.wheel-node-inner:not(.active):hover .node-bubble {
		opacity: 1;
	}


	/* ============================================
   WHEEL ORBITER — the visible "thing moving" inside the wheel
   A large bright orb that orbits on an INNER track (between center hub
   and the bubble ring) so it's clearly visible — not hidden behind bubbles.
   Its motion drives stage activation: when it passes each stage's angle,
   that stage's bubble glows and the popup updates — all synchronized.
   ============================================ */
	.wheel-orbiter {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 6;
		/* ABOVE the bubbles (z-index 4) so it's never hidden */
		will-change: transform;
		/* JS sets transform: rotate(Xdeg) each frame for continuous motion */
	}

	.orbiter-dot {
		position: absolute;
		top: 22%;
		/* INSIDE the bubble ring, on its own clear track */
		left: 50%;
		width: 28px;
		height: 28px;
		margin-left: -14px;
		border-radius: 50%;
		background: radial-gradient(circle, #ffffff 0%, #ffffff 40%, var(--current-color, #4D8EFF) 80%, transparent 100%);
		box-shadow:
			0 0 22px rgba(255, 255, 255, 1),
			0 0 48px var(--current-color, #4D8EFF),
			0 0 96px var(--current-color, #4D8EFF),
			0 0 160px var(--current-color, #4D8EFF);
		transition: box-shadow 0.5s ease, background 0.5s ease;
	}

	/* Tracer / halo around the orb */
	.orbiter-dot::before {
		content: "";
		position: absolute;
		inset: -20px;
		border-radius: 50%;
		background: radial-gradient(circle, var(--current-color, #4D8EFF) 0%, transparent 65%);
		opacity: 0.5;
		filter: blur(8px);
		z-index: -1;
	}

	/* Pulsing inner core */
	.orbiter-dot::after {
		content: "";
		position: absolute;
		inset: 6px;
		border-radius: 50%;
		background: #ffffff;
		opacity: 0.95;
		animation: orbiterCore 1.6s ease-in-out infinite;
	}

	@keyframes orbiterCore {

		0%,
		100% {
			transform: scale(1);
			opacity: 0.95;
		}

		50% {
			transform: scale(1.15);
			opacity: 1;
		}
	}

	/* Light theme */
	[data-theme="light"] .orbiter-dot {
		background: radial-gradient(circle, var(--current-color, #4D8EFF) 0%, var(--current-color, #4D8EFF) 40%, rgba(255, 255, 255, 0.6) 80%, transparent 100%);
		box-shadow:
			0 0 22px rgba(10, 14, 26, 0.4),
			0 0 48px var(--current-color, #4D8EFF),
			0 0 96px var(--current-color, #4D8EFF);
	}

	[data-theme="light"] .orbiter-dot::after {
		background: var(--current-color, #4D8EFF);
	}

	@media (max-width: 768px) {
		.orbiter-dot {
			width: 22px;
			height: 22px;
			margin-left: -11px;
			top: 24%;
		}
	}



	/* ============================================
   WIZARD — disabled button states + prominent form error
   ============================================ */
	.wizard-next:disabled,
	.wizard-submit:disabled,
	.btn-primary:disabled,
	.btn:disabled {
		opacity: 0.40 !important;
		cursor: not-allowed !important;
		filter: grayscale(40%);
		pointer-events: none;
	}

	.wizard-form-error {
		margin-top: 1rem;
		font-size: 0.85rem;
		color: #EC4899;
		min-height: 1rem;
		font-weight: 500;
		padding: 0;
		border-radius: 6px;
		transition: all 0.25s ease;
	}

	.wizard-form-error:not(:empty) {
		padding: 0.7rem 0.95rem;
		background: rgba(236, 72, 153, 0.08);
		border: 1px solid rgba(236, 72, 153, 0.30);
		border-left: 3px solid #EC4899;
	}

	.wizard-form-error:not(:empty)::before {
		content: "⚠ ";
		font-weight: 700;
		margin-right: 0.2rem;
	}

	/* Make sure Cancel button is always clickable, never overlapped */
	.wizard-exit {
		position: relative;
		z-index: 10;
		padding: 0.3rem 0.6rem;
		margin: -0.3rem -0.6rem;
		/* expand hit area without visual shift */
		border-radius: 4px;
		transition: background 0.2s ease, color 0.2s ease;
	}

	.wizard-exit:hover {
		background: rgba(255, 255, 255, 0.06);
		color: var(--text);
	}

	.wizard-exit:active {
		background: rgba(255, 255, 255, 0.12);
	}



	/* ============================================
   WHEEL HINT PILL — first-visit nudge to click stages
   Positioned just above the side panel; fades in with a gentle bob,
   then hides on first click or first auto-advance.
   ============================================ */
	.wheel-hint-pill {
		position: absolute;
		bottom: 100%;
		/* sits AT the top edge of its parent (the side panel) */
		margin-bottom: 14px;
		/* 14px breathing room above the panel */
		left: 50%;
		transform: translateX(-50%) translateY(8px);
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		padding: 0.55rem 1.05rem;
		border-radius: 100px;
		background: rgba(0, 16, 32, 0.92);
		border: 1px solid rgba(0, 212, 255, 0.50);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		box-shadow:
			0 8px 24px rgba(0, 0, 0, 0.45),
			0 0 32px rgba(0, 212, 255, 0.28);
		font-family: var(--sans);
		font-size: 13px;
		font-weight: 600;
		color: #00D4FF;
		letter-spacing: 0.01em;
		cursor: pointer;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		z-index: 20;
		transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.wheel-hint-pill .wheel-hint-icon {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	.wheel-hint-pill.visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
		animation: hintPillBob 2.6s ease-in-out infinite;
	}

	.wheel-hint-pill:hover {
		border-color: rgba(0, 212, 255, 0.70);
		background: rgba(0, 24, 48, 0.85);
	}

	@keyframes hintPillBob {

		0%,
		100% {
			transform: translateX(-50%) translateY(0);
		}

		50% {
			transform: translateX(-50%) translateY(-3px);
		}
	}

	/* Light theme variant */
	[data-theme="light"] .wheel-hint-pill {
		background: rgba(255, 255, 255, 0.92);
		border-color: rgba(0, 138, 168, 0.40);
		color: #008AA8;
		box-shadow:
			0 8px 24px rgba(10, 14, 26, 0.10),
			0 0 24px rgba(0, 138, 168, 0.12);
	}

	@media (max-width: 768px) {
		.wheel-hint-pill {
			font-size: 12px;
			padding: 0.5rem 0.85rem;
		}
	}