/* ------------------------------------------------------------------------ */

* {
	padding: 0;
	margin: 0;
	border: 0;
}

*,
*:before,
*:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

:focus,
:active {
	outline: none;
}

a:focus,
a:active {
	outline: none;
}

nav,
footer,
header,
aside {
	display: block;
}

html,
body {
	height: 100%;
	width: 100%;
	font-size: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

input,
button,
textarea {
	font-family: inherit;
}

input::-ms-clear {
	display: none;
}

button {
	cursor: pointer;
	background-color: transparent;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

a {
	color: inherit;
}

a,
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: 400;
}

svg {
	display: block;
}

/* ---------------------------------------------------------------------------- */

:root {
	--third-family: "Play", sans-serif;
	--font3: "Inter", sans-serif;

	--1: #2b2b2b;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 20px;
}

body {
	font-family: var(--third-family);
	background: #fff;
	line-height: normal;
}

.container {
	max-width: 1370px;
	margin: 0 auto;
	padding: 0 40px;
}

.btn-main {
	border: 5px solid #c2d0ff;
	border-radius: 91px;
	background: #0052fe;

	padding: 32px 20px;

	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;

	display: block;
	max-width: 304px;
	width: 100%;

	transition: all .2s ease;
}

.btn-main.scroll--active {
	transition: translate .6s ease-in-out, opacity .6s ease-in-out, background .2s ease, box-shadow .2s ease;
}

.btn-main:active {
	box-shadow: 0 4px 18px 0 rgba(0, 82, 255, 0.46);
	background: #5c80fe;
}

@media(hover:hover) {
	.btn-main:hover {
		box-shadow: 0 4px 18px 0 rgba(0, 82, 255, 0.46);
	}
}

.title {
	font-weight: 700;
	font-size: 36px;
	color: var(--1);

	letter-spacing: 0.03em;
}

.scroll {
	translate: 0 60px;
	opacity: 0;
	transition: translate .6s ease-in-out, opacity .6s ease-in-out;
}

.scroll--active {
	translate: 0 0px;
	opacity: 1;
}

/* -------------------------header------------------------- */

.header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 15px 0px 0px 0px;
	z-index: 10;
}

.header__container {}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.header__logo {}

.header__right {
	display: flex;
	align-items: center;
	gap: 59px;
}

.burger-btn {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 31px;
	height: 21px;
}

.burger-btn-line {
	width: 100%;
	height: 1px;
	background-color: var(--1);
	transition: all .3s ease;
}

.b1 {}

.b2 {
	width: 19px;
}

.b3 {}

.burger-btn--active .b1 {
	transform: translate(0px, 10px) rotate(45deg);
}

.burger-btn--active .b2 {
	opacity: 0;
}

.burger-btn--active .b3 {
	transform: translate(0px, -10px) rotate(-45deg);
}

.header__list {
	display: flex;
	align-items: center;
	gap: 52px;
}

.header__item {}

.header__item-link {
	font-weight: 400;
	font-size: 16px;
	color: var(--1);

	transition: all .2s ease;
}

.header__item-link:active {
	color: #3360ff;
}

@media(hover:hover) {
	.header__item-link:hover {
		color: #3360ff;
	}
}

.header__link {
	font-weight: 400;
	font-size: 16px;
	color: #fff;

	display: inline-block;

	padding: 10px 32px;
	background: var(--1);
	border-radius: 34px;
	white-space: nowrap;

	transition: all .2s ease;
}

.header__link:active {}

@media(hover:hover) {
	.header__link:hover {
		background-color: #5c5c5c;
	}
}

/* -------------------------preview------------------------- */

.page__preview {
	padding: 222px 0 170px 0;
	margin: 0px 0px 73px 0px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.preview-bg-2 {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	z-index: -1;
	min-width: 1200px;
}

.preview__container {}

.preview__inner {
	position: relative;
	z-index: 1;
}

.preview__title {
	font-weight: 700;
	font-size: 52px;
	color: var(--1);
	letter-spacing: 0.02em;

	max-width: 710px;
	margin: 0px 0px 69px 0px;
}

.preview__title-sp {
	font-weight: 400;
}

.preview__link {}

.preview-bg {
	position: absolute;
	top: -152px;
	right: 120px;
	max-width: 100%;
	z-index: -1;
}

/* -------------------------how-works------------------------- */

.page__how-works {
	margin: 0px 0px 100px 0px;
}

.how-works__container {}

.how-works__inner {}

.how-works__title {
	margin: 0px 0px 30px 0px;
}

.how-works__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 23px 30px;
}

.how-works__card {
	background: #f8f8f8;
	border-radius: 15px;
	padding: 25px 11px 38px 30px;
}

.how-works__card-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.how-works__card-name {
	display: flex;
	align-items: center;
	gap: 20px;

	font-weight: 700;
	font-size: 18px;
	color: var(--1);

	letter-spacing: 0.03em;
}

.how-works__card-desc {
	font-weight: 400;
	font-size: 14px;
	line-height: 179%;
	letter-spacing: -0.01em;
	color: var(--1);
}

/* -------------------------advantages------------------------- */

.page__advantages {
	margin: 0px 0px 118px 0px;
}

.advantages__container {}

.advantages__inner {}

.advantages__title {
	margin: 0px 0px 30px 0px;
}

.advantages__cards {
	display: flex;
	align-items: center;
	gap: 30px;
}

.advantages__card {
	width: 100%;
	padding: 20px;
	min-height: 205px;
	background: #f3eeff;
	border-radius: 20px;

	display: flex;
	align-items: center;
}

.advantages__card-bg {
	background: #dfe8ff;
}

.advantages__card-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.advantages__card-name {
	font-weight: 700;
	font-size: 32px;
	text-transform: uppercase;
	color: var(--1);
}

.advantages__card-desc {
	font-weight: 400;
	font-size: 20px;
	text-transform: lowercase;
	color: #7b7b7b;
}

.advantages__card-blue {
	min-height: 269px;
	background: #3360ff;

	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.advantages__card-blue-text {
	max-width: 198px;
	width: 100%;

	font-weight: 700;
	font-size: 32px;
	text-transform: capitalize;
	color: #fff;
	letter-spacing: 0.03em;
}

.advantages__card-blue-rating {
	display: flex;
	align-items: center;
	gap: 8px;

	max-width: 198px;
	width: 100%;
}

.advantages__card-blue-rating-text {
	font-weight: 400;
	font-size: 20px;
	color: #c1c1c1;
}

/* -------------------------investor------------------------- */

.page__investor {
	margin: 0px 0px 100px 0px;
}

.investor__container {}

.investor__inner {
	display: flex;
	align-items: end;
	gap: 15px;
}

.investor__img {
	margin: 0px 0px 21px -14px;
}

.investor__image {
	max-width: 100%;
}

.investor__content {
	max-width: 782px;
	width: 100%;
}

.investor__title {
	margin: 0px 0px 35px 0px;
	text-transform: uppercase;
}

.investor__title-mob {
	display: none;
}

.investor__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 30px;
}

.investor__card {
	padding: 26px;
	border: 1px solid #dfe3ef;
	border-radius: 10px;

	min-height: 142px;

	display: flex;
	align-items: center;
}

.investor__card-content {
	display: flex;
	align-items: start;
	gap: 22px;
}

.investor__card-icon {
	min-width: 34px;
}

.investor__card-text {
	font-weight: 400;
	font-size: 18px;
	color: var(--1);
}

/* -------------------------start------------------------- */

.page__start {
	position: relative;
	overflow: hidden;
	margin: 0px 0px 100px 0px;
}

.start-img {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 1372px;
	padding: 0px 0px 0px 500px;
	pointer-events: none;
}

.start__container {}

.start__inner {
	padding: 0px 0px 38px 0px;
}

.start__content {
	max-width: 605px;
}

.start__title {
	margin: 0px 0px 18px 0px;
}

.start__subtitle {
	font-weight: 400;
	font-size: 20px;
	color: #7b7b7b;

	margin: 0px 0px 50px 0px;
}

/* -------------------------footer------------------------- */

.footer {
	padding: 38px 0;
	background: #1b1b1b;
}

.footer__container {}

.footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.footer__left {
	max-width: 450px;
	width: 100%;

	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer__logo {}

.footer__text {
	font-weight: 400;
	font-size: 12px;
	color: #a0a0a0;
}

.footer__right {}

.footer__list {
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 18px;
}

.footer__item {}

.footer__item-link {
	font-weight: 400;
	font-size: 16px;
	color: #fff;

	transition: all .2s ease;
}

.footer__item-link:active {
	color: #3360ff;
}

@media(hover:hover) {
	.footer__item-link:hover {
		color: #3360ff;
	}
}

.footer__item-link--active {
	font-weight: 700;
	color: #3360ff;
}

/* -------------------------media------------------------- */

@media(max-width:1180px) {
	.preview-bg {
		right: 0;
		padding: 0px 0px 0px 400px;
	}






	.investor__cards {
		gap: 16px;
	}
}

@media(max-width:1120px) {
	.advantages__cards {
		display: grid;
		align-items: stretch;
		gap: 10px;
		grid-template-columns: repeat(2, 1fr);
	}





	.start__inner {
		padding: 0px 0px 212px 0px;
	}

	.start-img {
		top: auto;
		bottom: 0;
		padding: 0;
		max-width: 510px;
	}
}

@media(max-width:920px) {

	.header__list {
		position: absolute;
		top: 110%;
		left: 0;
		width: 100%;

		background: var(--1);
		justify-content: center;
		flex-direction: column;
		padding: 30px 20px;

		gap: 28px;

		opacity: 0;
		pointer-events: none;
		transform: translateY(-40px);
		transition: all .3s ease;
	}

	.header__list--visible {
		opacity: 1;
		pointer-events: all;
		transform: translateY(0px);
	}

	.header__item-link {
		color: #fff;
	}

	.header__item-link--active {
		font-weight: 400;
		color: #0052fe;
	}

	.burger-btn {
		display: flex;
	}

	.header__right {
		gap: 23px;
	}

	.container {
		padding: 0 20px;
	}




	.preview-bg {
		top: auto;
		bottom: 0;
		padding: 0;
		max-width: 400px;
	}

	.page__preview {
		padding: 150px 0px 0px 0px;
	}

	.preview__inner {
		padding: 0px 0px 313px 0px;
	}

	.preview__title {
		font-size: 38px;
		margin: 0px 0px 40px 0px;
	}





	.how-works__cards {
		gap: 10px;
	}







	.investor__inner {
		flex-direction: column;
	}

	.investor__img {
		margin: 0px 0px 28px 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.investor__content {
		max-width: unset;
	}

	.investor__title {
		display: none;
	}

	.investor__title-mob {
		display: block;
		width: 100%;
	}

	.investor__cards {
		gap: 10px;
	}

	.investor__card {
		min-height: unset;
		padding: 23px 13px 23px 26px;
		border: 1px solid #dfe3ef;
		border-radius: 10px;
	}
}

@media(max-width:768px) {
	.header__logo svg {
		max-width: 143px;
		width: 100%;
		height: auto;
	}

	.header__link {
		font-size: 12px;
		padding: 8.5px 29px;
	}

	.header {
		padding: 9px 0 0 0;
	}






	.page__preview {
		padding: 87px 0px 0px 0px;
		margin: 0px 0px 60px 0px;
	}

	.preview__title {
		font-size: 30px;
		margin: 0px 0px 20px 0px;
	}

	.btn-main {
		font-size: 12px;
		padding: 16px;
		border-width: 3px;
		max-width: 197px;
	}

	.preview-bg {
		max-width: 335px;
		right: -14px;
	}




	.how-works__cards {
		grid-template-columns: repeat(1, 1fr);
	}

	.title {
		font-size: 24px;
	}

	.how-works__title {
		margin: 0px 0px 20px 0px;
	}

	.how-works__card {
		padding: 19px 15px;
	}

	.how-works__card-name {
		font-size: 16px;
	}

	.how-works__card-name svg {
		width: 30px;
		height: 30px;
	}

	.how-works__card-list {
		gap: 14px;
	}

	.how-works__card-desc {
		font-size: 12px;
		line-height: normal;
	}

	.page__how-works {
		margin: 0px 0px 60px 0px;
	}






	.advantages__cards {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.advantages__card {
		min-height: 106px;
		padding: 26px 48px;
	}

	.advantages__card-name {
		font-size: 24px;
	}

	.advantages__card-desc {
		font-size: 14px;
	}

	.advantages__card-blue {
		max-width: calc(100% - 24px);
		min-height: 159px;
		padding: 36px;
	}

	.advantages__card-blue-text {
		font-size: 24px;
	}

	.advantages__card-blue-rating-text {
		font-size: 14px;
	}

	.advantages__title {
		margin: 0px 0px 20px 0px;
	}

	.page__advantages {
		margin: 0px 0px 60px 0px;
	}





	.investor__title-mob {
		margin: 0px 0px 20px 0px;
	}

	.investor__cards {
		grid-template-columns: repeat(1, 1fr);
	}

	.page__investor {
		margin: 0px 0px 60px 0px;
	}






	.start__title {
		margin: 0px 0px 10px 0px;
	}

	.start__subtitle {
		font-size: 14px;
		margin: 0px 0px 20px 0px;
	}

	.start-img {
		max-width: 340px;
	}

	.page__start {
		margin: 0px 0px 60px 0px;
	}







	.footer__inner {
		flex-direction: column;
		align-items: start;
	}

	.footer__list {
		align-items: start;
	}

	.footer {
		padding: 30px 0;
	}

	.footer__logo svg {
		max-width: 143px;
		height: auto;
	}

	.footer__item-link {
		font-size: 14px;
	}

}

@media(max-width:520px) {
	.header__right {
		gap: 14px;
	}

	.header__inner {
		gap: 14px;
	}

	.advantages__card-blue {
		align-items: start;
	}


	.investor__card-text {
		font-size: 14px;
	}

	.investor__card-icon {
		min-width: 30px;
	}

	.investor__card-icon svg {
		width: 30px;
		height: 30px;
	}
}