@font-face {
	font-family: 'TikTokSans';
	src: url('../fonts/TikTokSans.woff2');
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TT Travels';
	src: url('../fonts/TTTravels-B.woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'icon';
	src: url('../fonts/icon.woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
:root {
	--mr-i: 40px;
	--max-w: 1840px;
	--bg-w: 10px;
	--anim: cubic-bezier(0.14, 0.32, 0.27, 1.55);
	--anim2: cubic-bezier(0.14, 0.32, 0.27, 1.25);
	--textColor: #091526;
	--textColor2: #6c737d;
	--btn-color: #f6f6f6;
	--btn-bg: #f9f9f9;
	--border-color: #e5e5e5;
	--range-grid: green;
	--bg-1: #fff;
	--bg-2: #7c3bf3;
	--bg-3: #246df4;
	--shadow-hover: #92b5fd;
	--scrollbar-thumb: #dbdbdb;
	--error: #ff3b30;
	--gradient-1: radial-gradient(78.6% 80% at 62.22% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, #7c3bf3 0%, #7c3bf3 50%, #246df4 100%);
	--gradient-1-0: radial-gradient(78.6% 80% at 62.22% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #7c3bf3 0%, #7c3bf3 50%, #246df4 100%);
	--gradient-2: linear-gradient(132deg, #862ef0 30.5%, #5604b8 83%);
	--gradient-3: linear-gradient(90deg, #7c3bf3 0%, #7c3bf3 22%, #246df4 44%), radial-gradient(98% 100% at 23% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
	--gradient-img-btn: radial-gradient(98% 98% at 29% 23%, #47bef8 0%, #1f96d0 100%);
}
* {
	margin: 0;
	padding: 0;
	outline: 0;
	box-sizing: border-box;
	font: normal 400 16px / 100% "TikTokSans", sans-serif;
	color: var(--textColor);
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	&::before,
	&::after {
		box-sizing: border-box;
	}
}
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	overflow-x: clip;
	width: 100%;
	scroll-behavior: smooth;
	> div[style] {
		display: none !important;
	}
	&:has(.window-modal.open) {
		overflow: hidden;
	}
}
body {
	position: relative;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow-x: clip;
	background: url(../images/body.svg);
}
main {
	position: relative;
	width: 100%;
	margin-bottom: 150px;
}
/* input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    display: none;
    --webkit-appearance: none;
    margin: 0;
} */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="date"],
textarea,
input[type="tel"],
select,
input[type="submit"],
button {
	--webkit-appearance: none;
	border-radius: 0;
}
button {
	cursor: pointer;
}
input {
	border: none;
}
textarea {
	height: 112px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 16px;
	border-radius: 12px;
	resize: none;
}
a {
	text-decoration: none;
}
img {
	display: block;
	width: 100%;
}
:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 50px var(--bg-1) !important;
	box-shadow: inset 0 0 0 50px var(--bg-1) !important;
}
.wrapper {
	width: min(var(--max-w), calc(100vw - (var(--mr-i) * 2)));
	margin-inline: auto;
}
h1,
h2,
h3,
h4 {
	font-weight: 900;
	text-transform: uppercase;
}
h2 {
	font-size: 40px;
	span {
		font-weight: inherit;
		font-size: inherit;
		color: transparent;
		background: var(--gradient-1);
		background-clip: text;
		-webkit-background-clip: text;
	}
}
:is(.btn, .btn-white) {
	position: relative;
	width: fit-content;
	align-items: center;
	overflow: hidden;
	border: none;
	text-align: center;
	font-weight: 900;
	text-transform: uppercase;
	&:has(b + b) {
		--t: 50px;
		--translate: translateY(calc(0px - var(--t)));
		display: grid;
		b {
			position: relative;
			grid-area: 1/1/2/2;
			transition: transform .4s var(--anim2);
			white-space: nowrap;
			&:has(+ b) {
				transform: var(--translate);
			}
		}
	}
}
.btn {
	--pd-h: 10px;
	--pd-i: 55px;
	--shadow-y: 18px;
	--shadow-blur: 46px;
	--shadow-b: -18px;
	--shadow-color: var(--bg-2);
	padding: 25px var(--pd-i);
	display: flex;
	box-shadow: 0 var(--shadow-y) var(--shadow-blur) var(--shadow-b) var(--shadow-color);
	font-size: 20px;
	background: var(--bg-1);
	color: var(--btn-color);
	border-radius: 12px;
	transition: outline .4s var(--anim), margin-left .4s var(--anim), margin-right .4s var(--anim), padding-left .4s var(--anim), padding-right .4s var(--anim), box-shadow .4s var(--anim);
	&.no-shadow {
		box-shadow: none;
	}
	> span:not(bg-ball),
	b {
		font-weight: inherit;
		font-size: inherit;
		text-transform: inherit;
		color: inherit;
	}
	> img {
		pointer-events: none;
	}
}
.btn-white {
	border-radius: 6px;
	background: var(--bg-1);
	&:has(b + b) {
		--translate: translateX(calc(-100% - var(--t)));
	}
	b {
		background: var(--gradient-1);
		background-clip: text;
		-webkit-background-clip: text;
		font-size: 32px;
		font-weight: 900;
		text-transform: uppercase;
		color: transparent;
	}
}
:is(button, a):has(> .arrow) {
	--col: 46px;
	--arr-move: 5px;
	display: grid;
	grid-template-columns: 1fr var(--col);
	.arrow {
		position: relative;
		overflow: hidden;
		width: 100%;
		aspect-ratio: 1;
		&::before,
		&::after {
			content: '\e903';
			position: absolute;
			top: 50%;
			left: 50%;
			background: var(--gradient-1-0);
			-webkit-background-clip: text;
			background-clip: text;
			transform: translate(-50%, -50%);
			transition: transform .3s var(--anim);
			font: 23px / 1 icon;
			color: transparent;
		}
		&::before {
			transform: translate(calc(-50% - var(--col)), -50%);
		}
	}
}
.btn-image {
	position: relative;
	display: grid;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 12px;
	transition: box-shadow .4s linear;
	&::before {
		content: '';
		grid-area: 1/1/2/2;
		width: 100%;
		height: 100%;
		background: var(--gradient-img-btn);
		opacity: 0;
		pointer-events: none;
		transition: opacity .4s var(--anim2);
	}
	img {
		position: relative;
		grid-area: 1/1/2/2;
		transition: transform .4s var(--anim2);
		pointer-events: none;
		&:first-child {
			transform: translateY(-100%);
		}
	}
	&[href*='t.me'] img {
		clip-path: circle(32% at 50% 50%);
		border-radius: 50%;
		&:first-child {
			transform: scale(1.15) translateY(-100%);
			+ img {
				transform: scale(1.15);
			}
		}
	}
}
.bg-animate {
	--w: 350px;
	position: relative;
	overflow: hidden;
	background: var(--bg-2);
	> * {
		position: relative;
		z-index: 1;
	}
	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: var(--w);
		aspect-ratio: 1;
		background-size: 100% 100%;
		pointer-events: none;
		backface-visibility: hidden;
		animation: btnBall1 8s linear infinite alternate paused;
		background-image: url(../images/btn10.webp);
	}
	&::before {
		background-image: url(../images/btn11.webp);
		transform: translate(-100%, -50%);
	}
	&::after {
		transform: translate(40%, -50%);
		animation-name: btnBall2;
	}
	&.start {
		&::before,
		&::after {
			animation-play-state: running;
		}
	}
}
@keyframes btnBall1 {
	0% {
		transform: translate(-100%, -50%);
	}
	33% {
		transform: translate(-35%, -35%);
	}
	66% {
		transform: translate(-15%, -50%);
	}
	100% {
		transform: translate(-100%, -75%);
	}
}
@keyframes btnBall2 {
	0% {
		transform: translate(40%, -50%);
	}
	25% {
		transform: translate(-30%, -25%);
	}
	50% {
		transform: translate(-100%, -10%);
	}
	75% {
		transform: translate(-30%, -35%);
	}
	100% {
		transform: translate(40%, -50%);
	}
}
header {
	position: fixed;
	width: 100%;
	top: 20px;
	z-index: 20;
	.wrapper {
		--gap: 15px;
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--gap);
		padding: 17px 20px;
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.6);
		box-shadow: 0 67px 97px rgba(0, 0, 0, 0.17), 0 20px 40px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(10px);
	}
	.logo {
		max-width: 162px;
	}
	.menu {
		display: flex;
		align-items: center;
		gap: 24px;
		> .ws-menu {
			display: contents;
			> .item {
				position: relative;
				&::before {
					content: '';
					position: absolute;
					top: calc(100% + 1px);
					left: 50%;
					transform: translateX(-50%) scaleX(0);
					width: 70%;
					height: 2px;
					background: var(--textColor);
					pointer-events: none;
					transition: transform .6s var(--anim);
				}
				> a {
					display: inline-block;
					color: transparent;
				}
				a,
				p {
					font-weight: 700;
					line-height: 1.2;
					white-space: nowrap;
				}
				> .sub-menu {
					display: contents;
					> .item {
						--t: 30px;
						position: absolute;
						top: 0;
						width: 50%;
						overflow: hidden;
						pointer-events: none;
						p {
							position: relative;
							text-shadow: 0 var(--t) 0 var(--textColor);
							transition: transform .6s var(--anim);
						}
						&:first-child {
							left: 0;
							p {
								transform: translateY(calc(0px - var(--t)));
							}
						}
						&:last-child {
							right: 0;
							display: flex;
							justify-content: end;
						}
					}
				}
			}
		}
	}
	.buttons {
		margin-left: auto;
		display: flex;
		align-items: center;
		gap: var(--gap);
		button.btn {
			--pd-i: 20px;
			box-shadow: none;
			display: grid;
			grid-template-columns: 30px max-content;
			gap: 10px;
			padding-block: 8px;
			font-weight: 700;
			font-size: 16px;
			border-radius: 12px;
			text-transform: none;
		}
		.burger {
			position: relative;
			width: 46px;
			aspect-ratio: 1;
			flex-shrink: 0;
			border: none;
			background: transparent;
			&::before,
			&::after,
			span {
				position: absolute;
				top: 50%;
				left: 50%;
				height: 3px;
				border-radius: 1px;
				background: var(--textColor);
				pointer-events: none;
			}
			&::before,
			&::after {
				content: '';
				width: 24px;
			}
			&::before {
				transform: translate(-50%, calc(-50% - 7px));
			}
			&::after {
				transform: translate(-50%, calc(-50% + 7px));
			}
			span {
				width: 18px;
				transform: translate(calc(-50% - 3px), -50%);
			}
		}
		> a {
			display: none;
		}
	}
	.burger-menu {
		--bor-r: 16px;
		position: absolute;
		top: calc(100% + 16px);
		right: 0;
		display: grid;
		grid-template-rows: 1fr auto;
		gap: 5px;
		width: min(451px, calc(100vw - 20px));
		height: calc(100dvh - 140px);
		contain: strict;
		padding: 20px 20px 30px 40px;
		border-radius: var(--bor-r);
		overflow: hidden;
		pointer-events: none;
		transition: box-shadow .3s ease-out;
		&.touch {
			pointer-events: all;
		}
		> .ws-menu::before,
		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			z-index: -1;
			height: 100%;
			contain: strict;
			border-radius: var(--bor-r);
			transform: translate3D(calc(100% + 1px), 0, 0);
			transform-style: preserve-3d;
			backface-visibility: hidden;
			border-right: 2px solid var(--bg-1);
		}
		&::before {
			width: 100%;
			transition: transform .4s ease-in-out .5s;
			background: var(--bg-3);
		}
		&::after {
			width: calc(100% - (var(--bg-w) * 2));
			transition: transform .4s ease-in-out .4s;
			background: var(--bg-1);
		}
		> .ws-menu {
			display: flex;
			flex-direction: column;
			gap: 6px;
			height: 100%;
			overflow: hidden auto;
			overscroll-behavior: contain;
			counter-reset: menu;
			padding-right: 10px;
			&::before {
				width: calc(100% - var(--bg-w));
				margin-bottom: auto;
				contain: strict;
				background: var(--bg-2);
				transition: transform .5s ease-in-out .4s;
			}
			> .item {
				position: relative;
				z-index: 1;
				display: grid;
				grid-template-columns: 1fr 24px;
				counter-increment: menu;
				margin-left: 20px;
				padding-bottom: 6px;
				border-bottom: 1px solid var(--border-color);
				overflow: hidden;
				opacity: 0;
				transition: opacity .2s linear, grid-template-rows .4s linear 0s;
				&::before {
					content: '0' counter(menu);
					padding-right: 1px;
					position: absolute;
					right: 100%;
					top: 0;
					opacity: 0;
					font-size: 14px;
					font-weight: 300;
					color: var(--bg-3);
					transition: opacity .6s var(--anim) .7s;
				}
				&:has(> img) {
					&::after {
						content: '\e903';
						position: absolute;
						grid-area: 1/2/2/3;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						aspect-ratio: 1;
						font: 18px / 1 icon;
						will-change: transform;
						transform: translateX(100%) rotate(90deg);
						transition: transform .6s var(--anim) .6s, color .3s linear;
						background: var(--gradient-1);
						background-clip: text;
						-webkit-background-clip: text;
					}
					> img {
						grid-area: 1/2/2/3;
					}
				}
				> a {
					position: relative;
					width: fit-content;
					margin-right: 10px;
					transform-origin: top left;
					transform: translate3d(10px, 110%, 0px) rotate(15deg);
					transform-style: preserve-3d;
					font-weight: 900;
					font-size: 24px;
					text-wrap: balance;
					text-transform: uppercase;
					will-change: transform;
					background: var(--gradient-1);
					background-clip: text;
					-webkit-background-clip: text;
					transition: color .3s linear, transform .6s var(--anim2) .7s;
				}
				> .sub-menu {
					grid-column: 1/-1;
					display: flex;
					flex-direction: column;
					gap: 6px;
					a {
						display: block;
						font-size: 18px;
						font-weight: 900;
						transition: padding-left .4s var(--anim), margin-right .4s var(--anim);
					}
					> .item:first-child {
						margin-top: 10px;
					}
				}
				&.open > a {
					color: transparent;
				}
				&:first-child {
					margin-top: 20px;
				}
				&:last-child {
					margin-bottom: 30px;
				}
			}
		}
		.glass {
			grid-area: 1/1/2/2;
			position: absolute;
			inset: -1px 0;
			z-index: 2;
			pointer-events: none;
			opacity: 0;
			transition: opacity 0s;
			background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 100%) left top / 100% 21px no-repeat, linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 95%) left bottom / 100% 61px no-repeat;
		}
		.contact-box {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 5px;
			z-index: 2;
			transform: translate3d(0, 120%, 0);
			opacity: 0;
			transition: opacity .6s var(--anim), transform .6s var(--anim);
			p {
				font-weight: 900;
				font-size: 14px;
				text-align: center;
				text-transform: uppercase;
			}
			a {
				margin-bottom: 10px;
				font-weight: 900;
				font-size: 24px;
				text-align: center;
				text-transform: uppercase;
				background: var(--gradient-1);
				background-clip: text;
				-webkit-background-clip: text;
				color: transparent;
			}
		}
	}
	&.active {
		.burger {
			&::before {
				animation: burgerTopOn .8s linear forwards;
			}
			span {
				animation: burgerCenterRight .3s linear forwards;
			}
			&::after {
				animation: burgerBottomOn .8s linear forwards;
			}
		}
		.burger-menu {
			box-shadow: 0 11px 24px rgba(0, 0, 0, 0.1), 0 30px 30px rgba(0, 0, 0, 0.05);
			transition-delay: .8s;
			> .ws-menu::before,
			&::before,
			&::after {
				transition-timing-function: ease-out;
				transform: translate3D(0, 0, 0);
			}
			&::before {
				transition-duration: .4s;
				transition-delay: 0s;
			}
			&::after {
				transition-duration: .55s;
				transition-delay: .15s;
			}
			> .ws-menu::before {
				transition-duration: .5s;
				transition-delay: .1s;
			}
			.glass {
				opacity: 1;
				transition-delay: .8s;
			}
			.ws-menu > .item {
				opacity: 1;
				transition-delay: .5s;
				&::before {
					opacity: 1;
				}
				a {
					transform: translate3d(0, 0, 0) rotate(0);
				}
				&::after {
					transform: translateX(0) rotate(90deg);
				}
			}
			.contact-box {
				opacity: 1;
				transform: translate3d(0, 0, 0);
				transition-delay: .8s;
			}
			&.touch .ws-menu > .item {
				overflow: visible;
				transition-delay: 0s;
				&::after {
					transition-delay: 0s;
				}
				&.open::after {
					transform: rotate(270deg);
					color: transparent;
				}
			}
		}
	}
	&:not(.load, .active) .burger {
		&::before {
			animation: burgerTopOff .4s var(--anim);
		}
		span {
			animation: burgerCenterLeft .6s linear;
		}
		&::after {
			animation: burgerBottomOff .4s var(--anim);
		}
	}
}
@keyframes burgerTopOn {
	0% {
		transform: translate(-50%, calc(-50% - 7px));
	}
	35% {
		transform: translate(-50%, calc(-50% + 2px));
	}
	40%,
	85% {
		transform: translate(-50%, -50%);
	}
	95% {
		transform: translate(-50%, -50%) rotate(55deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(45deg);
	}
}
@keyframes burgerTopOff {
	0% {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	100% {
		transform: translate(-50%, calc(-50% - 7px)) rotate(0);
	}
}
@keyframes burgerCenterRight {
	0% {
		transform: translate(calc(-50% - 3px), -50%);
		opacity: 1;
	}
	90% {
		opacity: 1;
		transform: translate(200px, -50%);
	}
	100% {
		opacity: 0;
		transform: translate(250px, -50%);
	}
}
@keyframes burgerCenterLeft {
	0% {
		opacity: 0;
		transform: translate(250px, -50%);
	}
	20% {
		opacity: 1;
		transform: translate(200px, -50%);
	}
	60% {
		transform: translate(calc(-50% - 13px), -50%);
		opacity: 1;
	}
	100% {
		transform: translate(calc(-50% - 3px), -50%);
		opacity: 1;
	}
}
@keyframes burgerBottomOn {
	0% {
		transform: translate(-50%, calc(-50% + 7px));
	}
	35% {
		transform: translate(-50%, calc(-50% - 2px));
	}
	40%,
	85% {
		transform: translate(-50%, -50%);
	}
	95% {
		transform: translate(-50%, -50%) rotate(-55deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
}
@keyframes burgerBottomOff {
	0% {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	100% {
		transform: translate(-50%, calc(-50% + 7px)) rotate(0);
	}
}
.video {
	position: relative;
	background: url(../images/index/poster.webp) center center / cover;
	video {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		transform: translate(-50%, -50%);
		object-fit: cover;
		contain: strict;
	}
	h1,
	h2,
	h3,
	h4 {
		position: relative;
		z-index: 1;
		text-transform: uppercase;
		color: #000;
		mix-blend-mode: screen;
	}
}
.collapse {
	position: relative;
	display: grid;
	grid-template-rows: max-content 0fr;
	transition: grid-template-rows .4s linear;
	transform: translateZ(0);
	backface-visibility: hidden;
	&:has(> img) img {
		position: relative;
		aspect-ratio: 1;
		cursor: pointer;
		opacity: 0;
		z-index: 1;
	}
	.top::after {
		content: '\e903';
		font: 24px icon;
		transform: rotate(90deg);
		transition: transform .3s linear, color .3s linear;
	}
	> .sub-menu,
	> .content {
		grid-column: 1/-1;
		overflow: hidden;
	}
	&.open {
		grid-template-rows: max-content 1fr;
		.top::after {
			transform: rotate(270deg);
		}
	}
}
.split-text {
	--t: 30px;
	--clr: var(--textColor);
	--br-w: 4px;
	position: relative;
	width: fit-content;
	display: grid;
	color: var(--clr);
	border-bottom: var(--br-w) solid var(--clr);
	overflow: hidden;
	span,
	b {
		position: relative;
		font-size: inherit;
		color: inherit;
		line-height: inherit;
		font-weight: inherit;
	}
	span {
		grid-area: 1/1/2/2;
		overflow: hidden;
		width: 50%;
		&:first-child b {
			transform: translateY(calc(0px - var(--t)));
		}
		&:last-child {
			margin-left: auto;
			b {
				justify-content: end;
			}
		}
		b {
			display: flex;
			text-shadow: 0 var(--t) 0 var(--clr);
			transition: transform .6s var(--anim);
			white-space: nowrap;
		}
	}
}
.bg-text {
	position: absolute;
	font-family: 'TT Travels';
	font-weight: 900;
	text-transform: uppercase;
	color: var(--btn-color);
	pointer-events: none;
	text-wrap: nowrap;
	overflow: hidden;
	user-select: none;
}
.arrows {
	align-items: center;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: -0.3px;
	color: var(--btn-color);
	font-weight: 500;
	text-transform: uppercase;
	transition: padding-left .2s ease-out, margin-right .2s ease-out;
	&:has(> .arrow) {
		--t: 5px;
		--arr-move: 3px;
		--col: 20px;
		.arrow {
			&::before,
			&::after {
				color: var(--btn-color);
				font-size: 8px;
			}
		}
	}
}
.tel-code {
	position: relative;
	border-radius: 12px;
	img {
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.16);
	}
	button {
		position: relative;
		width: fit-content;
		display: grid;
		grid-template-columns: 24px 13px auto;
		gap: 4px;
		align-items: center;
		padding: 15px 16px;
		border: none;
		background: none;
		border-radius: inherit;
		margin-right: 10px;
		&::before {
			content: '\e903';
			position: relative;
			grid-area: 1/2/2/3;
			font: 10px icon;
			max-width: auto;
			transform: rotate(90deg);

		}
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			right: 0;
			width: 1px;
			height: 24px;
			background: #ddd;
			transform: translateY(-50%);
			pointer-events: none;
		}
		img {
			grid-area: 1/1/2/2;
			width: 100%;
		}
		span {
			line-height: 1.1;
			color: #212121;
		}
	}
	.tel-code-list {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: 12px;
		padding-inline: 16px;
		isolation: isolate;
		border-radius: 12px;
		background: var(--bg-1);
		box-shadow: 0 11px 24px rgba(0, 0, 0, 0.1), 0 24px 24px rgba(0, 0, 0, 0.09);
		overflow-y: auto;
		scrollbar-width: none;
		max-height: 0;
		transition: max-height .3s linear;
		&::-webkit-scrollbar {
			display: none;
		}
		label {
			display: grid;
			grid-template-columns: 24px repeat(3, auto);
			align-items: center;
			gap: 8px;
			white-space: nowrap;
			cursor: pointer;
			&:first-child {
				margin-top: 13px;
			}
			&:last-child {
				margin-bottom: 13px;
			}
			&:has(input:checked) {
				color: var(--bg-2);
			}
			input {
				display: none;
			}
			b {
				font-weight: 700;
				line-height: 1.2;
				background: var(--gradient-1);
				-webkit-background-clip: text;
				background-clip: text;
				transition: color .3s linear;
			}
			&::after {
				content: '';
				grid-area: 1/3/2/4;
				width: 1px;
				height: 24px;
				background: #ddd;
				pointer-events: none;
				margin-inline: 8px 2px;
			}
		}
	}
	&.open .tel-code-list {
		max-height: 400px;
	}
}
.label {
	--border-rad: 12px;
	--outline-width: 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	> b {
		padding-left: 10px;
		font-weight: 700;
		line-height: 1.2;
	}
	&:has(input:focus, input:focus-visible, .open) .input-box {
		border-color: var(--bg-1);
		&::before {
			opacity: 1;
		}
	}
	&:has(.error, input:user-invalid) {
		.input-box {
			border-color: var(--error);
			&::before {
				opacity: 0;
			}
			.error-text {
				transform: translateY(calc(100% + 4px));
			}
		}
	}
	.input-box {
		position: relative;
		width: 100%;
		border-radius: var(--border-rad);
		border: 1px solid rgba(0, 0, 0, 0.1);
		transition: border-color .3s linear;
		&::before {
			content: '';
			position: absolute;
			inset: calc(0px - var(--outline-width));
			background: var(--gradient-1);
			border-radius: calc(var(--border-rad) + var(--outline-width));
			pointer-events: none;
			opacity: 0;
			transition: opacity .3s linear;
		}
		.error-text {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding-inline: 10px;
			line-height: 1.2;
			color: var(--error);
			transition: transform .3s linear;
		}
		> input {
			position: relative;
			z-index: 1;
			background: var(--bg-1);
			width: 100%;
			padding: 15px 16px;
			border-radius: inherit;
			line-height: 1.125;
			color: var(--textColor2);
			&::placeholder {
				color: rgba(108, 115, 125, 0.5);
			}
		}
		&:has(.tel-code) {
			position: relative;
			display: grid;
			grid-template-columns: auto 1fr;
			.tel-code {
				position: relative;
				z-index: 2;
				border-radius: inherit;
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				background: var(--bg-1);
			}
			> input {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				padding-left: 0;
			}
		}
	}
}
.check,
.agree label {
	position: relative;
	aspect-ratio: 1;
	flex-shrink: 0;
	&::before,
	&::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		pointer-events: none;
	}
	&::before {
		border: 1px solid var(--textColor2);
	}
	&::after {
		display: flex;
		align-items: center;
		justify-content: center;
		content: '\e904';
		font: 11px / 1 icon;
		color: var(--btn-color);
		background: var(--gradient-1);
		opacity: 0;
		transition: opacity .3s linear;
	}
	&:has(:checked)::after {
		opacity: 1;
	}
	input {
		display: none;
	}
}
label {
	cursor: pointer;
	&:has(.check) {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 12px;
		align-items: start;
		padding: 14px;
		border-radius: 12px;
		background: var(--bg-1);
		transition: box-shadow .3s linear;
		&::before {
			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;
		}
		b {
			width: 100%;
			font-weight: 900;
			line-height: 1.1;
			text-transform: uppercase;
			background: var(--gradient-1);
			-webkit-background-clip: text;
			background-clip: text;
			transition: color .3s linear;
		}
		&:has(:checked) {
			box-shadow: 0 4px 9px rgba(64, 24, 139, 0.05), 0 16px 16px rgba(64, 24, 139, 0.04);
			&::before {
				opacity: 1;
			}
			b {
				color: transparent;
			}
		}
	}
}
.check {
	width: 32px;
	border-radius: 8px;
}
.agree {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 10px;
	label {
		width: 20px;
		border-radius: 4px;
		cursor: pointer;
	}
	p {
		font-size: 12px;
		line-height: 1.2;
		color: var(--textColor2);
		a {
			font-size: inherit;
			line-height: inherit;
			background: var(--gradient-1);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			transition: color .3s linear;
		}
	}
}
.select {
	--height: 48px;
	position: relative;
	height: var(--height);
	border-radius: 12px;
	background: var(--bg-1);
	border: 1px solid rgba(0, 0, 0, 0.1);
	.list {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 4;
		border-radius: inherit;
		display: flex;
		flex-direction: column;
		justify-content: start;
		gap: 12px;
		background: inherit;
		padding: 13px 16px;
		max-height: calc(var(--height) - 2px);
		overflow-y: hidden;
		scrollbar-width: none;
		transition: max-height .3s linear, box-shadow .2s;
		&::after {
			content: '\e903';
			position: absolute;
			top: 13px;
			right: 16px;
			width: 20px;
			aspect-ratio: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font: 14px icon;
			transform: rotate(90deg);
			transition: transform .3s linear;
			cursor: pointer;
		}
		input,
		&::-webkit-scrollbar {
			display: none;
		}
		label {
			line-height: 1.2;
			transition: color .2s linear;
			&:has(:checked) {
				order: -1;
			}
		}
	}
	&.open {
		.list {
			overflow-y: auto;
			max-height: 200px;
			box-shadow: 0 11px 24px rgba(0, 0, 0, 0.1), 0 24px 24px rgba(0, 0, 0, 0.1);
			&::after {
				transform: rotate(270deg);
			}
		}
	}
}
.range {
	--btn-width: 28px;
	--padding: 6px;
	position: relative;
	z-index: 1;
	width: 100%;
	height: calc(var(--btn-width) + var(--padding) * 2);
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	padding: var(--padding);
	border-radius: 12px;
	background: var(--bg-1);
	.bg-line {
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: var(--gradient-1);
		box-shadow: 0 11px 24px rgba(0, 0, 0, 0.1);
	}
	:is(.min-range, .max-range) {
		position: absolute;
		top: var(--padding);
		width: var(--btn-width);
		aspect-ratio: 1;
		border-radius: 6px;
		background: var(--bg-1);
		cursor: pointer;
		input {
			display: none;
		}
		&::before {
			content: attr(data-value) '$';
			position: absolute;
			bottom: calc(100% + 8px);
			left: 50%;
			transform: translateX(-50%);
			padding: 2px 4px;
			border-radius: 6px;
			font-weight: 700;
			font-size: 14px;
			line-height: 1.2;
			background: var(--bg-1);
		}
		&.active {
			z-index: 1;
		}
	}
	.min-range {
		left: var(--padding);
	}
	.max-range {
		left: calc(100% - var(--padding) - var(--btn-width));
	}
}
.window-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100dvh;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	opacity: 0;
	pointer-events: none;
	overscroll-behavior: contain;
	transition: opacity .4s linear;
	&.open {
		opacity: 1;
		pointer-events: all;
		.body {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}
	.body {
		--pad-inline: 40px;
		position: relative;
		width: min(var(--max-w), calc(100vw - (var(--mr-i) * 2)));
		max-height: calc(100dvh - (var(--mr-i) * 2));
		display: flex;
		flex-direction: column;
		padding-block: 50px;
		border-radius: 16px;
		background: var(--bg-1);
		transform: translate3d(0, -100vh, 0);
		opacity: 0;
		transition: transform .4s ease-out, opacity .3s linear;
	}
	.close {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 40px;
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		background: var(--bg-1);
		box-shadow: 0 4px 9px rgba(64, 24, 139, 0.05), 0 16px 16px rgba(64, 24, 139, 0.04);
		border: none;
		color: var(--textColor2);
		transition: color .3s linear;
		&::before {
			content: '\e900';
			font: 22px icon;
			transform: rotate(135deg);
			background: var(--gradient-1);
			-webkit-background-clip: text;
			background-clip: text;
		}
	}
	.title {
		font-weight: 900;
		font-size: 24px;
		text-align: center;
		text-transform: uppercase;
		background: var(--gradient-1);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		padding-inline: var(--pad-inline);
	}
	.content {
		overflow: hidden auto;
		padding-inline: var(--pad-inline);
	}
	&.contact-modal {
		--max-w: 400px;
		.body {
			gap: 30px;
		}
		.list {
			display: flex;
			flex-direction: column;
			gap: 12px;
			padding-inline: 10px;
			p,
			a {
				display: grid;
				grid-template-columns: 40px auto;
				gap: 12px;
				align-items: center;
				width: fit-content;
				font-weight: 700;
				font-size: 20px;
				line-height: 1.1;
				letter-spacing: -0.3px;
				> span,
				> img {
					padding: 6px;
					border-radius: 12px;
					background: var(--gradient-1);
				}
				span {
					width: 100%;
					padding: 0;
					overflow: hidden;
					img {
						clip-path: circle(32% at 50% 50%);
						border-radius: 50%;
						transform: scale(1.15);
					}
				}
				strong,
				b {
					font-size: inherit;
					line-height: inherit;
					color: inherit;
					text-transform: none;
				}
				b {
					font-weight: 700;
				}
				strong {
					font-weight: 500;
				}
			}
			a {
				text-transform: lowercase;
			}
		}
		.btn {
			--pd-i: 43px;
			margin-block: 40px;
		}
		.social-menu {
			display: flex;
			flex-wrap: wrap;
			gap: 12px 8px;
			.arrows {
				color: var(--textColor2);
				.arrow {
					&::before,
					&::after {
						color: var(--textColor2);
					}
				}
				&.linkedin {
					order: 1;
				}
				&.youtube {
					order: 2;
				}
				&.viber {
					order: 3;
				}
				&.vk {
					order: 4;
				}
				&.wats-up {
					order: 5;
				}
				&.instagram {
					order: 6;
				}
				&.facebook {
					order: 7;
				}
			}
		}
	}
	&.request-call-modal {
		--max-w: 450px;
		.body {
			gap: 40px;
		}
		.label {
			margin-bottom: 20px;
		}
		.btn {
			--pd-i: 123px;
			margin-block: 40px 20px;
		}
	}
	&.project-modal {
		--max-w: 1600px;
		.body {
			background: var(--btn-color);
			padding-bottom: 0;
			overflow: clip;
		}
		.bg-text {
			top: -25px;
			left: 500px;
			font-size: min(250px, calc((100vw - 768px) / (1920px - 768px) * (250px - 195px) + 195px));
			letter-spacing: -20px;
			color: var(--bg-1);
			~ * {
				z-index: 1;
			}
		}
		.title {
			display: flex;
			flex-direction: column;
			align-items: start;
			text-align: left;
			font-size: 40px;
			span {
				font-size: inherit;
				line-height: inherit;
				font-weight: inherit;
			}
			+ p {
				margin-bottom: 40px;
				padding-inline: 40px;
				color: var(--textColor2);
			}
		}
		.content {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 30px 40px;
			padding-bottom: 50px;
			padding-right: 10px;
			margin-right: 30px;
			.left {
				display: flex;
				flex-direction: column;
				gap: 20px;
				fieldset {
					border: none;
					legend {
						margin-bottom: 4px;
						padding-inline: 10px;
						font-weight: 700;
						line-height: 1.2;
					}
					&.need {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						align-items: start;
						gap: 12px;
						legend {
							grid-column: 1/-1;
						}
					}
					&.budget {
						margin-top: auto;
						p {
							margin-inline: 10px;
							line-height: 1.2;
							color: var(--textColor2);
						}
					}
				}
			}
			.right {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 20px;
				.label:has([name="email"], .tel-code, textarea) {
					grid-column: 1/-1;
				}
			}
			.bottom {
				grid-column: 2/3;
				display: grid;
				grid-template-columns: 1fr auto;
				gap: 20px;
				.btn {
					opacity: .3;
					pointer-events: none;
				}
				.agree {
					max-width: 290px;
				}
			}
		}
	}
}
footer {
	margin-top: auto;
	background: var(--bg-1);
	padding-block: 40px;
	container: footer / inline-size;
	.wrapper {
		display: grid;
		grid-template-columns: 1fr minmax(778px, 1fr);
		gap: 12px;
	}
	@container footer (max-width: 1450px) {
		.wrapper {
			display: flex;
			flex-direction: column-reverse;
			.left .bg-text {
				font-size: min(352px, calc((100vw - 375px) / (1920px - 375px) * (352px - 142px) + 142px));
			}
			.right {
				--w: max(80vw, 842px);
			}
		}
	}
	.left {
		position: relative;
		border-radius: 16px;
		background: var(--bg-1);
		margin-left: calc(var(--bg-w) * 2);
		padding: 40px;
		overflow: hidden;
		box-shadow: calc(0px - var(--bg-w)) 0 0 -1px var(--bg-2), calc(0px - (var(--bg-w) * 2)) 0 0 -1px var(--bg-3);
		&::before {
			content: '';
			position: absolute;
			z-index: 3;
			inset: 0 0 0 calc(0px - (var(--bg-w) * 2));
			border-radius: inherit;
			border: 1px solid rgba(9, 21, 38, 0.1);
			pointer-events: none;
		}
		.bg-text {
			top: -50px;
			left: -6px;
			font-size: min(252px, calc((100vw - 375px) / (1920px - 375px) * (252px - 50px) + 50px));
			letter-spacing: -20px;
		}
		.logo,
		.info {
			position: relative;
			z-index: 1;
		}
		.logo {
			margin-bottom: 58px;
			display: block;
			max-width: 322px;
			img {
				filter: drop-shadow(0px 10px 7px rgba(46, 0, 133, 0.2));
			}
		}
		.info {
			display: flex;
			flex-wrap: wrap;
			gap: 10px 11px;
			p {
				font-weight: 500;
				line-height: 1.2;
				letter-spacing: -0.5px;
				text-transform: uppercase;
				color: var(--textColor2);
				a,
				span {
					font-weight: inherit;
					line-height: inherit;
					letter-spacing: inherit;
					text-transform: inherit;
					font-size: inherit;
				}
				span {
					display: inline-block;
					padding-left: 11px;
					color: inherit;
				}
				a {
					background: radial-gradient(78% 80% at 62% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, #7c3bf3 0%, #7c3bf3 100%);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;
					transition: color .3s linear;
				}
				&.copyright,
				&.personal-data,
				&.rs,
				&.unp {
					width: 100%;
				}
				&.copyright {
					font-weight: 400;
					opacity: 0.6;
				}
			}
		}
	}
	.right {
		--w: 842px;
		display: grid;
		grid-template-columns: 1fr 208px;
		grid-auto-rows: 1fr;
		gap: 16px;
		padding: 40px;
		border-radius: 16px;
		.box {
			grid-row: 1/3;
			display: flex;
			flex-direction: column;
			gap: 8px;
			border-right: 1px solid rgba(255, 255, 255, 0.3);
			padding: 10px 34px 10px 0;
			.buttons + p,
			> a {
				font-weight: 900;
				font-size: 32px;
				line-height: 1.2;
			}
			> a {
				--clr: var(--btn-color);
				--t: 40px;
			}
			> p {
				color: var(--btn-color);
				text-transform: uppercase;
				&:last-child {
					margin-top: 10px;
					font-weight: 900;
					font-size: 20px;
					line-height: 1;
				}
			}
		}
		.buttons {
			display: grid;
			grid-template-columns: auto 50px 1fr;
			gap: 16px;
			.btn-white {
				padding: 2px 0 2px 10px;
			}
			+ p {
				margin-block: -8px 36px;
			}
		}
		:is(.menu, .social-menu) {
			display: flex;
			gap: 12px;
		}
		.menu {
			flex-direction: column;
			margin-top: 17px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
			padding-bottom: 16px;
			.ws-menu {
				display: contents;
				.sub-menu {
					display: none;
				}
				> .item:last-child {
					display: none;
				}
			}
			a {
				--t: 10px;
				font-weight: 500;
				font-size: 20px;
				text-transform: uppercase;
				color: var(--btn-color);
				transition: padding-left .2s ease-out, margin-right .2s ease-out;
			}
		}
		.social-menu {
			flex-wrap: wrap;
			margin-bottom: 17px;
		}
	}
}
:is(header, footer, .burger-menu) {
	contain: inline-size layout style;
}
@media (max-width: 1840px) {
	footer {
		.left {
			.bg-text {
				top: -29px;
				letter-spacing: -16px;
			}
			.logo {
				margin-bottom: 40px;
			}
		}
		.right .box {
			padding-right: 20px;
			.buttons + p,
			> a {
				font-size: 28px;
			}
			> p:last-child {
				font-size: 18px;
			}
		}
	}
	.window-modal.project-modal {
		.title {
			padding-inline: 30px;
			+ p {
				padding-inline: 30px;
			}
		}
		.content {
			gap: 20px 30px;
			padding-left: 30px;
			margin-right: 20px;
			.bottom {
				gap: 16px;
				.btn {
					--pd-i: 30px;
				}
			}
		}
	}
}
@media (max-width: 1280px) {
	* {
		--mr-i: 20px;
	}
	main {
		margin-bottom: 120px;
	}
	h2 {
		font-size: 34px;
	}
	.btn {
		--shadow-y: 10px;
		--shadow-blur: 26px;
		--shadow-b: -10px;
	}
	header {
		.wrapper {
			--gap: 10px;
			grid-template-columns: repeat(3, auto);
			justify-content: space-between;
		}
		.burger-menu {
			top: calc(100% + 10px);
			height: calc(100dvh - 121px);
		}
		.logo {
			max-width: 140px;
		}
		.menu {
			gap: 16px;
		}
	}
	.window-modal.project-modal {
		.title {
			font-size: 30px;
		}
		.bg-text {
			left: 300px;
		}
		.content {
			.left {
				fieldset.need {
					grid-template-columns: repeat(2, 1fr);
				}
			}
			.right {
				grid-template-columns: 1fr;
			}
			.bottom {
				grid-column: 1/-1;
				.agree {
					max-width: initial;
				}
			}
		}
	}
	.range {
		--btn-width: 16px;
		--padding: 4px;
		margin-top: 28px;
		border-radius: 6px;
		:is(.min-range, .max-range) {
			border-radius: 2px;
			&::before {
				bottom: calc(100% + 6px);
				padding: 0px 1px;
				border-radius: 2px;
				font-size: 12px;
			}
		}
	}
}
@media (max-width: 1024px) {
	main {
		margin-bottom: 100px;
	}
	h2 {
		font-size: 24px;
	}
	textarea {
		height: 100px;
	}
	header {
		.wrapper {
			padding: 10px;
			box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2), 0 30px 40px rgba(0, 0, 0, 0.17);
		}
		.burger-menu {
			height: calc(100dvh - 101px);
			> .ws-menu {
				gap: 6px;
				> .item {
					grid-template-columns: 1fr 20px;
					padding-bottom: 6px;
					&::before {
						font-size: 12px;
					}
					&:has(> img)::after {
						font-size: 14px;
					}
					> a {
						font-size: 14px;
					}
					> .sub-menu {
						gap: 10px;
						a {
							font-size: 14px;
						}
					}
				}
			}
		}
		.buttons {
			.burger {
				width: 40px;
			}
			:is(button, a).btn {
				--pd-h: 0px;
				--pd-i: 6px;
				grid-template-columns: 28px;
				padding: 6px;
				background: var(--gradient-1);
				.bg-ball,
				&::before,
				&::after {
					display: none;
				}
				b {
					display: none;
				}
			}
			> a.btn {
				width: 40px;
				display: flex;
				padding: 0;
				border-radius: 12px;
				img {
					clip-path: circle(32% at 50% 50%);
					border-radius: 50%;
					transform: scale(1.15);
				}
			}
		}
	}
	footer {
		padding-block: 20px;
		.wrapper {
			gap: 10px;
		}
		.right {
			padding: 20px;
			.box {
				padding: 6px 16px 6px 0;
				.buttons + p,
				> a {
					font-size: 24px;
				}
				> p:last-child {
					font-size: 16px;
				}
			}
		}
	}
	.check {
		width: 20px;
		border-radius: 5px;
		&::after {
			font-size: 11px;
		}
	}
	label:has(.check) {
		gap: 8px;
		padding: 10px;
		b {
			font-size: 14px;
		}
	}
	.window-modal.project-modal {
		.title {
			padding-inline: 20px;
			font-size: 24px;
			+ p {
				margin-bottom: 20px;
				padding-inline: 20px;
			}
		}
		.bg-text {
			left: -60px;
			font-size: 195px;
		}
		.content {
			grid-template-columns: 1fr;
			padding-inline: 20px 14px;
			margin-right: 6px;
			.left fieldset.need {
				grid-template-columns: repeat(3, 1fr);
				gap: 10px;
			}
			.right {
				order: -1;
				grid-template-columns: repeat(2, 1fr);
				gap: 10px;
			}
			.bottom {
				grid-column: 1/-1;
				gap: 16px;
				.btn {
					--pd-i: 30px;
				}
				.agree {
					max-width: initial;
				}
			}
		}
	}
}
@media (max-width: 768px) {
	* {
		--mr-i: 10px;
		--bg-w: 4px;
	}
	header {
		top: 10px;
		.wrapper {
			grid-template-columns: repeat(2, auto);
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
		}
		.burger-menu {
			--bor-r: 12px;
			height: calc(100dvh - 91px);
			padding: 10px 10px 17px 20px;
			.contact-box .btn {
				justify-content: center;
				padding-inline: 0;
				width: min(315px, 100%);
			}
			.ws-menu > .item:first-child {
				margin-top: 10px;
			}
		}
		.logo {
			max-width: 128px;
		}
		.menu {
			display: none;
		}
	}
	.btn {
		border-radius: 8px;
		box-shadow: 0 10px 24px -9px var(--shadow-color);
	}
	:is(button, a):has(> .arrow) .arrow {
		&::before,
		&::after {
			font-size: 17px;
		}
	}
	.btn-white b {
		font-size: 24px;
	}
	.split-text {
		--br-w: 2px;
	}
	.window-modal {
		.body {
			--pad-inline: 20px;
			padding-bottom: 20px;
		}
		.title {
			font-size: 20px;
		}
		&.contact-modal {
			--max-w: 356px;
			.btn {
				margin-top: 30px;
				width: calc(100% - 18px);
			}
		}
		&.request-call-modal {
			--max-w: 356px;
			.btn {
				--pd-i: 10px;
				width: 100%;
				margin-top: 30px;
			}
		}
		&.project-modal .content {
			padding-bottom: 20px;
			.left fieldset {
				&.need {
					grid-template-columns: repeat(2, 1fr);
				}
				&.budget {
					legend {
						padding-inline: 0;
					}
					p {
						margin-inline: 0;
						font-size: 14px;
						text-wrap: balance;
					}
				}
			}
			.right {
				grid-template-columns: 1fr;
			}
			.bottom {
				margin-top: 10px;
				grid-template-columns: 1fr;
				gap: 10px;
				.btn {
					order: -1;
				}
			}
		}
	}
	footer {
		.left {
			padding: 20px 20px 20px 12px;
			border-radius: 12px;
			.bg-text {
				letter-spacing: -14px;
			}
			.logo {
				max-width: 242px;
				margin: 0 auto 20px;
			}
			.info {
				flex-direction: column;
				gap: 6px;
				p {
					font-size: 14px;
					span {
						display: block;
						margin-top: 6px;
						padding-left: 0;
					}
				}
			}
		}
		.right {
			display: flex;
			flex-direction: column;
			gap: 20px;
			border-radius: 12px;
			.box {
				border-right: none;
				padding: 0;
				> p:last-child {
					margin-top: 12px;
				}
			}
			.buttons {
				grid-template-columns: auto 1fr;
				gap: 10px;
				.btn-white {
					--col: 32px;
				}
				.btn-image {
					width: 36px;
					margin-right: auto;
				}
				+ p {
					margin-bottom: 12px;
				}
			}
			:is(.menu, .social-menu) {
				gap: 10px;
			}
			.menu {
				margin-top: 0;
				padding-block: 20px;
				border-top: 1px solid var(--bg-1);
			}
			.social-menu {
				max-width: 430px;
				margin-bottom: 0;
			}
		}
		:is(.btn, .btn-white):has(b + b) {
			--t: 32px;
		}
	}
}
@media (max-width: 1280px) and (max-height: 600px) and (orientation: landscape) {
	header .burger-menu {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: initial;
		width: calc(100vw - 20px);
		padding: 10px 10px 10px 20px;
		.contact-box {
			justify-content: end;
			margin-bottom: 10px;
		}
	}
	.window-modal {
		.body {
			gap: 10px;
			padding-bottom: 0;
			.content {
				padding: 0 20px 20px;
			}
		}
		&.contact-modal .body,
		&.request-call-modal .body {
			gap: 10px;
		}
		&.request-call-modal .btn {
			margin-top: 16px;
		}
	}
}
@media (pointer: coarse) and (hover: none) {
	.window-modal .btn {
		width: 100%;
		margin-inline: auto;
		padding-inline: 20px;
	}
	header.active .burger-menu {
		box-shadow: none;
	}
	.split-text span {
		display: contents;
		b {
			position: static;
		}
		+ span {
			display: none;
		}
	}
}
@media (hover: hover) and (min-width: 768px) {
	* {
		&::-webkit-scrollbar {
			height: 8px;
			width: 8px;
			border-radius: 16px;
		}
		&::-webkit-scrollbar-track {
			background: var(--btn-color);
		}
		&::-webkit-scrollbar-thumb {
			border-radius: 2px;
			border: 2px solid var(--btn-color);
			background-color: var(--scrollbar-thumb);
		}
	}
	html:has(.window-modal.open) {
		padding-right: 8px;
	}
	.btn:hover {
		--shadow-color: var(--shadow-hover);
		margin-inline: calc(0px - var(--pd-h));
		padding-inline: calc(var(--pd-i) + var(--pd-h));
		outline: 1px solid var(--bg-1);
	}
	:is(.btn, .btn-white):has(b + b):hover b {
		&:has(+ b) {
			transform: translateY(0);
		}
		+ b {
			transform: translateY(var(--t));
		}
	}
	:is(button, a):has(.arrow):hover .arrow {
		&::before {
			transform: translate(calc(-50% - var(--arr-move)), -50%);
		}
		&::after {
			transform: translate(calc(-50% + var(--arr-move)), -50%);
		}
	}
	.arrows:hover {
		padding-left: var(--t);
		margin-right: calc(0px - var(--t));
	}
	.btn-image:hover {
		box-shadow: 0 11px 24px rgba(0, 0, 0, 0.1), 0 22px 30px rgba(0, 0, 0, 0.09);
		&::before {
			opacity: 1;
		}
		img:first-child {
			transform: translateY(0);
			+ img {
				transform: translateY(100%);
			}
		}
		&[href*='t.me'] img:first-child {
			transform: scale(1.15) translateY(0);
			+ img {
				transform: scale(1.15) translateY(100%);
			}
		}
	}
	.split-text:hover span {
		&:first-child b {
			transform: translateY(0);
		}
		&:last-child b {
			transform: translateY(calc(0px - var(--t)));
		}
	}
	header {
		.menu > .ws-menu > .item:hover {
			&::before {
				transform: translateX(-50%) scaleX(1);
			}
			> .sub-menu > .item {
				&:first-child p {
					transform: translateY(0);
				}
				&:last-child p {
					transform: translateY(calc(0px - var(--t)));
				}
			}
		}
		.burger-menu {
			.ws-menu > .item {
				> a:hover,
				&:has(> img:hover)::after {
					color: transparent;
				}
				&.open {
					> a:hover,
					&:has(> img:hover)::after {
						color: var(--textColor);
					}
				}
				> .sub-menu a:hover {
					padding-left: 8px;
					margin-right: -8px;
				}
			}
		}
		.buttons button.btn:hover {
			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
		}
	}
	footer {
		.left .info a:hover {
			color: var(--textColor2);
		}
		.right .menu a:hover {
			padding-left: var(--t);
			margin-right: calc(0px - var(--t));
		}
	}
	.agree p a:hover {
		color: inherit;
	}
	.tel-code .tel-code-list label:hover b,
	.window-modal .close:hover {
		color: transparent;
	}
	label:has(.check):hover {
		&::before {
			opacity: 1;
		}
		b {
			color: transparent;
		}
	}
	.select .list label:hover {
		color: var(--textColor2);
	}
}