/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Finlandica:ital,wght@0,400..700;1,400..700&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:counter(myCounter);
	margin-right: 5px;
}

table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: inherit;}






/* Global */

:root {
	--font-family: 'Finlandica', sans-serif;

	--white: #FFFFFF;
	--black: #404756;
	--blue: #0080DC;
	--lightblue: #E0F1FF;
	--gray: #A4ABBD;

	--max-width: 1600px;
	--min-width: 320px;
	--adaptive: ((100vw - 320px) / (1600 - 320));

	--section-padding-x: clamp(20px, 20px + (100 - 20) * var(--adaptive), 100px);
	--section-margin: clamp(45px, 45px + (120 - 45) * var(--adaptive), 120px);
	--text-size: clamp(18px, 18px + (24 - 18) * var(--adaptive), 24px);
	--title-size: clamp(24px, 24px + (40 - 24) * var(--adaptive), 40px);
	--border-radius: clamp(10px, 10px + (20 - 10) * var(--adaptive), 20px);
}

body {
	font-family: var(--font-family);
	font-weight: 400;
	font-size: var(--text-size);
	line-height: 1.08945;
	color: var(--black);
	background: var(--white); 
	overflow-x: hidden;
}

.page {
	width: 100%;
	min-width: var(--min-width);
	overflow: hidden;
	position: relative;
}

.section, .header, .footer {
	max-width: var(--max-width);
	padding: 0 var(--section-padding-x);
	margin: 0 auto;
	position: relative;
}
.section::after, .header::after, .footer::after {
	content:'';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc((100% - 100vw) / 2);
	right: calc((100% - 100vw) / 2);
	min-width: var(--min-width);
	z-index: -2;
}
@media (max-width: 320px) {
	.section::after, .header::after, .footer::after {
		left: calc(var(--section-padding-x) * -1);
		right: calc(var(--section-padding-x) * -1);
	}
}
.section {
	margin-bottom: var(--section-margin);
}
.section__title {
	font-weight: 600;
	font-size: var(--title-size);
	display: block;
	margin-bottom: 1.125em;
}

a {
	color: var(--blue);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.3s;
}
a:hover {
	text-decoration: none;
}
p:not(:last-child) {
	margin-bottom: 16px;
}






/* Header */

.header {
	padding-top: clamp(16px, 16px + (40 - 16) * var(--adaptive), 40px);
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	align-items: start;
	grid-gap: 20px 30px;
	grid-auto-flow: dense;
}
.header::after {
	background: var(--lightblue);
}
.header__logo {
	justify-self: center;
}
.header__logo img {
	width: clamp(262px, 262px + (475 - 262) * var(--adaptive), 475px);
}
.header__link {
	color: var(--black);
	font-size: clamp(16px, 16px + (32 - 16) * var(--adaptive), 32px);
	text-decoration: none;
	display: flex;
	align-items: center;
	width: fit-content;
}
.header__link::before {
	content: '';
	display: block;
	width: 1.281em;
	height: 1.281em;
	margin-right: 0.625em;
	flex-shrink: 0;
}
.header__link_email {
	justify-self: end;
}
.header__link_telegram::before {
	background: url(../img/telegram-icon.svg) center no-repeat;
	background-size: contain;
}
.header__link_email::before {
	background: url(../img/email-icon.svg) center no-repeat;
	background-size: contain;
}
@media (hover: hover) {
	.header__link:hover {
		color: var(--blue);
	}
}

@media (max-width: 650px) {
	.header {
		grid-template-columns: repeat(2, 1fr);
	}
	.header__logo {
		grid-column: span 2;
		grid-row: 1;
	}
}





/* Main */

.main {
	padding-top: clamp(44px, 44px + (54 - 44) * var(--adaptive), 54px);
	padding-bottom: clamp(44px, 44px + (54 - 44) * var(--adaptive), 54px);
	display: flex;
	flex-direction: row-reverse;
	gap: 40px 30px;
}
.main::after {
	background: var(--lightblue);
}
.main__image {
	flex: 1;
	text-align: center;
	position: relative;
}
.main__image img {
	width: clamp(200px, 200px + (354 - 200) * var(--adaptive), 354px);
}
.main__image::before {
	content:'';
	display: block;
	width: clamp(296px, 296px + (690 - 296) * var(--adaptive), 690px);
	height: clamp(296px, 296px + (690 - 296) * var(--adaptive), 690px);
	background: url(../img/snowflake.svg) center no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 15px;
	left: 80%;
	z-index: -1;
}
.main__content {
	padding-top: 30px;
}
.main__title {
	font-weight: 600;
	font-size: clamp(24px, 24px + (51 - 24) * var(--adaptive), 51px);
	line-height: 1.2;
	text-transform: uppercase;
	display: block;
	margin-bottom: clamp(14px, 14px + (16 - 14) * var(--adaptive), 16px);
}
.main__text {
	font-size: clamp(18px, 18px + (40 - 18) * var(--adaptive), 40px);
}

@media (max-width: 650px) {
	.main {
		display: block;
	}
	.main__image::before {
		left: 60%;
		bottom: 50%;
		transform: translateY(50%);
	}
	.main__content {
		padding-top: 45px;
	}
}




/* Vacancy */

.vacancy__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: clamp(10px, 10px + (20 - 10) * var(--adaptive), 20px);
	margin-bottom: clamp(25px, 25px + (35 - 25) * var(--adaptive), 35px);
}
.vacancy__item {
	--padding-y: clamp(20px, 20px + (25 - 20) * var(--adaptive), 25px);
	--padding-x: clamp(2px, 2px + (10 - 2) * var(--adaptive), 10px);
	padding: var(--padding-y) var(--padding-x);
	border: 2px solid rgba(64,71,86,0.5);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: clamp(14px, 14px + (24 - 14) * var(--adaptive), 24px);
	line-height: 1.3;
	text-align: center;
}
.vacancy__item b {
	font-weight: 600;
}
.vacancy__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	font-size: clamp(16px, 16px + (24 - 16) * var(--adaptive), 24px);
}
.vacancy__links {
	display: flex;
	gap: 0.8em;
}

@media (max-width: 767px) {
	.vacancy__list {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}
	.vacancy__item {
		--padding-x: clamp(2px, 2px + (40 - 2) * var(--adaptive), 40px);
		line-height: 1.2;
	}
}





/* Channels */

.channels__table {
	display: block;
	margin-bottom: 30px;
}
.table {
	--counter-size: clamp(58px, 58px + (87 - 58) * var(--adaptive), 87px);
	--table-columns: var(--counter-size) 2fr 1fr minmax(150px, 0.9fr) 1.5fr;
	--table-gap: clamp(16px, 16px + (27 - 16) * var(--adaptive), 27px);
	--table-text-size: clamp(20px, 20px + (30 - 20) * var(--adaptive), 30px);
	--table-price-size: clamp(20px, 20px + (40 - 20) * var(--adaptive), 40px);
	--table-channel-size: clamp(18px, 18px + (36 - 18) * var(--adaptive), 36px);
	--table-link-size: clamp(14px, 14px + (30 - 14) * var(--adaptive), 30px);
	--table-caption-size: clamp(14px, 14px + (24 - 14) * var(--adaptive), 24px);
}
.table__head {
	display: block;
}
.table__row-head {
	background: var(--gray);
	color: var(--white);
	display: grid;
	grid-template-columns: var(--table-columns);
	grid-gap: var(--table-gap);
}
.table__row-head::before {
	content:'';
}
.table__th {
	min-height: clamp(52px, 52px + (62 - 52) * var(--adaptive), 62px);
	padding: 5px 0;
	display: flex;
	align-items: center;
	font-size: clamp(12px, 12px + (24 - 12) * var(--adaptive), 24px);
}
.table__th:not(:first-child) {
	justify-content: center;
	text-align: center;
}
.table__th_price {
	background: var(--blue);
	border-radius: 20px 20px 0 0;
	padding-bottom: 0.6em;
	padding-top: 0.4em;
	margin-top: -1em;
	position: relative;
	z-index: 2;
}
.table__th:last-child {
	padding-right: var(--table-gap);
}
.table__body {
	display: block;
	counter-reset: rowCounter;
}
.table__row {
	padding: 22px 0;
	border-bottom: 2px solid rgba(164,171,189,0.5);
	display: grid;
	grid-template-columns: var(--table-columns);
	grid-gap: var(--table-gap);
}
.table__channel {
	grid-column: span 2;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: repeat(2, auto);
	align-items: end;
	grid-gap: 0 var(--table-gap);
	font-size: var(--table-channel-size);
}
.table__channel::before {
	grid-row: span 2;
	align-self: start;
	counter-increment: rowCounter;
	content: counter(rowCounter);
	display: block;
	width: var(--counter-size);
	height: var(--counter-size);
	border-radius: 150px;
	background: var(--blue);
	font-size: var(--table-text-size);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}
.channels__link {
	align-self: start;
	font-size: var(--table-link-size);
}
.table__users {
	text-align: center;
	font-weight: 600;
	font-size: var(--table-text-size);
	display: flex;
	align-items: center;
	justify-content: center;
}
.table__users:last-child {
	padding-right: var(--table-gap);
}
.table__caption {
	font-weight: 400;
	font-size: var(--table-caption-size);
	margin-bottom: 0.3em;
	display: none;
}
.table__price {
	font-weight: 600;
	font-size: var(--table-price-size);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--blue);
	height: calc(100% + 47px);
	margin: -22px 0 -25px;
	position: relative;
}
.table__price::before,
.table__th_price::before {
	content:'';
	display: block;
	background: var(--white);
	height: 2px;
	width: 65px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0.5;
	z-index: 2;
}
.table__row:last-child .table__price::before {
	background: var(--blue);
	height: 20px;
	width: 100%;
	border-radius: 0 0 20px 20px;
	bottom: unset;
	top: 100%;
	left: 0;
	transform: none;
	opacity: 1;
}
.channels__contacts {
	font-size: clamp(16px, 16px + (24 - 16) * var(--adaptive), 24px);
}

@media (max-width: 767px) {
	.table {
		--table-columns: minmax(70px, 0.56fr) minmax(100px, 1fr) 1.2fr;
		--table-channel-size: clamp(20px, 20px + (36 - 20) * var(--adaptive), 36px);
		--table-link-size: clamp(20px, 20px + (30 - 20) * var(--adaptive), 30px);
	}
	.table__head {
		display: none;
	}
	.table__row:first-child {
		border-top: 2px solid rgba(164,171,189,0.5);
	}
	.table__channel {
		grid-column: span 3;
	}
	.table__caption {
		display: block;
	}
	.table__users {
		display: block;
		text-align: left;
		padding: var(--table-gap) 0;
		font-size: var(--table-price-size);
	}
	.table__users:last-child {
		padding-right: 0;
	}
	.table__price {
		display: block;
		height: auto;
		margin: 0;
		padding: var(--table-gap);
		border-radius: var(--border-radius);
		font-size: var(--table-price-size);
	}
	.table__price::before {
		display: none;
	}
}
@media (max-width: 475px) {
	.table {
		--table-columns: minmax(70px, 0.8fr) minmax(100px, 1.1fr) 1fr;
	}
	.table__caption {
		max-width: 80px;
	}
}





/* All */

.all {
	--card-gap: clamp(16px, 16px + (24 - 16) * var(--adaptive), 24px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: var(--card-gap);
	grid-auto-flow: dense;
}
.all__title {
	grid-row: span 2;
	max-width: 350px;
}
.all__card {
	border: 2px solid rgba(64,71,86,0.5);
	border-radius: var(--border-radius);
	padding: 10px 26px;
	min-height: clamp(130px, 130px + (186 - 130) * var(--adaptive), 186px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.all__card_blue {
	grid-row: span 2;
	background: var(--blue);
	border: none;
	overflow: hidden;
	position: relative;
}
.all__card_blue::before {
	content:'';
	display: block;
	position: absolute;
	width: 120%;
	height: 120%;
	top: 50%;
	transform: translateY(-50%);
	right: 20%;
	background: url(../img/telegram-icon.svg) center no-repeat;
	background-size: contain;
	filter: invert(100%) brightness(1000%);
	opacity: 0.1;
}
.all__price {
	color: var(--white);
	position: relative;
	z-index: 2;
}
.all__caption {
	font-weight: 600;
	font-size: var(--title-size);
	line-height: 0.9;
	margin-bottom: 0.3em;
}
.all__stat {
	display: grid;
	grid-template-columns: repeat(2, auto);
	grid-column-gap: 13px;
}
.all__icon {
	grid-row: span 2;
}
.all__icon img {
	max-width: unset;
}

@media (max-width: 1279px) {
	.all {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto repeat(2, 1fr);
	}
	.all__title {
		grid-row: 1;
		grid-column: span 2;
		max-width: unset;
		margin-bottom: calc(1.125em - var(--card-gap));
	}
}
@media (max-width: 767px) {
	.all {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1.23fr repeat(2, 1fr);
	}
	.all__title {
		grid-column: unset;
	}
	.all__card_blue {
		grid-row: unset;
	}
}
@media (max-width: 430px) {
	.all__stat {
		max-width: 220px;
	}
}




/* Payments */

.payments {
	padding-top: var(--section-margin);
	padding-bottom: var(--section-margin);
	margin-bottom: 0;
}
.payments::after {
	background: var(--lightblue);
}
.payments::before {
	content:'';
	display: block;
	width: clamp(304px, 304px + (670 - 304) * var(--adaptive), 670px);
	height: clamp(304px, 304px + (670 - 304) * var(--adaptive), 670px);
	background: url(../img/snowflake.svg) center no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translate(18%,62%);
}
.payments__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 28px 20px;
	margin-bottom: clamp(42px, 42px + (64 - 42) * var(--adaptive), 64px);
}
.payments__item {
	display: flex;
	align-items: center;
	max-width: 370px;
}
.payments__item::before {
	content:'';
	display: block;
	width: clamp(50px, 50px + (63 - 50) * var(--adaptive), 63px);
	height: clamp(50px, 50px + (63 - 50) * var(--adaptive), 63px);
	margin-right: clamp(13px, 13px + (17 - 13) * var(--adaptive), 17px);
	background: url(../img/check.svg) center no-repeat;
	background-size: contain;
	flex-shrink: 0;
}
.payments__item:first-child,
.payments__item:last-child {
	max-width: 315px;
}
.payments__text {
	margin-bottom: var(--section-margin);
}

@media (max-width: 767px) {
	.payments::before {
		transform: translate(30%, 70%);
	}
	.payments__list {
		grid-template-columns: 1fr;
	}
	.payments__item,
	.payments__item:first-child,
	.payments__item:last-child {
		max-width: unset;
	}
}



/* Reviews */

.reviews {
	--image-gap: clamp(16px, 16px + (24 - 16) * var(--adaptive), 24px);
	column-count: 3;
	column-gap: var(--image-gap);
	position: relative;
}
.reviews__image {
	margin-bottom: var(--image-gap);
}
@media (max-width: 1023px) {
	.reviews {
		column-count: 2;
	}
}
@media (max-width: 767px) {
	.reviews {
		column-count: 1;
	}
}



/* Footer */

.footer {
	padding-top: 40px;
	padding-bottom: 40px;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	grid-gap: 20px 30px;
	grid-auto-flow: dense;
}
.footer::after {
	background: var(--black);
}
.footer__logo {
	justify-self: center;
	filter: invert(100%) brightness(1000%);
	opacity: 0.5;
}
.footer__logo img {
	width: clamp(234px, 234px + (290 - 234) * var(--adaptive), 290px);
}
.footer__link {
	color: var(--white);
	font-size: clamp(16px, 16px + (50 - 16) * var(--adaptive), 50px);
	text-decoration: none;
	display: flex;
	align-items: center;
	width: fit-content;
}
.footer__link::before {
	content: '';
	display: block;
	width: 1.281em;
	height: 1.281em;
	margin-right: 0.325em;
	flex-shrink: 0;
}
.footer__link_email {
	justify-self: end;
}
.footer__link_telegram::before {
	background: url(../img/telegram-icon.svg) center no-repeat;
	background-size: contain;
}
.footer__link_email::before {
	background: url(../img/email-icon.svg) center no-repeat;
	background-size: contain;
}
@media (hover: hover) {
	.footer__link:hover {
		color: var(--blue);
	}
}

@media (max-width: 650px) {
	.footer {
		grid-template-columns: repeat(2, 1fr);
	}
	.footer__logo {
		grid-column: span 2;
		grid-row: 1;
	}
}