/* --- Steps (Этапы работы) --- */
.sl-steps{
	/* было: 96px 0 84px */
	padding-top: var(--sl-section-y-loose);
	padding-bottom: var(--sl-section-y-loose);
	background: var(--sl-bg-light);
}

.sl-steps__head{
	max-width: 820px;
	margin-bottom: var(--sl-stack-3);
}

.sl-steps__title{
	margin: 0 0 var(--sl-stack-1);
	font-size: clamp(28px, 2.3vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: var(--sl-text-dark);
}

.sl-steps__subtitle{
	margin: 0;
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.4;
	color: rgba(18,21,33,.76);
}

/* list layout */
.sl-steps__list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--sl-grid-gap-lg);
	align-items: start;
}

/* item */
.sl-step{
	--sl-step-shift: 0px; /* управляемая "ступенька" */
	position: relative;
	overflow: hidden;
	padding: 22px 22px 20px;
	border-radius: 20px;
	border: 1px solid rgba(18,21,33,.06);
	background: var(--sl-bg-light-2);
	box-shadow:
		0 10px 20px rgba(18,21,33,.03),
		inset 0 1px 0 rgba(255,255,255,.9);
	min-height: 170px;
	display: flex;
	flex-direction: column;
	gap: var(--sl-space-xs);

	transform: translateY(var(--sl-step-shift));
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* более "премиальная" цифра: мягче, с лёгким синим оттенком */
.sl-step__bgnum{
	position: absolute;
	left: -10px;
	top: -22px;
	font-family: var(--sl-font-display);
	font-weight: 400;
	font-size: clamp(92px, 8.7vw, 156px);
	line-height: 1;
	letter-spacing: -0.04em;
	pointer-events: none;
	user-select: none;

	color: rgba(6, 14, 52, .07);
	background: linear-gradient(135deg, rgba(8, 20, 74, .10), rgba(8, 20, 74, .04));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sl-step--right .sl-step__bgnum{
	left: auto;
	right: -16px;
}

.sl-step__title{
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: clamp(18px, 1.45vw, 22px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: var(--sl-text-dark);
}

.sl-step__text{
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 15px;
	line-height: 1.58;
	color: rgba(18,21,33,.78);
	max-width: 60ch;
}

/* hover */
.sl-step:hover{
	transform: translateY(calc(var(--sl-step-shift) - 2px));
	border-color: rgba(18,21,33,.10);
	box-shadow:
		0 16px 30px rgba(18,21,33,.05),
		inset 0 1px 0 rgba(255,255,255,.95);
}

/* --- Desktop layout (шахматка + "воздух" справа внизу) --- */
.sl-steps__list > .sl-step:nth-child(1){
	grid-column: 1 / span 6;
}

.sl-steps__list > .sl-step:nth-child(2){
	grid-column: 7 / span 6;
	--sl-step-shift: 36px;
}

.sl-steps__list > .sl-step:nth-child(3){
	grid-column: 1 / span 6;
}

.sl-steps__list > .sl-step:nth-child(4){
	grid-column: 7 / span 6;
	--sl-step-shift: 36px;
}

/* финальный этап: слева */
.sl-steps__list > .sl-step:nth-child(5){
	grid-column: 1 / span 6;
}

/* --- Steps responsive --- */
@media (max-width: 991px){
	.sl-steps{
		padding-top: var(--sl-section-y);
		padding-bottom: var(--sl-section-y);
	}

	.sl-steps__head{
		margin-bottom: var(--sl-stack-2);
	}

	.sl-steps__list{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sl-grid-gap);
	}

	.sl-steps__list > .sl-step{
		grid-column: auto !important;
		--sl-step-shift: 0px !important;
		transform: none !important;
		min-height: 160px;
		padding: 18px 18px 16px;
		border-radius: 18px;
	}

	.sl-step__bgnum{
		top: -18px;
		font-size: 120px;
	}
}

@media (max-width: 767px){
	.sl-steps{
		padding-top: var(--sl-section-y-tight);
		padding-bottom: var(--sl-section-y-tight);
	}

	.sl-steps__list{
		grid-template-columns: 1fr;
		gap: var(--sl-space-sm);
	}

	.sl-steps__title{
		font-size: 30px;
	}

	.sl-steps__subtitle{
		font-size: 14px;
	}

	.sl-steps__list > .sl-step{
		border-radius: 16px;
		padding: 16px 14px 14px;
		min-height: auto;
	}

	.sl-step__bgnum{
		top: -16px;
		font-size: 96px;
	}

	.sl-step__title{
		font-size: 18px;
	}

	.sl-step__text{
		font-size: 14px;
		line-height: 1.5;
	}
}