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

:root {
	--pink-50: #fff5f8;
	--pink-100: #ffe3ec;
	--pink-200: #ffc9dc;
	--pink-300: #ffaac6;
	--pink-400: #ff8cb0;
	--pink-500: #ff6f9c;
	--pink-600: #f4588a;
	--pink-700: #d94578;
	--brown: #8a5a6a;
	--brown-deep: #6b4050;
}

html, body {
	height: 100%;
}

body {
	font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
	background:
		radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .9) 0 2.2%, transparent 2.6%),
		radial-gradient(circle at 78% 14%, rgba(255, 255, 255, .9) 0 2%, transparent 2.4%),
		radial-gradient(circle at 62% 8%, rgba(255, 255, 255, .75) 0 1.6%, transparent 2%),
		radial-gradient(circle at 32% 88%, rgba(255, 255, 255, .8) 0 1.8%, transparent 2.2%),
		radial-gradient(circle at 88% 78%, rgba(255, 255, 255, .85) 0 2.4%, transparent 2.9%),
		radial-gradient(circle at 8% 55%, rgba(255, 255, 255, .7) 0 1.5%, transparent 2%),
		linear-gradient(180deg, #ffe3ec 0%, #ffc9dc 55%, #ffb3cd 100%);
	min-height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: var(--brown-deep);
	position: relative;
}

a{
  color: #8a5a6a;
  text-decoration: none;
}

.blob {
	position: absolute;
	border-radius: 42% 58% 61% 39% / 45% 45% 55% 55%;
	background: rgba(255, 255, 255, .22);
	animation: blobFloat 9s ease-in-out infinite alternate;
	pointer-events: none;
}

.blob-1 {
	width: 180px;
	height: 180px;
	top: 6%;
	left: 4%;
	animation-delay: 0s;
}

.blob-2 {
	width: 120px;
	height: 120px;
	bottom: 8%;
	right: 6%;
	animation-delay: -3s;
}

.blob-3 {
	width: 90px;
	height: 90px;
	bottom: 16%;
	left: 10%;
	animation-delay: -6s;
}

.star {
	position: absolute;
	color: rgba(255, 255, 255, .85);
	font-size: 22px;
	animation: twinkle 2.6s ease-in-out infinite;
	pointer-events: none;
	user-select: none;
}

.star:nth-child(1) {
	top: 14%;
	left: 22%;
	animation-delay: 0s;
}

.star:nth-child(2) {
	top: 20%;
	right: 16%;
	animation-delay: .6s;
	font-size: 15px;
}

.star:nth-child(3) {
	bottom: 26%;
	left: 5%;
	animation-delay: 1.1s;
	font-size: 14px;
}

.star:nth-child(4) {
	bottom: 18%;
	right: 22%;
	animation-delay: 1.7s;
}

.star:nth-child(5) {
	top: 68%;
	right: 8%;
	animation-delay: 2.1s;
	font-size: 12px;
}

.cloud {
	position: absolute;
	background: rgba(255, 255, 255, .65);
	border-radius: 999px;
	pointer-events: none;
	animation: cloudDrift linear infinite;
}

.cloud::before,
.cloud::after {
	content: "";
	position: absolute;
	background: inherit;
	border-radius: 50%;
}

.cloud::before {
	width: 56%;
	height: 150%;
	bottom: -18%;
	left: 12%;
}

.cloud::after {
	width: 42%;
	height: 120%;
	bottom: -10%;
	right: 10%;
}

.cloud-1 {
	width: 150px;
	height: 42px;
	top: 10%;
	animation-duration: 46s;
}

.cloud-2 {
	width: 110px;
	height: 32px;
	top: 34%;
	animation-duration: 58s;
	animation-delay: -20s;
	opacity: .7;
}

.cloud-3 {
	width: 180px;
	height: 48px;
	top: 66%;
	animation-duration: 66s;
	animation-delay: -38s;
	opacity: .55;
}

.card {
	position: relative;
	z-index: 2;
	width: min(92vw, 620px);
	background: rgba(255, 255, 255, .78);
	backdrop-filter: blur(6px);
	border-radius: 40px;
	border: 3px solid #fff;
	box-shadow:
		0 24px 60px -22px rgba(217, 69, 120, .45),
		inset 0 0 0 6px rgba(255, 143, 176, .12);
	padding: 40px 36px 44px;
	text-align: center;
	animation: cardPop .7s cubic-bezier(.2, .9, .3, 1.4) both;
}

.ghost-wrap {
	margin: -10px auto 6px;
	width: 170px;
	filter: drop-shadow(0 14px 14px rgba(217, 69, 120, .22));
}

.ghost {
	animation: ghostFloat 3.4s ease-in-out infinite;
}

.code {
	font-size: clamp(64px, 16vw, 118px);
	font-weight: 800;
	letter-spacing: 6px;
	line-height: 1;
	background: linear-gradient(135deg, var(--pink-500), var(--pink-700) 55%, var(--pink-400));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 0 transparent;
	margin-bottom: 6px;
}

.title {
	font-size: clamp(20px, 4.6vw, 26px);
	font-weight: 700;
	color: var(--brown-deep);
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.desc {
	font-size: clamp(13px, 3.4vw, 15px);
	color: var(--brown);
	line-height: 1.9;
	margin-bottom: 26px;
	padding: 0 6px;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
	font-family: inherit;
}

.btn-primary {
	background: linear-gradient(135deg, var(--pink-400), var(--pink-600));
	color: #fff;
	box-shadow: 0 10px 22px -8px rgba(244, 88, 138, .65);
}

.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 28px -8px rgba(244, 88, 138, .75);
}

.btn-primary:active {
	transform: translateY(0);
}

.btn-ghost {
	background: #fff;
	color: var(--pink-600);
	border: 2px solid var(--pink-300);
}

.btn-ghost:hover {
	transform: translateY(-3px);
	background: var(--pink-100);
}

.btn svg {
	width: 18px;
	height: 18px;
}

.foot {
	margin-top: 26px;
	font-size: 12px;
	color: rgba(138, 90, 106, .72);
	letter-spacing: .5px;
}

.foot span {
	margin: 0 6px;
	animation: beat 1.6s ease-in-out infinite;
	display: inline-block;
}

@keyframes ghostFloat {

	0%,
	100% {
		transform: translateY(0) rotate(-1.5deg);
	}

	50% {
		transform: translateY(-12px) rotate(1.5deg);
	}
}

@keyframes blobFloat {
	from {
		transform: translateY(0) rotate(0deg) scale(1);
	}

	to {
		transform: translateY(-18px) rotate(16deg) scale(1.06);
	}
}

@keyframes twinkle {

	0%,
	100% {
		opacity: .25;
		transform: scale(.8) rotate(0deg);
	}

	50% {
		opacity: 1;
		transform: scale(1.15) rotate(22deg);
	}
}

@keyframes cloudDrift {
	from {
		left: -220px;
	}

	to {
		left: 110%;
	}
}

@keyframes cardPop {
	from {
		opacity: 0;
		transform: translateY(24px) scale(.92);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes beat {

	0%,
	100% {
		transform: scale(1);
	}

	20%,
	60% {
		transform: scale(1.25);
	}
}

@media (max-width: 520px) {
	.card {
		padding: 30px 18px 34px;
		border-radius: 30px;
	}

	.ghost-wrap {
		width: 140px;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}

	.cloud {
		display: none;
	}
}

.ProtectService{
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 200px;
    height: auto;
    z-index: 999;
}