.srctc-steps {
	--srctc-circle: 72px;
	--srctc-accent: #6c5ce7;
	--srctc-accent-2: #8f7dff;
	--srctc-circle-bg: #fff;
	--srctc-halo: #fff;
	--srctc-line: #e9ecf3;
	--srctc-gap: 24px;
	--srctc-active: 0;
	--srctc-span: 4;

	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--srctc-cols, 5), minmax(0, 1fr));
	column-gap: var(--srctc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* base line – fades out at both ends */
.srctc-steps::before,
.srctc-steps::after {
	content: "";
	position: absolute;
	top: calc(var(--srctc-circle) / 2 - 1px);
	height: 2px;
	border-radius: 2px;
}

.srctc-steps::before {
	left: 0;
	right: 0;
	background: var(--srctc-line);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* progress line – runs from first circle to the highlighted one */
.srctc-steps::after {
	--col-w: calc((100% - (var(--srctc-cols) - 1) * var(--srctc-gap)) / var(--srctc-cols));
	left: calc(var(--col-w) / 2);
	width: calc(var(--srctc-active) * (var(--col-w) + var(--srctc-gap)));
	background: linear-gradient(90deg, var(--srctc-accent), var(--srctc-accent-2));
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(.65, 0, .35, 1);
}

.srctc-step {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	text-align: center;
}

.srctc-step__circle {
	display: grid;
	place-items: center;
	width: var(--srctc-circle);
	height: var(--srctc-circle);
	margin: 0 auto 24px;
	border-radius: 50%;
	background: var(--srctc-circle-bg);
	color: var(--srctc-accent);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	box-shadow:
		0 0 0 10px var(--srctc-halo),
		0 0 0 11px color-mix(in srgb, var(--srctc-accent) 10%, transparent),
		0 12px 32px rgba(30, 30, 80, .10);
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

/* highlighted step: gradient + glow */
.srctc-step.is-active .srctc-step__circle {
	background: linear-gradient(135deg, var(--srctc-accent), var(--srctc-accent-2));
	color: #fff;
	box-shadow:
		0 0 0 10px var(--srctc-halo),
		0 0 0 11px color-mix(in srgb, var(--srctc-accent) 22%, transparent),
		0 14px 34px color-mix(in srgb, var(--srctc-accent) 42%, transparent);
}

/* hover */
.srctc-steps[data-hover="yes"] .srctc-step:hover .srctc-step__circle {
	transform: translateY(-4px) scale(1.05);
	box-shadow:
		0 0 0 10px var(--srctc-halo),
		0 0 0 11px color-mix(in srgb, var(--srctc-accent) 28%, transparent),
		0 18px 38px color-mix(in srgb, var(--srctc-accent) 30%, transparent);
}

.srctc-steps[data-hover="yes"] .srctc-step:not(.is-active):hover .srctc-step__circle {
	background: color-mix(in srgb, var(--srctc-accent) 8%, var(--srctc-circle-bg));
}

.srctc-step__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.srctc-step__desc {
	max-width: 230px;
	margin: 0 auto;
	font-size: 13.5px;
	line-height: 1.6;
}

/* ---- one-time reveal (only when JS armed it) ---- */
.srctc-steps.is-armed::after { transform: scaleX(0); }
.srctc-steps.is-armed.is-visible::after { transform: scaleX(1); transition-delay: .15s; }

.srctc-steps.is-armed .srctc-step {
	opacity: 0;
	transform: translateY(14px);
}

.srctc-steps.is-armed.is-visible .srctc-step {
	opacity: 1;
	transform: none;
	transition: opacity .5s ease, transform .5s ease;
	transition-delay: calc(var(--i, 0) * .16s);
}

/* ---- mobile: vertical ---- */
@media (max-width: 767px) {
	.srctc-steps {
		grid-template-columns: 1fr;
		row-gap: 38px;
	}

	.srctc-steps::before,
	.srctc-steps::after {
		top: calc(var(--srctc-circle) / 2);
		left: calc(var(--srctc-circle) / 2 - 1px);
		right: auto;
		width: 2px;
		height: calc(100% - var(--srctc-circle));
	}

	.srctc-steps::before {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.srctc-steps::after {
		width: 2px;
		height: calc((100% - var(--srctc-circle)) * var(--srctc-active) / var(--srctc-span));
		background: linear-gradient(180deg, var(--srctc-accent), var(--srctc-accent-2));
		transform-origin: top center;
	}

	.srctc-steps.is-armed::after { transform: scaleY(0); }
	.srctc-steps.is-armed.is-visible::after { transform: scaleY(1); }

	.srctc-step {
		display: grid;
		grid-template-columns: var(--srctc-circle) 1fr;
		column-gap: 24px;
		align-items: center;
		text-align: left;
	}

	.srctc-step__circle { margin: 0; }

	.srctc-step__desc {
		max-width: none;
		margin: 0;
	}
}

.srctc-step .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.srctc-steps::after,
	.srctc-step,
	.srctc-step__circle { transition: none !important; }
	.srctc-steps.is-armed .srctc-step { opacity: 1; transform: none; }
	.srctc-steps.is-armed::after { transform: none; }
}