/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Onest:wght@100..900&display=swap');


/* Reset */

* {padding: 0;	margin: 0; -webkit-tap-highlight-color:transparent;}
*, *:before, *:after {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
:focus, :active, a:focus, a:active {outline: none;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
html, body {
	width: 100%;
	min-height: 100%;
	font-size: 100%;
	line-height: normal;
	-webkit-text-size-adjust: none
}

input, button, textarea, select {
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 0;
	background: none;
}
input::placeholder, textarea::placeholder {opacity: 1;}
input::-ms-clear {display: none;}
button::-moz-focus-inner {padding: 0; border: 0;}
button, .button, input[type="button"], input[type=submit] {cursor: pointer;}
button[disabled], input[disabled] {cursor: default;}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {display: none;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;}
input[type="number"] {-moz-appearance: textfield;}

a, a:hover, a:visited {text-decoration: none;}
img {vertical-align: top; max-width: 100%;}

h1,h2,h3,h4,h5,h6 {font-size: inherit; font-weight: normal;}

ol, ul {list-style: none;}
ol {counter-reset: myCounter;}
ol li:before {
	counter-increment: myCounter;
	content: '0' counter(myCounter) '.';
}

table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: inherit;}

.scroll_disable {overflow: hidden;}





/* Global */

:root {
	--font-family: "Onest", sans-serif;
	--second-family: "Montserrat", sans-serif;

	--black: #050720;
	--gray: #3b3d4f;
	--white: #fff;
	--blue: #314fdc;
	--darkblue: #1c246b;
	--lightblue: #f2f2fc;
	--lightblue2: #ecf1f7;
	--bluegradient: linear-gradient(40deg, #0017c1 0%, #4f71ed 100%);

	--adaptive: ((100vw - 360px) / (1440 - 360));
	
	--header-height: clamp(80px, 80px + (84 - 80) * var(--adaptive), 84px);
	--section-margin: clamp(100px, 100px + (140 - 100) * var(--adaptive), 140px);
	--padding-x: clamp(18px, 18px + (40 - 18) * var(--adaptive), 40px);
	--text-size: clamp(16px, 16px + (18 - 16) * var(--adaptive), 18px);
	--title-size: clamp(24px, 24px + (38 - 24) * var(--adaptive), 38px);
	--grid-gap: clamp(12px, 12px + (24 - 12) * var(--adaptive), 24px);
}

body {
	font-family: var(--font-family);
	font-weight: 300;
	font-size: var(--text-size);
	color: var(--gray);
	background: var(--white); 
	overflow-x: hidden;
}

.page {
	width: 100%;
	min-width: 360px;
	overflow-x: hidden;
	position: relative;
}

.section, .header__body, .footer {
	max-width: 1360px;
	padding: 0 var(--padding-x);
	margin: 0 auto;
	position: relative;
}
.section {
	margin-bottom: var(--section-margin);
	padding-top: var(--section-margin);
	margin-top: calc((var(--section-margin) * -1));
}
.section::after, .footer::after {
	content:'';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc((100% - 100vw) / 2);
	right: calc((100% - 100vw) / 2);
	z-index: -1;
}
@media(max-width:360px) {
	.section::after, .footer::after {
		left: 0;
		right: 0;
	}
}

.title {
	font-family: var(--second-family);
	font-weight: 600;
	font-size: var(--title-size);
	color: var(--black);
	display: block;
}
.title b {
	color: var(--blue);
	font-weight: 600;
}
.title_center {
	max-width: clamp(500px, 500px + (720 - 500) * var(--adaptive), 720px);
	margin: 0 auto;
	text-align: center;
}
.subtitle {
	font-family: var(--second-family);
	font-weight: 500;
	font-size: clamp(20px, 20px + (22 - 20) * var(--adaptive), 22px);
	color: var(--blue);
	display: block;
	margin-bottom: 8px;
}

a {
	color: var(--blue);
}
a, a:before, button {
	transition: 0.3s;
}
p:not(:last-child) {
	margin-bottom: 12px;
}

.social {
	display: flex;
	gap: 12px;
}
.social__link {
	flex-shrink: 0;
}
@media (hover: hover) {
	.social__link:hover {
		transform: scale(1.15);
	}
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	height: clamp(44px, 44px + (51 - 44) * var(--adaptive), 51px);
	padding: 0 32px;
	border: none;
	border-radius: 12px;
	background: var(--bluegradient);
	color: var(--white);
	font-weight: 500;
	font-size: clamp(16px, 16px + (18 - 16) * var(--adaptive), 18px);
}
.button_small {
	height: 44px;
	padding: 0 28px;
	font-size: 16px;
}
@media (hover: hover) {
	.button:hover {
		filter: brightness(120%);
		cursor: pointer;
	}
}
.button:active {
	transform: scale(0.95);
}





/* Header */

.header {
	position: fixed;
	left: 0;
	width: 100%;
	background: var(--white);
	box-shadow: 0 8px 16px 0 rgba(28, 36, 107, 0.04);
	z-index: 100;
}
.header__body {
	height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.header__logo {
	max-width: clamp(145px, 145px + (200 - 145) * var(--adaptive), 200px);
	z-index: 2;
}
.header__contacts {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	position: relative;
	z-index: 2;
}
.header__phone {
	font-size: 16px;
	white-space: nowrap;
	position: relative;
}
.header__phone::before {
	content:'';
	display: block;
	position: absolute;
	top: 98%;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--blue);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.4s, transform-origin 0s;
}
@media (hover: hover) {
	.header__phone:hover:before {
		transform: scaleX(1);
		transform-origin: left center;
	}
}





/* Menu */

.menu__body {
	display: flex;
	align-items: center;
	gap: 20px;
}
.menu__link {
	font-size: 16px;
	color: var(--darkblue);
	white-space: nowrap;
	position: relative;
}
.menu__link::before {
	content:'';
	display: block;
	position: absolute;
	top: 98%;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--blue);
	transform: scaleX(0);
}
.menu__link_active {
	color: var(--blue);
}
.menu__link_active::before {
	transform: scaleX(1);
}
@media (hover: hover) {
	.menu__link:hover {
		color: var(--blue);
	}
	.menu__link:hover:before {
		transform: scaleX(1);
	}
}



/* Burger */

.burger {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	padding: 5px;
	margin: -5px;
	display: none;
}
.burger__icon {
	width: clamp(18px, 18px + (30 - 18) * var(--adaptive), 30px);
	height: clamp(12px, 12px + (20 - 12) * var(--adaptive), 20px);
	position: relative;
}
.burger__line {
	background: var(--blue);
	height: 2px;
	border-radius: 50px;
	position: absolute;
	width: 100%;
}
.burger__line_1 {top: 0;}
.burger__line_2 {top: 50%; transform: translateY(-50%);}
.burger__line_3 {bottom: 0;}


/* Burger close animation */

.burger__line {
	transition-duration: 0.2s;
	transition-property: transform, top, bottom, opacity;
	transition-delay: 0s, 0.1s, 0.1s, 0s;
}
.burger__icon_close .burger__line {
	transition-duration: 0.2s;
	transition-property: transform, top, bottom, opacity, width, margin;
	transition-delay: 0.1s, 0s, 0s, 0s, 0.1s, 0.1s;
}
.burger__icon_close .burger__line_1 {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 100%;
}
.burger__icon_close .burger__line_2 {
	opacity: 0;
}
.burger__icon_close .burger__line_3 {
	bottom: 50%;
	transform: translateY(50%) rotate(-45deg);
	width: 100%;
}




/* Menu on mobile */

@media (max-width: 1279px) {
	.header__contacts {
		flex: 1;
	}
	.burger {
		display: block;
		margin-left: 5px;
	}
	.menu {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100vh;
		border-top: var(--header-height) solid var(--white);
		padding-bottom: calc(100vh - 100svh + 40px);
		overflow: auto;
		background: var(--white);
		display: flex;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.4s;
		z-index: 1;
	}
	.menu_open {
		opacity: 1;
		pointer-events: all;
	}
	.menu__body {
		width: 100%;
		flex-direction: column;
		gap: clamp(30px, 4vh, 40px);
		margin: auto;
	}
	.menu__link {
		--adaptive: ((100vw - 360px) / (1280 - 360));
		font-size: clamp(16px, 16px + (24 - 16) * var(--adaptive), 24px);
		text-align: center;
		display: block; 
		transition: 0.2s 0s; 
		transform: translateY(-100px); 
		opacity: 0;
	}
	.menu_open .menu__link {
		transition: 0.4s 0.2s; 
		transform: translateY(0);
		opacity: 1;
	}
	.menu__body > * {
		transition: 0.2s 0s;
		transform: translateY(-100px); 
		opacity: 0;
	}
	.menu_open .menu__body > * {
		transition: 0.4s 0.2s; 
		transform: translateY(0);
		opacity: 1;
	}
}





/* Main */

.main {
	padding-top: calc(var(--header-height) + 40px);
	margin-top: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 32px;
}
.main::after {
	background: var(--lightblue);
}
.main__image {
	align-self: end;
}
.main__content {
	padding-top: clamp(1px, 1px + (60 - 1) * var(--adaptive), 60px);
}
.main__title {
	font-family: var(--second-family);
	font-weight: 600;
	font-size: clamp(28px, 28px + (46 - 28) * var(--adaptive), 46px);
	color: var(--black);
	margin-bottom: 12px;
}
.main__title-bage {
	display: inline-block;
	padding: 7px clamp(16px, 16px + (24 - 16) * var(--adaptive), 24px);
	font-weight: 500;
	font-size: clamp(16px, 16px + (22 - 16) * var(--adaptive), 22px);
	color: var(--blue);
	border: 1px solid var(--blue);
	border-radius: 150px;
	white-space: nowrap;
	transform: translateY(-12%);
}
.main__text {
	margin-bottom: clamp(24px, 24px + (32 - 24) * var(--adaptive), 32px);
}
.main__note {
	margin-top: 40px;
	margin-bottom: clamp(80px, 80px + (150 - 80) * var(--adaptive), 150px);
	max-width: 187px;
	text-align: right;
	font-weight: 500;
	font-size: 16px;
	margin-left: auto;
	position: relative;
}
.main__note::before {
	content: '';
	display: block;
	width: clamp(120px, 120px + (195 - 120) * var(--adaptive), 195px);
	height: 56px;
	background: url(../img/main-arrow.svg) center no-repeat;
	background-size: contain;
	position: absolute;
	right: clamp(100px, 100px + (160 - 100) * var(--adaptive), 160px);
	bottom: 55%;
}
.main__picture {
	position: relative;
}
.main__image {
	position: absolute;
	bottom: 0;
	right: -10%;
	left: -55%;
	pointer-events: none;
}
.main__caption {
	font-size: clamp(14px, 14px + (22 - 14) * var(--adaptive), 22px);
	font-family: var(--second-family);
	font-weight: 500;
	color: var(--white);
	background: var(--blue);
	padding-left: clamp(20px, 20px + (24 - 20) * var(--adaptive), 24px);
	border-radius: 150px 0 0 150px;
	line-height: 2.136em;
	position: absolute;
	left: 0;
	width: 100vw;
	min-width: 360px;
	bottom: 40px;
}

@media (max-width: 1144px) {
	.main__title {
		max-width: 480px;
	}
	.main__content {
		padding-bottom: 100px;
	}
	.main__note {
		display: none;
	}
}
@media (max-width: 980px) {
	.main__title {
		max-width: unset;
		width: 106%;
	}
}
@media (max-width: 900px) {
	.main__title {
		max-width: 588px;
		width: 160%;
	}
	.main__content {
		padding-bottom: 200px;
	}
	.main__caption {
		left: -10vw;
	}
}
@media (max-width: 767px) {
	.main {
		display: block;
	}
	.main__content {
		padding-bottom: 40px;
	}
	.main__title {
		max-width: unset;
		width: 100%;
	}
	.main__caption {
		left: 0;
	}
	.main__picture {
		padding-bottom: 82%;
	}
	.main__image {
		right: -10%;
		left: -35%;
	}
}
@media (max-width: 560px) {
	.main__picture {
		padding-bottom: 110%;
	}
	.main__image {
		right: -50%;
		left: -50%;
	}
	.main__title-bage {
		transform: translateY(-5%);
	}
}






/* Solution */

.solution {
	display: grid;
	grid-template-columns: 2fr 4fr;
	grid-gap: 24px;
	align-items: center;
}
.solution__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: var(--grid-gap);
}
.solution__item {
	padding: 20px 16px;
	border-radius: 20px;
	box-shadow: 0 8px 22px 0 rgba(28, 36, 107, 0.08);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
}
.solution__icon {
	margin-left: -6px;
}

@media (max-width: 1279px) {
	.solution {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767px) {
	.solution__content > div {
		width: fit-content;
		padding-right: var(--padding-x);
	}
	.solution__content {
		padding: 24px 0;
		margin: -24px 0;
		overflow-x: scroll;
		width: 100vw;
		margin-left: calc((100vw - 100%) / 2 * -1 );
		padding-left: calc((100vw - 100%) / 2 );
	}
	.solution__content::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 0;
		height: 0;
		display: none;
	}
}
@media (max-width: 360px) {
	.solution__content {
		width: 360px;
		margin-left: -18px;
		padding-left: 18px;
	}
}




/* About */

.about {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 24px;
	align-items: center;
}
.about__content {
	order: 2;
}
.about__title {
	margin-bottom: 16px;
}
.about__button {
	margin-top: clamp(24px, 24px + (32 - 24) * var(--adaptive), 32px);
}
.about__benefits {
	background: var(--lightblue);
	border-radius: 32px;
	padding: clamp(18px, 18px + (24 - 18) * var(--adaptive), 24px);
	display: grid;
	grid-gap: clamp(12px, 12px + (20 - 12) * var(--adaptive), 20px);
}
.about__benefits-item {
	background: var(--white);
	border-radius: 20px;
	padding: 20px clamp(16px, 16px + (20 - 16) * var(--adaptive), 20px);
}

@media (max-width: 767px) {
	.about {
		grid-template-columns: 1fr;
	}
	.about__content {
		order: unset;
	}
	.about__button {
		margin-top: 0;
	}
	.about__benefits {
		padding: var(--padding-x);
		margin: 0 calc(var(--padding-x) * -1);
	}
}




/* Benefits */

.benefits__head {
	padding: 40px 0;
	padding-top: var(--padding-x);
	position: relative;
}
.benefits__head::before {
	content:'';
	display: block;
	position: absolute;
	top: 0;
	bottom: calc(var(--benefits-height) / -2);
	left: calc(var(--padding-x) * -1);
	right: calc(var(--padding-x) * -1);
	border-radius: clamp(24px, 24px + (32 - 24) * var(--adaptive), 32px);
	background: var(--bluegradient);
	z-index: -1;
}
.benefits__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: var(--grid-gap);
}
.benefits__list_numbers {
	margin-bottom: clamp(40px, 40px + (60 - 40) * var(--adaptive), 60px);
}
.benefits__number {
	background: var(--white);
	border-radius: clamp(12px, 12px + (20 - 12) * var(--adaptive), 20px);
	padding: 14px;
	font-family: var(--second-family);
	font-weight: 700;
	font-size: clamp(28px, 28px + (46 - 28) * var(--adaptive), 46px);
	line-height: 1;
	color: var(--blue);
	text-align: center;
	margin-bottom: 8px;
}
.benefits__desc {
	color: var(--white);
	text-align: center;
}
.benefits__title {
	color: var(--white);
}
.benefits__item {
	background: var(--white);
	border-radius: 20px;
	padding: clamp(20px, 20px + (32 - 20) * var(--adaptive), 32px) 20px;
	box-shadow: 0 8px 22px 0 rgba(28, 36, 107, 0.08);
}
.benefits__icon {
	margin: 0 0 5px -7px;
}

@media (max-width: 767px) {
	.benefits__list_cards {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.benefits__head::before {
		bottom: calc((var(--benefits-height) * 2 + var(--benefits-height) / 2 + var(--grid-gap) * 3) * -1);
	}
	.benefits__list_numbers {
		grid-template-columns: repeat(2, 1fr);
	}
	.benefits__number-item:nth-child(2) {
		order: 2;
		grid-column: span 2;
	}
	.benefits__list_cards {
		grid-template-columns: 1fr;
	}
}



/* Instruments */

.instruments__title {
	margin-bottom: clamp(28px, 28px + (32 - 28) * var(--adaptive), 32px);
}
.instruments__tabs {
	border-radius: 32px;
	background: var(--lightblue);
	padding: 20px;
	overflow: hidden;
	isolation: isolate;
}
.instruments__nav {
	max-width: 1107px;
	margin: 0 auto;
	background: var(--white);
	border-radius: clamp(16px, 16px + (20 - 16) * var(--adaptive), 20px);
	padding: clamp(4px, 4px + (8 - 4) * var(--adaptive), 8px);
	margin-bottom: clamp(30px, 30px + (60 - 30) * var(--adaptive), 60px);
}
.instruments__tab {
	padding: clamp(10px, 10px + (12 - 10) * var(--adaptive), 12px) clamp(16px, 16px + (20 - 16) * var(--adaptive), 20px);
	width: fit-content;
	border-radius: clamp(12px, 12px + (16 - 12) * var(--adaptive), 16px);
	cursor: pointer;
}
.instruments__tab.swiper-slide-thumb-active {
	background: var(--blue);
	color: var(--white);
	transition: background 0.2s;
}
@media (hover: hover) {
	.instruments__tab:not(.swiper-slide-thumb-active):hover {
		color: var(--blue);
		transition: color 0.3s;
	}
}
.instruments__slider {
	margin: -20px;
	margin-top: 0;
}
.instruments__content {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	background: var(--lightblue);
}
.instruments__text {
	padding-left: clamp(1px, 1px + (50 - 1) * var(--adaptive), 50px);
	padding-bottom: clamp(30px, 30px + (50 - 30) * var(--adaptive), 50px);
	padding-right: 0;
	align-self: center;
}
.instruments__text b {
	font-weight: 400;
}
.instruments__text ul {
	display: grid;
	grid-gap: 4px;
	margin-bottom: 12px;
}
.instruments__text li {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 7px;
	align-items: center;
}
.instruments__text li::before {
	content:'';
	display: block;
	width: 14px;
	height: 14px;
	background: url(../img/star.svg) center no-repeat;
	background-size: contain;
}
.instruments__image img {
	width: 118%;
	max-width: unset;
	margin: 0 -9% -8%;
}

@media (max-width: 950px) {
	.instruments__tabs {
		padding-left: var(--padding-x);
		padding-right: var(--padding-x);
		width: 100vw;
		margin-left: calc((100% - 100vw) / 2);
	}
	.instruments__slider {
		margin-left: calc(var(--padding-x) * -1);
		margin-right: calc(var(--padding-x) * -1);
	}
	.instruments__content {
		display: block;
		padding-left: var(--padding-x);
		padding-right: var(--padding-x);
	}
	.instruments__text {
		padding-left: 0;
		padding-right: 0;
	}
	.instruments__image img {
		width: 126%;
		margin: 0 -13% -8%;
	}
}







/* Implement */

.implement {
	display: grid;
	grid-template-columns: 1.5fr 2fr;
	grid-gap: 28px;
}
.implement__steps {
	--circle-size: clamp(28px, 28px + (32 - 28) * var(--adaptive), 32px);
	display: grid;
	grid-gap: clamp(20px, 20px + (42 - 20) * var(--adaptive), 42px);
	position: relative;
}
.implement__steps::before {
	content:'';
	display: block;
	width: 2px;
	position: absolute;
	top: calc(var(--first-step-height) / 2);
	bottom: calc(var(--last-step-height) / 2);;
	left: calc(var(--circle-size) / 2 - 1px);
	background: linear-gradient(180deg, #314FDC, rgba(49,79,220,0.08));
	z-index: 2;
}
.implement__item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 5px 20px;
}
.implement__number {
	width: clamp(80px, 80px + (120 - 80) * var(--adaptive), 120px);
	font-weight: 700;
	font-size: clamp(24px, 24px + (46 - 24) * var(--adaptive), 46px);
	line-height: 1.08696;
	color: var(--blue);
	display: flex;
	align-items: center;
	gap: 12px;
}
.implement__number::before {
	content:'';
	display: block;
	width: var(--circle-size);
	height: var(--circle-size);
	border-radius: 150px;
	border: 9px solid var(--white);
	position: relative;
	z-index: 3;
}
.implement__item:nth-child(1) .implement__number::before {
	border: none;
	background: #f2f2fc url(../img/star.svg) center no-repeat;
	background-size: 62%;
	z-index: 1;
}
.implement__item:nth-child(2) .implement__number::before {
	border-color: #f6f7fc;
	background: #7b8eea;
	z-index: 2;
}
.implement__item:nth-child(3) .implement__number::before {
	border-color: #f8f7fd;
	background: #8395ea;
}
.implement__item:nth-child(4) .implement__number::before {
	border-color: #f9fafe;
	background: #adbaf1;
}
.implement__item:nth-child(5) .implement__number::before {
	border-color: #fcfcfe;
	background: #d6dbf8;
}
.implement__text a {
	font-weight: 700;
	position: relative;
}
.implement__text a::before {
	content:'';
	display: block;
	position: absolute;
	top: 90%;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--blue);
	transform: scaleX(0);
}
@media (hover: hover) {
	.implement__text a:hover:before {
		transform: scaleX(1);
	}
}

@media (max-width: 767px) {
	.implement {
		grid-template-columns: 1fr;
	}
	.implement__item {
		grid-template-columns: 1fr;
	}
	.implement__text {
		padding-left: calc(var(--circle-size) + 12px);
	}
	.implement__steps::before {
		top: 10px;
		bottom: var(--last-step-height);
	}
}




/* Form */

.form {
	display: grid;
	grid-gap: clamp(12px, 12px + (20 - 12) * var(--adaptive), 20px);
}
.form__input {
	width: 100%;
	border: 1px solid rgba(49, 79, 220, 0.3);
	border-radius: 12px;
	height: 51px;
	padding: 10px 20px;
	font-weight: 300;
	font-size: 18px;
	color: var(--black);
	transition: 0.3s;
}
.form__input_textarea {
	padding: 20px;
	height: 140px;
	resize: none;
}
.form__input::placeholder {
	color: #9e9ea8;
}
.form__input:focus {
	border-color: var(--blue);
}
@media (hover: hover) {
	.form__input_textarea::-webkit-scrollbar {
		appearance: none;
		-webkit-appearance: none;
		width: 0;
		height: 0;
	}
	.form__input_textarea {
		scrollbar-width: none;
	}
}

.form__checkbox {
	display: block;
	position: relative;
	cursor: pointer;
	font-size: clamp(14px, 14px + (18 - 14) * var(--adaptive), 18px);
	width: fit-content;
}
.form__checkbox-input {
	opacity: 0;
	pointer-events: none;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}
.form__checkbox-label {
	display: flex;
	align-items: center;
}
.form__checkbox-label::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid var(--blue);
	border-radius: 6px;
	margin-right: 8px;
	flex-shrink: 0;
	transition: 0.2s;
	background-position: center;
}
.form__checkbox-input:checked + .form__checkbox-label::before {
	background: url(../img/checkmark.svg) center no-repeat;
}





/* Demo */

.demo {
	margin-top: 0;
	padding-top: clamp(100px, 100px + (120 - 100) * var(--adaptive), 120px);
	padding-bottom: clamp(100px, 100px + (120 - 100) * var(--adaptive), 120px);
}
.demo::after {
	background: var(--blue);
	z-index: -2;
}
.demo__image {
	width: clamp(750px, 750px + (960 - 750) * var(--adaptive), 960px);
	position: relative;
	overflow: hidden;
	position: absolute;
	top: 0;
	bottom: 0;
	left: clamp(5px, 5px + (550 - 5) * var(--adaptive), 550px);
	z-index: -1;
}
.demo__image img {
	object-fit: cover;
	object-position: top;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.demo__title {
	color: var(--white);
	margin-bottom: 0.526em;
	max-width: clamp(500px, 500px + (720 - 500) * var(--adaptive), 720px);
}
.demo__text {
	color: var(--white);
	margin-bottom: clamp(24px, 24px + (32 - 24) * var(--adaptive), 32px);
	max-width: 475px;
}
.demo__form {
	max-width: 845px;
	background: var(--white);
	border-radius: 20px;
	padding: clamp(20px, 20px + (24 - 20) * var(--adaptive), 24px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: clamp(12px, 12px + (20 - 12) * var(--adaptive), 20px);
	column-gap: clamp(12px, 12px + (24 - 12) * var(--adaptive), 24px);
}
.demo__form .form__input {
	flex: 1;
	min-width: 29%;
}
.demo__form .form__checkbox {
	flex: 1;
}

@media (max-width: 767px) {
	.demo {
		padding-bottom: 0;
	}
	.demo__image {
		--adaptive: ((100vw - 360px) / (768 - 360));
		position: relative;
		left: unset;
		height: clamp(290px, 290px + (400 - 290) * var(--adaptive), 400px);
		width: clamp(600px, 600px + (830 - 600) * var(--adaptive), 830px);
		margin-left: 50%;
		transform: translateX(-60%);
		margin-top: -30%;
	}
	.demo__form .form__input,
	.demo__form .form__checkbox {
		flex: unset;
		width: 100%;
	}
	.demo__form .form__button {
		margin: 10px auto 0;
	}
}
@media (max-width: 560px) {
	.demo__form .form__button {
		width: 100%;
	}
}







/* Partners */

.partners__title {
	margin-bottom: 8px;
}
.partners__body {
	width: 100vw;
	margin-left: calc((100% - 100vw) / 2);
}
.partners__slider1,
.partners__slider2 {
	margin-bottom: -24px;
}
.partners__slider2 {
	z-index: 2;
}
.partners__list {
	transition-timing-function: linear!important;
	padding: clamp(20px, 20px + (24 - 20) * var(--adaptive), 24px) 0;
}
.partners__logo {
	width: clamp(160px, 160px + (236 - 160) * var(--adaptive), 236px);
	height: clamp(85px, 85px + (114 - 85) * var(--adaptive), 114px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: clamp(15px, 15px + (20 - 15) * var(--adaptive), 20px);
	background: var(--white);
	box-shadow: 0 8px 20px 0 rgba(28, 36, 107, 0.08);
	margin-right: clamp(18px, 18px + (24 - 18) * var(--adaptive), 24px);
	padding: clamp(28px, 28px + (30 - 28) * var(--adaptive), 30px);
}
.partners__logo img {
	max-height: 100%;
}




/* Choice */

.choice {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 24px;
	align-items: center;
}
.choice__image {
	background: var(--lightblue);
	border-radius: 32px;
	height: clamp(320px, 320px + (460 - 320) * var(--adaptive), 460px);
	position: relative;
}
.choice__image::before {
	--top-offset: clamp(35px, 35px + (50 - 35) * var(--adaptive), 50px);
	content:'';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: calc(var(--top-offset) * -1);
	background: url(../img/star.svg) top center no-repeat;
	background-size: cover;
}
.choice__photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	isolation: isolate;
	border-radius: 32px;
}
.choice__photo img {
	object-fit: cover;
	object-position: top center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.choice__title {
	margin-bottom: 0.526em;
}
.choice__button {
	margin-top: clamp(24px, 24px + (32 - 24) * var(--adaptive), 32px);
}

@media (max-width: 767px) {
	.choice {
		grid-template-columns: 1fr;
	}
}




/* Reviews */

.reviews {
	max-width: 1142px;
}
.reviews__title {
	margin-bottom: clamp(28px, 28px + (32 - 28) * var(--adaptive), 32px);
}
.reviews__image {
	display: block;
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 53%;
	border-radius: clamp(24px, 24px + (32 - 24) * var(--adaptive), 32px);
	overflow: hidden;
	isolation: isolate;
}
.reviews__image::before {
	content:'';
	display: block;
	background: url(../img/play.svg) center no-repeat;
	background-size: clamp(50px, 50px + (100 - 50) * var(--adaptive), 100px);
	position: absolute;
	inset: 0;
	z-index: 2;
}
.reviews__image img {
	object-fit: cover;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media (hover: hover) {
	.reviews__image:hover:before {
		transform: scale(1.1);
		filter: brightness(110%);
	}
}
.reviews__caption {
	border-radius: 24px;
	padding: 20px 32px;
	width: fit-content;
	text-align: center;
	background: var(--white);
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 1;
	pointer-events: none;
}
.reviews__caption b {
	font-family: var(--second-family);
	font-weight: 600;
	font-size: clamp(20px, 20px + (22 - 20) * var(--adaptive), 22px);
	display: block;
	margin-bottom: 4px;
}
.reviews__arrows {
	display: flex;
	justify-content: center;
	gap: 12px;
	position: relative;
	z-index: 10;
	margin-top: 12px;
}
.reviews__arrow {
	width: clamp(80px, 80px + (90 - 80) * var(--adaptive), 90px);
	height: clamp(36px, 36px + (40 - 36) * var(--adaptive), 40px);
	cursor: pointer;
	border: none;
	border-radius: 8px;
	background: var(--lightblue);
	font-size: 0;
	z-index: 10;
	position: relative;
	transition: 0.3s;
}
.reviews__arrow::before {
	content:'';
	display: block;
	position: absolute;
	inset: 12px;
	background: url(../img/arrow.svg) center no-repeat;
	background-size: contain;
	transition: 0.1s;
}
.reviews__arrow_prev {
	transform: scale(-1, 1);
}
@media (hover: hover) {
	.reviews__arrow:hover {
		background: var(--blue);
	}
	.reviews__arrow:hover:before {
		filter: brightness(1000%);
	}
}

@media (max-width: 767px) {
	.reviews__image {
		padding-bottom: 65%;
	}
}
@media (max-width: 560px) {
	.reviews__image {
		padding-bottom: 100%;
	}
	.reviews__caption {
		pointer-events: all;
		position: static;
		width: 100%;
	}
	.reviews__arrows {
		margin-top: 0;
	}
}




/* Faq */

.faq__title {
	margin-bottom: clamp(4px, 4px + (8 - 4) * var(--adaptive), 8px);
}
.faq__subtitle {
	margin: 0 auto;
	text-align: center;
	margin-bottom: clamp(28px, 28px + (32 - 28) * var(--adaptive), 32px);
	font-size: clamp(16px, 16px + (22 - 16) * var(--adaptive), 22px);
}
.faq__list {
	position: relative;
	padding: clamp(20px, 20px + (24 - 20) * var(--adaptive), 24px) 0;
	color: var(--white);
}
.faq__list::after {
	content:'';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--padding-x) * -1);
	right: calc(var(--padding-x) * -1);
	border-radius: clamp(24px, 24px + (32 - 24) * var(--adaptive), 32px);
	background: var(--bluegradient);
	z-index: -1;
}
.faq__item {
	padding: 12px 0;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: 1fr auto;
	grid-auto-flow: dense;
	grid-gap: 0 clamp(14px, 14px + (24 - 14) * var(--adaptive), 24px);
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	transition: 0.3s;
}
.faq__item:last-child {
	border: none;
}
.faq__button {
	grid-column: 2;
	grid-row: span 2;
	display: block;
	width: clamp(36px, 36px + (85 - 36) * var(--adaptive), 85px);
	height: clamp(36px, 36px + (39 - 36) * var(--adaptive), 39px);
	border-radius: 8px;
	background: #f1f2fc;
	border: none;
	transition: 0.5s;
	position: relative;
}
.faq__button::before,
.faq__button::after {
	content:'';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(14px, 14px + (16 - 14) * var(--adaptive), 16px);
	height: 1.5px;
	border-radius: 5px;
	background: var(--blue);
	transition: 0.3s;
}
.faq__button::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
@media (hover: hover) {
	.faq__button:hover {
		filter: brightness(110%);
	}
}
.faq__question {
	font-family: var(--second-family);
	font-weight: 500;
	font-size: clamp(18px, 18px + (22 - 18) * var(--adaptive), 22px);
	padding: 6px 0;
	width: fit-content;
	transition: 0.3s;
}
@media (hover: hover) {
	.faq__question:hover {
		cursor: pointer;
		opacity: 0.9;
	}
}
.faq__answer {
	opacity: 0.8;
	padding: 12px 0;
	max-width: 845px;
	display: none;
}

.faq__item_active,
.faq__item:has(+ .faq__item_active) {
	border-color: var(--white);
}
.faq__item_active .faq__button {
	background: rgba(241, 242, 252, 0.12);
	height: 100%;
}
.faq__item_active .faq__button::after {
	transform: translate(-50%, -50%) rotate(180deg);
	background: var(--white);
}
.faq__item_active .faq__button::before {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}




/* Ask */

.ask__body {
	background: var(--lightblue2);
	border-radius: 32px;
	padding: clamp(20px, 20px + (40 - 20) * var(--adaptive), 40px);
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 24px 10px;
	align-items: center;
}
.ask__content {
	max-width: 420px;
}
.ask__title {
	margin-bottom: clamp(4px, 4px + (8 - 4) * var(--adaptive), 8px);
}
.ask__subtitle {
	margin-bottom: clamp(12px, 12px + (20 - 12) * var(--adaptive), 20px);
	font-size: clamp(16px, 16px + (22 - 16) * var(--adaptive), 22px);
}
.ask__text {
	margin-bottom: clamp(24px, 24px + (32 - 24) * var(--adaptive), 32px);
}
.ask__image {
	--margin-y: clamp(1px, 1px + (40 - 1) * var(--adaptive), 40px);
	margin: calc(var(--margin-y) * -1) 0;
	text-align: center;
}

@media (max-width: 819px) {
	.ask__body {
		grid-template-columns: 1.6fr 1fr;
	}
}
@media (max-width: 649px) {
	.ask__body {
		grid-template-columns: 1fr;
	}
	.ask__content {
		order: 2;
	}
	.ask__image {
		margin: 0 24px;
	}
}






/* Footer */

.footer {
	padding-top: 70px;
	padding-bottom: 20px;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: 1fr auto;
	grid-gap: 60px 20px;
	grid-auto-flow: dense;
}
.footer::after {
	background: var(--white);
	box-shadow: 0 -8px 16px 0 rgba(28, 36, 107, 0.04);
}
.footer__contacts {
	grid-column: 2;
	grid-row: span 2;
	display: grid;
	grid-gap: 20px;
	justify-items: end;
}
.footer__logo {
	width: 200px;
}
.footer__contact-link {
	font-weight: 400;
	color: var(--gray);
	position: relative;
}
.footer__contact-link::before {
	content:'';
	display: block;
	position: absolute;
	top: 98%;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--blue);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.4s, transform-origin 0s;
}
@media (hover: hover) {
	.footer__contact-link:hover {
		color: var(--blue);
	}
	.footer__contact-link:hover:before {
		transform: scaleX(1);
		transform-origin: left center;
	}
}
.footer__menu {
	display: grid;
	grid-template-columns: 235px auto;
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	grid-gap: 16px 32px;
}
.footer__menu-link {
	font-size: clamp(20px, 20px + (30 - 20) * var(--adaptive), 30px);
	color: var(--gray);
	width: fit-content;
	position: relative;
}
.footer__menu-link::before {
	content:'';
	display: block;
	position: absolute;
	top: 90%;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: var(--blue);
	transform: scaleX(0);
	transform-origin: left;
}
@media (hover: hover) {
	.footer__menu-link:hover {
		color: var(--blue);
	}
	.footer__menu-link:hover:before {
		color: var(--blue);
		transform: scaleX(1);
	}
}
.footer__copyright {
	font-size: 14px;
	color: var(--gray);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
}
.footer__copyright-link {
	color: var(--gray);
	text-decoration: underline;
	text-decoration-skip-ink: none;
}
@media (hover: hover) {
	.footer__copyright-link:hover {
		color: var(--blue);
		text-decoration: underline;
	}
}

@media (max-width: 767px) {
	.footer {
		grid-template-columns: 1fr;
		justify-items: center;
	}
	.footer__contacts {
		grid-column: 1;
		justify-items: center;
	}
	.footer__menu {
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
	}
	.footer__copyright {
		flex-wrap: nowrap;
		flex-direction: column;
		align-items: center;
	}
}







/* Up button */

.up {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: var(--black);
	width: 40px;
	height: 40px;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s, bottom 0s;
	z-index: 150;
	opacity: 0;
	visibility: hidden;
}
.up_show {
	opacity: 1;
	visibility: visible;
}
.up:after {
	content: '';
	display: block;
	width: 30%;
	height: 30%;
	border-left: 2px solid var(--white);
	border-top: 2px solid var(--white);
	transform: rotate(45deg);
	margin-top: 15%;
	transition: 0.3s;
}
@media (hover: hover) {
	.up:hover {
		background: var(--blue);
	}
}
@media (pointer:coarse) {
	.up {
		visibility: hidden;
	}
}





/* Popup */

.popup__overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100vh + 140px);
	transform: translateY(-70px);
	background: rgba(0,0,0,0.75);
	z-index: 1000;
	transition: 0.5s;
	opacity: 0;
}
.popup_show .popup__overlay {
	opacity: 1;
}
.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(100% + 70px);
	padding: 15px;
	padding-bottom: calc(15px + 70px);
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: flex;
	z-index: 1001;
	visibility: hidden;
}
.popup__box {
	position: relative;
	margin: auto;
	max-width: 500px;
	background: var(--white); 
	padding: clamp(24px, 24px + (60 - 24) * var(--adaptive), 60px); 
	border-radius: clamp(24px, 24px + (32 - 24) * var(--adaptive), 32px);
	z-index: 1001;
	transform: translateY(-100vh);
	opacity: 0;
}
.popup_show .popup__box {
	transition: transform 0.5s;
	transform: translateY(0);
	opacity: 1;
}
.popup__close {
	position: absolute;
	top: 0px;
	right: 0px;
	width: clamp(24px, 24px + (28 - 24) * var(--adaptive), 28px);
	height: clamp(24px, 24px + (28 - 24) * var(--adaptive), 28px);
	margin: clamp(15px, 15px + (20 - 15) * var(--adaptive), 20px);
	padding: 5px;
	cursor: pointer;
}
.popup__close-icon {
	position: relative;
	height: 100%;
	transition: 0.3s;
}
.popup__close-icon:after, .popup__close-icon:before {
	content: '';
	display: block;
	width: 140%;
	left: -20%;
	position: absolute;
	top: 50%;
	height: 2px;
	border-radius: 5px;
	background: var(--black);
}
.popup__close-icon:after {
	transform: translateY(-50%) rotate(45deg);
}
.popup__close-icon:before {
	transform: translateY(-50%) rotate(-45deg);
}
.popup__close:hover .popup__close-icon {
	transform: rotate(180deg);
}

.preloader {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	padding: 12px 16px;
	border-radius: 5px;
	background-color: #000;
	height: 44px;
	z-index: 100;
	display: none;
}
.preloader__line {
	border-radius: 100px;
	background-color: #fff;
	height: 20px;
	width: 2px;
	margin: 0 2px;
	display: inline-block;
	animation: sk-stretchdelay 1.2s infinite ease-in-out
}
.preloader__line:nth-child(2) {
	animation-delay: -1.1s
}
.preloader__line:nth-child(3) {
	animation-delay: -1.0s
}
.preloader__line:nth-child(4) {
	animation-delay: -0.9s
}
@keyframes sk-stretchdelay {
	0%, 40%, 100% {transform: scaleY(0.5);}
	20% {transform: scaleY(1.0);}
}

.popup__title {
	font-family: var(--second-family);
	font-weight: 600;
	font-size: clamp(20px, 20px + (30 - 20) * var(--adaptive), 30px);
	color: var(--black);
	text-align: center;
	padding: 0 10px;
	display: block;
	margin-bottom: 1em;
}
.popup__content {
	margin-bottom: 24px;
}
.popup .button {
	width: 100%;
}
.popup .form__checkbox {
	font-size: 14px;
}