.cards-block .xcard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	min-width: 0;
}
.cards-block .xcard__iconbox {
	margin-bottom: 10px;
}
.cards-block .xcard__text {
	flex: 1;
}
.cards-block .xcard__foot {
	margin-top: 8px;
}

/* Иконка: карточки задач. Главная, реклама, CRM: поля ≈30, заголовок 21/700, текст 16, стрелка 30 */
.cards-block .xcard--icon {
	padding: 28px 30px 26px;
}
.cards-block .xcard--icon .xcard__title {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}
.cards-block .xcard--icon .xcard__text {
	font-size: 16px;
	line-height: 1.5;
}
.cards-block .xcard--icon .circle-arrow {
	width: 30px;
	height: 30px;
}
/* Без подложки (реклама, CRM): контурная иконка 48, поля по бокам ≈38, плотные строки */
.cards-block.cards-block--icon-plain .xcard--icon {
	padding: 24px 30px 22px;
	gap: 8px;
}
.cards-block.cards-block--icon-plain .xcard--icon .xcard__iconbox {
	width: auto;
	height: auto;
	margin-bottom: 14px;
	background: none;
	border-radius: 0;
	justify-content: start;
}
.cards-block.cards-block--icon-plain .xcard--icon .xcard__iconbox .icon {
	width: 48px;
	height: 48px;
	stroke-width: 1.6;
}
.cards-block.cards-block--icon-plain .xcard--icon .xcard__title {
	font-size: 20px;
	line-height: 1.2;
}
.cards-block.cards-block--icon-plain .xcard--icon .xcard__text {
	max-width: 225px;
	line-height: 1.35;
}
.cards-block.cards-block--icon-plain .xcard--icon .circle-arrow {
	width: 26px;
	height: 26px;
}
.cards-block.cards-block--icon-plain .xcard--icon .xcard__foot {
	margin-top: 2px;
}
/* Плотная страница («О компании»): карточки 220–250 px, текст в три строки */
.density-compact .cards-block.cards-block--icon-plain .xcard--icon {
	padding: 22px 26px 20px;
}
/* «О компании» (density-tight): снизу ≈10 px после «Подробнее» / последней строки — карточки 254 и 220 */
.density-tight .cards-block.cards-block--icon-plain .xcard--icon {
	padding-bottom: 10px;
}
.density-compact .cards-block.cards-block--icon-plain .xcard--icon .xcard__iconbox {
	margin-bottom: 10px;
}
.density-compact .cards-block.cards-block--icon-plain .xcard--icon .xcard__title {
	font-size: 19px;
}
.density-compact .cards-block.cards-block--icon-plain .xcard--icon .xcard__text {
	max-width: 245px;
	font-size: 15px;
	line-height: 1.5;
}
/* На макете главной иконка крупная и жирная, подложка едва заметна */
.cards-block .xcard--icon .xcard__iconbox {
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
}
.cards-block .xcard--icon .xcard__iconbox .icon {
	width: 32px;
	height: 32px;
	stroke-width: 2;
}

/* С картинкой внизу */
.cards-block .xcard--image {
	padding: 20px 22px 0;
	gap: 8px;
	overflow: hidden;
}
.cards-block .xcard--image .xcard__iconbox {
	background: none;
	width: auto;
	height: auto;
	justify-content: start;
	margin-bottom: 6px;
}
.cards-block .xcard--image .xcard__iconbox .icon {
	width: 34px;
	height: 34px;
}
.cards-block .xcard--image .xcard__title {
	font-size: 16px;
}
.cards-block .xcard--image .xcard__text {
	font-size: 13px;
	line-height: 1.4;
	flex: 0;
}
.cards-block .xcard__image {
	display: block;
	margin: 8px -6px 0;
	flex: 1;
	min-height: 110px;
}
.cards-block .xcard__image img {
	width: 100%;
	height: 100%;
	max-height: 150px;
	object-fit: contain;
	object-position: bottom center;
}
/* Скриншот в рамке ноутбука (поле «Картинку — в рамку ноутбука») */
.cards-block .xcard__image--frame {
	display: flex;
	align-items: flex-end;
	margin: 14px 0 0;
	min-height: 0;
}
.cards-block .xcard__image--frame .devices {
	max-width: 240px;
}
.cards-block .xcard__image--frame .laptop {
	filter: drop-shadow(0 12px 16px rgba(1, 13, 10, 0.22));
}
.cards-block .xcard__image--frame img {
	max-height: none;
	object-fit: cover;
	object-position: top center;
}
/* Ноутбук с телефоном: сцена шире на место под телефон, чтобы ноутбук не уменьшался.
   Место под телефон — шириной ноутбука, а не padding: проценты padding считаются от карточки,
   и в широкой последней карточке (планшет) ноутбук сжимался */
.cards-block .xcard__image--pair .devices {
	max-width: 276px;
	padding-right: 0;
}
.cards-block .xcard__image--pair .laptop {
	width: 86%;
}
.cards-block .xcard--image .xcard__foot {
	order: 10;
	padding: 2px 0 14px;
}

/* Макет «Разработка сайтов»: иконка 46, заголовок 19, текст 15 в три строки, ноутбук ≈185×85 */
@media (min-width: 1025px) {
	.cards-block .xcard--image {
		padding: 20px 20px 0 24px;
	}
	.cards-block .xcard--image .xcard__iconbox .icon {
		width: 46px;
		height: 46px;
		stroke-width: 1.5;
	}
	.cards-block .xcard--image .xcard__title {
		font-size: 19px;
		line-height: 1.25;
	}
	.cards-block .xcard--image .xcard__text {
		font-size: 15px;
		line-height: 1.47;
	}
	.cards-block .xcard__image--frame {
		min-height: 0;
		margin-top: 4px;
	}
	.cards-block .xcard__image--frame .devices {
		max-width: 190px;
	}
	.cards-block .xcard__image--frame .laptop__screen {
		aspect-ratio: 16 / 8.5;
	}
	/* Экран ноутбука здесь ниже — телефон тоже меньше, чтобы не перерастал ноутбук и не лез в текст;
	   сцена заходит в правый отступ карточки */
	.cards-block .xcard__image--pair {
		margin-right: -14px;
	}
	.cards-block .xcard__image--pair .devices {
		max-width: 214px;
	}
	.cards-block .xcard__image--pair .laptop {
		width: 89%;
	}
	.cards-block .xcard__image--pair .phone {
		width: 19%;
	}
	.cards-block .xcard--image .xcard__foot {
		padding: 0 0 16px;
	}
}

/* Тёмные карточки услуг */
.cards-block .xcard--dark {
	position: relative;
	overflow: hidden;
	min-height: 360px;
	padding: 22px 22px 22px;
	background:
		radial-gradient(90% 60% at 80% 100%, rgba(18, 214, 140, 0.25), transparent 70%),
		linear-gradient(180deg, #06231b 0%, #020f0c 100%);
	color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 10px 30px rgba(1, 13, 10, 0.25);
}
.cards-block .xcard--dark .card__title {
	color: #fff;
	font-size: 20px;
	position: relative;
}
.cards-block .xcard__tag {
	align-self: flex-start;
	position: relative;
}
.cards-block .xcard__list {
	position: relative;
	color: rgba(255, 255, 255, 0.85);
}
.cards-block .xcard__list li {
	font-size: 15px;
	line-height: 1.6;
}
/* Ноутбук со скриншотом в углу, развёрнутый в перспективе и притушенный */
.cards-block .xcard__bg {
	position: absolute;
	right: -16%;
	bottom: -2%;
	width: 104%;
	pointer-events: none;
	perspective: 900px;
}
.cards-block .xcard__bg .devices {
	transform: rotateY(-24deg) rotateX(14deg) rotateZ(-6deg);
	transform-origin: right bottom;
}
.cards-block .xcard__bg .laptop {
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55)) brightness(0.92);
}
.cards-block .xcard--dark::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 26%;
	background: linear-gradient(0deg, rgba(2, 15, 12, 0.8) 0%, transparent);
	pointer-events: none;
}
.cards-block .xcard__more {
	position: relative;
	z-index: 2;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 14px;
	color: #fff;
}
.cards-block .xcard__more .icon {
	width: 16px;
	height: 16px;
	color: var(--c-accent);
	transition: transform 0.2s;
}
.cards-block .xcard--dark:hover .xcard__more .icon {
	transform: translateX(3px);
}
/* Скриншот притушен, как на макете (там картинки тёмные), — текст поверх не спорит с ним */
.cards-block .xcard__bg .laptop {
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55)) brightness(0.68) saturate(0.85);
}
.cards-block .xcard--dark::after {
	height: 34%;
	background: linear-gradient(0deg, rgba(2, 15, 12, 0.92) 0%, rgba(2, 15, 12, 0.6) 45%, transparent);
}
/* Две колонки и уже: карточки шире, ноутбук в углу дорастал до списка — ставим его в поток под список,
   «Подробнее» — по нижнему краю ноутбука, как на десктопе */
@media (max-width: 1100px) {
	.cards-block .xcard--dark {
		min-height: 0;
	}
	.cards-block .xcard__bg {
		position: relative;
		order: 1;
		right: auto;
		bottom: auto;
		width: min(66%, 300px);
		margin: auto -22px -44px auto;
		padding-top: 18px;
	}
	.cards-block .xcard__more {
		order: 2;
		margin-top: 0;
	}
}
@media (max-width: 640px) {
	.cards-block .xcard__bg {
		width: 62%;
		margin-top: -24px;
		padding-top: 0;
	}
}
/* Ноутбук и телефон (поле «Скриншот для телефона»): сцена левее, чтобы телефон у правого края
   не срезался; шире — ноутбук почти того же размера, что и без телефона */
.cards-block .xcard__bg--pair {
	right: 4%;
	width: 112%;
}
.cards-block .xcard__bg--pair .phone {
	bottom: 6%;
	width: 20%;
	filter: brightness(0.85);
}
.cards-block .xcard__bg--pair .devices--pair {
	padding-right: 0;
}
.cards-block .xcard__bg--pair .laptop {
	width: 87%;
}
@media (max-width: 1100px) {
	.cards-block .xcard__bg--pair {
		right: auto;
		width: min(78%, 350px);
		margin-right: -6px;
	}
	/* Низ сцены уходит под край карточки — телефон выше, чтобы не срезался */
	.cards-block .xcard__bg--pair .phone {
		bottom: 18px;
	}
}
@media (max-width: 640px) {
	.cards-block .xcard__bg--pair {
		width: 76%;
	}
}

/* Цифры */
.cards-block .xcard--stat {
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
}
.cards-block .xcard--stat .xcard__icon {
	flex: none;
	color: var(--c-accent-ink);
}
.cards-block .xcard--stat .xcard__icon .icon {
	width: 38px;
	height: 38px;
	stroke-width: 1.5;
}
.cards-block .xcard__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.cards-block .xcard__value {
	font-size: 26px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--c-accent-ink);
	letter-spacing: -0.02em;
}
.cards-block .xcard__label {
	font-size: 13px;
	line-height: 1.35;
	color: var(--c-muted);
}

/* Строки */
/* Макет «Кейс — редизайн»: плашка ≈110 px, иконка 38, текст 14–15 в две-три строки */
/* Макет «Кейс — редизайн»: карточка 112, иконка 44, текст 18 в две строки (колонка ≈220) */
.cards-block .xcard--row {
	flex-direction: row;
	align-items: center;
	gap: 38px;
	min-height: 112px;
	padding: 20px 30px;
}
.cards-block .xcard--row .xcard__icon {
	color: var(--c-accent-ink);
}
.cards-block .xcard--row .xcard__icon .icon {
	width: 44px;
	height: 44px;
	stroke-width: 1.5;
}
.cards-block .xcard--row .xcard__title {
	max-width: 230px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-ink);
}

/* Мини (макет «Контекстная реклама», инструменты Директа): всё по левому краю, иконка 40,
   заголовок 16 через ≈24, подпись 13 */
.cards-block .xcard--mini {
	padding: 22px 16px 22px 26px;
	gap: 8px;
}
.cards-block .xcard--mini .xcard__iconbox {
	width: auto;
	height: auto;
	justify-content: flex-start;
	background: none;
	margin-bottom: 16px;
}
.cards-block .xcard--mini .xcard__iconbox .icon {
	width: 40px;
	height: 40px;
	stroke-width: 1.5;
}
.cards-block .xcard--mini .xcard__title {
	font-size: 16px;
	line-height: 1.25;
}
.cards-block .xcard--mini .xcard__text {
	font-size: 13px;
	line-height: 1.45;
}

.section--dark .xcard--icon,
.section--dark .xcard--row,
.section--dark .xcard--stat {
	background: rgba(255, 255, 255, 0.04);
}

/* Строка из пяти цифр под первым экраном кейса: на макете «Кейс — разработка» шире контейнера
   (поля 36 px), карточки 116 px, иконка 44, цифра тёмная 24 */
@media (min-width: 1101px) {
	.cards-block--stat.cards-block--cols-5 .cards-grid {
		margin-inline: min(0px, max(-49px, (var(--container) + 2 * var(--gutter) - 100vw) / 2 - var(--gutter)));
		gap: 20px;
	}
	.cards-block--stat.cards-block--cols-5 .xcard--stat {
		min-height: 116px;
		padding: 20px 22px;
		gap: 18px;
	}
	.cards-block--stat.cards-block--cols-5 .xcard__icon .icon {
		width: 44px;
		height: 44px;
	}
	.cards-block--stat.cards-block--cols-5 .xcard__value {
		font-size: 24px;
		color: var(--c-ink);
	}
	.cards-block--stat.cards-block--cols-5 .xcard__label {
		font-size: 14px;
	}
}
/* Слова вместо цифры («Техническое сопровождение») — на макете ≈17 px в две строки */
.cards-block .xcard__value--text,
.cards-block--stat.cards-block--cols-5 .xcard__value--text {
	font-size: 17px;
	line-height: 1.25;
	letter-spacing: 0;
}
/* Цифры без карточек (макет «Кейс — контекстная реклама»: строка под первым экраном прямо на белой полосе) */
.cards-block--stat.cards-block--icon-plain .xcard--stat {
	background: none;
	border-color: transparent;
	box-shadow: none;
}
/* Итоги кейса в четыре карточки («Проект в цифрах» на макетах «Кейс — редизайн» и «Кейс — разработка»):
   карточка ≈300×144, иконка 48, цифра 30 зелёная, подпись 15–16 в две строки */
@media (min-width: 1101px) {
	.single-case .cards-block--stat.cards-block--cols-4 .cards-grid {
		gap: 30px;
	}
	.single-case .cards-block--stat.cards-block--cols-4 .xcard--stat {
		min-height: 144px;
		padding: 24px 12px 24px 30px;
		gap: 30px;
	}
	.single-case .cards-block--stat.cards-block--cols-4 .xcard__icon .icon {
		width: 48px;
		height: 48px;
	}
	.single-case .cards-block--stat.cards-block--cols-4 .xcard__value {
		font-size: 30px;
	}
	.single-case .cards-block--stat.cards-block--cols-4 .xcard__label {
		font-size: 15px;
		line-height: 1.5;
		color: #3c4650;
	}
}
/* «Цифра крупно» на телефоне — по две в ряд, иконка над цифрой, чтобы текст не сжимался в столбик. */
@media (max-width: 640px) {
	.cards-block .xcard--row {
		gap: 18px;
		min-height: 0;
		padding: 18px 20px;
	}
	.cards-block .xcard--stat {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 16px;
	}
	.cards-block .xcard--stat .xcard__icon .icon {
		width: 30px;
		height: 30px;
	}
	.cards-block .xcard--stat .xcard__value {
		font-size: 22px;
	}
	.cards-block .xcard--stat .xcard__value--text {
		font-size: 16px;
	}
}
/* Карточки задач на телефоне — компактным списком: иконка слева, стрелка справа (одна карточка ≈ 120 px вместо 290) */
@media (max-width: 640px) {
	.cards-block .xcard.xcard--icon {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) auto;
		align-items: start;
		gap: 4px 16px;
		padding: 18px 18px 18px 18px;
	}
	.cards-block .xcard.xcard--icon .xcard__iconbox {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 44px;
		height: 44px;
		margin: 0;
		justify-content: center;
	}
	.cards-block .xcard.xcard--icon .xcard__iconbox .icon {
		width: 26px;
		height: 26px;
	}
	.cards-block .xcard.xcard--icon .xcard__title {
		grid-column: 2;
		font-size: 18px;
		line-height: 1.25;
	}
	.cards-block .xcard.xcard--icon .xcard__text {
		grid-column: 2;
		max-width: none;
		font-size: 15px;
		line-height: 1.45;
	}
	.cards-block .xcard.xcard--icon .xcard__foot {
		grid-column: 3;
		grid-row: 1 / span 2;
		align-self: center;
		margin: 0;
	}
}
/* Карточки со ссылкой-текстом («Подробнее», «О компании»): «Подробнее» третьей колонкой сжимала текст
   до 1–2 слов в строке. Здесь иконка и заголовок в строку, текст на всю ширину, «Подробнее» под текстом. */
@media (max-width: 640px) {
	.cards-block .xcard.xcard--icon.xcard--linktext {
		grid-template-columns: 44px minmax(0, 1fr);
		align-items: center;
		gap: 10px 16px;
	}
	.cards-block .xcard.xcard--icon.xcard--linktext .xcard__iconbox {
		grid-row: 1;
	}
	.cards-block .xcard.xcard--icon.xcard--linktext .xcard__text,
	.cards-block .xcard.xcard--icon.xcard--linktext .xcard__foot {
		grid-column: 1 / -1;
		grid-row: auto;
		align-self: start;
	}
}
/* Строки в 2 колонки («Что мы реализовали в проекте»): карточка широкая — текст не ограничиваем 230 px */
.cards-block--row.cards-block--cols-2 .xcard--row .xcard__title {
	max-width: none;
}
/* Тёмные карточки по 5 в ряд («Услуги»): заголовок на 2 строки у всех — списки начинаются на одной высоте;
   ноутбук мельче и с отступом под списком, чтобы длинный пункт не упирался в него */
@media (min-width: 1101px) {
	.cards-block--dark.cards-block--cols-5 .xcard--dark {
		min-height: 380px;
	}
	.cards-block--dark.cards-block--cols-5 .xcard--dark .card__title {
		min-height: calc(2 * 1.3em);
		line-height: 1.3;
	}
	.cards-block--dark.cards-block--cols-5 .xcard__list {
		margin-bottom: 20px;
	}
	.cards-block--dark.cards-block--cols-5 .xcard__bg {
		right: -18%;
		bottom: -4%;
		width: 94%;
	}
	/* С телефоном: сцена внутри карточки, телефон чуть меньше — не дорастает до списка */
	.cards-block--dark.cards-block--cols-5 .xcard__bg--pair {
		right: 4%;
		width: 110%;
	}
	.cards-block--dark.cards-block--cols-5 .xcard__bg--pair .phone {
		width: 19%;
	}
}

/* Цветные иконки на светлых круглых подложках (опция «Цветные иконки», макет «Контекстная реклама») */
.cards-block__grads {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.cards-block--icon-color .xcard__iconbox,
.cards-block--icon-color .xcard__icon {
	display: inline-grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0, #fdeaf5 45%, #f3e8ff 100%);
	box-shadow: inset 0 0 0 1px rgba(236, 72, 153, 0.08);
}
.cards-block--icon-color.cards-block--mini .xcard__iconbox {
	width: 60px;
	height: 60px;
	justify-content: center;
	background: radial-gradient(circle at 35% 30%, #fff 0, #fdeaf5 45%, #f3e8ff 100%);
}
.cards-block--icon-color .xcard__iconbox .icon,
.cards-block--icon-color .xcard__icon .icon {
	width: 34px;
	height: 34px;
	stroke: url(#fresh-icon-grad-a);
	stroke-width: 1.6;
}
.cards-block--icon-color .cards-grid > :nth-child(3n + 2) .xcard__iconbox .icon,
.cards-block--icon-color .cards-grid > :nth-child(3n + 2) .xcard__icon .icon {
	stroke: url(#fresh-icon-grad-c);
}
.cards-block--icon-color .cards-grid > :nth-child(4n) .xcard__iconbox .icon,
.cards-block--icon-color .cards-grid > :nth-child(4n) .xcard__icon .icon {
	stroke: url(#fresh-icon-grad-b);
}