.home-page {
}
.home-page__header {
	position: relative;
	padding-bottom: 24px;
	min-height: 100dvh;
	display: grid;
	align-items: end;
	align-content: end;
	gap: 24px;
}
.home-page__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
.home-page__media-object {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.24;
	pointer-events: none;
}
.home-page__title-group {
	display: flex;
	flex-direction: column;
}
.home-page__subtitle {
	font-weight: 400;
	font-size: 12px;
	line-height: 20px;
	text-transform: uppercase;
	color: var(--neutral-0000);
}
.home-page__title {
	font-family: var(--font-accent);
	font-size: clamp(48px, 11.11vw, 84px);
	font-weight: 400;
	line-height: 0.9;
	color: var(--neutral-0000);
}

/* navigation */
.home-page-navigation {
	margin-inline: -8px;
	display: flex;
	flex-direction: column;
}

.home-page-navigation__steps {
	--step-1-color: var(--primary-0500);
	--step-2-color: var(--neutral-0000-048);

	padding-bottom: 24px;
	display: flex;
	gap: 4px;
}
.home-page-navigation__steps._second {
	--step-1-color: var(--neutral-0000-048);
	--step-2-color: var(--primary-0500);
}
.home-page-navigation__step {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-weight: 400;
	font-size: 16px;
	line-height: 16px;
	color: var(--step-1-color);
}
.home-page-navigation__step:last-child {
	color: var(--step-2-color);
}
.home-page-navigation__step::after {
	content: '';
	display: block;
	width: 100%;
	height: 4px;
	background-color: currentColor;
	border-radius: 10px;
}

.home-page-navigation__list {
	display: grid;
	gap: 4px;
}

.home-page-navigation__item {
	--color: var(--neutral-0000);
	--color-hover: var(--neutral-0000);
	--background-color: var(--primary-0500-008);
	--background-color-hover: var(--primary-0500-024);
	--border-color: var(--primary-0500-024);
	--border-hover-color: var(--primary-0500-040);

	padding: 20px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	background-color: var(--background-color);
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px var(--border-color);

	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;

	color: var(--color);
	backdrop-filter: blur(24px)
}
.home-page-navigation__item[data-menu-back] {
	--color: var(--neutral-0000-064);
	--color-hover: var(--neutral-0000);
	--border-color: var(--neutral-0000-020);
	--border-hover-color: var(--neutral-0000-048);
	--background-color: var(--neutral-0000-004);
	--background-color-hover: var(--neutral-0000-004);

	justify-self: start;
	gap: 6px;
}
.home-page-navigation__list[data-menu-group] .home-page-navigation__item:not([data-menu-back]) {
	background-image: url('../../images/i-menu-item-arrow.svg');
	background-position: right 16px center;
	background-repeat: no-repeat;
}


/* professionals */
.home-page-professionals {
	position: relative;
	padding-block: 6.6vw 8.8vw;
	display: grid;
	gap: 8.8vw;
	background: url('../../images/professionals-bg.png') no-repeat right center / contain, var(--neutral-1000);
}
.home-page-professionals__title {
	position: relative;
	padding-top: 12vw;
	display: grid;

	font-family: var(--font-accent);
	font-weight: 400;
	font-size: 8vw;
	line-height: 0.9;
	color: var(--primary-0500);
}
.home-page-professionals__title-part {
	--delay: 0s;

	overflow: hidden;
}
.home-page-professionals__title-part:nth-child(1) {
	--delay: 0s;
}
.home-page-professionals__title-part:nth-child(2) {
	--delay: 0.05s;
}
.home-page-professionals__title-part:nth-child(3) {
	--delay: 0.1s;
}
.home-page-professionals__title-part:nth-child(4) {
	--delay: 0.15s;
}
.home-page-professionals__title-part span {
	display: block;
	transform: translateY(100%) rotate(20deg);
	transform-origin: left center;
	transition: transform 0.3s ease-in-out var(--delay);
}
.home-page-professionals.is-inview .home-page-professionals__title-part span {
	transform: rotate(0);
}
.home-page-professionals__title-part:nth-child(3),
.home-page-professionals__title-part:nth-child(4) {
	padding-left: 6.3vw;
}

.home-page-professionals__caption {
	display: none;
}
.home-page-professionals__logo {
	position: absolute;
	top: 0;
	right: 0;
	width: min(8.8vw, 64px);
}
.home-page-professionals__text {
	max-width: 404px;
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
	color: var(--neutral-0000);
}

.home-page-professionals__logo,
.home-page-professionals__text,
.home-page-professionals__caption {
	transition: opacity 0.3s ease-in-out 0.5s;
	opacity: 0;
}
.home-page-professionals.is-inview .home-page-professionals__logo,
.home-page-professionals.is-inview .home-page-professionals__text,
.home-page-professionals.is-inview .home-page-professionals__caption {
	opacity: 1;
}


/* advantages */
.advantages {
	position: relative;
	padding-block: 16px;
	background-color: var(--neutral-1000);
}
.advantages__fixed {
	display: none;
}
.advantages__list {
	position: relative;
	display: grid;
	gap: 8px;
	z-index: 1;
}
.advantages__circle {
	position: absolute;
	top: 140px;
	left: 80px;
	width: 80px;
	aspect-ratio: 1;
	background-color: var(--primary-0500-040);
	border-radius: 50%;
}
.advantages__circle._second {
	width: 120px;
	top: 350px;
	left: auto;
	right: 80px;
}

/* direction-promo */
.direction-promo {
	padding-block: 16px 48px;
	display: grid;
	gap: 12px 8px;
}
.direction-promo-item {
	--padding: 16px;
	--media-opacity: 0.24;
	--transition-duration: 0.2s;

	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 12px;
	overflow: hidden;
}

.direction-promo-item__main-link {
	padding: var(--padding);
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.direction-promo-item__caption {
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--neutral-0000-064);
}
.direction-promo-item__title {
	font-family: var(--font-accent);
	font-weight: 400;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--neutral-0000);
}

.direction-promo-item__bottom-group {
	padding: 0 var(--padding) var(--padding);
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
}
.direction-promo-item__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
.direction-promo-item__media-object {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: var(--media-opacity);
	pointer-events: none;
	transition: opacity var(--transition-duration) ease-in-out;
}
.direction-promo-item__description {
	padding-bottom: var(--padding);
	max-width: 440px;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--neutral-0000-080);
	transform: translateY(-100%);
}

.direction-promo-item__links {
	display: none;
}

/* blog */
.home-page__blog-header {
	padding-top: 32px;
}
.home-page__blog-title {
	font-family: var(--font-accent);
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--neutral-0000);
}
.home-page__blog-items {
	padding-block: 20px;
	display: grid;
	gap: 32px;
}


@media (any-hover: hover) {
	.home-page-navigation__item:hover {
		--color: var(--color-hover);
		--border-color: var(--border-hover-color);
		--background-color: var(--background-color-hover);
	}
}
@media (any-hover: none) {
	.home-page-navigation__item:active {
		--color: var(--color-hover);
		--border-color: var(--border-hover-color);
		--background-color: var(--background-color-hover);
	}
}

@media (width < 720px) {
	.home-page__blog-header > .button {
		display: none;
	}
}
@media (width >= 720px) {
	.home-page__subtitle {
		padding-inline: 6px;
		font-size: 18px;
		line-height: 1;
	}
	.direction-promo {
		grid-template-columns: repeat(2, 1fr);
	}

	/* blog */
	.home-page__blog-header,
	.home-page__blog-title {
		display: flex;
		align-items: flex-end;
		gap: 20px;
	}
	.home-page__blog-title {
		flex-grow: 1;
		align-items: baseline;
		font-size: 48px;
		line-height: 52px;
	}
	.home-page__blog-title::after {
		content: '';
		width: 100%;
		height: 1px;
		background-color: var(--neutral-0000-020);
	}
	.home-page__blog-items {
		grid-template-columns: 1fr 1fr;
		gap: 40px var(--column-gap);
	}
	.home-page__blog-items > .button {
		display: none;
	}
}
@media (width >= 720px) and (any-hover: hover) {
}
@media (width >= 720px) and (any-hover: none) {
}

@media (720px <= width < 1200px) {
	.home-page-navigation__list {
		grid-template-columns: repeat(2, 1fr);
	}
	.home-page-professionals {
		padding-inline: 32px;
	}
	.advantages__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (width < 1200px) {
	.home-page__media::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(
			180deg,
			var(--neutral-1000) 0%,
			var(--neutral-1000-012) 40%
		);
		z-index: 1;
	}

	.home-page-navigation__steps,
	.home-page-navigation__list[data-menu-group] {
		display: none;
	}

	.direction-promo-item__bottom-group {
		pointer-events: none;
	}
}

@media (width >= 1200px) {
	.home-page__header {
		grid-template-columns: repeat(12, 1fr);
		column-gap: var(--column-gap);
		padding-bottom: 84px;
	}
	.home-page__title-group {
		padding: 0;
		grid-column: 1 / 8;
	}
	.home-page__subtitle {
		font-size: 20px;
	}
	.home-page__title {
		font-size: clamp(80px, 6.38vw, 120px);
	}
	.home-page__content {
		display: flex;
		justify-content: space-between;
	}

	/* navigation */
	.home-page-navigation {
		margin: 0;
		grid-column: 8 / 13;
	}
	.home-page-navigation__lists {
		position: relative;
		overflow: hidden;
		transition: height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	.home-page-navigation__list {
		transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
	}
	.home-page-navigation__list._hidden {
		opacity: 0;
		visibility: hidden;
	}
	.home-page-navigation__list[data-menu-group] {
		position: absolute;
		top: 0;
		width: 100%;
		opacity: 0;
		visibility: hidden;
	}
	.home-page-navigation__list._show {
		opacity: 1;
		visibility: visible;
	}
	.home-page-navigation__item {
		--color: var(--primary-0500);
		--color-hover: var(--primary-0500);
		--border-hover-color: var(--primary-0500-064);

		padding-block: 16px;
	}

	/* professionals */
	.home-page-professionals {
		min-height: 100vh;
		padding-block: 80px;

		grid-template-columns: 3fr 9fr;
		align-content: center;
		gap: 32px var(--column-gap);
	}
	.home-page-professionals__title {
		padding-top: 0;
		grid-column: span 2;
		grid-template-columns: 3fr 9fr;
		column-gap: var(--column-gap);
		font-size: clamp(74px, 6vw, 120px);
	}
	.home-page-professionals__title-part:nth-child(1),
	.home-page-professionals__title-part:nth-child(2) {
		grid-column: span 2;
	}
	.home-page-professionals__title-part:nth-child(3),
	.home-page-professionals__title-part:nth-child(4) {
		padding-left: 0;
		grid-column: 2;
	}
	.home-page-professionals__caption {
		grid-column: 1;
		grid-row: 4;
		align-self: end;

		display: flex;
		align-items: baseline;
		gap: var(--column-gap);

		font-family: var(--font-accent);
		font-weight: 400;
		font-size: 20px;
		line-height: 24px;
		color: var(--neutral-0000);
	}
	.home-page-professionals__caption::after {
		content: '';
		width: 100%;
		height: 1px;
		background-color: var(--neutral-0000-064);
	}
	.home-page-professionals__text {
		grid-column: 2;
	}

	/* advantages */
	.advantages {
		--inner-padding: 40px;

		padding-block: 20px;
		min-height: 100vh;
	}
	.advantages__inner {
		position: relative;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.advantages__image {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.32;
		z-index: -1;
	}
	.advantages__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.advantages__fixed {
		display: block;
		position: sticky;
		top: 20px;
		padding: var(--inner-padding);
		width: 100%;
		height: calc(100vh - 40px);
		border-radius: 12px;
		overflow: hidden;
	}
	.advantages__header {
		display: flex;
		flex-direction: column;
		gap: 34px;
	}
	.advantages__title {
		display: flex;
		flex-direction: column;

		font-family: var(--font-accent);
		font-weight: 400;
		font-size: clamp(46px, 4vw, 80px);
		line-height: 0.9;
		color: var(--neutral-0000-064);
	}
	.advantages__title span {
		color: var(--neutral-0000);
	}
	.advantages__description {
		max-width: 460px;
		font-weight: 350;
		font-size: 18px;
		line-height: 26px;
		color: var(--neutral-0000);
	}

	.advantages__list {
		margin-left: calc(-479px - var(--inner-padding));
		margin-right: var(--inner-padding);
		padding-block: var(--inner-padding);
		width: 479px;
		gap: 18px;
	}
	.advantages__list._scroll {
		transition: gap 100ms linear;
		align-content: end;
	}
	.advantages__circle {
		display: none;
	}

	/* direction-promo */
	.direction-promo {
		padding-block: 20px;
		min-height: 100vh;
		column-gap: var(--column-gap);
	}
	.direction-promo-item:hover {
		--media-opacity: 0.36;
	}

	.direction-promo-item {
		--padding: 32px;

		aspect-ratio: unset;
	}
	.direction-promo-item__title {
		font-size: 36px;
	}

	.direction-promo-item__bottom-group {
		transform: translateY(0);
		transition: transform var(--transition-duration) ease-in-out;
	}
	.direction-promo-item:hover .direction-promo-item__bottom-group {
		transform: translateY(-100%);
	}

	.direction-promo-item__description {
		transition: opacity var(--transition-duration) ease-in-out, visibility var(--transition-duration) ease-in-out;
	}
	.direction-promo-item:hover .direction-promo-item__description {
		opacity: 0;
		visibility: hidden;
	}

	.direction-promo-item__links {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition-duration) ease-in-out, visibility var(--transition-duration) ease-in-out;
	}
	.direction-promo-item:hover .direction-promo-item__links {
		opacity: 1;
		visibility: visible;
	}

	.direction-promo-item__link {
		padding: 8px 12px;
		margin-left: -12px;
		display: block;
		border-radius: 2px;
		font-weight: 500;
		font-size: 16px;
		line-height: 24px;
		text-transform: uppercase;
		color: var(--neutral-0000-080);
	}
	.direction-promo-item__link:hover {
		background-color: var(--neutral-0000-012);
		color: var(--neutral-0000);
	}

	/* blog */
	.home-page__blog-header {
		padding-block: 60px 20px;
	}
}

@media (1408px <= width < 1800px) {
	.home-page__blog-items {
		grid-template-columns: repeat(3, 1fr);
	}
	.home-page__blog-items .blog-item:nth-child(n + 4) {
		display: none;
	}
}

@media (width >= 1800px) {
	.home-page__subtitle {
		font-size: 24px;
	}
	.home-page-navigation {
		grid-column: 10 / 13;
	}
	.advantages__inner {
		padding: 60px;
	}

	/* blog */
	.home-page__blog-title {
		font-size: clamp(48px, 2.5vw, 64px);
		line-height: 1;
	}
	.home-page__blog-items {
		grid-template-columns: repeat(4, 1fr);
	}
}