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

@font-face {
	font-family: 'Circe Contrast';
	src:
		url('./fonts/Circe-Contrast-Regular.woff2') format('woff2'),
		url('./fonts/Circe-Contrast-Regular.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Circe Contrast';
	src:
		url('./fonts/Circe-Contrast-Medium.woff2') format('woff2'),
		url('./fonts/Circe-Contrast-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Circe Contrast';
	src:
		url('./fonts/Circe-Contrast-Bold.woff2') format('woff2'),
		url('./fonts/Circe-Contrast-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #e6f4f8;
	--navy: #0e3447;
	--teal-dark: #145b78;
	--teal: #56aec8;
	--text: #1e2f39;
	--white: #f5fbff;
	--font-main: 'Circe Contrast', 'Circe', sans-serif;
}

a {
  position: relative;
  z-index: 10;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-main);
	background: var(--bg);
	color: var(--text);
}

.landing {
	min-height: 100vh;
	display: flex;
	/* place-items: center; */
	justify-content: center;
	/* align-items: center; */
	/* padding: clamp(14px, 3vw, 24px); */
	margin-top: 50px;
}

.card {
	width: min(700px, 100%);
	text-align: center;
}

.logo-wrap {
	margin-bottom: 18px;
}
.logo {
	width: 293px;
	height: 215px;
	margin-bottom: 12px;
}

.description {
	width: min(700px, 100%);
	margin: 0 auto 18px;
	padding: 0 clamp(2px, 1vw, 8px);
	font-size: clamp(11px, 1.7vw, 16px);
	line-height: 1.25;
	font-weight: 300;
	letter-spacing: 0.1px;
	text-align: center;
}

.telegram-bar {
	/* width: min(520px, 100%); */
	width: 100%;
	height: 30px;
	margin: 0 auto 18px;
	border-radius: 0;
	/* background: linear-gradient(180deg, #6ca8db, #4f8bbf); */
	background: #64a4de;
	color: #fff;
	display: grid;
	place-items: center;
	text-decoration: none;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
	cursor: pointer;
	text-decoration: none;
	transition:
		opacity 0.2s ease,
		transform 0.1s ease;
}

.actions {
	width: 100%;
	margin: 0 auto;
	display: grid;
	gap: 10px;
}
.img_telegram {
	width: 30px;
	height: 30px;
}
.actions-primary {
	margin-bottom: 24px;
	width: 100%;
}

.btn {
	display: inline-grid;
	place-items: center;
	min-height: 36px;
	padding: 8px 14px;
	border-radius: 999px;
	text-decoration: none;
	font-size: clamp(11px, 1.7vw, 14px);
	font-weight: 500;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	color: var(--white);
	box-shadow: 0 4px 7px rgba(7, 33, 45, 0.26);
}

.btn_telegram:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

.btn_telegram:active {
	transform: translateY(0);
	opacity: 1;
}

.btn-dark {
	background: #175266;
}

.btn-light {
	background: linear-gradient(180deg, #73bfd9 0%, #4fa6c2 100%);
}

@media (max-width: 900px) {
	.card,
	.description,
	.telegram-bar,
	.actions {
		width: min(520px, 92vw);
	}

	.logo-title {
		font-size: clamp(36px, 8vw, 48px);
	}
}

.logo-wrap_2 {
	/* display: none; */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -11;

	opacity: 0.5;
}

@media (max-width: 680px) {
	.landing {
		place-items: start center;
		padding-top: 28px;
	}
	.actions {
		width: min(520px, 95vw);
		gap: 8px;
		justify-items: center;
	}

	.actions .btn {
		width: 100%;
		max-width: min(300px, 88vw);
	}

	.img_telegram {
		width: 20px;
		height: 20px;
	}

	.actions-primary {
		margin-bottom: 16px;
	}

	.description {
		font-size: clamp(11px, 2.4vw, 13px);
	}

	.telegram-bar {
		width: 100%;
		max-width: min(300px, 88vw);
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 16px;
	}
}

@media (max-width: 430px) {
	.card,
	.description,
	.telegram-bar,
	.actions {
		width: min(520px, 95vw);
	}

	.logo-icon {
		width: 72px;
		height: 40px;
		margin-bottom: 6px;
	}

	.ring {
		border-width: 2px;
	}

	.ring.base {
		transform: translateY(12px) scaleX(0.75);
	}

	.logo-title {
		font-size: clamp(30px, 10vw, 40px);
		letter-spacing: 0.4px;
	}

	.logo-subtitle {
		font-size: 11px;
		letter-spacing: 1.2px;
	}

	.description {
		margin-bottom: 14px;
		font-size: 11px;
		line-height: 1.3;
	}

	.telegram-bar {
		width: 100%;
		max-width: min(270px, 90vw);
		margin-left: auto;
		margin-right: auto;
		height: 20px;
		margin-bottom: 14px;
	}

	.actions .btn {
		max-width: min(270px, 90vw);
	}

	.btn {
		min-height: 34px;
		padding: 7px 10px;
		font-size: 10px;
		letter-spacing: 0.1px;
	}
}

@media (max-height: 640px) and (orientation: landscape) {
	.landing {
		min-height: 100%;
		padding: 16px 12px 20px;
	}

	.logo-wrap {
		margin-bottom: 10px;
	}

	.description {
		margin-bottom: 10px;
	}

	.telegram-bar {
		margin-bottom: 10px;
	}

	.actions-primary {
		margin-bottom: 10px;
	}

	.actions {
		gap: 6px;
	}

	.btn {
		min-height: 30px;
	}
}

.btn-group {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 16px 20px;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition:
		opacity 0.2s ease,
		transform 0.1s ease;
} */
.btn:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
	opacity: 1;
}