/* =========================================================================
   Chatbotistic — Design System
   One stylesheet. No override layers. No !important wars.
   Edit the tokens block to reskin the whole site.
   ========================================================================= */

:root {
	/* Surfaces */
	--cb-bg:        #04060c;
	--cb-bg-2:      #070a14;
	--cb-bg-3:      #10162a;
	--cb-line:      rgba(255,255,255,0.08);
	--cb-line-2:    rgba(255,255,255,0.14);
	--cb-glass:     rgba(255,255,255,0.04);

	/* Ink */
	--cb-text:      #e9ecf5;
	--cb-soft:      #a4adc4;
	--cb-dim:       #6b7491;

	/* Brand — blue / violet / cyan */
	--cb-indigo:    #4f8bff;
	--cb-indigo-2:  #6aa3ff;
	--cb-violet:    #a070ff;
	--cb-cyan:      #3fdcff;
	--cb-green:     #34d399;
	--cb-amber:     #ffc46b;
	--cb-pink:      #ff7ac3;

	/* Gradients */
	--cb-grad-brand:  linear-gradient(135deg,#4f8bff 0%,#a070ff 60%,#3fdcff 100%);
	--cb-grad-btn:    linear-gradient(135deg,#5a93ff 0%,#9d6dff 100%);
	--cb-grad-text:   linear-gradient(120deg,#ffffff 0%,#c7d2ff 52%,#9aaeff 100%);

	/* Geometry */
	--cb-r-sm: 10px;
	--cb-r:    14px;
	--cb-r-lg: 22px;
	--cb-r-xl: 28px;

	/* Shadow */
	--cb-shadow:    0 18px 50px -16px rgba(0,0,0,0.7);
	--cb-shadow-bd: 0 12px 34px -10px rgba(120,90,255,0.6);

	/* Type */
	--cb-font-display: 'Sora', system-ui, -apple-system, sans-serif;
	--cb-font-body:    'Manrope', system-ui, -apple-system, sans-serif;
	--cb-font-mono:    'JetBrains Mono', ui-monospace, monospace;

	/* Layout */
	--cb-max: 1240px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--cb-bg);
	color: var(--cb-text);
	font-family: var(--cb-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
/* Buttons used as nav items must not inherit the user-agent chrome. */
button.cb-nav__link { background: transparent; border: 0; cursor: pointer; font-size: 14.5px; }
h1, h2, h3, h4, h5 { font-family: var(--cb-font-display); font-weight: 600; letter-spacing: -0.025em; margin: 0; line-height: 1.12; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--cb-indigo-2); outline-offset: 3px; border-radius: 4px; }

.cb-skip {
	position: absolute; left: 12px; top: -60px; z-index: 200;
	padding: 10px 16px; background: var(--cb-indigo); color: #fff; border-radius: 8px;
	transition: top .2s;
}
.cb-skip:focus { top: 12px; }

/* ---------- Ambient backdrop ---------- */
.cb-site {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	background:
		radial-gradient(1200px 700px at 80% -200px, rgba(160,112,255,0.20), transparent 60%),
		radial-gradient(900px 600px at -100px 220px, rgba(79,139,255,0.16), transparent 60%),
		radial-gradient(1000px 520px at 50% 100%, rgba(63,220,255,0.09), transparent 60%),
		linear-gradient(180deg, #04060c 0%, #05080f 60%, #04060c 100%);
}
/* Faint engineering-grid texture, masked to the upper viewport. */
.cb-site::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(1200px 800px at 50% 24%, #000, transparent 76%);
	mask-image: radial-gradient(1200px 800px at 50% 24%, #000, transparent 76%);
	pointer-events: none;
	z-index: 0;
}

/* ---------- Layout ---------- */
.cb-container { width: 100%; max-width: var(--cb-max); margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
.cb-section { padding: 104px 0; position: relative; }
.cb-section--tight { padding: 68px 0; }
.cb-center { text-align: center; }
.cb-narrow { max-width: 680px; }
.cb-center .cb-narrow { margin-left: auto; margin-right: auto; }
.cb-stack > * + * { margin-top: 18px; }

/* ---------- Typography ---------- */
.cb-display { font-size: clamp(38px, 5.4vw, 70px); line-height: 1.04; letter-spacing: -0.035em; }
.cb-h1 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.03em; }
.cb-h2 { font-size: clamp(24px, 2.6vw, 36px); }
.cb-h3 { font-size: 20px; }
.cb-lead { font-size: clamp(16px, 1.3vw, 19px); color: var(--cb-soft); line-height: 1.62; }
.cb-soft { color: var(--cb-soft); }
.cb-dim  { color: var(--cb-dim); }
.cb-mono { font-family: var(--cb-font-mono); }

/* Gradient text — done once, correctly. inline-block keeps the clip box
   sized to the text so it never renders as a solid bar. */
.cb-grad {
	display: inline-block;
	background-image: var(--cb-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.cb-grad--brand { background-image: var(--cb-grad-brand); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.cb-grad { background: none; -webkit-text-fill-color: currentColor; color: var(--cb-text); }
}

.cb-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 13px; border-radius: 999px;
	background: rgba(99,91,255,0.10);
	border: 1px solid rgba(99,91,255,0.26);
	font-family: var(--cb-font-mono); font-size: 11px;
	letter-spacing: 0.14em; text-transform: uppercase; color: #c4c8ff;
}
.cb-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cb-cyan); box-shadow: 0 0 10px var(--cb-cyan); }

/* ---------- Buttons ---------- */
.cb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	flex-wrap: nowrap; line-height: 1;
	padding: 12px 20px; border-radius: 12px; border: 0;
	font-family: var(--cb-font-body); font-weight: 600; font-size: 14.5px;
	cursor: pointer; white-space: nowrap; text-align: center;
	transition: transform .18s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.cb-btn svg, .cb-btn .cb-ico { flex: 0 0 auto; }
.cb-btn--block { display: flex; width: 100%; }
.cb-btn--primary { color: #fff; background: var(--cb-grad-btn); box-shadow: var(--cb-shadow-bd); }
.cb-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(99,91,255,0.7); }
.cb-btn--ghost { color: var(--cb-text); background: var(--cb-glass); border: 1px solid var(--cb-line); }
.cb-btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--cb-line-2); transform: translateY(-2px); }
.cb-btn--link { background: transparent; color: var(--cb-text); padding: 8px 4px; }
.cb-btn--link:hover { color: var(--cb-indigo-2); }
.cb-btn--lg { padding: 15px 26px; font-size: 15.5px; border-radius: 14px; }
.cb-btn--sm { padding: 9px 15px; font-size: 13px; border-radius: 10px; }

/* ---------- Cards / glass ---------- */
.cb-card {
	background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-r-lg);
	padding: 26px;
}
.cb-glass {
	background:
		radial-gradient(circle at 0% 0%, rgba(99,91,255,0.07), transparent 55%),
		linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
	border: 1px solid var(--cb-line);
	border-radius: var(--cb-r-lg);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

/* ---------- Header ---------- */
.cb-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(5,7,14,0.72);
	backdrop-filter: saturate(150%) blur(16px);
	-webkit-backdrop-filter: saturate(150%) blur(16px);
	border-bottom: 1px solid var(--cb-line);
}
.cb-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.cb-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cb-font-display); font-weight: 600; font-size: 19px; }
.cb-logo__mark {
	width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
	display: grid; place-items: center; color: #fff;
	background: var(--cb-grad-brand);
	box-shadow: 0 8px 22px -6px rgba(99,91,255,0.7);
}
.cb-logo img { max-height: 40px; width: auto; }

.cb-nav { display: flex; align-items: center; gap: 4px; }
.cb-nav__link {
	padding: 8px 13px; border-radius: 9px; font-size: 14.5px; font-weight: 500;
	color: var(--cb-soft); display: inline-flex; align-items: center; gap: 6px;
	transition: color .18s, background .18s;
}
.cb-nav__link:hover { color: var(--cb-text); background: rgba(255,255,255,0.05); }
.cb-nav__link.is-active { color: var(--cb-text); background: rgba(99,91,255,0.14); }

.cb-has-menu { position: relative; }
.cb-caret { transition: transform .2s; opacity: .6; }
.cb-has-menu[aria-expanded="true"] .cb-caret { transform: rotate(180deg); }
.cb-dropdown {
	position: absolute; top: calc(100% + 10px); left: 0;
	min-width: 280px; padding: 8px;
	background: rgba(10,14,26,0.97); border: 1px solid var(--cb-line);
	border-radius: var(--cb-r); box-shadow: var(--cb-shadow);
	backdrop-filter: blur(20px);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .18s, transform .18s, visibility .18s;
}
.cb-has-menu[aria-expanded="true"] .cb-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.cb-dropdown a {
	display: flex; align-items: center; gap: 11px;
	padding: 10px 11px; border-radius: 10px;
	color: var(--cb-soft); font-size: 14px; font-weight: 500;
	transition: background .15s, color .15s;
}
.cb-dropdown a:hover { background: rgba(255,255,255,0.06); color: var(--cb-text); }
.cb-dropdown__ico {
	width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
	display: grid; place-items: center; color: #c8cdff;
	background: linear-gradient(135deg, rgba(99,91,255,0.22), rgba(139,92,246,0.14));
	border: 1px solid rgba(99,91,255,0.22);
}

.cb-header__cta { display: flex; align-items: center; gap: 10px; }
.cb-icon-btn {
	width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
	display: grid; place-items: center; position: relative;
	background: var(--cb-glass); border: 1px solid var(--cb-line);
	color: var(--cb-soft); cursor: pointer;
	transition: color .18s, border-color .18s, background .18s;
}
.cb-icon-btn:hover { color: var(--cb-text); border-color: var(--cb-line-2); }
.cb-icon-btn img { width: 24px; height: 24px; border-radius: 50%; }
.cb-dot {
	position: absolute; top: -3px; right: -3px;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--cb-green); box-shadow: 0 0 0 2px var(--cb-bg), 0 0 8px var(--cb-green);
}
.cb-account-menu { position: relative; }
.cb-account-menu .cb-dropdown { left: auto; right: 0; min-width: 230px; }
.cb-account-menu[aria-expanded="true"] .cb-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.cb-dropdown__head { padding: 10px 11px 8px; border-bottom: 1px solid var(--cb-line); margin-bottom: 6px; }
.cb-dropdown__label { font-family: var(--cb-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-dim); }
.cb-dropdown__sep { height: 1px; background: var(--cb-line); margin: 6px 4px; }

.cb-burger { display: none; }

/* ---------- Mobile nav ---------- */
.cb-mobile-nav {
	display: none;
	position: fixed; inset: 72px 0 0; z-index: 55;
	background: rgba(5,7,14,0.98); backdrop-filter: blur(20px);
	padding: 22px 28px; overflow-y: auto;
}
.cb-mobile-nav.is-open { display: block; }
.cb-mobile-nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--cb-line); font-size: 16.5px; font-weight: 500; }
.cb-mobile-nav__group { font-family: var(--cb-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-dim); margin: 20px 0 4px; }

/* ---------- Hero ---------- */
.cb-hero { padding: 76px 0 56px; }
.cb-hero__grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 60px; align-items: center; }
.cb-hero__meta { display: flex; gap: 22px; flex-wrap: wrap; color: var(--cb-dim); font-size: 13.5px; margin-top: 22px; }
.cb-hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.cb-hero__meta .cb-ico { color: var(--cb-green); }
.cb-trust { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; font-size: 13px; color: var(--cb-dim); }
.cb-stars { display: inline-flex; gap: 2px; color: var(--cb-amber); }

/* Chat-widget mockup */
.cb-mock {
	background: linear-gradient(180deg, #0e1326, #0a0f1f);
	border: 1px solid var(--cb-line-2); border-radius: 24px; overflow: hidden;
	box-shadow: 0 50px 110px -28px rgba(0,0,0,0.85), 0 0 0 1px rgba(99,91,255,0.14);
}
.cb-mock__head { padding: 16px 18px; display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(99,91,255,0.2), rgba(139,92,246,0.16)); border-bottom: 1px solid var(--cb-line); }
.cb-mock__avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--cb-grad-brand); color: #fff; font-weight: 700; }
.cb-mock__head b { display: block; font-size: 14px; }
.cb-mock__head span { font-size: 11.5px; color: var(--cb-soft); display: inline-flex; align-items: center; gap: 6px; }
.cb-mock__head span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cb-green); box-shadow: 0 0 8px var(--cb-green); }
.cb-mock__body { padding: 20px 18px; display: flex; flex-direction: column; gap: 11px; }
.cb-bubble { padding: 10px 14px; border-radius: 15px; font-size: 14px; max-width: 84%; }
.cb-bubble--bot { background: rgba(255,255,255,0.06); border: 1px solid var(--cb-line); align-self: flex-start; border-bottom-left-radius: 5px; }
.cb-bubble--user { background: var(--cb-grad-btn); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.cb-mock__quick { display: flex; gap: 7px; flex-wrap: wrap; }
.cb-mock__quick span { padding: 7px 12px; border-radius: 999px; font-size: 12.5px; background: rgba(99,91,255,0.12); border: 1px solid rgba(99,91,255,0.3); color: #c4c8ff; }
.cb-mock__input { padding: 13px 16px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--cb-line); color: var(--cb-dim); font-size: 13px; }
.cb-mock__send { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--cb-grad-btn); color: #fff; margin-left: auto; }

/* ---------- Section header ---------- */
.cb-shead { max-width: 660px; }
.cb-shead .cb-h1, .cb-shead .cb-h2 { margin-top: 16px; }
.cb-shead .cb-lead { margin-top: 16px; }
.cb-center .cb-shead { margin: 0 auto; }

/* ---------- Feature grid ---------- */
.cb-grid { display: grid; gap: 18px; margin-top: 48px; }
.cb-grid--2 { grid-template-columns: repeat(2,1fr); }
.cb-grid--3 { grid-template-columns: repeat(3,1fr); }
.cb-grid--4 { grid-template-columns: repeat(4,1fr); }
.cb-feature {
	padding: 24px; border-radius: var(--cb-r-lg);
	background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
	border: 1px solid var(--cb-line);
	transition: transform .22s, border-color .22s;
}
.cb-feature:hover { transform: translateY(-3px); border-color: rgba(99,91,255,0.34); }
.cb-feature__ico {
	width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
	color: #c8cdff; margin-bottom: 16px;
	background: linear-gradient(135deg, rgba(99,91,255,0.2), rgba(139,92,246,0.12));
	border: 1px solid rgba(99,91,255,0.22);
}
.cb-feature h3 { font-size: 16.5px; }
.cb-feature p { margin-top: 7px; font-size: 14px; color: var(--cb-soft); }

/* ---------- Steps ---------- */
.cb-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 48px; }
.cb-step__num {
	width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
	font-family: var(--cb-font-display); font-size: 18px; font-weight: 600; margin-bottom: 16px;
	background: linear-gradient(135deg, #11162b, #1a2138); border: 1px solid var(--cb-line-2);
	color: #c8cdff;
}
.cb-step h3 { font-size: 17px; }
.cb-step p { margin-top: 6px; font-size: 14px; color: var(--cb-soft); }

/* ---------- Use-case cards ---------- */
.cb-use {
	display: flex; align-items: center; gap: 13px;
	padding: 17px; border-radius: var(--cb-r);
	background: rgba(255,255,255,0.025); border: 1px solid var(--cb-line);
	transition: transform .18s, border-color .18s, background .18s;
}
.cb-use:hover { transform: translateY(-2px); border-color: rgba(99,91,255,0.34); background: rgba(255,255,255,0.05); }
.cb-use__ico {
	width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
	color: #a7ecdf; background: linear-gradient(135deg, rgba(63,220,255,0.14), rgba(52,211,153,0.12));
	border: 1px solid rgba(255,255,255,0.08);
}
.cb-use b { display: block; font-size: 14.5px; }
.cb-use span { font-size: 12.5px; color: var(--cb-dim); }

/* ---------- Pricing ---------- */
.cb-pricing { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 48px; align-items: stretch; }
.cb-plan {
	display: flex; flex-direction: column; padding: 28px;
	border-radius: var(--cb-r-lg); border: 1px solid var(--cb-line);
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
	position: relative;
}
.cb-plan--featured {
	border-color: rgba(99,91,255,0.5);
	background: radial-gradient(circle at 50% 0%, rgba(99,91,255,0.18), transparent 60%), rgba(255,255,255,0.04);
	box-shadow: 0 26px 70px -22px rgba(99,91,255,0.5);
}
.cb-plan--ltd {
	border-color: rgba(245,179,66,0.55);
	background: radial-gradient(circle at 50% 0%, rgba(245,179,66,0.16), transparent 60%), rgba(255,255,255,0.035);
	box-shadow: 0 26px 70px -24px rgba(245,179,66,0.42);
}
.cb-plan__price--ltd {
	font-family: var(--cb-font-display); font-size: 42px; font-weight: 600;
	letter-spacing: -0.03em; line-height: 1;
	color: #f5b342;
}
.cb-plan__price--ltd sub { font-size: 14px; font-weight: 500; color: var(--cb-soft); margin-left: 5px; -webkit-text-fill-color: var(--cb-soft); }
.cb-plan--ltd .cb-plan__feats .cb-ico { color: #f5b342; }
.cb-plan__badge {
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	padding: 5px 13px; border-radius: 999px; background: var(--cb-grad-btn); color: #fff;
	font-family: var(--cb-font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
	box-shadow: var(--cb-shadow-bd);
}
.cb-plan__name { font-family: var(--cb-font-display); font-size: 17px; font-weight: 600; }
.cb-plan__desc { color: var(--cb-soft); font-size: 13.5px; margin: 7px 0 18px; min-height: 40px; }
.cb-plan__price { font-family: var(--cb-font-display); font-size: 42px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.cb-plan__price sub { font-size: 14px; font-weight: 500; color: var(--cb-soft); margin-left: 5px; }
.cb-plan__feats { list-style: none; padding: 0; margin: 22px 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cb-plan__feats li { display: flex; gap: 9px; font-size: 13.8px; color: var(--cb-soft); }
.cb-plan__feats .cb-ico { color: var(--cb-green); flex-shrink: 0; margin-top: 2px; }
.cb-toggle {
	display: inline-flex; gap: 4px; padding: 4px; margin-top: 18px;
	background: var(--cb-glass); border: 1px solid var(--cb-line); border-radius: 999px;
}
.cb-toggle button {
	padding: 8px 18px; border-radius: 999px; border: 0; background: transparent;
	color: var(--cb-soft); font-weight: 600; font-size: 13px; cursor: pointer;
}
.cb-toggle button.is-active { background: var(--cb-grad-btn); color: #fff; }

/* ---------- FAQ ---------- */
.cb-faq { max-width: 820px; margin: 44px auto 0; }
.cb-faq__item { border: 1px solid var(--cb-line); border-radius: var(--cb-r); background: rgba(255,255,255,0.02); margin-bottom: 10px; overflow: hidden; }
.cb-faq__q {
	width: 100%; text-align: left; cursor: pointer;
	padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
	background: transparent; border: 0; color: var(--cb-text);
	font-family: var(--cb-font-display); font-weight: 600; font-size: 15.5px;
}
.cb-faq__q .cb-ico { color: var(--cb-dim); transition: transform .22s; flex-shrink: 0; }
.cb-faq__item.is-open .cb-faq__q .cb-ico { transform: rotate(45deg); color: var(--cb-indigo-2); }
.cb-faq__a { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height .26s ease, padding .26s ease; color: var(--cb-soft); font-size: 14.5px; }
.cb-faq__item.is-open .cb-faq__a { padding: 0 22px 20px; max-height: 460px; }

/* ---------- CTA band ---------- */
.cb-cta {
	border-radius: var(--cb-r-xl); padding: 72px 48px; text-align: center;
	border: 1px solid var(--cb-line-2);
	background:
		radial-gradient(560px 280px at 78% 20%, rgba(139,92,246,0.34), transparent 60%),
		radial-gradient(480px 260px at 22% 80%, rgba(63,220,255,0.2), transparent 60%),
		linear-gradient(135deg, #0d1226, #0a0f22);
}
.cb-cta .cb-h2 { max-width: 720px; margin: 16px auto; }
.cb-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ---------- Page hero ---------- */
.cb-page-hero { padding: 76px 0 56px; text-align: center; border-bottom: 1px solid var(--cb-line); }
.cb-page-hero .cb-h1 { max-width: 860px; margin: 16px auto 14px; }
.cb-page-hero .cb-lead { max-width: 640px; margin: 0 auto; }
.cb-breadcrumb { display: flex; gap: 8px; justify-content: center; font-size: 13px; color: var(--cb-dim); margin-bottom: 4px; }
.cb-breadcrumb a:hover { color: var(--cb-text); }

/* ---------- Forms ---------- */
.cb-form { display: flex; flex-direction: column; gap: 16px; }
.cb-field { display: flex; flex-direction: column; gap: 7px; }
.cb-field label { font-family: var(--cb-font-mono); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cb-dim); }
.cb-input, .cb-form input, .cb-form textarea, .cb-form select {
	width: 100%; padding: 13px 15px;
	background: rgba(0,0,0,0.35); border: 1px solid var(--cb-line);
	border-radius: 12px; color: var(--cb-text);
	font-family: var(--cb-font-body); font-size: 15px;
	transition: border-color .18s, background .18s;
}
.cb-form textarea { resize: vertical; min-height: 130px; }
.cb-form input:focus, .cb-form textarea:focus, .cb-form select:focus {
	outline: none; border-color: rgba(99,91,255,0.6); background: rgba(0,0,0,0.5);
}
.cb-form ::placeholder { color: var(--cb-dim); }
.cb-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cb-note { padding: 13px 16px; border-radius: 12px; font-size: 14px; border: 1px solid var(--cb-line); }
.cb-note--ok { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.32); color: #a7ecdf; }
.cb-note--err { background: rgba(255,90,120,0.1); border-color: rgba(255,90,120,0.32); color: #ff9caa; }

/* ---------- Content / legal / docs ---------- */
.cb-prose { max-width: 760px; margin: 0 auto; color: var(--cb-soft); font-size: 16px; line-height: 1.75; }
.cb-prose h2 { color: var(--cb-text); font-size: 24px; margin: 40px 0 14px; }
.cb-prose h3 { color: var(--cb-text); font-size: 18px; margin: 28px 0 10px; }
.cb-prose p, .cb-prose li { margin: 0 0 12px; }
.cb-prose ul, .cb-prose ol { padding-left: 22px; }
.cb-prose a { color: var(--cb-indigo-2); text-decoration: underline; }
.cb-prose code { font-family: var(--cb-font-mono); font-size: 13px; background: rgba(255,255,255,0.06); padding: 2px 7px; border-radius: 6px; }
.cb-prose img { border-radius: var(--cb-r); margin: 18px 0; }

/* ---------- Blog ---------- */
.cb-posts { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
.cb-post {
	border-radius: var(--cb-r-lg); overflow: hidden; display: flex; flex-direction: column;
	background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
	border: 1px solid var(--cb-line);
	transition: transform .22s, border-color .22s;
}
.cb-post:hover { transform: translateY(-3px); border-color: rgba(99,91,255,0.34); }
.cb-post__thumb { aspect-ratio: 16/10; background: linear-gradient(135deg, rgba(99,91,255,0.22), rgba(139,92,246,0.14)); }
.cb-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cb-post__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cb-post__meta { font-family: var(--cb-font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cb-dim); }
.cb-post__body h3 { font-size: 18px; }
.cb-post__excerpt { color: var(--cb-soft); font-size: 14px; flex: 1; }
.cb-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; flex-wrap: wrap; }
.cb-pagination .page-numbers {
	padding: 9px 14px; border-radius: 10px; background: var(--cb-glass);
	border: 1px solid var(--cb-line); color: var(--cb-soft); font-family: var(--cb-font-mono); font-size: 13px;
}
.cb-pagination .current { background: var(--cb-grad-btn); color: #fff; border-color: transparent; }

/* ---------- Footer ---------- */
.cb-footer { border-top: 1px solid var(--cb-line); padding: 72px 0 34px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4)); position: relative; z-index: 1; }
.cb-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 44px; }
.cb-footer__brand p { color: var(--cb-soft); font-size: 14px; max-width: 320px; margin-top: 14px; }
.cb-footer__col h5 { font-family: var(--cb-font-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cb-dim); margin-bottom: 14px; }
.cb-footer__col a { display: block; color: var(--cb-soft); font-size: 14px; padding: 5px 0; }
.cb-footer__col a:hover { color: var(--cb-text); }
.cb-footer__pill {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
	padding: 8px 13px; border-radius: 999px; background: var(--cb-glass); border: 1px solid var(--cb-line);
	font-size: 12.5px; color: var(--cb-soft);
}
.cb-footer__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cb-grad-brand); }
.cb-social { display: flex; gap: 8px; margin-top: 18px; }
.cb-social a { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--cb-glass); border: 1px solid var(--cb-line); color: var(--cb-soft); }
.cb-social a:hover { color: var(--cb-text); border-color: var(--cb-line-2); }
.cb-footer__bottom {
	display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
	margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--cb-line);
	font-size: 13px; color: var(--cb-dim);
}
.cb-footer__bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Reveal on scroll ---------- */
.cb-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.cb-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.cb-reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.cb-grid--4 { grid-template-columns: repeat(2,1fr); }
	.cb-grid--3 { grid-template-columns: repeat(2,1fr); }
	.cb-steps { grid-template-columns: repeat(2,1fr); }
	.cb-pricing { grid-template-columns: repeat(2,1fr); }
	.cb-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
	.cb-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.cb-nav, .cb-header__cta .cb-btn--ghost { display: none; }
	.cb-burger { display: grid; }
	.cb-hero__grid { grid-template-columns: 1fr; gap: 44px; }
	.cb-section { padding: 72px 0; }
	.cb-posts { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
	.cb-container { padding: 0 24px; }
	.cb-hero { padding: 60px 0 40px; }
	.cb-page-hero { padding: 60px 0 40px; }
	.cb-cta { padding: 56px 28px; }
}
@media (max-width: 620px) {
	.cb-container { padding: 0 20px; }
	.cb-grid--2, .cb-grid--3, .cb-grid--4, .cb-steps, .cb-pricing, .cb-posts { grid-template-columns: 1fr; }
	.cb-footer__grid { grid-template-columns: 1fr 1fr; }
	.cb-field-row { grid-template-columns: 1fr; }
	.cb-cta { padding: 48px 22px; }
	.cb-section { padding: 60px 0; }
	.cb-footer__bottom { flex-direction: column; align-items: flex-start; }
	.cb-logo span:last-child { display: none; }
}
@media (max-width: 480px) {
	.cb-container { padding: 0 16px; }
	.cb-section { padding: 52px 0; }
	.cb-section--tight { padding: 44px 0; }
	.cb-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.cb-cta { padding: 40px 18px; }
	.cb-hero { padding: 48px 0 32px; }
	.cb-page-hero { padding: 48px 0 32px; }
	/* Long-form content defensive overflow so blog posts and docs never
	   force a horizontal page scroll on a phone. */
	.cb-prose img { max-width: 100%; height: auto; }
	.cb-prose pre,
	.cb-prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.cb-prose code { word-break: break-word; }
}

/* =========================================================================
   Phase 1 additions — motion, glass edge, ecosystem, comparison
   ========================================================================= */

/* ---------- Page entrance ---------- */
#cb-main { animation: cb-fade-up .5s ease; }
@keyframes cb-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Staggered reveal ---------- */
.cb-reveal:nth-child(2) { transition-delay: .06s; }
.cb-reveal:nth-child(3) { transition-delay: .12s; }
.cb-reveal:nth-child(4) { transition-delay: .18s; }
.cb-reveal:nth-child(5) { transition-delay: .24s; }
.cb-reveal:nth-child(6) { transition-delay: .30s; }

/* ---------- Gradient hairline edge for premium cards ---------- */
.cb-glass-edge { position: relative; }
.cb-glass-edge::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 42%, rgba(160,112,255,0.28) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none;
}

/* Glow lift on hover for feature cards */
.cb-feature::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
	box-shadow: 0 24px 60px -22px rgba(120,90,255,0.55);
	transition: opacity .25s; pointer-events: none;
}
.cb-feature { position: relative; }
.cb-feature:hover::after { opacity: 1; }

/* Animated conic ring behind step numbers */
.cb-step__num { position: relative; }
.cb-step__num::after {
	content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: -1;
	background: conic-gradient(from 0deg, var(--cb-indigo), var(--cb-violet), var(--cb-cyan), var(--cb-indigo));
	filter: blur(7px); opacity: .38;
}

/* =========================================================================
   WordPressistic ecosystem promo
   ========================================================================= */
.cb-eco {
	position: relative; overflow: hidden;
	border-radius: var(--cb-r-xl);
	padding: 38px 42px 30px;
	border: 1px solid var(--cb-line-2);
	background:
		radial-gradient(820px 380px at 72% -22%, rgba(160,112,255,0.26), transparent 60%),
		radial-gradient(620px 320px at -8% 115%, rgba(63,220,255,0.18), transparent 60%),
		linear-gradient(180deg, #0d1124 0%, #0a0f20 100%);
	box-shadow: 0 40px 100px -34px rgba(160,112,255,0.34);
}
.cb-eco::before {
	content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 220px;
	background: linear-gradient(90deg, transparent, rgba(160,112,255,0.07) 50%, transparent);
	animation: cb-eco-sweep 9s ease-in-out infinite; pointer-events: none;
}
@keyframes cb-eco-sweep { 0% { transform: translateX(-260px); } 100% { transform: translateX(calc(100% + 1100px)); } }

.cb-eco__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.cb-eco__head { display: flex; align-items: center; gap: 16px; }
.cb-eco__mark {
	width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
	display: grid; place-items: center;
	font-family: var(--cb-font-display); font-weight: 700; font-size: 22px; color: #1a0f00;
	background: linear-gradient(135deg, #ffd166, #ff9a3c);
	box-shadow: 0 10px 30px -6px rgba(255,180,80,0.5);
}
.cb-eco__eyebrow {
	display: inline-block; padding: 5px 10px; border-radius: 6px;
	background: linear-gradient(135deg, rgba(160,112,255,0.25), rgba(79,139,255,0.18));
	font-family: var(--cb-font-mono); font-size: 10.5px; letter-spacing: 0.15em;
	text-transform: uppercase; color: #d6c5ff;
}
.cb-eco__title { font-family: var(--cb-font-display); font-size: clamp(19px,2.1vw,27px); font-weight: 600; letter-spacing: -0.02em; margin-top: 7px; line-height: 1.25; }
.cb-eco__cycle { position: relative; display: inline-grid; vertical-align: bottom; }
.cb-eco__cycle span {
	grid-area: 1 / 1; white-space: nowrap;
	background: var(--cb-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
	opacity: 0; transform: translateY(7px); transition: opacity .5s, transform .5s;
}
.cb-eco__cycle span.is-on { opacity: 1; transform: none; }
.cb-eco__explore {
	display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px;
	background: rgba(255,255,255,0.06); border: 1px solid var(--cb-line-2);
	color: var(--cb-text); font-weight: 600; font-size: 13.5px;
	transition: background .2s, border-color .2s, transform .2s;
}
.cb-eco__explore:hover { background: rgba(255,255,255,0.1); border-color: rgba(160,112,255,0.4); transform: translateY(-1px); }

.cb-eco__cards { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.cb-eco__card {
	position: relative; overflow: hidden; padding: 18px; border-radius: 14px;
	border: 1px solid var(--cb-line);
	background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
	opacity: .55;
	transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s, border-color .6s, background .6s, box-shadow .6s;
}
.cb-eco__card:hover { opacity: .85; }
.cb-eco__card.is-active {
	opacity: 1; transform: translateY(-4px) scale(1.02);
	border-color: rgba(160,112,255,0.45);
	background: linear-gradient(180deg, rgba(160,112,255,0.14), rgba(79,139,255,0.06));
	box-shadow: 0 20px 50px -10px rgba(160,112,255,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cb-eco__card-name { display: flex; align-items: center; gap: 8px; font-family: var(--cb-font-display); font-weight: 600; font-size: 15px; }
.cb-eco__card.is-active .cb-eco__card-name::after {
	content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cb-green);
	animation: cb-eco-pulse 1.7s ease-in-out infinite;
}
@keyframes cb-eco-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); } 50% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } }
.cb-eco__card-tag { font-family: var(--cb-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-dim); margin-top: 6px; }
.cb-eco__card.is-active .cb-eco__card-tag { color: #bdcaff; }
.cb-eco__card-mark {
	position: absolute; right: -10px; bottom: -10px; width: 50px; height: 50px; border-radius: 14px;
	display: grid; place-items: center; opacity: .2; color: #cfdcff;
	background: linear-gradient(135deg, rgba(160,112,255,0.4), rgba(79,139,255,0.2));
	transition: opacity .6s;
}
.cb-eco__card.is-active .cb-eco__card-mark { opacity: .8; }

/* Brand marquee */
.cb-marquee {
	margin-top: 26px; padding-top: 22px; overflow: hidden;
	border-top: 1px dashed var(--cb-line);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cb-marquee__track { display: inline-flex; align-items: center; gap: 54px; white-space: nowrap; animation: cb-marquee 38s linear infinite; }
.cb-marquee:hover .cb-marquee__track { animation-play-state: paused; }
@keyframes cb-marquee { to { transform: translateX(-50%); } }
.cb-marquee__item { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cb-font-display); font-weight: 600; font-size: 15.5px; color: var(--cb-soft); opacity: .7; transition: opacity .3s, color .3s; }
.cb-marquee__item:hover { opacity: 1; color: var(--cb-text); }
.cb-marquee__item .cb-marquee__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cb-grad-brand); flex-shrink: 0; }
.cb-marquee__item .cb-marquee__tag { font-family: var(--cb-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cb-dim); }
.cb-marquee__sep { width: 1px; height: 18px; background: var(--cb-line); flex-shrink: 0; }

/* =========================================================================
   Comparison table (pricing + competitor)
   ========================================================================= */
.cb-compare { border: 1px solid var(--cb-line); border-radius: var(--cb-r-lg); overflow: hidden; background: rgba(255,255,255,0.02); margin-top: 40px; }
.cb-compare__scroll { overflow-x: auto; }
.cb-compare__row {
	display: grid; align-items: center;
	padding: 14px 22px; font-size: 14px; border-bottom: 1px solid var(--cb-line);
	min-width: 640px;
}
.cb-compare__row:last-child { border-bottom: 0; }
.cb-compare__row--head {
	background: rgba(255,255,255,0.03);
	font-family: var(--cb-font-mono); font-size: 11px; letter-spacing: 0.09em;
	text-transform: uppercase; color: var(--cb-dim);
}
.cb-compare__row--head .cb-compare__own { color: #cdd6ff; }
.cb-compare__own {
	color: var(--cb-text); font-weight: 600;
	background: linear-gradient(180deg, rgba(79,139,255,0.10), rgba(160,112,255,0.05));
	margin: -14px 0; padding: 14px 6px;
}
.cb-compare__cell { text-align: center; }
.cb-compare__cell--feat { text-align: left; color: var(--cb-soft); }
.cb-compare__yes { color: var(--cb-green); }
.cb-compare__no { color: var(--cb-dim); }
.cb-compare__col-own {
	background: linear-gradient(180deg, rgba(79,139,255,0.10), rgba(160,112,255,0.05));
	border-left: 1px solid rgba(99,128,255,0.22); border-right: 1px solid rgba(99,128,255,0.22);
	margin: -14px 0; padding: 14px 0;
}

/* Highlight strip above the "own" column */
.cb-compare__crown {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--cb-font-mono); font-size: 10px; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--cb-cyan);
}

@media (max-width: 900px) {
	.cb-eco { padding: 28px 22px; }
	.cb-eco__cards { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 560px) {
	.cb-eco { padding: 22px 18px; }
	.cb-eco__cards { grid-template-columns: repeat(2,1fr); }
	.cb-eco__title { font-size: 18px; }
}
@media (max-width: 380px) {
	.cb-eco__cards { grid-template-columns: 1fr; }
}

/* =========================================================================
   Phase 3 — pricing clarity, competitor table, content polish
   ========================================================================= */

/* Monthly / yearly price swap — pure CSS, driven by .is-yearly on the grid */
.cb-plan__price--y,
.cb-plan__billing--y { display: none; }
.cb-pricing.is-yearly .cb-plan__price--m,
.cb-pricing.is-yearly .cb-plan__billing--m { display: none; }
.cb-pricing.is-yearly .cb-plan__price--y { display: block; }
.cb-pricing.is-yearly .cb-plan__billing--y { display: flex; }

.cb-plan__billing {
	display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
	font-size: 12.5px; color: var(--cb-dim); margin-top: 8px; min-height: 20px;
}
.cb-plan__save {
	font-family: var(--cb-font-mono); font-size: 10px; letter-spacing: 0.07em;
	text-transform: uppercase; color: var(--cb-cyan);
	background: rgba(63,220,255,0.1); border: 1px solid rgba(63,220,255,0.28);
	padding: 2px 7px; border-radius: 999px;
}
.cb-plan__cta { margin-top: 4px; }
.cb-plan__cta .cb-btn { width: 100%; }

/* Toggle save pill */
.cb-toggle__save {
	font-family: var(--cb-font-mono); font-size: 9.5px; letter-spacing: 0.06em;
	background: rgba(63,220,255,0.14); color: var(--cb-cyan);
	padding: 2px 6px; border-radius: 999px; margin-left: 6px;
}
.cb-toggle button.is-active .cb-toggle__save { background: rgba(255,255,255,0.22); color: #fff; }

/* Competitor comparison — logo-style column heads */
.cb-vs__head {
	display: grid; align-items: end; gap: 14px; padding: 0 22px 18px;
	min-width: 640px;
}
.cb-vs__brand { text-align: center; }
.cb-vs__brand b { font-family: var(--cb-font-display); font-size: 15px; }
.cb-vs__brand--own b {
	background: var(--cb-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cb-vs__brand span { display: block; font-size: 11.5px; color: var(--cb-dim); margin-top: 2px; }

/* Verdict / value callout under a comparison */
.cb-verdict {
	margin-top: 22px; padding: 20px 24px; border-radius: var(--cb-r);
	background: linear-gradient(135deg, rgba(79,139,255,0.12), rgba(160,112,255,0.07));
	border: 1px solid rgba(99,128,255,0.26);
	display: flex; gap: 14px; align-items: flex-start;
}
.cb-verdict .cb-ico { color: var(--cb-cyan); flex-shrink: 0; margin-top: 2px; }
.cb-verdict b { color: var(--cb-text); }
.cb-verdict p { color: var(--cb-soft); font-size: 14px; }

/* Inline list used in deep content blocks */
.cb-ticklist { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 11px; }
.cb-ticklist li { display: flex; gap: 10px; font-size: 14.5px; color: var(--cb-soft); }
.cb-ticklist .cb-ico { color: var(--cb-green); flex-shrink: 0; margin-top: 2px; }

/* Two-column "split" content block */
.cb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.cb-split--media .cb-card { margin: 0; }
@media (max-width: 900px) { .cb-split { grid-template-columns: 1fr; gap: 32px; } }

/* Quote / testimonial */
.cb-quote {
	border-radius: var(--cb-r-lg); padding: 32px;
	border: 1px solid var(--cb-line);
	background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
}
.cb-quote p { font-family: var(--cb-font-display); font-size: 19px; line-height: 1.5; letter-spacing: -0.01em; }
.cb-quote footer { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.cb-quote__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--cb-grad-brand); display: grid; place-items: center; color: #fff; font-weight: 700; }
.cb-quote__avatar + div b { font-size: 14px; display: block; }
.cb-quote__avatar + div span { font-size: 12.5px; color: var(--cb-dim); }

/* Stat band */
.cb-statband { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.cb-statband__num { font-family: var(--cb-font-display); font-size: clamp(30px,3.6vw,44px); font-weight: 600; letter-spacing: -0.03em; }
.cb-statband__label { color: var(--cb-soft); font-size: 13.5px; margin-top: 4px; }
@media (max-width: 720px) { .cb-statband { grid-template-columns: 1fr 1fr; gap: 22px; } }