:root {
	/* Цвета из UI-кита макета (Style.png) */
	--color-text: #111111; /* @label Основной текст — тело сайта, навигация, заголовки блоков */
	--color-sub-text: #4f4f4f; /* @label Вторичный текст — подписи, второстепенные строки */
	--color-light-text: #DDE8E2; /* @label Светлый текст, акцент на темном фоне */
	--color-line: #cad5cf; /* @label Линии и разделители */
	--color-body: #e8f3ed; /* @label Фон страницы */
	--color-bg: #dde8e2; /* @label Фон — запасной тон */
	--color-bg1: #daece2; /* @label Фон — запасной тон 2 */
	--color-main: #0d1228; /* @label Основной тёмный — кнопки, шапка/футер, обводки */
	--color-main2: #00ba25; /* @label Акцент — ссылки и кнопки при наведении */
	--color-white: #ffffff; /* @label Белый — текст и элементы на тёмном фоне */

	--fluid-width: calc((100vw - 375px) / 1545);

	/*
	 * Aktiv Grotesk Corp — платный шрифт, ждём файлы от клиента.
	 * Пока используем Inter (похожая гротескная гарнитура) через Google Fonts.
	 */
	--font-body: 'Aktiv Grotesk Corp', Roboto, sans-serif; /* @label Основной шрифт — весь текст, кроме заголовков */
	--font-heading: 'Philosopher', Georgia, serif; /* @label Шрифт заголовков и акцентных элементов (напр. подпись в футере) */

	--font-line-text: 1.429;
	--font-line-base: 1.375;
	--font-size-text: 0.875rem;

	--font-line-heading: 1.091;
	--font-weight-heading: 400;
	--font-size-heading: calc(2.75rem + 0 * var(--fluid-width));
}

html {
	font-size: 16px;
}

body {
	font-weight: 400;
	line-height: 1.429;
	/* line-height: 22px; */
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-body);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--font-weight-heading);
}
h1, h2 {
	line-height: var(--font-line-heading);
	font-size: var(--font-size-heading);
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	transition: all .25s;

	&:hover {
		color: var(--color-main2);
	}
}

button {
	color: inherit;
	border: none;
	text-align: left;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background-color: transparent;
	transition: all .25s;
}

.pull-right {
	margin-left: auto;
}
.pull-center {
	margin: 0 auto;
}
.pull-down {
	margin-top: auto;
}

.d-flex {
	display: flex;
	align-items: center;
}

.icon {
	display: flex;
	align-items: center;
	justify-content: center;

	& svg {
		width: var(--icon-size, 100%);
		aspect-ratio: 1;
		
		& path {
			fill: var(--icon-fill, currentColor);
			transition: all .25s;
		}
	}
}

.link {
	display: flex;
	column-gap: 12px;
	align-items: center;
}
.link__icon {
	width: var(--link-icon-size, 20px);
	min-width: var(--link-icon-size, 20px);
	height: var(--link-icon-size, 20px);
}
.link__text {
	transition: all .25s;
}


.btn {
	display: inline-flex;
	column-gap: 12px;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 24px;
	border-radius: 999px;
	font-size: 0.875rem;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	cursor: pointer;
}
.btn--dark {
	color: var(--color-white);
	background: var(--color-main);
}
.btn--dark:hover {
	color: var(--color-white);
	background: var(--color-main2);
}
.btn--inline {
	padding: 0;
	height: auto;
	border: none;
}
.btn--reverse {
	flex-direction: row-reverse;
}

.menu {
	display: flex;
	row-gap: 32px;
	flex-direction: column;
}
.menu__title {
	font-size: 1rem;
	opacity: 0.5;
}
.menu__list {
	list-style: none;
	margin: 0;
	padding: 0;

	display: flex;
	row-gap: 16px;
	flex-direction: column;
}
.menu__item {
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	column-gap: 12px;
	align-items: center;

	.icon {
		width: 20px;
		min-width: 20px;
		height: 20px;

		& path {
			fill: var(--menu-icon-color, currentColor);
		}
	}
}
.menu__href {
	font-size: 1rem;
}

.socials {
	display: flex;
	column-gap: 16px;
	align-items: center;
}
.socials__item {
	& .link {
		width: 44px;
		height: 44px;

		display: flex;
		align-items: center;
		justify-content: center;

		border-radius: 50%;
		background-color: var(--socials-background, rgba(255, 255, 255, 0.08));

		&:hover {
			--socials-scale: 1.2;
			--socials-color: var(--color-main2);
		}
	}

	& .icon {
		width: 20px;
		height: 20px;
		transition: all .25s;
		transform: scale(var(--socials-scale, 1), var(--socials-scale, 1));

		& path {
			fill: var(--socials-color, currentColor);
		}
	}
}

.page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.page__content {
	flex: 1 0 auto;
	display: flex;
	row-gap: var(--content-gap, 140px);
	flex-direction: column;
}
.container {
	width: 100%;
	max-width: 1648px;
	margin: 0 auto;
	padding: 0 24px;
}

.feadback-phone {
	display: flex;
	column-gap: 16px;
	align-items: center;
}
.feadback-phone__icon {
	--icon-size: 18px;

	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--color-bg);
}
.feadback-phone__body {
	display: flex;
	row-gap: 2px;
	flex-direction: column;
}
.feadback-phone__link {
	font-size: 1rem;
	line-height: var(--font-line-base);
	color: var(--color-text);
}
.feadback-phone__caption {
	font-size: 0.875rem;
	line-height: var(--font-line-text);
	color: var(--color-sub-text);
}