.topnav-quasi {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: transparent;
	border-bottom: none;
}
.topnav-quasi .topnav-inner {
	max-width: 860px;
	margin: 0 auto;
	padding: 18px 0;
	display: flex;
	align-items: center;
	gap: 16px;
}
.topnav-quasi .nav-link {
	color: var(--hero-ink);
	opacity: .85;
	font-size: .88rem;
	text-decoration: none;
}
.topnav-quasi .nav-link:hover {
	opacity: 1;
	color: var(--hero-ink);
	text-decoration: none;
}
.topnav-quasi .theme-toggle {
	border-color: var(--hero-ink);
	color: var(--hero-ink);
	margin-left: auto;
}

html[data-mode="light"] .hero-quasi {
	background:
		radial-gradient(ellipse 90% 60% at 75% 20%, rgba(255, 235, 195, .8) 0%, rgba(255, 210, 225, .45) 45%, transparent 75%),
		radial-gradient(circle at 20% 85%, rgba(195, 235, 245, .6) 0%, transparent 60%),
		linear-gradient(145deg, #d8e5f2 0%, #e8dff0 40%, #fae6df 75%, #fdf2db 100%);
	color: #2b3947;
	--hero-ink: #2b3947;
	--hero-muted: rgba(43, 57, 71, .75);
}

html[data-mode="dark"] .hero-quasi {
	background:
		radial-gradient(ellipse 90% 65% at 80% 25%, rgba(138, 77, 212, .32) 0%, rgba(53, 172, 214, .18) 50%, transparent 75%),
		radial-gradient(circle at 15% 75%, rgba(224, 86, 176, .2) 0%, transparent 60%),
		linear-gradient(145deg, #0e111a 0%, #151a2e 45%, #1a162b 75%, #12101f 100%);
	color: #edf2fb;
	--hero-ink: #edf2fb;
	--hero-muted: rgba(237, 242, 251, .72);
}

.quasi-visual {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.quasi-mist {
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(ellipse at 40% 50%, rgba(255, 255, 255, .15) 0%, transparent 60%),
		radial-gradient(ellipse at 70% 30%, rgba(255, 220, 240, .2) 0%, transparent 50%);
	filter: blur(28px);
	animation: quasiMistDrift 22s ease-in-out infinite alternate;
}
html[data-mode="dark"] .quasi-mist {
	background:
		radial-gradient(ellipse at 40% 50%, rgba(110, 140, 245, .16) 0%, transparent 60%),
		radial-gradient(ellipse at 75% 30%, rgba(210, 90, 230, .18) 0%, transparent 50%);
	filter: blur(34px);
}
@keyframes quasiMistDrift {
	0% { transform: scale(1) translate(0, 0); }
	50% { transform: scale(1.08) translate(-2%, 2%); }
	100% { transform: scale(1.03) translate(2%, -1%); }
}

.quasi-rays {
	position: absolute;
	top: -40%;
	right: -10%;
	width: 120%;
	height: 160%;
	background: repeating-linear-gradient(
		-35deg,
		rgba(255, 255, 255, .08) 0px,
		rgba(255, 255, 255, .08) 35px,
		transparent 35px,
		transparent 90px
	);
	mask-image: radial-gradient(circle at 75% 25%, black 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(circle at 75% 25%, black 20%, transparent 75%);
	animation: quasiRaysShift 16s ease-in-out infinite alternate;
}
html[data-mode="dark"] .quasi-rays {
	background: repeating-linear-gradient(
		-35deg,
		rgba(175, 220, 255, .09) 0px,
		rgba(175, 220, 255, .09) 40px,
		transparent 40px,
		transparent 110px
	);
	mask-image: radial-gradient(circle at 80% 25%, black 20%, transparent 80%);
	-webkit-mask-image: radial-gradient(circle at 80% 25%, black 20%, transparent 80%);
}
@keyframes quasiRaysShift {
	0% { opacity: .55; transform: rotate(0deg); }
	100% { opacity: .9; transform: rotate(3deg) scale(1.04); }
}

.quasi-cluster {
	position: absolute;
	inset: 0;
}

.quasi-sphere {
	position: absolute;
	border-radius: 50%;
	mix-blend-mode: screen;
	will-change: transform, opacity;
}

html[data-mode="light"] .quasi-sphere {
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0%, rgba(255, 245, 215, .7) 18%, rgba(255, 185, 225, .55) 45%, rgba(165, 220, 255, .5) 70%, rgba(200, 185, 255, .65) 90%),
		radial-gradient(circle at 70% 75%, rgba(140, 235, 215, .5) 0%, transparent 60%);
	box-shadow:
		inset 0 0 16px rgba(255, 255, 255, .9),
		inset -3px -5px 14px rgba(180, 140, 235, .45),
		0 0 24px rgba(255, 210, 240, .6),
		0 0 45px rgba(170, 220, 255, .4);
	border: 1px solid rgba(255, 255, 255, .75);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

html[data-mode="dark"] .quasi-sphere {
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .95) 0%, rgba(220, 190, 255, .65) 20%, rgba(95, 215, 255, .45) 50%, rgba(225, 110, 245, .4) 75%, rgba(85, 95, 235, .55) 100%),
		radial-gradient(circle at 72% 78%, rgba(65, 245, 205, .45) 0%, transparent 60%);
	box-shadow:
		inset 0 0 20px rgba(255, 255, 255, .85),
		inset -4px -6px 18px rgba(175, 75, 250, .6),
		0 0 30px rgba(130, 95, 255, .65),
		0 0 60px rgba(70, 215, 255, .45),
		0 0 90px rgba(230, 90, 210, .3);
	border: 1.2px solid rgba(225, 235, 255, .85);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.quasi-sphere::after {
	content: "";
	position: absolute;
	top: 14%;
	left: 18%;
	width: 32%;
	height: 22%;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 80%);
	transform: rotate(-30deg);
}

.qs-1 {
	width: 170px;
	height: 170px;
	right: 10%;
	top: 16%;
	animation: quasiFloat1 11s ease-in-out infinite, quasiTremble 3.5s ease-in-out infinite alternate;
}
.qs-2 {
	width: 110px;
	height: 110px;
	right: 24%;
	top: 48%;
	animation: quasiFloat2 13s ease-in-out infinite 1s, quasiTremble 3s ease-in-out infinite alternate .4s;
}
.qs-3 {
	width: 85px;
	height: 85px;
	right: 5%;
	top: 54%;
	animation: quasiFloat3 9s ease-in-out infinite 2s, quasiTremble 4s ease-in-out infinite alternate .8s;
}
.qs-4 {
	width: 60px;
	height: 60px;
	right: 31%;
	top: 24%;
	animation: quasiFloat1 8s ease-in-out infinite 1.5s, quasiTremble 3.2s ease-in-out infinite alternate;
}
.qs-5 {
	width: 130px;
	height: 130px;
	left: 4%;
	top: 28%;
	animation: quasiFloat2 14s ease-in-out infinite 2.5s, quasiTremble 4.2s ease-in-out infinite alternate 1s;
	opacity: .75;
}
.qs-6 {
	width: 70px;
	height: 70px;
	left: 18%;
	top: 60%;
	animation: quasiFloat3 10s ease-in-out infinite .5s, quasiTremble 2.8s ease-in-out infinite alternate;
	opacity: .65;
}
.qs-7 {
	width: 45px;
	height: 45px;
	right: 18%;
	top: 76%;
	animation: quasiFloat1 7s ease-in-out infinite 3s, quasiTremble 3s ease-in-out infinite alternate;
}

@keyframes quasiFloat1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(-14px, -18px) scale(1.04); }
	66% { transform: translate(12px, -8px) scale(.97); }
}
@keyframes quasiFloat2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(16px, -14px) scale(.96); }
	66% { transform: translate(-10px, -22px) scale(1.05); }
}
@keyframes quasiFloat3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-8px, -16px) scale(1.06); }
}

@keyframes quasiTremble {
	0% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .4)); }
	50% { filter: drop-shadow(1px -1px 14px rgba(200, 160, 255, .7)); }
	100% { filter: drop-shadow(-1px 1px 12px rgba(120, 220, 255, .6)); }
}

.hero-quasi {
	padding: 92px 24px 64px;
}
.hero-quasi-inner {
	max-width: 860px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.hero-quasi-text {
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 22px;
	margin-left: -22px;
	margin-right: -22px;
	border-radius: 22px;
}
html[data-mode="dark"] .hero-quasi-text {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	background: rgba(13, 16, 26, .52);
	box-shadow: 0 10px 32px -10px rgba(0, 0, 0, .45);
}
.hero-quasi .hero-title {
	font-size: clamp(1.4rem, 2.8vw, 2.2rem);
	margin: 0 0 16px;
	line-height: 1.25;
}
.hero-quasi .hero-tagline {
	font-size: 1.05rem;
	line-height: 1.65;
}

.article-content {
	max-width: 860px;
	margin: 0 auto;
	padding-top: 48px;
}
.article-lead {
	font-size: 1.15rem;
	line-height: 1.8;
	color: var(--prose);
	margin-bottom: 24px;
}
.article-section {
	border-top: 1px dashed var(--line);
	padding: 36px 0 28px;
}
.article-section h2 {
	font-size: clamp(1.35rem, 2.6vw, 1.8rem);
	margin-bottom: 18px;
}
.article-text p {
	font-family: var(--sans);
	font-size: 1.06rem;
	line-height: 1.75;
	color: var(--prose);
	margin: 0 0 16px;
}
.article-text p:last-child {
	margin-bottom: 0;
}
.feature-list {
	margin: 18px 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.feature-list li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	color: var(--prose);
	font-size: 1.02rem;
	line-height: 1.65;
}
.feature-list li::before {
	content: "✦";
	flex: 0 0 auto;
	color: var(--accent);
	font-size: 1rem;
	line-height: 1;
}
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 20px;
}
.faq-item {
	padding: 22px 24px;
	border: 1px dashed var(--line);
	border-radius: 14px;
	background: transparent;
	transition: background .25s ease;
}
.faq-item:hover {
	background: var(--accent-wash);
}
.faq-question {
	font-family: var(--mono);
	font-weight: 600;
	font-size: 1.1rem;
	letter-spacing: -.01em;
	color: var(--ink);
	margin: 0 0 12px;
	transition: color .2s ease;
}
.faq-item:hover .faq-question {
	color: var(--accent);
}
.faq-answer {
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--prose);
	margin: 0;
}

.disclaimer-banner {
	position: fixed;
	bottom: 24px;
	left: 24px;
	right: 24px;
	max-width: 860px;
	margin: 0 auto;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding: 18px 24px;
	background: linear-gradient(135deg, #743494 0%, #582173 100%);
	color: #ffffff;
	border: 1.5px solid rgba(255, 255, 255, .28);
	border-radius: 18px;
	box-shadow: 0 20px 48px -10px rgba(35, 8, 50, .55), 0 0 0 1px rgba(255, 255, 255, .1);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	opacity: 0;
	transform: translateY(32px);
	pointer-events: none;
	transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}
.disclaimer-banner.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.disclaimer-banner.is-hidden {
	opacity: 0;
	transform: translateY(24px);
	pointer-events: none;
	transition: opacity .4s ease, transform .4s ease;
}
.disclaimer-text {
	font-size: .92rem;
	line-height: 1.6;
	color: #f7effd;
	margin: 0;
}
.disclaimer-text strong {
	color: #ffffff;
	font-weight: 700;
}
.disclaimer-btn {
	flex: 0 0 auto;
	padding: 9px 26px;
	font-family: var(--mono);
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .03em;
	border-radius: 999px;
	background: #ffffff;
	color: #5d257a;
	border: 1.5px solid #ffffff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
	transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.disclaimer-btn:hover {
	background: #f5ebfa;
	color: #491763;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.disclaimer-btn:active {
	transform: translateY(1px);
}

@media (max-width: 908px) {
	.topnav-quasi .topnav-inner {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 760px) {
	.hero-quasi {
		padding: 76px 18px 44px;
	}
	.hero-quasi-text {
		padding: 18px 18px;
		margin-left: -18px;
		margin-right: -18px;
		border-radius: 0;
	}
	html[data-mode="dark"] .hero-quasi-text {
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		background: rgba(12, 14, 22, .76);
		box-shadow: 0 12px 36px -8px rgba(0, 0, 0, .65);
		border-top: 1px solid rgba(255, 255, 255, .08);
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		border-left: none;
		border-right: none;
	}
	html[data-mode="dark"] .hero-quasi .hero-title {
		text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
	}
	html[data-mode="dark"] .hero-quasi .hero-tagline {
		color: rgba(240, 244, 255, .92);
		text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
	}
	.disclaimer-banner {
		left: 14px;
		right: 14px;
		bottom: 14px;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 16px 18px;
	}
	.disclaimer-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}