:root {
	--blue: #2c5aa0;
	--blue-light: #4a78c4;
	--gray: #9b9b9b;
	--ink: #131a26;
	--muted: #5b6678;
	--card: rgba(255, 255, 255, .72);
	--border: rgba(255, 255, 255, .9)
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}
html,body {
	height: 100%
}
body {
	font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
	color: var(--ink);
	background: #eef2f8;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow: hidden
}
.backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: linear-gradient(165deg,#f6f9fd,#e6edf7 55%,#dde7f4);
	overflow: hidden
}
.glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .5
}
.glow-blue {
	width: 520px;
	height: 520px;
	top: -160px;
	left: -120px;
	background: radial-gradient(circle,rgba(44,90,160,.55),transparent 70%);
	animation: float 14s ease-in-out infinite
}
.glow-gray {
	width: 460px;
	height: 460px;
	bottom: -180px;
	right: -120px;
	background: radial-gradient(circle,rgba(155,155,155,.5),transparent 70%);
	animation: float 18s ease-in-out infinite reverse
}
.grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(44,90,160,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(44,90,160,.05) 1px,transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(circle at 50% 45%,#000 0%,transparent 72%);
	-webkit-mask-image: radial-gradient(circle at 50% 45%,#000 0%,transparent 72%)
}
@keyframes float {0%,to {
	transform: translate(0)
}
50% {
	transform: translate(30px,40px)
}

}
.page {
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
gap: 28px
}
.card {
width: 100%;
max-width: 540px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 28px;
padding: 56px 48px;
text-align: center;
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
box-shadow: 0 1px #fffc inset,0 30px 70px -28px #1c386866;
animation: rise .7s cubic-bezier(.22,1,.36,1) both
}
@keyframes rise {0% {
opacity: 0;
transform: translateY(18px)
}
to {
opacity: 1;
transform: translateY(0)
}

}
.logo {
width: 210px;
max-width: 68%;
height: auto;
margin: 0 auto 30px;
display: block
}
.status {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--blue);
background: #2c5aa01a;
border: 1px solid rgba(44,90,160,.16);
border-radius: 999px;
padding: 8px 16px
}
.status-icon {
width: 15px;
height: 15px;
color: var(--blue);
flex-shrink: 0
}
.title {
margin: 26px 0 16px;
font-size: 31px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.15;
text-wrap: balance;
background: linear-gradient(120deg,var(--ink) 30%,var(--blue) 130%);
-webkit-background-clip: text;
background-clip: text;
color: transparent
}
.text {
font-size: 16.5px;
line-height: 1.6;
color: var(--muted);
max-width: 40ch;
margin: 0 auto
}
.footer {
font-size: 13px;
color: var(--muted);
opacity: .8
}
@media(max-width:480px) {.card {
padding: 40px 26px;
border-radius: 22px
}
.title {
font-size: 25px
}
.text {
font-size: 15.5px
}

}