/* ==========================================================
   Roomcility afsluitende oproep
   Blauw vlak met de ring uit het logo. De punten liggen op de
   bolletjes van de ring, de pen zet er een vinkje in.
   Ring en punten delen dezelfde maat, 560 bij 560.
   ========================================================== */

.rc-cta {
	--rc-cta-bg: #fff;
	--rc-cta-pt: 20px;
	--rc-cta-pb: 120px;
	--rc-cta-pt-m: 0px;
	--rc-cta-pb-m: 80px;
	--_ring: 560px;

	padding: var(--rc-cta-pt) 0 var(--rc-cta-pb);
	background: var(--rc-cta-bg);
}
.rc-cta__wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }

.rc-cta__box {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: 48px;
	align-items: center;
	min-height: 420px;
	padding: 72px 64px;
	border-radius: 32px;
	background: var(--rc-cta-box, var(--rc-grad));
	color: #fff;
}

/* Ring en punten liggen op dezelfde plek, half buiten het vlak */
.rc-cta__ring,
.rc-cta__points {
	position: absolute;
	right: -140px;
	top: 50%;
	width: var(--_ring);
	height: var(--_ring);
	margin-top: calc(var(--_ring) / -2);
	pointer-events: none;
}
.rc-cta__ring { opacity: .22; }
.rc-cta__ring circle { fill: none; stroke: #fff; stroke-width: 1.5; }
.rc-cta__ring .rc-cta__dot { fill: var(--rc-accent-deep); stroke-width: 2; }

/* ── Tekst en knoppen ── */
.rc-cta__copy { position: relative; z-index: 1; }
.rc-cta__hand { margin: 0 0 8px; font-size: 32px; color: rgba(255, 255, 255, .85); transform: rotate(-4deg); }
.rc-cta__title { margin: 0; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.rc-cta__intro { margin: 18px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.rc-cta__acts { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.rc-cta__acts .rc-btn { height: 52px; padding: 0 26px; font-size: 15px; }
.rc-cta__note {
	position: absolute;
	left: 96px;
	top: 66px;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-family: var(--rc-hand);
	font-size: 24px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	transform: rotate(-3deg);
}
.rc-cta__arrow { width: 52px; height: 40px; margin-top: -28px; transform: scaleX(-1); --rc-pen: #fff; --rc-pen-width: 2.2; --rc-pen-delay: .4s; --rc-pen-speed: .6s; }

/* ── Punten op de ring ── */
.rc-cta__points { z-index: 1; margin-bottom: 0; padding: 0; list-style: none; }
.rc-cta__points li {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: flex;
	align-items: center;
	gap: 14px;
	width: 250px;
	margin: -22px 0 0 -22px;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.3;
	color: #fff;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .4s, transform .5s var(--rc-ease);
	transition-delay: calc(.2s + var(--i) * .3s);
}
.rc-cta.is-play .rc-cta__points li { opacity: 1; transform: none; }
.rc-cta__node {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 2px solid rgba(255, 255, 255, .75);
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	box-sizing: border-box;
}
.rc-cta__tick {
	position: absolute;
	left: 6px;
	top: -6px;
	width: 36px;
	height: 34px;
	transform: rotate(-6deg);
	--rc-pen: #fff;
	--rc-pen-width: 3;
	--rc-pen-speed: .4s;
	--rc-pen-delay: calc(.6s + var(--i) * .35s);
}

/* ── Tablet en mobiel ── */
@media (max-width: 1100px) {
	.rc-cta { padding: var(--rc-cta-pt-m) 0 var(--rc-cta-pb-m); }
	.rc-cta__wrap { padding: 0 14px; }
	.rc-cta__box { grid-template-columns: 1fr; gap: 40px; min-height: 0; padding: 48px 24px 40px; border-radius: 26px; }
	.rc-cta__ring { --_ring: 420px; right: -180px; top: -60px; margin-top: 0; }
	.rc-cta__title { font-size: 32px; }
	.rc-cta__intro { font-size: 16px; }
	.rc-cta__acts .rc-btn { flex: 1 1 auto; }
	.rc-cta__note { position: static; flex-basis: 100%; margin: 14px 0 0 20px; font-size: 22px; }
	.rc-cta__points { position: static; display: flex; flex-direction: column; gap: 14px; width: auto; height: auto; margin: 0; }
	.rc-cta__points li { position: static; width: auto; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.rc-cta__points li { opacity: 1; transform: none; transition: none; }
}