/* ===========================================================
   RewardRace — CTA Banner v2
   Purple gradient panel — the primary conversion moment.
   =========================================================== */

.rrew-cta {
	font-family: var(--rr-font-sans);
	box-sizing: border-box;
	padding: var(--rr-section-y) 0;
}
.rrew-cta *, .rrew-cta *::before, .rrew-cta *::after { box-sizing: border-box; }

.rrew-cta__inner {
	max-width: var(--rr-container);
	margin: 0 auto;
	padding: 0 var(--rr-section-x);
}

.rrew-cta__container {
	position: relative;
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	border-radius: var(--rr-radius-2xl);
	padding: var(--rr-space-16) var(--rr-space-20);
	overflow: hidden;
	min-height: 280px;
	display: flex;
	align-items: center;
	box-shadow: var(--rr-shadow-brand-lg);
}

/* Dark variant (solid ink, purple accent) */
.rrew-cta--dark .rrew-cta__container {
	background: var(--rr-ink);
	color: #FFFFFF;
	box-shadow: var(--rr-shadow-xl);
}
.rrew-cta--dark .rrew-cta__container::before {
	background: radial-gradient(circle, rgba(87, 63, 211, .55), transparent 65%);
}

/* Light variant (white card) */
.rrew-cta--light .rrew-cta__container {
	background: var(--rr-bg);
	color: var(--rr-heading);
	box-shadow: var(--rr-shadow-md);
	border: 1px solid var(--rr-border);
}

.rrew-cta__circle,
.rrew-cta__container::before {
	content: "";
	position: absolute;
	top: -20%;
	right: -8%;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 65%);
	filter: blur(40px);
}
.rrew-cta__circle { display: none; }

.rrew-cta__container::after {
	content: "";
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(circle, rgba(0, 0, 0, .20), transparent 70%);
	filter: blur(60px);
}
.rrew-cta--light .rrew-cta__container::before {
	background: radial-gradient(circle, rgba(87, 63, 211, .28), transparent 65%);
}
.rrew-cta--light .rrew-cta__container::after {
	background: radial-gradient(circle, rgba(139, 115, 255, .16), transparent 70%);
}

.rrew-cta__content {
	position: relative;
	z-index: 1;
	max-width: 62%;
	min-width: 0;
}

.rrew-cta .rrew-cta__title {
	font-size: var(--rr-fs-h1);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-tight);
	line-height: var(--rr-lh-tight);
	margin: 0 0 var(--rr-space-5);
	color: inherit;
	text-wrap: balance;
}
.rrew-cta__title-lead { display: inline; }
.rrew-cta__title-accent {
	display: inline;
	color: white !important;
	font-weight: 800;
	margin-left: .12em;
}
.rrew-cta--light .rrew-cta__title-accent { color: var(--rr-brand); }

.rrew-cta__desc {
	font-size: var(--rr-fs-lg);
	line-height: var(--rr-lh-relaxed);
	color: rgba(255, 255, 255, .82);
	margin: 0 0 var(--rr-space-8);
	max-width: 52ch;
	font-weight: 500;
}
.rrew-cta--light .rrew-cta__desc { color: var(--rr-muted); }

.rrew-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rr-space-3);
	position: relative;
	z-index: 1;
}

.rrew-cta .rrew-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	padding: 16px 28px;
	border-radius: var(--rr-radius-pill);
	text-decoration: none;
	font-size: var(--rr-fs-sm);
	font-weight: 700;
	letter-spacing: var(--rr-tracking-snug);
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color var(--rr-dur-fast) var(--rr-ease-out),
	            color var(--rr-dur-fast) var(--rr-ease-out),
	            border-color var(--rr-dur-fast) var(--rr-ease-out),
	            transform var(--rr-dur-fast) var(--rr-ease-out),
	            box-shadow var(--rr-dur-fast) var(--rr-ease-out);
	line-height: 1;
	cursor: pointer;
}

.rrew-cta .rrew-cta__btn--primary {
	background: #FFFFFF;
	color: var(--rr-brand);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.rrew-cta .rrew-cta__btn--primary:hover {
	background: var(--rr-ink);
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: var(--rr-shadow-lg);
}

.rrew-cta .rrew-cta__btn--secondary {
	background: transparent;
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, .30);
}
.rrew-cta .rrew-cta__btn--secondary:hover {
	border-color: rgba(255, 255, 255, .6);
	background: rgba(255,255,255,.1);
	transform: translateY(-1px);
}

.rrew-cta--light .rrew-cta .rrew-cta__btn--primary {
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	box-shadow: var(--rr-shadow-brand-sm);
}
.rrew-cta--light .rrew-cta .rrew-cta__btn--primary:hover {
	background: var(--rr-ink);
	color: #FFFFFF;
	box-shadow: var(--rr-shadow-md);
}
.rrew-cta--light .rrew-cta .rrew-cta__btn--secondary {
	color: var(--rr-ink);
	border-color: var(--rr-border-strong);
}
.rrew-cta--light .rrew-cta .rrew-cta__btn--secondary:hover {
	border-color: var(--rr-ink);
	background: color-mix(in srgb, var(--rr-ink) 5%, transparent);
}

.rrew-cta__arrow { transition: transform var(--rr-dur-base) var(--rr-ease-out); }
.rrew-cta__btn:hover .rrew-cta__arrow { transform: translateX(3px); }

@media (max-width: 1024px) {
	.rrew-cta__container { padding: var(--rr-space-12); }
	.rrew-cta__content { max-width: 72%; }
}

@media (max-width: 760px) {
	.rrew-cta { padding: var(--rr-space-8) 0 var(--rr-section-y); }
	.rrew-cta__container { padding: var(--rr-space-10) var(--rr-space-6); min-height: 0; }
	.rrew-cta__content { max-width: 100%; }
	.rrew-cta__desc { max-width: none; }
	.rrew-cta__container::before { width: 360px; height: 360px; opacity: .6; }
	.rrew-cta__container::after { width: 260px; height: 260px; }
}

@media (max-width: 480px) {
	.rrew-cta__inner { padding: 0 var(--rr-space-4); }
	.rrew-cta__container { padding: var(--rr-space-8) var(--rr-space-5); border-radius: var(--rr-radius-xl); }
	.rrew-cta .rrew-cta__btn { padding: 14px 22px; font-size: var(--rr-fs-xs); flex: 1 1 auto; justify-content: center; }
}