/* cc-font-inherit-reset: some theme stylesheets set font-family directly on
 * span/a/strong (e.g. "p, a, strong, span { font-family: Poppins }"), which
 * stops a parent's Typography control from reaching inner text. Kept at the top
 * so explicit rules below and Elementor controls still win. */
.cc-kbf :where(span, a, strong, b, em, i) {
	font-family: inherit;
}

/*
 * .cc-kbf is a size container, so the widget has no intrinsic width. Inside a
 * wrapping (e.g. mobile) Elementor container the browser would measure it at
 * ~0px wide and keep that huge height. Fill the row unless Advanced > Width is set.
 */
:is(.e-con, .e-con-inner) > .elementor-widget-cc_key_business_functions:not([class*="elementor-widget__width-"]) {
	width: 100%;
}

/*
 * CC Key Business Functions
 *
 * The diagram is a 1199 x 401.24 stage (Figma frame 1067:4299, centred in the
 * 1199px column). Every layer is positioned in percentages of that stage, and
 * sizes use --cc-kbf-u (1 design px expressed in container units) so the whole
 * illustration scales as one piece. Below 880px of widget width it switches to
 * a card layout via a container query.
 */

.cc-kbf {
	--cc-kbf-accent: #69ecff;
	--cc-kbf-glow: rgba(105, 236, 255, 0.55);
	--cc-kbf-glow-size: 230%;
	--cc-kbf-label-active: #fff;
	--cc-kbf-icon-scale: 1;
	--cc-kbf-icon-active-scale: 1.08;
	--cc-kbf-node-gap-scale: 1;
	--cc-kbf-node-dim: 0.45;
	--cc-kbf-focus: var(--cc-kbf-accent);
	--cc-kbf-line-opacity: 1;
	--cc-kbf-line-dim: 0.25;
	--cc-kbf-line-glow: var(--cc-kbf-accent);
	--cc-kbf-line-glow-size: 6px;
	--cc-kbf-ring-active-brightness: 1.6;
	--cc-kbf-pulse-duration: 3.6s;
	--cc-kbf-pillar-active: var(--cc-kbf-accent);
	--cc-kbf-pillar-indicator: var(--cc-kbf-accent);
	--cc-kbf-pillar-indicator-height: 2px;
	--cc-kbf-pillar-dim: 0.6;
	--cc-kbf-card-min: 150px;
	--cc-kbf-card-bg: rgba(105, 236, 255, 0.04);
	--cc-kbf-card-bg-active: rgba(105, 236, 255, 0.12);
	--cc-kbf-card-border: rgba(105, 236, 255, 0.25);
	--cc-kbf-card-border-active: var(--cc-kbf-accent);
	--cc-kbf-card-radius: 12px;
	--cc-kbf-card-padding: 16px;
	--cc-kbf-card-label-size: 15px;
	--cc-kbf-card-podium-width: min(100%, 460px);
	--cc-kbf-gap: 50px;
	--cc-kbf-panel-col: 28%;
	--cc-kbf-label-color: var(--cc-kbf-accent);
	--cc-kbf-icon-color: #fff;
	--cc-kbf-badge-d: 64;
	--cc-kbf-badge-bg: radial-gradient(circle at 50% 35%, #12245e 0%, #0a1438 70%);
	--cc-kbf-badge-border: rgba(105, 236, 255, 0.55);
	--cc-kbf-badge-border-active: var(--cc-kbf-accent);
	--cc-kbf-badge-halo: rgba(80, 170, 255, 0.35);
	--cc-kbf-dot: var(--cc-kbf-accent);
	--cc-kbf-dot-d: 7;
	--cc-kbf-orbit: rgba(105, 236, 255, 0.16);
	--cc-kbf-pillar-card-min: 260px;
	--cc-kbf-pillar-card-bg: linear-gradient(160deg, rgba(22, 44, 110, 0.38) 0%, rgba(8, 18, 52, 0.55) 100%);
	--cc-kbf-pillar-card-bg-active: linear-gradient(160deg, rgba(30, 62, 150, 0.5) 0%, rgba(10, 24, 70, 0.65) 100%);
	--cc-kbf-pillar-card-border: rgba(105, 236, 255, 0.22);
	--cc-kbf-pillar-card-border-active: rgba(105, 236, 255, 0.75);
	--cc-kbf-pillar-card-radius: 10px;
	--cc-kbf-pillar-badge: 56px;
	--cc-kbf-pillar-divider: rgba(255, 255, 255, 0.16);
	align-items: center;
	background: linear-gradient(100deg, #060a1c 0%, #0b1238 52%, #142372 100%);
	box-sizing: border-box;
	color: #fff;
	container: cc-kbf cc-kbf-root / inline-size;
	display: flex;
	flex-direction: column;
	gap: 50px;
	overflow: hidden;
	padding: 72px 40px;
	position: relative;
	width: 100%;
}

.cc-kbf--layout-diagram {
	container-name: cc-kbf-root;
}

/* ---- Two-column layout (panel beside the diagram) ------------------------ */

.cc-kbf__split {
	align-items: center;
	column-gap: 56px;
	display: grid;
	grid-template-columns: minmax(0, var(--cc-kbf-panel-col)) minmax(0, 1fr);
	row-gap: var(--cc-kbf-gap);
	width: 100%;
}

.cc-kbf--panel-right .cc-kbf__split {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--cc-kbf-panel-col));
}

.cc-kbf__aside {
	min-width: 0;
}

/*
 * The diagram column is its own container, so the card layout switch reacts to
 * the column's width (see the cc-kbf-visual query) rather than the widget's.
 */
.cc-kbf__visual {
	align-items: center;
	container: cc-kbf-visual / inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--cc-kbf-gap);
	min-width: 0;
	width: 100%;
}

.cc-kbf--layout-diagram .cc-kbf__visual {
	container-name: none;
}

.cc-kbf--split .cc-kbf__panel {
	max-width: none;
	text-align: left;
}

.cc-kbf--split .cc-kbf__pillars {
	column-gap: 48px;
}

@container cc-kbf-root (max-width: 960px) {
	.cc-kbf--split .cc-kbf__split {
		grid-template-columns: minmax(0, 1fr);
	}

	.cc-kbf--stack-panel-before .cc-kbf__aside {
		order: -1;
	}

	.cc-kbf--stack-panel-after .cc-kbf__aside {
		order: 2;
	}

	.cc-kbf--split .cc-kbf__panel {
		margin-inline: auto;
		max-width: 760px;
		text-align: center;
	}
}

/* ---- Stage ------------------------------------------------------------- */

.cc-kbf__stage {
	--cc-kbf-u: calc(100cqw / 1199);
	aspect-ratio: 1199 / 401.24;
	container-type: inline-size;
	margin: 0 auto;
	max-width: 1199px;
	position: relative;
	width: 100%;
}

.cc-kbf__stage span,
.cc-kbf__stage img {
	box-sizing: border-box;
}

/* ---- Podium (Figma group "2", 1067:4300) -------------------------------- */

.cc-kbf__podium {
	height: 64.85%;
	left: 19.787%;
	pointer-events: none;
	position: absolute;
	/* Individual transform properties stay "none" (no stacking context, so the
	   ring's blend modes are untouched) until the Podium controls are used. */
	scale: var(--cc-kbf-podium-scale, none);
	top: 35.148%;
	transform-origin: 50% 75%;
	translate: var(--cc-kbf-podium-translate, none);
	width: 56.157%;
}

.cc-kbf__podium span {
	display: block;
	position: absolute;
}

.cc-kbf__podium img {
	display: block;
	height: 100%;
	max-width: none;
	width: 100%;
}

.cc-kbf__podium-base {
	height: 56.972%;
	left: 22.325%;
	overflow: hidden;
	top: 43.028%;
	width: 54.812%;
}

.cc-kbf__podium-base img {
	height: 99.73%;
	left: 0;
	position: absolute;
	top: -0.04%;
}

.cc-kbf__ring {
	height: 34.661%;
	left: 29.87%;
	top: 48.208%;
	width: 40.339%;
}

.cc-kbf__ring-vector {
	inset: 11.74% 2.81% 11.98% 1.84%;
}

.cc-kbf__ring-vector > span {
	inset: -0.84% -0.22%;
}

.cc-kbf__ring-layer--a {
	inset: -62.24% -9.38% -62.27% -10.33%;
}

.cc-kbf__ring-layer--b {
	inset: -65.52% -9.38% -59% -10.33%;
}

.cc-kbf__ring-layer--c {
	inset: -57.56% -9.92% -66.48% -9.79%;
}

.cc-kbf__blend-overlay {
	mix-blend-mode: overlay;
}

.cc-kbf__ring-glow {
	inset: 13.04% 3.5% 14.24% 2.53%;
	mix-blend-mode: screen;
}

.cc-kbf__ring-glow > span {
	inset: -0.5% -0.13%;
}

.cc-kbf__ring-vector img,
.cc-kbf__ring-glow img {
	transition: filter 400ms ease;
}

.cc-kbf.has-active .cc-kbf__ring-vector img,
.cc-kbf.has-active .cc-kbf__ring-glow img {
	filter: brightness(var(--cc-kbf-ring-active-brightness));
}

.cc-kbf--pulse .cc-kbf__ring-glow {
	animation: cc-kbf-ring-pulse var(--cc-kbf-pulse-duration) ease-in-out infinite;
}

.cc-kbf__beams {
	height: 87.803%;
	left: 0.434%;
	top: -8.52%;
	width: 99.846%;
}

.cc-kbf__beams > span {
	inset: -9.9% -3.37%;
}

/* ---- Connector lines ---------------------------------------------------- */

.cc-kbf__line {
	display: block;
	opacity: var(--cc-kbf-line-opacity);
	pointer-events: none;
	position: absolute;
	transition: opacity var(--cc-kbf-transition, 300ms) ease;
}

.cc-kbf__line-inner {
	display: block;
	position: absolute;
}

.cc-kbf__line img {
	display: block;
	height: 100%;
	max-width: none;
	transition: filter var(--cc-kbf-transition, 300ms) ease;
	width: 100%;
}

/* 1: far left (Service Delivery) */
.cc-kbf__line--slot-1 {
	height: 10.076%;
	left: 15.929%;
	top: 64.301%;
	width: 18.755%;
}

/* 5: far right (mirrored) */
.cc-kbf__line--slot-5 {
	height: 10.076%;
	left: 60.511%;
	top: 64.087%;
	transform: scaleX(-1);
	width: 18.755%;
}

.cc-kbf__line--slot-1 .cc-kbf__line-inner,
.cc-kbf__line--slot-5 .cc-kbf__line-inner {
	inset: -1.28% -0.2% -0.64% 0;
}

/* 2: upper left (Sales) */
.cc-kbf__line--slot-2 {
	height: 33.588%;
	left: 30.556%;
	top: 32.624%;
	width: 10.678%;
}

/* 4: upper right (mirrored) */
.cc-kbf__line--slot-4 {
	height: 33.588%;
	left: 53.995%;
	top: 32.624%;
	transform: scaleX(-1);
	width: 10.607%;
}

.cc-kbf__line--slot-2 .cc-kbf__line-inner,
.cc-kbf__line--slot-4 .cc-kbf__line-inner {
	inset: -0.38% -0.35% -0.19% 0;
}

/* 3: top (rotated 30deg stroke, centred in its box) */
.cc-kbf__line--slot-3 {
	height: 38.841%;
	left: 42.224%;
	top: 26.493%;
	width: 11.241%;
}

.cc-kbf__line--slot-3 .cc-kbf__line-inner {
	height: 86.725%;
	left: 21.214%;
	top: 6.6375%;
	transform: rotate(30deg);
	width: 57.572%;
}

.cc-kbf--dim.has-active .cc-kbf__line:not(.is-active) {
	opacity: var(--cc-kbf-line-dim);
}

.cc-kbf__line.is-active {
	opacity: 1;
}

.cc-kbf__line.is-active img {
	animation: cc-kbf-line-glow 2.4s ease-in-out infinite;
	filter: drop-shadow(0 0 calc(var(--cc-kbf-line-glow-size) * 0.5) var(--cc-kbf-line-glow)) drop-shadow(0 0 var(--cc-kbf-line-glow-size) var(--cc-kbf-line-glow));
}

/* ---- Function nodes ------------------------------------------------------ */

.cc-kbf__nodes {
	display: contents;
}

.cc-kbf .cc-kbf__node,
.cc-kbf .cc-kbf__pillar {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: normal;
	line-height: inherit;
	margin: 0;
	min-height: 0;
	padding: 0;
	text-transform: none;
	-webkit-tap-highlight-color: transparent;
}

.cc-kbf .cc-kbf__node:hover,
.cc-kbf .cc-kbf__node:focus,
.cc-kbf .cc-kbf__pillar:hover,
.cc-kbf .cc-kbf__pillar:focus {
	background: transparent;
	box-shadow: none;
	color: inherit;
}

.cc-kbf .cc-kbf__node {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: calc(8.5 * var(--cc-kbf-u) * var(--cc-kbf-node-gap-scale));
	left: var(--cc-kbf-x);
	position: absolute;
	text-align: center;
	top: var(--cc-kbf-y);
	transform: translateX(-50%);
	transition: opacity var(--cc-kbf-transition, 300ms) ease;
	z-index: 2;
}

.cc-kbf__node--slot-1 {
	--cc-kbf-x: 9.209%;
	--cc-kbf-y: 48.814%;
}

.cc-kbf__node--slot-2 {
	--cc-kbf-x: 24.848%;
	--cc-kbf-y: 9.321%;
}

.cc-kbf__node--slot-3 {
	--cc-kbf-x: 47.856%;
	--cc-kbf-y: 0%;
}

.cc-kbf__node--slot-4 {
	--cc-kbf-x: 70.851%;
	--cc-kbf-y: 13.772%;
}

.cc-kbf__node--slot-5 {
	--cc-kbf-x: 86.712%;
	--cc-kbf-y: 47.61%;
}

.cc-kbf__node-icon {
	display: flex;
	height: calc(34 * var(--cc-kbf-u) * var(--cc-kbf-icon-scale));
	isolation: isolate;
	justify-content: center;
	position: relative;
}

.cc-kbf__node-icon::before {
	aspect-ratio: 1;
	background: radial-gradient(closest-side, var(--cc-kbf-glow), transparent);
	border-radius: 50%;
	content: "";
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.6);
	transition: opacity var(--cc-kbf-transition, 300ms) ease, transform var(--cc-kbf-transition, 300ms) ease;
	width: var(--cc-kbf-glow-size);
	z-index: -1;
}

.cc-kbf__node-icon img {
	display: block;
	height: 100%;
	max-width: none;
	transition: transform var(--cc-kbf-transition, 300ms) ease, filter var(--cc-kbf-transition, 300ms) ease;
	width: auto;
}

.cc-kbf__node-label {
	color: var(--cc-kbf-label-color);
	display: block;
	font-family: "Poppins", sans-serif;
	font-size: max(10px, calc(16 * var(--cc-kbf-u)));
	font-style: normal;
	font-weight: 400;
	line-height: 1.25;
	transition: color var(--cc-kbf-transition, 300ms) ease, text-shadow var(--cc-kbf-transition, 300ms) ease, background var(--cc-kbf-transition, 300ms) ease;
	white-space: nowrap;
}

.cc-kbf__node.is-active .cc-kbf__node-icon::before,
.cc-kbf__node.is-related .cc-kbf__node-icon::before {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.cc-kbf__node.is-active .cc-kbf__node-icon img,
.cc-kbf__node.is-related .cc-kbf__node-icon img {
	transform: scale(var(--cc-kbf-icon-active-scale));
}

.cc-kbf__node.is-active .cc-kbf__node-label,
.cc-kbf__node.is-related .cc-kbf__node-label {
	color: var(--cc-kbf-label-active);
	text-shadow: 0 0 12px rgba(105, 236, 255, 0.55);
}

.cc-kbf .cc-kbf__node:hover .cc-kbf__node-label {
	color: var(--cc-kbf-label-active);
}

.cc-kbf--dim.has-active .cc-kbf__node:not(.is-active):not(.is-related) {
	opacity: var(--cc-kbf-node-dim);
}

.cc-kbf .cc-kbf__node:focus-visible,
.cc-kbf .cc-kbf__pillar:focus-visible {
	border-radius: 8px;
	outline: 2px solid var(--cc-kbf-focus);
	outline-offset: 6px;
}

/* ---- Detail panel -------------------------------------------------------- */

.cc-kbf__panel {
	background: linear-gradient(180deg, rgba(105, 236, 255, 0.06), rgba(105, 236, 255, 0.02));
	border: 1px solid rgba(105, 236, 255, 0.22);
	border-radius: 14px;
	box-sizing: border-box;
	display: grid;
	align-items: center;
	max-width: 760px;
	min-height: 132px;
	padding: 24px 32px;
	text-align: center;
	width: 100%;
}

.cc-kbf__panel-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cc-kbf__panel-item[hidden] {
	display: none;
}

.cc-kbf__panel-item.is-entering {
	animation: cc-kbf-fade-in var(--cc-kbf-panel-fade, 350ms) ease both;
}

.cc-kbf__panel-kicker {
	color: var(--cc-kbf-accent);
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	line-height: 16px;
	margin: 0;
	text-transform: uppercase;
}

.cc-kbf__panel-title {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	margin: 0;
}

.cc-kbf__panel-text {
	color: rgba(255, 255, 255, 0.78);
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	margin: 0;
}

.cc-kbf__panel-link {
	color: var(--cc-kbf-accent);
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
	margin-top: 4px;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 200ms ease;
}

.cc-kbf__panel-link:hover,
.cc-kbf__panel-link:focus-visible {
	color: #fff;
}

/* ---- Capabilities row ---------------------------------------------------- */

.cc-kbf__pillars {
	align-items: center;
	column-gap: 92px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 20px;
}

.cc-kbf .cc-kbf__pillar {
	align-items: center;
	color: #fff;
	display: inline-flex;
	gap: 10px;
	padding: 4px 0 8px;
	position: relative;
	transition: color var(--cc-kbf-transition, 300ms) ease, opacity var(--cc-kbf-transition, 300ms) ease;
}

.cc-kbf__pillar::after {
	background: var(--cc-kbf-pillar-indicator);
	bottom: 0;
	content: "";
	height: var(--cc-kbf-pillar-indicator-height);
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--cc-kbf-transition, 300ms) ease;
}

.cc-kbf__pillar-icon {
	display: flex;
	flex: 0 0 auto;
}

.cc-kbf__pillar-icon img {
	display: block;
	max-width: none;
	transition: filter var(--cc-kbf-transition, 300ms) ease;
}

.cc-kbf__pillar-title {
	color: var(--cc-kbf-pillar-title-color, inherit);
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 30px;
	text-transform: capitalize;
	white-space: nowrap;
}

.cc-kbf .cc-kbf__pillar.is-active,
.cc-kbf .cc-kbf__pillar.is-active .cc-kbf__pillar-title {
	color: var(--cc-kbf-pillar-active);
}

/* "Display only" capabilities: not interactive. */
.cc-kbf .cc-kbf__pillar.is-static {
	cursor: default;
}

.cc-kbf__pillar.is-active::after {
	transform: scaleX(1);
}

.cc-kbf__pillar.is-active .cc-kbf__pillar-icon img {
	filter: drop-shadow(0 0 8px var(--cc-kbf-glow));
}

.cc-kbf--dim.has-active-pillar .cc-kbf__pillar:not(.is-active) {
	opacity: var(--cc-kbf-pillar-dim);
}

/* ---- Badge nodes (glowing circle around each icon) ----------------------
 * The badge is taller than the plain icon, so nodes shift up by the difference
 * to keep each label where the connector lines expect it.
 */

.cc-kbf--nodes-badge {
	--cc-kbf-label-color: #fff;
}

.cc-kbf.cc-kbf--nodes-badge .cc-kbf__node {
	transform: translate(-50%, calc((34 - var(--cc-kbf-badge-d)) * var(--cc-kbf-u)));
}

.cc-kbf--nodes-badge .cc-kbf__node-label {
	font-weight: 600;
}

.cc-kbf--nodes-badge .cc-kbf__node-icon {
	align-items: center;
	background: var(--cc-kbf-badge-bg);
	border: var(--cc-kbf-badge-border-w, 1px) solid var(--cc-kbf-badge-border);
	border-radius: 50%;
	box-shadow: 0 0 calc(18 * var(--cc-kbf-u)) var(--cc-kbf-badge-halo), inset 0 0 calc(12 * var(--cc-kbf-u)) rgba(105, 236, 255, 0.16);
	height: calc(var(--cc-kbf-badge-d) * var(--cc-kbf-u));
	transition: border-color var(--cc-kbf-transition, 300ms) ease, box-shadow var(--cc-kbf-transition, 300ms) ease, background var(--cc-kbf-transition, 300ms) ease, transform var(--cc-kbf-transition, 300ms) ease;
	width: calc(var(--cc-kbf-badge-d) * var(--cc-kbf-u));
}

.cc-kbf--nodes-badge .cc-kbf__node-icon img {
	height: calc(30 * var(--cc-kbf-u) * var(--cc-kbf-icon-scale));
}

.cc-kbf--nodes-badge .cc-kbf__node:hover .cc-kbf__node-icon,
.cc-kbf--nodes-badge .cc-kbf__node.is-active .cc-kbf__node-icon,
.cc-kbf--nodes-badge .cc-kbf__node.is-related .cc-kbf__node-icon {
	background: var(--cc-kbf-badge-bg-active, var(--cc-kbf-badge-bg));
	border-color: var(--cc-kbf-badge-border-active);
	transform: scale(var(--cc-kbf-badge-active-scale, 1));
	box-shadow: 0 0 calc(28 * var(--cc-kbf-u)) var(--cc-kbf-badge-halo), 0 0 0 calc(3 * var(--cc-kbf-u)) rgba(105, 236, 255, 0.12), inset 0 0 calc(16 * var(--cc-kbf-u)) rgba(105, 236, 255, 0.28);
}

/* Icons picked from the Elementor icon library (font icon or inline SVG). */
.cc-kbf__node-icon--library {
	align-items: center;
	color: var(--cc-kbf-icon-color);
	font-size: calc(30 * var(--cc-kbf-u) * var(--cc-kbf-icon-scale));
}

.cc-kbf__node:hover .cc-kbf__node-icon--library,
.cc-kbf__node.is-active .cc-kbf__node-icon--library,
.cc-kbf__node.is-related .cc-kbf__node-icon--library {
	color: var(--cc-kbf-icon-color-active, var(--cc-kbf-icon-color));
}

.cc-kbf--nodes-badge .cc-kbf__node-icon--library {
	font-size: calc(26 * var(--cc-kbf-u) * var(--cc-kbf-icon-scale));
}

.cc-kbf__node-icon--library i {
	display: block;
	font-size: inherit;
	line-height: 1;
}

.cc-kbf__node-icon--library svg {
	display: block;
	fill: currentColor;
	height: 1em;
	width: 1em;
}

.cc-kbf__node-icon--library > * {
	transition: transform var(--cc-kbf-transition, 300ms) ease;
}

.cc-kbf__node.is-active .cc-kbf__node-icon--library > *,
.cc-kbf__node.is-related .cc-kbf__node-icon--library > * {
	transform: scale(var(--cc-kbf-icon-active-scale));
}

/* ---- Connector end dots (positions from the Figma line geometry) -------- */

.cc-kbf__dot {
	background: var(--cc-kbf-dot);
	border-radius: 50%;
	box-shadow: 0 0 calc(var(--cc-kbf-dot-glow, 8) * var(--cc-kbf-u)) var(--cc-kbf-dot), 0 0 calc(2 * var(--cc-kbf-u)) #fff;
	display: block;
	height: max(4px, calc(var(--cc-kbf-dot-d) * var(--cc-kbf-u)));
	opacity: var(--cc-kbf-line-opacity);
	pointer-events: none;
	position: absolute;
	transform: translate(-50%, -50%);
	transition: opacity var(--cc-kbf-transition, 300ms) ease, transform var(--cc-kbf-transition, 300ms) ease;
	width: max(4px, calc(var(--cc-kbf-dot-d) * var(--cc-kbf-u)));
	z-index: 1;
}

.cc-kbf__dot--slot-1-outer { left: 15.929%; top: 64.301%; }
.cc-kbf__dot--slot-1-inner { left: 34.684%; top: 74.377%; }
.cc-kbf__dot--slot-2-outer { left: 30.556%; top: 32.626%; }
.cc-kbf__dot--slot-2-inner { left: 41.234%; top: 66.213%; }
.cc-kbf__dot--slot-3-outer { left: 47.882%; top: 26.605%; }
.cc-kbf__dot--slot-3-inner { left: 47.807%; top: 65.22%; }
.cc-kbf__dot--slot-4-outer { left: 64.602%; top: 32.626%; }
.cc-kbf__dot--slot-4-inner { left: 53.995%; top: 66.213%; }
.cc-kbf__dot--slot-5-outer { left: 79.266%; top: 64.087%; }
.cc-kbf__dot--slot-5-inner { left: 60.511%; top: 74.162%; }

.cc-kbf__dot.is-active {
	background: var(--cc-kbf-dot-active, var(--cc-kbf-dot));
	opacity: 1;
	transform: translate(-50%, -50%) scale(var(--cc-kbf-dot-active-scale, 1.4));
}

.cc-kbf--dim.has-active .cc-kbf__dot:not(.is-active) {
	opacity: var(--cc-kbf-line-dim);
}

/* ---- Orbit rings around the podium (centred on the glowing ring) -------- */

.cc-kbf__orbits {
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.cc-kbf__orbits span {
	aspect-ratio: 100 / 26;
	border: var(--cc-kbf-orbit-w, 1px) solid var(--cc-kbf-orbit);
	border-radius: 50%;
	box-sizing: border-box;
	left: 47.888%;
	position: absolute;
	top: 77.651%;
	transform: translate(-50%, -50%);
}

.cc-kbf__orbits span:nth-child(1) {
	width: calc(46% * var(--cc-kbf-orbit-scale, 1));
}

.cc-kbf__orbits span:nth-child(2) {
	opacity: 0.7;
	width: calc(68% * var(--cc-kbf-orbit-scale, 1));
}

.cc-kbf__orbits span:nth-child(3) {
	border-style: dashed;
	opacity: 0.5;
	width: calc(92% * var(--cc-kbf-orbit-scale, 1));
}

/* ---- Panel: accent bar + intro button ------------------------------------ */

.cc-kbf__panel-bar {
	background: var(--cc-kbf-accent);
	border-radius: 2px;
	display: block;
	height: 2px;
	justify-self: center;
	margin-bottom: 18px;
	width: 32px;
}

.cc-kbf--split .cc-kbf__panel-bar {
	justify-self: start;
	margin-bottom: 22px;
}

.cc-kbf .cc-kbf__panel-cta {
	-webkit-appearance: none;
	align-items: center;
	align-self: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--cc-kbf-accent);
	cursor: pointer;
	display: inline-flex;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 600;
	gap: 10px;
	letter-spacing: normal;
	line-height: 24px;
	margin: 14px 0 0;
	min-height: 0;
	padding: 0;
	text-transform: none;
	transition: color 200ms ease;
}

.cc-kbf--split .cc-kbf__panel-cta {
	align-self: flex-start;
	margin-top: 18px;
}

.cc-kbf .cc-kbf__panel-cta:hover,
.cc-kbf .cc-kbf__panel-cta:focus {
	background: transparent;
	color: #fff;
}

.cc-kbf .cc-kbf__panel-cta:focus-visible {
	border-radius: 4px;
	outline: 2px solid var(--cc-kbf-focus);
	outline-offset: 4px;
}

.cc-kbf__panel-cta span {
	transition: transform 200ms ease;
}

.cc-kbf__panel-cta:hover span,
.cc-kbf__panel-cta:focus-visible span {
	transform: translateX(4px);
}

/* Glass card when the panel sits beside the diagram. */
.cc-kbf--split .cc-kbf__panel {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background: linear-gradient(160deg, rgba(28, 56, 130, 0.42) 0%, rgba(8, 18, 52, 0.6) 100%);
	border: 1px solid rgba(105, 236, 255, 0.38);
	border-radius: 14px;
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7), inset 0 0 48px rgba(70, 140, 255, 0.08);
	min-height: 0;
	padding: 36px 32px;
}

.cc-kbf--split .cc-kbf__panel-item {
	gap: 14px;
}

.cc-kbf--split .cc-kbf__panel-title {
	font-size: 28px;
	line-height: 1.22;
}

/* ---- Capability cards ---------------------------------------------------- */

.cc-kbf--pillars-cards .cc-kbf__pillars {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cc-kbf-pillar-card-min)), 1fr));
	width: 100%;
}

.cc-kbf.cc-kbf--pillars-cards .cc-kbf__pillar {
	align-items: center;
	background: var(--cc-kbf-pillar-card-bg);
	border: var(--cc-kbf-pillar-card-border-w, 1px) solid var(--cc-kbf-pillar-card-border);
	border-radius: var(--cc-kbf-pillar-card-radius);
	box-sizing: border-box;
	display: flex;
	gap: 22px;
	height: 100%;
	padding: 24px 28px;
	text-align: left;
	transition-duration: var(--cc-kbf-pillar-transition, 300ms);
	transition-property: background, border-color, box-shadow, color, opacity, transform;
	transition-timing-function: ease;
	width: 100%;
}

.cc-kbf.cc-kbf--pillars-cards .cc-kbf__pillar:hover,
.cc-kbf.cc-kbf--pillars-cards .cc-kbf__pillar:focus-visible,
.cc-kbf.cc-kbf--pillars-cards .cc-kbf__pillar.is-active {
	background: var(--cc-kbf-pillar-card-bg-active);
	border-color: var(--cc-kbf-pillar-card-border-active);
	box-shadow: 0 0 32px -10px rgba(105, 236, 255, 0.55);
}

.cc-kbf.cc-kbf--pillars-cards .cc-kbf__pillar:not(.is-static):hover {
	transform: translateY(calc(var(--cc-kbf-pillar-lift, 0px) * -1));
}

/* Display-only cards keep their normal look on hover. */
.cc-kbf.cc-kbf--pillars-cards .cc-kbf__pillar.is-static:hover {
	background: var(--cc-kbf-pillar-card-bg);
	border-color: var(--cc-kbf-pillar-card-border);
	box-shadow: none;
	transform: none;
}

.cc-kbf--pillars-cards .cc-kbf__pillar::after {
	display: none;
}

/* Per-capability colors are set as variables on the item (Content > item > Style). */
.cc-kbf--pillars-cards .cc-kbf__pillar-icon {
	align-items: center;
	background: var(--cc-kbf-pillar-badge-bg, var(--cc-kbf-badge-bg));
	border: var(--cc-kbf-pillar-badge-border-w, 1px) solid var(--cc-kbf-pillar-badge-border, var(--cc-kbf-badge-border));
	border-radius: 50%;
	box-shadow: 0 0 18px var(--cc-kbf-pillar-badge-halo, var(--cc-kbf-badge-halo)), inset 0 0 12px rgba(105, 236, 255, 0.16);
	box-sizing: border-box;
	height: var(--cc-kbf-pillar-badge);
	justify-content: center;
	transition: background var(--cc-kbf-pillar-transition, 300ms) ease, border-color var(--cc-kbf-pillar-transition, 300ms) ease;
	width: var(--cc-kbf-pillar-badge);
}

.cc-kbf--pillars-cards .cc-kbf__pillar.is-active .cc-kbf__pillar-icon,
.cc-kbf--pillars-cards .cc-kbf__pillar:not(.is-static):hover .cc-kbf__pillar-icon {
	background: var(--cc-kbf-pillar-badge-bg-active, var(--cc-kbf-pillar-badge-bg, var(--cc-kbf-badge-bg)));
	border-color: var(--cc-kbf-pillar-badge-border-active, var(--cc-kbf-pillar-badge-border, var(--cc-kbf-badge-border)));
}

.cc-kbf--pillars-cards .cc-kbf__pillar-icon img {
	height: calc(var(--cc-kbf-pillar-badge) * 0.46);
	width: auto;
}

/*
 * The divider faces the icon: --cc-kbf-pillar-div-{side,top,end} are 1/0 flags
 * set by the Icon Position control (left by default).
 */
.cc-kbf__pillar-body {
	border: 0 solid var(--cc-kbf-pillar-divider);
	border-left-width: calc(var(--cc-kbf-pillar-divider-w, 1px) * var(--cc-kbf-pillar-div-side, 1));
	border-right-width: calc(var(--cc-kbf-pillar-divider-w, 1px) * var(--cc-kbf-pillar-div-end, 0));
	border-top-width: calc(var(--cc-kbf-pillar-divider-w, 1px) * var(--cc-kbf-pillar-div-top, 0));
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding-left: calc(var(--cc-kbf-pillar-divider-gap, 22px) * var(--cc-kbf-pillar-div-side, 1));
	padding-right: calc(var(--cc-kbf-pillar-divider-gap, 22px) * var(--cc-kbf-pillar-div-end, 0));
	padding-top: calc(var(--cc-kbf-pillar-divider-gap, 22px) * var(--cc-kbf-pillar-div-top, 0));
}

/* Wrapping only kicks in when the body is forced to full width (below). */
.cc-kbf--pillars-cards .cc-kbf__pillar {
	align-content: flex-start;
	flex-wrap: wrap;
}

.cc-kbf--pillars-cards .cc-kbf__pillar-body {
	flex: 1 1 0%;
}

.cc-kbf-autostack-yes .cc-kbf--pillars-cards .cc-kbf__pillar {
	container: cc-kbf-pillar / inline-size;
}

/* Narrow cards: the text drops below the icon and the divider moves on top. */
@container cc-kbf-pillar (max-width: 320px) {
	.cc-kbf-autostack-yes .cc-kbf--pillars-cards .cc-kbf__pillar-body {
		border-left-width: 0;
		border-right-width: 0;
		border-top-width: var(--cc-kbf-pillar-divider-w, 1px);
		flex-basis: var(--cc-kbf-pillar-stack-basis, 100%);
		padding-left: 0;
		padding-right: 0;
		padding-top: min(var(--cc-kbf-pillar-divider-gap, 22px), 16px);
	}
}

.cc-kbf--pillars-cards .cc-kbf__pillar-title {
	font-size: 18px;
	line-height: 26px;
	white-space: normal;
}

.cc-kbf__pillar-summary {
	color: var(--cc-kbf-pillar-summary-color, rgba(255, 255, 255, 0.72));
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	text-transform: none;
}

/* Tighter default card spacing on phones (Elementor controls still override). */
@media (max-width: 767px) {
	.cc-kbf.cc-kbf--pillars-cards .cc-kbf__pillar {
		gap: 16px;
		padding: 20px;
	}

	.cc-kbf--pillars-cards .cc-kbf__pillars {
		gap: 16px;
	}
}

/* Two-column panel stacked on narrow widgets: centre the bar and button too. */
@container cc-kbf-root (max-width: 960px) {
	.cc-kbf--split .cc-kbf__panel-bar {
		justify-self: center;
	}

	.cc-kbf--split .cc-kbf__panel-cta {
		align-self: center;
	}
}

/* ---- Narrow layout: cards (container query on the widget itself) ------- */

@container cc-kbf (max-width: 880px) {
	.cc-kbf__stage {
		align-items: center;
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.cc-kbf__line {
		display: none;
	}

	.cc-kbf__podium {
		aspect-ratio: 673.323 / 260.206;
		height: auto;
		left: auto;
		order: 2;
		position: relative;
		top: auto;
		width: var(--cc-kbf-card-podium-width);
	}

	.cc-kbf__nodes {
		display: grid;
		gap: 12px;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cc-kbf-card-min)), 1fr));
		order: 1;
		width: 100%;
	}

	.cc-kbf .cc-kbf__node {
		background: var(--cc-kbf-card-bg);
		border: 1px solid var(--cc-kbf-card-border);
		border-radius: var(--cc-kbf-card-radius);
		box-sizing: border-box;
		gap: 10px;
		justify-content: center;
		left: auto;
		padding: var(--cc-kbf-card-padding) 12px;
		position: relative;
		top: auto;
		transform: none;
		transition: opacity var(--cc-kbf-transition, 300ms) ease, background-color var(--cc-kbf-transition, 300ms) ease, border-color var(--cc-kbf-transition, 300ms) ease;
	}

	.cc-kbf .cc-kbf__node.is-active,
	.cc-kbf .cc-kbf__node.is-related {
		background: var(--cc-kbf-card-bg-active);
		border-color: var(--cc-kbf-card-border-active);
	}

	.cc-kbf__node-icon {
		height: calc(34px * var(--cc-kbf-icon-scale));
	}

	.cc-kbf__node-label {
		font-size: var(--cc-kbf-card-label-size);
		hyphens: auto;
		max-width: 100%;
		overflow-wrap: break-word;
		white-space: normal;
	}

	.cc-kbf__pillars {
		column-gap: 32px;
	}

	.cc-kbf__pillar-title {
		font-size: 18px;
		line-height: 26px;
		white-space: normal;
	}

	.cc-kbf.cc-kbf--nodes-badge .cc-kbf__node {
		transform: none;
	}

	.cc-kbf--nodes-badge .cc-kbf__node-icon {
		height: 52px;
		width: 52px;
	}

	.cc-kbf--nodes-badge .cc-kbf__node-icon img {
		height: 26px;
	}

	.cc-kbf__node-icon--library,
	.cc-kbf--nodes-badge .cc-kbf__node-icon--library {
		font-size: 24px;
	}

	.cc-kbf__dot,
	.cc-kbf__orbits {
		display: none;
	}
}

/*
 * Same card layout for the two-column mode, keyed to the diagram column with a
 * lower threshold (the diagram is still legible at ~640px). Keep in sync with
 * the block above.
 */
@container cc-kbf-visual (max-width: 640px) {
	.cc-kbf__stage {
		align-items: center;
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	.cc-kbf__line {
		display: none;
	}

	.cc-kbf__podium {
		aspect-ratio: 673.323 / 260.206;
		height: auto;
		left: auto;
		order: 2;
		position: relative;
		top: auto;
		width: var(--cc-kbf-card-podium-width);
	}

	.cc-kbf__nodes {
		display: grid;
		gap: 12px;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cc-kbf-card-min)), 1fr));
		order: 1;
		width: 100%;
	}

	.cc-kbf .cc-kbf__node {
		background: var(--cc-kbf-card-bg);
		border: 1px solid var(--cc-kbf-card-border);
		border-radius: var(--cc-kbf-card-radius);
		box-sizing: border-box;
		gap: 10px;
		justify-content: center;
		left: auto;
		padding: var(--cc-kbf-card-padding) 12px;
		position: relative;
		top: auto;
		transform: none;
		transition: opacity var(--cc-kbf-transition, 300ms) ease, background-color var(--cc-kbf-transition, 300ms) ease, border-color var(--cc-kbf-transition, 300ms) ease;
	}

	.cc-kbf .cc-kbf__node.is-active,
	.cc-kbf .cc-kbf__node.is-related {
		background: var(--cc-kbf-card-bg-active);
		border-color: var(--cc-kbf-card-border-active);
	}

	.cc-kbf__node-icon {
		height: calc(34px * var(--cc-kbf-icon-scale));
	}

	.cc-kbf__node-label {
		font-size: var(--cc-kbf-card-label-size);
		hyphens: auto;
		max-width: 100%;
		overflow-wrap: break-word;
		white-space: normal;
	}

	.cc-kbf__pillar-title {
		font-size: 18px;
		line-height: 26px;
		white-space: normal;
	}

	.cc-kbf.cc-kbf--nodes-badge .cc-kbf__node {
		transform: none;
	}

	.cc-kbf--nodes-badge .cc-kbf__node-icon {
		height: 52px;
		width: 52px;
	}

	.cc-kbf--nodes-badge .cc-kbf__node-icon img {
		height: 26px;
	}

	.cc-kbf__node-icon--library,
	.cc-kbf--nodes-badge .cc-kbf__node-icon--library {
		font-size: 24px;
	}

	.cc-kbf__dot,
	.cc-kbf__orbits {
		display: none;
	}
}

@media (max-width: 767px) {
	.cc-kbf {
		--cc-kbf-gap: 36px;
		gap: 36px;
		padding: 56px 20px;
	}

	.cc-kbf__panel {
		min-height: 0;
		padding: 20px;
	}
}

/* ---- Motion -------------------------------------------------------------- */

@keyframes cc-kbf-ring-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.55;
	}
}

@keyframes cc-kbf-line-glow {
	0%,
	100% {
		filter: drop-shadow(0 0 calc(var(--cc-kbf-line-glow-size) * 0.4) var(--cc-kbf-line-glow));
	}

	50% {
		filter: drop-shadow(0 0 calc(var(--cc-kbf-line-glow-size) * 0.5) var(--cc-kbf-line-glow)) drop-shadow(0 0 var(--cc-kbf-line-glow-size) var(--cc-kbf-line-glow));
	}
}

@keyframes cc-kbf-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-kbf--pulse .cc-kbf__ring-glow,
	.cc-kbf__line.is-active img,
	.cc-kbf__panel-item.is-entering {
		animation: none;
	}

	.cc-kbf *,
	.cc-kbf *::before,
	.cc-kbf *::after {
		transition-duration: 0ms !important;
	}
}