.app-header {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 0 14px;
	height: 68px;
}

.app-header.scrolled {
	height: 62px;
	box-shadow: 0 2px 20px #1f53a51a;
}

.header-logo {
	gap: 8px;
}

.header-logo img {
	height: 60px;
}

.header-logo span {
	font-size: 14px;
	letter-spacing: -0.35px;
}

.header-cta {
	padding: 9px 18px;
	font-size: 12px;
}

.footer-brand img {
	width: 88px;
	height: 88px;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}

.minigame-visual {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-right: 20px;
}

.minigame-visual-dna {
	width: 228px;
	height: 228px;
	border-radius: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #ffd16629, #ffffff14);
	border: 1px solid rgba(255, 209, 102, 0.28);
	box-shadow: 0 22px 38px #faa21a2e, inset 0 1px #ffffff24;
	backdrop-filter: blur(10px);
}

.minigame-visual i {
	font-size: 116px;
	color: var(--accent-light);
	filter: drop-shadow(0 18px 26px rgba(250, 162, 26, 0.32));
}

.minigame-visual-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 999px;
	background: #ffffff14;
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #ffe9b0;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@keyframes faqEdgeBreath {
	0%,
	100% {
		box-shadow: 0 12px 24px rgba(8, 44, 82, 0.24);
		border-color: rgba(250, 162, 26, 0.52);
		transform: translateX(0);
	}
	40% {
		box-shadow: 0 14px 30px rgba(8, 44, 82, 0.34), 0 0 0 2px rgba(250, 162, 26, 0.1);
		border-color: rgba(250, 162, 26, 0.72);
		transform: translateX(-1px);
	}
	70% {
		box-shadow: 0 10px 22px rgba(8, 44, 82, 0.2);
		border-color: rgba(250, 162, 26, 0.42);
	}
}

.faq-edge-tab {
	animation: faqEdgeBreath 3.6s ease-in-out infinite;
	will-change: transform, box-shadow;
}

.faq-edge-tab:hover {
	animation-duration: 2.6s;
}

@media (prefers-reduced-motion: reduce) {
	.faq-edge-tab {
		animation: none;
	}
}

@media (min-width: 768px) {
	.desktop-nav a {
		font-size: 13px;
		padding: 7px 13px;
	}

	.desktop-nav .nav-highlight {
		padding: 7px 14px;
	}

	.app-header {
		padding: 0 clamp(16px, 2.3vw, 34px);
		height: 74px;
		gap: 10px;
	}

	.app-header.scrolled {
		height: 66px;
	}

	.header-logo img {
		height: 72px;
	}

	.header-logo span {
		font-size: 17px;
		letter-spacing: -0.2px;
	}

	.header-cta {
		padding: 10px 18px;
		font-size: 13px;
	}
}

@media (max-width: 991px) {
	.minigame-visual {
		margin: 20px 0 0;
	}

	.minigame-visual-dna {
		width: 186px;
		height: 186px;
	}

	.minigame-visual i {
		font-size: 94px;
	}

	.minigame-visual-label {
		font-size: 12px;
		padding: 7px 14px;
	}
}

@media (max-width: 767px) {
	.app-header {
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}

	.soft-cta-pill {
		left: auto;
		right: 12px;
		bottom: calc(104px + env(safe-area-inset-bottom, 0px));
		width: auto;
		max-width: min(248px, calc(100vw - 24px));
		padding: 10px 12px;
		border-radius: 18px;
		z-index: 980;
	}

	.soft-cta-pill span {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.minigame-visual {
		margin-top: 12px;
	}

	.minigame-visual-dna {
		width: 152px;
		height: 152px;
		border-radius: 28px;
		backdrop-filter: none;
	}

	.minigame-visual i {
		font-size: 76px;
	}

	.minigame-visual-label {
		font-size: 11px;
		padding: 6px 12px;
	}
}

@media (max-width: 600px) {
	.app-header {
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}

	.footer-brand img {
		width: 80px;
		height: 80px;
	}
}

/* A11y contrast hardening for form progress text */
.fp-step span {
	color: #10263f;
	background: #e5edf8;
	border-color: #8ba0b8;
}

.fp-step small {
	color: #4d637d;
}