@charset "utf-8";
:root {
		font-size: 2.083333vw;
		--font: "Nunito Sans", -apple-system, system-ui, "sans-serif";
		--black: #000;
		--white: #fff;
		--dark: #131313;
		--dark2: #16111C;
		--grey: #C1C1CA;
		--grad: linear-gradient(94.56deg, #5034FF 14.26%, #AE0CF9 88.52%);
		--grad2: linear-gradient(94.56deg, #2300FD 14.26%, #CC00FF 88.52%);
		--border: #53485F;
		--block-bg: #13131380;
		--width: 1208px;
		--side-padding: clamp(16px, 1.5rem, 24px);
		--header: clamp(64px, 5.625rem, 90px);
}
@media only screen and (min-width: 1256px) {
		:root {
				--side-padding: calc((100vw - 1208px) / 2);
		}
}
html, body {
		height: 100%;
		box-sizing: border-box;
		text-rendering: optimizeLegibility !important;
		-webkit-font-smoothing: antialiased;
		font-optical-sizing: auto;
		scroll-behavior: smooth;
}
body {
		margin: 0;
		padding: 0;
		background: var(--dark);
		font: normal 16px/1.3 var(--font);
		color: var(--grey);
		-webkit-text-size-adjust: none;
		display: flex;
		flex-direction: column;
}
*, *:before, *:after {
		box-sizing: border-box;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
form, fieldset {
		margin: 0;
		padding: 0;
		border: 0;
}
video {
		-webkit-mask-image: -webkit-radial-gradient(white, black);
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
}
header, nav, section, article, aside, footer, menu, time, figure, figcaption, main {
		display: block;
}
img, svg, picture {
		border: 0;
		outline: none;
		vertical-align: top;
}
a {
		color: var(--white);
		text-decoration: underline;
		outline: none;
		cursor: pointer;
}
a:hover {
		text-decoration: none;
}
a[href^=tel] {
		color: inherit !important;
		text-decoration: none !important;
}
.h1, .h2 {
		color: var(--white);
		text-transform: uppercase;
		line-height: 1.2;
		font-weight: 900;
		margin: 0 0 24px 0;
}
.h1 {
		font-size: 80px;
}
.h2 {
		font-size: 64px;
}
@media only screen and (max-width: 760px) {
		.h1, .h2 {
				margin-bottom: 12px;
		}
		.h1 {
				font-size: 40px;
		}
		.h2 {
				font-size: 32px;
		}
}
.btn {
		-webkit-appearance: none;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		text-decoration: none;
		outline: none;
		box-shadow: none;
		position: relative;
		font-weight: bold;
		line-height: 1.2;
		font-size: clamp(18px, 1.5rem, 20px);
		text-transform: none;
		height: clamp(50px, 3.75rem, 60px);
		border-radius: 100px;
		backface-visibility: hidden;
		transform: translateZ(0);
		overflow: hidden;
		color: var(--white);
		gap: 12px;
		cursor: pointer;
		user-select: none;
		border: 0;
		background: none;
		padding: 0 24px;
}
.btn:disabled, .btn.disabled {
		pointer-events: none;
		opacity: 0.5;
}
.btn > * {
		flex: 0 0 auto;
		position: relative;
}
.btn > *:has(svg) {
		line-height: 0;
}
.btn svg {
		flex: 0 0 auto;
		fill: currentColor;
}
.btn-primary:before {
		content: '';
		position: absolute;
		width: 100%;
		aspect-ratio: 1/1;
		background: var(--grad);
		backface-visibility: hidden;
		transform: rotate(0deg);
		transition: transform 0.4s ease;
}
.btn-primary:active:before {
		background: var(--grad2);
}
@media (pointer:fine) {
		.btn-primary:hover:before {
				transform: rotate(180deg);
		}
}
.btn-secondary:before {
		content: '';
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border: 1px solid transparent;
		background: var(--grad) border-box;
		-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
		mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: destination-out;
		mask-composite: exclude;
		border-radius: inherit;
}
.btn-secondary > *:not(svg) {
		background: var(--grad);
		-webkit-background-clip: text;
		background-clip: text;
		color: var(--white);
}
@media (pointer:fine) {
		.btn-secondary:hover > *:not(svg) {
				color: transparent;
		}
		.btn-secondary:hover svg {
				fill: url(#grad);
		}
}
.btn-secondary:active > *:not(svg) {
		color: currentColor;
}
.btn-secondary:active > svg {
		fill: currentColor;
}
.mainwrap {
		flex: 0 0 auto;
		width: 100%;
		min-height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
}
.content {
		flex: 1 0 auto;
}
.header, .footer {
		flex: 0 0 auto;
}
.footer {
		position: relative;
}
.header {
		padding: 0 var(--side-padding);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--header);
}
.header:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
		background: var(--block-bg);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-bottom: 1px solid var(--border);
		opacity: 0;
		transition: opacity 0.4s ease;
}
html.scrolled .header:before {
		opacity: 1;
}
.header > * {
		position: relative;
}
.header .logo img {
		height: 60px;
		width: auto;
}
.menu ul, .menu li {
		list-style: none;
		margin: 0;
		padding: 0;
}
.menu ul {
		display: flex;
		align-items: center;
		gap: 40px clamp(24px, 1.5rem, 40px);
		font-weight: bold;
		font-size: 16px;
		text-transform: uppercase;
}
.menu a {
		background: var(--grad);
		text-decoration: none;
		color: var(--white);
		backface-visibility: hidden;
		transition: color 0.4s ease;
		-webkit-background-clip: text;
		background-clip: text;
}
@media (pointer:fine) {
		.menu a:hover {
				color: transparent;
		}
}
.toggle-menu {
		display: none;
}
@media only screen and (max-width: 760px) {
		.header > *:not(.menu) {
				position: relative;
				z-index: 2;
		}
		.toggle-menu {
				width: 40px;
				height: 40px;
				padding: 0;
				border-radius: 50%;
				display: flex;
				cursor: pointer;
				user-select: none;
				position: relative;
		}
		.toggle-menu:before {
				content: '';
				pointer-events: none;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				border: 1px solid transparent;
				background: var(--grad) border-box;
				-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
				mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
				-webkit-mask-composite: destination-out;
				mask-composite: exclude;
				border-radius: inherit;
		}
		.toggle-menu > * {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 16px;
				height: 1.5px;
				border-radius: 1px;
				background: var(--grad);
				transition-property: transform, opacity;
				transition-duration: 0.4s;
				transition-timing-function: ease;
		}
		.toggle-menu > *:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				border-radius: inherit;
				background: var(--white);
		}
		@media (pointer:fine) {
				.toggle-menu:hover > *:before {
						opacity: 0;
				}
		}
		.toggle-menu:active > *:before {
				opacity: 1;
		}
		.toggle-menu > *:nth-child(1) {
				transform: translate3d(-50%, -50%, 0);
		}
		.toggle-menu > *:nth-child(2) {
				transform: translate3d(-50%, calc(-50% - 5px), 0);
		}
		.toggle-menu > *:nth-child(3) {
				transform: translate3d(-50%, calc(-50% + 5px), 0);
		}
		html.open-menu {
				overflow: hidden;
		}
		.open-menu .toggle-menu > *:nth-child(1) {
				opacity: 0;
		}
		.open-menu .toggle-menu > *:nth-child(2) {
				transform: translate3d(-50%, -50%, 0) rotate(-135deg);
		}
		.open-menu .toggle-menu > *:nth-child(3) {
				transform: translate3d(-50%, -50%, 0) rotate(135deg);
		}
		.menu {
				position: fixed;
				z-index: 1;
				top: 0;
				left: 100%;
				width: 100%;
				height: 100%;
				background: var(--dark);
				backface-visibility: hidden;
				transform: translate3d(0, 0, 0);
				transition: transform 0.4s ease;
		}
		.open-menu .menu {
				transform: translate3d(-100%, 0, 0);
		}
		.menu ul {
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 100%;
		}
}
.hero {
		padding: calc(var(--header) + 47px) var(--side-padding) var(--header) var(--side-padding);
		display: flex;
		align-items: center;
		min-height: 100vh;
		min-height: 100svh;
		position: relative;
}
.hero > * {
		position: relative;
}
.hero .h1 {
		max-width: 8.725em;
}
.hero .text {
		max-width: 43.625em;
}
.hero .image img {
		width: 100%;
		height: auto;
}
.hero .wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		container-type: inline-size;
		container-name: hero-wrap;
}
.hero .btn {
		min-width: 250px;
		margin-top: clamp(32px, 2.5rem, 40px);
}
@media only screen and (orientation: portrait) {
		.hero {
				flex-direction: column;
				justify-content: space-around;
				gap: clamp(16px, 1.5rem, 24px);
		}
		.hero > * {
				width: 100%;
				flex: 0 0 auto;
		}
		.hero .image {
				padding: 0 clamp(16px, 1.5rem, 24px);
		}
}
@media only screen and (orientation: landscape) {
		.hero {
				flex-direction: row-reverse;
				align-items: center;
				gap: clamp(16px, 1.5rem, 24px);
		}
		.hero .image {
				flex: 0 0 auto;
				width: 27.23%;
				/*min-width: 211px;*/
				max-width: 329px;
				margin: 0 auto;
		}
		.hero .wrap {
				flex: 1;
		}
		@container hero-wrap (max-width: 640px) {
				.hero .h1 {
						font-size: clamp(40px, 4rem, 80px);
				}
		}
}
.section {
		padding: clamp(64px, 6.25rem, 100px) var(--side-padding) 0 var(--side-padding);
		position: relative;
}
.section-head {
		margin: 0 0 clamp(24px, 3rem, 48px) 0;
}
.section > * {
		position: relative;
}
.section-bg {
		position: absolute !important;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		backface-visibility: hidden;
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 95%);
}
.section-bg.to-top {
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 95%);
}
.section-bg.to-bottom {
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 95%);
}
.section-bg img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
}
.section-bg.to-left img {
		object-position: 0 50%;
}
.title-mini {
		display: inline-block;
		vertical-align: top;
		background: var(--grad);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		font-weight: bold;
		font-size: 16px;
		text-transform: uppercase;
		margin: 0 0 clamp(8px, 1rem, 16px);
}
.grid-cards, .grid-cards .el {
		list-style: none;
		margin: 0;
		padding: 0;
}
.grid-cards {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: clamp(8px, 0.5rem, 16px);
}
@media only screen and (max-width: 669px) {
		.grid-cards .soon {
				display: none !important;
		}
}
@media only screen and (min-width: 670px) and (max-width: 1023px) {
		.grid-cards {
				grid-template-columns: repeat(2, 1fr);
		}
		.grid-cards .soon:nth-last-child(1) {
				display: none;
		}
		.grid-cards .soon:nth-last-child(2):nth-child(odd) {
				display: none;
		}
}
@media only screen and (min-width: 1024px) {
		.grid-cards {
				grid-template-columns: repeat(3, 1fr);
		}
		.grid-cards .soon:nth-last-child(2):not(:nth-child(3n - 1)):not(:nth-child(3n)) {
				display: none;
		}
		.grid-cards .soon:nth-last-child(1):not(:nth-child(3n)) {
				display: none;
		}
}
.grid-cards .el {
		border: 1px solid var(--border);
		background-color: var(--block-bg);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		backface-visibility: hidden;
		position: relative;
		border-radius: clamp(16px, 1.5rem, 24px);
		padding: clamp(16px, 1.5rem, 24px);
		gap: clamp(16px, 1.5rem, 24px);
		display: flex;
		flex-direction: column;
		--color: var(--white);
}
.grid-cards .el.bg-purple {
		background-image: linear-gradient(164.25deg, rgba(143, 25, 251, 0.3) 0%, rgba(143, 25, 251, 0) 53.4%);
}
.grid-cards .el.bg-blue {
		background-image: linear-gradient(164.25deg, rgba(80, 52, 255, 0.3) 0%, rgba(80, 52, 255, 0) 53.4%);
}
.grid-cards .el.bg-pink {
		background-image: linear-gradient(164.25deg, rgba(251, 25, 188, 0.3) 0%, rgba(251, 25, 188, 0) 53.4%);
}
.grid-cards .el > * {
		flex: 0 0 auto;
		width: 100%;
}
.grid-cards .image {
		background: var(--dark2);
		border: 1px solid var(--border);
		backface-visibility: hidden;
		overflow: hidden;
		transform: translateZ(0);
		border-radius: 4px;
		position: relative;
}
.grid-cards .image img {
		width: 100%;
		height: 100%;
}
.grid-cards .image.screen {
		aspect-ratio: 272/166;
}
.grid-cards .image.screen img {
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		object-position: 50% 0;
}
.grid-cards .image.logo {
		height: 120px;
		padding: 0 clamp(16px, 1.5rem, 24px);
}
.grid-cards .image.logo img {
		object-fit: scale-down;
}
.grid-cards .logo-link {
		position: relative;
		padding-right: 24px;
		height: clamp(24px, 1.875rem, 30px);
		display: flex;
		align-items: center;
		line-height: 0;
}
.grid-cards .logo-link img {
		flex: 0 0 auto;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
}
.grid-cards .logo-link svg {
		position: absolute;
		top: 50%;
		right: 0;
		width: 16px;
		height: 16px;
		fill: var(--white);
		transform: translate3d(0, -50%, 0);
}
.grid-cards .info1, .grid-cards .info1 li {
		list-style: none;
		margin: 0;
		padding: 0;
}
.grid-cards .info1 {
		color: var(--white);
		display: flex;
		flex-direction: column;
		gap: 12px;
}
.grid-cards .info1 li {
		padding: 12px 0 0 0;
		border-top: 1px solid var(--border);
}
.grid-cards .info1 .big {
		position: relative;
		padding: 0 0 0 20px;
		font: inherit;
		font-weight: bold;
		text-transform: uppercase;
		color: var(--color);
		margin: 0 0 4px 0;
}
.grid-cards .info1 .big svg {
		width: 16px;
		height: 16px;
		position: absolute;
		top: 0.65em;
		left: 0;
		transform: translate3d(0, -50%, 0);
		fill: currentColor;
}
.grid-cards .info2, .grid-cards .info2 li {
		list-style: none;
		margin: 0;
		padding: 0;
}
.grid-cards .info2 {
		font-weight: bold;
		text-transform: uppercase;
		display: flex;
		flex-direction: column;
		gap: 4px;
		color: var(--white);
		margin-bottom: calc(clamp(16px, 1.5rem, 24px) * -1 + 8px);
}
.grid-cards .info2 li {
		position: relative;
		padding-left: 20px;
}
.grid-cards .info2 svg {
		width: 16px;
		height: 16px;
		position: absolute;
		top: 0.65em;
		left: 0;
		transform: translate3d(0, -50%, 0);
		fill: currentColor;
}
.grid-cards .btn {
		font-size: 18px;
		height: 48px;
}
.grid-cards .text {
		flex: 1 1 auto;
}
.grid-cards .soon {
		text-align: center;
		gap: 8px;
		border-style: dashed;
		justify-content: center;
		text-wrap: balance;
}
.grid-cards .soon .big {
		font-weight: bold;
		color: var(--white);
		text-transform: uppercase;
}
.grid-cards .soon .big:before {
		content: '';
		display: block;
		background: url("../img/clock.svg") no-repeat 50% 50%;
		background-size: contain;
		width: 40px;
		height: 41px;
		margin: 0 auto clamp(16px, 1.5rem, 24px) auto;
}
.geo, .geo li {
		list-style: none;
		margin: 0;
		padding: 0;
}
.geo {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(4px, 0.5rem, 8px);
		container-type: inline-size;
		container-name: geo;
		position: relative;
}
.geo:before {
		content: '';
		display: block;
		background: url("../img/map.svg") no-repeat 50% 50%;
		background-size: contain;
		aspect-ratio: 1208/610;
		flex: 0 0 auto;
		width: 100%;
		margin-bottom: 4px;
}
.geo li {
		padding: 3px calc(clamp(8px, 0.75rem, 12px) - 1px);
		background: var(--dark2);
		border: 1px solid var(--border);
		white-space: nowrap;
		text-transform: uppercase;
		font-weight: bold;
		color: var(--white);
		border-radius: 4px;
		font-size: clamp(10px, 1rem, 16px);
		flex: 0 0 auto;
}
@container geo (min-width: 976px) {
		.geo:before {
				margin-bottom: 0;
		}
		.geo li {
				position: absolute;
				transform: translate3d(0, -50%, 0);
		}
		.geo .pos1 {
				top: 3.2787%;
				right: 50.4966%;
		}
		.geo .pos2 {
				top: 4.918%;
				left: 54.718%;
		}
		.geo .pos3 {
				top: 9.18%;
				right: 54.718%;
		}
		.geo .pos4 {
				top: 12.459%;
				left: 58.195%;
		}
		.geo .pos5 {
				top: 15.245%;
				right: 61.754%;
		}
		.geo .pos6 {
				top: 19.016%;
				left: 59.85%;
		}
		.geo .pos7 {
				top: 20.819%;
				right: 60.182%;
		}
		.geo .pos8 {
				top: 29.18%;
				left: 23.178%;
		}
		.geo .pos9 {
				top: 27.377%;
				right: 56.456%;
		}
		.geo .pos10 {
				top: 25.573%;
				left: 61.5%;
		}
		.geo .pos11 {
				top: 34.098%;
				right: 48.344%;
		}
		.geo .pos12 {
				top: 32%;
				left: 53.725%;
		}
		.geo .pos13 {
				top: 40.655%;
				right: 53.973%;
		}
		.geo .pos14 {
				top: 40.655%;
				left: 52.069%;
		}
		.geo .pos15 {
				top: 53.77%;
				left: 28.973%;
		}
		.geo .pos16 {
				top: 66.885%;
				right: 83.692%;
		}
		.geo .pos17 {
				top: 68.688%;
				right: 17.632%;
		}
		.geo .pos18 {
				top: 83.278%;
				right: 80.877%;
		}
		.geo .pos19 {
				top: 96.885%;
				right: 2.069%;
		}
}
.contacts, .contacts .el {
		list-style: none;
		margin: 0;
		padding: 0;
}
.contacts {
		display: grid;
		gap: clamp(8px, 0.5rem, 16px);
		container-type: inline-size;
		container-name: contacts;
		grid-template-columns: repeat(1, 1fr);
}
@media only screen and (min-width: 1024px) {
		.contacts {
				grid-template-columns: repeat(3, 1fr);
		}
}
.contacts .el {
		border: 1px solid var(--border);
		background-color: var(--block-bg);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		backface-visibility: hidden;
		position: relative;
		border-radius: clamp(16px, 1.5rem, 24px);
		padding: clamp(16px, 1.5rem, 24px);
}
@container contacts (min-width: 1200px) {
		.contacts .el {
				padding: clamp(16px, 2rem, 32px);
		}
}
.contacts .el.bg-purple {
		background-image: linear-gradient(164.25deg, rgba(143, 25, 251, 0.3) 0%, rgba(143, 25, 251, 0) 53.4%);
}
.contacts .el.bg-blue {
		background-image: linear-gradient(164.25deg, rgba(80, 52, 255, 0.3) 0%, rgba(80, 52, 255, 0) 53.4%);
}
.contacts .el.bg-pink {
		background-image: linear-gradient(164.25deg, rgba(251, 25, 188, 0.3) 0%, rgba(251, 25, 188, 0) 53.4%);
}
.contacts .big {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 800;
		font-size: clamp(20px, 1.75rem, 28px);
		line-height: 1.2;
		text-transform: uppercase;
		gap: 12px;
		color: var(--white);
		margin: 0 0 clamp(12px, 1.25rem, 20px);
}
.contacts .big svg {
		flex: 0 0 auto;
		width: clamp(20px, 1.5rem, 24px);
		height: clamp(20px, 1.5rem, 24px);
		fill: currentColor;
}
.contacts .btn {
		font-size: 16px;
		height: 40px;
		justify-content: space-between;
		padding: 0 16px;
		font-weight: normal;
}
.contacts .btn-secondary:after {
		content: '';
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border: 1px solid var(--border);
		border-radius: inherit;
}
@media (pointer:fine) {
		.contacts .btn-secondary:hover:after {
				opacity: 0;
		}
}
.footer-section {
		margin-top: clamp(64px, 6.25rem, 100px);
		backface-visibility: hidden;
		background: var(--block-bg);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-top: 1px solid var(--border);
		padding: clamp(20px, 1.875rem, 30px) var(--side-padding);
		display: flex;
		align-items: center;
		gap: 20px 40px;
}
.footer-section a {
		text-decoration: none;
}
@media (pointer:fine) {
		.footer-section a:hover {
				text-decoration: underline;
		}
}
.footer-section ul, .footer-section li {
		list-style: none;
		margin: 0;
		padding: 0;
}
.footer-section .links {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12px 40px;
}
.footer-section .logo img {
		height: 60px;
		width: auto;
}
@media only screen and (min-width: 768px) {
		.footer-section .links {
				order: 1;
				flex: 1;
		}
		.footer-section .logo {
				order: 2;
				flex: 0 0 auto;
		}
		.footer-section .text {
				order: 3;
				flex: 1;
				text-align: right;
		}
}
@media only screen and (max-width: 767px) {
		.footer-section {
				text-align: center;
				flex-direction: column;
		}
		.footer-section .links {
				flex-direction: column;
				align-items: center;
		}
}