.bl-rb-commercial-hero {
	position: relative;
	overflow: hidden;
}

.bl-rb-commercial-hero__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bl-space-8);
	align-items: center;
}

@media (min-width: 1024px) {
	.bl-rb-commercial-hero__container {
		grid-template-columns: 1fr 1fr;
		gap: var(--bl-space-12);
	}
}

.bl-rb-commercial-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--bl-space-6);
	z-index: 2;
}

.bl-rb-commercial-hero__headline {
	margin: 0;
	max-width: 16ch;
}

.bl-rb-commercial-hero__lead {
	margin: 0;
	color: var(--bl-text-secondary);
	max-width: 46ch;
}

.bl-rb-commercial-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bl-space-4);
	margin-top: var(--bl-space-2);
}

/* Visual Stage */
.bl-rb-commercial-hero__visual {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--bl-radius-lg);
	background: radial-gradient(circle at center, rgba(61, 191, 176, 0.04) 0%, transparent 60%);
	border: 1px solid var(--bl-border);
}

.bl-rb-commercial-hero__stage {
	width: 100%;
	height: 100%;
	padding: var(--bl-space-4);
}

.bl-rb-ch-svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.bl-rb-ch-pulse-circle {
	fill: transparent;
	stroke: var(--bl-color-brand);
	stroke-width: 1.5;
	opacity: 0;
}

/* Animations for CRM pipeline cards (Lead turning into Client) */
@keyframes leadJourney {
	0%, 5% { 
		transform: translate(64px, 80px); 
		opacity: 0; 
	}
	10%, 25% { 
		transform: translate(64px, 120px); /* Drops into LEAD */
		opacity: 1; 
	}
	35%, 50% { 
		transform: translate(144px, 160px); /* Moves to FIT */
		opacity: 1; 
	}
	60%, 75% { 
		transform: translate(224px, 200px); /* Moves to CONVERSA */
		opacity: 1; 
	}
	85%, 95% { 
		transform: translate(304px, 240px); /* Moves to CLIENTE */
		opacity: 1; 
	}
	100% { 
		transform: translate(304px, 280px); /* Drops out */
		opacity: 0; 
	}
}

@keyframes leadSuccessColor {
	0%, 75% { opacity: 0.5; }
	85%, 100% { opacity: 1; fill: #3DBFB0; }
}

.bl-rb-ch-card {
	transform-origin: center;
}

.bl-rb-ch-card--1 {
	animation: leadJourney 9s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.bl-rb-ch-card--1 rect:first-child {
	animation: leadSuccessColor 9s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.bl-rb-ch-card--2 {
	animation: leadJourney 9s infinite cubic-bezier(0.4, 0, 0.2, 1) -3s;
}
.bl-rb-ch-card--2 rect:first-child {
	animation: leadSuccessColor 9s infinite cubic-bezier(0.4, 0, 0.2, 1) -3s;
}

.bl-rb-ch-card--3 {
	animation: leadJourney 9s infinite cubic-bezier(0.4, 0, 0.2, 1) -6s;
}
.bl-rb-ch-card--3 rect:first-child {
	animation: leadSuccessColor 9s infinite cubic-bezier(0.4, 0, 0.2, 1) -6s;
}