:root{
	--bg:#0b0d10;
	--ink:#e7ecf2;
	--muted:#a6b0ba;
	--line:#212a32;
	--accent:#67d4ff;
	--accent-2:#8b5cf6;
	--radius:20px;
	--shadow:0 12px 32px rgba(0,0,0,.38);
}

*{box-sizing:border-box}
html,body{height:100%; overflow:hidden}
body{
	margin:0;
	min-height:100dvh;
	color:var(--ink);
	font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	background:var(--bg);
}

.bg{
	position:fixed;
	inset:0;
	z-index:-2;
	background:url('/fon/joinfon.webp') center/cover no-repeat;
}
.bg::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(rgba(6,8,10,.38), rgba(6,8,10,.5));
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
}

.container{
	height:100dvh;
	width:100%;
	margin:0 auto;
	display:grid;
	place-items:center;
	padding:0 16px;
}

.glass{
	background:rgba(18,22,27,.58);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
}
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){
	.glass{
		-webkit-backdrop-filter:saturate(140%) blur(12px);
		backdrop-filter:saturate(140%) blur(12px);
	}
}

.pause-card{
	width:min(760px, 100%);
	max-width:760px;
	padding:28px;
	text-align:center;
}

.badge{
	display:inline-block;
	margin:0 0 14px;
	padding:7px 12px;
	font-size:12px;
	font-weight:700;
	border-radius:999px;
	border:1px solid var(--line);
	background:rgba(12,16,20,.55);
}

h1{
	margin:0;
	font-size:clamp(30px,4.7vw,46px);
	line-height:1.1;
}

.text{
	margin:14px 0 0;
	color:var(--muted);
	font-size:18px;
	line-height:1.6;
}

.actions{
	margin-top:26px;
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	justify-content:center;
}

.site-footer{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:20;
}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	padding:12px 18px;
	border-radius:12px;
	border:1px solid var(--line);
	color:var(--ink);
	text-decoration:none;
	font-weight:700;
	background:transparent;
	transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.06)}

.btn-primary{
	color:#fff;
	border-color:rgb(0, 255, 179);
	background:rgba(30, 255, 161, 0.301);
	box-shadow:0 6px 18px rgba(51, 255, 0, 0.274);
}

.btn-home{
	color:#fff;
	border-color:rgba(0, 255, 179, 0.315);
	background:rgba(30, 255, 161, 0.158);
	box-shadow:0 6px 18px rgba(51, 255, 0, 0.11);
}

.btn-home:hover{filter:brightness(1.08)}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .45s ease}
.reveal.is-in{opacity:1; transform:none}

@media (max-width:640px){
	.pause-card{padding:20px}
	.text{font-size:16px}
}