@charset "utf-8";
@font-face {
		font-family: 'Spartan';
		src: url('../fonts/spartan-bold.woff') format('woff'), url('../fonts/spartan-bold.ttf') format('truetype');
		font-weight: bold;
		font-style: normal;
		font-display: swap;
}
@font-face {
		font-family: 'Spartan';
		src: url('../fonts/spartan-medium.woff') format('woff'), url('../fonts/spartan-medium.ttf') format('truetype');
		font-weight: 500;
		font-style: normal;
		font-display: swap;
}
/*
@font-face {
		font-family: 'Spartan';
		src: url('../fonts/spartan-regular.woff') format('woff'), url('../fonts/spartan-regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
}
*/
@font-face {
		font-family: 'Spartan';
		src: url('../fonts/spartan-semibold.woff') format('woff'), url('../fonts/spartan-semibold.ttf') format('truetype');
		font-weight: 600;
		font-style: normal;
		font-display: swap;
}
:root {
		--font: "Spartan", -apple-system, system-ui, "sans-serif";
		--white: #fff;
		--white0: rgba(255, 255, 255, 0);
		--black: #000;
		--black0: rgba(0, 0, 0, 0);
		--dark: #00273C;
		--blue: #4DACE1;
		--header: 86px;
		--side: 20px;
		font-size: min(1.111111vw, 16px);
		--percent: 0;
		--percent0: 0;
		--percent1: 0;
		--percent2: 0;
		--percent3: 0;
		--percent4: 0;
		--percent5: 0;
		--percent6: 0;
		--percent7: 0;
		--percent8: 0;
		--percent9: 0;
		--percent10: 0;
		--percent11: 0;
		--percent12: 0;
		--percent13: 0;
		--percent14: 0;
		--percent15: 0;
		--percentm1: 0;
		--percentm2: 0;
		--percentm3: 0;
		--height: 0;
		--delay: 0.1s;
		--delay2: 0s;
}
@media only screen and (min-width: 1024px) {
		:root {
				--header: 94px;
				--side: 40px;
		}
}
@media only screen and (min-width: 1280px) {
		:root {
				--side: max(60px, calc((100vw - 1320px) / 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(--black);
		font: normal 16px/1.4 var(--font);
		color: var(--white);
		-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;
}
input, select, textarea, button {
		font: normal 15px/24px Arial, Helvetica, sans-serif;
		color: #5a5a5a;
		outline: none;
		text-align: left;
}
input[type="text"], input[type="password"], input[type="email"], input[type="color"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], textarea, select {
		-webkit-appearance: none;
		border-radius: 0;
		box-shadow: none;
		border: 1px solid #e0e0e0;
		background: #fff;
		margin: 0;
		padding: 12px 25px 13px 25px;
		width: 100%;
		display: block;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
		opacity: 1;
		color: #9c9c9c;
}
input::-moz-placeholder, textarea::-moz-placeholder {
		opacity: 1;
		color: #9c9c9c;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
		opacity: 1;
		color: #9c9c9c;
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
		opacity: 0.5 !important;
}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
		opacity: 0.5 !important;
}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
		opacity: 0.5 !important;
}
input::-ms-clear {
		display: none;
}
button::-moz-focus-inner {
		border: 0;
}
textarea {
		resize: none;
}
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;
}
svg {
		fill: currentColor;
}
a {
		color: #009;
		text-decoration: underline;
		outline: none;
		cursor: pointer;
}
a:hover {
		text-decoration: none;
}
a[href^=tel] {
		color: inherit !important;
		cursor: inherit;
		text-decoration: none !important;
}
strong {
		font-weight: bold;
}
.btn {
		-webkit-appearance: none;
		appearance: none;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		user-select: none;
		outline: none;
		border: 0;
		font: bold 14px/1 var(--font);
		color: var(--white);
		background: var(--blue);
		border-radius: calc(infinity * 1px);
		padding: 0 25px;
		height: 44px;
}
.btn:hover {
    cursor: not-allowed;
}

.js_split:not(.ready) {
		opacity: 0 !important;
		pointer-events: none;
}
.js_split:has([data-row="1"]) + .js_split {
		--delay2: calc(1 * var(--delay));
}
.js_split:has([data-row="2"]) + .js_split {
		--delay2: calc(2 * var(--delay));
}
.js_split:has([data-row="3"]) + .js_split {
		--delay2: calc(3 * var(--delay));
}
.js_split:has([data-row="4"]) + .js_split {
		--delay2: calc(4 * var(--delay));
}
.js_split:has([data-row="5"]) + .js_split {
		--delay2: calc(5 * var(--delay));
}
.js_split:has([data-row="6"]) + .js_split {
		--delay2: calc(6 * var(--delay));
}
.js_split:has([data-row="7"]) + .js_split {
		--delay2: calc(7 * var(--delay));
}
.js_split:has([data-row="8"]) + .js_split {
		--delay2: calc(8 * var(--delay));
}
.js_split:has([data-row="9"]) + .js_split {
		--delay2: calc(9 * var(--delay));
}
.js_split:has([data-row="10"]) + .js_split {
		--delay2: calc(10 * var(--delay));
}
.js_split:has([data-row="11"]) + .js_split {
		--delay2: calc(11 * var(--delay));
}
.js_split:has([data-row="12"]) + .js_split {
		--delay2: calc(12 * var(--delay));
}
.js_split:has([data-row="13"]) + .js_split {
		--delay2: calc(13 * var(--delay));
}
.js_split:has([data-row="14"]) + .js_split {
		--delay2: calc(14 * var(--delay));
}
.js_split:has([data-row="15"]) + .js_split {
		--delay2: calc(15 * var(--delay));
}
.js_split:has([data-row="16"]) + .js_split {
		--delay2: calc(16 * var(--delay));
}
.js_split:has([data-row="17"]) + .js_split {
		--delay2: calc(17 * var(--delay));
}
.js_split:has([data-row="18"]) + .js_split {
		--delay2: calc(18 * var(--delay));
}
.js_split:has([data-row="19"]) + .js_split {
		--delay2: calc(19 * var(--delay));
}
.js_split:has([data-row="20"]) + .js_split {
		--delay2: calc(20 * var(--delay));
}
.js_split span {
		display: inline-block;
		vertical-align: top;
}
.js_split span span {
		backface-visibility: hidden;
		transition-property: transform, opacity;
		transition-duration: 0.8s, 0.4s;
		transition-timing-function: ease;
		transform: translate3d(0, 0, 0);
}
.js_split span[data-row="0"] span {
		transition-delay: calc(0 * var(--delay) + var(--delay2));
}
.js_split span[data-row="1"] span {
		transition-delay: calc(1 * var(--delay) + var(--delay2));
}
.js_split span[data-row="2"] span {
		transition-delay: calc(2 * var(--delay) + var(--delay2));
}
.js_split span[data-row="3"] span {
		transition-delay: calc(3 * var(--delay) + var(--delay2));
}
.js_split span[data-row="4"] span {
		transition-delay: calc(4 * var(--delay) + var(--delay2));
}
.js_split span[data-row="5"] span {
		transition-delay: calc(5 * var(--delay) + var(--delay2));
}
.js_split span[data-row="6"] span {
		transition-delay: calc(6 * var(--delay) + var(--delay2));
}
.js_split span[data-row="7"] span {
		transition-delay: calc(7 * var(--delay) + var(--delay2));
}
.js_split span[data-row="8"] span {
		transition-delay: calc(8 * var(--delay) + var(--delay2));
}
.js_split span[data-row="9"] span {
		transition-delay: calc(9 * var(--delay) + var(--delay2));
}
.js_split span[data-row="10"] span {
		transition-delay: calc(10 * var(--delay) + var(--delay2));
}
.js_split span[data-row="11"] span {
		transition-delay: calc(11 * var(--delay) + var(--delay2));
}
.js_split span[data-row="12"] span {
		transition-delay: calc(12 * var(--delay) + var(--delay2));
}
.js_split span[data-row="13"] span {
		transition-delay: calc(13 * var(--delay) + var(--delay2));
}
.js_split span[data-row="14"] span {
		transition-delay: calc(14 * var(--delay) + var(--delay2));
}
.js_split span[data-row="15"] span {
		transition-delay: calc(15 * var(--delay) + var(--delay2));
}
.js_split span[data-row="16"] span {
		transition-delay: calc(16 * var(--delay) + var(--delay2));
}
.js_split span[data-row="17"] span {
		transition-delay: calc(17 * var(--delay) + var(--delay2));
}
.js_split span[data-row="18"] span {
		transition-delay: calc(18 * var(--delay) + var(--delay2));
}
.js_split span[data-row="19"] span {
		transition-delay: calc(19 * var(--delay) + var(--delay2));
}
.js_split span[data-row="20"] span {
		transition-delay: calc(20 * var(--delay) + var(--delay2));
}
.js_split span[data-row="21"] span {
		transition-delay: calc(21 * var(--delay) + var(--delay2));
}
.js_split.js_detect-scroll:not(.visible) span span, .js_detect-scroll:not(.visible) .js_split span span {
		opacity: 0;
		pointer-events: none;
		transform: translate3d(0, 20px, 0);
}
.about li:not(.ready-text) .js_split span span {
		opacity: 0;
		pointer-events: none;
		transform: translate3d(0, 20px, 0);
}
.mainwrap {
		flex: 0 0 auto;
		width: 100%;
		min-height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
}
.content {
		flex: 1 0 auto;
		width: 100%;
}
.header, .footer {
		flex: 0 0 auto;
		width: 100%;
}
.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		display: flex;
		align-items: center;
		height: var(--header);
		padding: 0 var(--side);
}
.header .bg {
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
}
.header .bg:before, .header .bg:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		backface-visibility: hidden;
		transition: opacity 0.4s ease;
}
.header .bg:before {
		background: linear-gradient(to bottom, var(--black) 0%, rgba(0, 0, 0, 0) 100%);
}
.header .bg:after {
		background: linear-gradient(to bottom, var(--white) 0%, rgba(255, 255, 255, 0) 100%);
		opacity: 0;
}
.header.white:not(.black) .bg:before {
		opacity: 0;
}
.header.white:not(.black) .bg:after {
		opacity: 1;
}
.header .logo {
		flex: 0 0 auto;
		position: relative;
}
.header .logo img {
		height: 36px;
		width: auto;
		display: block;
		transition: opacity 0.4s ease;
}
.header .logo img + img {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
}
.header.white:not(.black) .logo img:nth-child(1) {
		opacity: 0;
}
.header.white:not(.black) .logo img:nth-child(2) {
		opacity: 1;
}
.menu {
		font: 600 16px/1 var(--font);
		transition: color 0.4s ease;
		color: var(--white);
}
.header.white:not(.black) .menu {
		color: var(--black);
}
.menu ul, .menu li {
		list-style: none;
		margin: 0;
		padding: 0;
}
.menu a:not(.btn) {
		color: currentColor;
		transition: color 0.4s ease;
		text-decoration: none;
		cursor: pointer;
		user-select: none;
}
@media only screen and (max-width: 1023px) {
		.header .menu-trigger {
				cursor: pointer;
				user-select: none;
				width: 36px;
				height: 36px;
				border-radius: 50%;
				margin: 0 -6px 0 auto;
				flex: 0 0 auto;
				position: relative;
				transition: color 0.4s ease;
				color: var(--white);
		}
		.header.white:not(.black) .menu-trigger {
				color: var(--black);
		}
		.header .menu-trigger:before, .header .menu-trigger:after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				background: currentColor;
				width: 24px;
				height: 2px;
				border-radius: 1px;
				transition: transform 0.4s ease;
		}
		.header .menu-trigger:before {
				transform: translate3d(-50%, calc(-50% - 5px), 0);
		}
		.header .menu-trigger:after {
				transform: translate3d(-50%, calc(-50% + 5px), 0);
		}
		html.open-menu .header .menu-trigger:before {
				transform: translate3d(-50%, -50%, 0) rotate(-135deg);
		}
		html.open-menu .header .menu-trigger:after {
				transform: translate3d(-50%, -50%, 0) rotate(135deg);
		}
		.menu {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: var(--black);
				overflow: hidden;
				overflow-y: auto;
				padding: var(--header) var(--side) var(--side) var(--side);
				z-index: -1;
				font-size: 24px;
				display: flex;
				flex-direction: column;
				backface-visibility: hidden;
				transition-property: background, opacity, color;
				transition-duration: 0.4s;
				transition-timing-function: ease;
		}
		.header.white:not(.black) .menu {
				background-color: var(--white);
		}
		html.open-menu {
				overflow: hidden;
		}
		html:not(.open-menu) .menu {
				opacity: 0;
				pointer-events: none;
		}
		.menu ul {
				flex: 1 0 auto;
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 20px;
		}
		.menu li {
				order: 2;
		}
		.menu li:has(.btn) {
				order: 1;
				margin-bottom: 20px;
		}
}
@media only screen and (min-width: 1024px) {
		.header .menu-trigger {
				display: none;
		}
		.menu {
				flex: 1 0 auto;
				display: flex;
				align-items: center;
		}
		.menu ul {
				flex: 1 0 auto;
				display: flex;
				align-items: center;
				gap: 45px;
		}
		.menu ul:before {
				content: '';
				margin-right: auto;
		}
		.menu li:last-child {
				margin-left: auto;
		}
}
.hero {
		text-align: center;
		font-weight: 600;
		font-size: clamp(14.53px, 1.5rem, 24px);
		line-height: 0.95;
}
.hero .space {
		height: 100vh;
		height: 100svh;
}
.hero .wrap {
		position: sticky;
		top: 0;
		overflow: hidden;
		padding: calc(var(--header) + clamp(46.6px, 4.375rem, 70px)) var(--side) 0 var(--side);
		display: flex;
		flex-direction: column;
		height: 100vh;
		height: 100svh;
		box-shadow: 0 100px 0 var(--black);
}
.hero .wrap:after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100vh;
		height: 100svh;
		left: 50%;
		bottom: -1px;
		transform-origin: 50% 100%;
		transform: translate3d(-50%, 0, 0) scale(1, calc(1 * var(--percent)));
		background: url("../img/change-color.webp") no-repeat 50% 100%/100% 100%;
		z-index: 10;
		pointer-events: none;
}
html:not(.ready) .hero .wrap:after {
		opacity: 0;
}
@media only screen and (orientation: portrait) {
		.hero .wrap:after {
				height: 50vh;
				height: 50svh;
		}
}
.hero .title {
		font-weight: bold;
		line-height: 1.05;
		font-size: clamp(50px, 5.75rem, 92px);
		text-transform: uppercase;
		margin: clamp(21px, 2.1875rem, 35px) auto clamp(19px, 2rem, 32px) auto;
		max-width: 8em;
}
.hero ul, .hero li {
		list-style: none;
		margin: 0;
		padding: 0;
}
.hero ul {
		display: inline-flex;
		vertical-align: top;
		text-align: left;
		font-weight: 600;
		opacity: 0.7;
		font-size: clamp(10px, 1.125rem, 18px);
}
.hero li {
		flex: 0 0 auto;
		position: relative;
}
.hero li:not(:first-child) {
		padding-left: 2.666em;
}
.hero li:not(:first-child):before {
		content: '·';
		width: 2.666em;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0.5;
}
.hero .image {
		position: relative;
		margin-top: auto;
		margin-bottom: auto;
		z-index: -1;
}
.hero .image video {
		width: 100%;
		min-width: 700px;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
}
.about {}
.about .screen {
		height: 100vh;
		height: 100svh;
		pointer-events: none;
}
.about .head {
		text-align: center;
		padding: clamp(60px, 7.8125rem, 125px) var(--side) clamp(40px, 5.125rem, 82px) var(--side);
		position: relative;
		z-index: 9;
}
.about .head .title {
		font-weight: bold;
		line-height: 1.05;
		font-size: clamp(44px, 4.5rem, 72px);
		text-transform: uppercase;
		margin: 0 auto clamp(10px, 1.25rem, 20px) auto;
}
@media only screen and (max-width: 1023px) {
		.about .head .title > * {
				display: inline;
		}
}
.about .head .text {
		font-weight: 500;
		font-size: 18px;
		line-height: 1.4;
		letter-spacing: -3%;
		margin: 0 auto;
		max-width: 41.555em;
}
.about .wrap {
		height: 100vh;
		height: 100svh;
		--vh: 100vh;
		--vh: 100svh;
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--header) 0 0 0;
}
.about .list, .about .list li {
		list-style: none;
		margin: 0;
		padding: 0;
}
.about .list {
		flex: 0 0 auto;
		position: relative;
}
.about .list li {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 30px;
		backface-visibility: hidden;
		display: flex;
		flex-direction: column;
		font-weight: 500;
		font-size: clamp(16px, 1.3125rem, 21px);
		line-height: 1.4;
		letter-spacing: -3%;
		color: var(--white);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50% 50%;
		background-color: var(--black);
		background: #070A16;
		border: 1px solid #172E54;
		overflow: hidden;
}
.about .list .text {
		flex: 0 0 auto;
		width: 100%;
}
.about .list .title {
		font-weight: bold;
		font-size: clamp(30px, 2.75rem, 44px);
		color: #83D9FB;
		line-height: 1.05;
		letter-spacing: normal;
		text-transform: uppercase;
		margin: 0 0 20px 0;
}
.about .list .title.small {
		font-size: clamp(25px, 2.25rem, 36px);
}
@media only screen and (max-width: 410px) {
		.about .list li {
				font-size: clamp(14px, 1.3125rem, 21px);
		}
		.about .list .title {
				font-size: clamp(24px, 2.75rem, 44px);
		}
		.about .list .title.small {
				font-size: clamp(20px, 2.25rem, 36px);
		}
}
.about .list li:nth-child(odd) .text {
		max-width: 19.096em;
}
.about .list li:nth-child(even) .text {
		max-width: 21.8em;
}
.about .image {
		aspect-ratio: 1/1;
		position: absolute;
		transform: translate3d(-50%, -50%, 0);
		--size: 16px;
		font-size: var(--size);
}
.about .image1 .circle {
		position: absolute;
		top: 50%;
		left: 50%;
		border: 1px solid #3F96D080;
		border-radius: 50%;
		aspect-ratio: 1/1;
		transform: translate3d(-50%, -50%, 0);
}
.about .image1 .circle.pos1 {
		height: 0.78em;
		z-index: 2;
}
.about .image1 .circle.pos2 {
		height: 1.3431em;
}
.about .image1 .circle.pos2:has(.icon) {
		border-color: transparent;
		z-index: 2;
}
.about .image1 .circle.pos3 {
		height: 2.4294em;
}
.about .image1 .line {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		--bg: #3F96D0;
}
.about .image1 .line.pos1 {
		transform: rotate(50deg);
}
.about .image1 .line.pos2 {
		transform: rotate(-120deg);
}
.about .image1 .line div {
		position: absolute;
		bottom: 100%;
		left: 50%;
		margin-left: -0.5px;
		width: 1px;
		background: #3F96D080;
		height: 1px;
		transform-origin: 50% 100%;
		transform: rotate(10deg);
		height: 0.285em;
}
.about .image1 .line div:before, .about .image1 .line div:after {
		content: '';
		position: absolute;
		left: 50%;
		width: 0.033333em;
		height: 0.033333em;
		margin: -0.016666em;
		border-radius: 50%;
		border: 1px solid #3F96D0;
		background: var(--bg);
}
.about .image1 .line div:before {
		top: 0;
		transform: scale(1);
}
.about .image1 .line div:after {
		bottom: 0;
}
.about .image1 .shield {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.551em;
		height: 0.551em;
		transform: translate3d(-50%, -43%, 0);
		z-index: 5;
}
.about .image1 .shield:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		background: url("../img/about/shield.png") no-repeat 50% 50%/contain;
		width: 100%;
		height: 0.6274em;
}
.about .image1 .shield:after {
		content: '';
		position: absolute;
		top: 45%;
		left: 50%;
		width: 0.1647em;
		height: 0.1647em;
		margin: -0.08235em;
		border-radius: 50%;
		background-color: #3F96D0;
		background-image: url("../img/about/shine.svg"), linear-gradient(180deg, #8DD7FF 0%, #51A9D9 47.85%, #0F77AF 100%);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 38.1% auto, contain;
		box-shadow: 0px 0.0125em 0.057em rgba(26, 156, 203, 0.25), inset 0px -0.005em 0.007em rgba(255, 255, 255, 0.45), inset 0px -0.014em 0.014em rgba(255, 255, 255, 0.45);
		transform: scale(0);
		opacity: 0;
		backface-visibility: hidden;
		transition: transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
		transition-property: transform, opacity;
		transition-duration: 0.4s, 0.1s;
		transition-timing-function: cubic-bezier(0.2, 1.5, 0.4, 1), ease;
}
.about li.ready .image1 .shield:after {
		transform: scale(1);
		opacity: 1;
		transition-delay: 1s;
}
.about .image1 .icon {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		transform: rotate(var(--angle));
		z-index: 2;
}
.about .image1 .icon > * {
		transform: rotate(calc(var(--angle) * -1));
}
.about .image1 .icon.pos1 {
		--angle: -70deg;
}
.about .image1 .icon.pos2 {
		--angle: 95deg;
}
.about .image1 .icon.pos3 {
		--angle: 145deg;
}
.about .image1 .icon.pos4 {
		--angle: 80deg;
}
.about .image1 .icon.pos5 {
		--angle: -54deg;
}
.about .image1 .icon.pos6 {
		--angle: 232deg;
}
.about .image1 .icon > * {
		position: absolute;
		top: 0;
		left: 50%;
}
.about .image1 .icon > *:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 50%;
		background-color: #070A16;
		background-image: url("../img/about/database.svg"), linear-gradient(180deg, rgba(63, 150, 208, 0.035) 0%, rgba(63, 150, 208, 0.35) 100%);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 35.29% auto, contain;
		box-shadow: 0px 0.07em 0.09em rgba(65, 89, 145, 0.18);
		border: 1px solid #3F96D0;
		transform: scale(0);
		transition: transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.about li.ready .image1 .icon > *:before {
		transform: scale(1);
}
.about li.ready .image1 .icon.pos1 > *:before {
		transition-delay: 1s;
}
.about li.ready .image1 .icon.pos2 > *:before {
		transition-delay: 1.1s;
}
.about li.ready .image1 .icon.pos3 > *:before {
		transition-delay: 1.2s;
}
.about li.ready .image1 .icon.pos4 > *:before {
		transition-delay: 1.3s;
}
.about li.ready .image1 .icon.pos5 > *:before {
		transition-delay: 1.4s;
}
.about li.ready .image1 .icon.pos6 > *:before {
		transition-delay: 1.5s;
}
.about .image1 .circle.pos1 .icon > * {
		width: 0.133333em;
		height: 0.133333em;
		margin: -0.066666em;
}
.about .image1 .circle.pos2 .icon > * {
		width: 0.106em;
		height: 0.106em;
		margin: -0.053em;
}
.about .image1 .circle.pos2 .icon > *:before {
		background-color: var(--black);
		border-color: #3F96D080;
		background-image: url("../img/about/database2.svg"), linear-gradient(180deg, rgba(63, 150, 208, 0.035) 0%, rgba(63, 150, 208, 0.35) 100%);
}
@-webkit-keyframes image1-rotate {
		from {
				transform: rotate(calc(0deg + var(--angle)));
		}
		to {
				transform: rotate(calc(360deg + var(--angle)));
		}
}
@keyframes image1-rotate {
		from {
				transform: rotate(calc(0deg + var(--angle)));
		}
		to {
				transform: rotate(calc(360deg + var(--angle)));
		}
}
@-webkit-keyframes image1-rotate-icon {
		from {
				transform: rotate(calc(0deg - var(--angle)));
		}
		to {
				transform: rotate(calc(-360deg - var(--angle)));
		}
}
@keyframes image1-rotate-icon {
		from {
				transform: rotate(calc(0deg - var(--angle)));
		}
		to {
				transform: rotate(calc(-360deg - var(--angle)));
		}
}
.about li.ready .image1 .icon {
		animation: image1-rotate 10s linear infinite;
		animation-delay: -2s;
}
.about li.ready .image1 .icon > * {
		animation: image1-rotate-icon 10s linear infinite;
		animation-delay: -2s;
}
.about .image2 svg {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 110%;
		height: auto;
		transform: translate3d(-45%, -50%, 0);
}
.about .image2 .stroke1, .about .image2 .stroke2, .about .image2 .stroke3 {
		stroke: #3F96D0;
		stroke-width: 2;
		stroke-dasharray: 350;
		stroke-dashoffset: 350;
		transition: stroke-dashoffset 2s ease;
}
.about li.ready .image2 .stroke1, .about li.ready .image2 .stroke2, .about li.ready .image2 .stroke3 {
		stroke-dashoffset: 0;
		transition-delay: 1s;
}
.about .image2 .dot {
		width: 0.039em;
		height: 0.039em;
		margin: -0.0195em;
		border-radius: 50%;
		position: absolute;
		z-index: 2;
		background: linear-gradient(180deg, rgba(63, 150, 208, 0.035) 0%, rgba(63, 150, 208, 0.35) 100%), #070A16;
		box-shadow: 0px 0.021em 0.027em rgba(65, 89, 145, 0.18);
		transform: translate3d(-50%, -50%, 0);
		border: 1px solid #3F96D0;
}
.about .image2 .dot:before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		border-radius: 50%;
		width: 26.65%;
		height: 26.65%;
		background: linear-gradient(180deg, #F4FBFF 0%, #F4FBFF00 100%), #78C7F1;
		transform: background 0.4s ease;
}
.about .image2 .dot.pos1 {
		top: 12.3%;
		left: 9.2%;
}
.about .image2 .dot.pos2 {
		top: 12.3%;
		left: 32.3%;
}
.about .image2 .dot.pos3 {
		width: 0.058em;
		height: 0.058em;
		top: 12.3%;
		left: 82.4%;
}
.about .image2 .dot.pos4 {
		top: 52.25%;
		left: 19.8%;
}
.about .image2 .dot.pos5 {
		top: 52.25%;
		left: 82.4%;
}
.about .image2 .dot.pos6 {
		top: 95.2%;
		left: 8.1%;
}
.about .image2 .dot.pos7 {
		width: 0.058em;
		height: 0.058em;
		top: 95.2%;
		left: 52.8%;
}
.about li.ready .image2 .dot.pos2:before {
		background-color: #4DE157;
		transition-delay: 1.6s;
}
.about li.ready .image2 .dot.pos4:before {
		background-color: #4DE157;
		transition-delay: 1.9s;
}
.about li.ready .image2 .dot.pos5:before {
		background-color: #4DE157;
		transition-delay: 2.9s;
}
.about li.ready .image2 .dot.pos6:before {
		background-color: #4DE157;
		transition-delay: 1.2s;
}
.about .image2 .line {
		position: absolute;
		transform: translate3d(-50%, -50%, 0) scale(0);
		backface-visibility: hidden;
		width: 0.137em;
		height: 0.059em;
		border-radius: 100px;
		background: linear-gradient(180deg, rgba(63, 150, 208, 0.035) 0%, rgba(63, 150, 208, 0.35) 100%), #070A16;
		box-shadow: 0px 0.075em 0.094em rgba(65, 89, 145, 0.18);
		z-index: 3;
		border: 1px solid #3F96D0;
}
.about .image2 .line:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 100px;
		background: #B8D6E6;
		margin: 0.024em 0.047em;
}
.about .image2 .line.pos1 {
		top: 27%;
		left: 80.4%;
}
.about .image2 .line.pos2 {
		top: 65%;
		left: 12%;
}
.about .image2 .line.pos3 {
		width: 0.192em;
		top: 78%;
		left: 51%;
}
.about .image2 .line {
		transform: translate3d(-50%, -50%, 0) scale(0);
		transition: transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.about li.ready .image2 .line {
		transform: translate3d(-50%, -50%, 0) scale(1);
}
.about li.ready .image2 .line.pos1 {
		transition-delay: 3.2s;
}
.about li.ready .image2 .line.pos2 {
		transition-delay: 3.3s;
}
.about li.ready .image2 .line.pos3 {
		transition-delay: 3.4s;
}
.about .image3 .front {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.4156em;
		height: 0.4156em;
		border-radius: 50%;
		transform: translate3d(-50%, -50%, 0);
		z-index: 2;
		box-shadow: 0px 0.106em 0.135em rgba(15, 82, 106, 0.38);
		background: linear-gradient(to bottom, #4DACE1 0%, #0072B1 100%);
}
.about .image3 .front:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 50%;
		background-image: url("../img/about/front.svg"), linear-gradient(180deg, #0072B1 0%, #4DACE1 100%);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 71.35% auto, contain;
		margin: 0.019em;
}
.about .image3 .icons {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		display: grid;
		gap: 0.019em;
		grid-template-columns: repeat(5, 0.176em);
		/*mask-image: radial-gradient(ellipse at center, #000 0.2078em, rgba(0, 0, 0, 0) 80%);*/
		overflow: hidden;
}
.about .image3 .icons:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: -1px;
		background: radial-gradient(ellipse at center, #070A1600 0.2078em, #070A16 70%);
}
.about .image3 .icons > * {
		aspect-ratio: 1/1;
		width: 100%;
		border-radius: 50%;
		background: linear-gradient(180deg, rgba(63, 150, 208, 0.0495) 0%, rgba(63, 150, 208, 0.3465) 100%);
		box-shadow: 0px 0.09em 0.123em rgba(15, 82, 106, 0.18);
		position: relative;
		backface-visibility: hidden;
		backface-visibility: hidden;
		transition: transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
		transform: scale(0);
		border: 1px solid #3F96D040;
}
.about li.ready .image3 .icons > * {
		transform: scale(1);
}
.about li.ready .image3 .icons > *:nth-child(8), .about li.ready .image3 .icons > *:nth-child(13) {
		transition-delay: 1s;
}
.about li.ready .image3 .icons > *:nth-child(7) {
		transition-delay: 1.2s;
}
.about li.ready .image3 .icons > *:nth-child(2), .about li.ready .image3 .icons > *:nth-child(3), .about li.ready .image3 .icons > *:nth-child(6), .about li.ready .image3 .icons > *:nth-child(9), .about li.ready .image3 .icons > *:nth-child(11), .about li.ready .image3 .icons > *:nth-child(12), .about li.ready .image3 .icons > *:nth-child(16), .about li.ready .image3 .icons > *:nth-child(17) {
		transition-delay: 1.3s;
}
.about li.ready .image3 .icons > *:nth-child(1), .about li.ready .image3 .icons > *:nth-child(4), .about li.ready .image3 .icons > *:nth-child(5), .about li.ready .image3 .icons > *:nth-child(10), .about li.ready .image3 .icons > *:nth-child(14) {
		transition-delay: 1.4s;
}
.about li.ready .image3 .icons > *:nth-child(15), .about li.ready .image3 .icons > *:nth-child(18), .about li.ready .image3 .icons > *:nth-child(19), .about li.ready .image3 .icons > *:nth-child(20) {
		transition-delay: 1.5s;
}
.about .image3 .icons > *:before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 66.666%;
		height: 66.666%;
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: contain;
		transform: translate3d(-50%, -50%, 0);
}
.about .image3 .icons > *:nth-child(1):before, .about .image3 .icons > *:nth-child(6):before, .about .image3 .icons > *:nth-child(16):before {
		background-image: url("../img/about/coin1.svg");
}
.about .image3 .icons > *:nth-child(2):before, .about .image3 .icons > *:nth-child(9):before, .about .image3 .icons > *:nth-child(13):before, .about .image3 .icons > *:nth-child(19):before {
		background-image: url("../img/about/coin6.svg");
}
.about .image3 .icons > *:nth-child(3):before, .about .image3 .icons > *:nth-child(10):before, .about .image3 .icons > *:nth-child(12):before, .about .image3 .icons > *:nth-child(20):before {
		background-image: url("../img/about/coin5.svg");
}
.about .image3 .icons > *:nth-child(4):before, .about .image3 .icons > *:nth-child(7):before, .about .image3 .icons > *:nth-child(14):before, .about .image3 .icons > *:nth-child(17):before {
		background-image: url("../img/about/coin4.svg");
}
.about .image3 .icons > *:nth-child(5):before {
		background-image: url("../img/about/coin3.svg");
}
.about .image3 .icons > *:nth-child(8):before, .about .image3 .icons > *:nth-child(15):before, .about .image3 .icons > *:nth-child(18):before {
		background-image: url("../img/about/coin7.svg");
}
.about .image3 .icons > *:nth-child(11):before {
		background-image: url("../img/about/coin2.svg");
}
.about .image4 {
		background: url("../img/about/image4-bg.svg") no-repeat 50% 50%/cover;
}
.about .image4 .front {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.478em;
		height: 0.478em;
		transform: translate3d(-50%, -50%, 0);
}
.about .image4 .gears {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: url("../img/about/gear.svg") no-repeat 50% 50%/contain;
}
.about .image4 .lines {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: url("../img/about/lines.svg") no-repeat 50% 50%/contain;
}
      .footertop {
            margin-top: 50px;
            margin-bottom: 30px;
        }
		@media (max-width: 768px) {
  .slide.lines.lines3 {
	margin-right: 80px;
  }
}


        .footer {
            /* background: linear-gradient(to bottom, #000000 0%, #070A16 100%); */
				    background:  #070A16;
		border: 1px solid #3F96D0;
            padding: 30px 20px 20px;
            border-radius: 20px;
            color: white;
            max-width: 1200px;
            margin: 0 auto;
            width: calc(100% - 20px); /* Add some margin on mobile */
   opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

footer.footer.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.AITECH{
	  @media (max-width: 768px) {
      display: none;
	  }
}

        .footer-content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            margin-bottom: 30px;
            align-items: start;
        }

        .footer-col {
            width: 100%;
        }

        /* Logo Section - ALWAYS VISIBLE */
        .logofooter {
            display: block !important; /* Override the display: none */
            text-align: left;
            margin-bottom: 15px;
        }

        .logofooter img {
            height: 32px;
            width: auto;
            display: block;
        }

        .footer-col h4 {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 15px;
            color: white;
            text-transform: uppercase;
            text-align: left;
        }

        .footer-col p {
            font-size: 13px;
            line-height: 1.6;
            color: #FFFFFF;
            text-align: left;
            margin-top: 10px;
        }

        .footer-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-col ul li {
            margin-bottom: 8px;
            text-align: left;
        }

        .footer-col ul li a {
            color: #FFFFFF;
            font-size: 13px;
            text-decoration: none;
            transition: color 0.3s ease;
            display: block;
            text-align: left;
        }

        .footer-col ul li a:hover {
            color: #4DACE1;
        }

        /* Footer Bottom - Mobile Optimized */
        .footer-bottom {
            padding-top: 20px;
            font-size: 11px;
            color: #FFFFFF;
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
 
        }

        .footer-left {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .footer-right {
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            width: 100%;
        }

        .footer-bottom a {
            color: #FFFFFF;
            text-decoration: none;
            white-space: nowrap;
        }

        .footer-bottom a:hover {
            color: #4DACE1;
        }

        .contract-address {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            width: 100%;
        }

        .contract-address span {
            word-break: break-all;
            font-size: 10px;
            flex: 1;
        }

        .copy-icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.3s ease;
            flex-shrink: 0;
        }

        .copy-icon:hover {
            opacity: 1;
        }

        .copy-icon svg {
            width: 100%;
            height: 100%;
            fill: #999;
        }

        /* Tablet Styles */
        @media (min-width: 768px) {
            .footertop {
                margin-top: 60px;
                margin-bottom: 40px;
            }

            .footer {
                padding: 40px 30px 25px;
                width: calc(100% - 40px);
            }

            .footer-content {
                grid-template-columns: repeat(2, 1fr);
                gap: 40px;
                margin-bottom: 35px;
            }

            .footer-bottom {
                flex-direction: row;
                justify-content: space-between;
                align-items: flex-start;
                gap: 20px;
            }

            .footer-left {
                justify-content: flex-start;
            }

            .footer-right {
                justify-content: flex-end;
                width: auto;
            }

            .contract-address {
                width: auto;
            }

            .contract-address span {
                font-size: 11px;
            }
        }

        /* Desktop Styles */
        @media (min-width: 1024px) {
            .footertop {
                margin-top: 80px;
                margin-bottom: 60px;
            }

            .footer {
                padding: 50px 80px 30px;
                width: 100%;
            }

            .footer-content {
                grid-template-columns: 2fr 1fr 1fr 1fr;
                gap: 80px;
                margin-bottom: 40px;
            }

            .footer-bottom {
                align-items: center;
            }

            .logofooter img {
                height: 36px;
            }

            .footer-col p {
                font-size: 14px;
            }

            .footer-col ul li a {
                font-size: 14px;
            }
        }

        /* Extra small mobile fixes */
        @media (max-width: 480px) {
            .footer {
                padding: 10px 15px 15px;
                width: calc(100% - 10px);
                border-radius: 15px;
            }

            .footertop {
                margin-top: 30px;
                margin-bottom: 20px;
            }

            .footer-content {
                gap: 3px;
                margin-bottom: 13px;
            }

            .footer-col h4 {
                font-size: 13px;
                margin-bottom: 12px;
            }

            .footer-col p {
                font-size: 12px;
            }

            .footer-col ul li a {
                font-size: 12px;
            }

            .footer-bottom {
                font-size: 10px;
                padding-top: 5px;
                gap: 12px;
            }

            .footer-left {
                gap: 3px;
            }

            .contract-address span {
                font-size: 9px;
            }

            .logofooter img {
                height: 28px;
				display: none;
            }
        }
.about li.ready .image4 .gears {
		animation: image4-rotate ease-in-out 10s infinite alternate;
}
.about li.ready .image4 .lines {
		animation: image4-rotate ease-in-out 8s infinite alternate-reverse;
}
@-webkit-keyframes image4-rotate {
		from {
				transform: rotate(0deg);
		}
		to {
				transform: rotate(360deg);
		}
}
@keyframes image4-rotate {
		from {
				transform: rotate(0deg);
		}
		to {
				transform: rotate(360deg);
		}
}
.about .image4 .front .icon {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.418em;
		height: 0.418em;
		transform: translate3d(-50%, -50%, 0);
		border-radius: 50%;
		background: linear-gradient(180deg, #91D3FF 0%, #0064A7 100%);
		box-shadow: inset 0 0 0.015em #3664D91A;
}
.about .image4 .front .icon:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0.325em;
		height: 0.325em;
		transform: translate3d(-50%, -50%, 0);
		border-radius: 50%;
		background-image: url("../img/about/stars.svg"), linear-gradient(180deg, #0072B1 0%, #4DACE1 100%);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 72.28% auto, contain;
}
.about .image4 .txt {
		position: absolute;
		top: 88%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.019em;
}
.about .image4 .txt > * {
		flex: 0 0 auto;
		font-weight: bold;
		font-size: 0.033333em;
		text-transform: uppercase;
		line-height: 2.7;
		height: 2.588em;
		padding: 0 2.588em 0 1.117em;
		border-radius: 100px;
		background: linear-gradient(180deg, rgba(63, 150, 208, 0.099) 0%, rgba(63, 150, 208, 0.99) 100%), #070A16;
		box-shadow: 0px 1.64em 1.53em rgba(15, 82, 106, 0.18);
		border: 1px solid #3F96D0;
		color: #94B7C5;
		letter-spacing: -3%;
		text-align: center;
		backface-visibility: hidden;
		position: relative;
		transition: transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
		transform: scale(0);
}
.about li.ready .image4 .txt > * {
		transform: scale(1);
}
.about li.ready .image4 .txt > *:nth-child(1) {
		transition-delay: 1s;
}
.about li.ready .image4 .txt > *:nth-child(2) {
		transition-delay: 1.1s;
}
.about li.ready .image4 .txt > *:nth-child(3) {
		transition-delay: 1.2s;
}
.about .image4 .txt > *:before {
		content: '';
		position: absolute;
		width: 0.588em;
		height: 0.588em;
		top: 50%;
		right: 1.117em;
		border-radius: 50%;
		background: #4DE157;
		margin: -0.294em 0;
}
.about li:not(.ready) *, .about li:not(.ready) *:before, .about li:not(.ready) *:after {
		animation-play-state: paused !important;
		transition-duration: 0.1s !important;
		transition-delay: 0s !important;
}
@media only screen and (orientation: landscape) {
		.about .head {
				margin-bottom: calc((100vh - ((100vw - var(--side) * 2) * 0.38)) / -2);
		}
		.about .list {
				aspect-ratio: 1140/510;
				width: calc(100vw - var(--side) * 2);
		}
		.about .list li {
				padding: 0 clamp(20px, 5.625rem, 90px);
				justify-content: center;
				background-size: cover;
				background-position: 50% 50%;
		}
		.about .list li:nth-child(odd) .text {
				margin-right: auto;
		}
		.about .list li:nth-child(even) .text {
				margin-left: auto;
		}
		.about .image {
				top: 50%;
				height: 100%;
		}
		.about .list li:nth-child(odd) .image {
				left: 71%;
		}
		.about .list li:nth-child(even) .image {
				left: 29%;
		}
		.about .list li:nth-child(even) .image2 {
				left: 22%;
		}
}
@media only screen and (orientation: portrait) {
		.about .head {
				margin-bottom: calc(min((100vh - 554px) / -2, (var(--header) + 20px) / -1));
		}
		.about .list {
				aspect-ratio: 362/638;
				height: calc(100vh - var(--header) - 40px);
				height: calc(100svh - var(--header) - 40px);
				max-height: 638px;
		}
		.about .list li {
				justify-content: flex-end;
				text-align: center;
				padding: 40px 20px;
		}
		.about .image {
				top: 28%;
				left: 50%;
				width: 100%;
		}
		.about .list .text {
				width: 100%;
				margin: 0 auto;
				position: relative;
		}
}
.about .list li:nth-child(1) {
		z-index: 1;
		transform: translate3d(0, calc(-10% * var(--percent1) - 10% * var(--percent2)), 0) scale(calc(1 - 0.1 * var(--percent1) - 0.1 * var(--percent2)));
		opacity: calc(1 - var(--percent2));
}
.about .list li:nth-child(2) {
		z-index: 2;
		transform: translate3d(0, calc(var(--vh) - var(--vh) * var(--percent1) - 10% * var(--percent2) - 10% * var(--percent3)), 0) scale(calc(1 - 0.1 * var(--percent2) - 0.1 * var(--percent3)));
		opacity: calc(1 - var(--percent3));
}
.about .list li:nth-child(3) {
		z-index: 3;
		transform: translate3d(0, calc(var(--vh) - var(--vh) * var(--percent2) - 10% * var(--percent3)), 0) scale(calc(1 - 0.1 * var(--percent3)));
}
.about .list li:nth-child(4) {
		z-index: 4;
		transform: translate3d(0, calc(var(--vh) - var(--vh) * var(--percent3)), 0);
}
.ecosystem {
		position: relative;
}
.ecosystem .bg {
		position: absolute;
		pointer-events: none;
		top: -1px;
		left: 0;
		width: 100%;
		z-index: 30;
}
.ecosystem .bg:after {
		content: '';
		position: absolute;
		width: 100%;
		height: 200vh;
		left: 50%;
		transform: translate3d(-50%, -100%, 0) scale(1, calc((1 - var(--percent0)) * -1));
		transform-origin: 50% 100%;
		background: url("../img/change-color.webp") no-repeat 50% 0/100% 100%;
}
html:not(.ready) .ecosystem .bg:after {
		opacity: 0;
}
@media only screen and (orientation: portrait) {
		.ecosystem .bg:after {
				height: 100vh;
				height: 100svh;
		}
}
.ecosystem .wrap {
		height: 100vh;
		height: 100svh;
		position: sticky;
		top: 0;
		overflow: hidden;
}
.ecosystem .slide {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		backface-visibility: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 200px;
		z-index: 2;
}
.ecosystem .lines {
		pointer-events: none;
		z-index: 1;
}
.ecosystem .screen {
		height: 100vh;
		height: 100lvh;
}
.ecosystem .screen0 {
		height: 50vh;
		height: 50lvh;
}
.ecosystem .head, .ecosystem .foot {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		padding: 0 var(--side);
}
.ecosystem .head {
		font-weight: 600;
		line-height: 0.95;
		font-size: clamp(16px, 1.5rem, 24px);
}
.ecosystem .foot {
		font-weight: 500;
		line-height: 1.44;
		font-size: clamp(16px, 1.3125rem, 21px);
}
.ecosystem .head .title, .ecosystem .foot .title {
		font-weight: bold;
		line-height: 1.05;
		font-size: clamp(41px, 4.75rem, 76px);
		margin: 0 0 clamp(14px, 1.6875rem, 27px);
		text-transform: uppercase;
}
.ecosystem .list {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 var(--side);
}
.ecosystem .list ul, .ecosystem .list li {
		list-style: none;
		margin: 0;
		padding: 0;
}
.ecosystem .list ul {
		flex: 0 0 auto;
		width: 100%;
		text-align: center;
		font-weight: 600;
		font-size: clamp(14px, 1rem, 16px);
		line-height: 1.4;
		color: rgba(255, 255, 255, 0.7);
}
.ecosystem .list li {
		flex: 0 0 auto;
		max-width: 17.5em;
		position: relative;
}
.ecosystem .list .title {
		font-weight: bold;
		font-size: clamp(18px, 1.3125rem, 21px);
		line-height: 1.15;
		margin: 0 0 10px 0;
		text-transform: uppercase;
		color: var(--white);
		position: relative;
}
@media only screen and (max-width: 410px) {
		.ecosystem .list ul {
				font-size: clamp(12px, 1rem, 16px);
		}
		.ecosystem .list .title {
				font-size: clamp(14px, 1.3125rem, 21px);
		}
}
.ecosystem-info .text {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #10435F 100%);
		box-shadow: inset 0px -1.5px 0.5px #4DACE1;
		border-radius: 15px;
		color: var(--white);
		min-height: 126px;
		padding: 30px 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
}
.ecosystem .list .li1 .title.js_split {
		--delay2: calc(0 * var(--delay));
}
.ecosystem .list .li1 .descr.js_split {
		--delay2: calc(1 * var(--delay));
}
.ecosystem .list .li2 .title.js_split {
		--delay2: calc(2 * var(--delay));
}
.ecosystem .list .li2 .descr.js_split {
		--delay2: calc(3 * var(--delay));
}
.ecosystem .list .li3 .title.js_split {
		--delay2: calc(4 * var(--delay));
}
.ecosystem .list .li3 .descr.js_split {
		--delay2: calc(5 * var(--delay));
}
.ecosystem .list .li4 .title.js_split {
		--delay2: calc(6 * var(--delay));
}
.ecosystem .list .li4 .descr.js_split {
		--delay2: calc(7 * var(--delay));
}
@media only screen and (max-width: 1023px) {
		.ecosystem:not(.show1-mobile) .list1 .js_split span span, .ecosystem:not(.show2-mobile) .list2 .js_split span span {
				opacity: 0;
				pointer-events: none;
				transform: translate3d(0, 20px, 0);
		}
		.ecosystem {
				--lines1: 720px;
				--lines2: 640px;
				--lines3: 680px;
		}
		.ecosystem .head {
				transform: translateX(calc(var(--lines1) * -1 * var(--percent1))) scale(calc(1 - 0.2 * var(--percent1)));
				opacity: calc(1 - var(--percent1));
		}
		.ecosystem .head > *, .ecosystem .foot > * {
				position: absolute;
				top: calc(50% + var(--header) / 2);
				left: 50%;
				width: 100%;
				transform: translate3d(-50%, -50%, 0);
		}
		.ecosystem .foot > * {
				top: 50%;
		}
		.ecosystem .lines1 {
				transform: translateX(calc(0% - var(--lines1) * var(--percent1) - var(--lines2) * var(--percent2)));
		}
		.ecosystem .list1 {
				transform: translateX(calc(var(--lines1) - var(--lines1) * var(--percent1) - var(--lines2) * var(--percent2))) scale(calc(0.8 + 0.2 * var(--percent1) - 0.2 * var(--percent2)));
				opacity: calc(var(--percent1) - var(--percent2));
		}
		.ecosystem .lines2 {
				transform: translateX(calc(var(--lines1) - var(--lines1) * var(--percent1) - var(--lines2) * var(--percent2) - var(--lines3) * var(--percent3)));
		}
		.ecosystem .list2 {
				transform: translateX(calc(var(--lines2) - var(--lines2) * var(--percent2) - var(--lines3) * var(--percent3))) scale(calc(0.8 + 0.2 * var(--percent2) - 0.2 * var(--percent3)));
				opacity: calc(var(--percent2) - var(--percent3));
		}
		.ecosystem .lines3 {
				transform: translateX(calc(var(--lines2) - var(--lines2) * var(--percent2) - var(--lines3) * var(--percent3)));
		}
		.ecosystem .foot {
				transform: translateX(calc(var(--lines3) - var(--lines3) * var(--percent3))) scale(calc(0.8 + 0.2 * var(--percent3)));
				opacity: calc(var(--percent3));
		}
		.ecosystem .screen3 ~ .screen {
				display: none;
		}
		.ecosystem .lines:before {
				content: '';
				position: absolute;
				top: calc(50% + var(--header) / 2);
				background-repeat: no-repeat;
				background-position: 50% 50%;
				background-size: contain;
				transform: translate3d(0, -50%, 0);
				pointer-events: none;
				backface-visibility: hidden;
		}
		.ecosystem .lines1:before {
				left: calc(50% + 101px);
				width: 535px;
				height: 941px;
				background-image: url("../img/ecosystem/lines1-mobile.png");
				max-height: 120vh;
				max-height: 120svh;
		}
		.ecosystem .lines2:before {
				left: calc(50% + 61px);
				width: 453px;
				height: 775px;
				background-image: url("../img/ecosystem/lines2-mobile.png");
				max-height: calc(100vh - var(--header));
				max-height: calc(100svh - var(--header));
				top: 50%;
		}
		.ecosystem .lines3:before {
				left: calc(50% + 81px);
				width: 480px;
				height: 941px;
				background-image: url("../img/ecosystem/lines3-mobile.png");
				max-height: 120vh;
				max-height: 120svh;
		}
		.ecosystem .list {
				padding: var(--header) var(--side) var(--side) var(--side);
		}
		.ecosystem .list ul {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				max-height: 100%;
				max-width: 20em;
		}
		.ecosystem .list .space {
				flex: 1;
		}
		.ecosystem .list li {
				width: 100%;
				max-width: none;
		}
		.ecosystem .list1 ul {
				height: 618px;
		}
		.ecosystem .list2 ul {
				height: 732px;
		}
		.ecosystem .list2 .descr {
				min-height: 2lh;
		}
		.ecosystem .list2 li.space:before {
				content: '';
				position: absolute;
				background: url("../img/ecosystem/arrow-mobile.svg") no-repeat 50% 50%/contain;
				width: 12px;
				height: 36px;
				margin: -18px -6px;
				top: 50%;
				left: 50%;
				pointer-events: none;
				backface-visibility: hidden;
				transition-property: transform, opacity;
				transition-duration: 0.8s, 0.4s;
				transition-timing-function: ease;
				transform: translate3d(0, 0, 0);
				transition-delay: calc(0 * var(--delay) + var(--delay2));
		}
		.ecosystem .list2 .li1 + .space:before {
				--delay2: calc(2 * var(--delay));
		}
		.ecosystem .list2 .li2 + .space:before {
				--delay2: calc(4 * var(--delay));
		}
		.ecosystem .list2 .li3 + .space:before {
				--delay2: calc(6 * var(--delay));
		}
		.ecosystem:not(.show2-mobile) .list2 li.space:before {
				opacity: 0;
				transform: translate3d(0, 20px, 0);
		}
		@media only screen and (max-width: 410px) {
				.ecosystem .list2 li.space:before {
						height: 24px;
						margin: -12px -6px;
				}
		}
		.ecosystem .info-trigger {
				display: block;
				cursor: pointer;
				user-select: none;
				width: 40px;
				height: 40px;
				background-image: url("../img/ecosystem/info.svg"), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #10435F 100%);
				background-repeat: no-repeat;
				background-position: 50% 50%;
				background-size: 55% auto, contain;
				box-shadow: inset 0px -1.5px 0.5px #4DACE1;
				border-radius: 50%;
				margin: 10px auto 0 auto;
				backface-visibility: hidden;
				transition-property: transform, opacity;
				transition-duration: 0.8s, 0.4s;
				transition-timing-function: ease;
				transform: translate3d(0, 0, 0);
				transition-delay: calc(0 * var(--delay) + var(--delay2));
		}
		.ecosystem:not(.show2-mobile) .list2 .info-trigger {
				opacity: 0;
				transform: translate3d(0, 20px, 0);
				pointer-events: none !important;
		}
		.ecosystem .list2 .li1 .info-trigger {
				--delay2: calc(1.5 * var(--delay));
		}
		.ecosystem .list2 .li2 .info-trigger {
				--delay2: calc(3.5 * var(--delay));
		}
		.ecosystem .list2 .li3 .info-trigger {
				--delay2: calc(5.5 * var(--delay));
		}
		.ecosystem .list2 .li4 .info-trigger {
				--delay2: calc(7.5 * var(--delay));
		}
		@media only screen and (max-width: 410px) {
				.ecosystem .info-trigger {
						width: 32px;
						height: 32px;
				}
		}
		.ecosystem-info {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 40;
				transition: opacity 0.4s ease;
				backface-visibility: hidden;
		}
		.ecosystem-info:not(.open) {
				pointer-events: none;
				opacity: 0;
		}
		.ecosystem-info .fader {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: var(--black);
				opacity: 0.8;
				z-index: 1;
		}
		.ecosystem-info .text {
				z-index: 2;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate3d(-50%, -50%, 0);
				backface-visibility: hidden;
				transition: transform 0.4s ease;
				width: calc(100% - var(--side) * 2);
				background-color: var(--black);
				padding-top: 40px;
				padding-bottom: 72px;
				min-height: 187px;
				font-weight: 600;
				font-size: 18px;
				line-height: 1.4;
				letter-spacing: normal;
				max-width: 18.333em;
				text-align: center;
		}
		.ecosystem-info:not(.open) .text {
				transform: translate3d(-50%, calc(-50% - 10px), 0);
		}
		.ecosystem-info .close {
				cursor: pointer;
				user-select: none;
				position: absolute;
				bottom: 20px;
				left: 50%;
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background: url("../img/close.svg") no-repeat 50% 50%/14px auto;
				margin: 0 -16px;
		}
		html:has(.ecosystem-info.open) {
				overflow: hidden;
		}
}
@media only screen and (min-width: 1024px) {
		.ecosystem:not(.show1-desktop) .list1 .js_split span span, .ecosystem:not(.show2-desktop) .list2 .js_split span span {
				opacity: 0;
				pointer-events: none;
				transform: translate3d(0, 20px, 0);
		}
		.ecosystem {
				--lines1: calc((100vw - var(--side) * 2) * 0.3589 / 1.5);
				--lines2: calc((100vw - var(--side) * 2) * 0.3762 / 2);
				--lines3: calc((100vw - var(--side) * 2) * 0.5944 / 1.3);
		}
		.ecosystem .screen-arrow {
				height: 25vh;
				height: 25lvh;
		}
		.ecosystem .head {
				transform: translateY(calc(var(--lines1) * -1 * var(--percent1) - var(--lines1) * var(--percent2))) scale(calc(1 - 0.2 * var(--percent1) - 0.2 * var(--percent2)));
				opacity: calc(1 - 0.75 * var(--percent1) - 0.75 * var(--percent2));
		}
		.ecosystem .lines1 {
				transform: translateY(calc(var(--lines1) - var(--lines1) * var(--percent1) - var(--lines1) * var(--percent2) - var(--lines1) * var(--percent3))) scale(calc(1.2 - 0.2 * var(--percent1) - 0.2 * var(--percent2) - 0.2 * var(--percent3)));
				opacity: calc(1 - 0.75 * var(--percent2) - 0.75 * var(--percent3));
		}
		.ecosystem .list1 {
				transform: translateY(calc(var(--lines1) - var(--lines1) * var(--percent2) - var(--lines2) * var(--percent3) - var(--lines2) * var(--percent4))) scale(calc(1.2 - 0.2 * var(--percent2) - 0.2 * var(--percent3) - 0.2 * var(--percent4)));
				opacity: calc(var(--percent2) - 0.75 * var(--percent3) - 0.75 * var(--percent4));
		}
		.ecosystem .lines2 {
				transform: translateY(calc(var(--lines2) - var(--lines2) * var(--percent3) - var(--lines2) * var(--percent4) - var(--lines2) * var(--percent5))) scale(calc(1.2 - 0.2 * var(--percent3) - 0.2 * var(--percent4) - 0.2 * var(--percent5)));
				opacity: calc(var(--percent3) - 0.75 * var(--percent4) - 0.75 * var(--percent5));
		}
		.ecosystem .list2 {
				transform: translateY(calc(var(--lines2) - var(--lines2) * var(--percent4) - var(--lines3) * var(--percent13) - var(--lines3) * var(--percent14))) scale(calc(1.2 - 0.2 * var(--percent4) - 0.2 * var(--percent13) - 0.2 * var(--percent14)));
				opacity: calc(var(--percent4) - 0.75 * var(--percent13) - 0.75 * var(--percent14));
		}
		.ecosystem .lines3 {
				transform: translateY(calc(var(--lines3) - var(--lines3) * var(--percent13) - var(--lines3) * var(--percent14))) scale(calc(1.2 - 0.2 * var(--percent13) - 0.2 * var(--percent14)));
				opacity: calc(var(--percent13));
		}
		.ecosystem .foot {
				transform: translateY(calc(var(--lines3) - var(--lines3) * var(--percent14))) scale(calc(1.2 - 0.2 * var(--percent14)));
				opacity: calc(var(--percent14));
		}
		.ecosystem .lines:before {
				content: '';
				width: calc(100% - var(--side) * 2);
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate3d(-50%, -50%, 0);
				background-repeat: no-repeat;
				background-position: 50% 50%;
				background-size: contain;
		}
		.ecosystem .lines1:before {
				top: 55%;
				aspect-ratio: 2764/992;
				background-image: url("../img/ecosystem/lines1.png");
		}
		.ecosystem .lines2:before {
				aspect-ratio: 2764/1040;
				background-image: url("../img/ecosystem/lines2.png");
		}
		.ecosystem .lines3:before {
				aspect-ratio: 2964/1762;
				background-image: url("../img/ecosystem/lines3.png");
		}
		.ecosystem .list ul {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				gap: 1px;
		}
		.ecosystem .list li {
				width: 25%;
				position: relative;
		}
		.ecosystem .list .descr {
				min-height: 3lh;
		}
		.ecosystem .list li.space {
				flex: 1;
				width: auto;
				max-width: none;
				position: relative;
				font-size: clamp(18px, 1.3125rem, 21px);
		}
		.ecosystem .list .li2, .ecosystem .list .li2 + .space, .ecosystem .list .li3, .ecosystem .list .li3 + .space {
				margin-top: 74px;
		}
		.ecosystem .list2 .li1 + .space:before {
				content: '';
				position: absolute;
				background: url("../img/ecosystem/desktop-arrow1.svg") no-repeat 50% 50%/contain;
				width: 101px;
				height: 81px;
				top: 0.575em;
				right: 25%;
				margin-top: -1px;
				transform: translate3d(25%, 0, 0);
				opacity: var(--percent7);
		}
		.ecosystem .list2 .li2 + .space:before {
				content: '';
				position: absolute;
				background: url("../img/ecosystem/desktop-arrow2.svg") no-repeat 50% 50%/contain;
				width: 96px;
				height: 12px;
				top: 0.575em;
				right: 25%;
				transform: translate3d(25%, -50%, 0);
				opacity: var(--percent9);
		}
		.ecosystem .list2 .li3 + .space:before {
				content: '';
				position: absolute;
				background: url("../img/ecosystem/desktop-arrow3.svg") no-repeat 50% 50%/contain;
				width: 776px;
				height: 81px;
				top: 0.575em;
				right: 50%;
				margin-top: -81px;
				margin-right: -60px;
				opacity: var(--percent11);
		}
		@media only screen and (max-width: 1140px) {
				.ecosystem .list2 .li1 + .space:before {
						transform: translate3d(20%, 0, 0);
				}
				.ecosystem .list2 .li2 + .space:before {
						transform: translate3d(60%, -50%, 0);
				}
				.ecosystem .list2 .li3 + .space:before {
						margin-right: -40px;
				}
		}
		.ecosystem-info {
				padding-top: 80px;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
		}
		.ecosystem .li1 .ecosystem-info {
				opacity: var(--percent6);
		}
		.ecosystem .li2 .ecosystem-info {
				opacity: var(--percent8);
		}
		.ecosystem .li3 .ecosystem-info {
				opacity: var(--percent10);
		}
		.ecosystem .li4 .ecosystem-info {
				opacity: var(--percent12);
		}
		.ecosystem .ecosystem-info:before {
				content: '';
				position: absolute;
				top: -10px;
				left: 50%;
				background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) calc(90% - 30px), #000 90%), url("../img/ecosystem/info-line.png");
				background-repeat: no-repeat;
				background-position: 50% 50%;
				background-size: contain;
				width: 8px;
				height: 128px;
				margin: 0 -4px;
				z-index: -1;
		}
		.ecosystem .ecosystem-info .fader, .ecosystem .ecosystem-info .close {
				display: none;
		}
		body > .ecosystem-info {
				display: none;
		}



}