.progress-section {
	width: 100%;
	margin: 0 auto 10px auto;
	background: rgba(13,110,179,0.10);
	border-radius: 16px;
	padding: 18px 10px 10px 10px;
	box-shadow: 0 2px 12px 0 rgba(13,110,179,0.08);
}

.progress-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #b3d1e6;
	margin-bottom: 10px;
	letter-spacing: 1px;
	text-align: left;
}

.progress-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.progress-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(255,255,255,0.04);
	font-size: 1rem;
	font-weight: 400;
	box-shadow: 0 1px 4px 0 rgba(13,110,179,0.04);
	transition: background 0.3s;
}
.progress-item.done {
	background: linear-gradient(90deg, #0d6eb3 0%, #1b386f 100%);
	color: #fff;
	font-weight: 600;
}
.progress-item.pending {
	opacity: 0.7;
	color: #b3d1e6;
}
.progress-item .icon {
	font-size: 1.3em;
	margin-right: 4px;
}
.progress-item .label {
	flex: 1;
	text-align: left;
}
.progress-item .status {
	font-size: 0.95em;
	font-style: italic;
	margin-left: 8px;
}

.powered-by {
	margin-top: 18px;
	font-size: 0.98rem;
	color: #b3d1e6;
	letter-spacing: 0.5px;
}
.brand {
	color: #0d6eb3;
	font-weight: 700;
	letter-spacing: 1px;
}

body {
	min-height: 100vh;
	background: linear-gradient(135deg, #0d6eb3 0%, #1b386f 100%);
	color: #fff;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin: 0;
}

.landing-container {
	background: rgba(10, 20, 40, 0.85);
	border-radius: 24px;
	box-shadow: 0 8px 32px 0 rgba(13, 110, 179, 0.25);
	padding: 64px 40px 56px 40px;
	max-width: 480px;
	width: 95vw;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	border: 1.5px solid rgba(13,110,179,0.18);
	backdrop-filter: blur(2px);
}
/* Progress Bar Steps */
.progress-bar-steps {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	margin: 24px 0 0 0;
	width: 100%;
}
.progress-bar-steps .step {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 70px;
	position: relative;
	z-index: 2;
}
.progress-bar-steps .circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #1b386f;
	color: #b3d1e6;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 700;
	border: 2.5px solid #b3d1e6;
	margin-bottom: 6px;
	transition: background 0.5s, color 0.5s, border 0.5s;
	box-shadow: 0 2px 8px 0 rgba(13,110,179,0.10);
}
.progress-bar-steps .step.done .circle {
	background: linear-gradient(135deg, #0d6eb3 60%, #1b386f 100%);
	color: #fff;
	border: 2.5px solid #0d6eb3;
	animation: pulse 1.2s infinite alternate;
}
.progress-bar-steps .step.pending .circle {
	background: #1b386f;
	color: #b3d1e6;
	border: 2.5px solid #b3d1e6;
	opacity: 0.7;
}
.progress-bar-steps .step-label {
	font-size: 0.98rem;
	color: #b3d1e6;
	font-weight: 500;
	margin-top: 2px;
	letter-spacing: 0.5px;
}
.progress-bar-steps .step.done .step-label {
	color: #fff;
	text-shadow: 0 2px 8px rgba(13,110,179,0.10);
}
.progress-bar-steps .bar {
	flex: 1;
	height: 6px;
	min-width: 32px;
	max-width: 60px;
	background: #b3d1e6;
	opacity: 0.3;
	border-radius: 4px;
	margin: 0 2px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.progress-bar-steps .bar.done {
	background: linear-gradient(90deg, #0d6eb3 0%, #1b386f 100%);
	opacity: 1;
	animation: progressBarAnim 2s linear infinite alternate;
}
.progress-bar-steps .bar.pending {
	background: #b3d1e6;
	opacity: 0.2;
}
@keyframes progressBarAnim {
	0% { filter: brightness(1.1); }
	100% { filter: brightness(0.7); }
}
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(13,110,179,0.18); }
	100% { box-shadow: 0 0 12px 4px rgba(13,110,179,0.22); }
}

.logo-modern {
	margin-bottom: 8px;
	animation: floatLogo 2.5s ease-in-out infinite alternate;
}

@keyframes floatLogo {
	0% { transform: translateY(0); }
	100% { transform: translateY(-10px); }
}

.main-title {
	font-size: 2.1rem;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 0 0 8px 0;
	color: #fff;
	text-shadow: 0 2px 8px rgba(13,110,179,0.15);
}

.subtitle {
	font-size: 1.1rem;
	font-weight: 400;
	color: #b3d1e6;
	margin: 0 0 12px 0;
	letter-spacing: 0.5px;
}

.soon {
	font-size: 1.5rem;
	font-weight: 600;
	color: #0d6eb3;
	background: linear-gradient(90deg, #fff 0%, #b3d1e6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	margin-top: 18px;
	letter-spacing: 2px;
	animation: blink 1.5s infinite alternate;
}

@keyframes blink {
	0% { opacity: 1; }
	100% { opacity: 0.5; }
}

@media (max-width: 600px) {
	.landing-container {
		padding: 20vw 2vw 12vw 2vw;
		max-width: 99vw;
		gap: 18px;
	}
	.main-title {
		font-size: 1.2rem;
	}
	.soon {
		font-size: 1.1rem;
	}
	.progress-bar-steps .step-label {
		font-size: 0.85rem;
	}
	.progress-bar-steps .circle {
		width: 28px;
		height: 28px;
		font-size: 1rem;
	}
	.progress-bar-steps .bar {
		min-width: 12px;
		max-width: 24px;
	}
}