/**
 * Codelab Home — visual layer
 * --------------------------------------------------------------
 * Ported 1:1 from the Coderlab reference homepage. Drives the
 * announcement bar, glass nav, hero, sections, and final CTA.
 * All design tokens live in :root so individual sections stay
 * lean and theme.json palette stays the source of truth for
 * editor blocks (this file owns the front-end visual identity).
 */

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

:root {
	--bg: #0A0E1A;
	--bg-secondary: #111726;
	--surface: #161E2E;
	--border: rgba(255, 255, 255, 0.08);
	--border-strong: rgba(255, 255, 255, 0.16);
	--text: #F5F7FA;
	--text-muted: #94A3B8;
	--text-dim: #64748B;
	--accent: #FF6B35;
	--accent-soft: #FF6B3520;
	--blue: #3B82F6;
	--blue-soft: #3B82F620;
	--purple: #A855F7;
	--green: #10B981;
	--gradient-1: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);
	--gradient-2: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
	--gradient-mesh: radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.08) 0px, transparent 50%),
	                 radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.05) 0px, transparent 50%),
	                 radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.08) 0px, transparent 50%),
	                 radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.08) 0px, transparent 50%);
}

html { scroll-behavior: smooth; }

body {
	font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	background: var(--bg) !important;
	color: var(--text) !important;
	line-height: 1.6;
	overflow-x: hidden;
	font-feature-settings: "ss01", "ss02";
}

/* WordPress base resets — keep block layout helpers from interfering */
.wp-site-blocks { padding: 0 !important; margin: 0 !important; }
.wp-site-blocks > * { margin-block-start: 0 !important; }

::selection { background: var(--accent); color: white; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

.cl-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}

/* ========== ANNOUNCEMENT BAR ========== */
.cl-announcement {
	background: linear-gradient(90deg, #FF6B35 0%, #FF8E53 50%, #A855F7 100%);
	background-size: 200% 100%;
	animation: clAnnounceShift 12s ease-in-out infinite;
	color: white;
	padding: 10px 0;
	font-size: 13px;
	font-weight: 500;
	position: relative;
	z-index: 60;
	letter-spacing: -0.01em;
}
@keyframes clAnnounceShift {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}
.cl-announcement-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.cl-announce-spark {
	display: inline-flex;
	animation: clAnnounceSpark 1.6s ease-in-out infinite;
}
@keyframes clAnnounceSpark {
	0%, 100% { transform: scale(1) rotate(0); }
	50%      { transform: scale(1.25) rotate(15deg); }
}
.cl-announce-sub {
	opacity: 0.85;
	font-weight: 400;
}
.cl-announce-link {
	color: white !important;
	text-decoration: none !important;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 100px;
	background: rgba(0,0,0,0.18);
	transition: background 0.25s ease, transform 0.25s ease;
	margin-left: 4px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.cl-announce-link:hover {
	background: rgba(0,0,0,0.32);
	transform: translateX(2px);
}
.cl-announcement a { color: white; text-decoration: underline; margin-left: 6px; }
@media (max-width: 640px) {
	.cl-announce-sub { display: none; }
}

/* Free Tools nav link — special highlight */
.cl-nav-tools {
	color: var(--accent) !important;
	font-weight: 600 !important;
	position: relative;
}
.cl-nav-tools::before {
	content: '';
	position: absolute;
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 8px var(--accent);
	animation: clNavToolsPulse 1.6s ease-in-out infinite;
}
@keyframes clNavToolsPulse {
	0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(0.85); }
	50%      { opacity: 1;   transform: translateY(-50%) scale(1.25); }
}

/* ========== NAVIGATION ========== */
.cl-nav {
	position: sticky; top: 0; z-index: 50;
	background: rgba(10, 14, 26, 0.8);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid var(--border);
	transition: all 0.3s ease;
}
body.admin-bar .cl-nav { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .cl-nav { top: 46px; }
}
.cl-nav-inner {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 32px;
	max-width: 1280px;
	margin: 0 auto;
}
.cl-logo {
	display: flex; align-items: center; gap: 10px;
	font-family: 'Geist', sans-serif;
	font-size: 20px; font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--text);
	text-decoration: none;
}
.cl-logo-img {
	display: block;
	
	width: auto;
	max-width: 220px;
	object-fit: contain;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
.cl-logo-img-footer {
	
	max-width: 260px;
	filter: none;
}
.cl-logo-mark {
	width: 32px; height: 32px;
	background: var(--gradient-1);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 16px;
	color: white;
	box-shadow: 0 4px 12px var(--accent-soft);
}
.cl-nav-cta {
	background: var(--text) !important;
	color: var(--bg) !important;
	padding: 10px 20px !important;
	border-radius: 100px !important;
	font-weight: 600 !important;
	transition: all 0.2s ease;
}
.cl-nav-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
	background: var(--text) !important;
}

/* AI Chatbot nav link with "New" badge */
.cl-nav-hot {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	color: var(--text) !important;
	font-weight: 600 !important;
}
.cl-nav-hot-tag {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: white;
	background: linear-gradient(135deg, var(--accent), #A855F7);
	padding: 2px 7px;
	border-radius: 100px;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
	animation: clNavHotPulse 2.4s ease-in-out infinite;
}
@keyframes clNavHotPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}

/* Screen-reader only (mega toggle label) */
.cl-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;
}

/* ========== SERVICES MEGA MENU + MOBILE DRAWER ========== */
.cl-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	cursor: pointer;
	color: var(--text);
	transition: background 0.2s ease, border-color 0.2s ease;
}
.cl-nav-toggle:hover {
	background: var(--border);
	border-color: rgba(255, 255, 255, 0.12);
}
.cl-nav-toggle-bars,
.cl-nav-toggle-bars::before,
.cl-nav-toggle-bars::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: var(--text);
	position: relative;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.cl-nav-toggle-bars::before,
.cl-nav-toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}
.cl-nav-toggle-bars::before { top: -6px; }
.cl-nav-toggle-bars::after { top: 6px; }
html.cl-nav-drawer-open .cl-nav-toggle-bars {
	background: transparent;
}
html.cl-nav-drawer-open .cl-nav-toggle-bars::before {
	transform: translateY(6px) rotate(45deg);
}
html.cl-nav-drawer-open .cl-nav-toggle-bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

.cl-nav-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(2, 6, 12, 0.62);
	border: 0;
	padding: 0;
	cursor: pointer;
}
html.cl-nav-drawer-open .cl-nav-backdrop {
	display: block;
}

.cl-nav-menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1;
	min-width: 0;
}
.cl-nav-menu-inner {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: nowrap;
}

.cl-nav-mega {
	position: relative;
	z-index: 1;
}
.cl-nav-mega-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 8px;
	transition: all 0.2s ease;
	letter-spacing: -0.01em;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
.cl-nav-mega-trigger:hover,
.cl-nav-mega-trigger[aria-expanded="true"] {
	color: var(--text);
	background: var(--border);
}
.cl-nav-mega-trigger[aria-expanded="true"] {
	box-shadow:
		0 0 0 1px rgba(34, 211, 238, 0.35),
		0 8px 28px -12px rgba(255, 107, 53, 0.22);
}
.cl-nav-mega-caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.75;
	transition: transform 0.2s ease;
}
.cl-nav-mega-trigger[aria-expanded="true"] .cl-nav-mega-caret {
	transform: rotate(180deg);
}

.cl-nav-mega-panel {
	width: 100%;
	padding: 0;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(165deg, rgba(18, 26, 44, 0.97) 0%, rgba(10, 14, 26, 0.98) 48%, rgba(8, 14, 28, 0.99) 100%);
	box-shadow:
		0 40px 80px -36px rgba(0, 0, 0, 0.75),
		0 0 0 1px rgba(34, 211, 238, 0.08),
		0 0 80px -24px rgba(255, 107, 53, 0.12);
	backdrop-filter: blur(24px) saturate(180%);
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	z-index: 100;
	overflow: hidden;
	box-sizing: border-box;
}
/* Full-bleed mega under sticky nav (desktop) — not clipped by Services column */
@media (min-width: 969px) {
	.cl-nav-mega-panel {
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		/* `top` set in JS to nav.offsetHeight — nav has backdrop-filter so fixed coords are nav-local */
		margin-top: 0;
		border-radius: 0 0 22px 22px;
		border-top: none;
		padding: 0 clamp(20px, 4vw, 48px);
		max-height: min(72vh, calc(100vh - 140px));
		overflow-y: auto;
		overflow-x: hidden;
	}
	.cl-nav-mega-grid {
		max-width: 1280px;
		margin: 0 auto;
		width: 100%;
	}
}
.cl-nav-mega-panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(34, 211, 238, 0.5) 22%,
		rgba(255, 107, 53, 0.85) 50%,
		rgba(168, 85, 247, 0.45) 78%,
		transparent 100%
	);
	background-size: 200% 100%;
	animation: clMegaTopline 5s linear infinite;
	z-index: 2;
	pointer-events: none;
}
@keyframes clMegaTopline {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
.cl-nav-mega-panel-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(120% 70% at 100% -10%, rgba(255, 107, 53, 0.16) 0%, transparent 42%),
		radial-gradient(90% 55% at -5% 110%, rgba(34, 211, 238, 0.12) 0%, transparent 48%),
		radial-gradient(60% 40% at 50% 50%, rgba(168, 85, 247, 0.06) 0%, transparent 60%);
}
.cl-nav-mega-panel:not([hidden]) {
	animation: clMegaIn 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes clMegaIn {
	from { opacity: 0; transform: translateY(-8px) scale(0.99); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.cl-nav-mega-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(228px, 288px) 1fr;
	min-height: 320px;
}
.cl-nav-mega-pillars {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 14px 18px 18px;
	margin: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.09);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
}
.cl-nav-mega-pillar {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	font-family: 'Geist', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--text-muted);
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.cl-nav-mega-pillar-num {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: rgba(148, 163, 184, 0.5);
	min-width: 22px;
	flex-shrink: 0;
	transition: color 0.18s ease, text-shadow 0.18s ease;
}
.cl-nav-mega-pillar-text {
	flex: 1;
	line-height: 1.3;
}
.cl-nav-mega-pillar:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.05);
	transform: translateX(2px);
}
.cl-nav-mega-pillar:hover .cl-nav-mega-pillar-num {
	color: rgba(34, 211, 238, 0.75);
}
.cl-nav-mega-pillar.is-active {
	color: var(--text);
	background: rgba(34, 211, 238, 0.1);
	border-color: rgba(34, 211, 238, 0.28);
	box-shadow:
		inset 3px 0 0 0 #22d3ee,
		0 0 0 1px rgba(255, 107, 53, 0.12),
		0 12px 32px -20px rgba(34, 211, 238, 0.35);
}
.cl-nav-mega-pillar.is-active .cl-nav-mega-pillar-num {
	color: #22d3ee;
	text-shadow: 0 0 20px rgba(34, 211, 238, 0.45);
}

.cl-nav-mega-detail {
	padding: 20px 28px 28px 26px;
	position: relative;
	overflow: hidden;
}
.cl-nav-mega-detail-shade {
	position: absolute;
	top: -50%;
	right: -25%;
	width: 75%;
	height: 160%;
	background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.14) 0%, transparent 55%);
	pointer-events: none;
	z-index: 0;
}
.cl-nav-mega-pane {
	position: relative;
	z-index: 1;
}
.cl-nav-mega-pane[hidden] {
	display: none !important;
}
.cl-nav-mega-pane:not([hidden]) {
	display: block;
}
.cl-nav-mega-eyebrow {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(148, 163, 184, 0.85);
	margin: 0 0 10px;
}
.cl-nav-mega-eyebrow::after {
	content: "";
	display: block;
	width: 36px;
	height: 2px;
	margin-top: 10px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--accent), rgba(34, 211, 238, 0.6));
	opacity: 0.9;
}
.cl-nav-mega-pane-title {
	font-family: 'Geist', sans-serif;
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.12;
	color: var(--text);
	margin: 0 0 12px;
}
.cl-nav-mega-pane-title .cl-italic {
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	font-weight: 400;
	color: rgba(245, 247, 250, 0.95);
}
.cl-nav-mega-lede {
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0 0 18px;
	max-width: 46rem;
}
.cl-nav-mega-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.cl-nav-mega-links li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cl-nav-mega-links li:last-child {
	border-bottom: 0;
}
.cl-nav-mega-links a {
	position: relative;
	display: block;
	padding: 12px 14px 12px 34px;
	border-radius: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
	border: 0 solid transparent;
	transition:
		background 0.18s ease,
		color 0.18s ease,
		transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.18s ease;
}
.cl-nav-mega-links a::before {
	content: "››";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: -0.08em;
	color: rgba(34, 211, 238, 0.7);
	transition: color 0.18s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.cl-nav-mega-links a:hover {
	background: linear-gradient(90deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.02) 55%, transparent 100%);
	color: var(--text);
	transform: translateX(5px);
	box-shadow: inset 3px 0 0 0 rgba(255, 107, 53, 0.65);
}
.cl-nav-mega-links a:hover::before {
	color: var(--accent);
	transform: translateY(-50%) translateX(3px);
}

.cl-nav-menu-inner > a:not(.cl-nav-mega-trigger) {
	color: var(--text-muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 8px;
	transition: all 0.2s ease;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.cl-nav-menu-inner > a:not(.cl-nav-mega-trigger):hover {
	color: var(--text);
	background: var(--border);
}

@media (max-width: 968px) {
	.cl-nav-toggle {
		display: inline-flex;
	}
	.cl-nav-menu {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(100vw - 56px, 380px);
		max-width: 100%;
		flex: none;
		align-items: stretch;
		justify-content: flex-start;
		padding: 88px 20px 32px 24px;
		background: linear-gradient(180deg, #0c1220 0%, #0a0e1a 100%);
		border-left: 1px solid var(--border);
		box-shadow: -24px 0 48px rgba(0, 0, 0, 0.45);
		transform: translateX(100%);
		transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
		z-index: 50;
		overflow-y: auto;
	}
	html.cl-nav-drawer-open .cl-nav-menu {
		transform: translateX(0);
	}
	.cl-nav-menu-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		flex-wrap: nowrap;
	}
	.cl-nav-menu-inner > a:not(.cl-nav-mega-trigger) {
		white-space: normal;
		line-height: 1.35;
		padding: 10px 14px;
	}
	.cl-nav-mega {
		width: 100%;
	}
	.cl-nav-mega-trigger {
		width: 100%;
		justify-content: space-between;
	}
	.cl-nav-mega-panel {
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		width: 100%;
		max-width: none !important;
		max-height: none !important;
		margin-top: 8px;
		margin-bottom: 8px;
		border-radius: 14px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		box-shadow: none;
		overflow: visible;
	}
	.cl-nav-mega-panel[hidden] {
		display: none !important;
	}
	.cl-nav-mega-panel:not([hidden]) {
		display: block;
	}
	.cl-nav-mega-grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.cl-nav-mega-pillars {
		flex-direction: row;
		flex-wrap: wrap;
		padding: 10px;
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		gap: 6px;
	}
	.cl-nav-mega-pillar {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-family: 'Geist Mono', ui-monospace, monospace;
		padding: 10px 12px;
		min-width: calc(50% - 4px);
		flex: 1 1 calc(50% - 4px);
	}
	.cl-nav-mega-pillar-text {
		font-family: 'Geist', sans-serif;
		font-size: 12px;
		font-weight: 600;
		text-transform: none;
		letter-spacing: -0.02em;
		line-height: 1.25;
	}
	.cl-nav-mega-pillar-num {
		font-size: 9px;
		opacity: 0.85;
	}
	.cl-nav-mega-detail {
		padding: 16px 14px 18px;
	}
	html.cl-nav-drawer-open {
		overflow: hidden;
	}
}

/* ========== SERVICES HUB PAGE (codelab/services-hub) ========== */
/* Override global .cl-section padding (120px) — same specificity order was stacking ~240px between hero and directory */
.cl-services-hub-hero {
	position: relative;
	overflow: hidden;
}
.cl-section.cl-services-hub-hero {
	padding: 48px 0 28px;
}
.cl-section.cl-services-hub-grid-section {
	/* beats global .cl-section — was stacking double 120px with hero */
	padding: 28px 0 96px;
}
.cl-services-hub-hero-glow {
	position: absolute;
	inset: -40% -20% auto;
	height: 90%;
	background: radial-gradient(ellipse at 30% 20%, rgba(34, 211, 238, 0.12) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 60%, rgba(255, 107, 53, 0.1) 0%, transparent 50%);
	pointer-events: none;
}
.cl-services-hub-hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
}
@media (max-width: 900px) {
	.cl-services-hub-hero-grid {
		grid-template-columns: 1fr;
	}
}
.cl-services-hub-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.cl-services-hub-hero-mock {
	display: flex;
	justify-content: center;
}
.cl-services-hub-hero-mock-frame {
	width: min(100%, 320px);
	border-radius: 16px;
	padding: 14px 14px 18px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6);
}
.cl-services-hub-hero-mock-row {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
}
.cl-services-hub-hero-mock-row span {
	height: 6px;
	border-radius: 99px;
	background: rgba(148, 163, 184, 0.25);
	animation: clShvMockPulse 2.4s ease-in-out infinite;
}
.cl-services-hub-hero-mock-row span:nth-child(1) { width: 28%; animation-delay: 0s; }
.cl-services-hub-hero-mock-row span:nth-child(2) { width: 18%; animation-delay: 0.2s; }
.cl-services-hub-hero-mock-row span:nth-child(3) { width: 22%; animation-delay: 0.4s; }
@keyframes clShvMockPulse {
	0%, 100% { opacity: 0.45; transform: scaleX(1); }
	50% { opacity: 1; transform: scaleX(1.04); }
}
.cl-services-hub-hero-mock-body {
	border-radius: 12px;
	background: rgba(8, 12, 22, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 16px;
	min-height: 140px;
	position: relative;
	overflow: hidden;
}
.cl-services-hub-hero-mock-chip {
	height: 10px;
	width: 46%;
	border-radius: 6px;
	background: linear-gradient(90deg, rgba(255, 107, 53, 0.55), rgba(34, 211, 238, 0.45));
	margin-bottom: 10px;
	animation: clShvMockChip 3s ease-in-out infinite;
}
.cl-services-hub-hero-mock-chip-b {
	width: 72%;
	animation-delay: 0.4s;
	opacity: 0.85;
}
@keyframes clShvMockChip {
	0%, 100% { transform: translateX(0); opacity: 0.75; }
	50% { transform: translateX(8px); opacity: 1; }
}
.cl-services-hub-hero-mock-lines span {
	display: block;
	height: 5px;
	border-radius: 4px;
	background: rgba(148, 163, 184, 0.18);
	margin-bottom: 8px;
	animation: clShvMockLine 2.2s ease-in-out infinite;
}
.cl-services-hub-hero-mock-lines span:nth-child(1) { width: 100%; }
.cl-services-hub-hero-mock-lines span:nth-child(2) { width: 88%; animation-delay: 0.15s; }
.cl-services-hub-hero-mock-lines span:nth-child(3) { width: 64%; animation-delay: 0.3s; }
@keyframes clShvMockLine {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 0.85; }
}

.cl-services-hub-section-head {
	margin-bottom: 36px;
	text-align: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.cl-services-hub-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (min-width: 1025px) {
	.cl-services-hub-grid {
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: auto;
		gap: 20px;
	}
	.cl-services-hub-card:nth-child(1) { grid-column: span 7; }
	.cl-services-hub-card:nth-child(2) { grid-column: span 5; }
	.cl-services-hub-card:nth-child(3) { grid-column: span 4; }
	.cl-services-hub-card:nth-child(4) { grid-column: span 4; }
	.cl-services-hub-card:nth-child(5) { grid-column: span 4; }
	.cl-services-hub-card:nth-child(6) { grid-column: span 8; }
	.cl-services-hub-card:nth-child(7) { grid-column: span 4; }
}
@media (max-width: 1024px) {
	.cl-services-hub-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.cl-services-hub-card:nth-child(n) {
		grid-column: auto;
	}
}
@media (max-width: 640px) {
	.cl-services-hub-grid {
		grid-template-columns: 1fr;
	}
}

.cl-services-hub-card {
	position: relative;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(12, 16, 28, 0.72);
	overflow: hidden;
	padding: 0 0 22px;
	transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s ease, border-color 0.22s ease;
}
.cl-services-hub-card::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--tn), transparent);
	background-size: 200% 100%;
	animation: clMegaTopline 5s linear infinite;
	opacity: 0.9;
	z-index: 2;
	pointer-events: none;
}
.cl-services-hub-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: 0 28px 56px -28px var(--tn-soft), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.cl-services-hub-card-num {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 3;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: rgba(148, 163, 184, 0.45);
}
.cl-services-hub-card:hover .cl-services-hub-card-num {
	color: var(--tn);
}

.cl-services-hub-card-visual {
	position: relative;
	min-height: 108px;
	margin: 0 0 4px;
	padding: 16px 18px 8px;
	background: radial-gradient(120% 90% at 20% 0%, var(--tn-faint) 0%, transparent 58%),
		radial-gradient(80% 70% at 100% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 55%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
}
.cl-services-hub-card-body {
	position: relative;
	padding: 16px 22px 0;
}
.cl-services-hub-card-label {
	display: block;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 8px;
}
.cl-services-hub-card-title {
	font-size: clamp(1.15rem, 2.2vw, 1.35rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0 0 14px;
	color: var(--text);
}
.cl-services-hub-card-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cl-services-hub-card-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text-muted);
	text-decoration: none;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
	border-radius: 0;
}
.cl-services-hub-card-links li:last-child a {
	border-bottom: 0;
}
.cl-services-hub-link-arr {
	font-size: 14px;
	color: var(--tn);
	opacity: 0.35;
	transform: translateX(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.cl-services-hub-card-links a:hover {
	color: var(--text);
	border-color: rgba(255, 255, 255, 0.08);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent);
}
.cl-services-hub-card-links a:hover .cl-services-hub-link-arr {
	opacity: 1;
	transform: translateX(0);
	color: var(--accent);
}

/* —— Mini scene: AI tokens —— */
.cl-shv-ai { min-height: 112px; }
.cl-shv-ai-ring {
	position: absolute;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	left: 50%;
	top: 50%;
	margin: -36px 0 0 -36px;
	border: 1px dashed rgba(34, 211, 238, 0.35);
	animation: clShvAiSpin 14s linear infinite;
}
@keyframes clShvAiSpin {
	to { transform: rotate(360deg); }
}
.cl-shv-ai-chip {
	position: absolute;
	width: 52px;
	height: 22px;
	left: 14%;
	top: 42%;
	border-radius: 8px;
	background: linear-gradient(90deg, rgba(34, 211, 238, 0.35), rgba(168, 85, 247, 0.25));
	border: 1px solid rgba(255, 255, 255, 0.12);
	animation: clShvAiBob 2.6s ease-in-out infinite;
}
.cl-shv-ai-chip-2 {
	left: 42%;
	top: 28%;
	width: 44px;
	animation-delay: 0.35s;
	background: linear-gradient(90deg, rgba(255, 107, 53, 0.35), rgba(34, 211, 238, 0.2));
}
.cl-shv-ai-chip-3 {
	left: 62%;
	top: 52%;
	width: 48px;
	animation-delay: 0.7s;
}
@keyframes clShvAiBob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

/* —— Mini scene: mobile device + scan —— */
.cl-shv-mobile-bezel {
	position: absolute;
	inset: 14px 18% 18px;
	border-radius: 14px;
	border: 2px solid rgba(168, 85, 247, 0.35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.cl-shv-mobile-screen {
	position: absolute;
	inset: 22px 24% 28px;
	border-radius: 10px;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(8, 12, 22, 0.5));
}
.cl-shv-mobile-scan {
	position: absolute;
	left: 24%;
	right: 24%;
	height: 3px;
	top: 32%;
	background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.9), transparent);
	animation: clShvScan 2.8s ease-in-out infinite;
	opacity: 0.85;
}
@keyframes clShvScan {
	0%, 100% { transform: translateY(0); opacity: 0.3; }
	50% { transform: translateY(36px); opacity: 1; }
}

/* —— Mini scene: blockchain SVG —— */
.cl-shv-chain {
	color: var(--tn);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 112px;
}
.cl-shv-chain-svg {
	max-width: 200px;
}
.cl-shv-chain-block {
	animation: clShvChainPulse 2.4s ease-in-out infinite;
	transform-origin: center;
}
.cl-shv-chain-b2 { animation-delay: 0.25s; }
.cl-shv-chain-b3 { animation-delay: 0.5s; }
@keyframes clShvChainPulse {
	0%, 100% { opacity: 0.65; }
	50% { opacity: 1; }
}
.cl-shv-chain-link {
	animation: clShvChainDash 1.8s linear infinite;
}
@keyframes clShvChainDash {
	to { stroke-dashoffset: -16; }
}

/* —— Mini scene: hire hub —— */
.cl-shv-hire { min-height: 112px; }
.cl-shv-hire-hub {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--tn);
	left: 50%;
	top: 50%;
	margin: -8px 0 0 -8px;
	box-shadow: 0 0 24px var(--tn-soft);
	animation: clShvHubGlow 2s ease-in-out infinite;
}
@keyframes clShvHubGlow {
	0%, 100% { box-shadow: 0 0 18px var(--tn-soft); transform: scale(1); }
	50% { box-shadow: 0 0 32px var(--tn-soft); transform: scale(1.08); }
}
.cl-shv-hire-node {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.cl-shv-hire-n1 { left: 22%; top: 38%; animation: clShvNodeFloat 3s ease-in-out infinite; }
.cl-shv-hire-n2 { right: 20%; top: 32%; animation: clShvNodeFloat 3s ease-in-out infinite 0.4s; }
.cl-shv-hire-n3 { left: 38%; bottom: 22%; animation: clShvNodeFloat 3s ease-in-out infinite 0.8s; }
@keyframes clShvNodeFloat {
	0%, 100% { transform: translate(0, 0); opacity: 0.55; }
	50% { transform: translate(4px, -6px); opacity: 1; }
}
.cl-shv-hire-pulse {
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	border-radius: 12px;
	animation: clShvHireRing 3.2s ease-out infinite;
	pointer-events: none;
}
@keyframes clShvHireRing {
	0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
	70% { box-shadow: 0 0 0 28px rgba(16, 185, 129, 0); }
	100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* —— Mini scene: cloud layers —— */
.cl-shv-cloud { min-height: 112px; }
.cl-shv-cloud-layer {
	position: absolute;
	height: 14px;
	border-radius: 99px;
	background: rgba(59, 130, 246, 0.25);
	left: 12%;
	right: 18%;
	top: 38%;
	animation: clShvCloudDrift 4s ease-in-out infinite;
}
.cl-shv-cloud-l2 {
	top: 52%;
	left: 20%;
	right: 12%;
	opacity: 0.75;
	animation-delay: 0.5s;
	background: rgba(34, 211, 238, 0.2);
}
.cl-shv-cloud-l3 {
	top: 66%;
	left: 16%;
	right: 22%;
	opacity: 0.55;
	animation-delay: 1s;
}
@keyframes clShvCloudDrift {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(12px); }
}
.cl-shv-cloud-drft {
	position: absolute;
	width: 40px;
	height: 4px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.2);
	top: 28%;
	left: 18%;
	animation: clShvCloudDrift 3s ease-in-out infinite reverse;
}

/* —— Mini scene: software bars + trend —— */
.cl-shv-stack {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 10px;
	min-height: 112px;
	padding-bottom: 8px;
}
.cl-shv-stack-bar {
	width: 14px;
	border-radius: 6px 6px 2px 2px;
	background: linear-gradient(180deg, var(--tn-2), rgba(255, 255, 255, 0.08));
	transform-origin: bottom center;
	animation: clShvBarGrow 2.4s ease-in-out infinite;
}
.cl-shv-stack-bar:nth-child(1) { height: 32px; animation-delay: 0s; }
.cl-shv-stack-b2 { height: 48px; animation-delay: 0.15s; }
.cl-shv-stack-b3 { height: 38px; animation-delay: 0.3s; }
.cl-shv-stack-b4 { height: 56px; animation-delay: 0.45s; }
@keyframes clShvBarGrow {
	0%, 100% { transform: scaleY(0.55); opacity: 0.65; }
	50% { transform: scaleY(1); opacity: 1; }
}
.cl-shv-stack-line {
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: 26px;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.5), transparent);
	transform: rotate(-8deg);
	animation: clShvTrend 3s ease-in-out infinite;
}
@keyframes clShvTrend {
	0%, 100% { opacity: 0.35; }
	50% { opacity: 0.95; }
}

/* —— Mini scene: on-demand route —— */
.cl-shv-od { min-height: 112px; }
.cl-shv-od-map {
	position: absolute;
	inset: 18px 14%;
	border-radius: 12px;
	border: 1px dashed rgba(245, 158, 11, 0.25);
	opacity: 0.7;
}
.cl-shv-od-path {
	position: absolute;
	width: 70%;
	height: 2px;
	background: repeating-linear-gradient(90deg, rgba(245, 158, 11, 0.5) 0 6px, transparent 6px 12px);
	top: 52%;
	left: 15%;
	transform: rotate(-6deg);
}
.cl-shv-od-dot {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	left: 22%;
	top: 48%;
	box-shadow: 0 0 14px rgba(255, 107, 53, 0.55);
	animation: clShvOdDot 2.8s ease-in-out infinite;
}
@keyframes clShvOdDot {
	0% { left: 22%; top: 48%; }
	50% { left: 72%; top: 36%; }
	100% { left: 22%; top: 48%; }
}
.cl-shv-od-pin {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid rgba(245, 158, 11, 0.85);
	right: 22%;
	top: 34%;
	animation: clShvPin 2s ease-in-out infinite;
}
@keyframes clShvPin {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
	.cl-services-hub-hero-mock-row span,
	.cl-services-hub-hero-mock-chip,
	.cl-services-hub-hero-mock-lines span,
	.cl-shv-ai-ring,
	.cl-shv-ai-chip,
	.cl-shv-mobile-scan,
	.cl-shv-chain-block,
	.cl-shv-chain-link,
	.cl-shv-hire-hub,
	.cl-shv-hire-node,
	.cl-shv-hire-pulse,
	.cl-shv-cloud-layer,
	.cl-shv-cloud-drft,
	.cl-shv-stack-bar,
	.cl-shv-stack-line,
	.cl-shv-od-dot,
	.cl-shv-od-pin {
		animation: none !important;
	}
	.cl-shv-ai-ring { transform: none; }
}

/* ========== HERO SECTION ========== */
.cl-hero {
	position: relative;
	padding: 80px 0 40px;
	overflow: hidden;
	background: var(--bg);
}
.cl-hero::before {
	content: '';
	position: absolute; inset: 0;
	background: var(--gradient-mesh);
	pointer-events: none;
}
.cl-hero::after {
	content: '';
	position: absolute; top: 0; left: 0; right: 0;
	height: 600px;
	background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 107, 53, 0.12), transparent);
	pointer-events: none;
}
.cl-hero-grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 50% at 50% 30%, black, transparent);
	-webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 30%, black, transparent);
	pointer-events: none;
}
.cl-hero-content {
	position: relative; z-index: 2;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 60px;
	align-items: center;
}
.cl-hero-badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255, 107, 53, 0.1);
	border: 1px solid rgba(255, 107, 53, 0.25);
	padding: 6px 14px;
	border-radius: 100px;
	font-size: 12px; font-weight: 500;
	color: var(--accent);
	letter-spacing: 0.02em;
	margin-bottom: 24px;
	animation: clFadeInUp 0.6s ease both;
}
.cl-hero-badge .cl-pulse {
	width: 6px; height: 6px;
	background: var(--accent);
	border-radius: 50%;
	position: relative;
}
.cl-hero-badge .cl-pulse::after {
	content: '';
	position: absolute; inset: -4px;
	background: var(--accent);
	border-radius: 50%;
	opacity: 0.3;
	animation: clPulse 2s ease infinite;
}
@keyframes clPulse {
	0%, 100% { transform: scale(1); opacity: 0.3; }
	50% { transform: scale(1.5); opacity: 0; }
}

.cl-hero h1 {
	font-family: 'Instrument Serif', serif;
	font-size: clamp(48px, 6.5vw, 84px);
	line-height: 1;
	letter-spacing: -0.04em;
	font-weight: 400;
	margin-bottom: 28px;
	animation: clFadeInUp 0.7s 0.1s ease both;
	color: var(--text);
}
.cl-hero h1 .cl-highlight {
	font-style: italic;
	background: var(--gradient-1);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cl-hero h1 .cl-underline {
	position: relative;
	display: inline-block;
}
.cl-hero h1 .cl-underline::after {
	content: '';
	position: absolute;
	bottom: 4px; left: 0; right: 0;
	height: 8px;
	background: var(--accent);
	opacity: 0.3;
	z-index: -1;
	transform: skewY(-1deg);
}
.cl-hero-subtitle {
	font-size: 19px;
	color: var(--text-muted);
	max-width: 540px;
	margin-bottom: 40px;
	line-height: 1.6;
	animation: clFadeInUp 0.7s 0.2s ease both;
}
.cl-hero-ctas {
	display: flex; gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 48px;
	animation: clFadeInUp 0.7s 0.3s ease both;
}
.cl-btn-primary {
	background: var(--text);
	color: var(--bg);
	padding: 14px 24px;
	border-radius: 100px;
	border: none;
	font-family: 'Geist', sans-serif;
	font-size: 15px; font-weight: 600;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px;
	transition: all 0.2s ease;
	letter-spacing: -0.01em;
	text-decoration: none;
}
.cl-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(255, 255, 255, 0.15);
	color: var(--bg);
}
.cl-btn-primary svg { transition: transform 0.2s; }
.cl-btn-primary:hover svg { transform: translateX(3px); }

.cl-btn-secondary {
	background: transparent;
	color: var(--text);
	padding: 14px 24px;
	border-radius: 100px;
	border: 1px solid var(--border-strong);
	font-family: 'Geist', sans-serif;
	font-size: 15px; font-weight: 500;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px;
	transition: all 0.2s ease;
	text-decoration: none;
}
.cl-btn-secondary:hover {
	background: var(--border);
	border-color: var(--text-muted);
	color: var(--text);
}

.cl-hero-trust {
	display: flex; gap: 24px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--text-dim);
	animation: clFadeInUp 0.7s 0.4s ease both;
}
.cl-hero-trust span {
	display: inline-flex; align-items: center; gap: 6px;
}
.cl-hero-trust .cl-dot {
	width: 4px; height: 4px;
	background: var(--green);
	border-radius: 50%;
}

/* Hero visual — animated card stack */
.cl-hero-visual {
	position: relative;
	height: 500px;
	animation: clFadeInUp 0.8s 0.4s ease both;
}
.cl-float-card {
	position: absolute;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.3);
	backdrop-filter: blur(20px);
}
.cl-card-chat {
	top: 40px; left: 0;
	width: 280px;
	animation: clFloat1 6s ease-in-out infinite;
}
.cl-card-stats {
	top: 80px; right: 0;
	width: 220px;
	animation: clFloat2 7s ease-in-out infinite;
}
.cl-card-code {
	bottom: 30px; left: 30px;
	width: 320px;
	animation: clFloat3 8s ease-in-out infinite;
}
@keyframes clFloat1 {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-10px) rotate(-1deg); }
}
@keyframes clFloat2 {
	0%, 100% { transform: translateY(0) rotate(2deg); }
	50% { transform: translateY(-15px) rotate(3deg); }
}
@keyframes clFloat3 {
	0%, 100% { transform: translateY(0) rotate(-1deg); }
	50% { transform: translateY(-8px) rotate(0deg); }
}

.cl-chat-header {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 14px;
}
.cl-chat-avatar {
	width: 32px; height: 32px;
	background: var(--gradient-1);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 700;
	color: white;
}
.cl-chat-name {
	font-size: 13px; font-weight: 600; color: var(--text);
}
.cl-chat-status {
	font-size: 11px; color: var(--green);
	display: flex; align-items: center; gap: 4px;
}
.cl-chat-status::before {
	content: ''; width: 6px; height: 6px;
	background: var(--green); border-radius: 50%;
}
.cl-chat-msg {
	background: var(--bg);
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 12px;
	color: var(--text-muted);
	margin-bottom: 6px;
}
.cl-chat-msg.cl-bot {
	background: var(--accent-soft);
	color: var(--text);
}

.cl-stat-mini {
	display: flex; align-items: baseline; gap: 8px;
	margin-bottom: 8px;
}
.cl-stat-num {
	font-family: 'Instrument Serif', serif;
	font-size: 36px; font-weight: 400;
	color: var(--text);
	line-height: 1;
}
.cl-stat-label {
	font-size: 11px;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.cl-stat-trend {
	font-size: 11px; color: var(--green);
	font-weight: 500;
	display: inline-flex; align-items: center; gap: 3px;
	background: rgba(16, 185, 129, 0.1);
	padding: 2px 6px;
	border-radius: 4px;
	margin-top: 8px;
}

.cl-code-block {
	background: var(--bg);
	border-radius: 10px;
	padding: 12px;
	font-family: 'Geist Mono', monospace;
	font-size: 11px;
	color: var(--text-muted);
	line-height: 1.7;
}
.cl-code-block .cl-keyword { color: var(--purple); }
.cl-code-block .cl-string { color: var(--green); }
.cl-code-block .cl-comment { color: var(--text-dim); font-style: italic; }
.cl-code-header {
	display: flex; gap: 6px; margin-bottom: 10px;
}
.cl-code-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--border-strong);
}
.cl-code-dot:nth-child(1) { background: #FF5F57; }
.cl-code-dot:nth-child(2) { background: #FFBD2E; }
.cl-code-dot:nth-child(3) { background: #28C840; }

@keyframes clFadeInUp {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ========== TRUST LOGOS ========== */
.cl-trust-section {
	padding: 32px 0 40px;
	background: var(--bg-secondary);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.cl-trust-label {
	text-align: center;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--text-dim);
	margin-bottom: 28px;
	font-weight: 500;
}
.cl-trust-logos {
	display: flex; justify-content: space-around; align-items: center;
	flex-wrap: wrap; gap: 40px 56px;
	opacity: 0.85;
}
.cl-logo-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text-muted);
	transition: all 0.3s ease;
	white-space: nowrap;
	font-family: 'Geist', sans-serif;
	height: 28px;
}
.cl-logo-item:hover {
	color: var(--text);
	transform: scale(1.04);
	opacity: 1;
}
.cl-logo-item svg { display: block; height: 26px; width: auto; }
.cl-logo-item svg path,
.cl-logo-item svg circle,
.cl-logo-item svg rect { transition: fill 0.3s ease; }

/* Per-logo tweaks for placeholder wordmarks */
.cl-logo-google { font-family: 'Geist', Arial, sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.cl-logo-medium { font-family: 'Geist', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.cl-logo-medium .cl-medium-dots { font-size: 16px; letter-spacing: -4px; margin-right: 4px; }
.cl-logo-factset { font-family: 'Geist', Arial, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 0.02em; }
.cl-logo-bunge   { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 22px; letter-spacing: 0.04em; }
.cl-logo-celanese { font-family: 'Geist', sans-serif; font-weight: 400; font-size: 18px; letter-spacing: 0.01em; }
.cl-logo-darden   { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; }

/* ========== STATS ========== */
.cl-stats-section {
	padding: 100px 0;
	position: relative;
}
.cl-stats-section::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.05), transparent 60%);
	pointer-events: none;
}
.cl-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	position: relative;
	z-index: 1;
}
.cl-stat-card {
	text-align: center;
	padding: 32px 24px;
	border-right: 1px solid var(--border);
}
.cl-stat-card:last-child { border-right: none; }
.cl-stat-big {
	font-family: 'Instrument Serif', serif;
	font-size: 64px;
	font-weight: 400;
	background: linear-gradient(180deg, var(--text) 50%, var(--text-muted) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;
	margin-bottom: 8px;
	letter-spacing: -0.04em;
}
.cl-stat-text {
	font-size: 14px;
	color: var(--text-muted);
	font-weight: 500;
}

/* ========== SECTION HEADERS ========== */
.cl-section {
	padding: 120px 0;
	position: relative;
}
.cl-eyebrow {
	display: inline-block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--accent);
	font-weight: 600;
	margin-bottom: 16px;
}
.cl-heading {
	font-family: 'Instrument Serif', serif;
	font-size: clamp(36px, 4.5vw, 56px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: 20px;
	max-width: 720px;
	color: var(--text);
}
.cl-heading .cl-italic {
	font-style: italic;
	background: var(--gradient-1);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cl-sub {
	font-size: 18px;
	color: var(--text-muted);
	max-width: 640px;
	line-height: 1.6;
	margin-bottom: 64px;
}

/* ========== WHAT WE DO ========== */
.cl-what-we-do {
	background: var(--bg);
}
.cl-wwd-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}
.cl-wwd-left { position: relative; }

/* Floating mini-cards visual under heading (left column) */
.cl-wwd-visual {
	position: relative;
	margin-top: 48px;
	height: 300px;
}
.cl-wwd-visual .cl-float-card {
	position: absolute;
	padding: 14px 16px;
	border-radius: 14px;
	min-width: 0;
	will-change: transform;
}

/* Card A — live deploy status (top-left) */
.cl-wwd-card-deploy {
	top: 0; left: 0;
	width: 240px;
	animation: clFloat1 6.5s ease-in-out infinite;
}
.cl-wwd-card-row {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 6px;
}
.cl-wwd-live-dot {
	width: 8px; height: 8px;
	background: var(--green);
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
	animation: clLivePulse 2s ease-out infinite;
}
@keyframes clLivePulse {
	0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
	70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
	100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.cl-wwd-card-title {
	font-size: 13px; font-weight: 600;
	color: var(--text);
}
.cl-wwd-card-meta {
	font-size: 11px;
	color: var(--text-dim);
	display: flex; gap: 6px; flex-wrap: wrap;
	margin-bottom: 10px;
}
.cl-wwd-card-meta strong { color: var(--text); font-weight: 600; }
.cl-wwd-card-meta .cl-wwd-card-sep { color: var(--border-strong); }
.cl-wwd-bar {
	height: 4px;
	background: var(--bg);
	border-radius: 100px;
	overflow: hidden;
	border: 1px solid var(--border);
}
.cl-wwd-bar-fill {
	display: block;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, var(--green), var(--blue));
	transform: translateX(-100%);
	animation: clBarRun 3.5s ease-in-out infinite;
}
@keyframes clBarRun {
	0%   { transform: translateX(-100%); }
	60%  { transform: translateX(0); }
	100% { transform: translateX(0); }
}

/* Card B — AI prompt → output (middle-right) */
.cl-wwd-card-prompt {
	top: 70px; right: 12px;
	width: 250px;
	animation: clFloat2 7.5s ease-in-out infinite;
}
.cl-wwd-prompt-line {
	display: flex; gap: 8px; align-items: flex-start;
	font-size: 12px;
	color: var(--text-muted);
	margin-bottom: 10px;
	line-height: 1.4;
}
.cl-wwd-prompt-tag {
	font-family: 'Geist Mono', monospace;
	font-size: 10px;
	color: var(--accent);
	background: rgba(255, 107, 53, 0.12);
	padding: 2px 6px;
	border-radius: 4px;
	flex-shrink: 0;
	letter-spacing: 0.02em;
}
.cl-wwd-prompt-text { color: var(--text); }
.cl-wwd-prompt-out {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 10px;
	background: var(--bg);
	border-radius: 8px;
	border: 1px solid var(--border);
}
.cl-wwd-spark {
	color: var(--accent);
	font-size: 14px;
	animation: clSparkBlink 1.4s ease-in-out infinite;
}
@keyframes clSparkBlink {
	0%, 100% { opacity: 1; transform: rotate(0); }
	50%      { opacity: 0.5; transform: rotate(180deg); }
}
.cl-wwd-typing {
	display: inline-flex; gap: 3px; align-items: center;
}
.cl-wwd-typing span {
	width: 4px; height: 4px;
	background: var(--text-muted);
	border-radius: 50%;
	animation: clTypingDot 1.2s ease-in-out infinite;
}
.cl-wwd-typing span:nth-child(2) { animation-delay: 0.15s; }
.cl-wwd-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes clTypingDot {
	0%, 100% { opacity: 0.3; transform: translateY(0); }
	50%      { opacity: 1; transform: translateY(-2px); }
}
.cl-wwd-prompt-done {
	margin-left: auto;
	font-size: 10px;
	color: var(--green);
	font-family: 'Geist Mono', monospace;
}

/* Card C — tech stack chips (bottom-left) */
.cl-wwd-card-stack {
	bottom: 0; left: 30px;
	width: 280px;
	animation: clFloat3 8.5s ease-in-out infinite;
}
.cl-wwd-card-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--text-dim);
	margin-bottom: 10px;
	font-weight: 600;
}
.cl-wwd-chips {
	display: flex; flex-wrap: wrap; gap: 6px;
}
.cl-wwd-chip {
	font-size: 11px;
	font-family: 'Geist Mono', monospace;
	padding: 4px 9px;
	border-radius: 100px;
	background: var(--bg);
	border: 1px solid var(--border);
	color: var(--text-muted);
	transition: all 0.2s ease;
}
.cl-wwd-chip:hover {
	color: var(--text);
	border-color: var(--border-strong);
	transform: translateY(-1px);
}
.cl-wwd-chip.cl-chip-blue   { color: var(--blue);   border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.08); }
.cl-wwd-chip.cl-chip-purple { color: var(--purple); border-color: rgba(168, 85, 247, 0.35); background: rgba(168, 85, 247, 0.08); }
.cl-wwd-chip.cl-chip-green  { color: var(--green);  border-color: rgba(16, 185, 129, 0.35);  background: rgba(16, 185, 129, 0.08); }

@media (prefers-reduced-motion: reduce) {
	.cl-wwd-card-deploy,
	.cl-wwd-card-prompt,
	.cl-wwd-card-stack,
	.cl-wwd-live-dot,
	.cl-wwd-bar-fill,
	.cl-wwd-spark,
	.cl-wwd-typing span {
		animation: none !important;
	}
}
.cl-wwd-text p {
	font-size: 17px;
	color: var(--text-muted);
	margin-bottom: 20px;
	line-height: 1.7;
}
.cl-wwd-text strong {
	color: var(--text);
	font-weight: 600;
}
.cl-wwd-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 28px;
}
.cl-wwd-feat {
	display: grid;
	grid-template-columns: 1fr 3fr;
	align-items: center;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px 14px;
	transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
	--feat-tone: var(--accent);
	--feat-tone-soft: rgba(255, 107, 53, 0.14);
}
.cl-wwd-feat.cl-tone-orange { --feat-tone: var(--accent);  --feat-tone-soft: rgba(255, 107, 53, 0.14); }
.cl-wwd-feat.cl-tone-green  { --feat-tone: var(--green);   --feat-tone-soft: rgba(16, 185, 129, 0.14); }
.cl-wwd-feat.cl-tone-blue   { --feat-tone: var(--blue);    --feat-tone-soft: rgba(59, 130, 246, 0.16); }
.cl-wwd-feat.cl-tone-purple { --feat-tone: var(--purple);  --feat-tone-soft: rgba(168, 85, 247, 0.16); }
.cl-wwd-feat:hover {
	border-color: var(--feat-tone);
	transform: translateY(-2px);
	background: var(--bg-secondary);
	box-shadow: 0 8px 24px -12px var(--feat-tone);
}
.cl-wwd-feat-visual {
	display: flex; align-items: center; justify-content: center;
}
.cl-wwd-feat-tile {
	width: 52px; height: 52px;
	border-radius: 12px;
	background: var(--feat-tone-soft);
	color: var(--feat-tone);
	display: inline-flex; align-items: center; justify-content: center;
	position: relative;
	overflow: hidden;
}
.cl-wwd-feat-tile::after {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(circle at 30% 30%, var(--feat-tone-soft), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.cl-wwd-feat:hover .cl-wwd-feat-tile::after { opacity: 1; }
.cl-wwd-feat-tile svg { width: 26px; height: 26px; display: block; }
.cl-wwd-feat-body { min-width: 0; }
.cl-wwd-feat h4 {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 2px;
	color: var(--text);
	letter-spacing: -0.01em;
}
.cl-wwd-feat p {
	font-size: 12.5px;
	color: var(--text-muted);
	line-height: 1.45;
	margin: 0;
}

/* Animated SVG icons inside what-we-do tiles */
.cl-anim-bolt {
	transform-origin: 50% 50%;
	animation: clBolt 2.4s ease-in-out infinite;
}
.cl-wwd-feat:hover .cl-anim-bolt { animation-duration: 1.2s; }
@keyframes clBolt {
	0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 transparent); }
	45%      { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 6px var(--feat-tone)); }
	55%      { transform: scale(1.05) rotate(2deg); }
}

.cl-anim-trend {
	transform-origin: 50% 50%;
	animation: clTrend 3s ease-in-out infinite;
}
@keyframes clTrend {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(2px); }
}
.cl-anim-trend path { stroke-dasharray: 32; stroke-dashoffset: 0; animation: clDraw 3s ease-in-out infinite; }
@keyframes clDraw {
	0%   { stroke-dashoffset: 32; }
	60%  { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}

.cl-anim-sparkle {
	transform-origin: 50% 50%;
	animation: clTwinkle 3.2s ease-in-out infinite;
}
@keyframes clTwinkle {
	0%, 100% { transform: rotate(0deg) scale(1); opacity: 1; }
	50%      { transform: rotate(180deg) scale(0.92); opacity: 0.85; }
}
.cl-anim-sparkle circle {
	animation: clBlink 1.8s ease-in-out infinite;
	transform-origin: center;
}
.cl-anim-sparkle circle:nth-child(3) { animation-delay: 0.6s; }
@keyframes clBlink {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.3; transform: scale(0.6); }
}

.cl-anim-globe {
	transform-origin: 50% 50%;
	animation: clFloat 4s ease-in-out infinite;
}
.cl-anim-globe ellipse {
	transform-origin: 50% 50%;
	animation: clGlobeSpin 8s linear infinite;
}
@keyframes clFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-2px); }
}
@keyframes clGlobeSpin {
	0%   { transform: scaleX(1); }
	50%  { transform: scaleX(-1); }
	100% { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.cl-anim-bolt, .cl-anim-trend, .cl-anim-trend path,
	.cl-anim-sparkle, .cl-anim-sparkle circle,
	.cl-anim-globe, .cl-anim-globe ellipse {
		animation: none !important;
	}
}

/* ========== AI SOLUTIONS ========== */
.cl-ai-section {
	background: linear-gradient(180deg, var(--bg) 0%, var(--bg-secondary) 100%);
	position: relative;
	overflow: hidden;
}
.cl-ai-section::before {
	content: '';
	position: absolute;
	top: -200px; left: 50%;
	width: 800px; height: 800px;
	background: radial-gradient(circle, rgba(168, 85, 247, 0.08), transparent 60%);
	transform: translateX(-50%);
	pointer-events: none;
}
.cl-ai-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	position: relative;
}
.cl-ai-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 32px;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
	cursor: pointer;
}
.cl-ai-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255, 107, 53, 0.10), transparent 70%);
	border-radius: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
.cl-ai-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255, 107, 53, 0.45);
	background: var(--bg-secondary);
	box-shadow:
		0 0 0 1px rgba(255, 107, 53, 0.25),
		0 18px 48px -18px rgba(255, 107, 53, 0.35),
		0 8px 24px rgba(0, 0, 0, 0.35);
}
.cl-ai-card:hover::before { opacity: 1; }
.cl-ai-card:hover h3 { color: var(--text); }
.cl-ai-card:hover p { color: var(--text-muted); }
.cl-ai-card:hover .cl-ai-link { gap: 8px; }

/* AI Card animated visual block — replaces emoji icon tile */
.cl-ai-visual {
	height: 140px;
	border-radius: 14px;
	background: var(--bg);
	border: 1px solid var(--border);
	padding: 12px 14px;
	margin-bottom: 22px;
	overflow: hidden;
	position: relative;
	transition: transform 0.35s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.cl-ai-card:hover .cl-ai-visual {
	transform: translateY(-3px);
	border-color: rgba(255, 107, 53, 0.35);
	box-shadow: 0 12px 28px -16px rgba(255, 107, 53, 0.4);
}

.cl-ai-card h3 {
	font-family: 'Instrument Serif', serif;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
	line-height: 1.2;
	color: var(--text);
}
.cl-ai-card p {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0 0 18px;
}
.cl-ai-features {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin-bottom: 22px;
}
.cl-ai-tag {
	font-size: 11px;
	color: var(--text-dim);
	background: var(--bg);
	padding: 4px 10px;
	border-radius: 100px;
	border: 1px solid var(--border);
	transition: all 0.2s ease;
}
.cl-ai-card:hover .cl-ai-tag {
	border-color: var(--border-strong);
	color: var(--text-muted);
}

/* Prominent quote CTA — orange-tinted ghost → filled gradient on hover */
.cl-ai-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 13px 20px;
	border-radius: 100px;
	background: linear-gradient(135deg, rgba(255,107,53,0.10), rgba(255,107,53,0.04));
	border: 1px solid rgba(255, 107, 53, 0.35);
	color: var(--accent) !important;
	font-family: 'Geist', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: hidden;
	margin-top: auto;
}
.cl-ai-cta::before {
	content: '';
	position: absolute; inset: 0;
	background: var(--gradient-1);
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: 0;
}
.cl-ai-cta > * { position: relative; z-index: 1; }
.cl-ai-cta:hover {
	color: white !important;
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow:
		0 0 0 1px rgba(255, 107, 53, 0.55),
		0 16px 32px -10px rgba(255, 107, 53, 0.55);
}
.cl-ai-cta:hover::before { opacity: 1; }
.cl-ai-cta svg { transition: transform 0.3s ease; flex-shrink: 0; }
.cl-ai-cta:hover svg { transform: translateX(5px); }

/* ----- Visual 1: animated chat preview ----- */
.cl-visual-chat-header {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 10px;
}
.cl-visual-avatar {
	width: 26px; height: 26px;
	border-radius: 8px;
	background: var(--gradient-1);
	color: white;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	position: relative;
}
.cl-visual-avatar-pulse {
	position: absolute; inset: -3px;
	border-radius: 10px;
	border: 1.5px solid rgba(255, 107, 53, 0.6);
	animation: clVisualPulse 2.4s ease-out infinite;
	opacity: 0;
}
@keyframes clVisualPulse {
	0%   { opacity: 0.7; transform: scale(0.85); }
	70%  { opacity: 0;   transform: scale(1.25); }
	100% { opacity: 0;   transform: scale(1.25); }
}
.cl-visual-chat-name {
	font-size: 11.5px; font-weight: 600; color: var(--text);
	line-height: 1.1;
}
.cl-visual-chat-status {
	font-size: 10px;
	color: var(--green);
	display: inline-flex; align-items: center; gap: 4px;
	margin-top: 2px;
}
.cl-visual-status-dot {
	width: 5px; height: 5px;
	background: var(--green);
	border-radius: 50%;
	animation: clBlinkSoft 1.8s ease-in-out infinite;
}
@keyframes clBlinkSoft {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}
.cl-visual-chat-msgs {
	display: flex; flex-direction: column; gap: 5px;
}
.cl-visual-bubble {
	font-size: 11px;
	padding: 6px 10px;
	border-radius: 10px;
	color: var(--text-muted);
	max-width: 85%;
	line-height: 1.35;
	opacity: 0;
	animation: clBubbleIn 0.5s ease forwards;
}
.cl-visual-bubble.cl-bubble-bot {
	background: var(--surface);
	border: 1px solid var(--border);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}
.cl-visual-bubble.cl-bubble-user {
	background: rgba(255, 107, 53, 0.12);
	color: var(--text);
	border: 1px solid rgba(255, 107, 53, 0.25);
	align-self: flex-end;
	border-bottom-right-radius: 4px;
	animation-delay: 0.4s;
}
.cl-visual-bubble.cl-bubble-typing {
	animation-delay: 0.8s;
	padding: 8px 10px;
}
.cl-visual-bubble.cl-bubble-typing span {
	display: inline-block;
	width: 4px; height: 4px;
	background: var(--text-muted);
	border-radius: 50%;
	margin: 0 1px;
	animation: clTypingDot 1.2s ease-in-out infinite;
}
.cl-visual-bubble.cl-bubble-typing span:nth-child(2) { animation-delay: 0.15s; }
.cl-visual-bubble.cl-bubble-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes clBubbleIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
.cl-ai-card:hover .cl-visual-bubble.cl-bubble-typing span { animation-duration: 0.6s; }

/* ----- Visual 2: animated code editor ----- */
.cl-visual-code-header {
	display: flex; align-items: center; gap: 5px;
	padding-bottom: 8px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--border);
	font-family: 'Geist Mono', monospace;
	font-size: 10px;
	color: var(--text-dim);
}
.cl-visual-code-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	display: inline-block;
}
.cl-visual-code-dot:nth-of-type(1) { background: #FF5F57; }
.cl-visual-code-dot:nth-of-type(2) { background: #FFBD2E; }
.cl-visual-code-dot:nth-of-type(3) { background: #28C840; }
.cl-visual-code-tab {
	margin-left: 6px;
	color: var(--text-muted);
}
.cl-visual-code-badge {
	margin-left: auto;
	font-size: 9px;
	color: var(--green);
	background: rgba(16, 185, 129, 0.12);
	padding: 1px 6px;
	border-radius: 100px;
	border: 1px solid rgba(16, 185, 129, 0.3);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	animation: clBlinkSoft 2.2s ease-in-out infinite;
}
.cl-visual-code-body {
	font-family: 'Geist Mono', monospace;
	font-size: 10.5px;
	line-height: 1.55;
	color: var(--text-muted);
}
.cl-visual-code-line {
	display: flex; align-items: center;
	white-space: nowrap;
	overflow: hidden;
}
.cl-vc-num {
	color: var(--text-dim);
	width: 18px;
	flex-shrink: 0;
	opacity: 0.5;
}
.cl-vc-key  { color: var(--purple); margin-right: 4px; }
.cl-vc-str  { color: var(--green); }
.cl-vc-val  { color: var(--blue); }
.cl-vc-text { color: var(--text-muted); }
.cl-vc-cursor {
	color: var(--accent);
	font-weight: 700;
	margin-left: 1px;
	animation: clCursorBlink 1s steps(2, end) infinite;
}
@keyframes clCursorBlink {
	50% { opacity: 0; }
}
.cl-ai-card:hover .cl-vc-cursor { animation-duration: 0.5s; }

/* ----- Visual 3: animated automation workflow ----- */
.cl-visual-flow {
	display: flex; flex-direction: column; justify-content: center;
}
.cl-visual-flow-row {
	display: flex; align-items: center; gap: 6px;
	margin-bottom: 12px;
}
.cl-visual-node {
	flex: 0 0 auto;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	width: 56px;
}
.cl-visual-node > svg {
	width: 32px; height: 32px;
	padding: 7px;
	border-radius: 10px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text-muted);
	transition: all 0.3s ease;
}
.cl-visual-node-label {
	font-size: 9.5px;
	color: var(--text-dim);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.cl-node-trigger > svg { color: var(--blue);   border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.08); }
.cl-node-process > svg { color: var(--accent); border-color: rgba(255, 107, 53, 0.4);  background: rgba(255, 107, 53, 0.10); }
.cl-node-output  > svg { color: var(--purple); border-color: rgba(168, 85, 247, 0.35); background: rgba(168, 85, 247, 0.08); }

.cl-visual-flow-line {
	flex: 1 1 auto;
	height: 2px;
	background: var(--border);
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}
.cl-visual-flow-pulse {
	position: absolute; top: 0; left: 0;
	height: 100%; width: 30%;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	transform: translateX(-100%);
	animation: clFlowPulse 2.4s ease-in-out infinite;
}
@keyframes clFlowPulse {
	0%   { transform: translateX(-100%); }
	60%  { transform: translateX(360%); }
	100% { transform: translateX(360%); }
}
.cl-ai-card:hover .cl-visual-flow-pulse { animation-duration: 1.2s; }
.cl-ai-card:hover .cl-visual-node > svg { transform: translateY(-2px); }

.cl-visual-flow-status {
	display: flex; align-items: center; gap: 6px;
	font-size: 11px;
	color: var(--text-muted);
	padding: 6px 10px;
	background: var(--surface);
	border-radius: 8px;
	border: 1px solid var(--border);
}
.cl-visual-flow-status strong { color: var(--text); font-weight: 600; }
.cl-visual-flow-tick {
	color: var(--green);
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}

/* Layout — push CTA to bottom for equal-height cards */
.cl-ai-card {
	display: flex;
	flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
	.cl-visual-avatar-pulse,
	.cl-visual-status-dot,
	.cl-visual-bubble,
	.cl-visual-bubble.cl-bubble-typing span,
	.cl-vc-cursor,
	.cl-visual-code-badge,
	.cl-visual-flow-pulse {
		animation: none !important;
	}
	.cl-visual-bubble { opacity: 1; }
}
.cl-ai-link:hover { gap: 8px; }

/* ========== SERVICES GRID ========== */
.cl-services-section { background: var(--bg); }
.cl-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.cl-service-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 22px;
	display: flex; flex-direction: column;
	position: relative;
	transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	--svc-tone: var(--accent);
	--svc-tone-soft: rgba(255, 107, 53, 0.14);
	--svc-tone-faint: rgba(255, 107, 53, 0.06);
}
.cl-service-card.cl-svc-tone-blue   { --svc-tone: var(--blue);   --svc-tone-soft: rgba(59, 130, 246, 0.18); --svc-tone-faint: rgba(59, 130, 246, 0.06); }
.cl-service-card.cl-svc-tone-orange { --svc-tone: var(--accent); --svc-tone-soft: rgba(255, 107, 53, 0.18); --svc-tone-faint: rgba(255, 107, 53, 0.06); }
.cl-service-card.cl-svc-tone-purple { --svc-tone: var(--purple); --svc-tone-soft: rgba(168, 85, 247, 0.18); --svc-tone-faint: rgba(168, 85, 247, 0.06); }
.cl-service-card.cl-svc-tone-green  { --svc-tone: var(--green);  --svc-tone-soft: rgba(16, 185, 129, 0.18);  --svc-tone-faint: rgba(16, 185, 129, 0.06); }
.cl-service-card.cl-svc-tone-cyan   { --svc-tone: #22D3EE;       --svc-tone-soft: rgba(34, 211, 238, 0.18);  --svc-tone-faint: rgba(34, 211, 238, 0.06); }
.cl-service-card:hover {
	transform: translateY(-5px);
	border-color: var(--svc-tone);
	background: var(--bg-secondary);
	box-shadow: 0 14px 36px -16px var(--svc-tone);
}

/* Service visual block — animated mini-scene at top */
.cl-svc-visual {
	height: 110px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--svc-tone-faint), transparent 70%), var(--bg);
	border: 1px solid var(--border);
	margin-bottom: 18px;
	overflow: hidden;
	position: relative;
	display: flex; align-items: center; justify-content: center;
	transition: border-color 0.3s ease;
}
.cl-service-card:hover .cl-svc-visual {
	border-color: var(--svc-tone);
}

.cl-service-card h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
	color: var(--text);
}
.cl-service-card p {
	font-size: 13.5px;
	color: var(--text-muted);
	line-height: 1.55;
	margin: 0 0 18px;
}

/* CTA — same pill style as AI Solutions, slightly more compact */
.cl-svc-cta {
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding: 11px 18px;
	border-radius: 100px;
	background: linear-gradient(135deg, rgba(255,107,53,0.10), rgba(255,107,53,0.04));
	border: 1px solid rgba(255, 107, 53, 0.35);
	color: var(--accent) !important;
	font-family: 'Geist', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: hidden;
}
.cl-svc-cta::before {
	content: '';
	position: absolute; inset: 0;
	background: var(--gradient-1);
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: 0;
}
.cl-svc-cta > * { position: relative; z-index: 1; }
.cl-svc-cta:hover {
	color: white !important;
	border-color: transparent;
	transform: translateY(-1px);
	box-shadow:
		0 0 0 1px rgba(255, 107, 53, 0.5),
		0 12px 24px -8px rgba(255, 107, 53, 0.5);
}
.cl-svc-cta:hover::before { opacity: 1; }
.cl-svc-cta svg { transition: transform 0.3s ease; flex-shrink: 0; }
.cl-svc-cta:hover svg { transform: translateX(4px); }

/* ===== Service Visual 1 — Browser window (Web Dev) ===== */
.cl-svc-browser {
	width: 76%;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 24px -16px rgba(0,0,0,0.6);
}
.cl-svc-browser-bar {
	display: flex; align-items: center; gap: 4px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
}
.cl-svc-browser-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--border-strong);
}
.cl-svc-browser-dot:nth-child(1) { background: #FF5F57; }
.cl-svc-browser-dot:nth-child(2) { background: #FFBD2E; }
.cl-svc-browser-dot:nth-child(3) { background: #28C840; }
.cl-svc-browser-url {
	margin-left: 6px;
	font-family: 'Geist Mono', monospace;
	font-size: 8.5px;
	color: var(--text-dim);
	background: var(--surface);
	padding: 1px 8px;
	border-radius: 4px;
	flex: 1;
}
.cl-svc-browser-body {
	padding: 8px 10px;
	display: flex; flex-direction: column; gap: 4px;
}
.cl-svc-bar {
	height: 5px; border-radius: 3px;
	background: linear-gradient(90deg, var(--svc-tone-soft), transparent);
	background-size: 200% 100%;
	animation: clSvcShimmer 2.4s ease-in-out infinite;
}
.cl-svc-bar-1 { width: 78%; animation-delay: 0s; }
.cl-svc-bar-2 { width: 92%; animation-delay: 0.25s; }
.cl-svc-bar-3 { width: 60%; animation-delay: 0.5s; }
@keyframes clSvcShimmer {
	0%, 100% { background-position: 200% 0; opacity: 0.6; }
	50%      { background-position: -200% 0; opacity: 1; }
}
.cl-service-card:hover .cl-svc-bar { animation-duration: 1.4s; }

/* ===== Service Visual 2 — Phone with app icons (Mobile) ===== */
.cl-svc-phone {
	width: 56px; height: 92px;
	border: 1.5px solid var(--svc-tone);
	border-radius: 10px;
	background: var(--bg);
	position: relative;
	padding: 8px 5px 5px;
	box-shadow: 0 6px 20px -10px var(--svc-tone);
}
.cl-svc-phone-notch {
	position: absolute;
	top: 4px; left: 50%; transform: translateX(-50%);
	width: 18px; height: 3px;
	background: var(--svc-tone);
	border-radius: 100px;
	opacity: 0.6;
}
.cl-svc-phone-screen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3px;
	margin-top: 6px;
}
.cl-svc-app {
	aspect-ratio: 1;
	border-radius: 4px;
	background: var(--svc-tone-soft);
	animation: clSvcAppPulse 2s ease-in-out infinite;
}
.cl-svc-app-1 { animation-delay: 0s; }
.cl-svc-app-2 { animation-delay: 0.15s; }
.cl-svc-app-3 { animation-delay: 0.3s; }
.cl-svc-app-4 { animation-delay: 0.45s; }
.cl-svc-app-5 { animation-delay: 0.6s; background: var(--svc-tone); }
.cl-svc-app-6 { animation-delay: 0.75s; }
@keyframes clSvcAppPulse {
	0%, 100% { opacity: 0.45; transform: scale(1); }
	50%      { opacity: 1;    transform: scale(1.1); }
}
.cl-service-card:hover .cl-svc-app { animation-duration: 1s; }

/* ===== Service Visual 3 — Dashboard widgets (Custom Software) ===== */
.cl-svc-dash {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 6px;
	width: 84%;
}
.cl-svc-widget {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 8px 9px;
}
.cl-svc-widget-stat {
	display: flex; flex-direction: column; gap: 2px;
}
.cl-svc-widget-label {
	font-size: 8px;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.cl-svc-widget-num {
	font-family: 'Instrument Serif', serif;
	font-size: 22px;
	color: var(--svc-tone);
	line-height: 1;
}
.cl-svc-widget-chart {
	display: flex; align-items: flex-end; gap: 3px;
	height: 100%;
	padding: 4px 6px;
}
.cl-svc-bar-v {
	flex: 1;
	background: var(--svc-tone);
	border-radius: 1.5px;
	transform-origin: bottom;
	animation: clSvcBarRise 2.5s ease-in-out infinite;
}
.cl-svc-bar-v-1 { height: 30%; animation-delay: 0s; }
.cl-svc-bar-v-2 { height: 55%; animation-delay: 0.1s; }
.cl-svc-bar-v-3 { height: 40%; animation-delay: 0.2s; }
.cl-svc-bar-v-4 { height: 75%; animation-delay: 0.3s; }
.cl-svc-bar-v-5 { height: 90%; animation-delay: 0.4s; }
@keyframes clSvcBarRise {
	0%, 100% { transform: scaleY(0.3); opacity: 0.6; }
	50%      { transform: scaleY(1);   opacity: 1; }
}
.cl-service-card:hover .cl-svc-bar-v { animation-duration: 1.2s; }

/* ===== Service Visual 4 — Cart with floating coins (E-commerce) ===== */
.cl-svc-cart {
	position: relative;
	color: var(--svc-tone);
	padding: 4px 16px;
}
.cl-svc-cart-svg {
	display: block;
	animation: clSvcCartBob 2.4s ease-in-out infinite;
}
@keyframes clSvcCartBob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}
.cl-svc-cart-badge {
	position: absolute;
	top: -2px; right: 6px;
	min-width: 16px; height: 16px;
	border-radius: 100px;
	background: var(--svc-tone);
	color: var(--bg);
	font-size: 10px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 4px;
	animation: clSvcBadgePulse 1.8s ease-in-out infinite;
}
@keyframes clSvcBadgePulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.18); }
}
.cl-svc-cart-coin {
	position: absolute;
	font-family: 'Geist Mono', monospace;
	font-size: 12px; font-weight: 600;
	color: var(--svc-tone);
	opacity: 0;
	animation: clSvcCoinDrop 3s ease-in infinite;
}
.cl-svc-coin-1 { left: -10px; top: 0; animation-delay: 0s; }
.cl-svc-coin-2 { left: 50%; top: -2px; animation-delay: 1s; }
.cl-svc-coin-3 { right: -10px; top: 0; animation-delay: 2s; }
@keyframes clSvcCoinDrop {
	0%   { opacity: 0; transform: translateY(-12px) scale(0.7); }
	30%  { opacity: 1; transform: translateY(0) scale(1); }
	70%  { opacity: 1; transform: translateY(8px) scale(0.95); }
	100% { opacity: 0; transform: translateY(20px) scale(0.6); }
}

/* ===== Service Visual 5 — Cloud + pipeline (Cloud & DevOps) ===== */
.cl-svc-cloud {
	display: flex; flex-direction: column; align-items: center;
	color: var(--svc-tone);
	gap: 4px;
}
.cl-svc-cloud-svg {
	width: 70px; height: 32px;
	animation: clFloat 3s ease-in-out infinite;
}
.cl-svc-pipe {
	display: flex; align-items: center; gap: 0;
}
.cl-svc-pipe-node {
	width: 10px; height: 10px;
	border-radius: 3px;
	background: var(--svc-tone-soft);
	border: 1.5px solid var(--svc-tone);
	flex-shrink: 0;
}
.cl-svc-pipe-line {
	width: 22px; height: 2px;
	background: var(--border);
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}
.cl-svc-pipe-pulse {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, transparent, var(--svc-tone), transparent);
	transform: translateX(-100%);
	animation: clSvcPipePulse 1.8s ease-in-out infinite;
}
@keyframes clSvcPipePulse {
	0%   { transform: translateX(-100%); }
	60%  { transform: translateX(150%); }
	100% { transform: translateX(150%); }
}
.cl-service-card:hover .cl-svc-pipe-pulse { animation-duration: 0.9s; }

/* ===== Service Visual 6 — Avatar stack (Hire Devs) ===== */
.cl-svc-team {
	display: flex; align-items: center;
}
.cl-svc-avatar {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--surface);
	border: 2px solid var(--bg);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: 'Geist', sans-serif;
	font-size: 12px; font-weight: 700;
	margin-left: -8px;
	transition: transform 0.25s ease;
}
.cl-svc-avatar:first-child { margin-left: 0; }
.cl-svc-avatar-1 { background: linear-gradient(135deg, #FF6B35, #FF8E53); color: white; animation: clSvcAvatarPop 3s ease-in-out infinite; }
.cl-svc-avatar-2 { background: linear-gradient(135deg, #3B82F6, #60A5FA); color: white; animation: clSvcAvatarPop 3s 0.3s ease-in-out infinite; }
.cl-svc-avatar-3 { background: linear-gradient(135deg, #A855F7, #C084FC); color: white; animation: clSvcAvatarPop 3s 0.6s ease-in-out infinite; }
.cl-svc-avatar-4 { background: linear-gradient(135deg, #10B981, #34D399); color: white; animation: clSvcAvatarPop 3s 0.9s ease-in-out infinite; }
.cl-svc-avatar-more { background: var(--surface); color: var(--text-muted); font-size: 10px; }
@keyframes clSvcAvatarPop {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}
.cl-service-card:hover .cl-svc-avatar { transform: translateY(-2px); }
.cl-svc-team-status {
	margin-top: 8px;
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 10px;
	color: var(--text-muted);
}
.cl-svc-team-status strong { color: var(--text); }
.cl-svc-team-dot {
	width: 6px; height: 6px;
	background: var(--green);
	border-radius: 50%;
	animation: clBlinkSoft 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.cl-svc-bar, .cl-svc-app, .cl-svc-bar-v,
	.cl-svc-cart-svg, .cl-svc-cart-badge, .cl-svc-cart-coin,
	.cl-svc-cloud-svg, .cl-svc-pipe-pulse,
	.cl-svc-avatar-1, .cl-svc-avatar-2, .cl-svc-avatar-3, .cl-svc-avatar-4,
	.cl-svc-team-dot {
		animation: none !important;
	}
}

/* ========== INDUSTRIES ========== */
.cl-industries-section {
	background: var(--bg-secondary);
	border-top: 1px solid var(--border);
}
.cl-industries-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.cl-industry-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px 18px 16px;
	text-align: center;
	transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	display: flex; flex-direction: column;
	--ind-tone: var(--accent);
	--ind-tone-soft: rgba(255, 107, 53, 0.14);
	--ind-tone-faint: rgba(255, 107, 53, 0.05);
}
.cl-industry-card.cl-ind-tone-pink   { --ind-tone: #EC4899; --ind-tone-soft: rgba(236, 72, 153, 0.16); --ind-tone-faint: rgba(236, 72, 153, 0.06); }
.cl-industry-card.cl-ind-tone-green  { --ind-tone: var(--green); --ind-tone-soft: rgba(16, 185, 129, 0.16); --ind-tone-faint: rgba(16, 185, 129, 0.06); }
.cl-industry-card.cl-ind-tone-orange { --ind-tone: var(--accent); --ind-tone-soft: rgba(255, 107, 53, 0.16); --ind-tone-faint: rgba(255, 107, 53, 0.06); }
.cl-industry-card.cl-ind-tone-purple { --ind-tone: var(--purple); --ind-tone-soft: rgba(168, 85, 247, 0.16); --ind-tone-faint: rgba(168, 85, 247, 0.06); }
.cl-industry-card.cl-ind-tone-blue   { --ind-tone: var(--blue); --ind-tone-soft: rgba(59, 130, 246, 0.16); --ind-tone-faint: rgba(59, 130, 246, 0.06); }
.cl-industry-card.cl-ind-tone-cyan   { --ind-tone: #22D3EE; --ind-tone-soft: rgba(34, 211, 238, 0.16); --ind-tone-faint: rgba(34, 211, 238, 0.06); }
.cl-industry-card.cl-ind-tone-red    { --ind-tone: #F43F5E; --ind-tone-soft: rgba(244, 63, 94, 0.16); --ind-tone-faint: rgba(244, 63, 94, 0.06); }
.cl-industry-card.cl-ind-tone-amber  { --ind-tone: #F59E0B; --ind-tone-soft: rgba(245, 158, 11, 0.16); --ind-tone-faint: rgba(245, 158, 11, 0.06); }
.cl-industry-card.cl-ind-tone-lime,
.cl-chatbot-vertical.cl-ind-tone-lime  { --ind-tone: #84CC16; --ind-tone-soft: rgba(132, 204, 22, 0.16); --ind-tone-faint: rgba(132, 204, 22, 0.06); }
.cl-industry-card.cl-ind-tone-teal,
.cl-chatbot-vertical.cl-ind-tone-teal  { --ind-tone: #14B8A6; --ind-tone-soft: rgba(20, 184, 166, 0.16); --ind-tone-faint: rgba(20, 184, 166, 0.06); }
/* Mirror tone tokens onto chatbot verticals so they reuse all the homepage industry scenes. */
.cl-chatbot-vertical.cl-ind-tone-pink   { --ind-tone: #EC4899; --ind-tone-soft: rgba(236, 72, 153, 0.16); --ind-tone-faint: rgba(236, 72, 153, 0.06); }
.cl-chatbot-vertical.cl-ind-tone-green  { --ind-tone: var(--green); --ind-tone-soft: rgba(16, 185, 129, 0.16); --ind-tone-faint: rgba(16, 185, 129, 0.06); }
.cl-chatbot-vertical.cl-ind-tone-orange { --ind-tone: var(--accent); --ind-tone-soft: rgba(255, 107, 53, 0.16); --ind-tone-faint: rgba(255, 107, 53, 0.06); }
.cl-chatbot-vertical.cl-ind-tone-purple { --ind-tone: var(--purple); --ind-tone-soft: rgba(168, 85, 247, 0.16); --ind-tone-faint: rgba(168, 85, 247, 0.06); }
.cl-chatbot-vertical.cl-ind-tone-blue   { --ind-tone: var(--blue); --ind-tone-soft: rgba(59, 130, 246, 0.16); --ind-tone-faint: rgba(59, 130, 246, 0.06); }
.cl-chatbot-vertical.cl-ind-tone-cyan   { --ind-tone: #22D3EE; --ind-tone-soft: rgba(34, 211, 238, 0.16); --ind-tone-faint: rgba(34, 211, 238, 0.06); }
.cl-chatbot-vertical.cl-ind-tone-red    { --ind-tone: #F43F5E; --ind-tone-soft: rgba(244, 63, 94, 0.16); --ind-tone-faint: rgba(244, 63, 94, 0.06); }
.cl-chatbot-vertical.cl-ind-tone-amber  { --ind-tone: #F59E0B; --ind-tone-soft: rgba(245, 158, 11, 0.16); --ind-tone-faint: rgba(245, 158, 11, 0.06); }
.cl-industry-card:hover {
	transform: translateY(-4px);
	border-color: var(--ind-tone);
	background: var(--bg);
	box-shadow: 0 12px 28px -16px var(--ind-tone);
}

/* Industry visual — full-bleed scene-style illustration */
.cl-ind-visual {
	height: 80px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--ind-tone-faint), transparent 70%), var(--bg);
	border: 1px solid var(--border);
	margin-bottom: 14px;
	display: flex; align-items: center; justify-content: center;
	color: var(--ind-tone);
	transition: border-color 0.3s ease, background 0.3s ease;
	overflow: hidden;
	position: relative;
}
.cl-industry-card:hover .cl-ind-visual {
	border-color: var(--ind-tone);
}
.cl-ind-svg {
	width: 64px;
	height: 40px;
	display: block;
}
.cl-ind-svg-full {
	width: 100%;
	height: 100%;
	display: block;
}
.cl-industry-card h4 {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 4px;
	color: var(--text);
	letter-spacing: -0.01em;
}
.cl-industry-card p {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.45;
	margin: 0 0 14px;
}

/* Compact CTA — text + arrow with hover slide, tone-aware on hover */
.cl-ind-cta {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 4px;
	margin-top: auto;
	padding: 7px 14px;
	border-radius: 100px;
	background: linear-gradient(135deg, rgba(255,107,53,0.10), rgba(255,107,53,0.04));
	border: 1px solid rgba(255, 107, 53, 0.30);
	color: var(--accent) !important;
	font-family: 'Geist', sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.3s ease, transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
	align-self: center;
	position: relative;
	overflow: hidden;
}
.cl-ind-cta::before {
	content: '';
	position: absolute; inset: 0;
	background: var(--gradient-1);
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: 0;
}
.cl-ind-cta > * { position: relative; z-index: 1; }
.cl-ind-cta:hover {
	color: white !important;
	border-color: transparent;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -8px rgba(255, 107, 53, 0.5);
}
.cl-ind-cta:hover::before { opacity: 1; }
.cl-ind-cta span { transition: transform 0.3s ease; display: inline-block; }
.cl-ind-cta:hover span { transform: translateX(3px); }

/* ===== Industry scene animations (no icons) ===== */

/* 1. Healthcare — ECG monitor: track scrolls L→R, pulse dot beats at center */
.cl-ind-ecg-track {
	animation: clEcgScroll 2.8s linear infinite;
}
@keyframes clEcgScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-40px); }
}
.cl-ind-ecg-pulse {
	transform-origin: 60px 28px;
	transform-box: fill-box;
	animation: clEcgBeat 0.9s ease-in-out infinite;
}
@keyframes clEcgBeat {
	0%, 100% { transform: scale(1); opacity: 1; }
	30%      { transform: scale(1.6); opacity: 0.6; }
}
.cl-ind-medgrid line {
	animation: clMedFlicker 4s ease-in-out infinite;
}
@keyframes clMedFlicker {
	0%, 100% { opacity: 0.25; }
	50%      { opacity: 0.4; }
}

/* 2. FinTech — candlestick rises, trend line draws, dot at end pulses */
.cl-ind-candle {
	transform-origin: bottom;
	animation: clCandleGrow 2.6s ease-out infinite;
}
.cl-ind-candle:nth-child(1) { animation-delay: 0s; }
.cl-ind-candle:nth-child(2) { animation-delay: 0.15s; }
.cl-ind-candle:nth-child(3) { animation-delay: 0.3s; }
.cl-ind-candle:nth-child(4) { animation-delay: 0.45s; }
.cl-ind-candle:nth-child(5) { animation-delay: 0.6s; }
.cl-ind-candle:nth-child(6) { animation-delay: 0.75s; }
.cl-ind-candle:nth-child(7) { animation-delay: 0.9s; }
@keyframes clCandleGrow {
	0%, 100% { transform: scaleY(0.85); opacity: 0.6; }
	30%      { transform: scaleY(1);    opacity: 1; }
	70%      { transform: scaleY(1);    opacity: 1; }
}
.cl-ind-trend-line {
	stroke-dasharray: 130;
	stroke-dashoffset: 130;
	animation: clTrendDraw 3.4s ease-in-out infinite;
}
@keyframes clTrendDraw {
	0%   { stroke-dashoffset: 130; }
	55%  { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}
.cl-ind-trend-dot {
	transform-origin: 98px 10px;
	transform-box: fill-box;
	animation: clTrendDot 2s ease-in-out 1.4s infinite;
}
@keyframes clTrendDot {
	0%, 100% { transform: scale(1);   opacity: 0.4; }
	50%      { transform: scale(1.5); opacity: 1; }
}

/* 3. E-commerce — products fade-in sequentially, sale tag wobbles */
.cl-ind-prod {
	transform-origin: 50% 50%;
	animation: clProdFade 3s ease-in-out infinite;
}
.cl-ind-prod-1 { animation-delay: 0s; }
.cl-ind-prod-2 { animation-delay: 0.3s; }
.cl-ind-prod-3 { animation-delay: 0.6s; }
@keyframes clProdFade {
	0%, 90%, 100% { opacity: 1; }
	20%           { opacity: 1; transform: scale(1); }
	45%           { opacity: 0.4; transform: scale(0.96); }
	70%           { opacity: 1; transform: scale(1); }
}
.cl-ind-sale {
	transform-origin: center;
	transform-box: fill-box;
	animation: clSaleWobble 2.4s ease-in-out infinite;
}
@keyframes clSaleWobble {
	0%, 100% { transform: translate(72px, 12px) rotate(15deg) scale(1); }
	50%      { transform: translate(72px, 12px) rotate(15deg) scale(1.12); }
}

/* 4. EdTech — central node pulses, satellite nodes blink, lines flow */
.cl-ind-en-1 {
	transform-origin: 20px 28px;
	transform-box: fill-box;
	animation: clNodeCentral 2.2s ease-in-out infinite;
}
@keyframes clNodeCentral {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%      { transform: scale(1.18); opacity: 0.85; }
}
.cl-ind-edu-node:not(.cl-ind-en-1) {
	animation: clNodeSat 1.8s ease-in-out infinite;
}
.cl-ind-en-2 { animation-delay: 0s;   transform-origin: 60px 10px; transform-box: fill-box; }
.cl-ind-en-3 { animation-delay: 0.2s; transform-origin: 60px 28px; transform-box: fill-box; }
.cl-ind-en-4 { animation-delay: 0.4s; transform-origin: 60px 46px; transform-box: fill-box; }
.cl-ind-en-5 { animation-delay: 0.6s; transform-origin: 100px 22px; transform-box: fill-box; }
.cl-ind-en-6 { animation-delay: 0.8s; transform-origin: 100px 38px; transform-box: fill-box; }
@keyframes clNodeSat {
	0%, 100% { transform: scale(1);    opacity: 0.7; }
	50%      { transform: scale(1.25); opacity: 1; }
}
.cl-ind-edu-lines line {
	stroke-dasharray: 4;
	animation: clEduFlow 1.4s linear infinite;
}
@keyframes clEduFlow {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -8; }
}

/* 5. Real Estate — windows twinkle randomly, moon glows */
.cl-ind-light {
	opacity: 0.3;
	animation: clWindowGlow 4s ease-in-out infinite;
}
.cl-ind-l-1  { animation-delay: 0s; }
.cl-ind-l-2  { animation-delay: 0.3s; }
.cl-ind-l-3  { animation-delay: 1.2s; }
.cl-ind-l-4  { animation-delay: 0.7s; }
.cl-ind-l-5  { animation-delay: 1.8s; }
.cl-ind-l-6  { animation-delay: 0.5s; }
.cl-ind-l-7  { animation-delay: 2.1s; }
.cl-ind-l-8  { animation-delay: 0.9s; }
.cl-ind-l-9  { animation-delay: 1.5s; }
.cl-ind-l-10 { animation-delay: 0.2s; }
.cl-ind-l-11 { animation-delay: 1.7s; }
.cl-ind-l-12 { animation-delay: 0.6s; }
.cl-ind-l-13 { animation-delay: 2.3s; }
.cl-ind-l-14 { animation-delay: 1.1s; }
.cl-ind-l-15 { animation-delay: 0.4s; }
.cl-ind-l-16 { animation-delay: 1.9s; }
.cl-ind-l-17 { animation-delay: 0.8s; }
@keyframes clWindowGlow {
	0%, 80%, 100% { opacity: 0.3; }
	30%, 50%      { opacity: 1; }
}
.cl-ind-moon {
	transform-origin: 100px 10px;
	transform-box: fill-box;
	animation: clMoonGlow 3s ease-in-out infinite;
}
@keyframes clMoonGlow {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 0.95; transform: scale(1.08); }
}

/* 6. Logistics — package travels along route, end pin blinks */
.cl-ind-route-track {
	stroke-dashoffset: 0;
	animation: clRouteFlow 1.8s linear infinite;
}
@keyframes clRouteFlow {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -12; }
}

/* 7. Media — equalizer bars dance independently */
.cl-ind-eq {
	transform-origin: bottom;
	animation: clEqBar 0.9s ease-in-out infinite;
}
.cl-ind-eq-1  { animation-delay: 0s;    animation-duration: 1.0s; }
.cl-ind-eq-2  { animation-delay: 0.1s;  animation-duration: 0.7s; }
.cl-ind-eq-3  { animation-delay: 0.05s; animation-duration: 1.1s; }
.cl-ind-eq-4  { animation-delay: 0.2s;  animation-duration: 0.6s; }
.cl-ind-eq-5  { animation-delay: 0.15s; animation-duration: 0.85s; }
.cl-ind-eq-6  { animation-delay: 0.25s; animation-duration: 0.55s; }
.cl-ind-eq-7  { animation-delay: 0.1s;  animation-duration: 1s; }
.cl-ind-eq-8  { animation-delay: 0.18s; animation-duration: 0.75s; }
.cl-ind-eq-9  { animation-delay: 0.05s; animation-duration: 0.65s; }
.cl-ind-eq-10 { animation-delay: 0.2s;  animation-duration: 0.9s; }
.cl-ind-eq-11 { animation-delay: 0.12s; animation-duration: 1.05s; }
@keyframes clEqBar {
	0%, 100% { transform: scaleY(0.35); }
	50%      { transform: scaleY(1); }
}

/* 8. Hospitality — stars fill L→R, booking dots ripple right */
.cl-ind-rs {
	transform-origin: center;
	transform-box: fill-box;
	opacity: 0.25;
	animation: clRatingFill 3.2s ease-in-out infinite;
}
.cl-ind-rs-1 { animation-delay: 0s; }
.cl-ind-rs-2 { animation-delay: 0.2s; }
.cl-ind-rs-3 { animation-delay: 0.4s; }
.cl-ind-rs-4 { animation-delay: 0.6s; }
.cl-ind-rs-5 { animation-delay: 0.8s; }
@keyframes clRatingFill {
	0%, 75%, 100% { opacity: 0.25; transform: scale(0.92); }
	20%, 60%      { opacity: 1;    transform: scale(1.05); }
}
.cl-ind-bk {
	animation: clBookDot 2.5s ease-in-out infinite;
}
.cl-ind-bk-1 { animation-delay: 0s; }
.cl-ind-bk-2 { animation-delay: 0.1s; }
.cl-ind-bk-3 { animation-delay: 0.2s; }
.cl-ind-bk-4 { animation-delay: 0.3s; }
.cl-ind-bk-5 { animation-delay: 0.4s; }
.cl-ind-bk-6 { animation-delay: 0.5s; }
.cl-ind-bk-7 { animation-delay: 0.6s; }
@keyframes clBookDot {
	0%, 70%, 100% { fill-opacity: 0.25; }
	30%, 50%      { fill-opacity: 1; }
}

/* Hover — accelerate scenes for tactile interactivity */
.cl-industry-card:hover .cl-ind-ecg-track  { animation-duration: 1.4s; }
.cl-industry-card:hover .cl-ind-ecg-pulse  { animation-duration: 0.45s; }
.cl-industry-card:hover .cl-ind-candle     { animation-duration: 1.3s; }
.cl-industry-card:hover .cl-ind-trend-line { animation-duration: 1.7s; }
.cl-industry-card:hover .cl-ind-prod       { animation-duration: 1.5s; }
.cl-industry-card:hover .cl-ind-en-1,
.cl-industry-card:hover .cl-ind-edu-node:not(.cl-ind-en-1) { animation-duration: 0.9s; }
.cl-industry-card:hover .cl-ind-edu-lines line { animation-duration: 0.7s; }
.cl-industry-card:hover .cl-ind-light      { animation-duration: 2s; }
.cl-industry-card:hover .cl-ind-route-track { animation-duration: 0.9s; }
.cl-industry-card:hover .cl-ind-eq         { animation-duration: 0.4s !important; }
.cl-industry-card:hover .cl-ind-rs         { animation-duration: 1.6s; }
.cl-industry-card:hover .cl-ind-bk         { animation-duration: 1.25s; }

@media (prefers-reduced-motion: reduce) {
	.cl-ind-ecg-track, .cl-ind-ecg-pulse, .cl-ind-medgrid line,
	.cl-ind-candle, .cl-ind-trend-line, .cl-ind-trend-dot,
	.cl-ind-prod, .cl-ind-sale,
	.cl-ind-en-1, .cl-ind-edu-node, .cl-ind-edu-lines line,
	.cl-ind-light, .cl-ind-moon,
	.cl-ind-route-track,
	.cl-ind-eq,
	.cl-ind-rs, .cl-ind-bk {
		animation: none !important;
	}
	.cl-ind-light, .cl-ind-rs, .cl-ind-bk { opacity: 0.7 !important; }
	.cl-ind-trend-line { stroke-dashoffset: 0 !important; }
}

/* ========== PROCESS — AI-powered scroll-driven timeline ========== */
.cl-process-section {
	background: var(--bg);
	position: relative;
	overflow: hidden;
}
.cl-process-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,107,53,0.06), transparent),
		radial-gradient(ellipse 40% 30% at 80% 0%, rgba(59,130,246,0.05), transparent);
	pointer-events: none;
	z-index: 0;
}
.cl-process-section > .cl-container { position: relative; z-index: 1; }

.cl-process-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
	--cl-process-progress: 0;
}

/* Track behind everything */
.cl-process-track {
	position: absolute;
	top: 32px;
	left: 10%;
	right: 10%;
	height: 4px;
	pointer-events: none;
}
.cl-process-track-base {
	position: absolute;
	inset: 1px 0;
	height: 2px;
	background: var(--border-strong);
	border-radius: 2px;
	opacity: 0.5;
}
.cl-process-track-fill {
	position: absolute;
	inset: 0;
	height: 4px;
	width: calc(var(--cl-process-progress, 0) * 100%);
	background: linear-gradient(90deg, var(--accent) 0%, #FF8E53 30%, var(--blue) 70%, var(--purple) 100%);
	border-radius: 2px;
	box-shadow:
		0 0 12px rgba(255,107,53,0.5),
		0 0 24px rgba(255,107,53,0.25);
	transition: width 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.cl-process-comet {
	position: absolute;
	top: 50%;
	left: calc(var(--cl-process-progress, 0) * 100%);
	transform: translate(-50%, -50%);
	width: 22px;
	height: 22px;
	color: var(--accent);
	transition: left 0.18s cubic-bezier(0.22, 1, 0.36, 1);
	opacity: 0;
}
.cl-process-timeline.is-active .cl-process-comet { opacity: 1; }
.cl-process-comet-glow {
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,107,53,0.55), transparent 65%);
	filter: blur(2px);
	animation: clCometGlow 1.2s ease-in-out infinite;
}
@keyframes clCometGlow {
	0%, 100% { transform: scale(1); opacity: 0.7; }
	50%      { transform: scale(1.3); opacity: 1; }
}
.cl-process-comet-spark {
	position: absolute;
	inset: 4px;
	width: 14px;
	height: 14px;
	color: #FFE4D6;
	filter: drop-shadow(0 0 6px rgba(255,107,53,0.8));
	animation: clCometSpin 2.4s linear infinite;
}
@keyframes clCometSpin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Step container */
.cl-process-step {
	text-align: center;
	position: relative;
	z-index: 1;
	padding-top: 0;
}

/* Step number circle */
.cl-process-num {
	width: 64px;
	height: 64px;
	background: var(--bg);
	border: 2px solid var(--border-strong);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	font-family: 'Instrument Serif', serif;
	font-size: 28px;
	font-weight: 400;
	position: relative;
	transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
	color: var(--text-muted);
}
.cl-process-num-pulse {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--accent);
	opacity: 0;
	pointer-events: none;
}
.cl-process-num-text {
	position: relative;
	z-index: 2;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.cl-process-num-check {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 26px;
	height: 26px;
	color: var(--white);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.3s ease 0.05s, transform 0.4s cubic-bezier(0.5, 1.6, 0.4, 1) 0.05s;
}

/* Active state — current step */
.cl-process-step.is-active .cl-process-num {
	background: linear-gradient(135deg, var(--accent), #FF8E53);
	border-color: var(--accent);
	color: var(--white);
	transform: scale(1.12);
	box-shadow:
		0 8px 24px rgba(255,107,53,0.35),
		0 0 0 6px rgba(255,107,53,0.12);
}
.cl-process-step.is-active .cl-process-num-pulse {
	animation: clProcessPulse 1.6s ease-out infinite;
}
@keyframes clProcessPulse {
	0%   { transform: scale(0.9); opacity: 0.6; }
	100% { transform: scale(1.4); opacity: 0; }
}

/* Complete state — past steps */
.cl-process-step.is-complete .cl-process-num {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--white);
	transform: scale(1);
}
.cl-process-step.is-complete .cl-process-num-text {
	opacity: 0;
	transform: scale(0.4);
}
.cl-process-step.is-complete .cl-process-num-check {
	opacity: 1;
	transform: scale(1);
}

/* Hover — gentle lift */
.cl-process-step:hover .cl-process-num {
	transform: translateY(-2px) scale(1.08);
}

/* Step content */
.cl-process-step h4 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--text);
	transition: color 0.3s ease;
}
.cl-process-step.is-active h4,
.cl-process-step.is-complete h4 { color: var(--text); }

.cl-process-step p {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.5;
	margin: 0 auto 12px;
	max-width: 200px;
}

/* AI Tool tag — subtle gradient pill */
.cl-process-ai-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text);
	background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(59,130,246,0.18));
	border: 1px solid rgba(168,85,247,0.35);
	padding: 4px 10px;
	border-radius: 100px;
	margin-bottom: 8px;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.cl-process-ai-tag svg {
	width: 11px;
	height: 11px;
	color: var(--purple);
	animation: clAiSparkle 2.4s ease-in-out infinite;
}
@keyframes clAiSparkle {
	0%, 100% { transform: rotate(0) scale(1); opacity: 0.85; }
	50%      { transform: rotate(180deg) scale(1.25); opacity: 1; }
}
.cl-process-step.is-active .cl-process-ai-tag,
.cl-process-step.is-complete .cl-process-ai-tag {
	border-color: rgba(168,85,247,0.6);
	box-shadow: 0 4px 16px rgba(168,85,247,0.18);
}

/* Speed pill — Before vs With AI */
.cl-process-speed {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	padding: 4px 10px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--border);
	border-radius: 100px;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.3s ease, background 0.3s ease;
}
.cl-speed-old {
	color: var(--text-dim);
	text-decoration: line-through;
	text-decoration-color: rgba(244,63,94,0.6);
	text-decoration-thickness: 1.5px;
}
.cl-speed-bolt {
	width: 10px;
	height: 10px;
	color: var(--accent);
	flex-shrink: 0;
}
.cl-speed-new {
	color: var(--accent);
	font-weight: 700;
}
.cl-process-step.is-active .cl-process-speed,
.cl-process-step.is-complete .cl-process-speed {
	border-color: rgba(255,107,53,0.4);
	background: rgba(255,107,53,0.08);
}
.cl-process-step.is-active .cl-speed-bolt {
	animation: clBoltShake 1.2s ease-in-out infinite;
}
@keyframes clBoltShake {
	0%, 100% { transform: rotate(0) scale(1); }
	25%      { transform: rotate(-8deg) scale(1.15); }
	75%      { transform: rotate(8deg) scale(1.15); }
}

/* Bottom summary row */
.cl-process-summary {
	margin-top: 56px;
	display: flex;
	justify-content: center;
}
.cl-process-summary-row {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 14px 22px;
	background: linear-gradient(135deg, rgba(255,107,53,0.08), rgba(59,130,246,0.08));
	border: 1px solid var(--border-strong);
	border-radius: 100px;
	font-size: 14px;
	color: var(--text);
}
.cl-process-summary-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text);
}
.cl-process-summary-pill svg {
	color: var(--accent);
}
.cl-process-summary-pill strong {
	color: var(--text);
	font-weight: 700;
}
.cl-process-summary-x {
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	font-size: 18px;
	color: var(--accent);
	padding: 0 6px;
}
.cl-process-summary-cost {
	color: var(--text-muted);
	font-size: 13px;
	border-left: 1px solid var(--border-strong);
	padding-left: 12px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cl-process-track-fill,
	.cl-process-comet,
	.cl-process-num,
	.cl-process-num-text,
	.cl-process-num-check,
	.cl-process-num-pulse,
	.cl-process-comet-glow,
	.cl-process-comet-spark,
	.cl-process-ai-tag svg,
	.cl-speed-bolt {
		animation: none !important;
		transition: none !important;
	}
}

/* ========== WHY US — editorial selling-point cards ========== */
.cl-why-section {
	background: var(--bg-secondary);
	border-top: 1px solid var(--border);
	position: relative;
	overflow: hidden;
}
.cl-why-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	position: relative;
	z-index: 1;
}

.cl-why-card {
	--why-tone: var(--accent);
	--why-tone-soft: rgba(255, 107, 53, 0.18);
	--why-tone-faint: rgba(255, 107, 53, 0.06);
	--why-tone-2: var(--purple);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 40px;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
				border-color 0.4s ease,
				box-shadow 0.4s ease,
				background 0.4s ease;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Per-card tone palettes */
.cl-why-card.cl-why-tone-1 {
	--why-tone: #FF6B35;
	--why-tone-soft: rgba(255, 107, 53, 0.22);
	--why-tone-faint: rgba(255, 107, 53, 0.08);
	--why-tone-2: #A855F7;
}
.cl-why-card.cl-why-tone-2 {
	--why-tone: #10B981;
	--why-tone-soft: rgba(16, 185, 129, 0.22);
	--why-tone-faint: rgba(16, 185, 129, 0.08);
	--why-tone-2: #F59E0B;
}
.cl-why-card.cl-why-tone-3 {
	--why-tone: #3B82F6;
	--why-tone-soft: rgba(59, 130, 246, 0.22);
	--why-tone-faint: rgba(59, 130, 246, 0.08);
	--why-tone-2: #22D3EE;
}
.cl-why-card.cl-why-tone-4 {
	--why-tone: #EC4899;
	--why-tone-soft: rgba(236, 72, 153, 0.22);
	--why-tone-faint: rgba(236, 72, 153, 0.08);
	--why-tone-2: #F59E0B;
}

/* Background glow orb */
.cl-why-glow {
	position: absolute;
	top: -60px;
	right: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--why-tone-soft), transparent 70%);
	filter: blur(20px);
	opacity: 0.7;
	pointer-events: none;
	z-index: 0;
	transition: opacity 0.5s ease, transform 0.6s ease;
}
.cl-why-card:hover .cl-why-glow {
	opacity: 1;
	transform: scale(1.15) translate(-10px, 10px);
}

/* Editorial number — top-left corner */
.cl-why-num {
	display: block;
	font-family: 'Instrument Serif', serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.18em;
	color: var(--text-dim);
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
	margin-bottom: 24px;
	transition: color 0.3s ease, letter-spacing 0.3s ease;
	position: relative;
	z-index: 1;
}
.cl-why-num::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var(--text-dim);
	vertical-align: middle;
	margin-right: 12px;
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.cl-why-card:hover .cl-why-num {
	color: var(--text);
}
.cl-why-card:hover .cl-why-num::before {
	width: 56px;
	background: var(--why-tone);
}

/* The HERO METRIC — biggest visual element, replaces the icon */
.cl-why-metric {
	margin-bottom: 28px;
	position: relative;
	z-index: 1;
}
.cl-why-metric-value {
	display: block;
	font-family: 'Instrument Serif', serif;
	font-size: clamp(56px, 6vw, 80px);
	line-height: 1;
	font-weight: 400;
	letter-spacing: -0.03em;
	background: linear-gradient(135deg, var(--why-tone) 0%, var(--why-tone-2) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	margin-bottom: 8px;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	transform-origin: left center;
}
.cl-why-metric-value em {
	font-style: italic;
	font-size: 0.65em;
	margin-left: 0.04em;
	vertical-align: 0.18em;
}
.cl-why-metric-label {
	display: inline-block;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--why-tone);
	padding: 4px 10px;
	border: 1px solid var(--why-tone-soft);
	border-radius: 100px;
	background: var(--why-tone-faint);
}
.cl-why-card:hover .cl-why-metric-value {
	transform: scale(1.04);
}

/* Heading & body */
.cl-why-card h3 {
	font-family: 'Instrument Serif', serif;
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--text);
	margin-bottom: 14px;
	position: relative;
	z-index: 1;
}
.cl-why-card p {
	font-size: 15px;
	color: var(--text-muted);
	line-height: 1.7;
	margin-bottom: 24px;
	position: relative;
	z-index: 1;
}

/* Proof tag — keep green check vibe */
.cl-why-proof {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(16, 185, 129, 0.1);
	color: var(--green);
	padding: 8px 14px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid rgba(16, 185, 129, 0.25);
	position: relative;
	z-index: 1;
	transition: background 0.3s ease, border-color 0.3s ease;
}
.cl-why-card:hover .cl-why-proof {
	background: rgba(16, 185, 129, 0.16);
	border-color: rgba(16, 185, 129, 0.45);
}

/* Animated bottom accent bar — tone-aware, fills L→R on hover */
.cl-why-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, var(--why-tone) 0%, var(--why-tone-2) 100%);
	transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 1;
}
.cl-why-card:hover {
	transform: translateY(-6px);
	border-color: var(--why-tone-soft);
	box-shadow: 0 24px 60px -20px var(--why-tone-faint),
				0 0 0 1px var(--why-tone-soft);
}
.cl-why-card:hover .cl-why-bar {
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.cl-why-card,
	.cl-why-glow,
	.cl-why-num,
	.cl-why-num::before,
	.cl-why-metric-value,
	.cl-why-bar,
	.cl-why-proof {
		transition: none !important;
	}
}

/* ========== PORTFOLIO ========== */
.cl-portfolio-section { background: var(--bg); }
.cl-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.cl-portfolio-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 20px;
	overflow: hidden;
	transition: all 0.3s;
	cursor: pointer;
}
.cl-portfolio-card:hover {
	transform: translateY(-6px);
	border-color: var(--accent);
}
.cl-portfolio-image {
	height: 200px;
	background: var(--gradient-2);
	position: relative;
	overflow: hidden;
}
.cl-portfolio-image::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4));
}
.cl-portfolio-image.cl-healthcare {
	background: linear-gradient(135deg, #10B981, #059669);
}
.cl-portfolio-image.cl-fintech {
	background: linear-gradient(135deg, #A855F7, #7C3AED);
}
.cl-portfolio-image.cl-ecom {
	background: linear-gradient(135deg, #FF6B35, #EA580C);
}
.cl-portfolio-emoji {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 80px;
	opacity: 0.4;
}
.cl-portfolio-content { padding: 24px; }
.cl-portfolio-tag {
	display: inline-block;
	font-size: 11px;
	color: var(--accent);
	background: var(--accent-soft);
	padding: 4px 10px;
	border-radius: 100px;
	margin-bottom: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.cl-portfolio-card h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
	letter-spacing: -0.01em;
	color: var(--text);
}
.cl-portfolio-card p {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.6;
	margin-bottom: 16px;
}
.cl-portfolio-results {
	display: flex; gap: 12px;
	flex-wrap: wrap;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}
.cl-result-pill {
	font-size: 12px;
	color: var(--green);
	background: rgba(16, 185, 129, 0.1);
	padding: 4px 10px;
	border-radius: 100px;
	font-weight: 500;
}

/* ========== TECH STACK — multi-direction logo marquee ========== */
.cl-tech-section {
	background: var(--bg-secondary);
	padding: 100px 0;
	border-top: 1px solid var(--border);
	position: relative;
	overflow: hidden;
}
.cl-tech-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 50% 30% at 20% 20%, rgba(255,107,53,0.05), transparent),
		radial-gradient(ellipse 50% 30% at 80% 80%, rgba(168,85,247,0.05), transparent);
	pointer-events: none;
	z-index: 0;
}
.cl-tech-section > .cl-container { position: relative; z-index: 1; }
.cl-tech-intro {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 56px;
}

/* Each row */
.cl-tech-row {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 18px;
	padding: 0 32px;
	position: relative;
	z-index: 1;
}
.cl-tech-row:last-child { margin-bottom: 0; }

/* Row category label (sticky-left) */
.cl-tech-row-label {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--text);
	padding: 10px 16px;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: 100px;
	white-space: nowrap;
	box-shadow: 0 4px 16px rgba(0,0,0,0.2);
	z-index: 3;
}
.cl-tech-cat-ai     { border-color: rgba(168,85,247,0.4); }
.cl-tech-cat-web    { border-color: rgba(59,130,246,0.4); }
.cl-tech-cat-mobile { border-color: rgba(16,185,129,0.4); }

.cl-tech-pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
	animation: clTechPulse 1.6s ease-in-out infinite;
}
.cl-tech-cat-ai     .cl-tech-pulse { background: var(--purple); box-shadow: 0 0 10px var(--purple); }
.cl-tech-cat-web    .cl-tech-pulse { background: var(--blue);   box-shadow: 0 0 10px var(--blue); }
.cl-tech-cat-mobile .cl-tech-pulse { background: var(--green);  box-shadow: 0 0 10px var(--green); }
@keyframes clTechPulse {
	0%, 100% { opacity: 0.5; transform: scale(0.85); }
	50%      { opacity: 1;   transform: scale(1.15); }
}

/* Marquee track wrapper */
.cl-tech-marquee {
	flex: 1;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

/* The actual scrolling track */
.cl-tech-track {
	display: flex;
	gap: 12px;
	width: max-content;
	will-change: transform;
	animation: clTechFlow 55s linear infinite;
}

/* Direction control */
.cl-tech-row[data-direction="left"]  .cl-tech-track { animation-direction: normal;  }
.cl-tech-row[data-direction="right"] .cl-tech-track { animation-direction: reverse; }

/* Per-row speed (read from data-speed via CSS sibling) */
.cl-tech-row[data-speed="50"] .cl-tech-track { animation-duration: 50s; }
.cl-tech-row[data-speed="55"] .cl-tech-track { animation-duration: 55s; }
.cl-tech-row[data-speed="60"] .cl-tech-track { animation-duration: 60s; }
.cl-tech-row[data-speed="65"] .cl-tech-track { animation-duration: 65s; }

/* Hover anywhere on row pauses the flow */
.cl-tech-row:hover .cl-tech-track { animation-play-state: paused; }

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

/* Individual chip */
.cl-tech-chip {
	--chip-tone: var(--text);
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 16px 10px 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 100px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text);
	white-space: nowrap;
	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.3s ease,
		background 0.3s ease,
		box-shadow 0.3s ease;
	cursor: default;
	flex-shrink: 0;
}
.cl-tech-chip-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--chip-tone);
	flex-shrink: 0;
}
.cl-tech-chip-mark svg {
	width: 18px;
	height: 18px;
	display: block;
}
.cl-tech-chip-label {
	font-family: 'Geist', sans-serif;
}

/* Hover — chip lifts, glow appears in brand color, border tints */
.cl-tech-chip:hover {
	transform: translateY(-3px);
	background: rgba(255,255,255,0.04);
	border-color: var(--chip-tone);
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--chip-tone) 14%, transparent),
		0 12px 28px -8px color-mix(in srgb, var(--chip-tone) 28%, transparent);
}
.cl-tech-chip:hover .cl-tech-chip-mark {
	transform: scale(1.15);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reduced motion — pause all marquees */
@media (prefers-reduced-motion: reduce) {
	.cl-tech-track,
	.cl-tech-pulse {
		animation: none !important;
	}
}

/* Mobile — stack labels above tracks, smaller chips */
@media (max-width: 768px) {
	.cl-tech-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 0 16px;
	}
	.cl-tech-row-label { font-size: 10px; padding: 8px 14px; }
	.cl-tech-marquee { width: 100%; }
	.cl-tech-chip { padding: 8px 14px 8px 10px; font-size: 12.5px; }
	.cl-tech-chip-mark { width: 20px; height: 20px; }
	.cl-tech-chip-mark svg { width: 16px; height: 16px; }
}

/* ========== FREE TOOLS — lead-magnet section ========== */
.cl-tools-section {
	background: var(--bg);
	position: relative;
	overflow: hidden;
	scroll-margin-top: 100px;
}
.cl-tools-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 50% 30% at 15% 0%, rgba(255,107,53,0.10), transparent),
		radial-gradient(ellipse 50% 30% at 85% 100%, rgba(168,85,247,0.08), transparent);
	pointer-events: none;
	z-index: 0;
}
.cl-tools-section > .cl-container { position: relative; z-index: 1; }

.cl-tools-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 56px;
}
.cl-eyebrow-pulsed {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 107, 53, 0.1);
	border: 1px solid rgba(255, 107, 53, 0.3);
	padding: 6px 14px;
	border-radius: 100px;
	color: var(--accent);
}
.cl-eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent);
	animation: clToolsDot 1.6s ease-in-out infinite;
}
@keyframes clToolsDot {
	0%, 100% { opacity: 0.5; transform: scale(0.85); }
	50%      { opacity: 1;   transform: scale(1.3); }
}

/* Trust badges row */
.cl-tools-trust {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 20px;
	margin-top: 24px;
	padding: 12px 20px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 100px;
}
.cl-tools-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text-muted);
}
.cl-tools-trust-item svg {
	color: var(--green);
	flex-shrink: 0;
}
.cl-tools-trust-item strong {
	color: var(--text);
	font-weight: 600;
}

/* Tools grid */
.cl-tools-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Per-card tone tokens */
.cl-tool-card {
	--tool-tone: var(--accent);
	--tool-tone-2: #FF8E53;
	--tool-tone-soft: rgba(255, 107, 53, 0.18);
	--tool-tone-faint: rgba(255, 107, 53, 0.08);
	background: linear-gradient(180deg, var(--surface), var(--bg-secondary));
	border: 1px solid var(--border);
	border-radius: 22px;
	padding: 28px;
	position: relative;
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.4s ease,
		box-shadow 0.4s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.cl-tool-tone-blue {
	--tool-tone: #3B82F6;
	--tool-tone-2: #22D3EE;
	--tool-tone-soft: rgba(59, 130, 246, 0.22);
	--tool-tone-faint: rgba(59, 130, 246, 0.08);
}
.cl-tool-tone-green {
	--tool-tone: #10B981;
	--tool-tone-2: #34D399;
	--tool-tone-soft: rgba(16, 185, 129, 0.22);
	--tool-tone-faint: rgba(16, 185, 129, 0.08);
}
.cl-tool-tone-purple {
	--tool-tone: #A855F7;
	--tool-tone-2: #EC4899;
	--tool-tone-soft: rgba(168, 85, 247, 0.22);
	--tool-tone-faint: rgba(168, 85, 247, 0.08);
}
.cl-tool-card:hover {
	transform: translateY(-6px);
	border-color: var(--tool-tone-soft);
	box-shadow:
		0 24px 56px -16px var(--tool-tone-faint),
		0 0 0 1px var(--tool-tone-soft);
}
.cl-tool-card::before {
	content: '';
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 4px;
	background: linear-gradient(90deg, var(--tool-tone), var(--tool-tone-2));
	border-radius: 22px 22px 0 0;
	opacity: 0.85;
}

/* FREE ribbon */
.cl-tool-ribbon {
	position: absolute;
	top: 18px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: white;
	background: linear-gradient(135deg, #10B981, #34D399);
	padding: 4px 9px;
	border-radius: 100px;
	z-index: 2;
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.cl-tool-ribbon svg {
	color: rgba(255, 255, 255, 0.9);
	animation: clRibbonSpark 1.8s ease-in-out infinite;
}
@keyframes clRibbonSpark {
	0%, 100% { transform: rotate(0) scale(1); }
	50%      { transform: rotate(180deg) scale(1.2); }
}

/* Preview area — common (equal-height across all 3 cards) */
.cl-tool-preview {
	margin: 8px 0 24px;
	color: var(--tool-tone);
	min-height: 200px;
	display: flex;
	align-items: stretch;
}
.cl-audit-card,
.cl-roi-card,
.cl-stack-card {
	width: 100%;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* === Preview 1: Audit === */
.cl-audit-card {
	background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 14px;
	justify-content: space-between;
}
.cl-audit-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 14px;
}
.cl-audit-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 6px var(--green);
}
.cl-audit-url {
	font-family: 'Geist Mono', monospace;
	font-size: 11px;
	color: var(--text-muted);
}
.cl-audit-body {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 14px;
	align-items: center;
}
.cl-audit-score {
	position: relative;
	width: 80px;
	height: 80px;
}
.cl-audit-ring {
	width: 100%;
	height: 100%;
	color: var(--tool-tone);
}
.cl-audit-arc {
	stroke-dasharray: 264;
	stroke-dashoffset: 264;
	animation: clAuditArc 2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes clAuditArc {
	to { stroke-dashoffset: 34; }
}
.cl-audit-score-text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	color: var(--text);
}
.cl-audit-score-num {
	font-family: 'Instrument Serif', serif;
	font-size: 26px;
	line-height: 1;
	color: var(--tool-tone);
	font-weight: 400;
}
.cl-audit-score-out {
	font-family: 'Geist Mono', monospace;
	font-size: 10px;
	color: var(--text-dim);
	letter-spacing: 0.08em;
}
.cl-audit-bars {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cl-audit-bar {
	display: grid;
	grid-template-columns: 70px 1fr 22px;
	gap: 8px;
	align-items: center;
	font-size: 10.5px;
}
.cl-audit-bar-name {
	color: var(--text-muted);
	font-family: 'Geist Mono', monospace;
}
.cl-audit-bar-track {
	height: 5px;
	background: var(--border);
	border-radius: 100px;
	overflow: hidden;
	position: relative;
}
.cl-audit-bar-fill {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--tool-tone), var(--tool-tone-2));
	border-radius: inherit;
	animation: clAuditBar 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: var(--d, 0s);
}
@keyframes clAuditBar {
	to { width: var(--w, 80%); }
}
.cl-audit-bar-val {
	font-family: 'Geist Mono', monospace;
	color: var(--text);
	font-weight: 600;
	text-align: right;
}

/* === Preview 2: ROI === */
.cl-roi-card {
	background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 16px;
	justify-content: space-between;
}
.cl-roi-label {
	display: block;
	font-family: 'Geist Mono', monospace;
	font-size: 10.5px;
	color: var(--text-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 6px;
}
.cl-roi-counter {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 12px;
}
.cl-roi-currency {
	font-family: 'Instrument Serif', serif;
	font-size: 24px;
	color: var(--tool-tone);
}
.cl-roi-amount {
	font-family: 'Instrument Serif', serif;
	font-size: 30px;
	line-height: 1;
	background: linear-gradient(135deg, var(--tool-tone), var(--tool-tone-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-variant-numeric: tabular-nums;
}
.cl-roi-chart {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 56px;
	margin-bottom: 10px;
}
.cl-roi-bar {
	flex: 1;
	height: 0;
	background: linear-gradient(180deg, var(--tool-tone), var(--tool-tone-2));
	border-radius: 3px 3px 0 0;
	opacity: 0.5;
	animation: clRoiBar 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: var(--d, 0s);
}
.cl-roi-bar-peak { opacity: 1; box-shadow: 0 0 12px var(--tool-tone-soft); }
@keyframes clRoiBar {
	to { height: var(--h, 50%); }
}
.cl-roi-stats {
	display: flex;
	gap: 10px;
	font-size: 12px;
	color: var(--text-muted);
}
.cl-roi-stats strong { color: var(--text); font-weight: 700; }
.cl-roi-sep { color: var(--text-dim); }

/* === Preview 3: Stack === */
.cl-stack-card {
	background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 14px;
	justify-content: space-between;
}
.cl-stack-prompt {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 8px 10px;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.cl-stack-prompt-tag {
	font-family: 'Geist Mono', monospace;
	font-size: 9.5px;
	color: var(--tool-tone);
	background: var(--tool-tone-faint);
	border: 1px solid var(--tool-tone-soft);
	padding: 2px 6px;
	border-radius: 100px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	flex-shrink: 0;
}
.cl-stack-prompt-text {
	font-size: 11.5px;
	color: var(--text);
	font-style: italic;
}
.cl-stack-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: 'Geist Mono', monospace;
	font-size: 10px;
	color: var(--text-muted);
	margin: 8px 0;
	letter-spacing: 0.05em;
}
.cl-stack-arrow svg {
	color: var(--tool-tone);
	animation: clStackArrow 1.6s ease-in-out infinite;
}
@keyframes clStackArrow {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(3px); }
}
.cl-stack-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.cl-stack-chip {
	font-size: 11px;
	font-weight: 500;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--tool-tone-soft);
	padding: 4px 10px;
	border-radius: 100px;
	opacity: 0;
	transform: translateY(6px);
	animation: clStackChip 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: var(--d, 0s);
}
@keyframes clStackChip {
	to { opacity: 1; transform: translateY(0); }
}
.cl-stack-meta {
	display: flex;
	gap: 10px;
	font-size: 12px;
	color: var(--text-muted);
	padding-top: 8px;
	border-top: 1px solid var(--border);
}
.cl-stack-meta strong { color: var(--text); font-weight: 700; }

/* Card content */
.cl-tool-card h3 {
	font-family: 'Instrument Serif', serif;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
	color: var(--text);
}
.cl-tool-card p {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.6;
	margin-bottom: 14px;
}

/* Proof tag */
.cl-tool-proof {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--tool-tone);
	background: var(--tool-tone-faint);
	border: 1px solid var(--tool-tone-soft);
	padding: 4px 10px;
	border-radius: 100px;
	margin-bottom: 18px;
	width: fit-content;
}
.cl-tool-proof svg {
	animation: clToolProofPulse 1.8s ease-in-out infinite;
}
@keyframes clToolProofPulse {
	0%, 100% { opacity: 0.7; }
	50%      { opacity: 1; }
}

/* CTA — big gradient button */
.cl-tool-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 22px;
	background: linear-gradient(135deg, var(--tool-tone), var(--tool-tone-2));
	color: white !important;
	font-size: 14.5px;
	font-weight: 600;
	border-radius: 100px;
	text-decoration: none !important;
	transition:
		transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease;
	box-shadow: 0 8px 24px -8px var(--tool-tone-soft);
	margin-bottom: 10px;
	margin-top: auto;
}
.cl-tool-cta svg {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cl-tool-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -8px var(--tool-tone-soft);
}
.cl-tool-cta:hover svg {
	transform: translateX(4px);
}

/* Footnote */
.cl-tool-footnote {
	display: block;
	text-align: center;
	font-size: 11px;
	color: var(--text-dim);
	font-family: 'Geist Mono', monospace;
	letter-spacing: 0.04em;
}

/* Reduced motion guard */
@media (prefers-reduced-motion: reduce) {
	.cl-eyebrow-dot,
	.cl-audit-arc, .cl-audit-bar-fill,
	.cl-roi-bar,
	.cl-stack-chip, .cl-stack-arrow svg,
	.cl-ribbon-spark, .cl-tool-ribbon svg {
		animation: none !important;
	}
	.cl-audit-arc { stroke-dashoffset: 34 !important; }
	.cl-audit-bar-fill { width: var(--w, 80%) !important; }
	.cl-roi-bar { height: var(--h, 50%) !important; opacity: 1 !important; }
	.cl-stack-chip { opacity: 1 !important; transform: none !important; }
}

/* ========== TOOLS — INLINE CTA BANNER (mid-page nudge) ========== */
.cl-tools-inline-section {
	padding: 32px 0;
	background: var(--bg);
	position: relative;
	z-index: 1;
}
.cl-tools-inline-banner {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	background: linear-gradient(135deg, rgba(255,107,53,0.08) 0%, rgba(168,85,247,0.08) 100%);
	border: 1px solid rgba(255,107,53,0.25);
	border-radius: 18px;
	text-decoration: none !important;
	color: var(--text) !important;
	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		background 0.35s ease;
	position: relative;
	overflow: hidden;
}
.cl-tools-inline-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: -50%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,107,53,0.12), transparent);
	transition: left 0.7s ease;
}
.cl-tools-inline-banner:hover {
	transform: translateY(-2px);
	border-color: rgba(255,107,53,0.5);
	background: linear-gradient(135deg, rgba(255,107,53,0.12) 0%, rgba(168,85,247,0.12) 100%);
	box-shadow: 0 16px 40px -12px rgba(255,107,53,0.25);
}
.cl-tools-inline-banner:hover::before {
	left: 150%;
}
.cl-tools-inline-spark {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, #FF6B35, #A855F7);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	box-shadow: 0 4px 16px rgba(255,107,53,0.35);
	animation: clInlineSparkSpin 4s linear infinite;
}
@keyframes clInlineSparkSpin {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}
.cl-tools-inline-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.cl-tools-inline-content strong {
	font-size: 16px;
	font-weight: 600;
	color: var(--text);
	letter-spacing: -0.01em;
}
.cl-italic-inline {
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	color: var(--accent);
	font-weight: 400;
	letter-spacing: -0.01em;
}
.cl-tools-inline-sub {
	font-size: 13px;
	color: var(--text-muted);
}
.cl-tools-inline-action {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	background: linear-gradient(135deg, var(--accent), #FF8E53);
	color: white !important;
	border-radius: 100px;
	font-size: 13.5px;
	font-weight: 600;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 16px rgba(255,107,53,0.3);
}
.cl-tools-inline-action svg {
	transition: transform 0.3s ease;
}
.cl-tools-inline-banner:hover .cl-tools-inline-action {
	transform: translateX(2px);
	box-shadow: 0 6px 20px rgba(255,107,53,0.45);
}
.cl-tools-inline-banner:hover .cl-tools-inline-action svg {
	transform: translateX(3px);
}
@media (max-width: 768px) {
	.cl-tools-inline-banner {
		flex-direction: column;
		text-align: center;
		gap: 12px;
		padding: 18px;
	}
	.cl-tools-inline-content { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
	.cl-tools-inline-spark { animation: none !important; }
}

/* ========== TESTIMONIALS — dual-direction marquee ========== */
.cl-testimonial-section {
	background: var(--bg-secondary);
	border-top: 1px solid var(--border);
	position: relative;
	overflow: hidden;
	scroll-margin-top: 100px;
}
.cl-testimonial-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 35% at 20% 20%, rgba(255, 107, 53, 0.06), transparent),
		radial-gradient(ellipse 60% 35% at 80% 80%, rgba(168, 85, 247, 0.06), transparent);
	pointer-events: none;
	z-index: 0;
}
.cl-testimonial-section > .cl-container { position: relative; z-index: 1; }

.cl-testi-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 56px;
}

/* Row wrappers */
.cl-testi-row {
	margin-bottom: 18px;
	position: relative;
	z-index: 1;
}
.cl-testi-row:last-of-type { margin-bottom: 56px; }

/* Marquee viewport with edge fade */
.cl-testi-marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* Scrolling track */
.cl-testi-track {
	display: flex;
	gap: 20px;
	width: max-content;
	will-change: transform;
	animation: clTestiFlow 65s linear infinite;
	padding: 8px 0;
}
.cl-testi-row[data-direction="left"]  .cl-testi-track { animation-direction: normal; }
.cl-testi-row[data-direction="right"] .cl-testi-track { animation-direction: reverse; }
.cl-testi-row[data-speed="55"] .cl-testi-track { animation-duration: 55s; }
.cl-testi-row[data-speed="60"] .cl-testi-track { animation-duration: 60s; }
.cl-testi-row[data-speed="65"] .cl-testi-track { animation-duration: 65s; }
.cl-testi-row[data-speed="70"] .cl-testi-track { animation-duration: 70s; }
.cl-testi-row[data-speed="75"] .cl-testi-track { animation-duration: 75s; }

/* Pause on hover anywhere on the row */
.cl-testi-row:hover .cl-testi-track { animation-play-state: paused; }

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

/* Individual testimonial card */
.cl-testi-card {
	--tn: var(--accent);
	--tn-soft: rgba(255, 107, 53, 0.22);
	--tn-faint: rgba(255, 107, 53, 0.08);
	--tn-2: #FF8E53;
	width: 420px;
	flex-shrink: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 28px 28px 24px;
	position: relative;
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.4s ease,
		box-shadow 0.4s ease,
		background 0.4s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.cl-testi-tone-orange { --tn: #FF6B35; --tn-soft: rgba(255,107,53,0.22);  --tn-faint: rgba(255,107,53,0.08);  --tn-2: #FF8E53; }
.cl-testi-tone-blue   { --tn: #3B82F6; --tn-soft: rgba(59,130,246,0.22);  --tn-faint: rgba(59,130,246,0.08);  --tn-2: #60A5FA; }
.cl-testi-tone-green  { --tn: #10B981; --tn-soft: rgba(16,185,129,0.22);  --tn-faint: rgba(16,185,129,0.08);  --tn-2: #34D399; }
.cl-testi-tone-purple { --tn: #A855F7; --tn-soft: rgba(168,85,247,0.22);  --tn-faint: rgba(168,85,247,0.08);  --tn-2: #C084FC; }
.cl-testi-tone-pink   { --tn: #EC4899; --tn-soft: rgba(236,72,153,0.22);  --tn-faint: rgba(236,72,153,0.08);  --tn-2: #F472B6; }
.cl-testi-tone-cyan   { --tn: #22D3EE; --tn-soft: rgba(34,211,238,0.22);  --tn-faint: rgba(34,211,238,0.08);  --tn-2: #67E8F9; }
.cl-testi-tone-amber  { --tn: #F59E0B; --tn-soft: rgba(245,158,11,0.22);  --tn-faint: rgba(245,158,11,0.08);  --tn-2: #FCD34D; }
.cl-testi-tone-red    { --tn: #F43F5E; --tn-soft: rgba(244,63,94,0.22);   --tn-faint: rgba(244,63,94,0.08);   --tn-2: #FB7185; }

/* Top accent line */
.cl-testi-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--tn), var(--tn-2));
	opacity: 0.7;
}

/* Decorative big quote mark */
.cl-testi-quote-mark {
	position: absolute;
	top: 4px;
	right: 18px;
	font-family: 'Instrument Serif', serif;
	font-size: 100px;
	line-height: 1;
	color: var(--tn);
	opacity: 0.12;
	pointer-events: none;
	user-select: none;
}

/* Hover state */
.cl-testi-card:hover {
	transform: translateY(-4px);
	background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--tn) 6%, var(--surface)));
	border-color: var(--tn-soft);
	box-shadow:
		0 18px 40px -16px var(--tn-faint),
		0 0 0 1px var(--tn-soft);
}
.cl-testi-card:hover::before { opacity: 1; }
.cl-testi-card:hover .cl-testi-quote-mark { opacity: 0.22; }

/* Top row — stars + metric */
.cl-testi-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	position: relative;
	z-index: 1;
}
.cl-testi-stars {
	display: inline-flex;
	gap: 2px;
	color: #FBBF24;
}
.cl-testi-star-wrap {
	display: inline-flex;
	animation: clTestiStar 2.4s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
@keyframes clTestiStar {
	0%, 90%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
	45%, 55%      { transform: scale(1.18); filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.65)); }
}

/* Win-metric pill — tone-aware */
.cl-testi-metric {
	display: inline-flex;
	align-items: center;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tn);
	background: var(--tn-faint);
	border: 1px solid var(--tn-soft);
	padding: 4px 10px;
	border-radius: 100px;
	white-space: nowrap;
}

/* Quote text */
.cl-testi-quote {
	font-family: 'Instrument Serif', serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--text);
	letter-spacing: -0.01em;
	margin-bottom: 22px;
	position: relative;
	z-index: 1;
	flex: 1;
}

/* Author row */
.cl-testi-author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--border);
	position: relative;
	z-index: 1;
}
.cl-testi-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: white;
	flex-shrink: 0;
	box-shadow: 0 4px 14px var(--tn-faint);
}
.cl-testi-info {
	flex: 1;
	min-width: 0;
}
.cl-testi-info h5 {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 2px;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cl-testi-info p {
	font-size: 12px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cl-testi-loc {
	color: var(--text-dim);
}

/* Verified badge */
.cl-testi-verified {
	flex-shrink: 0;
	color: var(--green);
	display: inline-flex;
	transition: transform 0.3s ease;
}
.cl-testi-card:hover .cl-testi-verified {
	transform: scale(1.18) rotate(8deg);
}

/* Trust stats strip below the marquees */
.cl-testi-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 18px;
	padding: 18px 28px;
	background: linear-gradient(135deg, rgba(255,107,53,0.06), rgba(168,85,247,0.06));
	border: 1px solid var(--border-strong);
	border-radius: 100px;
	max-width: fit-content;
	margin: 0 auto;
}
.cl-testi-trust-item {
	font-size: 14px;
	color: var(--text-muted);
}
.cl-testi-trust-item strong {
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	font-size: 22px;
	color: var(--text);
	font-weight: 400;
	letter-spacing: -0.01em;
	margin-right: 4px;
}
.cl-testi-trust-sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--text-dim);
	opacity: 0.5;
}

/* Reduced motion — pause marquees + freeze stars */
@media (prefers-reduced-motion: reduce) {
	.cl-testi-track, .cl-testi-star-wrap {
		animation: none !important;
	}
}

/* Mobile — narrower cards, hide trust separators on tight widths */
@media (max-width: 768px) {
	.cl-testi-card {
		width: 320px;
		padding: 22px 20px 20px;
	}
	.cl-testi-quote { font-size: 16.5px; }
	.cl-testi-quote-mark { font-size: 72px; right: 12px; }
	.cl-testi-trust {
		padding: 14px 18px;
		gap: 8px 14px;
	}
	.cl-testi-trust-item { font-size: 12px; }
	.cl-testi-trust-item strong { font-size: 18px; }
}

/* ========== RESOURCES HUB — Blog · News · Books · Guides · Podcasts ========== */
.cl-resources-section {
	background: var(--bg);
	scroll-margin-top: 100px;
}

/* Filter tabs */
.cl-res-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 36px;
	padding: 8px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 100px;
	width: fit-content;
}
.cl-res-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--text-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 100px;
	cursor: pointer;
	transition: all 0.25s ease;
	font-family: inherit;
	white-space: nowrap;
}
.cl-res-filter:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.04);
}
.cl-res-filter.is-active {
	color: var(--text);
	background: linear-gradient(135deg, rgba(255,107,53,0.18), rgba(168,85,247,0.18));
	border-color: rgba(255, 107, 53, 0.35);
	box-shadow: 0 0 0 1px rgba(255,107,53,0.15), 0 6px 20px -10px rgba(255,107,53,0.4);
}
.cl-res-filter-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}
.cl-res-filter-dot.cl-res-tone-blue   { background: #3B82F6; }
.cl-res-filter-dot.cl-res-tone-green  { background: #10B981; }
.cl-res-filter-dot.cl-res-tone-orange { background: #FF6B35; }
.cl-res-filter-dot.cl-res-tone-cyan   { background: #22D3EE; }
.cl-res-filter-dot.cl-res-tone-pink   { background: #EC4899; }
.cl-res-filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-muted);
	background: rgba(255, 255, 255, 0.05);
	border-radius: 100px;
	transition: all 0.25s ease;
}
.cl-res-filter.is-active .cl-res-filter-count {
	color: var(--accent);
	background: rgba(255, 107, 53, 0.18);
}

/* Grid */
.cl-res-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Empty state */
.cl-res-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--text-muted);
	font-size: 15px;
}

/* Card base */
.cl-res-card {
	--tn: var(--accent);
	--tn-2: #FF8E53;
	--tn-soft: rgba(255, 107, 53, 0.22);
	--tn-faint: rgba(255, 107, 53, 0.08);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.4s ease,
		box-shadow 0.4s ease,
		opacity 0.3s ease;
}
.cl-res-card.cl-res-tone-orange { --tn: #FF6B35; --tn-2: #FF8E53; --tn-soft: rgba(255,107,53,0.22);  --tn-faint: rgba(255,107,53,0.08); }
.cl-res-card.cl-res-tone-blue   { --tn: #3B82F6; --tn-2: #60A5FA; --tn-soft: rgba(59,130,246,0.22);  --tn-faint: rgba(59,130,246,0.08); }
.cl-res-card.cl-res-tone-green  { --tn: #10B981; --tn-2: #34D399; --tn-soft: rgba(16,185,129,0.22);  --tn-faint: rgba(16,185,129,0.08); }
.cl-res-card.cl-res-tone-purple { --tn: #A855F7; --tn-2: #C084FC; --tn-soft: rgba(168,85,247,0.22);  --tn-faint: rgba(168,85,247,0.08); }
.cl-res-card.cl-res-tone-cyan   { --tn: #22D3EE; --tn-2: #67E8F9; --tn-soft: rgba(34,211,238,0.22);  --tn-faint: rgba(34,211,238,0.08); }
.cl-res-card.cl-res-tone-pink   { --tn: #EC4899; --tn-2: #F472B6; --tn-soft: rgba(236,72,153,0.22);  --tn-faint: rgba(236,72,153,0.08); }
.cl-res-card.cl-res-tone-amber  { --tn: #F59E0B; --tn-2: #FCD34D; --tn-soft: rgba(245,158,11,0.22);  --tn-faint: rgba(245,158,11,0.08); }
.cl-res-card.cl-res-tone-red    { --tn: #F43F5E; --tn-2: #FB7185; --tn-soft: rgba(244,63,94,0.22);   --tn-faint: rgba(244,63,94,0.08); }

.cl-res-card:hover {
	transform: translateY(-6px);
	border-color: var(--tn-soft);
	box-shadow:
		0 24px 48px -20px var(--tn-faint),
		0 0 0 1px var(--tn-soft);
}

/* Filter hide / show with smooth transition */
.cl-res-card.is-res-hidden {
	display: none;
}

/* Type pill — top-left of cover */
.cl-res-type-pill {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tn);
	background: rgba(10, 14, 26, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--tn-soft);
	border-radius: 100px;
	z-index: 2;
}
.cl-res-type-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tn);
	box-shadow: 0 0 8px var(--tn);
	animation: clResDotPulse 2s ease-in-out infinite;
}
@keyframes clResDotPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.6; transform: scale(1.4); }
}

/* Cover (top half) common */
.cl-res-cover {
	height: 200px;
	position: relative;
	overflow: hidden;
}

/* === Cover: BLOG — gradient with floating blobs === */
.cl-res-cover-blog {
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
}
.cl-res-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(20px);
	opacity: 0.6;
	animation: clResBlobFloat 8s ease-in-out infinite;
}
.cl-res-blob-1 {
	width: 130px; height: 130px;
	top: -30px; left: -20px;
	background: rgba(255, 255, 255, 0.4);
	animation-delay: 0s;
}
.cl-res-blob-2 {
	width: 100px; height: 100px;
	bottom: -30px; right: -20px;
	background: rgba(0, 0, 0, 0.25);
	animation-delay: 1.5s;
}
.cl-res-blob-3 {
	width: 70px; height: 70px;
	top: 40%; right: 30%;
	background: rgba(255, 255, 255, 0.3);
	animation-delay: 3s;
}
@keyframes clResBlobFloat {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(20px, -16px); }
}
.cl-res-card:hover .cl-res-blob { animation-duration: 4s; }

/* === Cover: NEWS — press banner with logo === */
.cl-res-cover-news {
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 24px 20px;
	border-bottom: 1px solid var(--border-strong);
}
.cl-res-press-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}
.cl-res-press-logo {
	font-family: 'Geist', system-ui, sans-serif;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: transparent;
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
	-webkit-background-clip: text;
	background-clip: text;
	margin-bottom: 8px;
	position: relative;
	z-index: 1;
	text-align: center;
	line-height: 1.1;
}
.cl-res-press-date {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 100px;
	position: relative;
	z-index: 1;
}

/* === Cover: BOOK — 3D book with spine === */
.cl-res-cover-book {
	background:
		radial-gradient(ellipse 100% 70% at center, color-mix(in srgb, var(--tn) 18%, var(--bg-secondary)), var(--bg-secondary));
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 800px;
}
.cl-res-book {
	position: relative;
	width: 100px;
	height: 138px;
	transform: rotateY(-22deg) rotateX(2deg);
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	filter:
		drop-shadow(0 8px 14px rgba(0,0,0,0.4))
		drop-shadow(0 4px 6px var(--tn-faint));
}
.cl-res-card:hover .cl-res-book {
	transform: rotateY(-12deg) rotateX(0deg) translateY(-4px);
}
.cl-res-book-spine {
	position: absolute;
	top: 0; left: -8px;
	width: 8px; height: 100%;
	background: linear-gradient(90deg, color-mix(in srgb, var(--tn) 60%, black), var(--tn));
	border-radius: 1px 0 0 1px;
	transform-origin: right center;
	transform: rotateY(-90deg) translateX(4px);
}
.cl-res-book-front {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, var(--tn), color-mix(in srgb, var(--tn) 70%, black) 100%);
	border-radius: 2px 6px 6px 2px;
	padding: 14px 12px 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
.cl-res-book-front::before {
	content: '';
	position: absolute;
	top: 8px; bottom: 8px;
	left: 4px;
	width: 1px;
	background: rgba(255, 255, 255, 0.3);
}
.cl-res-book-tag {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
}
.cl-res-book-title {
	font-family: 'Instrument Serif', serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.05;
	color: white;
	letter-spacing: -0.01em;
}
.cl-res-book-author {
	font-size: 8px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.65);
	letter-spacing: 0.02em;
}
.cl-res-book-shine {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 30%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
	transform: translateX(-100%);
	pointer-events: none;
}
.cl-res-card:hover .cl-res-book-shine {
	animation: clResBookShine 1.2s ease-out forwards;
}
@keyframes clResBookShine {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(450%); }
}

/* Ribbon (FREE / NEW corner badge) */
.cl-res-ribbon {
	position: absolute;
	top: 14px;
	right: 14px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: white;
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
	padding: 5px 11px;
	border-radius: 4px;
	z-index: 2;
	box-shadow: 0 4px 12px var(--tn-faint);
}

/* === Cover: GUIDE — PDF document === */
.cl-res-cover-guide {
	background:
		radial-gradient(ellipse 100% 70% at center, color-mix(in srgb, var(--tn) 12%, var(--bg-secondary)), var(--bg-secondary));
	display: flex;
	align-items: center;
	justify-content: center;
}
.cl-res-doc {
	position: relative;
	width: 110px;
	height: 142px;
	background: linear-gradient(180deg, #FAFAFA, #E5E7EB);
	border-radius: 4px;
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow:
		0 8px 16px rgba(0,0,0,0.35),
		0 2px 4px var(--tn-faint);
	transform: rotate(-3deg);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cl-res-card:hover .cl-res-doc {
	transform: rotate(0deg) translateY(-4px);
}
.cl-res-doc-corner {
	position: absolute;
	top: 0; right: 0;
	width: 18px;
	height: 18px;
	background: linear-gradient(225deg, var(--bg-secondary) 50%, rgba(0,0,0,0.12) 50%);
	border-radius: 0 4px 0 4px;
}
.cl-res-doc-line {
	height: 4px;
	width: var(--w, 100%);
	background: #94A3B8;
	border-radius: 2px;
	opacity: 0.6;
}
.cl-res-doc-line-title {
	height: 6px;
	width: 70%;
	background: var(--tn);
	opacity: 1;
	margin-bottom: 4px;
}
.cl-res-doc-pdf {
	position: absolute;
	bottom: 8px; left: 50%;
	transform: translateX(-50%);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: white;
	background: var(--tn);
	padding: 3px 9px;
	border-radius: 3px;
}

/* === Cover: PODCAST — square art with equalizer + play === */
.cl-res-cover-podcast {
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--tn) 25%, var(--bg-secondary)), var(--bg-secondary));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
}
.cl-res-pod {
	position: relative;
	width: 130px;
	height: 130px;
	background: linear-gradient(135deg, var(--tn), color-mix(in srgb, var(--tn) 60%, black));
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow:
		0 12px 28px -8px var(--tn-faint),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.cl-res-pod::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 50%);
}
.cl-res-pod-eq {
	position: absolute;
	bottom: 14px;
	left: 14px;
	right: 14px;
	display: flex;
	gap: 3px;
	align-items: flex-end;
	height: 28px;
}
.cl-res-pod-eq span {
	flex: 1;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 1px;
	animation: clResEq 1.2s ease-in-out infinite;
	animation-delay: var(--d, 0s);
	min-height: 4px;
}
@keyframes clResEq {
	0%, 100% { height: 30%; }
	50%      { height: 90%; }
}
.cl-res-pod-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: white;
	color: var(--tn);
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	position: relative;
	z-index: 1;
	transition: transform 0.3s ease;
}
.cl-res-pod-play::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.5);
	animation: clResPodPing 1.8s ease-out infinite;
}
@keyframes clResPodPing {
	0%   { transform: scale(0.9); opacity: 1; }
	100% { transform: scale(1.4); opacity: 0; }
}
.cl-res-card:hover .cl-res-pod-play {
	transform: scale(1.1);
}
.cl-res-pod-ep {
	position: absolute;
	top: 10px;
	left: 12px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(0, 0, 0, 0.3);
	padding: 3px 8px;
	border-radius: 100px;
	backdrop-filter: blur(4px);
}

/* Body (text area) */
.cl-res-body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.cl-res-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--text-dim);
	margin-bottom: 12px;
}
.cl-res-cat {
	color: var(--tn);
	font-weight: 600;
	letter-spacing: 0.01em;
}
.cl-res-meta-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--text-dim);
}
.cl-res-title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--text);
	margin-bottom: 10px;
	transition: color 0.3s ease;
}
.cl-res-card:hover .cl-res-title {
	color: var(--tn);
}
.cl-res-excerpt {
	font-size: 13.5px;
	color: var(--text-muted);
	line-height: 1.6;
	margin-bottom: 18px;
	flex: 1;
}

/* CTA — quiet by default, accent on hover */
.cl-res-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tn);
	text-decoration: none;
	transition: gap 0.25s ease, color 0.25s ease;
	margin-top: auto;
	align-self: flex-start;
}
.cl-res-cta svg {
	transition: transform 0.25s ease;
}
.cl-res-cta:hover {
	gap: 10px;
}
.cl-res-cta:hover svg {
	transform: translateX(2px);
}
.cl-res-cta-strong {
	padding: 9px 14px;
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
	color: white;
	border-radius: 8px;
	box-shadow: 0 4px 14px var(--tn-faint);
}
.cl-res-cta-strong:hover {
	color: white;
	box-shadow: 0 6px 20px var(--tn-faint);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cl-res-blob,
	.cl-res-pod-eq span,
	.cl-res-pod-play::before,
	.cl-res-type-dot {
		animation: none !important;
	}
}

/* Mobile */
@media (max-width: 1024px) {
	.cl-res-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.cl-res-grid { grid-template-columns: 1fr; }
	.cl-res-filters {
		width: 100%;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		border-radius: 16px;
	}
	.cl-res-filter { padding: 9px 14px; font-size: 12.5px; }
	.cl-res-cover { height: 180px; }
}

/* ========== FAQ ========== */
.cl-faq-section {
	background: var(--bg-secondary);
	border-top: 1px solid var(--border);
}
.cl-faq-list {
	max-width: 820px;
	margin: 0 auto;
}
.cl-faq-item {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	margin-bottom: 12px;
	overflow: hidden;
	transition: all 0.3s;
}
.cl-faq-item:hover { border-color: var(--border-strong); }
.cl-faq-item.cl-open {
	background: var(--bg);
	border-color: var(--accent);
}
.cl-faq-question {
	padding: 22px 28px;
	cursor: pointer;
	display: flex; justify-content: space-between; align-items: center;
	gap: 24px;
}
.cl-faq-question h4 {
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--text);
	margin: 0;
}
.cl-faq-toggle {
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--border);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 300;
	color: var(--text);
	transition: all 0.3s;
}
.cl-faq-item.cl-open .cl-faq-toggle {
	background: var(--accent);
	color: white;
	transform: rotate(45deg);
}
.cl-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.4s ease;
	padding: 0 28px;
}
.cl-faq-item.cl-open .cl-faq-answer {
	max-height: 500px;
	padding: 0 28px 24px;
}
.cl-faq-answer p {
	font-size: 15px;
	color: var(--text-muted);
	line-height: 1.7;
}

/* ========== CTA SECTION ========== */
.cl-final-cta {
	background: var(--bg);
	position: relative;
	overflow: hidden;
}
.cl-final-cta::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 800px; height: 800px;
	background: radial-gradient(circle, rgba(255, 107, 53, 0.15), transparent 60%);
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.cl-cta-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 32px;
	padding: 80px 64px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.cl-cta-card::before {
	content: '';
	position: absolute;
	top: -50%; left: -50%;
	width: 200%; height: 200%;
	background: conic-gradient(from 0deg, transparent, rgba(255, 107, 53, 0.1), transparent);
	animation: clRotate 20s linear infinite;
	pointer-events: none;
}
@keyframes clRotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.cl-cta-content { position: relative; z-index: 1; }
.cl-cta-card h2 {
	font-family: 'Instrument Serif', serif;
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: 20px;
	color: var(--text);
}
.cl-cta-card h2 .cl-italic {
	font-style: italic;
	background: var(--gradient-1);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cl-cta-card p {
	font-size: 19px;
	color: var(--text-muted);
	max-width: 580px;
	margin: 0 auto 40px;
	line-height: 1.6;
}
.cl-cta-buttons {
	display: flex; gap: 12px; justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 40px;
}
.cl-cta-trust {
	display: flex; gap: 32px; justify-content: center;
	font-size: 13px;
	color: var(--text-dim);
	flex-wrap: wrap;
}
.cl-cta-trust span {
	display: inline-flex; align-items: center; gap: 6px;
}
.cl-cta-trust .cl-dot {
	width: 6px; height: 6px;
	background: var(--green);
	border-radius: 50%;
	display: inline-block;
}

/* ========== FOOTER ========== */
.cl-footer {
	background: var(--bg-secondary);
	border-top: 1px solid var(--border);
	padding: 80px 0 32px;
}
.cl-footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
	gap: 48px;
	margin-bottom: 64px;
}
.cl-footer-brand p {
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 16px 0;
	max-width: 280px;
}
.cl-footer-social {
	display: flex; gap: 12px;
	margin-top: 20px;
}
.cl-social-link {
	width: 36px; height: 36px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	color: var(--text-muted);
	transition: all 0.2s;
	cursor: pointer;
	text-decoration: none;
}
.cl-social-link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: white;
	transform: translateY(-2px);
}
.cl-footer-col h4 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	font-weight: 600;
	margin-bottom: 20px;
}
.cl-footer-col ul { list-style: none; padding: 0; margin: 0; }
.cl-footer-col li { margin-bottom: 10px; }
.cl-footer-col a {
	color: var(--text) !important;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s;
}
.cl-footer-col a:hover { color: var(--accent) !important; }
.cl-footer-bottom {
	padding-top: 32px;
	border-top: 1px solid var(--border);
	display: flex; justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: var(--text-dim);
}
.cl-footer-bottom-links {
	display: flex; gap: 24px;
	flex-wrap: wrap;
}
.cl-footer-bottom-links a {
	color: var(--text-muted) !important;
	text-decoration: none;
	transition: color 0.2s;
}
.cl-footer-bottom-links a:hover { color: var(--text) !important; }

/* WhatsApp Float */
.cl-whatsapp-float {
	position: fixed;
	bottom: 24px; right: 24px;
	width: 56px; height: 56px;
	background: #25D366;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
	cursor: pointer;
	z-index: 100;
	transition: all 0.3s;
	animation: clBounce 3s ease-in-out infinite;
	text-decoration: none;
}
.cl-whatsapp-float:hover {
	transform: scale(1.1);
}
@keyframes clBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
.cl-whatsapp-float svg { width: 30px; height: 30px; fill: white; }

/* Scroll reveal animation */
.cl-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.cl-reveal.cl-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Responsive */
@media (max-width: 968px) {
	.cl-hero-content { grid-template-columns: 1fr; }
	.cl-hero-visual { display: none; }
	.cl-stats-grid { grid-template-columns: repeat(2, 1fr); }
	.cl-stat-card:nth-child(2) { border-right: none; }
	.cl-ai-cards,
	.cl-services-grid,
	.cl-portfolio-grid,
	.cl-tools-grid,
	.cl-blog-grid { grid-template-columns: 1fr; }
	.cl-industries-grid { grid-template-columns: repeat(2, 1fr); }
	.cl-why-grid { grid-template-columns: 1fr; }
	.cl-wwd-grid { grid-template-columns: 1fr; gap: 40px; }
	.cl-wwd-visual { display: none; }
	/* Process timeline goes vertical on mobile */
	.cl-process-timeline {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-left: 40px;
	}
	.cl-process-track {
		top: 0;
		bottom: 0;
		left: 32px;
		right: auto;
		width: 4px;
		height: auto;
	}
	.cl-process-track-base {
		inset: 0 1px;
		width: 2px;
		height: auto;
	}
	.cl-process-track-fill {
		inset: 0;
		width: 4px;
		height: calc(var(--cl-process-progress, 0) * 100%);
		background: linear-gradient(180deg, var(--accent) 0%, #FF8E53 30%, var(--blue) 70%, var(--purple) 100%);
	}
	.cl-process-comet {
		top: calc(var(--cl-process-progress, 0) * 100%);
		left: 50%;
	}
	.cl-process-step {
		text-align: left;
		display: grid;
		grid-template-columns: 64px 1fr;
		gap: 0 20px;
		align-items: start;
	}
	.cl-process-step .cl-process-num {
		margin: 0;
		grid-row: span 4;
		margin-left: -72px;
	}
	.cl-process-step p { margin-left: 0; max-width: 100%; }
	.cl-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.cl-container { padding: 0 max(20px, env(safe-area-inset-left, 0px)) 0 max(20px, env(safe-area-inset-right, 0px)); }
	.cl-section { padding: 80px 0; }
	.cl-cta-card { padding: 48px 24px; }
}

@media (max-width: 640px) {
	.cl-footer-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		margin-bottom: 48px;
	}
	.cl-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.cl-footer-bottom-links {
		gap: 14px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.cl-nav-mega-panel:not([hidden]) {
		animation: none;
	}
	.cl-nav-mega-panel::before {
		animation: none !important;
	}
	.cl-services-hub-card::before {
		animation: none !important;
	}
}

/* ==========================================================================
   AI CHATBOT LANDING PAGE
   ========================================================================== */

/* ===== Shared tone palette (reused across chatbot patterns) ===== */
.cl-chatbot-tone-orange { --tn: #FF6B35; --tn-2: #FF8E53; --tn-soft: rgba(255,107,53,0.22);  --tn-faint: rgba(255,107,53,0.08); }
.cl-chatbot-tone-blue   { --tn: #3B82F6; --tn-2: #60A5FA; --tn-soft: rgba(59,130,246,0.22);  --tn-faint: rgba(59,130,246,0.08); }
.cl-chatbot-tone-green  { --tn: #10B981; --tn-2: #34D399; --tn-soft: rgba(16,185,129,0.22);  --tn-faint: rgba(16,185,129,0.08); }
.cl-chatbot-tone-purple { --tn: #A855F7; --tn-2: #C084FC; --tn-soft: rgba(168,85,247,0.22);  --tn-faint: rgba(168,85,247,0.08); }
.cl-chatbot-tone-cyan   { --tn: #22D3EE; --tn-2: #67E8F9; --tn-soft: rgba(34,211,238,0.22);  --tn-faint: rgba(34,211,238,0.08); }
.cl-chatbot-tone-pink   { --tn: #EC4899; --tn-2: #F472B6; --tn-soft: rgba(236,72,153,0.22);  --tn-faint: rgba(236,72,153,0.08); }
.cl-chatbot-tone-amber  { --tn: #F59E0B; --tn-2: #FCD34D; --tn-soft: rgba(245,158,11,0.22);  --tn-faint: rgba(245,158,11,0.08); }
.cl-chatbot-tone-red    { --tn: #F43F5E; --tn-2: #FB7185; --tn-soft: rgba(244,63,94,0.22);   --tn-faint: rgba(244,63,94,0.08); }
.cl-chatbot-tone-lime   { --tn: #84CC16; --tn-2: #A3E635; --tn-soft: rgba(132,204,22,0.22);  --tn-faint: rgba(132,204,22,0.08); }

/* Shared button extensions */
.cl-btn-lg {
	padding: 14px 22px;
	font-size: 15px;
}
.cl-btn-block {
	width: 100%;
	justify-content: center;
}

/* ===== HERO ===== */
.cl-chatbot-hero {
	position: relative;
	overflow: hidden;
	padding: 100px 0 80px;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}
.cl-hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.cl-hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.45;
}
.cl-hero-orb-1 {
	width: 480px; height: 480px;
	top: -120px; left: -120px;
	background: radial-gradient(circle, rgba(255,107,53,0.45), transparent 70%);
	animation: clHeroOrb 14s ease-in-out infinite;
}
.cl-hero-orb-2 {
	width: 420px; height: 420px;
	bottom: -160px; right: -100px;
	background: radial-gradient(circle, rgba(168,85,247,0.4), transparent 70%);
	animation: clHeroOrb 16s ease-in-out infinite reverse;
}
@keyframes clHeroOrb {
	0%, 100% { transform: translate(0,0); }
	50%      { transform: translate(36px, -28px); }
}
.cl-hero-grid {
	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: 48px 48px;
	mask-image: radial-gradient(ellipse 80% 60% at center top, black 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at center top, black 30%, transparent 80%);
}

.cl-chatbot-hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 56px;
	align-items: start;
}

.cl-chatbot-hero-pitch { padding-top: 8px; }

.cl-chatbot-h1 {
	font-family: 'Instrument Serif', serif;
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--text);
	margin: 18px 0 22px;
}
.cl-chatbot-h1 .cl-italic { font-style: italic; }
.cl-chatbot-h1 .cl-highlight {
	background: linear-gradient(135deg, var(--accent), #FF8E53);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: italic;
}
.cl-chatbot-sub {
	font-size: 17px;
	line-height: 1.65;
	color: var(--text-muted);
	margin-bottom: 24px;
	max-width: 580px;
}

.cl-chatbot-bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 18px;
}
.cl-chatbot-bullets li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--text);
}
.cl-chatbot-bullets li svg {
	color: var(--green);
	flex-shrink: 0;
}

.cl-chatbot-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
}

.cl-chatbot-hero-trust {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 22px;
	border-top: 1px solid var(--border);
}
.cl-chatbot-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--text-muted);
}
.cl-chatbot-stars {
	color: #FBBF24;
	letter-spacing: 1px;
	font-size: 14px;
}
.cl-chatbot-rating strong { color: var(--text); font-weight: 600; }

.cl-chatbot-trust-row {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--text-dim);
}
.cl-trust-dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--text-dim);
	opacity: 0.6;
}

/* ===== LEAD FORM ===== */
.cl-chatbot-hero-form {
	position: sticky;
	top: 100px;
}
.cl-leadform {
	background: linear-gradient(180deg, var(--surface), var(--bg-secondary));
	border: 1px solid var(--border-strong);
	border-radius: 22px;
	padding: 28px;
	box-shadow:
		0 20px 50px -25px rgba(255, 107, 53, 0.18),
		0 0 0 1px rgba(255, 255, 255, 0.02);
	position: relative;
	overflow: hidden;
}
.cl-leadform::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), #A855F7, var(--accent));
	background-size: 200% 100%;
	animation: clLeadformShimmer 6s linear infinite;
}
@keyframes clLeadformShimmer {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
.cl-leadform-header {
	margin-bottom: 18px;
	text-align: center;
}
.cl-leadform-title {
	font-family: 'Geist', system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text);
	margin: 0 0 6px;
}
.cl-leadform-sub {
	font-size: 13px;
	color: var(--text-muted);
	margin: 0;
}

.cl-leadform-row {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
}
.cl-leadform-row-2 { display: flex; }
.cl-leadform-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 12px;
	flex: 1;
}
.cl-leadform-row .cl-leadform-field { margin-bottom: 0; }
.cl-leadform-field-cc { flex: 0 0 110px; }
.cl-leadform-field-grow { flex: 1; }
.cl-leadform-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	letter-spacing: 0.01em;
}
.cl-req { color: var(--accent); }
.cl-leadform input,
.cl-leadform select,
.cl-leadform textarea {
	width: 100%;
	padding: 11px 13px;
	font-family: inherit;
	font-size: 14px;
	color: var(--text);
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid var(--border);
	border-radius: 10px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cl-leadform input::placeholder,
.cl-leadform textarea::placeholder { color: var(--text-dim); }
.cl-leadform input:focus,
.cl-leadform select:focus,
.cl-leadform textarea:focus {
	border-color: var(--accent);
	background: rgba(0, 0, 0, 0.28);
	box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
}
.cl-leadform select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6 L8 10 L12 6' stroke='%23B8C0CC' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
	padding-right: 32px;
	background-color: rgba(0, 0, 0, 0.18);
}
.cl-leadform textarea { resize: vertical; min-height: 80px; }
.cl-leadform-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	margin-top: 8px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: white;
	background: linear-gradient(135deg, var(--accent), #FF8E53);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 8px 24px -8px rgba(255, 107, 53, 0.5);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cl-leadform-submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 32px -8px rgba(255, 107, 53, 0.6);
}
.cl-leadform-submit svg { transition: transform 0.2s ease; }
.cl-leadform-submit:hover svg { transform: translateX(2px); }
.cl-leadform-foot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 14px 0 0;
	font-size: 11.5px;
	color: var(--text-dim);
	justify-content: center;
	width: 100%;
}
.cl-leadform-foot svg { color: var(--green); }

/* Submitted state — hidden by default (defends against [hidden] override),
   revealed when JS adds .is-submitted to the form. */
.cl-leadform-thanks {
	display: none;
	text-align: center;
	padding: 8px 0 4px;
	color: var(--text);
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.cl-leadform-thanks > svg { color: var(--green); }
.cl-leadform-thanks h3 {
	font-family: 'Instrument Serif', serif;
	font-size: 26px;
	font-weight: 400;
	font-style: italic;
	margin: 0;
}
.cl-leadform-thanks > p {
	font-size: 14px;
	color: var(--text-muted);
	margin: 0;
	line-height: 1.5;
	max-width: 280px;
}
.cl-leadform-thanks > p strong { color: var(--text); }

.cl-leadform.is-submitted > *:not([data-cl-leadform-thanks]) { display: none; }
.cl-leadform.is-submitted .cl-leadform-thanks { display: flex; }

/* WhatsApp Community CTA — shown after form submit */
.cl-leadform-wa-community {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-top: 6px;
	padding: 13px 14px;
	background: linear-gradient(135deg, #25D366, #128C7E);
	color: white;
	border-radius: 12px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 6px 18px -4px rgba(37, 211, 102, 0.45);
	position: relative;
	overflow: hidden;
}
.cl-leadform-wa-community::before {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
	transition: left 0.6s ease;
}
.cl-leadform-wa-community:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -4px rgba(37, 211, 102, 0.55);
}
.cl-leadform-wa-community:hover::before { left: 130%; }
.cl-leadform-wa-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	color: white;
}
.cl-leadform-wa-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	text-align: left;
	min-width: 0;
}
.cl-leadform-wa-text strong {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: white;
	line-height: 1.25;
}
.cl-leadform-wa-text small {
	font-size: 11.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.01em;
	line-height: 1.3;
}
.cl-leadform-wa-arrow {
	flex-shrink: 0;
	color: white;
	opacity: 0.9;
	transition: transform 0.2s ease;
}
.cl-leadform-wa-community:hover .cl-leadform-wa-arrow {
	transform: translateX(2px);
	opacity: 1;
}
.cl-leadform-wa-direct {
	font-size: 12.5px;
	color: var(--text-muted) !important;
	text-decoration: none;
	margin-top: 4px;
	transition: color 0.2s ease;
	font-weight: 500 !important;
}
.cl-leadform-wa-direct:hover { color: var(--accent) !important; }

/* ===== CHATBOT TRUST STATS ===== */
.cl-chatbot-stats {
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border);
	padding: 56px 0;
}
.cl-chatbot-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.cl-chatbot-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
}
.cl-chatbot-stat-num {
	font-family: 'Instrument Serif', serif;
	font-size: clamp(40px, 5vw, 56px);
	font-weight: 400;
	line-height: 1;
	color: var(--text);
	letter-spacing: -0.02em;
	display: inline-flex;
	align-items: baseline;
}
.cl-chatbot-stat-num em {
	font-style: italic;
	color: var(--accent);
	font-size: 0.65em;
	margin-left: 2px;
}
.cl-chatbot-stat-label {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* ===== CHATBOT TYPES ===== */
.cl-chatbot-types-section { background: var(--bg); }
.cl-chatbot-types-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.cl-chatbot-type {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 26px 22px 22px;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}
.cl-chatbot-type::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--tn), var(--tn-2));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}
.cl-chatbot-type:hover {
	transform: translateY(-4px);
	border-color: var(--tn-soft);
	box-shadow: 0 18px 40px -16px var(--tn-faint);
}
.cl-chatbot-type:hover::before { transform: scaleX(1); }
.cl-chatbot-type-tag {
	display: inline-block;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tn);
	background: var(--tn-faint);
	border: 1px solid var(--tn-soft);
	padding: 4px 9px;
	border-radius: 100px;
	margin-bottom: 14px;
	width: fit-content;
}
.cl-chatbot-type h4 {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text);
	margin-bottom: 8px;
}
.cl-chatbot-type p {
	font-size: 13px;
	line-height: 1.55;
	color: var(--text-muted);
	margin-bottom: 14px;
}
.cl-chatbot-type-list {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}
.cl-chatbot-type-list li {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 12.5px;
	color: var(--text-muted);
	line-height: 1.45;
}
.cl-chatbot-type-list li svg {
	color: var(--tn);
	flex-shrink: 0;
	margin-top: 2px;
}
.cl-chatbot-type-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tn);
	text-decoration: none;
	margin-top: auto;
	padding: 8px 14px;
	border: 1px solid var(--tn-soft);
	border-radius: 100px;
	background: transparent;
	width: fit-content;
	transition: all 0.25s ease;
}
.cl-chatbot-type-cta:hover {
	background: var(--tn-faint);
	gap: 10px;
}

/* ===== CAPABILITIES — premium animated cards (no icons) ===== */
.cl-chatbot-caps-section {
	position: relative;
	background: var(--bg-secondary);
	border-top: 1px solid var(--border);
	overflow: hidden;
}
.cl-caps-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.cl-caps-glow {
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	filter: blur(120px);
	opacity: 0.5;
	mix-blend-mode: screen;
}
.cl-caps-glow-1 { top: -160px; left: -120px; background: radial-gradient(circle, rgba(255,107,53,0.35), transparent 60%); animation: cl-caps-glow-drift 18s ease-in-out infinite; }
.cl-caps-glow-2 { top: 30%;     right: -180px; background: radial-gradient(circle, rgba(168,85,247,0.32), transparent 60%); animation: cl-caps-glow-drift 22s ease-in-out -6s infinite; }
.cl-caps-glow-3 { bottom: -200px; left: 40%;   background: radial-gradient(circle, rgba(34,211,238,0.28), transparent 60%); animation: cl-caps-glow-drift 26s ease-in-out -12s infinite; }
@keyframes cl-caps-glow-drift {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(40px, -30px, 0) scale(1.08); }
}

.cl-chatbot-caps-section .cl-container { position: relative; z-index: 1; }

.cl-eyebrow-pulsed {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cl-eyebrow-pulsed .cl-eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FF6B35;
	box-shadow: 0 0 0 0 rgba(255,107,53,0.65);
	animation: cl-caps-pulse 1.8s ease-out infinite;
}
@keyframes cl-caps-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,107,53,0.65); }
	70%  { box-shadow: 0 0 0 8px rgba(255,107,53,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,107,53,0); }
}

.cl-chatbot-caps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.cl-chatbot-cap {
	position: relative;
	background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--bg)));
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 0 0 22px;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(.2,.7,.2,1), border-color 0.3s ease, box-shadow 0.4s ease;
}
.cl-chatbot-cap::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--tn), var(--tn-2), var(--tn));
	background-size: 200% 100%;
	opacity: 0.55;
	transition: opacity 0.3s ease;
	animation: cl-cap-topline 6s linear infinite;
}
@keyframes cl-cap-topline {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
.cl-chatbot-cap::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 18px;
	background: radial-gradient(120% 80% at 50% 0%, var(--tn-faint), transparent 55%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.cl-chatbot-cap:hover {
	transform: translateY(-6px);
	border-color: var(--tn-soft);
	box-shadow: 0 24px 48px -24px var(--tn-soft), 0 0 0 1px var(--tn-soft);
}
.cl-chatbot-cap:hover::before { opacity: 1; }
.cl-chatbot-cap:hover::after  { opacity: 1; }

.cl-chatbot-cap-num {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 2;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	opacity: 0.55;
	transition: color 0.3s ease, opacity 0.3s ease;
}
.cl-chatbot-cap:hover .cl-chatbot-cap-num { color: var(--tn); opacity: 1; }

.cl-chatbot-cap-visual {
	position: relative;
	height: 150px;
	margin: 0 0 18px;
	overflow: hidden;
	background:
		radial-gradient(80% 100% at 50% 100%, var(--tn-faint), transparent 70%),
		linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 60%, transparent));
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tn);
}

.cl-chatbot-cap-body {
	padding: 0 22px;
}
.cl-chatbot-cap-label {
	display: inline-block;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tn);
	margin-bottom: 10px;
}
.cl-chatbot-cap h4 {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text);
	margin: 0 0 8px;
	line-height: 1.3;
}
.cl-chatbot-cap p {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0;
}

/* ============================================================
   9 unique CSS-only animated visuals — each in its own block
   ============================================================ */

/* (1) NLU — bubble + parsed tokens */
.cl-cap-nlu {
	position: relative;
	width: 88%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
.cl-cap-nlu-bubble {
	font-size: 12px;
	color: var(--text);
	background: color-mix(in srgb, var(--surface) 80%, transparent);
	border: 1px solid var(--border);
	padding: 6px 10px;
	border-radius: 12px 12px 12px 4px;
	max-width: 90%;
}
.cl-cap-nlu-tokens {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}
.cl-cap-nlu-token {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 3px 7px;
	border-radius: 5px;
	background: var(--tn-faint);
	color: var(--tn);
	border: 1px solid var(--tn-soft);
	opacity: 0;
	transform: translateY(4px);
	animation: cl-cap-nlu-tok 5s ease-in-out var(--d, 0s) infinite;
}
@keyframes cl-cap-nlu-tok {
	0%, 8%   { opacity: 0; transform: translateY(4px); }
	18%, 70% { opacity: 1; transform: translateY(0); }
	85%, 100%{ opacity: 0; transform: translateY(-2px); }
}
.cl-cap-nlu-intent {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9.5px;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}
.cl-chatbot-cap:hover .cl-cap-nlu-token { animation-duration: 3.2s; }

/* (2) Intent — confidence bars */
.cl-cap-intent {
	width: 88%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cl-cap-intent-row {
	display: grid;
	grid-template-columns: 80px 1fr 28px;
	align-items: center;
	gap: 8px;
	font-family: 'Geist Mono', ui-monospace, monospace;
}
.cl-cap-intent-name {
	font-size: 9.5px;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}
.cl-cap-intent-bar {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: var(--border);
	overflow: hidden;
}
.cl-cap-intent-fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 0;
	background: linear-gradient(90deg, var(--tn), var(--tn-2));
	border-radius: 3px;
	animation: cl-cap-intent-fill 4s ease-in-out var(--d, 0s) infinite;
}
.cl-cap-intent-pct {
	font-size: 9.5px;
	color: var(--text);
	text-align: right;
	font-weight: 600;
}
.cl-cap-intent-win .cl-cap-intent-pct { color: var(--tn); }
.cl-cap-intent-win .cl-cap-intent-fill { box-shadow: 0 0 8px var(--tn-soft); }
@keyframes cl-cap-intent-fill {
	0%, 8%    { width: 0; }
	30%, 75%  { width: var(--w, 50%); }
	95%, 100% { width: 0; }
}
.cl-chatbot-cap:hover .cl-cap-intent-fill { animation-duration: 2.6s; }

/* (3) Multi-turn Memory — linked bubbles */
.cl-cap-memory {
	position: relative;
	width: 78%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cl-cap-memory-line {
	position: absolute;
	left: 22px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(180deg, transparent, var(--tn-soft) 30%, var(--tn-soft) 70%, transparent);
}
.cl-cap-memory-bubble {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10.5px;
	color: var(--text);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	border: 1px solid var(--border);
	padding: 4px 10px 4px 4px;
	border-radius: 999px;
	width: fit-content;
	opacity: 0;
	transform: translateX(-6px);
	animation: cl-cap-mem-pop 5s ease-in-out infinite;
}
.cl-cap-mem-1 { animation-delay: 0.1s; }
.cl-cap-mem-2 { animation-delay: 0.7s; }
.cl-cap-mem-3 { animation-delay: 1.3s; border-color: var(--tn-soft); background: var(--tn-faint); }
@keyframes cl-cap-mem-pop {
	0%, 5%    { opacity: 0; transform: translateX(-6px); }
	18%, 78%  { opacity: 1; transform: translateX(0); }
	92%, 100% { opacity: 0; transform: translateX(6px); }
}
.cl-cap-mem-pill {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: var(--tn-faint);
	color: var(--tn);
	padding: 3px 7px;
	border-radius: 999px;
	border: 1px solid var(--tn-soft);
}
.cl-cap-mem-active {
	background: var(--tn);
	color: var(--bg);
	border-color: var(--tn);
	box-shadow: 0 0 12px var(--tn-soft);
}

/* (4) Sentiment — emotion meter */
.cl-cap-sentiment {
	width: 82%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cl-cap-sent-track {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #F43F5E, #F59E0B 40%, #84CC16 80%);
	box-shadow: 0 0 0 1px var(--border) inset;
}
.cl-cap-sent-needle {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 2px solid var(--tn);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tn) 30%, transparent), 0 4px 10px rgba(0,0,0,0.3);
	animation: cl-cap-sent-move 5s ease-in-out infinite;
}
@keyframes cl-cap-sent-move {
	0%   { left: 12%; }
	35%  { left: 28%; }
	60%  { left: 90%; }
	100% { left: 92%; }
}
.cl-cap-sent-labels {
	display: flex;
	justify-content: space-between;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9.5px;
	color: var(--text-muted);
}
.cl-cap-sent-tag {
	align-self: flex-end;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tn);
	background: var(--tn-faint);
	border: 1px solid var(--tn-soft);
	padding: 3px 8px;
	border-radius: 999px;
}
.cl-chatbot-cap:hover .cl-cap-sent-needle { animation-duration: 3.2s; }

/* (5) Voice & Speech — EQ waveform */
.cl-cap-voice {
	width: 88%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}
.cl-cap-voice-eq {
	display: flex;
	align-items: center;
	gap: 3px;
	height: 56px;
}
.cl-cap-voice-eq span {
	display: block;
	width: 4px;
	height: 18%;
	background: linear-gradient(180deg, var(--tn), var(--tn-2));
	border-radius: 2px;
	transform-origin: center;
	animation: cl-cap-voice-bar 1s ease-in-out var(--d, 0s) infinite;
}
@keyframes cl-cap-voice-bar {
	0%, 100% { height: 18%; opacity: 0.55; }
	50%      { height: var(--h, 70%); opacity: 1; }
}
.cl-cap-voice-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9.5px;
	color: var(--text-muted);
	letter-spacing: 0.02em;
}
.cl-cap-voice-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tn);
	box-shadow: 0 0 0 0 var(--tn-soft);
	animation: cl-caps-pulse 1.5s ease-out infinite;
}
.cl-chatbot-cap:hover .cl-cap-voice-eq span { animation-duration: 0.6s; }

/* (6) Multi-channel — hub & spokes */
.cl-cap-channel {
	position: relative;
	width: 100%;
	height: 130px;
}
.cl-cap-ch-hub {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--bg);
	background: var(--tn);
	padding: 6px 10px;
	border-radius: 999px;
	z-index: 2;
	box-shadow: 0 0 0 6px var(--tn-faint), 0 0 0 1px var(--tn);
	animation: cl-cap-ch-pulse 2.4s ease-in-out infinite;
}
@keyframes cl-cap-ch-pulse {
	0%, 100% { box-shadow: 0 0 0 6px var(--tn-faint), 0 0 0 1px var(--tn); }
	50%      { box-shadow: 0 0 0 14px transparent, 0 0 0 1px var(--tn); }
}
.cl-cap-ch-spoke {
	position: absolute;
	left: 50%; top: 50%;
	width: 1px;
	height: 60px;
	background: linear-gradient(180deg, var(--tn-soft), transparent);
	transform-origin: top center;
}
.cl-cap-ch-spoke::after {
	content: '';
	position: absolute;
	left: 50%; top: 0;
	width: 6px;
	height: 6px;
	background: var(--tn);
	border-radius: 50%;
	transform: translateX(-50%);
	animation: cl-cap-ch-flow 2.2s ease-in-out infinite;
}
.cl-cap-ch-s1 { transform: translate(-50%, -100%) rotate(-45deg); }
.cl-cap-ch-s2 { transform: translate(-50%, -100%) rotate(45deg);  }
.cl-cap-ch-s3 { transform: translate(-50%, 0)    rotate(-135deg); }
.cl-cap-ch-s4 { transform: translate(-50%, 0)    rotate(135deg);  }
.cl-cap-ch-s2::after { animation-delay: 0.4s; }
.cl-cap-ch-s3::after { animation-delay: 0.8s; }
.cl-cap-ch-s4::after { animation-delay: 1.2s; }
@keyframes cl-cap-ch-flow {
	0%   { top: 0;     opacity: 0; transform: translateX(-50%) scale(0.6); }
	30%  { opacity: 1; }
	100% { top: 100%;  opacity: 0; transform: translateX(-50%) scale(1); }
}
.cl-cap-ch-pill {
	position: absolute;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	border: 1px solid var(--border);
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;
}
.cl-cap-ch-p1 { top: 6px;     left: 14px; }
.cl-cap-ch-p2 { top: 6px;     right: 14px; }
.cl-cap-ch-p3 { bottom: 6px;  left: 6px; }
.cl-cap-ch-p4 { bottom: 6px;  right: 14px; }
.cl-chatbot-cap:hover .cl-cap-ch-hub { animation-duration: 1.4s; }

/* (7) CRM — data flow between two boxes */
.cl-cap-crm {
	width: 92%;
	display: grid;
	grid-template-columns: 1fr 60px 1fr;
	align-items: center;
	gap: 4px;
}
.cl-cap-crm-box {
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 9px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
}
.cl-cap-crm-box-label {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--tn);
}
.cl-cap-crm-box-rows {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.cl-cap-crm-row {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--border);
	width: var(--w, 60%);
}
.cl-cap-crm-erp .cl-cap-crm-row { background: var(--tn-faint); }
.cl-cap-crm-pipe {
	position: relative;
	height: 24px;
	border-top: 1px dashed var(--tn-soft);
	border-bottom: 1px dashed var(--tn-soft);
}
.cl-cap-crm-packet {
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tn);
	box-shadow: 0 0 8px var(--tn-soft);
	transform: translateY(-50%);
	animation: cl-cap-crm-flow 2.4s ease-in-out infinite;
}
.cl-cap-crm-pkt-1 { animation-delay: 0s;   }
.cl-cap-crm-pkt-2 { animation-delay: 0.6s; }
.cl-cap-crm-pkt-3 { animation-delay: 1.2s; animation-direction: reverse; }
@keyframes cl-cap-crm-flow {
	0%   { left: -8px;        opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { left: calc(100% + 8px); opacity: 0; }
}
.cl-chatbot-cap:hover .cl-cap-crm-packet { animation-duration: 1.4s; }

/* (8) RAG — document scan */
.cl-cap-rag {
	position: relative;
	width: 80%;
	height: 110px;
}
.cl-cap-rag-doc {
	position: absolute;
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 8px 8px 7px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 70px;
	min-height: 86px;
}
.cl-cap-rag-doc-1 { left: 0;    top: 8px;  z-index: 3; transform: rotate(-6deg); }
.cl-cap-rag-doc-2 { left: 50%;  top: 0;    z-index: 2; transform: translateX(-50%) rotate(2deg); }
.cl-cap-rag-doc-3 { right: 0;   top: 12px; z-index: 1; transform: rotate(6deg); }
.cl-cap-rag-line {
	display: block;
	height: 3px;
	border-radius: 2px;
	background: var(--border);
	width: var(--w, 60%);
}
.cl-cap-rag-doc:nth-child(1) .cl-cap-rag-line:first-child,
.cl-cap-rag-doc:nth-child(2) .cl-cap-rag-line:first-child,
.cl-cap-rag-doc:nth-child(3) .cl-cap-rag-line:first-child { background: var(--tn); width: 50%; }
.cl-cap-rag-scan {
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 130%;
	background: linear-gradient(180deg, transparent 0%, var(--tn-soft) 48%, var(--tn) 50%, var(--tn-soft) 52%, transparent 100%);
	background-size: 100% 24px;
	background-repeat: no-repeat;
	background-position: 0 -24px;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: 0.8;
	animation: cl-cap-rag-scan 3s ease-in-out infinite;
}
@keyframes cl-cap-rag-scan {
	0%   { background-position: 0 -24px; opacity: 0; }
	20%  { opacity: 0.8; }
	80%  { opacity: 0.8; }
	100% { background-position: 0 110%; opacity: 0; }
}
.cl-cap-rag-tag {
	position: absolute;
	bottom: -22px;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--tn);
	background: var(--tn-faint);
	border: 1px solid var(--tn-soft);
	padding: 2px 7px;
	border-radius: 999px;
	white-space: nowrap;
}
.cl-chatbot-cap:hover .cl-cap-rag-scan { animation-duration: 1.6s; }

/* (9) Analytics — bar chart + trend line */
.cl-cap-analytics {
	position: relative;
	width: 86%;
	height: 100px;
}
.cl-cap-an-bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
}
.cl-cap-an-bars span {
	display: block;
	flex: 1;
	height: 0;
	background: linear-gradient(180deg, var(--tn-2), var(--tn));
	border-radius: 3px 3px 0 0;
	animation: cl-cap-an-grow 3.6s ease-in-out var(--d, 0s) infinite;
	opacity: 0.8;
}
@keyframes cl-cap-an-grow {
	0%, 5%    { height: 0; }
	30%, 75%  { height: var(--h, 60%); }
	95%, 100% { height: 0; }
}
.cl-cap-an-line {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--tn);
	pointer-events: none;
	stroke-dasharray: 400;
	stroke-dashoffset: 400;
	animation: cl-cap-an-line 3.6s ease-in-out 0.4s infinite;
	opacity: 0;
}
@keyframes cl-cap-an-line {
	0%, 10%   { stroke-dashoffset: 400; opacity: 0; }
	30%       { opacity: 1; }
	60%, 75%  { stroke-dashoffset: 0;   opacity: 1; }
	95%, 100% { opacity: 0; }
}
.cl-cap-an-pill {
	position: absolute;
	top: -4px;
	right: -4px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--tn);
	background: var(--tn-faint);
	border: 1px solid var(--tn-soft);
	padding: 3px 8px;
	border-radius: 999px;
	box-shadow: 0 0 0 0 var(--tn-soft);
	animation: cl-caps-pulse 2.2s ease-out infinite;
}
.cl-chatbot-cap:hover .cl-cap-an-bars span { animation-duration: 2s; }
.cl-chatbot-cap:hover .cl-cap-an-line { animation-duration: 2s; }

/* Reduced-motion: keep visuals readable but stop the looping motion. */
@media (prefers-reduced-motion: reduce) {
	.cl-caps-glow,
	.cl-chatbot-cap::before,
	.cl-cap-nlu-token,
	.cl-cap-intent-fill,
	.cl-cap-memory-bubble,
	.cl-cap-sent-needle,
	.cl-cap-voice-eq span,
	.cl-cap-voice-dot,
	.cl-cap-ch-hub,
	.cl-cap-ch-spoke::after,
	.cl-cap-crm-packet,
	.cl-cap-rag-scan,
	.cl-cap-an-bars span,
	.cl-cap-an-line,
	.cl-cap-an-pill,
	.cl-eyebrow-pulsed .cl-eyebrow-dot {
		animation: none !important;
	}
	.cl-cap-nlu-token,
	.cl-cap-memory-bubble { opacity: 1; transform: none; }
	.cl-cap-intent-fill { width: var(--w, 50%); }
	.cl-cap-sent-needle { left: 80%; }
	.cl-cap-an-bars span { height: var(--h, 60%); }
	.cl-cap-an-line { stroke-dashoffset: 0; opacity: 1; }
}

/* ===== INDUSTRIES (chatbot variant) — scene-based animated cards ===== */
.cl-chatbot-industries-section { background: var(--bg); }
.cl-chatbot-industries-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}
/* Automation verticals: 4 columns (4+4 grid); chatbot landing keeps 5-up. */
.cl-automation-industries .cl-chatbot-industries-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1024px) {
	.cl-automation-industries .cl-chatbot-industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.cl-automation-industries .cl-chatbot-industries-grid {
		grid-template-columns: 1fr;
	}
}
/* ML landing verticals: same 4+4 grid as automation */
.cl-ml-industries .cl-chatbot-industries-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1024px) {
	.cl-ml-industries .cl-chatbot-industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.cl-ml-industries .cl-chatbot-industries-grid {
		grid-template-columns: 1fr;
	}
}
/* Generative AI landing verticals: same 4+4 grid */
.cl-genai-industries .cl-chatbot-industries-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1024px) {
	.cl-genai-industries .cl-chatbot-industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.cl-genai-industries .cl-chatbot-industries-grid {
		grid-template-columns: 1fr;
	}
}
/* Website development verticals: same 4+4 grid as automation */
.cl-webdev-industries .cl-chatbot-industries-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1024px) {
	.cl-webdev-industries .cl-chatbot-industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.cl-webdev-industries .cl-chatbot-industries-grid {
		grid-template-columns: 1fr;
	}
}
/* Mobile app verticals: same 4+4 grid */
.cl-mobile-industries .cl-chatbot-industries-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1024px) {
	.cl-mobile-industries .cl-chatbot-industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.cl-mobile-industries .cl-chatbot-industries-grid {
		grid-template-columns: 1fr;
	}
}
/* Custom software verticals: same 4+4 grid */
.cl-custom-software-industries .cl-chatbot-industries-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1024px) {
	.cl-custom-software-industries .cl-chatbot-industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.cl-custom-software-industries .cl-chatbot-industries-grid {
		grid-template-columns: 1fr;
	}
}
/* E-commerce verticals: same 4+4 grid */
.cl-ecommerce-industries .cl-chatbot-industries-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1024px) {
	.cl-ecommerce-industries .cl-chatbot-industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.cl-ecommerce-industries .cl-chatbot-industries-grid {
		grid-template-columns: 1fr;
	}
}
/* Cloud & DevOps verticals: same 4+4 grid */
.cl-cloud-devops-industries .cl-chatbot-industries-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
@media (max-width: 1024px) {
	.cl-cloud-devops-industries .cl-chatbot-industries-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.cl-cloud-devops-industries .cl-chatbot-industries-grid {
		grid-template-columns: 1fr;
	}
}
.cl-chatbot-vertical {
	position: relative;
	background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--bg)));
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 0 0 16px;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(.2,.7,.2,1), border-color 0.3s ease, box-shadow 0.4s ease;
	color: var(--ind-tone, var(--accent));
}
.cl-chatbot-vertical::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(120% 80% at 50% 0%, var(--ind-tone-faint), transparent 55%);
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	z-index: 0;
}
.cl-chatbot-vertical:hover {
	transform: translateY(-5px);
	border-color: var(--ind-tone-soft);
	box-shadow: 0 22px 44px -22px var(--ind-tone-soft), 0 0 0 1px var(--ind-tone-soft);
}
.cl-chatbot-vertical:hover::before { opacity: 1; }

.cl-cbi-visual {
	position: relative;
	height: 88px;
	margin: 0 0 14px;
	overflow: hidden;
	background:
		radial-gradient(70% 100% at 50% 100%, var(--ind-tone-faint), transparent 70%),
		linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 50%, transparent));
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ind-tone, var(--accent));
	z-index: 1;
}
.cl-cbi-visual .cl-ind-svg-full {
	width: 100%;
	height: 100%;
	display: block;
}
.cl-cbi-visual .cl-ind-svg:not(.cl-ind-svg-full) {
	width: 70%;
	height: 100%;
}

.cl-chatbot-vertical-head {
	position: relative;
	z-index: 1;
	padding: 0 16px;
	margin-bottom: 8px;
}
.cl-chatbot-vertical-head h4 {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}
.cl-chatbot-vertical-tag {
	display: inline-block;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ind-tone, var(--accent));
}
.cl-chatbot-vertical-eg {
	position: relative;
	z-index: 1;
	padding: 0 16px;
	font-size: 12.5px;
	color: var(--text-muted);
	line-height: 1.55;
	margin: 0;
}

/* === New scenes added for chatbot industries (Travel, Insurance, SaaS) === */

/* Travel — plane gliding along dashed flight path */
.cl-cbi-flight-path {
	stroke-dasharray: 2 3;
	animation: cl-cbi-flight-dash 2.4s linear infinite;
}
@keyframes cl-cbi-flight-dash {
	to { stroke-dashoffset: -25; }
}
.cl-cbi-sun {
	transform-origin: 100px 10px;
	animation: cl-cbi-sun-pulse 4s ease-in-out infinite;
}
@keyframes cl-cbi-sun-pulse {
	0%, 100% { transform: scale(1);    opacity: 0.9; }
	50%      { transform: scale(1.18); opacity: 1;   }
}
.cl-cbi-clouds ellipse {
	transform-origin: center;
	animation: cl-cbi-cloud-drift 10s ease-in-out infinite;
}
.cl-cbi-clouds ellipse:last-child { animation-duration: 13s; animation-delay: -3s; }
@keyframes cl-cbi-cloud-drift {
	0%, 100% { transform: translateX(0);    opacity: 0.7; }
	50%      { transform: translateX(-6px); opacity: 0.95; }
}
.cl-chatbot-vertical:hover .cl-cbi-plane animateMotion { dur: 1.6s; }
.cl-chatbot-vertical:hover .cl-cbi-flight-path { animation-duration: 0.9s; }

/* Insurance — shield + animated check-mark draw */
.cl-cbi-shield {
	transform-origin: 60px 28px;
	animation: cl-cbi-shield-pulse 2.6s ease-in-out infinite;
}
@keyframes cl-cbi-shield-pulse {
	0%, 100% { filter: drop-shadow(0 0 0   color-mix(in srgb, var(--ind-tone) 0%, transparent)); }
	50%      { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ind-tone) 65%, transparent)); }
}
.cl-cbi-check {
	stroke-dasharray: 36;
	stroke-dashoffset: 36;
	animation: cl-cbi-check-draw 3.4s ease-in-out infinite;
}
@keyframes cl-cbi-check-draw {
	0%, 8%    { stroke-dashoffset: 36; }
	35%, 70%  { stroke-dashoffset: 0;  }
	95%, 100% { stroke-dashoffset: 36; }
}
.cl-cbi-shield-rays line {
	transform-origin: 60px 28px;
	animation: cl-cbi-rays-spin 6s linear infinite;
}
@keyframes cl-cbi-rays-spin {
	to { transform: rotate(360deg); }
}
.cl-chatbot-vertical:hover .cl-cbi-check { animation-duration: 1.8s; }

/* SaaS — stacked dashboard panels + cursor click loop */
.cl-cbi-saas-back  { animation: cl-cbi-saas-float 3.2s ease-in-out infinite; transform-origin: 60px 28px; }
.cl-cbi-saas-front { animation: cl-cbi-saas-float 3.2s ease-in-out -1.2s infinite; transform-origin: 60px 28px; }
@keyframes cl-cbi-saas-float {
	0%, 100% { transform: translate(2px, 10px); }
	50%      { transform: translate(2px, 8px);  }
}
.cl-cbi-saas-back  { animation-name: cl-cbi-saas-float-back; }
@keyframes cl-cbi-saas-float-back {
	0%, 100% { transform: translate(8px, 4px); }
	50%      { transform: translate(8px, 2px); }
}
.cl-cbi-saas-bars rect {
	transform-origin: bottom;
	animation: cl-cbi-saas-bar 2.4s ease-in-out infinite;
}
.cl-cbi-saas-bars rect:nth-child(2) { animation-delay: 0.2s; }
.cl-cbi-saas-bars rect:nth-child(3) { animation-delay: 0.4s; }
.cl-cbi-saas-bars rect:nth-child(4) { animation-delay: 0.6s; }
@keyframes cl-cbi-saas-bar {
	0%, 100% { transform: scaleY(0.6); opacity: 0.7; }
	50%      { transform: scaleY(1);   opacity: 1;   }
}
.cl-cbi-saas-cursor {
	animation: cl-cbi-saas-cursor 3s ease-in-out infinite;
}
@keyframes cl-cbi-saas-cursor {
	0%   { transform: translate(74px, 30px); }
	35%  { transform: translate(60px, 22px); }
	60%  { transform: translate(56px, 18px); }
	75%  { transform: translate(56px, 18px) scale(0.9); }
	100% { transform: translate(74px, 30px); }
}
.cl-chatbot-vertical:hover .cl-cbi-saas-bars rect { animation-duration: 1.4s; }
.cl-chatbot-vertical:hover .cl-cbi-saas-cursor   { animation-duration: 1.8s; }

@media (prefers-reduced-motion: reduce) {
	.cl-cbi-flight-path,
	.cl-cbi-sun,
	.cl-cbi-clouds ellipse,
	.cl-cbi-shield,
	.cl-cbi-check,
	.cl-cbi-shield-rays line,
	.cl-cbi-saas-back,
	.cl-cbi-saas-front,
	.cl-cbi-saas-bars rect,
	.cl-cbi-saas-cursor { animation: none !important; }
	.cl-cbi-check { stroke-dashoffset: 0; }
}

/* ===== MID-PAGE BANNER CTA ===== */
.cl-chatbot-banner-section {
	background: var(--bg);
	padding: 40px 0;
}
.cl-chatbot-banner {
	position: relative;
	display: grid;
	grid-template-columns: 60px 1fr auto;
	grid-template-areas:
		"spark content ctas"
		". trust trust";
	align-items: center;
	gap: 18px 24px;
	padding: 32px 36px;
	background: linear-gradient(135deg, rgba(255,107,53,0.14), rgba(168,85,247,0.14));
	border: 1px solid var(--border-strong);
	border-radius: 24px;
	overflow: hidden;
}
.cl-chatbot-banner::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 24px;
	background: conic-gradient(from 0deg, transparent, rgba(255,107,53,0.4), transparent 30%);
	animation: clBannerSpin 8s linear infinite;
	z-index: -1;
	opacity: 0.5;
}
@keyframes clBannerSpin {
	to { transform: rotate(360deg); }
}
.cl-chatbot-banner-spark {
	grid-area: spark;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--accent), #A855F7);
	color: white;
	box-shadow: 0 8px 20px -6px rgba(255,107,53,0.5);
	animation: clBannerSparkle 3s ease-in-out infinite;
}
@keyframes clBannerSparkle {
	0%, 100% { transform: rotate(0deg) scale(1); }
	50%      { transform: rotate(20deg) scale(1.08); }
}
.cl-chatbot-banner-content { grid-area: content; }
.cl-chatbot-banner-content h3 {
	font-family: 'Instrument Serif', serif;
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-bottom: 6px;
	color: var(--text);
}
.cl-chatbot-banner-content p {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.55;
	margin: 0;
	max-width: 600px;
}
.cl-chatbot-banner-ctas {
	grid-area: ctas;
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}
.cl-chatbot-banner-trust {
	grid-area: trust;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	font-size: 12px;
	color: var(--text-dim);
}
.cl-chatbot-banner-trust span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ===== PRICING / HIRING MODELS ===== */
.cl-chatbot-pricing-section { background: var(--bg-secondary); }
.cl-chatbot-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	max-width: 1080px;
	margin: 0 auto;
}
.cl-chatbot-plan {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 22px;
	padding: 32px 28px 28px;
	display: flex;
	flex-direction: column;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
.cl-chatbot-plan:hover {
	transform: translateY(-4px);
	border-color: var(--border-strong);
}
.cl-chatbot-plan-featured {
	border: 1px solid rgba(255, 107, 53, 0.4);
	background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 5%, var(--surface)));
	transform: translateY(-12px);
	box-shadow:
		0 24px 60px -28px rgba(255,107,53,0.4),
		0 0 0 1px rgba(255,107,53,0.15);
}
.cl-chatbot-plan-featured:hover { transform: translateY(-16px); }
.cl-chatbot-plan-popular {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: white;
	background: linear-gradient(135deg, var(--accent), #A855F7);
	padding: 6px 14px;
	border-radius: 100px;
	box-shadow: 0 4px 14px rgba(255, 107, 53, 0.4);
	white-space: nowrap;
}
.cl-chatbot-plan-head { margin-bottom: 22px; }
.cl-chatbot-plan-tag {
	display: inline-block;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 8px;
}
.cl-chatbot-plan h3 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text);
	margin-bottom: 14px;
}
.cl-chatbot-plan-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 14px;
	font-family: 'Instrument Serif', serif;
}
.cl-chatbot-plan-currency {
	font-size: 22px;
	color: var(--text-muted);
	font-weight: 400;
}
.cl-chatbot-plan-amount {
	font-size: 48px;
	font-weight: 400;
	color: var(--text);
	letter-spacing: -0.02em;
	line-height: 1;
}
.cl-chatbot-plan-per {
	font-size: 14px;
	color: var(--text-muted);
	margin-left: 4px;
	font-family: 'Geist', system-ui, sans-serif;
}
.cl-chatbot-plan-pitch {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--text-muted);
	margin: 0;
}
.cl-chatbot-plan-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.cl-chatbot-plan-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--text);
}
.cl-chatbot-plan-list li svg {
	color: var(--accent);
	flex-shrink: 0;
}

/* ===== LLM MODELS ===== */
.cl-chatbot-models-section { background: var(--bg); }
.cl-chatbot-models-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.cl-chatbot-model-group {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 22px 22px 18px;
	transition: border-color 0.3s ease, background 0.3s ease;
}
.cl-chatbot-model-group:hover {
	border-color: var(--tn-soft);
	background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--tn) 4%, var(--surface)));
}
.cl-chatbot-model-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}
.cl-chatbot-model-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tn);
	box-shadow: 0 0 8px var(--tn);
	animation: clResDotPulse 2s ease-in-out infinite;
}
.cl-chatbot-model-head h4 {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	margin: 0;
	letter-spacing: 0.005em;
}
.cl-chatbot-model-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.cl-chatbot-model-chip {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--text);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border);
	padding: 5px 10px;
	border-radius: 8px;
	transition: all 0.2s ease;
}
.cl-chatbot-model-chip:hover {
	color: var(--tn);
	border-color: var(--tn-soft);
	background: var(--tn-faint);
}

/* ===== FINAL CTA ===== */
.cl-chatbot-final-cta {
	background:
		radial-gradient(ellipse 60% 40% at 20% 30%, rgba(255,107,53,0.12), transparent),
		radial-gradient(ellipse 60% 40% at 80% 70%, rgba(168,85,247,0.12), transparent),
		var(--bg);
	border-top: 1px solid var(--border);
	padding: 100px 0;
}
.cl-chatbot-final-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}
.cl-chatbot-final-pitch { padding-top: 8px; }
.cl-chatbot-final-h {
	font-family: 'Instrument Serif', serif;
	font-size: clamp(34px, 4.5vw, 52px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--text);
	margin: 18px 0 16px;
}
.cl-chatbot-final-h .cl-italic { font-style: italic; color: var(--accent); }
.cl-chatbot-final-sub {
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-muted);
	margin-bottom: 28px;
	max-width: 540px;
}
.cl-chatbot-final-trust {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.cl-chatbot-final-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--text);
}
.cl-chatbot-final-alt-ctas {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ===== STICKY MOBILE CTA BAR ===== */
.cl-chatbot-sticky {
	position: fixed;
	bottom: 16px;
	left: 16px;
	right: 16px;
	z-index: 90;
	display: none;
	gap: 8px;
	padding: 10px;
	background: rgba(10, 14, 26, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--border-strong);
	border-radius: 100px;
	box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6);
}
.cl-chatbot-sticky-quote,
.cl-chatbot-sticky-wa {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.005em;
	border-radius: 100px;
	text-decoration: none;
	white-space: nowrap;
}
.cl-chatbot-sticky-quote {
	background: linear-gradient(135deg, var(--accent), #FF8E53);
	color: white;
}
.cl-chatbot-sticky-wa {
	background: #25D366;
	color: white;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
	.cl-chatbot-hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.cl-chatbot-hero-form { position: static; }
	.cl-chatbot-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.cl-chatbot-types-grid { grid-template-columns: repeat(2, 1fr); }
	.cl-chatbot-caps-grid { grid-template-columns: repeat(2, 1fr); }
	.cl-chatbot-industries-grid { grid-template-columns: repeat(3, 1fr); }
	.cl-chatbot-pricing-grid { grid-template-columns: 1fr; }
	.cl-chatbot-plan-featured { transform: none; }
	.cl-chatbot-plan-featured:hover { transform: translateY(-4px); }
	.cl-chatbot-models-grid { grid-template-columns: repeat(2, 1fr); }
	.cl-chatbot-final-grid { grid-template-columns: 1fr; gap: 40px; }
	.cl-chatbot-banner {
		grid-template-columns: 50px 1fr;
		grid-template-areas: "spark content" "ctas ctas" "trust trust";
		padding: 24px;
	}
	.cl-chatbot-banner-content h3 { font-size: 22px; }
}
@media (max-width: 640px) {
	.cl-chatbot-hero { padding: 60px 0 50px; }
	.cl-chatbot-bullets { grid-template-columns: 1fr; }
	.cl-chatbot-hero-ctas { flex-direction: column; }
	.cl-chatbot-hero-ctas .cl-btn-primary,
	.cl-chatbot-hero-ctas .cl-btn-secondary { width: 100%; justify-content: center; }
	.cl-chatbot-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
	.cl-chatbot-types-grid { grid-template-columns: 1fr; }
	.cl-chatbot-caps-grid { grid-template-columns: 1fr; }
	.cl-chatbot-industries-grid { grid-template-columns: repeat(2, 1fr); }
	.cl-chatbot-models-grid { grid-template-columns: 1fr; }
	.cl-chatbot-final-trust { grid-template-columns: 1fr; }
	.cl-leadform { padding: 22px 18px; }
	.cl-chatbot-sticky { display: flex; }
	.site-footer { padding-bottom: 100px; }
}

/* ============================================================
   CASE STUDIES — single-card carousel (Octal-style)
   ============================================================ */

.cl-cases-section {
	position: relative;
	background: var(--bg);
	overflow: hidden;
}
.cl-cases-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cl-cases-glow {
	position: absolute;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	filter: blur(140px);
	opacity: 0.4;
	mix-blend-mode: screen;
}
.cl-cases-glow-1 { top: -200px; left: -160px; background: radial-gradient(circle, rgba(255,107,53,0.32), transparent 60%); animation: cl-caps-glow-drift 22s ease-in-out infinite; }
.cl-cases-glow-2 { bottom: -240px; right: -180px; background: radial-gradient(circle, rgba(168,85,247,0.30), transparent 60%); animation: cl-caps-glow-drift 26s ease-in-out -8s infinite; }

.cl-cases-section .cl-container { position: relative; z-index: 1; }

/* Tabs */
.cl-cases-tabs {
	display: flex;
	gap: 10px;
	margin: 0 auto 28px;
	padding: 6px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 18px;
	max-width: max-content;
	flex-wrap: wrap;
	justify-content: center;
}
.cl-cases-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 12px;
	color: var(--text-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.cl-cases-tab:hover { color: var(--text); background: color-mix(in srgb, var(--tn) 8%, transparent); }
.cl-cases-tab.is-active {
	color: var(--text);
	background: color-mix(in srgb, var(--tn) 14%, var(--bg));
	border-color: var(--tn-soft);
	box-shadow: 0 0 0 1px var(--tn-soft) inset;
}
.cl-cases-tab-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tn);
	box-shadow: 0 0 0 0 var(--tn-soft);
}
.cl-cases-tab.is-active .cl-cases-tab-dot { animation: cl-caps-pulse 1.8s ease-out infinite; }
.cl-cases-tab-name { font-weight: 600; letter-spacing: -0.005em; }
.cl-cases-tab-tag {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tn);
	padding: 3px 7px;
	background: var(--tn-faint);
	border: 1px solid var(--tn-soft);
	border-radius: 6px;
}

/* Stage */
.cl-cases-stage {
	position: relative;
	min-height: 540px;
}

/* Slide card */
.cl-case {
	position: relative;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: center;
	padding: 48px;
	background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--bg)));
	border: 1px solid var(--border);
	border-radius: 28px;
	overflow: hidden;
	animation: cl-case-enter 0.5s cubic-bezier(.2,.7,.2,1) both;
}
.cl-case::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(60% 80% at 0% 0%, var(--tn-faint), transparent 60%);
	pointer-events: none;
}
.cl-case::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--tn), transparent);
	background-size: 200% 100%;
	opacity: 0.7;
	animation: cl-cap-topline 5s linear infinite;
}
.cl-case[hidden] { display: none; }
@keyframes cl-case-enter {
	0%   { opacity: 0; transform: translateY(12px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* Mock — phone frame */
.cl-case-mock {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 480px;
}
.cl-case-phone {
	position: relative;
	width: 280px;
	height: 480px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, var(--surface)), var(--bg));
	border: 1px solid var(--border-strong, var(--border));
	border-radius: 36px;
	padding: 14px 12px 14px;
	box-shadow:
		0 30px 60px -28px rgba(0,0,0,0.5),
		0 0 0 1px var(--tn-soft),
		inset 0 0 0 1px color-mix(in srgb, var(--tn) 8%, transparent);
	overflow: hidden;
}
.cl-case-phone::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(80% 60% at 50% 0%, var(--tn-faint), transparent 60%);
	pointer-events: none;
}
.cl-case-phone-notch {
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 22px;
	background: #0A0E14;
	border-radius: 999px;
	z-index: 2;
}
.cl-case-phone-screen {
	position: relative;
	height: 100%;
	background: color-mix(in srgb, var(--surface) 80%, var(--bg));
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cl-case-chat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 36px 14px 12px;
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface) 90%, transparent);
	backdrop-filter: blur(8px);
	z-index: 1;
}
.cl-case-chat-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
	color: var(--bg);
	font-weight: 700;
	font-size: 14px;
}
.cl-case-chat-meta { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.cl-case-chat-meta strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}
.cl-case-chat-meta small {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	color: var(--text-muted);
	letter-spacing: 0.04em;
}
.cl-case-online {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10B981;
	box-shadow: 0 0 0 0 rgba(16,185,129,0.6);
	animation: cl-caps-pulse 1.6s ease-out infinite;
}

.cl-case-chat-thread {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 12px;
	overflow: hidden;
	scroll-behavior: smooth;
}

.cl-case-bubble {
	max-width: 88%;
	padding: 8px 11px;
	border-radius: 14px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--text);
	background: color-mix(in srgb, var(--bg) 70%, var(--surface));
	border: 1px solid var(--border);
	opacity: 0;
	transform: translateY(6px);
	animation: cl-case-bubble-in 0.45s ease-out forwards;
	animation-delay: var(--bd, 0s);
}
@keyframes cl-case-bubble-in {
	to { opacity: 1; transform: translateY(0); }
}
.cl-case-bubble strong { color: var(--text); }

.cl-case-bubble-user {
	align-self: flex-end;
	border-bottom-right-radius: 4px;
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
	color: #FFFFFF;
	border-color: transparent;
}
.cl-case-bubble-user strong { color: #FFFFFF; }

.cl-case-bubble-bot {
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.cl-case-bubble-attach {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	color: var(--text);
}
.cl-case-attach-icon {
	width: 14px; height: 16px;
	background:
		linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--tn) 40%, transparent) 50%) top right / 6px 6px no-repeat,
		color-mix(in srgb, var(--surface) 60%, var(--bg));
	border: 1px solid var(--border);
	border-radius: 2px;
	flex-shrink: 0;
}

.cl-case-bubble-typing {
	align-self: flex-start;
	display: inline-flex;
	gap: 3px;
	padding: 10px 12px;
	border-bottom-left-radius: 4px;
}
.cl-case-bubble-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--text-muted);
	animation: cl-case-typing 1.4s ease-in-out infinite;
}
.cl-case-bubble-typing span:nth-child(2) { animation-delay: 0.2s; }
.cl-case-bubble-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cl-case-typing {
	0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
	40%           { transform: translateY(-3px); opacity: 1;   }
}

.cl-case-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 6px;
}
.cl-case-chip {
	font-size: 11px;
	font-weight: 500;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--tn-faint);
	color: var(--tn);
	border: 1px solid var(--tn-soft);
}

.cl-case-products {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 6px;
}
.cl-case-product {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 6px;
	background: color-mix(in srgb, var(--bg) 60%, var(--surface));
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 11px;
}
.cl-case-product-img {
	width: 32px; height: 32px;
	border-radius: 6px;
	background:
		linear-gradient(135deg, var(--tn) 0%, var(--tn-2) 100%);
	opacity: 0.85;
}
.cl-case-product-name { font-weight: 500; color: var(--text); line-height: 1.2; }
.cl-case-product-row { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; gap: 1px; }
.cl-case-product-row strong { font-size: 11.5px; color: var(--text); }
.cl-case-product-row small { font-size: 9.5px; color: var(--tn); font-family: 'Geist Mono', ui-monospace, monospace; }

.cl-case-progress {
	margin-top: 6px;
	width: 100%;
	height: 4px;
	background: var(--border);
	border-radius: 2px;
	overflow: hidden;
}
.cl-case-progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--tn), var(--tn-2));
	border-radius: 2px;
	animation: cl-case-progress-fill 2.4s ease-in-out infinite;
}
@keyframes cl-case-progress-fill {
	0%, 100% { transform: translateX(-100%); }
	60%, 75% { transform: translateX(0);     }
}

.cl-case-bubble-cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	padding: 7px 12px;
	background: var(--tn);
	color: #FFFFFF;
	border: none;
	border-radius: 8px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 12px -4px var(--tn-soft);
}
.cl-case-bubble-user .cl-case-bubble-cta { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); }
.cl-case-bubble-cta:hover { transform: translateY(-1px); }

.cl-case-chat-input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-top: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface) 90%, transparent);
	font-size: 11px;
	color: var(--text-muted);
}
.cl-case-chat-send {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--tn);
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 0 12px var(--tn-soft);
}

/* Floating result pills next to phone */
.cl-case-mock-pill {
	position: absolute;
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 88%, var(--bg)));
	border: 1px solid var(--tn-soft);
	border-radius: 14px;
	box-shadow: 0 18px 38px -22px var(--tn-soft);
	font-size: 22px;
	font-weight: 700;
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	color: var(--tn);
	letter-spacing: -0.01em;
	z-index: 2;
	animation: cl-case-pill-float 4s ease-in-out infinite;
}
.cl-case-mock-pill small {
	display: block;
	font-family: 'Geist', sans-serif;
	font-style: normal;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--text-muted);
	margin-top: 1px;
}
.cl-case-mock-pill-1 { top: 18%; right: -6px; }
.cl-case-mock-pill-2 { bottom: 14%; left: 0; animation-delay: -2s; }
@keyframes cl-case-pill-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

/* Right-side content */
.cl-case-content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.cl-case-meta {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tn);
}
.cl-case-title {
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--text);
	line-height: 1.18;
	margin: 0;
}
.cl-case-block {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cl-case-block-label {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tn);
}
.cl-case-block p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0;
}

.cl-case-checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 18px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}
.cl-case-checks li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--text);
}
.cl-case-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 999px;
	background: var(--tn-faint);
	color: var(--tn);
	border: 1px solid var(--tn-soft);
}

.cl-case-impact-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 4px;
	padding: 16px 18px;
	background: linear-gradient(135deg, var(--tn-faint), transparent);
	border: 1px solid var(--tn-soft);
	border-radius: 14px;
}
.cl-case-impact-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cl-case-impact-item strong {
	font-family: 'Instrument Serif', serif;
	font-size: 28px;
	font-style: italic;
	font-weight: 400;
	color: var(--tn);
	line-height: 1;
	letter-spacing: -0.01em;
}
.cl-case-impact-item small {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.35;
}

.cl-case-cta-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 6px;
	flex-wrap: wrap;
}
.cl-case-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	background: var(--tn);
	color: #FFFFFF;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -0.005em;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, gap 0.2s ease;
	box-shadow: 0 14px 32px -16px var(--tn-soft);
}
.cl-case-cta:hover { transform: translateY(-1px); gap: 11px; box-shadow: 0 18px 36px -16px var(--tn-soft); }
.cl-case-cta-2 {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text-muted);
	text-decoration: none;
	border-bottom: 1px dashed var(--text-muted);
	padding-bottom: 1px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.cl-case-cta-2:hover { color: var(--tn); border-color: var(--tn); }

/* Controls */
.cl-cases-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 32px;
}
.cl-cases-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text);
	cursor: pointer;
	transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.cl-cases-arrow:hover {
	transform: scale(1.08);
	background: var(--accent, #FF6B35);
	color: #FFFFFF;
	border-color: var(--accent, #FF6B35);
}
.cl-cases-dots {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.cl-cases-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--border);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: width 0.25s ease, background 0.25s ease;
}
.cl-cases-dot.is-active {
	width: 24px;
	border-radius: 4px;
	background: var(--accent, #FF6B35);
}

/* Responsive */
@media (max-width: 1024px) {
	.cl-case {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 32px 24px;
	}
	.cl-case-mock { min-height: 420px; }
	.cl-case-phone { width: 260px; height: 460px; }
	.cl-cases-stage { min-height: 0; }
	.cl-case-checks { grid-template-columns: 1fr; }
	.cl-case-impact-row { grid-template-columns: repeat(3, 1fr); }
	.cl-case-mock-pill-1 { right: 4%; }
	.cl-case-mock-pill-2 { left: 4%; }
}
@media (max-width: 640px) {
	.cl-cases-tabs { gap: 6px; padding: 5px; }
	.cl-cases-tab { padding: 8px 12px; font-size: 12px; }
	.cl-cases-tab-tag { display: none; }
	.cl-case { padding: 24px 18px; border-radius: 22px; }
	.cl-case-phone { width: 240px; height: 420px; }
	.cl-case-impact-row { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
	.cl-case-impact-item strong { font-size: 24px; }
	.cl-case-mock-pill { font-size: 18px; padding: 9px 12px; }
	.cl-case-cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
	.cl-case-cta { justify-content: center; }
	.cl-case-cta-2 { text-align: center; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
	.cl-cases-glow,
	.cl-case::after,
	.cl-cases-tab.is-active .cl-cases-tab-dot,
	.cl-case-online,
	.cl-case-bubble,
	.cl-case-bubble-typing span,
	.cl-case-progress span,
	.cl-case-mock-pill { animation: none !important; }
	.cl-case-bubble { opacity: 1; transform: none; }
	.cl-case-progress span { transform: translateX(0); }
}

/* ========================================================================
   HIRE AI ENGINEERS  ·  patterns/codelab-hire-developers.php
   Trust strip · 3 engagement-model cards · 4 why-us cards · 8 role-roster
   cards · final matching-call banner. Pure CSS visuals, no icon-in-square.
   ======================================================================== */

.cl-hire-section {
	position: relative;
	padding: clamp(80px, 9vw, 140px) 0;
	overflow: hidden;
}

.cl-hire-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.cl-hire-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(110px);
	opacity: 0.45;
	mix-blend-mode: screen;
	will-change: transform, opacity;
}
.cl-hire-glow-1 { top: -180px; left: -120px; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(255,107,53,0.55), transparent 75%); animation: cl-hire-glow-drift 16s ease-in-out infinite alternate; }
.cl-hire-glow-2 { bottom: -200px; right: -120px; width: 580px; height: 580px; background: radial-gradient(closest-side, rgba(34,211,238,0.45), transparent 75%); animation: cl-hire-glow-drift 19s ease-in-out -4s infinite alternate-reverse; }
.cl-hire-glow-3 { top: 38%; left: 42%; width: 460px; height: 460px; background: radial-gradient(closest-side, rgba(168,85,247,0.4), transparent 75%); animation: cl-hire-glow-drift 22s ease-in-out -7s infinite alternate; }
@keyframes cl-hire-glow-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	100% { transform: translate3d(40px, -30px, 0) scale(1.12); }
}
.cl-hire-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.45), transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.45), transparent 70%);
}
.cl-hire-section .cl-container { position: relative; z-index: 1; }

/* ----- Trust strip ----- */
.cl-hire-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px 28px;
	padding: 18px 28px;
	margin: 0 auto 56px;
	max-width: 980px;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
	border: 1px solid rgba(255,255,255,0.10);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.cl-hire-trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 130px;
}
.cl-hire-trust-num {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 700;
	letter-spacing: -0.02em;
	background: linear-gradient(120deg, #FF8E53 0%, #22D3EE 50%, #C084FC 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.cl-hire-trust-num-static {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 700;
}
.cl-hire-trust-label {
	font-size: 12px;
	color: rgba(255,255,255,0.62);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.cl-hire-trust-sep {
	width: 1px;
	height: 32px;
	background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.18), transparent);
}

/* ----- Engagement-model cards ----- */
.cl-hire-models {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.cl-hire-model {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 28px 28px;
	border-radius: 24px;
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
	border: 1px solid rgba(255,255,255,0.10);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform 0.45s cubic-bezier(.2,.8,.2,1), border-color 0.45s ease, box-shadow 0.45s ease;
	overflow: hidden;
}
.cl-hire-model::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--tn-faint), transparent 55%);
	opacity: 0.6;
	pointer-events: none;
}
.cl-hire-model::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 24px;
	pointer-events: none;
	background: radial-gradient(120% 60% at 50% 0%, var(--tn-soft), transparent 55%);
	opacity: 0;
	transition: opacity 0.5s ease;
}
.cl-hire-model:hover { transform: translateY(-6px); border-color: var(--tn-soft); box-shadow: 0 22px 60px rgba(0,0,0,0.45), 0 0 0 1px var(--tn-soft); }
.cl-hire-model:hover::after { opacity: 1; }
.cl-hire-model > * { position: relative; z-index: 1; }

.cl-hire-model-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--tn-soft);
	border: 1px solid var(--tn-soft);
	color: var(--tn-2);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	width: fit-content;
}
.cl-hire-model-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 6px 12px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
	color: #0B0B0E;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: 0 8px 22px var(--tn-soft);
	z-index: 2;
}
.cl-hire-model-featured {
	border-color: var(--tn-soft);
	background: linear-gradient(180deg, rgba(255,142,83,0.10), rgba(255,255,255,0.015));
	box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 0 0 1px var(--tn-soft);
	transform: scale(1.02);
}
.cl-hire-model-featured::before { opacity: 1; }
.cl-hire-model-featured:hover { transform: translateY(-6px) scale(1.02); }

.cl-hire-model-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 200px;
	margin: 22px auto 22px;
	color: var(--tn);
}
.cl-hire-rate-pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(0,0,0,0.55);
	border: 1px solid var(--tn-soft);
	color: var(--tn-2);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.cl-hire-model-title {
	font-family: 'Instrument Serif', serif;
	font-size: clamp(26px, 2.4vw, 32px);
	line-height: 1.1;
	margin: 0 0 10px;
	color: #fff;
	font-weight: 400;
}
.cl-hire-model-desc {
	color: rgba(255,255,255,0.72);
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 18px;
}
.cl-hire-model-list {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cl-hire-model-list li {
	position: relative;
	padding-left: 24px;
	color: rgba(255,255,255,0.85);
	font-size: 14px;
}
.cl-hire-model-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--tn-soft);
	color: var(--tn-2);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cl-hire-model-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 12px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
	margin-top: auto;
}
.cl-hire-model-cta:hover { background: var(--tn-soft); border-color: var(--tn-soft); color: var(--tn-2); transform: translateY(-2px); }
.cl-hire-model-cta-primary {
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
	border-color: transparent;
	color: #0B0B0E;
	box-shadow: 0 12px 30px var(--tn-soft);
}
.cl-hire-model-cta-primary:hover { color: #0B0B0E; transform: translateY(-3px); box-shadow: 0 16px 36px var(--tn-soft); }

/* Engagement visual: Clock (Hourly) */
.cl-hire-clock {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.cl-hire-clock-face {
	position: relative;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, var(--tn-soft), rgba(0,0,0,0.55) 75%);
	border: 2px solid var(--tn-soft);
	box-shadow: 0 0 0 4px rgba(255,255,255,0.04), 0 12px 30px rgba(0,0,0,0.4);
}
.cl-hire-clock-tick {
	position: absolute;
	top: 6px;
	left: 50%;
	width: 2px;
	height: 8px;
	background: var(--tn);
	transform-origin: 50% 60px;
	transform: translateX(-50%) rotate(var(--r));
	opacity: 0.55;
}
.cl-hire-clock-hour, .cl-hire-clock-min, .cl-hire-clock-sec {
	position: absolute;
	left: 50%;
	bottom: 50%;
	transform-origin: 50% 100%;
	border-radius: 4px;
	background: var(--tn-2);
}
.cl-hire-clock-hour { width: 4px; height: 32px; transform: translateX(-50%) rotate(40deg); animation: cl-hire-clock-spin-h 60s linear infinite; }
.cl-hire-clock-min  { width: 3px; height: 46px; transform: translateX(-50%) rotate(190deg); animation: cl-hire-clock-spin-m 30s linear infinite; }
.cl-hire-clock-sec  { width: 2px; height: 52px; background: #fff; animation: cl-hire-clock-spin-s 6s linear infinite; }
.cl-hire-clock-center {
	position: absolute;
	top: 50%; left: 50%;
	width: 10px; height: 10px;
	background: var(--tn);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 3px rgba(0,0,0,0.6);
}
@keyframes cl-hire-clock-spin-h { from { transform: translateX(-50%) rotate(40deg); }   to { transform: translateX(-50%) rotate(400deg); } }
@keyframes cl-hire-clock-spin-m { from { transform: translateX(-50%) rotate(190deg); }  to { transform: translateX(-50%) rotate(550deg); } }
@keyframes cl-hire-clock-spin-s { from { transform: translateX(-50%) rotate(0deg); }    to { transform: translateX(-50%) rotate(360deg); } }

/* Engagement visual: Calendar (Monthly) */
.cl-hire-cal {
	width: 200px;
	padding: 10px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
	border: 1px solid var(--tn-soft);
	box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.cl-hire-cal-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 8px;
	border-bottom: 1px dashed rgba(255,255,255,0.10);
	margin-bottom: 8px;
}
.cl-hire-cal-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.cl-hire-cal-dot:first-child { background: var(--tn); }
.cl-hire-cal-month { margin-left: auto; font-family: 'Geist Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.6); }
.cl-hire-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.cl-hire-cal-cell {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	font-family: 'Geist Mono', monospace;
	font-size: 10px;
	color: rgba(255,255,255,0.45);
	background: rgba(255,255,255,0.025);
}
.cl-hire-cal-on {
	background: var(--tn-soft);
	color: var(--tn-2);
	font-weight: 700;
	box-shadow: 0 0 0 1px var(--tn-soft) inset;
	animation: cl-hire-cal-pulse 3.6s ease-in-out infinite;
}
.cl-hire-cal-on:nth-child(7n+2) { animation-delay: 0.1s; }
.cl-hire-cal-on:nth-child(7n+3) { animation-delay: 0.2s; }
.cl-hire-cal-on:nth-child(7n+4) { animation-delay: 0.3s; }
.cl-hire-cal-on:nth-child(7n+5) { animation-delay: 0.4s; }
.cl-hire-cal-off { opacity: 0.32; }
@keyframes cl-hire-cal-pulse {
	0%, 100% { box-shadow: 0 0 0 1px var(--tn-soft) inset; transform: scale(1); }
	50%      { box-shadow: 0 0 0 2px var(--tn) inset, 0 0 12px var(--tn-soft); transform: scale(1.04); }
}

/* Engagement visual: Pod (Team) */
.cl-hire-pod {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--tn);
}
.cl-hire-pod-svg {
	width: 200px;
	height: auto;
}
.cl-hire-pod-svg .cl-hire-pod-links line {
	stroke-dashoffset: 12;
	animation: cl-hire-pod-flow 4s linear infinite;
}
.cl-hire-pod-svg .cl-hire-pod-links line:nth-child(2) { animation-delay: 0.5s; }
.cl-hire-pod-svg .cl-hire-pod-links line:nth-child(3) { animation-delay: 1.0s; }
.cl-hire-pod-svg .cl-hire-pod-links line:nth-child(4) { animation-delay: 1.5s; }
@keyframes cl-hire-pod-flow {
	from { stroke-dashoffset: 12; }
	to   { stroke-dashoffset: 0;  }
}
.cl-hire-pod-svg .cl-hire-pod-nodes > g { transform-box: fill-box; transform-origin: center; animation: cl-hire-pod-bob 4s ease-in-out infinite; }
.cl-hire-pod-svg .cl-hire-pod-nodes > g:nth-child(1) { animation-delay: 0s; }
.cl-hire-pod-svg .cl-hire-pod-nodes > g:nth-child(2) { animation-delay: 0.4s; }
.cl-hire-pod-svg .cl-hire-pod-nodes > g:nth-child(3) { animation-delay: 0.8s; }
.cl-hire-pod-svg .cl-hire-pod-nodes > g:nth-child(4) { animation-delay: 1.2s; }
.cl-hire-pod-svg .cl-hire-pod-nodes > g:nth-child(5) { animation-delay: 1.6s; }
@keyframes cl-hire-pod-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}

/* ----- Why-hire grid ----- */
.cl-hire-why-title {
	font-family: 'Instrument Serif', serif;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.05;
	margin: 14px 0 0;
	color: #fff;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.cl-hire-why-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}
.cl-hire-why {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 22px 26px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
	border: 1px solid rgba(255,255,255,0.10);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform 0.45s cubic-bezier(.2,.8,.2,1), border-color 0.45s ease, box-shadow 0.45s ease;
	overflow: hidden;
}
.cl-hire-why::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 22px;
	pointer-events: none;
	background: radial-gradient(120% 60% at 50% 0%, var(--tn-soft), transparent 60%);
	opacity: 0;
	transition: opacity 0.5s ease;
}
.cl-hire-why:hover { transform: translateY(-6px); border-color: var(--tn-soft); box-shadow: 0 22px 60px rgba(0,0,0,0.45); }
.cl-hire-why:hover::after { opacity: 1; }
.cl-hire-why > * { position: relative; z-index: 1; }
.cl-hire-why-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 130px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--tn-faint), rgba(0,0,0,0.4));
	border: 1px solid var(--tn-soft);
	color: var(--tn);
	overflow: hidden;
	position: relative;
}
.cl-hire-why h4 {
	font-family: 'Geist', sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 4px 0 0;
}
.cl-hire-why p {
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255,255,255,0.70);
	margin: 0;
}

/* Why-visual #1: Onboard timeline */
.cl-hire-onboard {
	position: relative;
	width: 86%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cl-hire-onboard-line {
	position: absolute;
	left: 12px;
	right: 12px;
	top: 50%;
	height: 2px;
	background: linear-gradient(to right, var(--tn-soft), var(--tn));
	transform: translateY(-1px);
	overflow: hidden;
}
.cl-hire-onboard-line::after {
	content: "";
	position: absolute;
	left: -30%;
	top: 0;
	width: 30%;
	height: 100%;
	background: linear-gradient(to right, transparent, #fff, transparent);
	animation: cl-hire-onboard-shimmer 2.4s ease-in-out infinite;
}
@keyframes cl-hire-onboard-shimmer {
	0%, 100% { left: -30%; }
	50%      { left: 100%; }
}
.cl-hire-onboard-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.cl-hire-os-dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
	color: #0B0B0E;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 4px rgba(0,0,0,0.6), 0 0 14px var(--tn-soft);
	animation: cl-hire-os-pop 2.4s ease-in-out infinite;
}
.cl-hire-onboard-step.cl-hire-os-2 .cl-hire-os-dot { animation-delay: 0.4s; }
.cl-hire-onboard-step.cl-hire-os-3 .cl-hire-os-dot { animation-delay: 0.8s; }
.cl-hire-onboard-step small {
	font-family: 'Geist Mono', monospace;
	font-size: 9px;
	color: rgba(255,255,255,0.7);
	white-space: nowrap;
}
@keyframes cl-hire-os-pop {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.18); }
}

/* Why-visual #2: Stack chips */
.cl-hire-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	align-items: center;
	max-width: 90%;
}
.cl-hire-stack-chip {
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--tn-soft);
	border: 1px solid var(--tn-soft);
	color: var(--tn-2);
	font-family: 'Geist Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	opacity: 0;
	transform: translateY(8px);
	animation: cl-hire-chip-in 0.5s cubic-bezier(.2,.8,.2,1) forwards, cl-hire-chip-pulse 3s ease-in-out infinite;
	animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.6s);
}
@keyframes cl-hire-chip-in {
	to { opacity: 1; transform: translateY(0); }
}
@keyframes cl-hire-chip-pulse {
	0%, 100% { box-shadow: 0 0 0 0 transparent; }
	50%      { box-shadow: 0 0 0 4px var(--tn-soft); }
}

/* Why-visual #3: Trial meter */
.cl-hire-trial {
	width: 86%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: stretch;
}
.cl-hire-trial-meter {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--tn-soft);
	overflow: hidden;
}
.cl-hire-trial-fill {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, var(--tn), var(--tn-2));
	border-radius: 999px;
	animation: cl-hire-trial-fill 4.2s cubic-bezier(.4,0,.2,1) infinite;
	transform-origin: left center;
}
@keyframes cl-hire-trial-fill {
	0%       { transform: scaleX(0); }
	60%      { transform: scaleX(1); }
	75%      { transform: scaleX(1); }
	100%     { transform: scaleX(0); }
}
.cl-hire-trial-labels {
	display: flex;
	justify-content: space-between;
	font-family: 'Geist Mono', monospace;
	font-size: 9px;
	color: rgba(255,255,255,0.6);
}
.cl-hire-trial-now { color: var(--tn-2); font-weight: 700; }
.cl-hire-trial-pill {
	align-self: center;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--tn-soft);
	color: var(--tn-2);
	font-family: 'Geist Mono', monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-top: 2px;
}

/* Why-visual #4: Pipeline */
.cl-hire-pipeline {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	width: 92%;
	justify-content: center;
}
.cl-hire-pipe-node {
	padding: 6px 9px;
	border-radius: 8px;
	background: var(--tn-soft);
	border: 1px solid var(--tn-soft);
	color: var(--tn-2);
	font-family: 'Geist Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	animation: cl-hire-pipe-pop 3.2s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
@keyframes cl-hire-pipe-pop {
	0%, 70%, 100% { box-shadow: 0 0 0 0 transparent; transform: translateY(0); }
	35%           { box-shadow: 0 0 12px var(--tn-soft); transform: translateY(-3px); }
}
.cl-hire-pipe-arrow {
	width: 14px;
	height: 2px;
	background: var(--tn);
	position: relative;
	flex-shrink: 0;
}
.cl-hire-pipe-arrow::after {
	content: "";
	position: absolute;
	right: -1px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--tn);
	border-right: 2px solid var(--tn);
	transform: translateY(-50%) rotate(45deg);
}
.cl-hire-pipe-packet {
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 12px #fff;
	transform: translate(-4px, -50%);
	animation: cl-hire-pipe-packet 4.2s linear infinite;
}
@keyframes cl-hire-pipe-packet {
	0%   { left: 5%;  opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { left: 95%; opacity: 0; }
}

/* ----- Developer roster ----- */
.cl-hire-roster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
.cl-hire-role {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px 18px 18px;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
	border: 1px solid rgba(255,255,255,0.10);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
	overflow: hidden;
}
.cl-hire-role::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(to right, var(--tn), var(--tn-2));
	opacity: 0.7;
}
.cl-hire-role:hover { transform: translateY(-4px); border-color: var(--tn-soft); box-shadow: 0 16px 38px rgba(0,0,0,0.4); }
.cl-hire-role-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.cl-hire-role-avatar {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
	color: #0B0B0E;
	font-family: 'Instrument Serif', serif;
	font-size: 22px;
	font-weight: 600;
	box-shadow: 0 6px 18px var(--tn-soft);
	flex-shrink: 0;
}
.cl-hire-role-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(16,185,129,0.12);
	border: 1px solid rgba(16,185,129,0.32);
	color: #34D399;
	font-family: 'Geist Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.cl-hire-role-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #34D399;
	box-shadow: 0 0 0 0 rgba(52,211,153,0.55);
	animation: cl-hire-role-pulse 2s ease-out infinite;
}
@keyframes cl-hire-role-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(52,211,153,0.55); }
	100% { box-shadow: 0 0 0 8px rgba(52,211,153,0);    }
}
.cl-hire-role-title {
	font-family: 'Geist', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	margin: 0;
	letter-spacing: -0.01em;
}
.cl-hire-role-skills {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.cl-hire-role-chip {
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.10);
	color: rgba(255,255,255,0.78);
	font-family: 'Geist Mono', monospace;
	font-size: 10px;
	font-weight: 600;
}
.cl-hire-role:hover .cl-hire-role-chip { background: var(--tn-faint); border-color: var(--tn-soft); color: var(--tn-2); }
.cl-hire-role-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.10);
	color: var(--tn-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease;
	width: fit-content;
}
.cl-hire-role-cta:hover { background: var(--tn-soft); color: var(--tn-2); }

/* ----- Final CTA banner ----- */
.cl-hire-banner {
	position: relative;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 30px;
	align-items: center;
	margin-top: 80px;
	padding: 44px 44px;
	border-radius: 28px;
	background:
		radial-gradient(120% 80% at 0% 0%, rgba(255,142,83,0.22), transparent 55%),
		radial-gradient(120% 80% at 100% 100%, rgba(34,211,238,0.22), transparent 55%),
		linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
	border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	overflow: hidden;
}
.cl-hire-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 80% at 50% 100%, rgba(168,85,247,0.18), transparent 65%);
	pointer-events: none;
}
.cl-hire-banner > * { position: relative; z-index: 1; }
.cl-hire-banner-spark {
	position: absolute;
	top: 24px;
	right: 28px;
	font-size: 22px;
	color: rgba(255,142,83,0.85);
	animation: cl-hire-spark 2.4s ease-in-out infinite;
}
@keyframes cl-hire-spark {
	0%, 100% { opacity: 0.4; transform: scale(0.9) rotate(0deg); }
	50%      { opacity: 1;   transform: scale(1.2) rotate(20deg); }
}
.cl-hire-banner-meta {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.78);
	font-family: 'Geist Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.cl-hire-banner h3 {
	font-family: 'Instrument Serif', serif;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.05;
	color: #fff;
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.cl-hire-banner p {
	color: rgba(255,255,255,0.74);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 20px;
	max-width: 560px;
}
.cl-hire-banner-trust {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px dashed rgba(255,255,255,0.14);
	font-family: 'Geist Mono', monospace;
	font-size: 12px;
	color: rgba(255,255,255,0.78);
}
.cl-hire-banner-trust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cl-hire-banner-check {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(52,211,153,0.18);
	border: 1px solid rgba(52,211,153,0.38);
	color: #34D399;
	font-size: 11px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cl-hire-banner-ctas {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}
.cl-hire-banner-ctas .cl-btn-primary,
.cl-hire-banner-ctas .cl-btn-secondary {
	justify-content: center;
	text-align: center;
}

/* ----- Responsive ----- */
@media (max-width: 1080px) {
	.cl-hire-models { grid-template-columns: 1fr; }
	.cl-hire-model-featured { transform: none; }
	.cl-hire-model-featured:hover { transform: translateY(-6px); }
	.cl-hire-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-hire-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cl-hire-banner { grid-template-columns: 1fr; padding: 36px 28px; }
}
@media (max-width: 640px) {
	.cl-hire-trust { flex-direction: column; padding: 20px; gap: 12px; border-radius: 24px; }
	.cl-hire-trust-sep { display: none; }
	.cl-hire-why-grid { grid-template-columns: 1fr; }
	.cl-hire-roster { grid-template-columns: 1fr; }
	.cl-hire-model { padding: 26px 22px 22px; }
	.cl-hire-model-visual { height: 180px; }
	.cl-hire-banner { padding: 28px 22px; border-radius: 22px; }
	.cl-hire-banner-trust { gap: 8px 18px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.cl-hire-glow,
	.cl-hire-clock-hour,
	.cl-hire-clock-min,
	.cl-hire-clock-sec,
	.cl-hire-cal-on,
	.cl-hire-pod-svg .cl-hire-pod-links line,
	.cl-hire-pod-svg .cl-hire-pod-nodes > g,
	.cl-hire-onboard-line::after,
	.cl-hire-os-dot,
	.cl-hire-stack-chip,
	.cl-hire-trial-fill,
	.cl-hire-pipe-node,
	.cl-hire-pipe-packet,
	.cl-hire-banner-spark,
	.cl-hire-role-status-dot { animation: none !important; }
	.cl-hire-stack-chip { opacity: 1; transform: none; }
	.cl-hire-trial-fill { transform: scaleX(1); }
}

/* ============================================================
   VIBE CODE MCP — Case Studies mock (IDE/PR/CI instead of chatbot)
   Pattern: patterns/codelab-vibe-case-studies.php
   ============================================================ */

.cl-vibe-cases .cl-vibe-case-device { box-shadow: 0 26px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset; }
.cl-vibe-cases .cl-vibe-screen { background: linear-gradient(180deg, rgba(15,17,25,0.92), rgba(10,11,14,0.92)); }

.cl-vibe-pr,
.cl-vibe-pipeline,
.cl-vibe-sql,
.cl-vibe-triage {
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	overflow: hidden;
}

/* PR mock */
.cl-vibe-pr-files { display: flex; flex-direction: column; gap: 8px; }
.cl-vibe-pr-file {
	display: grid;
	grid-template-columns: 18px 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 9px 10px;
	border-radius: 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.10);
	color: rgba(255,255,255,0.85);
	opacity: 0;
	transform: translateY(10px);
	animation: cl-vibe-in 0.45s ease-out forwards;
	animation-delay: var(--bd, 0s);
}
.cl-vibe-pr-file-ic {
	width: 12px; height: 12px; border-radius: 3px;
	background: linear-gradient(135deg, var(--tn), var(--tn-2));
	box-shadow: 0 8px 18px var(--tn-soft);
}
.cl-vibe-pr-file-name { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; color: rgba(255,255,255,0.80); }
.cl-vibe-pr-file-stat { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: var(--tn-2); opacity: 0.9; }
.cl-vibe-pr-steps { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.cl-vibe-step {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 12px;
	background: rgba(0,0,0,0.26);
	border: 1px dashed rgba(255,255,255,0.14);
	color: rgba(255,255,255,0.72);
	font-size: 12px;
	opacity: 0;
	transform: translateY(10px);
	animation: cl-vibe-in 0.45s ease-out forwards;
	animation-delay: var(--bd, 0s);
}
.cl-vibe-step-dot {
	width: 9px; height: 9px; border-radius: 50%;
	background: rgba(255,255,255,0.20);
	box-shadow: 0 0 0 0 transparent;
}
.cl-vibe-step-done .cl-vibe-step-dot { background: rgba(52,211,153,0.95); box-shadow: 0 0 0 6px rgba(52,211,153,0.0); }
.cl-vibe-step-doing .cl-vibe-step-dot { background: var(--tn); animation: cl-vibe-pulse 1.8s ease-out infinite; }
.cl-vibe-step-todo .cl-vibe-step-dot { background: rgba(255,255,255,0.18); }
.cl-vibe-pr-cta,
.cl-vibe-pipe-cta {
	margin-top: auto;
	padding: 10px 12px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--tn) 14%, rgba(0,0,0,0.25));
	border: 1px solid var(--tn-soft);
	color: var(--tn-2);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Pipeline mock */
.cl-vibe-pipe-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 9px 10px;
	border-radius: 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.10);
	opacity: 0;
	transform: translateY(10px);
	animation: cl-vibe-in 0.45s ease-out forwards;
	animation-delay: var(--bd, 0s);
}
.cl-vibe-pipe-name { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; color: rgba(255,255,255,0.75); }
.cl-vibe-pipe-bar {
	height: 8px; border-radius: 999px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.10);
	overflow: hidden;
	position: relative;
}
.cl-vibe-pipe-bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tn), var(--tn-2));
	box-shadow: 0 0 18px var(--tn-soft);
	transform-origin: left center;
	animation: cl-vibe-fill 3.2s ease-in-out infinite;
}
.cl-vibe-pipe-row:nth-child(1) .cl-vibe-pipe-bar span { animation-delay: 0.0s; }
.cl-vibe-pipe-row:nth-child(2) .cl-vibe-pipe-bar span { animation-delay: 0.2s; }
.cl-vibe-pipe-row:nth-child(3) .cl-vibe-pipe-bar span { animation-delay: 0.4s; }
.cl-vibe-pipe-row:nth-child(4) .cl-vibe-pipe-bar span { animation-delay: 0.6s; }
.cl-vibe-pipe-pct { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: rgba(255,255,255,0.72); }

/* SQL mock */
.cl-vibe-sql-query {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	line-height: 1.5;
	color: rgba(255,255,255,0.78);
	background: rgba(0,0,0,0.35);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 14px;
	padding: 10px 10px;
	position: relative;
	overflow: hidden;
}
.cl-vibe-sql-query::after {
	content: '';
	position: absolute;
	top: 0; left: -40%;
	width: 40%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
	animation: cl-vibe-scan 2.6s ease-in-out infinite;
}
.cl-vibe-sql-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cl-vibe-sql-kpi {
	padding: 10px 10px;
	border-radius: 14px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.10);
	opacity: 0;
	transform: translateY(10px);
	animation: cl-vibe-in 0.45s ease-out forwards;
	animation-delay: var(--bd, 0s);
}
.cl-vibe-sql-kpi small { display: block; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.06em; }
.cl-vibe-sql-kpi strong { display: block; margin-top: 4px; font-size: 14px; color: var(--tn-2); }
.cl-vibe-sql-note {
	margin-top: auto;
	padding: 9px 10px;
	border-radius: 14px;
	background: rgba(52,211,153,0.10);
	border: 1px solid rgba(52,211,153,0.26);
	color: rgba(255,255,255,0.78);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
}

/* Triage mock */
.cl-vibe-triage-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.10);
	opacity: 0;
	transform: translateY(10px);
	animation: cl-vibe-in 0.45s ease-out forwards;
	animation-delay: var(--bd, 0s);
}
.cl-vibe-triage-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tn); box-shadow: 0 0 0 6px transparent; }
.cl-vibe-triage-ticket .cl-vibe-triage-dot { background: var(--tn); }
.cl-vibe-triage-logs .cl-vibe-triage-dot { background: #22D3EE; }
.cl-vibe-triage-repo .cl-vibe-triage-dot { background: #A855F7; }
.cl-vibe-triage-pr .cl-vibe-triage-dot { background: #34D399; }
.cl-vibe-triage-txt { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: rgba(255,255,255,0.78); }
.cl-vibe-triage-pill {
	margin-top: auto;
	padding: 10px 12px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--tn) 12%, rgba(0,0,0,0.22));
	border: 1px solid var(--tn-soft);
	color: var(--tn-2);
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

@keyframes cl-vibe-in { to { opacity: 1; transform: translateY(0); } }
@keyframes cl-vibe-pulse {
	0%   { box-shadow: 0 0 0 0 var(--tn-soft); }
	100% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
}
@keyframes cl-vibe-fill {
	0%, 100% { transform: scaleX(0.85); filter: saturate(1); }
	50%      { transform: scaleX(1);    filter: saturate(1.2); }
}
@keyframes cl-vibe-scan { 0%, 100% { left: -40%; } 50% { left: 110%; } }

@media (prefers-reduced-motion: reduce) {
	.cl-vibe-sql-query::after,
	.cl-vibe-pipe-bar span,
	.cl-vibe-step-doing .cl-vibe-step-dot { animation: none !important; }
	.cl-vibe-pr-file,
	.cl-vibe-step,
	.cl-vibe-pipe-row,
	.cl-vibe-sql-kpi,
	.cl-vibe-triage-row { opacity: 1; transform: none; }
}

/* ——— Healthcare vertical landing (Octal-style sections) ——— */
.cl-healthcare-hero .cl-hero-orb-1 { opacity: 0.55; filter: hue-rotate(-12deg); }

.cl-healthcare-intro-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px 40px;
	align-items: start;
}
@media (max-width: 1024px) {
	.cl-healthcare-intro-grid { grid-template-columns: 1fr; }
}

.cl-healthcare-intro-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 520px) {
	.cl-healthcare-intro-stats { grid-template-columns: 1fr; }
}

.cl-healthcare-stat-pill {
	position: relative;
	padding: 20px 18px 18px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.10);
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.cl-healthcare-stat-pill::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), #22D3EE, var(--accent));
	background-size: 200% 100%;
	animation: cl-hc-pill-line 5s linear infinite;
	opacity: 0.85;
}
.cl-healthcare-stat-pill:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -22px rgba(255, 107, 53, 0.22);
	border-color: rgba(255, 107, 53, 0.35);
}
.cl-healthcare-stat-value {
	display: block;
	font-size: clamp(28px, 4vw, 36px);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--text);
	line-height: 1.1;
}
.cl-healthcare-stat-suffix {
	font-size: 22px;
	font-weight: 600;
	color: var(--accent);
	margin-left: 2px;
}
.cl-healthcare-stat-label {
	display: block;
	margin-top: 8px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--text-muted);
	line-height: 1.45;
}
.cl-healthcare-stat-static {
	font-size: clamp(26px, 3.5vw, 32px);
}

@keyframes cl-hc-pill-line {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.cl-healthcare-stat-pill::before { animation: none; background-position: 50% 50%; }
}

.cl-healthcare-stat-cta {
	position: relative;
	overflow: hidden;
}
.cl-healthcare-stat-cta::before {
	content: "";
	position: absolute;
	inset: -40% -20%;
	background: radial-gradient(ellipse at 30% 40%, rgba(34, 211, 238, 0.12), transparent 55%),
		radial-gradient(ellipse at 70% 60%, rgba(255, 107, 53, 0.10), transparent 50%);
	pointer-events: none;
}
.cl-healthcare-stat-inner {
	position: relative;
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 24px 52px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.10);
}
.cl-healthcare-stat-kicker {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--accent);
	margin: 0 0 12px;
}
.cl-healthcare-stat-lede {
	margin: 0 0 12px;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--text);
}
.cl-healthcare-stat-sub {
	margin: 0 0 24px;
	color: var(--text-muted);
	font-size: 0.95rem;
}
.cl-healthcare-stat-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	align-items: center;
}

.cl-healthcare-tech-grid {
	max-width: 920px;
	margin: 0 auto;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
	.cl-healthcare-tech-grid { grid-template-columns: 1fr !important; }
}

.cl-healthcare-why-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
@media (max-width: 1024px) {
	.cl-healthcare-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.cl-healthcare-why-grid { grid-template-columns: 1fr; }
}

.cl-healthcare-why-card {
	position: relative;
	padding: 22px 20px 24px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.10);
	min-height: 160px;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.cl-healthcare-why-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 48px -24px var(--tn-soft);
	border-color: rgba(255, 255, 255, 0.16);
}
.cl-healthcare-why-num {
	position: absolute;
	top: 14px;
	right: 16px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.45);
}
.cl-healthcare-why-card:hover .cl-healthcare-why-num { color: var(--tn); }
.cl-healthcare-why-card h4 {
	margin: 0 0 10px;
	padding-right: 36px;
	font-size: 1.05rem;
	color: var(--text);
}
.cl-healthcare-why-card p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-muted);
}
.cl-healthcare-why-bar {
	display: block;
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--tn), transparent);
	opacity: 0.55;
}

.cl-chatbot-vertical-more {
	margin: 12px 0 0;
}
.cl-chatbot-vertical-more .cl-cta {
	font-size: 0.88rem;
}

/* ——— Why Coderlab hub + about subpages (Octal-style destinations) ——— */
.cl-why-hub-stats {
	padding-top: 0;
	padding-bottom: 24px;
}
.cl-why-stats-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 900px) {
	.cl-why-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.cl-why-stats-row { grid-template-columns: 1fr; }
}
.cl-why-stat {
	position: relative;
	padding: 22px 20px 20px;
	border-radius: 18px;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
}
.cl-why-stat::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--tn), transparent);
	opacity: 0.75;
	animation: cl-why-stat-line 4.5s linear infinite;
}
@keyframes cl-why-stat-line {
	0% { transform: translateX(-30%); }
	100% { transform: translateX(30%); }
}
.cl-why-stat-num {
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--text);
}
.cl-why-stat-suffix {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--tn);
	margin-left: 2px;
}
.cl-why-stat-label {
	display: block;
	margin-top: 8px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.cl-why-know {
	position: relative;
}
.cl-why-know-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}
@media (max-width: 900px) {
	.cl-why-know-grid { grid-template-columns: 1fr; }
}
.cl-why-know-visual {
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cl-why-know-scene {
	position: relative;
	width: min(100%, 320px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, var(--tn-faint), transparent 55%);
}
.cl-why-know-orbit {
	position: absolute;
	inset: 8%;
	border: 1px dashed rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	animation: cl-why-know-spin 28s linear infinite;
}
.cl-why-know-core {
	position: absolute;
	inset: 38%;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), #22d3ee);
	opacity: 0.85;
	filter: blur(0.5px);
}
.cl-why-know-ring {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 72%;
	height: 72%;
	margin: -36% 0 0 -36%;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.cl-why-know-ring-2 {
	width: 92%;
	height: 92%;
	margin: -46% 0 0 -46%;
	border-style: dotted;
	opacity: 0.5;
	animation: cl-why-know-spin 18s linear infinite reverse;
}
.cl-why-know-dot {
	position: absolute;
	left: 50%;
	top: 10%;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 20px var(--accent);
	animation: cl-why-know-orbit-dot 6s linear infinite;
}
@keyframes cl-why-know-spin {
	to { transform: rotate(360deg); }
}
@keyframes cl-why-know-orbit-dot {
	0% { transform: rotate(0deg) translateX(118px) rotate(0deg); }
	100% { transform: rotate(360deg) translateX(118px) rotate(-360deg); }
}
@media (max-width: 480px) {
	@keyframes cl-why-know-orbit-dot {
		0% { transform: rotate(0deg) translateX(86px) rotate(0deg); }
		100% { transform: rotate(360deg) translateX(86px) rotate(-360deg); }
	}
}
.cl-why-vm-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
@media (max-width: 768px) {
	.cl-why-vm-grid { grid-template-columns: 1fr; }
}
.cl-why-vm-card {
	position: relative;
	padding: 28px 26px 26px;
	border-radius: 18px;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 24px 48px -28px var(--tn-soft);
}
.cl-why-vm-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--tn), transparent);
	opacity: 0.7;
}
.cl-why-vm-label {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tn);
}
.cl-why-vm-card h3 {
	margin: 12px 0 10px;
	font-size: 1.2rem;
	color: var(--text);
}
.cl-why-vm-card p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--text-muted);
}
.cl-why-approach-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 1024px) {
	.cl-why-approach-grid { grid-template-columns: 1fr; }
}
.cl-why-approach-card {
	position: relative;
	padding: 24px 22px 22px;
	padding-top: 52px;
	border-radius: 18px;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.cl-why-approach-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -24px var(--tn-soft);
	border-color: rgba(255, 255, 255, 0.14);
}
.cl-why-approach-num {
	position: absolute;
	top: 16px;
	right: 18px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.45);
}
.cl-why-approach-card:hover .cl-why-approach-num {
	color: var(--tn);
}
.cl-why-approach-visual {
	height: 100px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: radial-gradient(circle at 50% 20%, var(--tn-faint), transparent 65%);
}
.cl-why-ap-v1 {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	height: 56px;
}
.cl-why-ap-v1 span {
	width: 14px;
	border-radius: 6px 6px 2px 2px;
	background: linear-gradient(180deg, var(--tn-2), var(--tn));
	animation: cl-why-ap-bars 1.4s ease-in-out infinite;
}
.cl-why-ap-v1 span:nth-child(2) { animation-delay: 0.15s; height: 70%; }
.cl-why-ap-v1 span:nth-child(3) { animation-delay: 0.3s; height: 55%; }
@keyframes cl-why-ap-bars {
	0%, 100% { height: 28%; opacity: 0.7; }
	50% { height: 100%; opacity: 1; }
}
.cl-why-ap-v2 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	width: 100px;
}
.cl-why-ap-v2 i {
	display: block;
	aspect-ratio: 1;
	border-radius: 8px;
	border: 1px solid var(--tn-soft);
	background: rgba(255, 255, 255, 0.04);
	animation: cl-why-ap-pulse 2.2s ease-in-out infinite;
}
.cl-why-ap-v2 i:nth-child(2) { animation-delay: 0.2s; }
.cl-why-ap-v2 i:nth-child(3) { animation-delay: 0.4s; }
.cl-why-ap-v2 i:nth-child(4) { animation-delay: 0.6s; }
@keyframes cl-why-ap-pulse {
	0%, 100% { box-shadow: 0 0 0 0 var(--tn-soft); }
	50% { box-shadow: 0 0 0 6px transparent; }
}
.cl-why-ap-v3 {
	width: 100%;
	max-width: 140px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}
.cl-why-ap-bar {
	display: block;
	height: 100%;
	width: 35%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--tn), var(--tn-2));
	animation: cl-why-ap-fill 2.8s ease-in-out infinite;
}
@keyframes cl-why-ap-fill {
	0% { transform: translateX(-100%); width: 40%; }
	50% { width: 72%; }
	100% { transform: translateX(220%); width: 40%; }
}
.cl-why-approach-card h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	color: var(--text);
}
.cl-why-approach-card p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-muted);
}
.cl-why-explore-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
@media (max-width: 640px) {
	.cl-why-explore-grid { grid-template-columns: 1fr; }
}
.cl-why-explore-tile {
	position: relative;
	display: block;
	padding: 22px 22px 20px;
	padding-top: 48px;
	border-radius: 18px;
	text-decoration: none;
	color: inherit;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.cl-why-explore-tile:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 48px -24px var(--tn-soft);
	border-color: rgba(255, 255, 255, 0.16);
}
.cl-why-explore-tile::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--tn), transparent);
	opacity: 0.65;
	animation: cl-why-stat-line 5s linear infinite;
}
.cl-why-explore-num {
	position: absolute;
	top: 14px;
	right: 16px;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.45);
}
.cl-why-explore-tile:hover .cl-why-explore-num {
	color: var(--tn);
}
.cl-why-explore-visual {
	height: 72px;
	margin-bottom: 12px;
	border-radius: 12px;
	background: radial-gradient(circle at 30% 30%, var(--tn-faint), transparent 70%);
}
.cl-why-ex-v1 {
	background-image: linear-gradient(105deg, transparent 40%, var(--tn-soft) 50%, transparent 60%);
	background-size: 200% 100%;
	animation: cl-why-ex-shimmer 3.5s linear infinite;
}
.cl-why-ex-v2 {
	box-shadow: inset 0 -12px 0 rgba(255, 255, 255, 0.04);
	animation: cl-why-ex-step 2.4s steps(4) infinite;
}
.cl-why-ex-v3 {
	background: repeating-linear-gradient(90deg, transparent, transparent 10px, var(--tn-soft) 10px, var(--tn-soft) 12px);
	animation: cl-why-ex-slide 3s linear infinite;
}
.cl-why-ex-v4 {
	background: conic-gradient(from 180deg at 50% 50%, transparent, var(--tn-soft), transparent);
	animation: cl-why-ex-spin 8s linear infinite;
}
.cl-why-ex-v5 {
	background: radial-gradient(circle, var(--tn) 2px, transparent 3px) 0 0 / 18px 18px;
	opacity: 0.5;
	animation: cl-why-ex-drift 4s ease-in-out infinite;
}
.cl-why-ex-v6 {
	background: linear-gradient(135deg, var(--tn-faint), transparent 60%, var(--tn-soft));
}
.cl-why-ex-v7 {
	clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%);
	background: linear-gradient(180deg, var(--tn-soft), transparent);
	animation: cl-why-ex-shimmer 2.8s linear infinite reverse;
}
.cl-why-ex-v8 {
	background: linear-gradient(90deg, var(--tn), var(--tn-2), var(--tn));
	background-size: 200% 100%;
	animation: cl-why-ex-shimmer 2.2s linear infinite;
}
@keyframes cl-why-ex-shimmer {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
@keyframes cl-why-ex-step {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}
@keyframes cl-why-ex-slide {
	to { background-position: 24px 0; }
}
@keyframes cl-why-ex-spin {
	to { transform: rotate(360deg); }
}
@keyframes cl-why-ex-drift {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(6px, -4px); }
}
.cl-why-explore-tile h3 {
	margin: 0 0 8px;
	font-size: 1.08rem;
	color: var(--text);
}
.cl-why-explore-tile p {
	margin: 0 0 12px;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--text-muted);
}
.cl-why-explore-go {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tn);
}
.cl-why-awards-strip {
	border-block: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.2);
}
.cl-why-awards-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}
.cl-why-awards-meter {
	min-width: 200px;
}
.cl-why-awards-bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 56px;
	margin-bottom: 10px;
}
.cl-why-awards-bars span {
	flex: 1;
	border-radius: 4px 4px 2px 2px;
	background: linear-gradient(180deg, rgba(255, 107, 53, 0.5), rgba(34, 211, 238, 0.35));
	animation: cl-why-ap-bars 1.6s ease-in-out infinite;
}
.cl-why-awards-bars span:nth-child(2) { animation-delay: 0.12s; }
.cl-why-awards-bars span:nth-child(3) { animation-delay: 0.24s; }
.cl-why-awards-bars span:nth-child(4) { animation-delay: 0.36s; }
.cl-why-awards-bars span:nth-child(5) { animation-delay: 0.48s; }
.cl-why-awards-chip {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.cl-why-join-band {
	background: linear-gradient(120deg, rgba(255, 107, 53, 0.12), rgba(34, 211, 238, 0.08));
	border-block: 1px solid rgba(255, 255, 255, 0.06);
}
.cl-why-join-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.cl-why-hub-final .cl-chatbot-sticky-quote {
	text-decoration: none;
}
.cl-about-sub-hero {
	position: relative;
	padding-bottom: 8px;
}
.cl-about-sub-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 880px;
}
.cl-about-sub-h1 {
	margin-top: 12px;
}
.cl-about-sub-lede {
	max-width: 720px;
}
.cl-about-sub-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}
.cl-about-sub-body {
	padding-top: 8px;
}
.cl-about-sub-body-grid {
	display: grid;
	grid-template-columns: 1fr minmax(240px, 320px);
	gap: 36px;
	align-items: start;
}
@media (max-width: 900px) {
	.cl-about-sub-body-grid { grid-template-columns: 1fr; }
}
.cl-about-sub-bullets {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cl-about-sub-bullets li {
	position: relative;
	padding-left: 22px;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--text-muted);
}
.cl-about-sub-bullets li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), #22d3ee);
	box-shadow: 0 0 12px rgba(255, 107, 53, 0.35);
}
.cl-about-sub-p {
	margin: 0 0 16px;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--text-muted);
}
.cl-about-sub-aside-card {
	padding: 22px;
	border-radius: 18px;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.cl-about-sub-aside-label {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}
.cl-about-sub-aside-p {
	margin: 10px 0 14px;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--text-muted);
}
.cl-about-sub-faq .cl-faq-list {
	max-width: 760px;
	margin: 0 auto;
}

@media (max-width: 640px) {
	.cl-why-join-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
	.cl-why-join-inner .cl-btn-lg {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
	.cl-why-awards-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.cl-why-awards-meter {
		width: 100%;
	}
	.cl-about-sub-hero-ctas {
		flex-direction: column;
	}
	.cl-about-sub-hero-ctas .cl-btn-primary,
	.cl-about-sub-hero-ctas .cl-btn-secondary {
		width: 100%;
		justify-content: center;
	}
	.cl-why-explore-tile {
		min-height: 44px;
		padding: 20px 18px 18px;
		padding-top: 44px;
	}
	.cl-why-hub-final .cl-chatbot-final-alt-ctas {
		flex-direction: column;
	}
	.cl-why-hub-final .cl-chatbot-final-alt-ctas .cl-btn-secondary {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cl-why-stat::before,
	.cl-why-explore-tile::before,
	.cl-why-know-orbit,
	.cl-why-know-ring-2,
	.cl-why-know-dot,
	.cl-why-ap-v1 span,
	.cl-why-ap-v2 i,
	.cl-why-ap-bar,
	.cl-why-ex-v1,
	.cl-why-ex-v2,
	.cl-why-ex-v3,
	.cl-why-ex-v4,
	.cl-why-ex-v5,
	.cl-why-ex-v7,
	.cl-why-ex-v8,
	.cl-why-awards-bars span {
		animation: none !important;
	}
	.cl-why-stat::before,
	.cl-why-explore-tile::before {
		transform: none;
		opacity: 0.5;
	}
	.cl-why-ap-bar {
		width: 65%;
		transform: none;
	}
}

/* ——— SEO: HTML sitemap + For AI systems ——— */
.cl-seo-sitemap-hero {
	padding-bottom: 32px;
}
.cl-seo-sitemap-body {
	padding-top: 0;
}
.cl-seo-sitemap-group {
	margin-bottom: 40px;
}
.cl-seo-sitemap-h2 {
	margin: 0 0 14px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
	letter-spacing: -0.02em;
}
.cl-seo-sitemap-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 28px;
}
@media (max-width: 640px) {
	.cl-seo-sitemap-list {
		grid-template-columns: 1fr;
	}
}
.cl-seo-sitemap-list a {
	color: var(--text-muted);
	text-decoration: none;
	font-size: 0.92rem;
	line-height: 1.45;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.cl-seo-sitemap-list a:hover {
	color: var(--accent);
	border-bottom-color: rgba(255, 107, 53, 0.35);
}
.cl-ai-overview {
	padding-top: 48px;
}
.cl-ai-overview-head {
	margin-bottom: 36px;
	max-width: 800px;
}
.cl-ai-overview-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
@media (max-width: 900px) {
	.cl-ai-overview-grid {
		grid-template-columns: 1fr;
	}
}
.cl-ai-overview-card {
	padding: 22px 22px 20px;
	border-radius: 18px;
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.cl-ai-dl {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(100px, 140px) 1fr;
	gap: 10px 16px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--text-muted);
}
.cl-ai-dl dt {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.cl-ai-dl dd {
	margin: 0;
}
.cl-ai-list {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.55;
}
.cl-ai-list li {
	margin-bottom: 8px;
}
.cl-ai-list a {
	color: var(--accent);
	text-decoration: none;
}
.cl-ai-list a:hover {
	text-decoration: underline;
}
.cl-ai-foot {
	margin: 18px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cl-ai-overview code {
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 0.82em;
	padding: 2px 6px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.35);
	color: var(--text);
}