.gradient-bg {
		min-height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background: linear-gradient(180deg, #4b3bbd 0%, #3ec6e0 100%);
		position: relative;
		overflow: hidden;
}
.logo-area {
		margin-top: 120rpx;
		text-align: center;
}
.logo-text {
		font-size: 64rpx;
		font-weight: bold;
		color: #fff;
		letter-spacing: 8rpx;
		font-family: 'Arial Rounded MT Bold', 'PingFang SC', sans-serif;
}
.lines {
		position: absolute;
		width: 100vw;
		height: 60vh;
		top: 20vh;
		left: 0;
		z-index: 1;
}
.line {
		position: absolute;
		width: 120rpx;
		height: 8rpx;
		border-radius: 8rpx;
}
.red { left: 30vw; top: 10vh; background: #ff5a5f; transform: rotate(60deg);
}
.yellow { right: 10vw; top: 20vh; background: #ffe066; transform: rotate(-30deg);
}
.green { left: 10vw; bottom: 10vh; background: #3ec6e0; transform: rotate(30deg);
}
.faces {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 200rpx;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 2;
}
.face {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background: #ffe066;
		margin: 0 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
}
.yellow-face { background: #ffe066;
}
.blue-face { background: #3ec6e0;
}
.face-eye {
		font-size: 24rpx;
		margin: 0 8rpx;
}
.face-mouth {
		font-size: 28rpx;
		margin-top: 8rpx;
}
.bubble {
		position: absolute;
		left: 50%;
		bottom: 120rpx;
		transform: translateX(-50%);
		background: #fff;
		color: #3ec6e0;
		border-radius: 20rpx;
		padding: 8rpx 24rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
		z-index: 3;
}