/* ===== Этапы работы ===== */
.steps-block {
	--st-accent: var(--c-accent-ink);
	--st-title: var(--c-ink);
	--st-text: var(--c-muted);
}
.steps-block.section--dark {
	--st-accent: var(--c-accent);
	--st-title: #fff;
	--st-text: var(--c-dark-muted);
}
.steps-block .section-head {
	margin-bottom: 28px;
}
/* Тёмная полоса с линией этапов на макете главной ниже обычной секции */
.steps-block.section--dark:has(.steps-line) {
	padding-bottom: 36px;
}
/* С круглыми иконками полоса ещё ниже: «Контекстная реклама» ≈275 px */
.steps-block:has(.steps-line--circle) .section-head {
	margin-bottom: 16px;
}
.steps-block.section--dark:has(.steps-line--circle) {
	padding-bottom: 20px;
}
.steps-block__head-btn {
	min-width: 230px;
}
.steps-block.section--dark .steps-block__head-btn.btn--primary {
	min-width: 0;
}

/* ---------- Линия ---------- */
.steps-block .steps-line {
	display: grid;
	grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.steps-block .steps-line__item {
	position: relative;
	min-width: 0;
}
.steps-block .steps-line__icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1.5px solid var(--st-accent);
	color: var(--st-accent);
	background: #fff;
	box-shadow: 0 0 0 5px rgba(0, 229, 189, 0.08);
}
.steps-block.section--dark .steps-line__icon {
	background: rgba(0, 229, 189, 0.07);
	box-shadow: 0 0 22px rgba(0, 229, 189, 0.18);
}
.steps-block .steps-line--square .steps-line__icon {
	border-radius: 14px;
	box-shadow: none;
}
.steps-block.section--dark .steps-line--square .steps-line__icon {
	box-shadow: 0 0 22px rgba(0, 229, 189, 0.14);
}
.steps-block .steps-line__icon .icon {
	width: 34px;
	height: 34px;
	stroke-width: 1.6;
}
/* Соединитель: от иконки до следующего этапа */
.steps-block .steps-line__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 28px;
	left: 84px;
	right: -8px;
	height: 8px;
	pointer-events: none;
}
.steps-block .steps-line--dots .steps-line__item:not(:last-child)::after {
	background:
		radial-gradient(circle, var(--st-accent) 0 2.5px, transparent 3px) center / calc(100% / 3) 8px repeat-x,
		linear-gradient(var(--st-accent), var(--st-accent)) center / 100% 1px no-repeat;
	opacity: 0.85;
}
.steps-block .steps-line--solid .steps-line__item:not(:last-child)::after {
	background: linear-gradient(var(--st-accent), var(--st-accent)) center / 100% 1.5px no-repeat;
	opacity: 0.7;
}
.steps-block .steps-line--arrow .steps-line__item:not(:last-child)::after {
	right: 6px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' fill='none' stroke='%2300e5bd' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 1l3 3-3 3'/%3E%3C/svg%3E") right center / 8px 8px no-repeat,
		repeating-linear-gradient(90deg, var(--st-accent) 0 2px, transparent 2px 6px) left center / calc(100% - 3px) 1.5px no-repeat;
	opacity: 0.8;
}
.steps-block .steps-line__body {
	margin-top: 14px;
}
.steps-block .steps-line__num {
	display: block;
	font-size: 20px;
	line-height: 1.1;
	font-weight: 600;
	color: var(--st-accent);
	letter-spacing: 0.02em;
}
.steps-block .steps-line__title {
	margin-top: 6px;
	font-size: 21px;
	color: var(--st-title);
}
.steps-block .steps-line__text {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--st-text);
	max-width: 220px;
}

/* Круглые иконки (реклама, разработка, техподдержка): на макетах этапы мельче, чем квадратные на главной —
   круг 54, номер 15, заголовок 18, текст 14 */
.steps-block .steps-line--circle {
	column-gap: 12px;
}
.steps-block .steps-line--circle .steps-line__icon {
	width: 54px;
	height: 54px;
}
.steps-block .steps-line--circle .steps-line__icon .icon {
	width: 28px;
	height: 28px;
}
@media (min-width: 641px) {
	.steps-block .steps-line--circle .steps-line__item:not(:last-child)::after {
		top: 23px;
		left: 70px;
	}
	.steps-block .steps-line--circle .steps-line__body {
		margin-top: 8px;
	}
}
.steps-block .steps-line--circle .steps-line__num {
	font-size: 15px;
}
.steps-block .steps-line--circle .steps-line__title {
	margin-top: 4px;
	font-size: 18px;
}
.steps-block .steps-line--circle .steps-line__text {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.3;
}

/* ---------- Список с картинкой ---------- */
.steps-block .steps-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
	gap: 40px;
	align-items: stretch;
}
.steps-block .steps-list--noimage {
	grid-template-columns: 1fr;
}
.steps-block .steps-list__main {
	display: grid;
	gap: 28px;
	align-content: start;
}
.steps-block .steps-list--intro {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.steps-block .steps-list--intro .steps-list__main {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 36px;
	align-content: center;
}
/* Макет CRM: заголовок в две строки (колонка ≈500), список ≈340, картинка до края экрана */
@media (min-width: 1101px) {
	.steps-block:has(.steps-list--intro) {
		overflow-x: clip;
	}
	.steps-block .steps-list--intro {
		grid-template-columns: minmax(0, 864fr) minmax(0, 381fr);
		gap: 25px;
	}
	.steps-block .steps-list--intro .steps-list__main {
		grid-template-columns: minmax(0, 500fr) minmax(0, 340fr);
		gap: 24px;
	}
	.steps-block .steps-list--intro .steps-list__intro {
		font-size: 18px;
		line-height: 1.45;
		max-width: 470px;
	}
	.steps-block .steps-list--intro .steps-list__visual {
		margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2));
	}
	.steps-block .steps-list--intro .steps-list__image {
		border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	}
	/* Картинка встаёт на нижний край секции, под списком остаётся ≈30 */
	.steps-block:has(.steps-list--intro) {
		padding-bottom: 0;
	}
	.steps-block .steps-list--intro .steps-vlist {
		padding-bottom: 30px;
	}
	.steps-block .steps-list--intro .steps-list__image {
		border-radius: var(--radius-lg) 0 0 0;
	}
}
/* Широкое фото (макет SEO): вступление ≈390, список ≈380 с шагом 78 (круг 38, заголовок 16, текст 14),
   фото 500×500 до края экрана */
@media (min-width: 1101px) {
	.steps-block .steps-list--intro.steps-list--wide {
		grid-template-columns: minmax(0, 820fr) minmax(0, 415fr);
		gap: 35px;
	}
	.steps-block .steps-list--wide .steps-list__main {
		grid-template-columns: minmax(0, 390fr) minmax(0, 380fr);
		gap: 50px;
	}
	.steps-block .steps-list--wide .steps-list__intro {
		margin-top: 18px;
		max-width: 385px;
		font-size: 16px;
		line-height: 1.55;
	}
	.steps-block .steps-list--wide .steps-list__btn {
		margin-top: 40px;
	}
	.steps-block .steps-list--wide .steps-list__visual {
		min-height: 500px;
	}
	.steps-block .steps-list--wide .steps-vlist {
		gap: 15px;
	}
	.steps-block .steps-list--wide .steps-vlist::before {
		left: 19px;
	}
	.steps-block .steps-list--wide .steps-vlist__item {
		gap: 17px;
	}
	.steps-block .steps-list--wide .steps-vlist__num {
		flex: none;
		width: 38px;
		height: 38px;
	}
	.steps-block .steps-list--wide .steps-vlist__title {
		padding-top: 0;
		font-size: 16px;
	}
	.steps-block .steps-list--wide .steps-vlist__text {
		margin-top: 2px;
		font-size: 14px;
		line-height: 1.5;
	}
}
/* Скриншот в перспективе (макет «Кейс — редизайн»): список ≈640, текст 18/1.5, круги 46;
   картинка от верха полосы до края экрана, заходит на следующую секцию */
.steps-block .steps-list--tilt .steps-list__image {
	background: #fff;
}
.steps-block .steps-list--tilt .steps-list__image img {
	object-position: top center;
}
@media (min-width: 1101px) {
	.steps-block:has(.steps-list--tilt) {
		overflow-x: clip;
	}
	.steps-block .steps-list--tilt {
		grid-template-columns: minmax(0, 640fr) minmax(0, 610fr);
		gap: 20px;
	}
	.steps-block .steps-list--tilt .steps-list__main {
		gap: 22px;
	}
	.steps-block .steps-list--tilt .steps-list__visual {
		z-index: 2;
		min-height: 0;
		margin: calc(20px - var(--section-top, 40px)) calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)) -44px 0;
		perspective: 1800px;
		perspective-origin: 0 50%;
	}
	.steps-block .steps-list--tilt .steps-list__image {
		border-radius: 14px 0 0 14px;
		transform: rotateY(-10deg) rotateZ(-2deg);
		transform-origin: left center;
		box-shadow: -18px 30px 60px rgba(1, 13, 10, 0.18);
	}
	.steps-block .steps-list--tilt .steps-vlist {
		gap: 12px;
	}
	.steps-block .steps-list--tilt .steps-vlist::before {
		display: none;
	}
	.steps-block .steps-list--tilt .steps-vlist__item {
		align-items: center;
		gap: 26px;
		min-height: 54px;
	}
	.steps-block .steps-list--tilt .steps-vlist__num {
		flex: none;
		width: 46px;
		height: 46px;
		font-size: 14px;
		box-shadow: none;
	}
	.steps-block .steps-list--tilt .steps-vlist__body:not(:has(.steps-vlist__title)) .steps-vlist__text {
		margin-top: 0;
		padding-top: 0;
		font-size: 18px;
		line-height: 1.5;
		color: #3c4650;
	}
}
.steps-block .steps-list__title {
	font-size: var(--fs-h2);
}
.steps-block .steps-list__intro {
	margin-top: 22px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--st-text);
	max-width: 420px;
}
.steps-block .steps-list__btn {
	margin-top: 32px;
}
.steps-block .steps-list__btn .btn {
	border-radius: 999px;
}
.steps-block .steps-vlist {
	position: relative;
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.steps-block .steps-vlist::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 18px;
	bottom: 18px;
	width: 1px;
	background: rgba(11, 191, 134, 0.35);
}
.steps-block .steps-vlist__item {
	position: relative;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.steps-block .steps-vlist__num {
	position: relative;
	z-index: 1;
	width: 36px;
	height: 36px;
	font-size: 15px;
	box-shadow: 0 0 0 4px var(--c-bg-soft);
}
.steps-block.section--white .steps-vlist__num {
	box-shadow: 0 0 0 4px #fff;
}
.steps-block.section--dark .steps-vlist__num {
	box-shadow: 0 0 0 4px var(--c-dark);
}
.steps-block .steps-vlist__title {
	font-size: 18px;
	line-height: 1.3;
	color: var(--st-title);
	padding-top: 4px;
}
.steps-block .steps-vlist__text {
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--st-text);
}
.steps-block .steps-vlist__body:not(:has(.steps-vlist__title)) .steps-vlist__text {
	padding-top: 6px;
	font-size: 16px;
	color: var(--st-title);
}
.steps-block .steps-list__visual {
	position: relative;
	min-height: 420px;
}
.steps-block .steps-list__image {
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--c-mint-soft);
}
.steps-block .steps-list__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.steps-block .steps-list__floats {
	position: absolute;
	top: 50%;
	right: 22px;
	transform: translateY(-50%);
	display: grid;
	gap: 18px;
	justify-items: end;
	width: min(290px, 80%);
}
.steps-block .steps-list__float {
	width: 100%;
	gap: 14px;
	padding: 16px 18px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}
.steps-block .steps-list__float:nth-child(odd) {
	transform: translateX(-34px);
}
.steps-block .steps-list__float.reveal:not(.is-visible) {
	transform: translateY(18px);
}
.steps-block .steps-list__float-icon {
	color: var(--c-accent-ink);
	flex: none;
}
.steps-block .steps-list__float-icon .icon {
	width: 40px;
	height: 40px;
	stroke-width: 1.6;
}
.steps-block .steps-list__float .stat-float__value {
	font-size: 26px;
}
.steps-block .steps-list__float .stat-float__label {
	margin-top: 4px;
}
.steps-block .steps-list__float-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-ink);
}

/* ---------- Сетка ---------- */
.steps-block .steps-grid {
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 24px;
}
.steps-block .steps-grid__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	min-width: 0;
}
.steps-block .steps-grid--cards .steps-grid__item {
	padding: 22px 22px 24px;
}
.steps-block .steps-grid__num {
	width: 38px;
	height: 38px;
	font-size: 13px;
}
.steps-block .steps-grid__title {
	font-size: 16px;
	line-height: 1.3;
	padding-top: 8px;
	color: var(--st-title);
}
.steps-block .steps-grid__text {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--st-text);
}

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
	.steps-block .steps-list--intro {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	}
	.steps-block .steps-list--intro .steps-list__main {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}
@media (max-width: 1024px) {
	.steps-block .steps-line {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 36px;
	}
	.steps-block .steps-line__item:nth-child(3n)::after {
		display: none;
	}
}
@media (max-width: 860px) {
	.steps-block .steps-list,
	.steps-block .steps-list--intro {
		grid-template-columns: 1fr;
	}
	.steps-block .steps-list__visual {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}
@media (max-width: 640px) {
	/* Линии фона на телефоне пересекают текст этапов — выносим их в слой и приглушаем */
	.steps-block.glow-bg {
		position: relative;
		isolation: isolate;
		background:
			radial-gradient(55% 75% at 88% 78%, rgba(18, 214, 140, 0.24), transparent 62%),
			radial-gradient(40% 60% at 6% 0%, rgba(0, 170, 130, 0.12), transparent 70%),
			linear-gradient(180deg, #021512 0%, var(--c-dark) 100%);
	}
	.steps-block.glow-bg::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: url("../../assets/img/lines.svg") right bottom / cover no-repeat;
		opacity: 0.35;
		pointer-events: none;
	}
	/* Линия становится вертикальной */
	.steps-block .steps-line {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.steps-block .steps-line__item {
		display: grid;
		grid-template-columns: 52px 1fr;
		gap: 16px;
	}
	.steps-block .steps-line__icon {
		width: 52px;
		height: 52px;
	}
	.steps-block .steps-line__icon .icon {
		width: 26px;
		height: 26px;
	}
	.steps-block .steps-line__body {
		margin-top: 0;
	}
	.steps-block .steps-line__text {
		max-width: none;
	}
	/* .steps-line в селекторе — перебить фон вариантов «точки/стрелка», иначе между этапами оставались короткие штрихи */
	.steps-block .steps-line .steps-line__item:not(:last-child)::after,
	.steps-block .steps-line .steps-line__item:nth-child(3n):not(:last-child)::after {
		display: block;
		top: 58px;
		bottom: -18px;
		left: 25px;
		right: auto;
		width: 2px;
		height: auto;
		background: linear-gradient(var(--st-accent), var(--st-accent)) center / 1px 100% no-repeat;
		opacity: 0.5;
	}
	.steps-block .steps-list__visual {
		aspect-ratio: auto;
		display: grid;
		gap: 12px;
	}
	.steps-block .steps-list__image {
		position: relative;
		aspect-ratio: 4 / 3;
	}
	.steps-block .steps-list__floats {
		position: static;
		transform: none;
		width: auto;
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.steps-block .steps-list__float,
	.steps-block .steps-list__float:nth-child(odd) {
		transform: none;
		box-shadow: var(--shadow);
	}
	.steps-block .steps-list__float.reveal:not(.is-visible) {
		transform: translateY(18px);
	}
	.steps-block .steps-list__btn .btn {
		width: 100%;
	}
	.steps-block .steps-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}
/* Плашки на фото (SEO): на макете меньше и у правого края — экран ноутбука читается */
@media (min-width: 1101px) {
	.steps-block .steps-list__floats {
		right: 14px;
		gap: 12px;
		width: min(232px, 52%);
	}
	.steps-block .steps-list__float {
		gap: 12px;
		padding: 11px 14px;
	}
	.steps-block .steps-list__float:nth-child(odd) {
		transform: translateX(-16px);
	}
	.steps-block .steps-list__float-icon .icon {
		width: 30px;
		height: 30px;
	}
	.steps-block .steps-list__float .stat-float__value {
		font-size: 21px;
	}
	.steps-block .steps-list__float .stat-float__label {
		margin-top: 2px;
		font-size: 12px;
	}
	.steps-block .steps-list__float-title {
		font-size: 14px;
	}
}
/* Планшет: плашки под фото в ряд, фото не закрывают */
@media (min-width: 641px) and (max-width: 1100px) {
	.steps-block .steps-list__visual:has(.steps-list__floats) {
		aspect-ratio: auto;
		min-height: 0;
		display: grid;
		gap: 14px;
	}
	.steps-block .steps-list__visual:has(.steps-list__floats) .steps-list__image {
		position: relative;
		aspect-ratio: 16 / 10;
	}
	.steps-block .steps-list__floats {
		position: static;
		transform: none;
		width: auto;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		grid-auto-flow: column;
		gap: 12px;
	}
	.steps-block .steps-list__float,
	.steps-block .steps-list__float:nth-child(odd) {
		transform: none;
		box-shadow: var(--shadow);
		padding: 14px;
	}
	.steps-block .steps-list__float.reveal:not(.is-visible) {
		transform: translateY(18px);
	}
	.steps-block .steps-list__float .stat-float__value {
		font-size: 22px;
	}
}
/* Наклонная картинка (кейс «Победа») выходила за низ серой секции на ≈20 px — запас снизу */
@media (min-width: 1101px) {
	.steps-block:has(.steps-list--tilt) {
		padding-bottom: calc(var(--section-y) + 28px);
	}
}