/* ========================
   FONTS
   ======================== */

/* Archivo — variable grotesque, used at wide width as an
   SF Pro Expanded / Ultrawide stand-in for headlines. */
@font-face {
	font-family: 'Archivo';
	src: url('fonts/Archivo[wdth,wght].ttf') format('truetype-variations');
	font-weight: 100 900;
	font-stretch: 62.5% 125%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('fonts/Inter[opsz,wght].ttf') format('truetype-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ========================
   TOKENS
   ======================== */

:root {
	--bg: #EAF3FB;
	--bg-sunk: rgba(10, 40, 70, 0.05);
	--ink: #16283a;
	--ink-soft: #4d6377;
	--ink-faint: #8095a7;
	--rule: rgba(16, 45, 75, 0.12);
	--shadow: 0 10px 30px rgba(16, 45, 75, 0.16);
	--accent: #C2410C;
}

/* ========================
   RESET & BASE
   ======================== */

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

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	line-height: 1.6;
	color: var(--ink);
	background-color: var(--bg);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
}

/* ========================
   TYPOGRAPHY
   ======================== */

h1, h2, h3 {
	font-family: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
	font-variation-settings: 'wdth' 125;
	font-stretch: 125%;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.12;
	color: var(--ink);
}

a {
	color: var(--ink-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--ink);
}

/* ========================
   COVER
   ======================== */

.cover {
	position: relative;
	width: 100%;
	height: clamp(220px, 34vw, 420px);
	overflow: hidden;
}

.cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	display: block;
}

/* Fade the photo into the page background instead of cutting it off. */
.cover::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(to bottom, transparent, var(--bg));
	pointer-events: none;
}

/* ========================
   HERO
   ======================== */

.hero {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 2rem 4rem;
}

.app-icon {
	width: 128px;
	height: 128px;
	margin-top: -64px;
	margin-bottom: 1.25rem;
	border-radius: 28px;
	box-shadow: var(--shadow);
}

.app-name {
	font-size: clamp(2rem, 6vw, 3rem);
	margin-bottom: 0.35rem;
}

.app-subtitle {
	font-family: 'Archivo', sans-serif;
	font-variation-settings: 'wdth' 112;
	font-weight: 500;
	font-size: clamp(0.95rem, 2.2vw, 1.15rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 1.5rem;
}

.app-tagline {
	font-size: 1.05rem;
	color: var(--ink-soft);
	max-width: 560px;
	margin-bottom: 2rem;
	line-height: 1.7;
}

kbd {
	font-family: 'Inter', sans-serif;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--ink);
	background: var(--bg-sunk);
	border: 1px solid var(--rule);
	border-radius: 6px;
	padding: 0.05em 0.4em;
	white-space: nowrap;
}

.store-badges {
	display: flex;
	gap: 1rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.app-store-badge {
	height: 60px;
	width: auto;
	transition: transform 0.2s ease;
}

.app-store-badge:hover {
	transform: scale(1.05);
}

/* ========================
   FEATURES
   ======================== */

.features {
	width: 100%;
}

.feature {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3.5rem;
	padding: 4rem 2rem;
	max-width: 1100px;
	margin: 0 auto;
}

.feature--reversed {
	flex-direction: row-reverse;
}

.feature__image-wrapper {
	flex: 1 1 45%;
	max-width: 400px;
}

.feature__image {
	display: block;
	width: 100%;
	height: auto;
}

.feature__content {
	flex: 1 1 45%;
	max-width: 440px;
}

.feature__title {
	font-size: clamp(1.4rem, 3.2vw, 1.9rem);
	margin-bottom: 1rem;
}

.feature__text {
	font-size: 1rem;
	color: var(--ink-soft);
	line-height: 1.75;
}

.feature-divider {
	width: 120px;
	height: 2px;
	background-color: var(--rule);
	margin: 0 auto;
}

/* ========================
   PRIVACY NOTE
   ======================== */

.note {
	max-width: 620px;
	margin: 0 auto;
	padding: 3.5rem 2rem 4.5rem;
	text-align: center;
}

.note h2 {
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	margin-bottom: 0.9rem;
}

.note p {
	color: var(--ink-soft);
	line-height: 1.8;
}

/* ========================
   CONTENT PAGES
   ======================== */

.content {
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem;
	flex: 1;
	width: 100%;
}

.content h1 {
	font-size: 2rem;
	margin-bottom: 1.5rem;
}

.content h2 {
	font-size: 1.3rem;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.content p {
	margin-bottom: 1rem;
	line-height: 1.8;
	color: var(--ink-soft);
}

.content ul {
	margin-bottom: 1rem;
	padding-left: 1.5rem;
}

.content li {
	margin-bottom: 0.4rem;
	line-height: 1.8;
	color: var(--ink-soft);
}

.content strong {
	font-weight: 600;
	color: var(--ink);
}

.content em {
	color: var(--ink-faint);
}

.content .emphasis {
	font-weight: 600;
}

.back-link {
	display: inline-block;
	margin-bottom: 1.5rem;
	color: var(--ink-faint);
	text-decoration: none;
	font-size: 0.9rem;
}

.back-link:hover {
	color: var(--ink);
}

/* ========================
   CLOSING BALLOONS
   ======================== */

/* Das Standbild aus dem Über-Fenster: in @3x gerendert, auf 1x abgebildet. */
.balloons {
	display: flex;
	justify-content: center;
	padding: 1rem 1.5rem 2.5rem;
}

.balloons img {
	width: 353px;
	height: auto;
	transition: opacity 0.3s ease;
}

.balloons img.is-hidden {
	opacity: 0;
}

/* Die interaktive Bühne ragt oben und unten über den Abschnitt hinaus und
   scrollt mit der Seite; Klicks gehen durch, Treffer fängt das Skript ab. */
.balloons {
	position: relative;
}

.balloon-canvas {
	position: absolute;
	left: 0;
	width: 100%;
	pointer-events: none;
	/* Oben und unten weich auslaufen, statt an der Kante abzuschneiden. */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 calc(100% - 60px), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 calc(100% - 60px), transparent 100%);
	z-index: 10;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.balloon-canvas.is-ready {
	opacity: 1;
}

html[data-balloon-cursor="pop"],
html[data-balloon-cursor="pop"] * {
	cursor: crosshair !important;
}

html[data-balloon-cursor="release"],
html[data-balloon-cursor="release"] * {
	cursor: pointer !important;
}

html[data-balloon-cursor="cut"],
html[data-balloon-cursor="cut"] * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4'/%3E%3Ccircle cx='7' cy='21' r='4'/%3E%3Cpath d='M10 9 25 21M10 19 25 7'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4'/%3E%3Ccircle cx='7' cy='21' r='4'/%3E%3Cpath d='M10 9 25 21M10 19 25 7'/%3E%3C/g%3E%3C/svg%3E") 7 14, crosshair !important;
}

html[data-balloon-cursor="snip"],
html[data-balloon-cursor="snip"] * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='7' cy='10' r='4'/%3E%3Ccircle cx='7' cy='18' r='4'/%3E%3Cpath d='M10 12 25 15M10 16 25 13'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='10' r='4'/%3E%3Ccircle cx='7' cy='18' r='4'/%3E%3Cpath d='M10 12 25 15M10 16 25 13'/%3E%3C/g%3E%3C/svg%3E") 7 14, crosshair !important;
}

/* ========================
   FOOTER
   ======================== */

/* Yanlu-Signatur wie im Über-Fenster: als Maske, damit sie beiden
   Erscheinungsbildern folgt. */
.signature {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto 0.9rem;
	background-color: var(--ink-faint);
	-webkit-mask: url('img/yanlu-logo.png') center / contain no-repeat;
	mask: url('img/yanlu-logo.png') center / contain no-repeat;
	opacity: 0.75;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.signature:hover {
	background-color: var(--ink);
	opacity: 1;
}

footer {
	background-color: var(--bg-sunk);
	padding: 1.75rem 1rem 1.5rem;
	text-align: center;
	border-top: 1px solid var(--rule);
	width: 100%;
	margin-top: auto;
}

footer .links {
	margin-bottom: 0.5rem;
}

footer a {
	color: var(--ink-soft);
	text-decoration: none;
	margin: 0 1rem;
	font-size: 0.9rem;
	transition: color 0.2s ease;
}

footer a:hover {
	color: var(--ink);
}

footer .copyright {
	color: var(--ink-faint);
	font-size: 0.8rem;
}

footer .disclaimer {
	color: var(--ink-faint);
	font-size: 0.75rem;
	margin-top: 0.4rem;
}

/* ========================
   DARK MODE
   ======================== */

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0E1E2E;
		--bg-sunk: rgba(255, 255, 255, 0.05);
		--ink: #E7EFF7;
		--ink-soft: #9FB3C4;
		--ink-faint: #6F8598;
		--rule: rgba(255, 255, 255, 0.12);
		--shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
		--accent: #F59E0B;
	}
}

/* ========================
   RESPONSIVE
   ======================== */

@media (max-width: 768px) {
	.hero {
		padding: 0 1.25rem 2.5rem;
	}

	.app-icon {
		width: 100px;
		height: 100px;
		margin-top: -50px;
		border-radius: 22px;
	}

	.app-tagline {
		font-size: 0.95rem;
	}

	.app-store-badge {
		height: 44px;
	}

	.feature,
	.feature--reversed {
		flex-direction: column;
		gap: 1.75rem;
		padding: 2.5rem 1.5rem;
		text-align: center;
	}

	.feature__image-wrapper,
	.feature__content {
		max-width: 100%;
	}

	.feature__image-wrapper {
		max-width: 320px;
	}

	.note {
		padding: 2.5rem 1.25rem 3rem;
	}

	.balloons {
		padding: 0.5rem 1.25rem 2rem;
	}

	.balloons img {
		width: min(100%, 300px);
	}

	.content {
		padding: 1.5rem 1.25rem;
	}

	.content h1 {
		font-size: 1.6rem;
	}
}