/**
 * CTA band — navy (default) · soft
 */

.cta-band {
	background-color: var(--color-brand);
	color: var(--color-text-on-dark);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: var(--shadow-soft);
}

.cta-band--soft {
	background-color: var(--color-surface-soft);
	color: var(--color-text);
	border-color: var(--color-border);
}

.cta-band--soft .cta-band__title {
	color: var(--color-brand);
}

.cta-band--soft .cta-band__text {
	color: var(--color-text-muted);
	opacity: 1;
}

.cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
}

.cta-band__title {
	font-size: var(--text-h3);
	margin: 0 0 var(--space-2);
	color: var(--color-text-on-dark);
	font-family: var(--font-heading);
}

.cta-band__text {
	margin: 0;
	font-size: var(--text-body);
	opacity: 0.95;
	line-height: var(--leading-body);
	max-width: 36rem;
}

.cta-band .btn-primary,
.cta-band .btn--primary {
	background: var(--color-surface);
	color: var(--color-brand);
	border-color: var(--color-surface);
	box-shadow: none;
}

.cta-band .btn-primary:hover,
.cta-band .btn--primary:hover {
	background: var(--color-surface-soft);
	color: var(--color-brand-dark);
}

.cta-band--soft .btn-primary,
.cta-band--soft .btn--primary {
	background: var(--color-accent);
	color: var(--color-surface);
	border-color: var(--color-accent);
}

.cta-band--soft .btn-primary:hover,
.cta-band--soft .btn--primary:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-surface);
}

.cta-band .btn-ghost,
.cta-band .btn--ghost,
.cta-band .btn-outline {
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--color-text-on-dark);
	background: transparent;
}

.cta-band .btn-ghost:hover,
.cta-band .btn--ghost:hover,
.cta-band .btn-outline:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--color-text-on-dark);
}

.cta-band--soft .btn-outline,
.cta-band--soft .btn-ghost {
	border-color: rgba(22, 59, 109, 0.28);
	color: var(--color-brand);
}

.cta-band--soft .btn-outline:hover,
.cta-band--soft .btn-ghost:hover {
	background: var(--color-surface);
}