/* CTA Banner — Moyo Homepage Widget
   Full-width dark section with concentric rings, centered CTA.
   All colors use CSS variables from moyo-brand.css. */

.moyo-cta {
	position: relative;
	background: var(--moyo-hero-bg, #0c2340) !important;
	padding: 104px 0 112px;
	overflow: hidden;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}

.moyo-cta__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.04);
	pointer-events: none;
}
.moyo-cta__ring--1 { width: 800px; height: 800px; }
.moyo-cta__ring--2 { width: 580px; height: 580px; border-color: rgba(255, 255, 255, 0.05); }
.moyo-cta__ring--3 { width: 360px; height: 360px; border-color: rgba(255, 255, 255, 0.06); }

.moyo-cta__inner {
	position: relative;
	z-index: 1;
	max-width: var(--moyo-container-max, 1200px);
	margin: 0 auto;
	padding: 0 40px;
	text-align: center;
}

.moyo-cta__eyebrow {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--moyo-primary, #2563eb) !important;
	margin-bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.moyo-cta__eyebrow::before,
.moyo-cta__eyebrow::after {
	content: '';
	width: 20px;
	height: 2px;
	background: var(--moyo-primary, #2563eb);
	border-radius: 2px;
	opacity: 0.5;
}

.moyo-cta__title {
	font-family: var(--moyo-font-heading, 'DM Serif Display', serif) !important;
	font-size: 44px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	margin: 0 0 20px 0 !important;
	letter-spacing: -0.3px;
}
.moyo-cta__title em {
	color: var(--moyo-warning-border, #fcd34d) !important;
	font-style: italic;
}

.moyo-cta__subtitle {
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5) !important;
	margin: 0 auto 40px;
	max-width: 560px;
}

.moyo-cta__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
}
.moyo-cta__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 14px 32px !important;
	border-radius: var(--moyo-radius, 4px) !important;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
}

.moyo-cta__btn--white {
	background: var(--moyo-on-primary, #ffffff) !important;
	color: var(--moyo-heading, #0f172a) !important;
	border: 2px solid var(--moyo-on-primary, #ffffff) !important;
}
.moyo-cta__btn--white:hover {
	background: var(--moyo-primary, #2563eb) !important;
	border-color: var(--moyo-primary, #2563eb) !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	text-decoration: none !important;
	box-shadow: 0 2px 12px rgba(var(--moyo-primary-rgb, 37, 99, 235), 0.4) !important;
}

.moyo-cta__btn--outline {
	background: transparent !important;
	color: var(--moyo-on-primary, #ffffff) !important;
	border: 2px solid rgba(255, 255, 255, 0.5) !important;
}
.moyo-cta__btn--outline:hover {
	background: var(--moyo-on-primary, #ffffff) !important;
	border-color: var(--moyo-on-primary, #ffffff) !important;
	color: var(--moyo-heading, #0f172a) !important;
	text-decoration: none !important;
}

@media (max-width: 960px) {
	.moyo-cta__title { font-size: 38px !important; }
}
@media (max-width: 640px) {
	.moyo-cta { padding: 64px 0 72px; }
	.moyo-cta__inner { padding: 0 20px; }
	.moyo-cta__title { font-size: 30px !important; }
	.moyo-cta__subtitle { font-size: 15px; }
	.moyo-cta__actions { flex-direction: column; align-items: center; }
	.moyo-cta__btn { width: 100%; max-width: 320px; text-align: center; }
}