.cinematic-hero {
	position: relative;
	min-height: 88vh;
}

.cinematic-scroll-cue {
	position: absolute;
	z-index: 4;
	bottom: 1.5rem;
	left: 50%;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	transform: translateX(-50%);
	color: var(--qc-muted);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-decoration: none;
	text-transform: uppercase;
}

.cinematic-opening {
	min-height: 90vh;
	display: grid;
	align-items: center;
	padding-block: clamp(5rem,12vw,10rem);
	background: #050607;
}

.cinematic-opening-inner {
	text-align: center;
}

.cinematic-opening h2 {
	margin-bottom: 2rem;
	font-size: clamp(3rem,8vw,7.5rem);
}

.cinematic-line {
	margin: .1rem 0;
	color: var(--qc-muted);
	font-size: clamp(1.45rem,4vw,3.2rem);
	font-weight: 700;
	line-height: 1.22;
}

.cinematic-turn {
	max-width: 760px;
	margin: 3rem auto 0;
	color: #fff;
	font-size: clamp(1.55rem,4vw,3.4rem);
	font-weight: 900;
	line-height: 1.15;
}

.cinematic-chapter {
	--qc-chapter-image: none;
	position: relative;
	min-height: 82vh;
	display: grid;
	align-items: center;
	overflow: hidden;
	background:
		linear-gradient(90deg,rgba(7,9,12,.94),rgba(7,9,12,.55)),
		var(--qc-chapter-image),
		radial-gradient(circle at 75% 30%,rgba(211,169,77,.18),transparent 36%),
		linear-gradient(135deg,#171d26,#07090c);
	background-position: center;
	background-size: cover;
	border-top: 1px solid var(--qc-border);
}

.cinematic-chapter-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,rgba(9,11,14,.1),rgba(9,11,14,.56)),
		linear-gradient(90deg,rgba(9,11,14,.78),transparent 72%);
}

.cinematic-chapter-content {
	position: relative;
	z-index: 2;
	max-width: 760px;
	padding-block: clamp(6rem,12vw,10rem);
}

.cinematic-content-right {
	margin-left: auto;
}

.cinematic-chapter h2 {
	font-size: clamp(2.7rem,6vw,5.6rem);
}

.cinematic-chapter p {
	color: #d7dae0;
	font-size: clamp(1.05rem,2vw,1.3rem);
}

.cinematic-quote-section {
	padding-block: clamp(5rem,11vw,9rem);
	background:
		radial-gradient(circle at 50% 50%,rgba(211,169,77,.12),transparent 40%),
		var(--qc-surface);
	border-block: 1px solid var(--qc-border);
}

.cinematic-quote {
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
}

.cinematic-quote p {
	font-size: clamp(2.3rem,7vw,6.4rem);
	line-height: 1.04;
}

.cinematic-platform-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.cinematic-platform-card {
	min-height: 260px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.5rem;
	border: 1px solid var(--qc-border);
	border-radius: var(--qc-radius);
	background:
		radial-gradient(circle at 75% 20%,rgba(211,169,77,.16),transparent 40%),
		linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
	box-shadow: var(--qc-shadow);
	color: #fff;
	text-decoration: none;
}

.cinematic-platform-card span {
	margin-bottom: auto;
	color: var(--qc-gold-light);
	font-size: .75rem;
	font-weight: 900;
	letter-spacing: .14em;
}

.cinematic-platform-card h3 {
	font-size: clamp(1.7rem,3.5vw,2.6rem);
}

.cinematic-platform-card p {
	margin-bottom: 0;
	color: var(--qc-muted);
}

.cinematic-closing {
	min-height: 70vh;
	display: grid;
	align-items: center;
	padding-block: clamp(6rem,12vw,10rem);
	background:
		radial-gradient(circle at 50% 45%,rgba(211,169,77,.17),transparent 35%),
		#060708;
	text-align: center;
}

.cinematic-closing h2 {
	font-size: clamp(2.6rem,7vw,6.2rem);
}

.cinematic-closing-actions {
	justify-content: center;
}

.cinematic-about-opening {
	min-height: 78vh;
	display: grid;
	align-items: center;
	padding-block: clamp(6rem,12vw,10rem);
	background:
		radial-gradient(circle at 80% 20%,rgba(211,169,77,.18),transparent 35%),
		linear-gradient(135deg,#171d26,#08090b);
	border-bottom: 1px solid var(--qc-border);
}

.cinematic-about-opening h1 {
	font-size: clamp(4rem,11vw,10rem);
}

.cinematic-about-deck {
	max-width: 780px;
	color: var(--qc-muted);
	font-size: clamp(1.25rem,3vw,2rem);
}

.cinematic-about-sequence {
	padding-block: clamp(5rem,10vw,8rem);
	background: #050607;
}

.cinematic-sequence-copy p {
	margin: .15rem 0;
	font-size: clamp(1.8rem,5vw,4.2rem);
	font-weight: 850;
	line-height: 1.16;
}

.cinematic-prose {
	font-size: 1.08rem;
}

.cinematic-prose h2 {
	margin-top: 4rem;
}

.cinematic-inline-quote {
	margin-block: 3rem;
}

.cinematic-about-principles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-block: 3rem;
}

.cinematic-about-principles div {
	padding: 1.3rem;
	border: 1px solid var(--qc-border);
	border-radius: 14px;
	background: var(--qc-surface);
}

.cinematic-about-principles span {
	display: block;
	margin-bottom: .6rem;
	color: var(--qc-gold-light);
	font-size: .75rem;
	font-weight: 900;
	letter-spacing: .14em;
}

.cinematic-about-principles strong {
	font-size: 1.2rem;
}

.cinematic-editor-content:empty {
	display: none;
}

@media (min-width: 760px) {
	.cinematic-platform-grid {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}

	.cinematic-about-principles {
		grid-template-columns: repeat(3,minmax(0,1fr));
	}
}

@media (min-width: 1080px) {
	.cinematic-chapter-overlay {
		background:
			linear-gradient(180deg,rgba(9,11,14,.08),rgba(9,11,14,.40)),
			linear-gradient(90deg,rgba(9,11,14,.88) 0%,rgba(9,11,14,.22) 62%,transparent 100%);
	}

	.cinematic-content-right {
		padding-left: 4rem;
	}

	.cinematic-chapter:has(.cinematic-content-right) .cinematic-chapter-overlay {
		background:
			linear-gradient(180deg,rgba(9,11,14,.08),rgba(9,11,14,.40)),
			linear-gradient(270deg,rgba(9,11,14,.88) 0%,rgba(9,11,14,.22) 62%,transparent 100%);
	}
}

@media (prefers-reduced-motion:no-preference) {
	.cinematic-line,
	.cinematic-turn,
	.cinematic-chapter-content,
	.cinematic-platform-card,
	.cinematic-about-sequence p {
		opacity: .001;
		transform: translateY(24px);
		transition: opacity .55s ease,transform .55s ease;
	}

	.cinematic-line.is-visible,
	.cinematic-turn.is-visible,
	.cinematic-chapter-content.is-visible,
	.cinematic-platform-card.is-visible,
	.cinematic-about-sequence p.is-visible {
		opacity: 1;
		transform: none;
	}

	.cinematic-scroll-cue {
		animation: qc-cinematic-bob 1.8s ease-in-out infinite;
	}

	@keyframes qc-cinematic-bob {
		0%,100% { transform: translate(-50%,0); }
		50% { transform: translate(-50%,.45rem); }
	}
}