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, .services, .portfolio, .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;
	}
	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;
	}
}
.about .wrapper {
	position: relative;
	z-index: 1;
	padding-top: 110px;
	h2 {
		max-width: 600px;
		+ p {
			margin-block: 12px 5.2vw;
			max-width: 400px;
			font-size: 20px;
			opacity: .6;
		}
	}
	> .bg-text {
		top: 0;
		left: -195px;
		~ * {
			position: relative;
			z-index: 1;
		}
	}
	.items {
		position: relative;
		display: grid;
		grid-template-columns: .504fr repeat(2, .248fr);
		gap: 12px;
		&::before {
			content: '';
			position: absolute;
			bottom: -46px;
			left: 58.5%;
			width: 1200px;
			aspect-ratio: 3/2;
			pointer-events: none;
			filter: drop-shadow(0px 11px 24px rgba(0, 0, 0, 0.2)) drop-shadow(0px 44px 144px rgba(0, 0, 0, 0.2));
			background: url(../images/index/card-map.webp) 0 0 / 100% 100%;
		}
		.item {
			position: relative;
			background: rgba(255, 255, 255, 0.7);
			border: 1px solid var(--bg-1);
			box-shadow: 0px 11px 24px rgba(0, 0, 0, 0.1), 0px 54px 64px rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(8px);
			border-radius: 12px;
			overflow: hidden;
			padding: 47px 39px;
			h4 {
				margin-bottom: 10px;
				font-size: 30px;
			}
			p {
				max-width: 320px;
				font-size: 30px;
				line-height: 1.1;
				color: rgba(9, 21, 38, 0.6);
			}
			&:has(.video) {
				display: grid;
				grid-template-columns: 470px 1fr;
				padding: 0;
				h3 {
					font-size: 80px;
					background-color: #fff;
					user-select: none;
					pointer-events: none;
					margin-left: -9px;
					line-height: 0.98;
					&::selection {
						background-color: #fff;
					}
				}
				p {
					max-width: initial;
				}
				.video {
					margin-inline: 1px -9px;
					margin-block: auto;
					border-radius: inherit;
					video {
						border-radius: inherit;
					}
					+ div {
						position: relative;
						z-index: 1;
						padding: 44px 40px 44px 30px;
					}
				}
			}
			&:has(.bg-text) {
				position: relative;
				.bg-text {
					top: 64px;
					left: 0;
					font-size: 261px;
					text-shadow: 0 0 60px rgba(0, 0, 0, 0.14);
					overflow: visible;
					& ~ * {
						position: relative;
						z-index: 1;
					}
				}
			}
			&:last-child {
				background: url(../images/index/card-bg.svg) center right -29px / auto auto no-repeat, rgba(255, 255, 255, 0.5);
			}
		}
	}
}
:is(.services, .advantages, .reviews, .blog, .faq) .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;
	}
}
.services {
	overflow: clip;
	.wrapper {
		position: relative;
		> .top {
			position: sticky;
			top: 10px;
			display: flex;
			justify-content: space-between;
			gap: 13px;
			padding-block: 80px 43px;
		}
		h2 {
			max-width: 914px;
		}
		.items {
			position: relative;
			display: grid;
			grid-auto-rows: minmax(410px, 1fr);
			gap: 100px;
			contain: inline-size layout style;
			.item {
				position: sticky;
				top: var(--top);
				contain: layout style paint;
				backface-visibility: hidden;
				display: grid;
				overflow: hidden;
				border-radius: 12px;
				transition: box-shadow .2s linear;
				&:not(:last-child) {
					grid-template-columns: 340px 431px 1fr 412px;
					align-items: center;
					border: 1px solid rgba(0, 0, 0, 0);
					padding: 31px 114px 31px 0;
					transform: translateZ(0) scale(var(--scale));
					background: linear-gradient(var(--bg-1)) padding-box, linear-gradient(90deg, #7c3bf3 0%, #7c3bf3 50%, #246df4 100%) border-box;
					&:nth-child(even) img {
						animation-direction: reverse;
					}
					h3 {
						position: relative;
						z-index: 1;
						margin-inline: 60px 70px;
						font-size: 30px;
						background: var(--gradient-1);
						-webkit-background-clip: text;
						background-clip: text;
						transition: color .3s linear;
					}
					p {
						max-width: 290px;
						margin-inline: auto;
						font-size: 24px;
						line-height: 1.1;
						color: rgba(9, 21, 38, 0.6);
					}
					nav {
						display: flex;
						flex-direction: column;
						a {
							position: relative;
							display: flex;
							align-items: center;
							width: fit-content;
							padding: 7px 20px;
							border-radius: 8px;
							overflow: hidden;
							font-weight: 500;
							font-size: 20px;
							line-height: 1.1;
							letter-spacing: -0.3px;
							transition: color .3s linear;
							&::before {
								content: '';
								position: absolute;
								inset: 0;
								z-index: -1;
								background: var(--gradient-1);
								pointer-events: none;
								opacity: 0;
								transition: opacity .3s linear;
							}
							&::after {
								content: '\e901';
								font: 500 20px icon;
								transition: transform .3s linear;
							}
						}
					}
					.img {
						position: relative;
						pointer-events: none;
						img {
							--translate: translate(0, -50%);
							position: absolute;
							right: 0;
							top: 50%;
							transform: var(--translate);
							width: 600px;
							aspect-ratio: 1;
							border-radius: 50%;
							contain: strict;
							/* will-change: transform; */
							filter: drop-shadow(0 0 90px rgba(39, 0, 112, 0.3));
							animation: rotate 80s linear infinite forwards;
						}
					}
					&:not(:has(nav)) p {
						grid-column: span 2;
						max-width: initial;
					}
				}
				&:last-child {
					--top: 0px;
					grid-template-columns: 1fr 366px;
					grid-template-rows: auto auto 1fr;
					align-items: start;
					gap: 20px 22px;
					padding: 110px 274px 50px 264px;
					transform: translateZ(0);
					background: var(--bg-1);
					h3 {
						font-size: 40px;
						span {
							display: flex;
							width: fit-content;
							margin-left: auto;
							font-size: inherit;
							line-height: inherit;
							font-weight: inherit;
							color: var(--btn-color);
							padding: 6px 10px;
							border-radius: 8px;
							background: var(--gradient-1);
						}
					}
					p {
						grid-area: 2/1/3/2;
						max-width: 683px;
						margin-left: auto;
						line-height: 1.2;
						text-align: right;
						color: var(--textColor2);
					}
					.btn {
						grid-area: 1/2/3/3;
						align-self: end;
					}
				}
			}
		}
	}
}
@keyframes rotate {
	0% {
		transform: var(--translate) rotate(0deg);
	}
	100% {
		transform: var(--translate) rotate(360deg);
	}
}
.portfolio {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 124px 378px;
	gap: 12px;
	.info-box {
		position: relative;
		grid-row: span 3;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 40px;
		border-radius: 12px;
		background: var(--bg-1);
		.bg-text {
			top: -35px;
			left: -18px;
			font-size: 260px;
			letter-spacing: -20px;
			~ * {
				position: relative;
				z-index: 1;
			}
		}
		h2 {
			margin: auto 108px 50px -47px;
			font-size: 80px;
			line-height: 1.12;
			background: var(--gradient-1);
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
		}
		h3,
		p {
			max-width: 417px;
			margin-left: auto;
			line-height: 1.2;
		}
		h3 {
			font-size: 24px;
			text-wrap: balance;
		}
		p {
			opacity: .6;
		}
	}
	.item {
		position: relative;
		grid-row: span 2;
		border-radius: 12px;
		overflow: hidden;
		> img {
			height: 100%;
			object-fit: cover;
		}
		.box {
			position: absolute;
			inset: 0;
			display: grid;
			z-index: 1;
			padding: 40px;
			pointer-events: none;
			&::before,
			&::after {
				content: '';
				position: absolute;
				inset: 0;
				z-index: -1;
				pointer-events: none;
				transition: opacity .3s linear;
				opacity: 0;
			}
			&::before {
				background: var(--gradient-1);
			}
			&::after {
				backdrop-filter: blur(24px);
			}
			&:has(ul) {
				grid-template-columns: 380px auto;
				justify-content: space-between;
			}
			> * {
				opacity: 0;
				transition: opacity .3s;
			}
			* {
				color: var(--btn-color);
			}
			.title {
				font-weight: 900;
				font-size: 40px;
				align-self: start;
			}
			ul {
				list-style: none;
				display: flex;
				flex-direction: column;
				align-items: end;
				gap: 4px;
				li {
					font-weight: 500;
					font-size: 20px;
					line-height: 1.1;
				}
			}
			> a:not(.title) {
				grid-column: 2/3;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60px;
				aspect-ratio: 1;
				border-radius: 12px;
				margin-top: auto;
				margin-left: auto;
				border: 1px solid var(--btn-color);
				transition: background-color .3s linear, opacity .3s linear;
				&::before {
					content: '\e903';
					font: 16px icon;
				}
			}
		}
		> a {
			position: absolute;
			inset: 0;
		}
	}
	> p {
		display: flex;
		flex-direction: column;
		margin-top: auto;
		line-height: 1.1;
		text-transform: uppercase;
		color: var(--textColor2);
		.arrows {
			--col: 20px;
			--arr-move: 3px;
			width: fit-content;
			align-items: center;
			background: var(--gradient-1);
			background-clip: text;
			-webkit-background-clip: text;
			font-size: inherit;
			text-transform: inherit;
			line-height: inherit;
			color: transparent;
			.arrow {
				color: inherit;
				&::before,
				&::after {
					color: inherit;
					font-size: 10px;
				}
			}
			/* &::after {
				content: '\e903';
				font: 10px icon;
			} */
		}
	}
}
.advantages {
	position: relative;
	margin-bottom: 80px;
	&::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: 80px;
		display: flex;
		flex-direction: column;
		gap: 40px;
		h2 {
			line-height: 1.3;
			span {
				padding: 3px 10px;
				border-radius: 6px;
				color: var(--btn-color);
				background-clip: initial;
				-webkit-background-clip: initial;
			}
		}
		.box {
			position: relative;
			padding: 40px;
			border-radius: 12px;
			overflow: hidden;
			background: var(--bg-1);
			&::before {
				content: '';
				position: absolute;
				inset: 0;
				z-index: 1;
				background: var(--gradient-3);
				mask: linear-gradient(90deg, #fff 39%, #fff 44%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, 0) 100%);
				mask-composite: exclude;
				pointer-events: none;
			}
			.video {
				position: absolute;
				top: 0;
				right: -130px;
				width: 50%;
				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 {
				display: flex;
				flex-direction: column;
				gap: 2px;
				margin-bottom: 30px;
				font-size: 24px;
				color: var(--btn-color);
				max-width: 60%;
				span {
					font-weight: 400;
					font-size: 20px;
					color: rgba(255, 255, 255, 0.8);
					text-transform: none;
				}
				+ h3 span {
					max-width: 676px;
				}
			}
			.btn {
				margin-top: 42px;
				transform: translateX(10px);
			}
		}
		.items {
			display: flex;
			gap: 12px;
			div {
				flex: 1;
				display: flex;
				flex-direction: column;
				min-height: 224px;
				background: var(--bg-1);
				overflow: hidden;
				border-radius: 12px;
				transition: box-shadow .3s linear;
				b {
					position: relative;
					transform: translateX(-12px);
					margin-top: -37px;
					font-weight: 900;
					font-size: 161px;
					text-transform: uppercase;
					color: var(--bg-1);
					text-shadow: 1px 0 0 #894ef4, -1px 0 0 #894ef4, 0 1px 0 #894ef4, 0 -1px 0 #894ef4;
				}
				span {
					display: block;
					margin-left: 40px;
					max-width: 300px;
					font-weight: 900;
					font-size: 30px;
					text-transform: uppercase;
					background: var(--gradient-1);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;
				}
			}
		}
	}
}
.partners {
	--gap: 120px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	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 {
	--gtc: .736fr .364fr;
	--gap: 12px;
	--border-bg: linear-gradient(var(--bg-1)) padding-box, var(--gradient-1) border-box;
	margin-bottom: 100px;
	.wrapper {
		position: relative;
		padding-top: 80px;
		display: grid;
		grid-template-columns: var(--gtc);
		strong,
		h2 {
			z-index: 2;
			font-weight: 500;
		}
		> p {
			display: flex;
			flex-wrap: wrap;
			gap: 10px 20px;
			margin-top: 44px;
			text-transform: uppercase;
			color: var(--textColor2);
			a {
				color: inherit;
				width: fit-content;
				white-space: nowrap;
				.arrow {
					margin-top: -2px;
					color: inherit;
					&::before,
					&::after {
						font-size: 12px;
						color: var(--textColor2);
					}
				}
			}
		}
	}
	strong {
		grid-area: 1/1/2/2;
		margin-bottom: 10px;
	}
	h2 {
		grid-area: 2/1/3/2;
		display: flex;
		flex-direction: column;
		align-items: start;
		line-height: 1.3;
		span {
			padding: 6px 10px;
			border-radius: 6px;
			color: var(--btn-color);
			background-clip: initial;
			-webkit-background-clip: initial;
		}
	}
	.slider {
		position: relative;
		display: grid;
		grid-template-columns: var(--gtc);
		gap: var(--gap);
		overflow: hidden;
		grid-area: 1/1/4/-1;
		.slides {
			grid-area: 2/1/3/3;
			min-height: 390px;
		}
		.buttons {
			grid-area: 1/2/2/3;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: var(--gap);
			button {
				position: relative;
				width: 100%;
				height: 158px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 12px;
				border: 1px solid rgba(0, 0, 0, 0.1);
				background-color: var(--btn-bg);
				transition: box-shadow .3s linear, background-color .3s linear;
				&::before {
					content: '\e903';
					font: 40px icon;
					background: var(--gradient-1-0);
					background-clip: text;
					-webkit-background-clip: text;
					color: transparent;
				}
				&::after {
					content: '';
					position: absolute;
					inset: 0;
					border-radius: inherit;
					padding: 1px;
					background: var(--gradient-1);
					mask: linear-gradient(#fff) content-box, linear-gradient(#fff);
					mask-composite: exclude;
					opacity: 0;
					transition: opacity .3s linear;
					pointer-events: none;
				}
				&.arrow-l {
					transform: scaleX(-1);
				}
			}
		}
		.slides {
			display: flex;
			gap: var(--gap);
			.slide {
				flex: 1 0 100%;
				display: grid;
				grid-template-columns: var(--gtc);
				gap: var(--gap);
				.box,
				.img {
					padding: 40px;
					border-radius: 12px;
					background: var(--border-bg);
					border: 1px solid transparent;
				}
				.box {
					display: grid;
					grid-template-columns: 1fr auto;
					grid-template-rows: 1fr auto;
					gap: var(--gap);
					.content {
						grid-column: 1/-1;
						margin-bottom: auto;
						* {
							font-size: 32px;
							line-height: 1.2;
							color: var(--textColor2);
						}
					}
					.name {
						width: fit-content;
						font-weight: 900;
						font-size: 24px;
						line-height: 1.2;
						text-transform: uppercase;
						background: var(--gradient-1);
						background-clip: text;
						-webkit-background-clip: text;
						color: transparent;
					}
					.post {
						font-size: 24px;
						line-height: 1.2;
						color: rgba(9, 21, 38, 0.6);
					}
				}
				.img {
					display: flex;
					align-items: center;
					justify-content: center;
					img {
						width: min(305px, 100%);
						max-height: 90%;
					}
				}
			}
		}
	}
}
.blog .wrapper {
	position: relative;
	padding-top: 80px;
	.top {
		display: grid;
		grid-template-columns: repeat(2, 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 {
					color: inherit;
					&::before,
					&::after {
						font-size: 10px;
						color: inherit;
					}
				}
			}
		}
		div p {
			margin-top: 10px;
			color: var(--textColor2);
			line-height: 1.2;
			padding-right: 150px;
		}
	}
	.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;
			}
			> a:last-child {
				position: absolute;
				inset: 0;
			}
			&.active {
				& ~ .slide {
					flex-basis: 450px;
				}
				img {
					height: 514px;
				}
			}
		}
		.buttons {
			position: absolute;
			right: calc(var(--mr-i) * 2);
			bottom: 20px;
			display: flex;
			gap: 12px;
			button {
				width: 80px;
				height: 100px;
				background: var(--bg-1);
				border: 1px solid rgba(0, 0, 0, 0.1);
				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);
				}
			}
		}
	}
}
.faq {
	.bg-text {
		top: -80px;
	}
	.wrapper {
		position: relative;
		padding-top: 80px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
		gap: 12px;
		.box {
			position: sticky;
			top: 20px;
		}
		h2 {
			display: flex;
			flex-direction: column;
			align-items: start;
			line-height: 1.3;
			span {
				padding: 3px 10px;
				border-radius: 6px;
				color: var(--btn-color);
				background-clip: initial;
				-webkit-background-clip: initial;
			}
		}
		.items {
			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);
				}
			}
		}
	}
}
:is(.about, .services, .portfolio, .partners, .blog) {
	margin-bottom: 100px;
}
@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);
	}
	.about .wrapper {
		padding-top: 90px;
		h2 + p {
			margin-bottom: 4vw;
		}
		.items {
			gap: 10px;
			&::before {
				bottom: -60px;
				width: max(1020px, 63vw);
			}
			.item {
				padding: 20px;
				h4,
				p {
					font-size: min(30px, calc((100vw - 1280px) / (1840px - 1280px) * (30px - 20px) + 20px));
				}
				p {
					max-width: initial;
				}
				&:has(.video) {
					grid-template-columns: minmax(305px, .6fr) .4fr;
					h3 {
						font-size: min(70px, calc((100vw - 1280px) / (1840px - 1280px) * (70px - 53px) + 53px));
					}
					.video + div {
						padding: 20px 20px 20px 0px;
					}
				}
				&:has(.bg-text) .bg-text {
					font-size: 174px;
				}
			}
		}
	}
	.services .wrapper {
		> .top {
			padding-block: 60px 30px;
		}
		.items {
			grid-auto-rows: minmax(350px, 1fr);
			.item {
				&:last-child {
					padding: 50px 120px 40px 110px;
				}
				&:not(:last-child) {
					grid-template-columns: 240px 300px 1fr 412px;
					padding-right: 31px;
					h3 {
						margin-inline: 20px;
						font-size: 28px;
					}
					p {
						font-size: 22px;
					}
					.img img {
						width: 530px;
					}
				}
			}
		}
	}
	.portfolio {
		grid-auto-rows: 6.82vw 20.48vw;
		.info-box {
			padding: 30px;
			.bg-text {
				top: -26px;
				font-size: 200px;
				letter-spacing: -12px;
			}
			h2 {
				margin: auto 0 40px -37px;
				font-size: 62px;
			}
		}
		.item .box {
			padding: 30px;
			&:has(ul) {
				grid-template-columns: 280px auto;
			}
			.title {
				font-size: 36px;
			}
		}
	}
	.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(.portfolio, .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%;
				}
			}
		}
	}
	.services .wrapper {
		> .top {
			padding-bottom: 20px;
		}
		h2 {
			max-width: 646px;
		}
		.items {
			gap: 40px;
			grid-auto-rows: minmax(280px, 1fr);
			.item {
				&:last-child {
					padding: 30px 20px 30px 20px;
					h3 {
						font-size: 30px;
					}
				}
				&:not(:last-child) {
					grid-template-columns: 180px 260px 1fr 342px;
					padding: 20px 20px 20px 0;
					h3 {
						font-size: 24px;
						margin-inline: 5px 10px;
					}
					p {
						font-size: 20px;
					}
					nav a {
						font-size: 17px;
						padding: 6px 10px;
					}
					.img img {
						width: 410px;
						filter: drop-shadow(0 0 50px rgba(39, 0, 112, 0.3));
					}
				}
			}
		}
	}
	.portfolio {
		grid-auto-rows: 80px 280px;
		gap: 10px;
		.info-box {
			padding: 20px;
			.bg-text {
				top: -16px;
				font-size: 160px;
				letter-spacing: 0;
			}
			h2 {
				margin-bottom: 30px;
				margin-left: -25px;
				font-size: 50px;
			}
		}
		.item .box {
			padding: 20px;
			&:has(ul) {
				grid-template-columns: 200px auto;
			}
			.title {
				font-size: 26px;
			}
			ul li {
				font-size: 16px;
			}
		}
	}
	:is(.services, .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(.portfolio, .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%;
				}
			}
		}
	}
	.services .wrapper {
		h2 {
			max-width: 470px;
		}
		.items {
			grid-auto-rows: minmax(280px, 1fr);
			.item {
				&:last-child {
					grid-template-columns: 1fr;
					gap: 12px;
					padding: 30px 20px 30px 20px;
					h3 {
						font-size: 28px;
						text-align: center;
						gap: 4px;
						span {
							margin-right: auto;
						}
					}
					p,
					.btn {
						grid-area: initial;
					}
					p {
						max-width: initial;
						text-align: center;
					}
					.btn {
						align-self: start;
						margin: 28px auto auto;
					}
				}
				&:not(:last-child) {
					grid-template-columns: 240px 1fr;
					align-content: center;
					column-gap: 20px;
					padding: 19px 19px 19px 0;
					h3 {
						margin-inline: 0;
					}
					p {
						max-width: initial;
						margin: 4px 0 19px;
					}
					nav {
						gap: 10px;
						a {
							padding: 0;
							&::before {
								display: none;
							}
						}
					}
					&:not(:has(nav)) p {
						grid-column: initial;
					}
					.img {
						grid-row: 1/4;
						img {
							width: 500px;
						}
					}
				}
			}
		}
	}
	.portfolio {
		display: flex;
		flex-direction: column;
		.info-box {
			background: linear-gradient(var(--bg-1)) padding-box, var(--gradient-1) border-box;
			border: 1px solid transparent;
			h2 {
				margin: 10px 20vw 10px -25px;
			}
		}
		.item {
			display: grid;
			grid-template-rows: 1fr auto;
			padding-bottom: 0;
			background: var(--gradient-1);
			min-height: 440px;
			> img {
				grid-area: 1/1/2/-1;
				width: calc(100% - 2px);
				margin-inline: 1px;
				max-height: 350px;
				border-radius: 11px;
			}
			.box {
				grid-row: 2/3;
				position: static;
				display: flex;
				flex-direction: column;
				gap: 10px;
				padding: 12px 10px 20px;
				&::before,
				&::after {
					display: none;
				}
				> * {
					opacity: 1;
					pointer-events: all;
				}
				ul {
					flex-direction: row;
					align-items: start;
					flex-wrap: wrap;
				}
				> a:not(.title) {
					position: absolute;
					grid-area: 1/1/2/2;
					bottom: 10px;
					right: 10px;
					border: none;
					background: var(--gradient-1);
				}
			}
		}
		> p {
			margin-top: 20px;
		}
	}
	:is(.services, .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);
				}
			}
		}
	}
	.services {
		margin-top: -30px;
		strong {
			margin-left: auto;
		}
		.wrapper {
			> .top {
				flex-direction: column;
				padding-top: 30px;
			}
			.items {
				container: services / inline-size;
				.item {
					&:last-child {
						display: flex;
						flex-direction: column;
						justify-content: center;
						gap: 12px;
						padding: 10px;
						.bg-text {
							inset: 0 -30px 0;
							word-wrap: break-word;
							white-space: wrap;
						}
						h3 {
							font-size: 24px;
							span {
								font-size: 20px;
							}
						}
						.btn {
							--pd-i: 10px;
							width: min(336px, 100%);
							margin-bottom: 0;
						}
					}
					&:not(:last-child) {
						grid-template-columns: 240px 1fr;
						column-gap: 10px;
						transform: translateZ(0);
						.img img {
							filter: none;
						}
						p {
							font-size: 16px;
						}
					}
				}
				@container services (max-width: 586px) {
					& .item:not(:last-child) {
						height: min(606px, calc(100vh - 200px));
						grid-template-columns: 1fr;
						grid-template-rows: 1fr auto auto 230px;
						align-content: initial;
						padding: 0 19px 10px 19px;
						nav {
							margin-bottom: auto;
						}
						.img {
							grid-row: initial;
							height: 100%;
							margin-bottom: 12px;
							img {
								--translate: translate(50%, 0);
								width: 400px;
								top: initial;
								bottom: 0;
								right: 50%;
							}
						}
						nav a {
							font-size: 20px;
						}
					}
				}
			}
		}
	}
	.portfolio {
		margin-bottom: 15px;
		.info-box {
			.bg-text {
				left: -2px;
				font-size: 120px;
			}
			strong {
				margin-left: 0;
			}
			h2 {
				margin-right: 0;
			}
			h3,
			p {
				max-width: initial;
			}
			h3 {
				margin-left: 0;
				font-size: 20px;
			}
			p {
				font-size: 14px;
			}
		}
		.item {
			min-height: 296px;
			.box {
				ul li {
					font-size: 12px;
				}
				> a:not(.title) {
					position: absolute;
					grid-area: 1/1/2/2;
					bottom: 10px;
					right: 10px;
					border: none;
					background: var(--gradient-1);
				}
				.title {
					font-size: 24px;
				}
				> a:not(.title) {
					width: 40px;
					border-radius: 8px;
					&::before {
						font-size: 13px;
					}
				}
			}
		}
		> p {
			font-size: 14px;
		}
	}
	.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;
	}
	.services .wrapper {
		.top {
			gap: 8px;
			padding-block: 10px 20px;
			flex-direction: column;
			h2 {
				max-width: initial;
			}
		}
		.items .item {
			&:not(:last-child) {
				height: calc(100vh - 118px);
				grid-template-rows: auto auto 1fr;
				padding: 10px 10px 10px 0;
				.img img {
					filter: none;
				}
				h3 {
					font-size: 24px;
				}
				p {
					font-size: 16px;
					margin-bottom: 10px;
				}
				nav {
					max-height: 100%;
					gap: 8px;
					overflow-y: auto;
					margin-bottom: auto;
					a {
						font-size: 16px;
					}
				}
			}
			&:last-child {
				padding: 10px;
				.btn {
					box-shadow: 0 12px 40px -15px var(--shadow-color);
				}
			}
		}
	}
}
@media (hover: hover) and (min-width: 1024px) {
	.video-box .volume:hover {
		background-color: var(--bg-1);
	}
	.services .items .item:not(:last-child):hover {
		box-shadow: 0 11px 30px rgba(0, 0, 0, 0.2);
		h3 {
			color: transparent;
		}
		nav a:hover {
			color: var(--btn-color);
			&::before {
				opacity: 1;
			}
			&::after {
				transform: rotate(45deg);
			}
		}
	}
	.portfolio .item:hover .box {
		&::before {
			opacity: .8;
		}
		&::after {
			opacity: 1;
		}
		> * {
			opacity: 1;
			transition-delay: .3s;
			pointer-events: all;
		}
		> ul {
			opacity: .7;
		}
		> a:not(.title):hover {
			background-color: rgba(255, 255, 255, 0.5);
		}
	}
	.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) and (min-width: 1024px) {
	.portfolio .item {
		display: grid;
		grid-template-rows: 1fr auto;
		padding-bottom: 0;
		background: var(--gradient-1);
		> img {
			position: absolute;
			grid-area: 1/1/2/-1;
			width: calc(100% - 2px);
			top: 1px;
			left: 1px;
			border-radius: 11px;
		}
		.box {
			grid-row: 2/3;
			position: static;
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding: 12px 10px 20px;
			&::before,
			&::after {
				display: none;
			}
			> * {
				opacity: 1;
				pointer-events: all;
			}
			ul {
				opacity: .7;
				flex-direction: row;
				align-items: start;
				flex-wrap: wrap;
			}
			> a:not(.title) {
				position: absolute;
				grid-area: 1/1/2/2;
				bottom: 10px;
				right: 10px;
				border: none;
				background: var(--gradient-1);
			}
		}
	}
}
@media (hover: none) and (pointer: coarse) {
	.video-box .main-video {
		transform: scale(1);
	}
	.services .wrapper .items .item:not(:last-child) h3 {
		color: transparent;
	}
}