.footer {
	background-color: var(--color-black);
	color: var(--color-white);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.footer__top {
	padding-block: 10rem; /* 100px */
}

.footer__inner {
	display: flex;
	align-items: flex-start;
}

/* Левый блок: лого + описание + CTA + юр. реквизиты */
.footer__brand {
	display: flex;
	flex-direction: column;
	width: 43rem; /* 430px */
	flex-shrink: 0;
}

.footer__logo {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

.footer__logo-icon {
	display: block;
	height: 3.5rem; /* 35px */
	width: auto;
}

.footer__logo-text {
	font-weight: 700;
	text-transform: uppercase;
}

.footer__description {
	margin-top: 2rem; /* 20px */
	opacity: 0.3;
}

.footer__cta {
	display: flex;
	gap: 1rem; /* 10px */
	margin-top: 2rem; /* 20px */
}

.footer__legal {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 15px */
	margin-top: 6rem; /* 60px */
}

/* «Реквизиты» — заголовок над .footer__legal, нужен только в мобильной
   раскладке (см. @media 480px); на десктопе/планшете список идёт без
   подписи, как и было. */
.footer__legal-title {
	display: none;
}

/* Разделители между блоками — часть только мобильного референса,
   на десктопе/планшете колонки отделяются просто отступом grid/flex. */
.footer__divider {
	display: none;
}

/* Правая часть: 4 колонки навигации/контактов */
.footer__nav {
	display: grid;
	grid-template-columns: repeat(4, 28rem); /* 4 × 280px */
	column-gap: 2rem; /* 20px */
	margin-left: auto;
}

.footer__col-title {
	opacity: 0.3;
	margin-bottom: 2rem; /* 20px */
}

.footer__col-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* 15px */
}

.footer__col-list a {
	color: inherit;
}

.footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: 2rem; /* 20px */
}

.footer__contact-item {
	display: flex;
	flex-direction: column;
	gap: 0.8rem; /* 8px */
}

.footer__contact-label {
	opacity: 0.3;
}

.footer__contact-value a {
	color: inherit;
}

.footer__messengers {
	display: flex;
	gap: 1rem; /* 10px */
	margin-top: 2rem; /* 20px */
}

.footer__messenger {
	display: block;
	width: 5rem; /* 50px */
	height: 5rem;
}

.footer__messenger img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Нижняя служебная строка */
.footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 2.5rem; /* 25px */
}

.footer__policy,
.footer__totop {
	color: var(--color-white);
	opacity: 0.3;
}

.footer__credit {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem; /* 8px */
	font-weight: 500;
	letter-spacing: -0.1rem; /* -1px */
	color: var(--color-white);
}

.footer__credit-text {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.footer__credit-icon {
	display: block;
	width: 1.9rem;
	height: 1.9rem;
	flex-shrink: 0;
}

@media (max-width: 1360px) {
	.footer__inner {
		flex-direction: column;
		gap: 6rem; /* 60px */
	}

	.footer__brand,
	.footer__nav {
		width: 100%;
		margin-left: 0;
	}

	.footer__nav {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 6rem;
	}

	.footer__bottom-inner {
		flex-wrap: wrap;
		gap: 1.5rem;
	}
}

@media (max-width: 480px) {
	.footer__top {
		padding-block: 6rem 4rem;
	}

	.footer__logo-text {
		font-size: 3rem; /* 30px по референсу — переопределяет унаследованные 2rem у .h3 */
	}

	.footer__cta {
		flex-direction: column;
	}

	.footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.footer__credit {
		margin-bottom: 8rem; /* большой отступ снизу по референсу — .footer__totop
		                        скрыт на мобильном, credit становится последним
		                        элементом строки */
	}

	.footer__credit-text {
		text-decoration: none; /* по референсу на мобильном текст без подчёркивания,
		                           в отличие от десктопа/планшета */
	}

	/* Мобильный референс требует последовательность блоков, не совпадающую
	   ни с десктопным DOM-порядком (контакты спрятаны в 4-й колонке
	   .footer__nav, «Реквизиты» и CTA — в .footer__brand), ни друг с другом.
	   display:contents «распрямляет» .footer__brand/.footer__nav/.footer__col--contacts
	   в единый flex-контекст .footer__inner, где порядок полностью
	   управляется через order — без дублирования разметки под брейкпоинт. */
	.footer__inner {
		display: flex;
		flex-direction: column;
		gap: 0; /* сбрасывает gap:6rem из блока ≤1360px — там он был рассчитан на
		           2 крупных ребёнка (brand/nav), а тут через display:contents
		           внутри стало много «плоских» соседей, и это же значение
		           лупилось между каждой парой */
	}

	.footer__brand,
	.footer__nav,
	.footer__col--contacts {
		display: contents;
	}

	.footer__logo {
		order: 1;
	}

	.footer__description {
		order: 2;
	}

	.footer__divider {
		display: block;
		width: 100%; /* align-items:stretch не срабатывает для этих элементов —
		                они «усыновлены» через display:contents на предке,
		                поэтому ширина задаётся явно */
		height: 0;
		/* border вместо height:1px+background-color — на дробной суб-пиксельной
		   позиции (зависит от кумулятивной высоты контента выше, а она разная
		   у каждого разделителя) background-color давал заметно разную яркость
		   линий из-за антиалиасинга, border рендерится стабильно на любой
		   позиции. 0.3 — тот же цвет, что у остальных бордеров/разделителей
		   на тёмном фоне по сайту (button/modal-form/request-form). */
		border-top: 1px solid rgba(255, 255, 255, 0.3);
		margin-block: 3rem; /* 30px — просвет над/под линией-разделителем */
	}

	.footer__divider--1 {
		order: 3;
	}

	.footer__contact-list {
		order: 4;
	}

	.footer__messengers {
		order: 5;
	}

	.footer__cta {
		order: 6;
		flex-direction: column;
	}

	.footer__divider--2 {
		order: 7;
	}

	.footer__col--tech {
		order: 8;
	}

	.footer__divider--3 {
		order: 9;
	}

	.footer__col--services {
		order: 10;
	}

	.footer__divider--4 {
		order: 11;
	}

	.footer__col--sitenav {
		order: 12;
	}

	.footer__divider--5 {
		order: 13;
	}

	/* «Контакты» — заголовок 4-й колонки скрыт: в референсе список адресов
	   идёт сразу после разделителя, без отдельного подзаголовка. */
	.footer__col--contacts > .footer__col-title {
		display: none;
	}

	.footer__legal-title {
		display: block;
		order: 14;
	}

	.footer__legal {
		order: 15;
		margin-top: 0; /* исходный отступ рассчитан на соседство с CTA, тут сосед другой */
	}

	/* «Вернуться в начало» отсутствует в мобильном референсе */
	.footer__totop {
		display: none;
	}
}

@media (min-width: 481px) and (max-width: 1360px) {
	.home-page .footer__inner {
		display: grid;
		grid-template-columns: 30rem minmax(0, 1fr);
		gap: 6rem;
	}

	.home-page .footer__brand,
	.home-page .footer__nav {
		width: auto;
		margin-left: 0;
	}

	.home-page .footer__nav {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 2rem;
		row-gap: 0;
	}

	.home-page .footer__bottom-inner {
		flex-wrap: nowrap;
	}
}