* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #0a0a0f;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.wrap {
	text-align: center;
	padding: 40px 20px;
}

.logo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 30px;
	animation: fadeIn .6s ease both;
}

.title {
	font-size: 3.5rem;
	font-weight: 800;
	letter-spacing: 9px;
	text-transform: uppercase;
	margin-bottom: 6px;
	animation: fadeUp .6s ease .15s both;
}

.sub {
	font-size: 1.2rem;
	color: rgba(255, 255, 255, 0.35);
	text-transform: uppercase;
	letter-spacing: 9px;
	margin-bottom: 60px;
	animation: fadeUp .6s ease .3s both;
}

.social {
	display: flex;
	gap: 20px;
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap;
	padding: 10px 16px 0;
}

.link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.06);
	transform-origin: center bottom;
	transition: transform .18s cubic-bezier(.25, .1, .25, 1), background .2s;
	animation: show .5s ease both;
	will-change: transform;
}

.link:nth-child(1) { animation-delay: .4s; }
.link:nth-child(2) { animation-delay: .48s; }
.link:nth-child(3) { animation-delay: .56s; }
.link:nth-child(4) { animation-delay: .64s; }
.link:nth-child(5) { animation-delay: .72s; }
.link:nth-child(6) { animation-delay: .8s; }

.link img {
	width: 42px;
	height: 42px;
	object-fit: contain;
}

.link:hover {
	background: rgba(255, 255, 255, 0.12);
}

@keyframes fadeIn {
	from { opacity: 0; transform: scale(.8); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes show {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
	.title { font-size: 2.5rem; }
	.social { gap: 18px; }
	.link { width: 70px; height: 70px; }
	.link img { width: 35px; height: 35px; }
}
