:root {
		--bg: #06131c;
		--cyan: #18bdf5;
		--ice: #68d8ff;
		--text: #f2f8fb;
		--muted: #8da7b2;
		--line: rgba(104, 216, 255, .16)
	}

	* {
		box-sizing: border-box
	}

	body {
		min-height: 100vh;
		margin: 0;
		color: var(--text);
		font-family: Inter, system-ui, sans-serif;
		background: radial-gradient(ellipse at 50% 0%, #18bdf526, transparent 42%), radial-gradient(ellipse at 100% 100%, #18bdf512, transparent 38%), var(--bg)
	}

	.page {
		min-height: 100vh;
		display: flex;
		flex-direction: column
	}

	.topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22px;
		max-width: 1200px;
		width: 100%;
		margin: auto
	}

	.brand {
		display: inline-block;
		color: var(--text);
		text-decoration: none;
		font-size: 26px;
		line-height: 1;
		font-weight: 750;
		letter-spacing: -1px
	}

	.brand .accent {
		color: var(--cyan);
		font-weight: 850
	}

	.brand small {
		display: block;
		margin-top: 8px;
		color: var(--muted);
		font-size: 9px;
		font-weight: 800;
		letter-spacing: 2.3px
	}

	.secure {
		display: flex;
		align-items: center;
		gap: 6px;
		color: var(--muted);
		font-size: 10px
	}

	.secure i {
		color: var(--ice);
		font-size: 13px
	}

	.main {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 16px 42px
	}

	.layout {
		width: 100%;
		max-width: 1000px;
		display: grid;
		grid-template-columns: 1fr .9fr;
		border: 1px solid var(--line);
		border-radius: 27px;
		overflow: hidden;
		background: #071923df;
		box-shadow: 0 28px 90px #0005
	}

	.visual {
		min-height: 560px;
		padding: 38px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		overflow: hidden;
		background: radial-gradient(ellipse at 20% 20%, #18bdf526, transparent 42%), linear-gradient(145deg, #0e2c3a, #06141d)
	}

	.visual:after {
		content: "";
		position: absolute;
		width: 320px;
		height: 320px;
		right: -120px;
		top: 100px;
		border: 1px solid #68d8ff22;
		border-radius: 50%;
		box-shadow: 0 0 0 28px #68d8ff07, 0 0 0 60px #68d8ff04
	}

	.visual-copy,
	.visual-bottom {
		position: relative;
		z-index: 1
	}

	.eyebrow {
		display: flex;
		align-items: center;
		gap: 8px;
		color: var(--ice);
		font-size: 10px;
		letter-spacing: 1.7px;
		text-transform: uppercase;
		font-weight: 850
	}

	.dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--cyan);
		box-shadow: 0 0 12px var(--cyan)
	}

	.visual h1 {
		font-size: clamp(35px, 4vw, 50px);
		font-weight: 850;
		line-height: 1.04;
		letter-spacing: -2px;
		margin: 24px 0 15px
	}

	.visual h1 span {
		color: var(--ice)
	}

	.visual p {
		font-size: 13px;
		line-height: 1.8;
		color: #b3c9d1;
		max-width: 330px
	}

	.features {
		display: flex;
		flex-direction: column;
		gap: 13px;
		margin-top: 30px
	}

	.feature {
		display: flex;
		align-items: center;
		gap: 11px;
		color: #d6e8ee;
		font-size: 11px
	}

	.feature i {
		display: grid;
		place-items: center;
		width: 30px;
		height: 30px;
		border-radius: 10px;
		background: #18bdf518;
		color: var(--ice);
		font-size: 15px
	}

	.visual-bottom {
		font-size: 9px;
		letter-spacing: 1.3px;
		color: #6e8994;
		font-weight: 750
	}

	.panel {
		padding: 42px clamp(24px, 4vw, 48px);
		display: flex;
		flex-direction: column;
		justify-content: center
	}

	.mobile-brand {
		display: none
	}

	.login-icon {
		width: 56px;
		height: 56px;
		border-radius: 18px;
		display: grid;
		place-items: center;
		background: linear-gradient(145deg, #124355, #0a2633);
		border: 1px solid #18bdf54a;
		color: var(--ice);
		font-size: 25px;
		margin-bottom: 22px
	}

	.panel h2 {
		font-size: 27px;
		letter-spacing: -.8px;
		font-weight: 850;
		margin: 0 0 8px
	}

	.subtitle {
		color: var(--muted);
		font-size: 12px;
		line-height: 1.7;
		margin: 0 0 25px
	}

	.field-label {
		display: block;
		color: #d8e7ec;
		font-size: 11px;
		font-weight: 750;
		margin-bottom: 9px
	}

	.phone-row {
		display: flex;
		gap: 8px
	}

	.country {
		display: flex;
		align-items: center;
		gap: 7px;
		min-height: 51px;
		padding: 0 12px;
		border: 1px solid #8fbaca33;
		border-radius: 12px;
		background: #061720;
		color: #e4f1f5;
		font-size: 12px;
		font-weight: 700;
		white-space: nowrap
	}

	.phone {
		min-width: 0;
		flex: 1;
		min-height: 51px;
		padding: 12px 13px;
		border: 1px solid #8fbaca33;
		border-radius: 12px;
		background: #061720;
		color: white;
		font-size: 16px;
		letter-spacing: .6px;
		outline: none
	}

	.phone::placeholder {
		color: #617983;
		letter-spacing: 0
	}

	.phone:focus {
		border-color: var(--cyan);
		box-shadow: 0 0 0 .2rem #18bdf51a
	}

	.hint {
		font-size: 10px;
		line-height: 1.6;
		color: #78939d;
		margin-top: 8px
	}

	.continue {
		width: 100%;
		min-height: 51px;
		border: 0;
		border-radius: 12px;
		margin-top: 20px;
		background: linear-gradient(120deg, #079bd9, #20c3f3);
		color: #03202c;
		font-size: 12px;
		font-weight: 850;
		box-shadow: 0 10px 25px #08a6dd25;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px
	}

	.continue:hover {
		filter: brightness(1.08)
	}

	.terms {
		margin-top: 17px;
		text-align: center;
		font-size: 10px;
		line-height: 1.7;
		color: #708994
	}

	.terms a {
		color: var(--ice);
		text-decoration: none
	}

	.message {
		display: none;
		margin-top: 13px;
		padding: 11px 12px;
		border: 1px solid #68d8ff3b;
		border-radius: 10px;
		color: #bceeff;
		background: #18bdf512;
		font-size: 11px;
		line-height: 1.55
	}

	.help {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		margin-top: 21px;
		color: #8ba4ae;
		font-size: 10px
	}

	.help i {
		color: var(--ice)
	}

	.footer {
		text-align: center;
		padding: 0 16px 18px;
		color: #5e7a85;
		font-size: 9px
	}

	@media(max-width:767.98px) {
		.topbar {
			padding: 21px 19px 12px
		}

		.brand {
			font-size: 24px
		}

		.secure {
			font-size: 9px
		}

		.main {
			align-items: flex-start;
			padding: 20px 14px 28px
		}

		.layout {
			max-width: 480px;
			grid-template-columns: 1fr;
			border-radius: 23px
		}

		.visual {
			display: none
		}

		.panel {
			padding: 28px 22px 27px
		}

		.mobile-brand {
			display: block;
			margin-bottom: 30px
		}

		.login-icon {
			width: 53px;
			height: 53px;
			margin-bottom: 19px
		}

		.panel h2 {
			font-size: 27px
		}

		.subtitle {
			margin-bottom: 24px
		}

		.footer {
			padding-bottom: 15px
		}
	}

	@media(max-width:360px) {
		.topbar {
			padding: 18px 14px 10px
		}

		.brand {
			font-size: 22px
		}

		.secure span {
			display: none
		}

		.main {
			padding: 15px 11px 24px
		}

		.panel {
			padding: 23px 17px
		}

		.mobile-brand {
			margin-bottom: 25px
		}

		.panel h2 {
			font-size: 24px
		}

		.country {
			padding: 0 9px;
			gap: 5px
		}

		.phone-row {
			gap: 6px
		}
	}