/* Отраслевые страницы (/nedvizhimost/ и следующие).
   Значения взяты из утверждённого макета НЕДВИЖИМОСТЬ.pdf (канва 1920).
   Здесь только отличия от общих блоков — сами блоки общие с главной. */

/* ---------- первый экран ---------- */
.main-screen--industry {
	position: relative;
	overflow: hidden;
}

.main-screen--industry .main-screen__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.main-screen--industry .main-screen__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

/* затемнение слева, чтобы заголовок читался поверх фото */
.main-screen--industry .main-screen__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #111315 0%, rgba(17, 19, 21, 0.85) 28%, rgba(17, 19, 21, 0.35) 55%, rgba(17, 19, 21, 0.15) 100%);
}

.main-screen--industry .container {
	position: relative;
	z-index: 1;
}

/* в отраслевой версии нет центрального 3D-объекта: заголовку отдана широкая
   левая колонка (в макете он занимает ~900px), правая колонка встаёт в третью */
.main-screen--industry .main-screen__block {
	grid-template-columns: minmax(0, 57.5rem) auto 28.5rem;
	-ms-grid-columns: minmax(0, 57.5rem) auto 28.5rem;
}

.main-screen--industry .main-screen__right {
	grid-column: 3;
}

.main-screen--industry .main-screen__left {
	padding-right: 2.5rem;
}

/* декоративных элементов главной в макете отрасли нет */
.main-screen--industry .main-screen__header::before {
	display: none;
}

.main-screen--industry .main-screen__header {
	width: 100%;
}

.main-screen--industry .main-screen__title {
	line-height: 1.3;
	/* заголовок ломается только по <br> из макета, а не по ширине самой длинной строки */
	width: 100%;
}

/* Вертикальный ритм первого экрана по макету:
   заголовок от 263px, кнопка от 627px, нижний текст от 832px, экран 985px. */
.main-screen--industry .main-screen__left {
	padding-top: 9rem;
	padding-bottom: 5.375rem;
}

.main-screen--industry .main-screen__right {
	padding-top: 4.1875rem;
}

.main-screen--industry .main-screen__button {
	margin-top: 7.3125rem;
	padding: 0 3.6875rem; /* ширина кнопки 254px, как в макете */
	/* мягкое фирменное свечение под кнопкой */
	box-shadow: 0 1.125rem 2.5rem rgba(130, 40, 227, 0.45);
}

.main-screen--industry .main-screen__button:hover {
	box-shadow: 0 1.25rem 2.75rem rgba(130, 40, 227, 0.55);
}

/* ширины текстовых блоков — чтобы переносы совпали с макетом */
.main-screen--industry .main-screen__left .main-screen__text {
	max-width: 29.375rem; /* 470px — переносы нижнего текста как в макете */
}

/* правая колонка прижата к правому краю контейнера, ширина текста 446px */
.main-screen--industry .main-screen__right {
	padding-left: 0;
}

.main-screen--industry .main-screen__right .main-screen__text {
	max-width: 28.5rem; /* 456px — самая длинная строка макета 452px */
}

/* ---------- «О себе» — отраслевой вариант (светлый, по центру) ---------- */
.about--centered {
	background-color: #fff;
	color: #111315;
}

.about--centered .about__sub {
	font-size: 1.25rem;
	line-height: 1.2;
	text-transform: uppercase;
	color: #111315;
}

.about--centered .about__title {
	margin-top: 1.75rem;
	max-width: 71.25rem;
	font-size: 5.625rem;
	line-height: 1.11;
	letter-spacing: -0.03em;
	text-transform: none;
}

.about--centered .about__image {
	margin-top: 2.5rem;
}

.about--centered .about__image .box {
	width: 36.25rem;  /* 580px */
	height: 41.25rem; /* 660px */
}

.about--centered .about__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%; /* кадрируем по портрету, не искажая пропорции */
}

.about--centered .about__desc {
	margin-top: 3.4375rem;
}

.about--centered .about__text {
	font-size: 3.375rem;
	line-height: 1.5;
	max-width: 81.25rem;
	color: #cfd0d0;
}

.about--centered .about__text strong,
.about--centered .about__text span {
	color: #111315;
}

.about--centered .about__quote {
	margin-top: 2.75rem;
}

.about--centered .about__quote--author,
.about--centered .about__signature {
	margin-top: 0;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.5625rem;
	line-height: 1.2;
	color: #8c8c8c;
	text-align: center;
}

/* подпись под текстом: воздух есть, но без огромной пустоты */
.about--centered .about__signature {
	margin-top: 2.75rem;
}

/* нижний отступ секции — чтобы расстояние до «Реализованных проектов» было как в макете */
.about--centered {
	padding-bottom: 4.375rem;
	margin-bottom: 0;
}

/* ---------- «Реализованные проекты» ---------- */
.industry-projects {
	background-color: #fff;
	color: #111315;
}

.industry-projects__header {
	text-align: center;
}

.industry-projects__title {
	margin: 0 auto;
	max-width: 62.5rem;
	font-family: Unbounded, sans-serif;
	font-weight: 400;
	font-size: 5.625rem;
	line-height: 1.11;
	letter-spacing: -0.03em;
}

.industry-projects__text {
	margin: 1.875rem auto 0;
	max-width: 53.125rem;
	font-size: 1.125rem;
	line-height: 1.4;
	/* #767676 — минимально более тёмный серый, дающий 4.5:1 на белом (WCAG AA
	   для обычного текста; прежний #8c8c8c давал 3.36:1) */
	color: #767676;
	text-align: center;
}

.industry-projects__text strong {
	color: #111315;
}

/* --- кейсы: вертикальная подача, как в макете --- */
.industry-projects__list {
	margin-top: 3.75rem;
	display: flex;
	flex-direction: column;
	gap: 6.4375rem;
}

.industry-projects__item {
	margin: 0 auto;
	max-width: 77.75rem;
	width: 100%;
}

/* Появление при скролле включает сам скрипт (класс js-reveal):
   без JS кейсы просто видны, а не остаются скрытыми. */
.industry-projects__list.js-reveal .industry-projects__item {
	opacity: 0;
	transform: translateY(2.5rem);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.industry-projects__list.js-reveal .industry-projects__item.is-visible {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

.industry-projects__card {
	display: block;
	/* одинаковая рамка вокруг кадра со всех сторон: раньше по вертикали
	   оставалось 2px против 18px по бокам, и кадр «прилипал» к низу */
	padding: 1.0625rem;
	border: 0.0625rem solid #e2e2e2;
	border-radius: 1.5rem;
	overflow: hidden;
	background-color: #fff;
	transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.industry-projects__media {
	display: block;
	overflow: hidden;
	border-radius: 0.75rem;
	aspect-ratio: 1672 / 941; /* место под кейс зарезервировано до загрузки картинки */
}

.industry-projects__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.75rem;
	/* лёгкий параллакс: кадр медленно проезжает внутри карточки */
	transform: scale(1.06) translate3d(0, var(--project-shift, 0px), 0);
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* фирменный фиолетовый hover: акцентная обводка, мягкое свечение и лёгкий зум,
   кейс остаётся видимым — без плотной плашки поверх */
.industry-projects__item--linked .industry-projects__card {
	cursor: pointer;
}

.industry-projects__card:hover,
.industry-projects__card:focus-visible {
	border-color: var(--accent, #8228e3);
	box-shadow: 0 1rem 2.5rem rgba(130, 40, 227, 0.18);
	transform: translateY(-0.25rem);
}

.industry-projects__card:hover .industry-projects__image,
.industry-projects__card:focus-visible .industry-projects__image {
	transform: scale(1.1) translate3d(0, var(--project-shift, 0px), 0);
}

.industry-projects__card:hover ~ .industry-projects__name {
	color: var(--accent, #8228e3);
}

/* название кейса — тоже ссылка на кейс: наследует цвет подписи,
   на hover/focus красится в акцент и подсвечивает карточку над собой */
.industry-projects__name-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.industry-projects__name-link:hover,
.industry-projects__name-link:focus-visible {
	color: var(--accent, #8228e3);
}

.industry-projects__name-link:focus-visible {
	outline: 0.125rem solid var(--accent, #8228e3);
	outline-offset: 0.25rem;
	border-radius: 0.25rem;
}

.industry-projects__item:has(.industry-projects__name-link:hover) .industry-projects__card {
	border-color: var(--accent, #8228e3);
	box-shadow: 0 1rem 2.5rem rgba(130, 40, 227, 0.18);
	transform: translateY(-0.25rem);
}

/* обложка целиком (см. blocks/industry-projects.php): без зума и параллакса,
   иначе текст у кромки кадра срезается; hover остаётся на рамке и тени */
.industry-projects__media--fit .industry-projects__image,
.industry-projects__card:hover .industry-projects__media--fit .industry-projects__image,
.industry-projects__card:focus-visible .industry-projects__media--fit .industry-projects__image {
	object-fit: contain;
	transform: none;
}


@media (prefers-reduced-motion: reduce) {
	.industry-projects__item,
	.industry-projects__image {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.industry-projects__name {
	margin-top: 1.875rem;
	transition: color 0.3s ease;
	padding-left: 0.25rem;
	font-family: Unbounded, sans-serif;
	font-weight: 300;
	font-size: 2.625rem;
	line-height: 1.2;
	color: #111315;
}

.industry-projects__more {
	margin-top: 3.75rem;
	display: flex;
	justify-content: center;
}

.industry-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 1.125rem 2.5rem;
	border: 0.0625rem solid #e2e2e2;
	border-radius: 31.25rem;
	background-color: #fff;
	color: #111315;
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.industry-more-btn__icon {
	display: flex;
	width: 1.875rem;
	height: 1.875rem;
	color: currentColor;
}

.industry-more-btn__icon svg {
	width: 100%;
	height: 100%;
}

.industry-more-btn:hover,
.industry-more-btn:focus-visible {
	background-color: var(--accent, #8228e3);
	border-color: var(--accent, #8228e3);
	color: #fff;
}

.industry-more-btn:focus-visible {
	outline: 0.125rem solid #111315;
	outline-offset: 0.25rem;
}

/* ---------- блок компаний (отраслевой вариант) ---------- */
/* В макете подпись и заголовок прижаты к левому краю контейнера:
   подпись 20px, заголовок 60px в две строки. */
.clients--industry .clients__sub {
	font-size: 1.25rem;
	line-height: 1.2;
	text-transform: uppercase;
}

.clients--industry .clients__title {
	margin-top: 0.625rem;
	/* ширина подобрана так, чтобы строка ломалась после «сложных», как в макете;
	   <br> здесь не годится — Splitting.js темы срезает пробелы вокруг него */
	max-width: 83.125rem;
	font-size: 3.75rem;
	line-height: 1.1;
	text-transform: uppercase;
}

@media (max-width: 1280px) {
	/* 2.5rem, а не 3.125rem: при 3.125rem колонка 993–1280px вмещала только
	   «СПЕЦИАЛИЗАЦИЯ НА» — предлог повисал в конце строки. Теперь заголовок
	   ломается как на десктопе: «…НА СЛОЖНЫХ / И ДОРОГИХ ПРОДУКТАХ». */
	.clients--industry .clients__title {
		font-size: 2.5rem;
	}
}

@media (max-width: 992px) {
	.clients--industry .clients__sub {
		font-size: 1rem;
	}

	/* 2rem: при 2.25rem на 768–992px «НА» повисало в конце первой строки */
	.clients--industry .clients__title {
		font-size: 2rem;
	}
}

@media (max-width: 767px) {
	.clients--industry .clients__title {
		font-size: 1.75rem;
	}
}

/* ---------- FAQ ---------- */
.faq {
	background-color: #fff;
	color: #111315;
}

.faq__title {
	margin: 0 auto;
	/* «Часто задаваемые» должно помещаться в одну строку — заголовок ровно в две строки */
	max-width: 71.875rem;
	font-family: Unbounded, sans-serif;
	font-weight: 400;
	font-size: 5.625rem;
	line-height: 1.11;
	letter-spacing: -0.03em;
	text-align: center;
}

.faq__list {
	margin: 3.75rem auto 0;
	max-width: 54.25rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

/* нейтрализуем оформление аккордеона «этапов работ» — здесь карточки */
.faq .accordion__item.faq__item {
	border: 0.0625rem solid #dbdbdb;
	border-radius: 1rem;
	background-color: #fff;
	transition: border-color 0.18s ease-out;
}

.faq .accordion__item.faq__item:hover {
	background-color: #fff;
	border-color: #b9b9b9;
}

.faq .accordion__item.faq__item.accordion__item_show,
.faq .accordion__item.faq__item.accordion__item_slidedown {
	background-color: #fff;
	color: #111315;
	border-color: var(--accent, #8228e3);
}

.faq .accordion__header.faq__header {
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	font: inherit;
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.625rem 2rem;
}

.faq .accordion__item_show .accordion__header.faq__header,
.faq .accordion__item_slidedown .accordion__header.faq__header {
	padding-bottom: 0.75rem;
}

.faq__question {
	font-family: Unbounded, sans-serif;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.3;
	color: #111315;
}

.faq__chevron {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #111315;
	/* стрелка должна отзываться одновременно с нажатием, а не догонять анимацию */
	transition: transform 0.18s ease-out, color 0.18s ease-out;
}

.faq .accordion__item_show .faq__chevron,
.faq .accordion__item_slidedown .faq__chevron {
	transform: rotate(180deg);
	color: var(--accent, #8228e3);
}

.faq .accordion__header.faq__header:focus-visible {
	outline: 0.125rem solid var(--accent, #8228e3);
	outline-offset: -0.25rem;
	border-radius: 1rem;
}

.faq__body {
	padding: 0 2rem 1.75rem;
}

.faq__answer {
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.5;
	color: #2e2e2e;
	text-align: left;
}

.faq__answer strong {
	color: #111315;
}

.faq__answer p + p {
	margin-top: 1rem;
}

/* ---------- адаптив ---------- */
@media (max-width: 1280px) {
	.main-screen--industry .main-screen__block {
		grid-template-columns: minmax(0, 42.5rem) auto 23.625rem;
		-ms-grid-columns: minmax(0, 42.5rem) auto 23.625rem;
	}

	.about--centered .about__title,
	.industry-projects__title,
	.faq__title {
		font-size: 4.25rem;
	}

	.about--centered .about__text {
		font-size: 2.5rem;
	}

	.about--centered .about__image .box {
		width: 28.125rem;
		height: 42.1875rem;
	}

	.industry-projects__name {
		font-size: 2rem;
	}

	.industry-projects__list {
		gap: 4.375rem;
	}

	.main-screen--industry .main-screen__left {
		padding-top: 6.25rem;
		padding-bottom: 4.375rem;
	}

	.main-screen--industry .main-screen__button {
		margin-top: 4.375rem;
	}
}

@media (max-width: 992px) {
	.main-screen--industry .main-screen__block {
		grid-template-columns: 1fr;
		-ms-grid-columns: 1fr;
	}

	.main-screen--industry .main-screen__right {
		grid-column: auto;
	}

	.main-screen--industry .main-screen__left {
		padding-right: 0;
	}

	.main-screen--industry .main-screen__bg::after {
		background: linear-gradient(90deg, #111315 0%, rgba(17, 19, 21, 0.9) 40%, rgba(17, 19, 21, 0.55) 100%);
	}

	.about--centered .about__title,
	.industry-projects__title,
	.faq__title {
		font-size: 3.125rem;
	}

	.about--centered .about__text {
		font-size: 1.875rem;
	}

	/* переносы из макета — только для desktop-композиции */
	.main-screen--industry .main-screen__text br,
	.about--centered .about__text br,
	.faq__title br {
		display: none;
	}

	/* плавный переход размера портрета: без него на границе 767/768
	   фото скачком менялось с 380px до 675px */
	.about--centered .about__image .box {
		width: 100%;
		max-width: 31.25rem;
		height: 31.25rem;
	}

	.main-screen--industry .main-screen__left,
	.main-screen--industry .main-screen__right {
		padding-top: 3.125rem;
	}

	.main-screen--industry .main-screen__left {
		/* в отраслевом hero нет центрального объекта — колонка во всю ширину */
		width: 100%;
		min-height: 0;
		padding-bottom: 2.5rem;
	}

	.main-screen--industry .main-screen__button {
		/* в мобильной версии темы кнопка абсолютная (под макет главной);
		   в отраслевом hero она должна остаться в потоке */
		position: static;
		margin-top: 2.5rem;
		width: 100%;
		max-width: 22rem;
	}

	.main-screen--industry .main-screen__left .main-screen__text,
	.main-screen--industry .main-screen__right .main-screen__text {
		max-width: 34rem;
	}

	.industry-more-btn {
		padding: 1rem 2rem;
		font-size: 1.25rem;
	}
}

@media (max-width: 767px) {
	.main-screen--industry .main-screen__bg img {
		object-position: 70% center;
	}

	.main-screen--industry .main-screen__bg::after {
		background: linear-gradient(180deg, rgba(17, 19, 21, 0.85) 0%, rgba(17, 19, 21, 0.75) 60%, rgba(17, 19, 21, 0.9) 100%);
	}

	.about--centered .about__title,
	.industry-projects__title,
	.faq__title {
		font-size: 2.125rem;
	}

	.about--centered .about__sub {
		font-size: 0.875rem;
	}

	.about--centered .about__text {
		font-size: 1.25rem;
	}

	.about--centered .about__image {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.about--centered .about__image .box {
		width: 100%;
		max-width: 20.625rem;
		height: 30.9375rem;
		flex: 0 0 auto;
	}

	.about--centered .about__quote--author {
		font-size: 1.125rem;
	}

	.industry-projects__list {
		margin-top: 2.5rem;
		gap: 2.5rem;
	}

	.industry-more-btn {
		padding: 0.875rem 1.5rem;
		font-size: 1rem;
		gap: 0.75rem;
	}

	.industry-more-btn__icon {
		width: 1.375rem;
		height: 1.375rem;
	}

	.industry-projects__card {
		padding: 0.5rem;
		border-radius: 0.875rem;
	}

	.industry-projects__name {
		margin-top: 1rem;
		font-size: 1.25rem;
	}

	.industry-projects__text {
		font-size: 1rem;
	}

	.faq__list {
		margin-top: 2.5rem;
		gap: 0.75rem;
	}

	.faq .accordion__header.faq__header {
		padding: 1.125rem 1.25rem;
	}

	.faq__question {
		font-size: 1rem;
	}

	.faq__body {
		padding: 0 1.25rem 1.25rem;
	}

	.faq__answer {
		font-size: 0.9375rem;
	}
}

.industry-projects__text--mobile {
	display: none;
}


/* ==========================================================================
   MOBILE-доводка отраслевой страницы.
   Композиция общих блоков берётся из мобильной версии главной,
   чтобы страницы выглядели одной системой.
   ========================================================================== */
@media (max-width: 767px) {
	/* --- HERO: на мобильном оставляем H1, кнопку и основной текст.
	   Второй информационный абзац перегружал первый экран. --- */
	.main-screen--industry .main-screen__right {
		display: none;
	}

	.main-screen--industry .main-screen__left {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	.main-screen--industry .main-screen__button {
		width: auto;
		max-width: 100%;
		min-height: 3.5rem;
		padding: 0 2rem;
	}

	/* --- «Сайт должен работать на бизнес»: та же логика, что в «О себе»
	   на главной (фото во всю ширину контейнера, компактная высота) --- */
	.about--centered .about__image {
		margin-top: 1.25rem;
	}

	.about--centered .about__image .box {
		width: 100%;
		max-width: none;
		height: 26.25rem;
	}

	.about--centered .about__image img {
		object-position: center 18%;
	}

	.about--centered .about__desc {
		margin-top: 1.25rem;
	}

	.about--centered .about__text {
		line-height: 1.4;
	}

	/* подпись как в «О себе» на главной — небольшая и аккуратная */
	.about--centered .about__signature,
	.about--centered .about__quote--author {
		margin-top: 1.25rem;
		font-size: clamp(14px, 1rem, 25.6px);
	}

	.about--centered {
		padding-bottom: 2.5rem;
	}

	/* --- «Реализованные проекты»: короткий подзаголовок --- */
	.industry-projects__text--desktop {
		display: none;
	}

	.industry-projects__text--mobile {
		display: block;
	}

	/* --- «Посмотреть больше»: ширина по контенту, без лишнего воздуха --- */
	.industry-projects__more {
		margin-top: 2rem;
	}

	.industry-more-btn {
		width: fit-content;
		max-width: 100%;
		margin: 0 auto;
	}
}

@media (max-width: 576px) {
	/* высота фото как в мобильном блоке «О себе» на главной */
	.about--centered .about__image .box {
		height: 22.8125rem;
	}
}

/* ---------- переносы заголовка первого экрана ---------- */

/*
 * Заголовок отрасли ломается только по <br> из макета. По ширине переносить
 * его нельзя: у медицины строка «САЙТЫ ДЛЯ КЛИНИК» примерно на 2% шире колонки
 * (896px против 878 на 1920), и три строки макета превращались в четыре;
 * у fintech строка «FINTECH И CRYPTO» на 1024 не дотягивает до края всего 8px,
 * то есть держится на случайности.
 *
 * Недостающие пиксели уходят в правый отступ колонки (40px на 1920, 28px на
 * 1366) — до разделителя строка не достаёт, кегль и трекинг остаются
 * макетными. Недвижимости правило ничего не меняет: там запас 58px.
 *
 * Только десктоп: ниже 993px колонка одна и широкая, три строки набираются
 * сами, а nowrap на узком экране мог бы вытолкнуть текст.
 */
@media (min-width: 993px) {
	.main-screen--industry .main-screen__title {
		white-space: nowrap;
	}
}

/*
 * Мобильный кадр медицинского фона.
 *
 * Общее правило (70%) кадрирует так, что видно x 748..1599 исходника, а ноутбук
 * занимает 1250..1900 — его правая часть срезалась. Сдвигаем окно к правому
 * краю: тогда в кадр попадает 1069..1920, то есть ноутбук целиком, а под
 * заголовком остаётся тёмная часть самого снимка. Текст поверх читается за счёт
 * вертикального затемнения, которое уже есть в этом брейкпоинте.
 */
@media (max-width: 767px) {
	.main-screen--meditsina .main-screen__bg img {
		object-position: right center;
	}
}

/* ======================================================================
   Блок «Что учитываю в сайте клиники» (blocks/industry-details.php)

   Выводится только у отраслей с заполненным ключом 'details' — сейчас это
   медицина. Оформление намеренно продолжает соседние блоки, а не вводит новый
   язык: белый фон и #111315, как у .industry-projects и .faq; подпись 20px
   uppercase, как .about__sub и .clients__sub; заголовок Unbounded 90px с тем же
   шагом по брейкпоинтам (90 → 68 → 50 → 34), что .industry-projects__title;
   вводный абзац 18px/#767676, как .industry-projects__text.

   Пункты — нумерованный список на линейках, без карточек с рамками: рядом
   уже стоят карточки кейсов, второй набор плашек дробил бы страницу. Hover
   повторяет фирменный приём кейсов (акцентный фиолетовый), но без сдвига и
   тени — пункты не кликабельны, и анимация не должна обещать переход.
   ====================================================================== */
.industry-details {
	background-color: #fff;
	color: #111315;
}

.industry-details__header {
	text-align: center;
}

.industry-details__eyebrow {
	font-size: 1.25rem;
	line-height: 1.2;
	text-transform: uppercase;
	color: #111315;
}

.industry-details__title {
	margin: 1.75rem auto 0;
	max-width: 62.5rem;
	font-family: Unbounded, sans-serif;
	font-weight: 400;
	font-size: 5.625rem;
	line-height: 1.11;
	letter-spacing: -0.03em;
}

.industry-details__text {
	margin: 1.875rem auto 0;
	max-width: 53.125rem;
	font-size: 1.125rem;
	line-height: 1.4;
	/* #767676 — тот же серый, что в .industry-projects__text: 4.5:1 на белом */
	color: #767676;
}

.industry-details__text strong {
	color: #111315;
}

/* --- пункты --- */
.industry-details__list {
	margin: 3.75rem auto 0;
	max-width: 77.75rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 6.25rem;
	row-gap: 0;
	list-style: none;
	padding: 0;
	/* замыкающая линейка: у пунктов линия только сверху, и без неё блок
	   обрывался бы открытым краем */
	border-bottom: 0.0625rem solid #e2e2e2;
	counter-reset: industry-details;
}

.industry-details__item {
	padding: 2.5rem 0;
	border-top: 0.0625rem solid #e2e2e2;
	transition: border-color 0.4s ease;
	counter-increment: industry-details;
}

/* Номер пункта — чистое оформление, поэтому рисуется счётчиком, а не текстом
   в разметке. Светло-серый по белому не проходит по контрасту, и пока номер
   был <span aria-hidden>, это было нарушением: aria-hidden убирает элемент
   из дерева доступности, но не с экрана. Информации номер не несёт. */
.industry-details__item::before {
	content: counter(industry-details, decimal-leading-zero);
	display: block;
	margin-bottom: 1.25rem;
	font-family: Unbounded, sans-serif;
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1;
	letter-spacing: 0.02em;
	color: #bdbdbd;
	transition: color 0.4s ease;
}

.industry-details__item-title {
	margin: 0 0 1rem;
	font-family: Unbounded, sans-serif;
	font-weight: 300;
	font-size: 1.75rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #111315;
}

.industry-details__item-text {
	margin: 0;
	max-width: 32.5rem;
	font-size: 1.125rem;
	line-height: 1.4;
	color: #767676;
}

.industry-details__item:hover {
	border-color: var(--accent, #8228e3);
}

.industry-details__item:hover::before {
	color: var(--accent, #8228e3);
}

@media (max-width: 1280px) {
	.industry-details__title {
		font-size: 4.25rem;
	}

	.industry-details__list {
		column-gap: 4.375rem;
	}

	.industry-details__item-title {
		font-size: 1.5rem;
	}
}

@media (max-width: 992px) {
	.industry-details__title {
		font-size: 3.125rem;
	}

	/* перенос из данных нужен только десктопной композиции */
	.industry-details__title br {
		display: none;
	}

	.industry-details__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.industry-details__item {
		padding: 2.25rem 0;
	}

	.industry-details__item-text {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.industry-details__title {
		font-size: 2.125rem;
	}

	.industry-details__eyebrow {
		font-size: 0.875rem;
	}

	/* 1rem — ровно как у .industry-projects__text в этом брейкпоинте,
	   иначе вводный абзац нового блока был бы крупнее соседнего */
	.industry-details__text,
	.industry-details__item-text {
		font-size: 1rem;
	}

	.industry-details__item-title {
		font-size: 1.375rem;
	}

	.industry-details__item::before {
		margin-bottom: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.industry-details__item,
	.industry-details__item::before {
		transition: none;
	}
}