@font-face {
	font-family: 'Unbounded';
	src: url('../fonts/Unbounded-Black-Cyrillic.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Unbounded';
	src: url('../fonts/Unbounded-Black-Latin.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
strong {
	line-height: 1.2;
	text-transform: uppercase;
	color: rgba(9, 21, 38, 0.6);
}
.promo h1,
.about .wrapper > .bg-text {
	--ls: min(40px, calc((100vw - 375px) / (1920px - 375px) * (40px - 16px) + 16px));
	font-size: min(478px, calc((100vw - 375px) / (1920px - 375px) * (478px - 195px) + 195px));
	letter-spacing: calc(0px - var(--ls));
}
:is(.promo, .video-box, .about, .advantages, .partners, .reviews, .blog, .faq) {
	contain: inline-size layout style;
}
.promo {
	display: grid;
	> * {
		grid-area: 1/1/2/2;
	}
	.video {
		width: 100vw;
		pointer-events: none;
		overflow: hidden;
	}
	h1 {
		display: flex;
		justify-content: center;
		padding: 147px 40px 325px 0;
		font-family: 'TT Travels';
		user-select: none;
		background: url(../images/index/promo-h1.svg) top center / max(4825px, 100vw) auto no-repeat;
		&::selection {
			background: url(../images/index/promo-h1.svg) top center / max(4825px, 100vw) auto no-repeat;
		}
	}
	.wrapper {
		position: relative;
		z-index: 1;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 20px;
		align-items: end;
		margin-block: auto 100px;
		padding-right: 12px;
		h2 {
			display: flex;
			flex-direction: column;
			align-items: start;
			font-size: min(60px, calc((100vw - 375px) / (1920px - 375px) * (60px - 32px) + 32px));
			span {
				margin-block: 13px 8px;
				padding: 6px 10px;
				border-radius: 6px;
				color: var(--btn-color);
				background-clip: initial;
				-webkit-background-clip: initial;
			}
		}
		.btn {
			margin-bottom: 10px;
		}
	}
}
.video-box {
	position: relative;
	margin-bottom: 38px;
	&::before {
		content: '';
		position: absolute;
		top: -100px;
		left: 0;
		width: 100%;
		height: calc(100% + 100px);
		pointer-events: none;
		background: linear-gradient(rgba(0, 0, 0, 0), #fff 90px, #fff 80%, rgba(0, 0, 0, 0) 100%);
	}
	.main-video {
		--duration: 800ms;
		position: relative;
		max-height: 100dvh;
		aspect-ratio: 368 / 207;
		border: 2px solid var(--bg-1);
		box-shadow: 0 0 80px 24px rgba(24, 1, 66, 0.15);
		border-radius: 24px;
		overflow: hidden;
		transform: scale(.3147);
		opacity: 0;
		transform-origin: top center;
		transition: transform var(--duration) linear, opacity .3s linear;
		video {
			position: absolute;
			min-width: 100%;
			width: 100%;
			min-height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			pointer-events: none;
		}
	}
	.volume {
		position: absolute;
		right: 40px;
		bottom: 40px;
		width: 40px;
		aspect-ratio: 1;
		display: grid;
		place-items: center;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0 20px 21px rgba(64, 24, 139, 0.04), 0 16px 16px rgba(64, 24, 139, 0.04);
		backdrop-filter: blur(5px);
		border-radius: 8px;
		border: none;
		transition: background-color .3s linear;
		&::before {
			content: '\e905';
			font: 24px icon;
			color: transparent;
			background: var(--gradient-1);
			background-clip: text;
			-webkit-background-clip: text;
		}
		&.on::before {
			content: '\e906';
		}
	}
	&.scroll .main-video {
		transform: scale(1);
		opacity: 1;
	}
}
section.about {
	position: relative;
	padding-top: 140px;
	margin-bottom: 200px;
	.wrapper {
		& > img {
			position: absolute;
			top: -107px;
			left: 0;
			max-width: 50%;
			pointer-events: none;
		}
		.text-box {
			max-width: 912px;
			width: 100%;
			margin-left: auto;
			margin-bottom: 30px;
			h2 {
				margin-bottom: 12px;
			}
			p {
				max-width: 580px;
				margin-bottom: 50px;
				color: rgba(9, 21, 38, 0.6);
				font-size: 20px;
				line-height: 100%;
			}
			& > span {
				display: block;
				width: max-content;
				margin-left: auto;
				color: var(--textColor2);
				line-height: 120%;
				text-transform: uppercase;
				span {
					background: linear-gradient(270deg, #7c3bf3 0%, #7c3bf3 50%, #246df4 100%);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					line-height: 120%;
					text-transform: uppercase;
				}
			}
		}
		.cards {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 12px;
			.card {
				display: flex;
				flex-direction: column;
				gap: 10px;
				height: 235px;
				padding: 40px;
				position: relative;
				backdrop-filter: blur(16px);
				box-shadow: 0px 16px 34px 0px #0000000f, 0px 63px 63px 0px #0000000d, 0px 141px 84px 0px #00000008, 0px 250px 100px 0px #00000003, 0px 391px 109px 0px #00000000;
				background: #ffffffB2;
				border-radius: 16px;
				overflow: hidden;
				h3 {
					font-size: 24px;
					font-weight: 900;
					line-height: 100%;
				}
				p {
					font-size: 20px;
					line-height: 110%;
					color: #09152699;
				}
				img {
					position: absolute;
					width: 250px;
					aspect-ratio: 1/1;
					top: -7px;
					right: 0;
				}
				span {
					position: absolute;
					bottom: -50px;
					left: -10px;
					font-size: 172px;
					font-weight: 900;
					text-transform: uppercase;
					color: #f6f6f680;
					white-space: nowrap;
					z-index: -1;
				}
			}

		}
	}
}
.services {
    position: relative;
	display: grid;
	grid-template-columns: 577px 1fr;
	gap: 30px 40px;
	align-items: center;
	margin-bottom: 200px;
	.title-box {
		grid-column: 1/-1;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		position: relative; 
		h2 { 
			max-width: 820px; 
		}
		& > span.bg {
			--max-blur: 24px; 
			position: absolute;
			bottom: -32px;
			right: -120px;
			z-index: -1;
			font-weight: 900;
			font-size: 158px;
			line-height: 109%;
			letter-spacing: 10px;
			text-transform: uppercase;
			white-space: nowrap;
			color: transparent;
			pointer-events: none;
			user-select: none;
			&::before { 
				content: attr(data-text);
				position: absolute; inset: 0;
				color: #fff;
				-webkit-mask-image: linear-gradient(to right, transparent 35%, #000 60%);
				mask-image: linear-gradient(to right, transparent 35%, #000 60%);
			}
			&::after {
				content: attr(data-text);
				position: absolute; inset: 0;
				color: #fff;
				filter: blur(var(--max-blur));
				-webkit-mask-image: linear-gradient(to left, transparent 40%, #000 65%);
				mask-image: linear-gradient(to left, transparent 40%, #000 65%);
			}
		}
	}
	.menu {
		display: flex;
		flex-direction: column;
		gap: 24px;
		p {
			display: flex;
			gap: 7px;
			height: 33px;
			font-size: 24px;
			line-height: 100%;
			font-weight: 900;
			background: linear-gradient(90deg, #7c3bf3 0%, #7c3bf3 25%, #246df4 50%, #09152666 50%, #09152666 100%);
			background-clip: text;
			background-size: 200% 100%;
			background-position: 100% 0%;
			-webkit-background-clip: text;
			color: transparent;
			text-transform: uppercase;
			cursor: pointer;
			transition: .3s ease;
			padding-bottom: 12px;
			position: relative;
			&::after {
                content: '';
                position: absolute;
                left: 0; 
				bottom: 0;
                width: 100%; 
				height: 2px;
                background: var(--gradient-3);
                transform: scaleX(0);
                transform-origin: left;
                transition: transform .45s cubic-bezier(.77, 0, .18, 1);
            }

            &:hover { 
				background-position: 0% 0%;
			}
            &.active {
                background-position: 0% 0%;
                &::after { 
					transform: scaleX(1); 
				}
            }
		}
	}
	.items {
		--enter: enter-up;
		--leave: leave-up;
		position: relative;
        height: 560px; 
        overflow: hidden;
        border-radius: 16px;
		backdrop-filter: blur(56px);
		box-shadow: 0px 16px 34px 0px #0000000f, 0px 63px 63px 0px #0000000d, 0px 141px 84px 0px #00000008, 0px 250px 100px 0px #00000003, 0px 391px 109px 0px #00000000;
		&.to-down { 
			--enter: enter-down; 
			--leave: leave-down; 
		}
		.item {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			gap: 20px 40px;
			padding: 60px;
			background: #ffffff66;
			border-radius: 16px;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			transition: opacity .45s ease, visibility 0s linear .45s;
			img {
				position: absolute;
				top: 0;
				left: 0;
				max-width: 768px;
			}
			.links {
				display: flex;
				flex-direction: column;
				width: 366px;
				gap: 2px;
				margin-left: auto;
				a {
					display: flex;
					align-items: center;
					padding: 7px 20px;
					width: 100%;
					font-size: 20px;
					font-weight: 500;
					line-height: 110%;
					letter-spacing: -0.4px;
					color: var(--textColor2);
					opacity: 0; 
					transition: opacity .25s ease;
					&::after {
						content: '\e901';
						font-family: 'icon';
						display: flex;
						justify-content: center;
						align-items: center;
						width: 20px;
						height: 20px;
					}
				}
			}
			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: auto;
				h3 {
					max-width: 360px;
					font-size: 30px;
					line-height: 100%;
					font-weight: 900;
					color: transparent;
					background: var(--item-gradient);
					background-clip: text;
					-webkit-background-clip: text;
				}
			}
			&.active {
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
				transition: opacity .5s ease;
				img, .links, .bottom h3 {
					animation: var(--enter) .7s cubic-bezier(.22, 1, .36, 1) both;
				}
				img {
					animation: var(--enter) .7s cubic-bezier(.22, 1, .36, 1) both, item-float 7s ease-in-out 1.2s infinite;
				}
				.links a {
					opacity: 1;
					transition: opacity .5s ease;
					@for $i from 1 through 10 {
						&:nth-child(#{$i}) { transition-delay: #{.3 + $i * .05}s; }
					}
				}
			}
			&.leaving {
				img, .links, .bottom h3 {
					animation: var(--leave) .55s ease-in both;
				}
			}
		}
	}
}
@keyframes enter-up   { from { transform: translateY(140px);  } }
@keyframes enter-down { from { transform: translateY(-140px); } }
@keyframes leave-up   { to   { transform: translateY(-140px); } }
@keyframes leave-down { to   { transform: translateY(140px);  } }
@keyframes item-float { 50%  { translate: 0 -14px; } }
:is(.services) .bg-text {
	--ls: min(40px, calc((100vw - 375px) / (1920px - 375px) * (40px - 16px) + 16px));
	top: 0;
	left: -195px;
	font-size: min(478px, calc((100vw - 375px) / (1920px - 375px) * (478px - 177px) + 177px));
	letter-spacing: calc(0px - var(--ls));
	~ * {
		position: relative;
		z-index: 1;
	}
}
@keyframes rotate {
	0% {
		transform: var(--translate) rotate(0deg);
	}
	100% {
		transform: var(--translate) rotate(360deg);
	}
}
.advantages {
	position: relative;
	margin-bottom: 200px;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		/* background: linear-gradient(rgba(0, 0, 0, 0) 5%, #fff 20%, #fff 80%, rgba(0, 0, 0, 0) 100%); */
	}
	.wrapper {
		position: relative;
		padding-top: 100px;
		display: flex;
		flex-direction: column;
		h2 {
			margin-left: auto;
			line-height: 1.3;
			margin-bottom: 30px;
		}
		.bg-text {
			font-size: 158px;
			color: #fff;
			left: -60px;
			top: 55px;
		}
		strong {
			position: absolute;
			top: 133px;
			z-index: 2;
		}
		.box {
			position: relative;
			padding: 60px;
			border-radius: 12px;
			overflow: hidden;
			background: var(--bg-1);
			margin-bottom: 20px;
			.video {
				position: absolute;
				top: 0;
				right: -130px;
				width: 70%;
				height: 100%;
				background: none;
				mask: linear-gradient(90deg, rgba(255, 255, 255, 0) 75px, #fff 170px);
				pointer-events: none;
				~ * {
					position: relative;
					z-index: 1;
				}
			}
			h3 {
				max-width: 490px;
				margin-bottom: 10px;
				font-size: 32px;
				color: transparent;
				background: var(--gradient-1);
				background-clip: text;
				-webkit-background-clip: text;
				& + p {
					max-width: 485px;
					margin-bottom: 20px;
					font-size: 20px;
					line-height: 140%;
					color: #6c737d;
				}
			}
			h4 {
				font-size: 24px;
				font-weight: 900;
				line-height: 100%;
				text-transform: uppercase;
				margin-bottom: 10px;
				& + p {
					display: flex;
					padding-left: 16px;
					max-width: 485px;
					margin-bottom: 90px;
					position: relative;
					font-size: 20px;
					line-height: 140%;
					color: #6c737d;
					&::before {
						content: '';
						display: flex;
						width: 1px;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						background: linear-gradient(90deg, #7c3bf3 0%, #7c3bf3 50%, #246df4 100%), radial-gradient(78.6% 80% at 62.22% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
					}
				}
			}
		}
		.items {
			display: flex;
			gap: 12px;
			div {
				flex: 1;
				display: flex;
				flex-direction: column;
				min-height: 224px;
				background: #fdfcfd80;
				overflow: hidden;
				border-radius: 12px;
				transition: box-shadow .3s linear;
				b {
					position: relative;
					transform: translateX(-12px);
					margin-top: -34px;
					font-family: 'Unbounded';
					font-weight: 900;
					font-size: 158px;
					text-transform: uppercase;
					letter-spacing: -10px;
					color: var(--bg-1);
					transition: color .3s linear;
					&::before {
						content: attr(data-text);
						position: absolute;
						inset: 0;
						background: linear-gradient(90deg, #7C3BF3 0%, #7C3BF3 50%, #246DF4 100%), radial-gradient(78.6% 80% at 62.22% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
						-webkit-background-clip: text;
						background-clip: text;
						color: transparent;
						opacity: 0;
						transition: opacity .3s linear;
					}
				}
				span {
					position: relative;
					display: block;
					margin-left: 40px;
					margin-top: auto;
					margin-bottom: 40px;
					max-width: 220px;
					font-weight: 900;
					font-size: 24px;
					text-transform: uppercase;
					color: #6C737D;
					transition: color .3s linear;
					&::before {
						content: attr(data-text);
						position: absolute;
						inset: 0;
						background: var(--gradient-1);
						-webkit-background-clip: text;
						background-clip: text;
						color: transparent;
						opacity: 0;
						transition: opacity .3s linear;
					}
					
				}
				&:hover  {
					b::before,
					span::before {
						opacity: 1;
					}
				}
			}
		}
	}
}

.partners {
	--gap: 120px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 200px;
	h2 {
		margin-bottom: 28px;
		text-align: center;
		font-weight: 400;
		font-size: 16px;
		color: rgba(9, 21, 38, 0.6);
	}
	.slider {
		overflow: hidden;
		user-select: none;
		background: var(--bg-1);
		&:nth-child(odd) {
			transform: scaleX(-1);
			.line {
				transform: scaleX(-1);
			}
			.border {
				transform: scaleX(-1);
			}
		}
	}
	.slides {
		position: relative;
		display: flex;
		gap: var(--gap);
		> div {
			display: flex;
			gap: var(--gap);
			padding-block: 40px;
			img {
				filter: grayscale(1);
				width: auto;
				height: 40px;
				transition: filter .3s linear;
				&.light {
					filter: grayscale(0);
				}
			}
		}
	}
}
.reviews {
	margin-bottom: 160px;
	.top {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		position: relative;
		z-index: 2;
		margin-bottom: 30px;
		h2 {
			line-height: 140%;
		}
		.bg-text {
			font-family: 'Unbounded';
			font-size: 158px;
			letter-spacing: -10px;
			top: -60px;
			right: -30px;
			color: #ffffffb2;
			z-index: -1;
		}
	}
	.slider {
		overflow: hidden;
		user-select: none;
		padding-top: 20px;
		padding-bottom: 200px;
		margin-top: -20px;
		margin-bottom: -188px;
		&:nth-child(odd) {
			transform: scaleX(-1);
			.line {
				transform: scaleX(-1);
			}
			.border {
				transform: scaleX(-1);
			}
		}
	}
	.slides {
		position: relative;
		display: flex;
		gap: 12px;
		> div {
			display: flex;
			gap: 12px;
			.item {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				padding: 40px;
				background: #ffffff99;
				width: 442px;
				min-width: 442px;
				white-space: wrap;
				transition: .3s linear;
				backdrop-filter: blur(0px);
				box-shadow: 0px 0px 0px 0px #0000000f, 0px 0px 0px 0px #0000000d, 0px 0px 0px 0px #00000008, 0px 0px 0px 0px #00000003, 0px 0px 0px 0px #00000000;
				img {
					filter: grayscale(1);
					width: auto;
					height: 42px;
					margin-bottom: 16px;
					transition: filter .3s linear;
					
				}
				p.name {
					font-size: 16px;
					font-weight: 900;
					line-height: 120%;
					text-transform: uppercase;
					color: #6c737d;
				}
				p.job {
					font-size: 16px;
					line-height: 120%;
					margin-bottom: 20px;
					color: #09152699;
				}
				.line {
					width: 100%;
					height: 1px;
					margin-bottom: 20px;
					background: #09152633;
				}
				.text {
					p {
						font-size: 20px;
						line-height: 120%;
					}
				}
				&:hover {
					backdrop-filter: blur(16px);
					box-shadow: 0px 16px 34px 0px #0000000f, 0px 63px 63px 0px #0000000d, 0px 141px 84px 0px #00000008, 0px 250px 100px 0px #00000003, 0px 391px 109px 0px #00000000;
					img {
						filter: grayscale(0);
					}
				}
			}
		}
	}
}
.blog {
	margin-bottom: 125px;
}
.blog .wrapper {
	position: relative;
	z-index: 2;
	.top {
		display: grid;
		grid-template-columns: 294px 1fr;
		align-items: end;
		gap: 12px;
		margin-bottom: 40px;
		p {
			text-transform: uppercase;
		}
		> p {
			display: flex;
			flex-direction: column;
			font-weight: 500;
			color: rgba(9, 21, 38, 0.6);
			a {
				width: fit-content;
				font-weight: inherit;
				font-size: inherit;
				color: transparent;
				line-height: 1.25;
				background: var(--gradient-1);
				background-clip: text;
				-webkit-background-clip: text;
				.arrow {
					display: none;
					color: inherit;
					&::before 
					&::after {
						color: inherit;
						font-size: 10px;
					}
				}
				&::after {
					content: '\e903';
					font: 10px icon;
				}
			}
		}
		div {
			max-width: 926px;
			margin-left: auto;
			p {
				margin-top: 10px;
				color: var(--textColor2);
				line-height: 1.2;
				padding-right: 150px;
			}
		}
	}
	.bg-text {
		font-family: 'Unbounded';
		font-size: 158px;
		color: #fff;
		letter-spacing: -10px;
		z-index: -1;
		left: -80px;
		top: -10px;
	}
	.slider {
		padding-inline: calc(var(--mr-i) * 2);
		margin-inline: calc(0px - (var(--mr-i) * 2));
		mask: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 calc(var(--mr-i) / 2), #000 calc(100% - var(--mr-i) / 2), rgba(0, 0, 0, 0));
		.slides {
			max-width: 50%;
			display: flex;
			align-items: start;
			gap: 12px;
			min-height: 592px;
		}
		.slide {
			position: relative;
			display: grid;
			grid-template-rows: 1fr auto;
			gap: 10px;
			align-items: start;
			flex: 0 0 100%;
			border-radius: 12px 12px 0 0;
			overflow: hidden;
			transition: flex-basis .6s;
			img {
				position: relative;
				height: 254px;
				transition: height .6s;
				object-fit: cover;
			}
			.title {
				position: relative;
				z-index: 1;
				max-width: 590px;
				font-weight: 500;
				font-size: 24px;
				line-height: 1.2;
				margin-left: 10px;
			}
			> a:last-child {
				position: absolute;
				inset: 0;
			}
			&.active {
				gap: 20px;
				& ~ .slide {
					flex-basis: 450px;
				}
				img {
					height: 514px;
				}
			}
		}
		.buttons {
			position: absolute;
			right: calc(var(--mr-i) * 2);
			bottom: 0px;
			right: 0;
			display: flex;
			align-items: center;
			gap: 20px;
			button {
				width: 60px;
				height: 60px;
				border: 1px solid transparent;
				background:
					linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
					linear-gradient(90deg, #7c3bf3 0%, #7c3bf3 50%, #246df4 100%),
					radial-gradient(78.6% 80% at 62.22% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%) border-box;
				transition: box-shadow .3s linear;
				border-radius: 12px;
				transition: box-shadow .3s linear;
				border-radius: 12px;
				&::before {
					content: '\e903';
					font: 23px icon;
					background: var(--gradient-1-0);
					background-clip: text;
					-webkit-background-clip: text;
					color: transparent;
				}
				&.arrow-l {
					transform: scaleX(-1);
				}
			}
			.bubbles {
				display: flex;
				gap: 6px;
				div {
					width: 16px;
					height: 2px;
					border-radius: 1px;
					background: #09152633;
					cursor: pointer;
					&.selected {
						background: linear-gradient(90deg, #7C3BF3 0%, #7C3BF3 33.33%, #246DF4 66.67%, #46A9EF 100%);
					}
				}
			}
		}
	}
}
.faq {
	margin-bottom: 200px;
	.bg-text {
		top: 25px;
		right: -90px;
		font-size: 158px;
		letter-spacing: -10px;
		text-transform: uppercase;
		font-family: 'Unbounded';
		font-weight: 900;
		color: #fff;
		z-index: -1;
	}
	.wrapper {
		position: relative;
		z-index: 2;
		padding-top: 76px;
		.box {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 30px;
		}
		h2 {
			line-height: 52px;
		}
		.items {
			display: flex;
			gap: 12px;
			.list {
				display: flex;
				flex-direction: column;
				gap: 12px;
			}
		}
	}
	.collapse {
		padding: 40px;
		border-radius: 12px;
		transition: grid-template-rows .3s linear, box-shadow .3s linear .3s;
		background: var(--bg-1);
		&::before,
		&::after {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			padding: 1px;
			mask: linear-gradient(#fff) content-box, linear-gradient(#fff);
			mask-composite: exclude;
			opacity: 0;
			transition: opacity .3s linear;
			pointer-events: none;
		}
		&::before {
			background: var(--gradient-2);
		}
		&::after {
			background: var(--gradient-1);
		}
		.top {
			display: grid;
			grid-template-columns: 1fr 40px;
			gap: 20px;
			align-items: start;
			border: none;
			text-transform: uppercase;
			font-size: 32px;
			text-align: left;
			font-weight: 900;
			color: var(--textColor2);
			background: var(--gradient-1);
			background-clip: text;
			-webkit-background-clip: text;
			transition: color .3s linear;
			&::before,
			&::after {
				content: '';
				grid-area: 1/2/2/3;
				width: 100%;
				aspect-ratio: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				pointer-events: none;
			}
			&::before {
				border-radius: 8px;
				background: var(--bg-1);
				transition: box-shadow .3s linear;
			}
			&::after {
				content: '\e900';
				font: 22px icon;
				background: var(--gradient-1-0);
				background-clip: text;
				-webkit-background-clip: text;
				transform: rotate(-90deg);
			}
		}
		.content {
			display: flex;
			flex-direction: column;
			gap: 8px;
			font-size: 20px;
			line-height: 1.2;
			color: var(--textColor2);
			&::before {
				content: '';
				display: block;
				height: 2px;
				flex-shrink: 0;
				pointer-events: none;
			}
			* {
				font-size: inherit;
				line-height: inherit;
				color: inherit;
			}
		}
		&.open {
			box-shadow: 0 4px 9px rgba(64, 24, 139, 0.05), 0 16px 16px rgba(64, 24, 139, 0.04);
			&::before {
				opacity: 1;
				transition-delay: .3s;
			}
			.top {
				color: transparent;
				&::before {
					box-shadow: 0 4px 9px rgba(64, 24, 139, 0.05), 0 16px 16px rgba(64, 24, 139, 0.04);
				}
				&::after {
					transform: rotate(45deg);
				}
			}
		}
	}
}
	.seo {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-top: 120px;
		.column {
			&:last-child {
				padding-top: 34px;
			}
			h2 {
				display: flex;
				align-items: center;
				gap: 20px;
				font-size: 16px;
				line-height: 1.2;
				color: var(--textColor2);
				white-space: nowrap;
				&::after {
					content: '\e903';
					font-family: 'icon';
					font-size: 24px;
					transform: rotate(90deg);
				}
			}
			.text {
				display: flex;
				flex-direction: column;
				gap: 4px;
				margin-top: 10px;
				opacity: .6;
				p,
				li {
					font-size: 20px;
					line-height: 1.2;
					color: var(--textColor2);
				}
				ul {
					padding-left: 30px;
				}
				.muted {
					opacity: .4;
				}
			}
		}
	}
@media (max-width: 1840px) {
	.promo {
		h1 {
			padding: 130px 0 300px;
			background-size: auto 100%;
		}
		.wrapper {
			margin-bottom: 80px;
		}
	}
	.video-box::before {
		top: -80px;
		height: calc(100% + 80px);
	}
	section.about {
		.wrapper {
			.text-box {
				position: relative;
				z-index: 2;
				max-width: 770px;
				p {
					margin-bottom: 40px;
				}
			}
			.cards {
		
				.card {
					display: flex;
					flex-direction: column;
					gap: 10px;
					height: 235px;
					padding: 40px;
					position: relative;
					backdrop-filter: blur(16px);
					box-shadow: 0px 16px 34px 0px #0000000f, 0px 63px 63px 0px #0000000d, 0px 141px 84px 0px #00000008, 0px 250px 100px 0px #00000003, 0px 391px 109px 0px #00000000;
					background: #ffffffB2;
					border-radius: 16px;
					overflow: hidden;
					h3 {
						font-size: 24px;
						font-weight: 900;
						line-height: 100%;
					}
					p {
						font-size: 20px;
						line-height: 110%;
						color: #09152699;
					}
					img {
						position: absolute;
						width: 250px;
						aspect-ratio: 1/1;
						top: -7px;
						right: 0;
					}
					span {
						position: absolute;
						bottom: -50px;
						left: -10px;
						font-size: 172px;
						font-weight: 900;
						text-transform: uppercase;
						color: #f6f6f680;
						white-space: nowrap;
						z-index: -1;
					}
				}

			}
		}
	}
	.advantages .wrapper {
		.box .video {
			right: -90px;
		}
		.items div {
			min-height: 200px;
			b {
				margin-top: -30px;
				font-size: 138px;
			}
		}
	}
	.reviews {
		--gtc: .65fr .35fr;
		.wrapper > p {
			margin-top: 30px;
		}
		.slider {
			margin-inline: -10px;
			padding-inline: 10px;
			.buttons button {
				height: 130px;
				&::before {
					font-size: 28px;
				}
			}
			.slides {
				min-height: 240px;
				.slide {
					.box,
					.img {
						padding: 30px;
					}
					.box .content * {
						font-size: 30px;
					}
				}
			}
		}
	}
	.blog .wrapper {
		.top {
			margin-bottom: 30px;
			div p {
				padding-right: 0;
			}
		}
		.slider {
			padding-inline: var(--mr-i);
			margin-inline: calc(0px - var(--mr-i));
			mask: none;
			.slides {
				min-height: 540px;
			}
			.slide {
				img {
					height: 234px;
				}
				.title {
					font-size: 20px;
				}
				&.active {
					& ~ .slide {
						flex-basis: 380px;
					}
					img {
						height: 440px;
					}
				}
			}
			.buttons {
				right: var(--mr-i);
			}
		}
	}
	.faq .collapse {
		padding: 30px;
		.top {
			font-size: 26px;
		}
		.content {
			font-size: 18px;
		}
	}
	:is(.partners, .blog) {
		margin-bottom: 80px;
	}
}
@media (max-width: 1280px) {
	.promo h1 {
		justify-content: start;
		margin-left: -42px;
	}
	.about .wrapper {
		padding-top: 60px;
		.items {
			grid-template-columns: repeat(4, 1fr);
			grid-auto-rows: 1fr;
			&::before {
				width: max(1170px, 95vw);
				filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 100px rgba(0, 0, 0, 0.2));
			}
			.item {
				grid-column: span 2;
				align-content: center;
				box-shadow: 0 0 14px rgba(0, 0, 0, 0.1), 0 24px 34px rgba(0, 0, 0, 0.1);
				h4 {
					font-size: 24px;
				}
				p {
					font-size: 20px;
					margin-right: 80px;
				}
				&:has(.video) {
					grid-column: 1/-2;
					grid-template-columns: 340px 1fr;
					align-items: center;
					h3 {
						font-size: 50px;
						margin-bottom: -1px;
					}
					.video {
						margin: 0;
						+ div {
							padding-left: 20px;
						}
					}
				}
				&:last-child {
					background-size: auto 150%;
					background-position-x: 80%;
				}
			}
		}
	}
	:is(.advantages, .reviews, .blog, .faq) .bg-tex {
		left: -95px;
	}
	.advantages {
		.wrapper {
			padding-top: 60px;
			gap: 30px;
			.box {
				padding: 30px;
				.video {
					right: -60px;
				}
				h3 {
					margin-bottom: 20px;
					font-size: 22px;
					span {
						font-size: 18px;
					}
				}
				.btn {
					margin-top: 30px;
				}
			}
			.items div {
				min-height: 200px;
				b {
					margin-top: -20px;
					font-size: 114px;
				}
				span {
					margin-left: 30px;
					font-size: 26px;
				}
			}
		}
	}
	.reviews {
		--gtc: .7fr .3fr;
		--gap: 10px;
		.wrapper {
			padding-top: 60px;
			> p {
				grid-column: 1/-1;
			}
		}
		.slider {
			.buttons button {
				height: 120px;
				&::before {
					font-size: 26px;
				}
			}
			.slides .slide {
				.box,
				.img {
					padding: 20px;
				}
				.box {
					.content * {
						font-size: 24px;
					}
					.name,
					.post {
						font-size: 20px;
					}
				}
			}
		}
	}
	.blog .wrapper {
		padding-top: 60px;
		.slider {
			.slides {
				max-width: 600px;
				min-height: 500px;
			}
			.slide {
				flex-basis: 600px;
				img {
					height: 214px;
				}
				.title {
					font-size: 18px;
				}
				&.active {
					& ~ .slide {
						flex-basis: 420px;
					}
					img {
						height: 420px;
					}
				}
			}
		}
	}
	.faq {
		.wrapper {
			padding-top: 60px;
			grid-template-columns: 1fr;
			gap: 20px;
			.box {
				position: relative;
				top: 0;
			}
		}
		.bg-text {
			top: -60px;
		}
	}
	:is(.advantages, .reviews, .blog) {
		margin-bottom: 60px;
	}
}
@media (max-width: 1024px) {
	.promo .wrapper {
		margin-bottom: 40px;
		grid-template-columns: 1fr;
		padding-right: 0;
		h2 {
			font-size: 32px;
			span {
				margin-block: 6px;
			}
		}
		.btn {
			margin-bottom: 0;
		}
	}
	.video-box {
		margin-bottom: 20px;
		&::before {
			top: -60px;
			height: calc(100% + 60px);
			background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 1) 60px, #fff 80%, rgba(0, 0, 0, 0) 100%);
		}
		.main-video {
			border-radius: 16px;
			transform: scale(1);
			opacity: 1;
		}
		.volume {
			right: 8px;
			bottom: 8px;
		}
	}
	.about .wrapper {
		h2 {
			max-width: 370px;
			+ p {
				margin-bottom: 20px;
				max-width: 380px;
				font-size: 18px;
			}
		}
		.items {
			grid-template-columns: repeat(4, 1fr);
			&::before {
				bottom: -112px;
				left: 45%;
				width: max(1100px, 95vw);
				filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.2));
			}
			.item {
				p {
					margin-right: 0;
				}
				&:has(.video) {
					grid-column: 1/-1;
				}
				&:last-child {
					background-size: auto 120%;
					background-position-x: 95%;
				}
			}
		}
	}
	:is(.advantages, .reviews, .blog, .faq) .bg-text {
		left: -30px;
		font-size: 177px;
		letter-spacing: -15px;
	}
	.advantages .wrapper {
		padding-top: 50px;
		gap: 20px;
		.box {
			padding: 20px;
			.video {
				right: -20px;
			}
			h3 {
				margin-bottom: 10px;
				font-size: 20px;
				span {
					font-size: 16px;
				}
			}
			.btn {
				margin-top: 20px;
				transform: none;
			}
		}
		.items {
			flex-wrap: wrap;
			div {
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				min-height: initial;
				flex: 1 1 auto;
				box-shadow: 0 4px 9px rgba(64, 24, 139, 0.05), 0 8px 18px rgba(64, 24, 139, 0.04);
				b {
					margin-block: -20px;
					font-size: 118px;
				}
				span {
					margin-left: 20px;
					max-width: initial;
					font-size: 26px;
				}
			}
		}
	}
	.partners {
		--gap: 80px;
		gap: 6px;
		h2 {
			margin-bottom: 14px;
			font-size: 14px;
		}
		.slides > div {
			padding-block: 20px;
			img {
				height: 30px;
			}
		}
	}
	.reviews {
		--gtc: .6fr .4fr;
		.wrapper {
			padding-top: 50px;
			> p {
				margin-top: 20px;
			}
		}
		.slider {
			.buttons button {
				height: 100px;
				&::before {
					font-size: 20px;
				}
			}
			.slides .slide .box {
				.content * {
					font-size: 20px;
				}
				.name,
				.post {
					font-size: 16px;
				}
			}
		}
	}
	.blog .wrapper {
		padding-top: 50px;
		.top {
			grid-template-columns: auto 1fr;
			gap: 30px;
			margin-bottom: 20px;
		}
		.slider {
			.slides {
				max-width: initial;
				min-height: initial;
				width: calc(100% + 2 * var(--mr-i));
				gap: 10px;
				margin-left: - calc(0px - var(--mr-i));
			}
			.slide {
				flex-basis: min(500px, calc(100vw - 30px));
				transition: none;
				img {
					height: initial;
					aspect-ratio: 346 / 189;
					transition: none;
				}
				.title {
					font-size: 16px;
				}
				&.active {
					& ~ .slide {
						flex-basis: min(500px, calc(100vw - 30px));
					}
					img {
						height: initial;
						aspect-ratio: 346 / 189;
					}
				}
			}
			.buttons {
				display: none;
			}
		}
	}
	.faq {
		.wrapper {
			padding-top: 50px;
			.items {
				gap: 10px;
			}
		}
		.bg-text {
			top: -50px;
		}
		.collapse {
			&::after {
				display: none;
			}
			padding: 20px;
			.top {
				font-size: 18px;
			}
			.content {
				font-size: 16px;
			}
		}
	}
}
@media (max-width: 768px) {
	strong {
		font-size: 14px;
	}
	.promo {
		h1 {
			padding-block: 107px 407px;
			font-size: 195px;
			background: url(../images/index/promo-h1-mob.svg) top left -25px / auto auto no-repeat;
		}
		.btn {
			padding-inline: 20px;
			margin: 0 auto 0 0;
			width: min(360px, 100%);
		}
		.wrapper {
			margin-bottom: 53px;
			h2 span {
				max-width: 260px;
			}
		}
	}
	.video-box {
		&::before {
			top: -60px;
			height: calc(100% + 60px);
			background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 1) 60px, #fff 120px, #fff 45%, rgba(0, 0, 0, 0) 100%);
		}
		.main-video {
			width: calc(100vw - (var(--mr-i) * 2));
			height: min(600px, 100dvh);
			aspect-ratio: initial;
			video {
				aspect-ratio: 582 / 1030;
			}
		}
	}
	.about .wrapper {
		padding-top: 67px;
		h2 {
			max-width: 370px;
			+ p {
				max-width: 260px;
				font-size: 16px;
				margin-bottom: 218px;
			}
		}
		> .bg-text {
			left: -20px;
			font-size: 177px;
			letter-spacing: -15px;
		}
		.items {
			display: flex;
			flex-direction: column;
			&::before {
				top: 0;
				bottom: initial;
				left: 50%;
				width: 538px;
				transform: translate(-50%, -265px);
				filter: none;
			}
			.item {
				box-shadow: 0 8px 14px rgba(0, 0, 0, 0.1);
				h4 {
					margin-bottom: 6px;
				}
				p {
					margin-right: 0;
				}
				&:has(.video) {
					grid-template-columns: 1fr;
					background: linear-gradient(90deg, #fff 380px, #f1f1f1 450px);
					h3 {
						margin-left: -4px;
					}
					.video {
						max-width: 370px;
						+ div p {
							margin-bottom: 10px;
						}
					}
				}
				&:has(.bg-text) .bg-text {
					top: 50%;
					transform: translateY(-50%);
					font-size: 150px;
				}
				&:last-child {
					background-size: auto 142px;
					background-position-x: calc(100% + 10px);
				}
			}
		}
	}
	.advantages .wrapper {
		gap: 10px;
		h2 {
			max-width: 420px;
			line-height: 1.4;
			span {
				padding: 5px 33px;
				margin-left: 2px;
			}
		}
		.box {
			padding-top: 0;
			&::before {
				background: linear-gradient(151deg, #7c3bf3 0%, #7c3bf3 80%, #246df4 98%);
				mask: linear-gradient(0deg, #fff 15%, #fff 22%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
			}
			.video {
				position: relative;
				right: initial;
				left: 50%;
				transform: translateX(-50%);
				width: max(488px, 100vw);
				height: auto;
				aspect-ratio: 356 / 196;
				mask: linear-gradient(0deg, rgba(255, 255, 255, 0) 8px, #fff 50px);
			}
			h3 {
				max-width: initial;
			}
			.btn {
				padding-inline: 20px;
				margin-inline: 0 auto;
				width: min(366px, 100%);
			}
		}
		.items {
			gap: 10px;
			div {
				flex-direction: column;
				flex-wrap: nowrap;
				align-items: start;
				min-height: 160px;
				b {
					margin-block: -24px 0;
				}
				span {
					max-width: 240px;
					font-size: 24px;
					margin-bottom: 18px;
				}
			}
		}
	}
	.blog .wrapper {
		display: flex;
		flex-direction: column;
		.top {
			display: contents;
			> * {
				position: relative;
				z-index: 1;
			}
			p {
				font-size: 14px;
			}
			> p {
				order: 1;
				align-items: end;
				margin-top: 30px;
			}
			div {
				margin-bottom: 20px;
			}
		}
	}
	.reviews {
		.wrapper {
			display: flex;
			flex-direction: column;
			> p {
				font-size: 14px;
			}
		}
		.slider {
			display: flex;
			flex-direction: column;
			margin-top: 20px;
			.slides .slide {
				display: flex;
				flex-direction: column;
				background: var(--border-bg);
				border-radius: 12px;
				padding: 20px;
				border: 1px solid transparent;
				.box {
					display: flex;
					flex-direction: column;
					flex: 1 1;
					gap: 0;
					background: none;
					border-radius: 0;
					padding: 0;
					border: none;
					.content {
						margin-bottom: auto;
						* {
							font-size: 16px;
						}
						+ p {
							margin-top: 10px;
						}
					}
				}
				.img {
					height: 220px;
					padding: 58px;
				}
			}
			.buttons {
				width: min(380px, 100%);
				margin-inline: auto;
			}
		}
	}
	:is(.reviews, .blog) {
		margin-bottom: 40px;
	}
}
@media (max-width: 1280px) and (max-height: 600px) and (orientation: landscape) {
	strong {
		font-size: 14px;
		margin-left: auto;
	}
}
@media (hover: hover) and (min-width: 1024px) {
	.video-box .volume:hover {
		background-color: var(--bg-1);
	}
	.advantages .wrapper .items div:hover {
		box-shadow: 0 4px 9px rgba(64, 24, 139, 0.05), 0 8px 18px rgba(64, 24, 139, 0.04);
	}
	.reviews .slider .buttons button:hover {
		background-color: var(--bg-1);
		box-shadow: 0 4px 9px rgba(64, 24, 139, 0.05), 0 8px 18px rgba(64, 24, 139, 0.04);
		&::after {
			opacity: 1;
		}
	}
	.blog .wrapper .slider .buttons button:hover {
		box-shadow: 0 4px 9px rgba(64, 24, 139, 0.05), 0 8px 18px rgba(64, 24, 139, 0.04);
	}
	.faq .collapse {
		&:not(.open):has(.top:hover)::after {
			opacity: 1;
		}
		.top:hover {
			color: transparent;
		}
	}
}
@media (hover: none) and (pointer: coarse) {
	.video-box .main-video {
		transform: scale(1);
	}
}