@charset "utf-8";

@media only screen and (min-width: 768px) {
	body {
		font-size: 20px;
	}

	.header .grid {
		height: 81px;
		gap: 20px;
	}

	.toggle-menu {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}

	.head-download {
		display: none;
	}

	.head-download .btn {
		line-height: 16px;
		padding-top: 12px;
		padding-bottom: 12px;
		border-radius: 25px;
		display: none;
	}

	.head-download .links {
		display: flex;
	}

	.menu {
		position: static;
		top: auto;
		right: auto;
		width: auto;
		height: auto;
		overflow: visible;
		transform: none !important;
		background: none !important;
		flex: 1 1 auto;
	}

	.menu:before {
		display: none;
	}

	.menu-inner {
		min-height: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 25px;
		padding: 0;
	}

	.menu-btns {
		width: auto;
		position: relative;
		z-index: 101;
		margin-right: auto;
	}

	.menu-btns .btn {
		flex: 0 0 auto;
		min-width: 130px;
		padding: 12px;
		border-radius: 10px;
	}

	.menu-links {
		margin: 0;
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		overflow-y: auto;
		z-index: 100;
		transform: translate3d(100%, 0, 0);
		transition-property: transform, background;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		backface-visibility: hidden;
		will-change: transform;
		background: var(--dark);
		display: block;
	}

	.menu-links:before {
		content: '';
		display: block;
		position: sticky;
		top: 0;
		z-index: 10;
		height: 81px;
		background: var(--dark);
		margin: 0 0 30px 0;
		transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.color-changed .menu-links,
	.color-changed .menu-links:before {
		background: var(--white);
	}

	html.open-menu .menu-links {
		transform: translate3d(0, 0, 0);
	}

	.menu-links .link {
		margin-left: 5px;
		margin-right: 5px;
	}

	.menu-links .link:last-child {
		margin-bottom: 30px;
	}

	.menu .head-download {
		display: block;
		flex: 0 0 auto;
		order: 2;
		margin: 0;
	}

	.menu-lang {
		flex: 0 0 auto;
		position: relative;
		z-index: 101;
		margin-left: auto;
	}

	.menu-lang:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 100%;
		width: 1px;
		height: 16px;
		border-radius: 0.5px;
		background: var(--border);
		margin: -8px 11px;
	}

	.menu-lang .toggle {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 12px;
		display: block;
		border-radius: 10px;
	}

	.menu-lang .links {
		position: absolute;
		z-index: 100;
		top: 100%;
		right: 0;
		white-space: nowrap;
		min-width: 130px;
		background: var(--white);
		box-shadow: 0 6px 22px rgba(93, 98, 109, 0.1);
		padding: 10px;
		display: block;
		border-radius: 14px;
		margin: 16px 0 0 0;
		transform: translate3d(0, 10px, 0);
		backface-visibility: hidden;
		will-change: transform;
		transition-property: transform, opacity;
		transition-duration: 0.2s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
		pointer-events: none;
		opacity: 0;
	}

	.menu-lang.open .links {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		pointer-events: all;
	}

	.menu-lang .link {
		display: block;
		border-radius: 10px;
		text-align: left;
		width: auto;
		height: auto;
		padding: 10px;
		font-weight: normal;
		font-size: 12px;
		line-height: 14px;
		text-transform: none;
		color: var(--dark) !important;
		background: none !important;
	}

	.menu-lang .link.active {
		background: var(--green) !important;
	}

	.menu-lang .link:hover {
		color: var(--grey) !important;
	}

	.menu-lang .link.active:hover {
		color: var(--dark) !important;
	}

	.menu-lang .big {
		display: inline;
	}

	.menu-lang .small {
		display: none;
	}

	.footer {
		padding-top: 140px;
		padding-bottom: 40px;
		font-size: 14px;
		line-height: 1.4;
		text-align: center;
	}

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

	.content-download .btn {
		display: none;
	}

	.content-download .links {
		display: flex;
	}

	.start-now .free {
		display: block;
	}

	.top-block {
		padding-top: 80px;
		min-height: 100vh;
	}

	.top-block .container {
		gap: 0;
		padding-top: 0;
		position: static;
	}

	.top-block .text {
		max-width: 700px;
		padding-bottom: 40px;
		position: relative;
		margin: auto 0;
	}

	.top-block .size2 {
		font-size: 72px;
		margin-bottom: 15px;
	}

	.top-block .size3 {
		font-size: 20px;
		font-weight: 600;
	}

	.top-block .content-download {
		margin-top: 30px;
	}

	.top-block .content-download .links {
		justify-content: flex-start;
	}

	.top-block .image {
		background-image: url(../img/top-block-bg/tablet.jpg);
	}

	.top-block .play {
		flex: 0 0 auto;
		font-weight: 600;
		font-size: 16px;
		line-height: 1.1;
		background: var(--bg-light);
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		margin: 0;
		backdrop-filter: none;
		pointer-events: none;
		padding: 12px 28px 12px 10px;
		border-radius: 16px;
		display: flex;
		align-items: center;
		gap: 16px;
	}

	@media (pointer:fine) {
		.top-block a:hover .play {
			background: var(--bg-light-hover);
		}
	}

	.top-block .play strong {
		font-weight: bold;
		display: block;
		text-transform: capitalize;
	}

	.top-block .play .arr {
		display: block;
		width: 40px;
		height: 40px;
		position: relative;
		margin: 0;
		top: auto;
		left: auto;
		border-radius: 10px;
		background: var(--green);
		pointer-events: all;
		backface-visibility: hidden;
		transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.top-block .play .arr svg {
		width: 16px;
		height: 16px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -8px -7px;
		fill: var(--dark);
	}

	.top-block .bottom {
		margin-top: 0;
		position: relative;
	}

	.top-block .bottom .line {
		margin: 0 15px;
	}

	.top-block .bottom h1,
	.top-block .bottom .h1 {
		position: static;
		top: auto;
		left: auto;
		flex: 1;
		text-align: right;
		font-size: 16px;
		padding: 0;
		margin: 0;
		color: var(--white);
		order: 2;
	}

	.get {
		padding-top: 120px;
		padding-bottom: 86px;
		margin-top: 0;
	}

	.get .size1 {
		font-size: 64px;
		margin-bottom: 50px;
	}

	.get ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		font-size: 24px;
		line-height: 1.2;
	}

	.get li {
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		min-height: 298px;
		padding: 39px 29px;
		gap: 40px;
		border-radius: 30px;
	}

	.get li img {
		width: auto;
		height: 60px;
	}

	.how .top {
		padding-top: 100px;
		position: sticky;
		top: 86px;
	}

	.how .el1 {
		margin-top: -50vh;
	}

	.how .el1,
	.how .el2,
	.how .el3 {
		display: block;
		height: 50vh;
	}

	.how .size1 {
		font-size: 64px;
		margin-bottom: 40px;
	}

	.how ol {
		flex-direction: row;
		justify-content: center;
		gap: 0;
	}

	.how li {
		width: 33.333333%;
		padding: 0 8px;
		backface-visibility: hidden;
		will-change: transform, opacity;
	}

	.how li:nth-child(1) {
		transform: translate3d(0, calc(100px - 100px * var(--percent1)), 0);
		opacity: var(--percent1);
	}

	.how li:nth-child(2) {
		transform: translate3d(0, calc(100px - 100px * var(--percent2)), 0);
		opacity: var(--percent2);
	}

	.how li:nth-child(3) {
		transform: translate3d(0, calc(100px - 100px * var(--percent3)), 0);
		opacity: var(--percent3);
	}

	.how li img {
		max-width: 275px;
		margin-top: 30px;
	}

	.trust {
		padding-top: 110px;
		padding-bottom: 24px;
		font-size: 20px;
	}

	.trust .image {
		max-width: 396px;
		margin-bottom: 50px;
		background-image: url(../img/trust-desktop.png);
	}

	.trust .image:before {
		content: '';
		display: block;
		padding-top: 102.67%;
	}

	.trust .text {
		max-width: 700px;
	}

	.trust .size1 {
		font-size: 64px;
		margin-bottom: 30px;
	}

	.benefits {
		padding-top: 110px;
		padding-bottom: 2px;
	}

	.benefits .container {
		max-width: 1040px;
		gap: 20px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.benefits .bg {
		width: auto;
	}

	.stat {
		padding-top: 110px;
	}

	.stat .top-text {
		margin-bottom: 40px;
		font-size: 20px;
	}

	.stat .size1 {
		font-size: 64px;
		margin-bottom: 10px;
	}

	.stat ul {
		display: grid;
		gap: 15px;
		grid-template-columns: repeat(3, 1fr);
	}

	.stat li {
		width: auto;
	}

	.profile .top-text {
		font-size: 20px;
		margin: 0 auto;
		padding-top: 150px;
		padding-bottom: 70px;
		max-width: 510px;
		text-align: center;
	}

	.profile .size1 {
		font-size: 64px;
		margin-bottom: 10px;
		margin-left: -40px;
		margin-right: -40px;
	}

	.profile ul {
		grid-template-columns: repeat(3, 1fr);
		font-weight: bold;
	}

	.filters .top {
		padding-top: 156px;
		padding-bottom: 80px;
		justify-content: center;
		min-height: 0;
	}

	.filters .top .container {
		flex: 0 0 auto;
	}

	.filters .top:after {
		display: none;
	}

	.filters .top-text {
		text-align: center;
		margin: 0 auto 30px auto;
		font-size: 20px;
		color: var(--grey);
		max-width: 610px;
	}

	.filters .size1 {
		font-size: 64px;
		margin-bottom: 6px;
	}

	.filters ul {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		font-size: 16px;
	}

	.filters li {
		padding: 20px;
		min-width: 271px;
		width: auto;
		max-width: 100%;
	}

	.filters .cards {
		margin-top: 20px;
		flex-direction: row;
		align-items: flex-start;
		gap: 20px;
		transform: none !important;
		flex: 0 0 auto;
		justify-content: center;
		margin: 20px auto 0 auto;
		max-width: 1440px;
		position: relative;
	}

	.filters .cards:before,
	.filters .cards:after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 2;
		width: 235px;
		margin: -1px 0;
		border-style: solid;
		border-width: 0;
		border-color: #011119;
	}

	.filters .cards:before {
		background: linear-gradient(to right, #011119 0%, rgba(1, 17, 25, 0) 100%);
		left: 0;
		border-left-width: 85px;
	}

	.filters .cards:after {
		background: linear-gradient(to right, rgba(1, 17, 25, 0) 0%, #011119 100%);
		right: 0;
		border-right-width: 85px;
	}

	.filters .card {
		width: 335px;
		max-width: none;
		margin: 0 !important;
		display: block !important;
		transform: none !important;
		opacity: 1 !important;
		order: 3;
	}

	.filters .card-my {
		order: 2;
	}

	.filters .card-my+.card {
		order: 1;
	}

	.start-now {
		padding-top: 150px;
	}

	.start-now .size1 {
		font-size: 64px;
		margin-bottom: 40px;
	}

	.faq {
		padding-top: 132px;
	}

	.faq .size1 {
		font-size: 56px;
		margin-bottom: 30px;
	}

	.faq .el:not(:last-child) {
		margin-bottom: 30px;
	}

	.faq .qu {
		min-height: 60px;
		font-size: 24px;
		line-height: 1.3;
	}

	.faq .qu .arr {
		top: 30px;
	}

	.faq h4 {
		font-size: 1.25em;
	}

	.faq .ind {
		padding-left: 60px;
	}

	.support {
		padding-top: 150px;
	}

	.support .top-text {
		font-size: 20px;
		margin: 0 auto 40px auto;
		max-width: none;
		text-align: center;
	}

	.support .size1,
	.support.ru .size1 {
		font-size: 64px;
		margin-bottom: 10px;
	}

	.support .links {
		justify-content: center;
		margin: 0 auto;
		max-width: 700px;
	}

	.support .links .link {
		font-weight: 600;
		font-size: 16px;
		padding: 30px;
		border-radius: 20px;
	}

	.support .links .link img {
		height: 60px;
		margin-bottom: 21px;
	}

	.form-sent .text-sent:before {
		width: 50px;
		height: 50px;
	}

	.form-sent .soc-wrap {
		text-align: left;
		flex-direction: row;
		align-items: center;
		margin-top: 60px;
	}

	.container-new {
		margin-bottom: 80px;
	}

	.container-new__top-part {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-bottom: 60px;
	}

	.container-new__top-part_right {
		display: flex;
		align-items: center;
	}

	.container-new__email {
		text-align: right;
		margin: 0;
	}

	.container-new__top-part_right .content-download {
		margin-left: 40px;
	}

	.container-new__top-part_right .content-download .link {
		width: 182px;
	}

	.footer .grid {
		display: flex;
		gap: 60px;
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.container-new__bottom-part {
		flex-direction: row-reverse;
		align-items: flex-end;
	}

	.container-new .content-download .links {
		margin-bottom: 0;
		flex-wrap: wrap;
		width: 35vw;
		justify-content: flex-end;
	}


	.footer .grid .col .foot-title {
		margin: 0 0 25px 0;
	}
}