/* =====================================================================
   OFERTA PLUS - shared stylesheet (white + navy)
   Sections: fonts, tokens, base, type, buttons, nav, hero, sections,
   process, segments, insight, deliverables, quotes, pricing,
   offer page, b2b page, contact page, cta, footer, responsive
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..600&family=Hanken+Grotesk:wght@400..700&family=Spline+Sans+Mono:wght@400..600&display=swap');

/* ============ DESIGN TOKENS ============ */
:root {
	/* light base */
	--ink: #ffffff;
	--ink-2: #f4f6fa;
	--ink-3: #ebeff6;
	--line: #dde3ec;
	--line-soft: rgba(
		31,
		58,
		99,
		0.12
	);

	/* text: near-black + cool greys */
	--mist: #141a24;
	--mist-dim: #586479;
	--mist-low: #8a94a5;

	/* navy family (variable names kept as --gold* so every reference flips at once) */
	--gold: #1f3a63;
	--gold-deep: #132743;
	--gold-hi: #2f5490;
	--gold-glow: rgba(
		31,
		58,
		99,
		0.13
	);

	/* secondary accents */
	--sky: #3a63a0;
	--brick: #b0632f;
	--ok: #1f3a63;

	--ff-display:
		'Instrument Serif',
		'Georgia',
		serif;
	--ff-body:
		'Hanken Grotesk',
		system-ui,
		-apple-system,
		sans-serif;
	--ff-mono:
		'Spline Sans Mono',
		ui-monospace,
		'Courier New',
		monospace;

	--wrap: 1180px;
	--r: 12px;

	/* subtle navy gradient for prices / accents (kept flat-ish to match the logo) */
	--metal: linear-gradient(
		176deg,
		var(
				--gold-hi
			)
			0%,
		var(
				--gold
			)
			58%,
		var(
				--gold-deep
			)
			100%
	);
}

/* ============ BASE ============ */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 86px;
}
body {
	font-family: var(
		--ff-body
	);
	font-optical-sizing: auto;
	background:
		radial-gradient(
			1200px
				820px
				at
				50% -12%,
			rgba(
				31,
				58,
				99,
				0.05
			),
			transparent
				62%
		),
		var(
			--ink
		);
	background-attachment: fixed;
	color: var(--mist);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
a {
	color: inherit;
	text-decoration: none;
}
img,
svg {
	display: block;
	max-width: 100%;
}
.wrap {
	width: 100%;
	max-width: var(
		--wrap
	);
	margin: 0 auto;
	padding: 0 24px;
}

::selection {
	background: var(
		--gold
	);
	color: #fff;
}

/* placeholder brand mark recolor (until the OFERTA PLUS logo replaces it) */
.brand__mark rect {
	stroke: var(--gold);
}
.brand__mark path {
	stroke: var(--mist);
}
.brand__mark circle {
	fill: var(--gold);
}

/* ============ TYPE ============ */
.eyebrow {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-weight: 500;
}
.eyebrow::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(
		--metal
	);
	opacity: 0.85;
}
h1,
h2,
h3 {
	font-family: var(
		--ff-display
	);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-optical-sizing: auto;
}
h1 {
	font-size: clamp(
		34px,
		5vw,
		58px
	);
	font-weight: 600;
}
h2 {
	font-size: clamp(
		29px,
		4.4vw,
		47px
	);
}
h3 {
	font-size: 20px;
	letter-spacing: 0;
	font-weight: 600;
}
.lead {
	font-size: clamp(
		16px,
		1.7vw,
		19px
	);
	color: var(
		--mist-dim
	);
	max-width: 56ch;
	line-height: 1.6;
}

/* navy text helper (prices, big numbers) */
.metal,
.pack__price,
.pcard__price,
.stat__big,
.roi__num .big,
.volcard__unit {
	background: var(
		--metal
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.pack__price span,
.pcard__price span,
.volcard__unit span {
	-webkit-text-fill-color: var(
		--mist-low
	);
	color: var(
		--mist-low
	);
}

/* ============ BUTTONS ============ */
.btn {
	font-family: var(
		--ff-body
	);
	font-size: 13px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 27px;
	border-radius: 999px;
	border: 1px solid
		transparent;
	cursor: pointer;
	transition: 0.22s
		ease;
	font-weight: 600;
}
.btn--gold {
	background: var(
		--metal
	);
	color: #fff;
	border-color: rgba(
		255,
		255,
		255,
		0.16
	);
	box-shadow:
		0
			1px
			0
			rgba(
				255,
				255,
				255,
				0.18
			)
			inset,
		0
			10px
			24px
			rgba(
				31,
				58,
				99,
				0.24
			);
}
.btn--gold:hover {
	filter: brightness(
		1.08
	);
	transform: translateY(
		-2px
	);
	box-shadow:
		0
			1px
			0
			rgba(
				255,
				255,
				255,
				0.22
			)
			inset,
		0
			16px
			32px
			rgba(
				31,
				58,
				99,
				0.3
			);
}
.btn--ghost {
	border-color: var(
		--line
	);
	color: var(--mist);
}
.btn--ghost:hover {
	border-color: var(
		--gold
	);
	color: var(--gold);
	background: rgba(
		31,
		58,
		99,
		0.05
	);
}
.btn svg {
	width: 16px;
	height: 16px;
}

/* ============ NAV ============ */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(
		255,
		255,
		255,
		0.82
	);
	backdrop-filter: blur(
		14px
	);
	border-bottom: 1px
		solid
		var(
			--line-soft
		);
}
.nav__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(
		--ff-display
	);
	font-weight: 600;
	font-size: 19px;
	letter-spacing: -0.01em;
}
.brand__mark {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
}
.nav__links {
	display: flex;
	gap: 30px;
	align-items: center;
}
.nav__links a {
	font-size: 15px;
	color: var(
		--mist-dim
	);
	transition: 0.18s;
	position: relative;
}
.nav__links a:hover,
.nav__links a.is-active {
	color: var(--mist);
}
.nav__links a.is-active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: var(
		--metal
	);
}
.nav__cta {
	display: flex;
	align-items: center;
	gap: 18px;
}
.nav__burger {
	display: none;
	background: none;
	border: 0;
	color: var(--mist);
	cursor: pointer;
}

/* ============ HERO (full-bleed slider, home) ============ */
.hero {
	position: relative;
	padding: 0;
	overflow: hidden;
}
.stage {
	position: relative;
	z-index: 1;
	width: 100vw;
	margin-left: calc(
		50% -
			50vw
	);
}
.reveal {
	position: relative;
	height: clamp(
		540px,
		84vh,
		860px
	);
	overflow: hidden;
	background: #e9edf3;
	cursor: ew-resize;
	user-select: none;
	touch-action: pan-y; /* pionowy scroll dziala, poziom steruje suwakiem */
}
.reveal__layer {
	position: absolute;
	inset: 0;
}
.reveal__layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}
.reveal__after {
	clip-path: inset(
		0
			0
			0
			50%
	);
}
.reveal__over {
	clip-path: inset(
		0
			50%
			0
			0
	);
}
@keyframes wipeIn {
	from {
		clip-path: inset(
			0
				100%
				0
				0
		);
	}
	to {
		clip-path: inset(
			0
				50%
				0
				0
		);
	}
}
@keyframes handleIn {
	from {
		left: 0;
	}
	to {
		left: 50%;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.reveal__over {
		animation: wipeIn
			1.4s
			cubic-bezier(
				0.65,
				0,
				0.35,
				1
			)
			0.35s
			both;
	}
	.reveal__over
		~ .reveal__handle {
		animation: handleIn
			1.4s
			cubic-bezier(
				0.65,
				0,
				0.35,
				1
			)
			0.35s
			both;
	}
}
.reveal__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: #fff;
	z-index: 4;
	transform: translateX(
		-1px
	);
	box-shadow: 0 0 0
		1px
		rgba(
			0,
			0,
			0,
			0.25
		);
}
.reveal__knob {
	position: absolute;
	top: 42%;
	left: 50%;
	transform: translate(
		-50%,
		-50%
	);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(
		--metal
	);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(
		--ff-mono
	);
	font-weight: 600;
	font-size: 22px;
	box-shadow: 0 10px
		30px
		rgba(
			0,
			0,
			0,
			0.4
		);
}
.reveal__knob::after {
	content: '';
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	border: 1px solid
		#fff;
	opacity: 0.6;
	animation: knobPulse
		2.6s
		ease-out
		infinite;
}
@keyframes knobPulse {
	0% {
		transform: scale(
			0.8
		);
		opacity: 0.6;
	}
	70% {
		transform: scale(
			1.55
		);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
/* podpowiedz interakcji - nad galka, poza obszarem copy; znika po pierwszym ruchu (klasa is-live z JS) */
.reveal__hint {
	position: absolute;
	left: 50%;
	top: 42%;
	z-index: 6;
	transform: translate(
		-50%,
		-52px
	);
	font-family: var(
		--ff-mono
	);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold);
	background: rgba(
		255,
		255,
		255,
		0.94
	);
	padding: 7px 13px;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 6px
		18px
		rgba(
			0,
			0,
			0,
			0.22
		);
	transition:
		opacity
			0.35s
			ease,
		visibility
			0.35s
			ease;
}
.reveal.is-live .reveal__hint {
	opacity: 0;
	visibility: hidden;
}
.reveal__tag {
	position: absolute;
	top: 20px;
	z-index: 3;
	font-family: var(
		--ff-mono
	);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 6px;
	background: rgba(
		255,
		255,
		255,
		0.92
	);
	box-shadow: 0 4px
		14px
		rgba(
			0,
			0,
			0,
			0.2
		);
}
.reveal__tag.l {
	left: 20px;
	color: var(--gold);
}
.reveal__tag.r {
	right: 20px;
	color: var(
		--mist-dim
	);
}
.stage__frame {
	position: absolute;
	inset: 18px;
	border: 1px dashed
		rgba(
			255,
			255,
			255,
			0.6
		);
	border-radius: 6px;
	z-index: 3;
	pointer-events: none;
}
.stage__frame .tick {
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid
		#fff;
}
.stage__frame .tl {
	top: -2px;
	left: -2px;
	border-right: 0;
	border-bottom: 0;
}
.stage__frame .tr {
	top: -2px;
	right: -2px;
	border-left: 0;
	border-bottom: 0;
}
.stage__frame .bl {
	bottom: -2px;
	left: -2px;
	border-right: 0;
	border-top: 0;
}
.stage__frame .br {
	bottom: -2px;
	right: -2px;
	border-left: 0;
	border-top: 0;
}
.hero__copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	padding-bottom: clamp(
		30px,
		6vh,
		64px
	);
	pointer-events: none;
}
.hero__copy .wrap {
	pointer-events: none;
}
.hero__copy .eyebrow {
	color: #fff;
	text-shadow:
		0
			1px
			2px
			rgba(
				0,
				0,
				0,
				0.9
			),
		0
			0
			6px
			rgba(
				0,
				0,
				0,
				0.55
			);
}
.hero__copy .eyebrow::before {
	background: #fff;
	opacity: 0.9;
}
.hero__copy h1 {
	color: #fff;
	font-family: var(
		--ff-display
	);
	font-weight: 600;
	font-size: clamp(
		36px,
		5.6vw,
		68px
	);
	line-height: 1.03;
	letter-spacing: -0.015em;
	margin: 16px 0 18px;
	max-width: 20ch;
	text-shadow:
		0
			1px
			2px
			rgba(
				0,
				0,
				0,
				0.9
			),
		0
			2px
			16px
			rgba(
				0,
				0,
				0,
				0.55
			);
}
.hero__copy h1 em {
	font-style: italic;
	color: #fff;
	font-weight: 500;
}
.hero__copy .lead {
	max-width: 52ch;
	margin-bottom: 24px;
	color: #fff;
	text-shadow:
		0
			1px
			2px
			rgba(
				0,
				0,
				0,
				0.92
			),
		0
			0
			8px
			rgba(
				0,
				0,
				0,
				0.6
			);
}
.hero__copy .hero__cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	pointer-events: auto;
}
.hero__copy .trust {
	pointer-events: auto;
	color: #fff;
	text-shadow:
		0
			1px
			2px
			rgba(
				0,
				0,
				0,
				0.9
			),
		0
			0
			6px
			rgba(
				0,
				0,
				0,
				0.55
			);
}
.hero__copy .trust b {
	color: #fff;
}
/* przyciski hero na zdjeciu: wyrazny tekst + osobne kolory hoveru */
.hero__copy .btn--gold {
	box-shadow: 0 8px
		22px
		rgba(
			0,
			0,
			0,
			0.35
		);
}
.hero__copy .btn--gold:hover {
	background: #fff;
	color: var(--gold);
	filter: none;
	box-shadow: 0 12px
		30px
		rgba(
			0,
			0,
			0,
			0.4
		);
}
.hero__copy .btn--ghost {
	border-color: rgba(
		255,
		255,
		255,
		0.65
	);
	color: #fff;
	background: rgba(
		15,
		23,
		40,
		0.22
	);
}
.hero__copy .btn--ghost:hover {
	border-color: #fff;
	color: var(--gold);
	background: #fff;
}
.trust {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	color: var(
		--mist-dim
	);
	letter-spacing: 0.03em;
}
.trust b {
	color: var(--mist);
	font-weight: 600;
}
.hero__cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ============ PAGE HEADER (inner pages) ============ */
.phead {
	position: relative;
	padding: 64px 0 36px;
	overflow: hidden;
}
.phead__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
		820px
			420px
			at
			80%
			0%,
		var(
			--gold-glow
		),
		transparent
			62%
	);
}
.phead--cool .phead__glow {
	background:
		radial-gradient(
			760px
				400px
				at
				78%
				0%,
			rgba(
				58,
				99,
				160,
				0.12
			),
			transparent
				62%
		),
		radial-gradient(
			600px
				360px
				at
				20%
				100%,
			rgba(
				31,
				58,
				99,
				0.1
			),
			transparent
				60%
		);
}
.phead .wrap {
	position: relative;
}
.phead h1 {
	margin: 18px 0 16px;
	max-width: 20ch;
}

/* ============ SECTION SHELL ============ */
.section {
	padding: 84px 0;
}
.section--alt {
	background: var(
		--ink-2
	);
}
.section--tight {
	padding: 64px 0;
}
.section__head {
	max-width: 62ch;
	margin-bottom: 44px;
}
.section__head h2 {
	margin: 16px 0 16px;
}

/* ============ CONTEXT STRIP ============ */
.strip {
	padding: 42px 0;
	border-bottom: 1px
		solid
		var(
			--line-soft
		);
}
.strip__in {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	justify-content: space-between;
}
.strip__in p {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(
		--mist-low
	);
	max-width: 30ch;
}
.strip__tags {
	display: flex;
	gap: 34px;
	flex-wrap: wrap;
	font-family: var(
		--ff-display
	);
	font-weight: 600;
	color: var(
		--mist-low
	);
	font-size: 16px;
	letter-spacing: 0.01em;
}

/* ============ PROCESS ============ */
.steps {
	display: grid;
	grid-template-columns: repeat(
		4,
		1fr
	);
	gap: 1px;
	background: var(
		--line-soft
	);
	border: 1px solid
		var(
			--line-soft
		);
	border-radius: var(
		--r
	);
	overflow: hidden;
}
.step {
	background: var(
		--ink
	);
	padding: 30px 26px
		34px;
	position: relative;
	transition: 0.25s;
}
.step:hover {
	background: var(
		--ink-3
	);
}
.step__no {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	color: var(--gold);
	letter-spacing: 0.1em;
}
.step h3 {
	margin: 18px 0 10px;
}
.step p {
	font-size: 14.5px;
	color: var(
		--mist-dim
	);
}
.step__time {
	margin-top: 16px;
	font-family: var(
		--ff-mono
	);
	font-size: 11px;
	color: var(
		--mist-low
	);
	letter-spacing: 0.05em;
}

/* ============ INSIGHT / PROBLEM ============ */
.insight {
	display: grid;
	grid-template-columns: repeat(
		3,
		1fr
	);
	gap: 20px;
}
.icard {
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	padding: 30px;
	background: var(
		--ink
	);
	transition: 0.25s;
}
.icard:hover {
	border-color: var(
		--gold
	);
	transform: translateY(
		-3px
	);
	box-shadow: 0 18px
		40px
		rgba(
			31,
			58,
			99,
			0.12
		);
}
.icard__k {
	font-family: var(
		--ff-display
	);
	font-weight: 600;
	font-size: 42px;
	letter-spacing: -0.02em;
	line-height: 1;
	background: var(
		--metal
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.icard h3 {
	margin: 16px 0 10px;
	font-size: 18px;
}
.icard p {
	font-size: 14.5px;
	color: var(
		--mist-dim
	);
}

/* ============ SEGMENTS ============ */
.segs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.seg {
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	padding: 34px;
	background: linear-gradient(
		180deg,
		var(
			--ink
		),
		var(
			--ink-2
		)
	);
	position: relative;
	overflow: hidden;
	transition: 0.25s;
}
.seg:hover {
	border-color: var(
		--gold
	);
	transform: translateY(
		-3px
	);
	box-shadow: 0 20px
		44px
		rgba(
			31,
			58,
			99,
			0.12
		);
}
.seg__ico {
	width: 44px;
	height: 44px;
	color: var(--gold);
	margin-bottom: 20px;
}
.seg h3 {
	font-size: 24px;
	margin-bottom: 12px;
}
.seg p {
	color: var(
		--mist-dim
	);
	font-size: 15px;
	margin-bottom: 20px;
}
.seg ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.seg li {
	font-size: 14px;
	display: flex;
	gap: 11px;
	align-items: flex-start;
	color: var(--mist);
}
.seg li svg {
	width: 16px;
	height: 16px;
	color: var(--ok);
	flex: 0 0 auto;
	margin-top: 3px;
}

/* ============ DELIVERABLES ============ */
.deliver {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 50px;
	align-items: start;
}
.deliver__list {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.deliver__list li {
	font-size: 14.5px;
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 16px;
	border: 1px solid
		var(
			--line
		);
	border-radius: 10px;
	background: var(
		--ink-2
	);
}
.deliver__list li svg {
	width: 18px;
	height: 18px;
	color: var(--gold);
	flex: 0 0 auto;
	margin-top: 2px;
}

/* ============ REEL (pionowe wideo) ============ */
.reel {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 50px;
	align-items: center;
}
.reel__video {
	position: relative;
	width: 300px;
	max-width: 100%;
	aspect-ratio: 9/16;
	border-radius: 20px;
	overflow: hidden;
	background: #0e0b07;
	border: 1px solid
		var(
			--line
		);
	box-shadow: 0 24px
		60px
		rgba(
			31,
			58,
			99,
			0.22
		);
}
.reel__video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.reel__text {
	max-width: 52ch;
}
.reel__text h2 {
	margin: 16px 0 16px;
}
.reel__text .btn {
	margin-top: 26px;
}
.reel__sound {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: rgba(
		15,
		23,
		40,
		0.6
	);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(
		4px
	);
	transition: 0.2s;
}
.reel__sound:hover {
	background: rgba(
		15,
		23,
		40,
		0.85
	);
	transform: translateY(
		-1px
	);
}
.reel__sound svg {
	width: 20px;
	height: 20px;
}
.reel__sound .icon-on {
	display: none;
}
.reel__sound.is-on .icon-off {
	display: none;
}
.reel__sound.is-on .icon-on {
	display: block;
}

.reel__video {
	position: relative;
}
.reel__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: linear-gradient(
		to
			top,
		rgba(
			10,
			15,
			26,
			0.82
		),
		rgba(
			10,
			15,
			26,
			0
		)
	);
}
.rc-btn {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(
		255,
		255,
		255,
		0.16
	);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.15s;
}
.rc-btn:hover {
	background: rgba(
		255,
		255,
		255,
		0.3
	);
}
.rc-btn svg {
	width: 16px;
	height: 16px;
	display: block;
}
.rc-track {
	flex: 1;
	height: 5px;
	border-radius: 3px;
	background: rgba(
		255,
		255,
		255,
		0.28
	);
	position: relative;
	cursor: pointer;
	touch-action: none;
}
.rc-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 3px;
	background: #fff;
}
.reel__video .ic-pause {
	display: none;
}
.reel__video.is-playing .ic-play {
	display: none;
}
.reel__video.is-playing .ic-pause {
	display: block;
}
.reel__video .ic-sound {
	display: none;
}
.reel__video:not(.is-muted) .ic-muted {
	display: none;
}
.reel__video:not(.is-muted) .ic-sound {
	display: block;
}
.reel__video:fullscreen {
	width: 100vw;
	height: 100vh;
	max-width: none;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
	background: #000;
}
.reel__video:-webkit-full-screen {
	width: 100vw;
	height: 100vh;
	max-width: none;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
	background: #000;
}
.reel__video:fullscreen video {
	object-fit: contain;
}
.reel__video:-webkit-full-screen video {
	object-fit: contain;
}

/* ============ QUOTES ============ */
.quotes {
	display: grid;
	grid-template-columns: repeat(
		3,
		1fr
	);
	gap: 20px;
}
.quote {
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	padding: 28px;
	background: var(
		--ink
	);
}
.quote__mark {
	font-family: var(
		--ff-display
	);
	font-weight: 700;
	font-size: 52px;
	color: var(--gold);
	line-height: 0.6;
	height: 26px;
}
.quote p {
	font-size: 15px;
	color: var(--mist);
	margin: 8px 0 18px;
}
.quote__who {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	color: var(
		--mist-low
	);
	letter-spacing: 0.04em;
}
.quote__who b {
	display: block;
	color: var(--mist);
	font-weight: 600;
	letter-spacing: 0;
	font-family: var(
		--ff-body
	);
}

/* ============ PRICING TEASER ============ */
.ptease {
	display: grid;
	grid-template-columns: repeat(
		3,
		1fr
	);
	gap: 18px;
	margin-top: 8px;
}
.pcard {
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	padding: 28px;
	background: var(
		--ink
	);
	transition: 0.25s;
}
.pcard:hover {
	background: var(
		--ink-3
	);
}
.pcard.is-feature {
	border-color: var(
		--gold
	);
	background: linear-gradient(
		180deg,
		rgba(
			31,
			58,
			99,
			0.06
		),
		var(
			--ink
		)
	);
}
.pcard__name {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(
		--mist-dim
	);
}
.pcard.is-feature .pcard__name {
	color: var(--gold);
}
.pcard__price {
	font-family: var(
		--ff-display
	);
	font-weight: 600;
	font-size: 42px;
	margin: 14px 0 4px;
	letter-spacing: -0.02em;
}
.pcard__price span {
	font-size: 15px;
	font-family: var(
		--ff-mono
	);
	font-weight: 400;
}
.pcard__desc {
	font-size: 14px;
	color: var(
		--mist-dim
	);
	min-height: 42px;
}
.pcard__hr {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px
		solid
		var(
			--line-soft
		);
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	color: var(
		--mist-low
	);
}

/* ============ OFFER: PACKAGES ============ */
.packs {
	display: grid;
	grid-template-columns: repeat(
		3,
		1fr
	);
	gap: 20px;
	align-items: start;
}
.pack {
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	background: var(
		--ink
	);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	transition: 0.25s;
}
.pack:hover {
	transform: translateY(
		-4px
	);
	border-color: var(
		--gold
	);
	box-shadow: 0 22px
		50px
		rgba(
			31,
			58,
			99,
			0.13
		);
}
.pack.is-feature {
	border-color: var(
		--gold
	);
	background: linear-gradient(
		180deg,
		rgba(
			31,
			58,
			99,
			0.06
		),
		var(
			--ink
		)
	);
	box-shadow:
		0
			24px
			58px
			rgba(
				31,
				58,
				99,
				0.14
			),
		0
			0
			0
			1px
			rgba(
				31,
				58,
				99,
				0.1
			);
}
.pack__badge {
	font-family: var(
		--ff-mono
	);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: var(
		--metal
	);
	padding: 5px 11px;
	border-radius: 999px;
	align-self: flex-start;
	margin-bottom: 16px;
	font-weight: 600;
}
.pack__name {
	font-family: var(
		--ff-display
	);
	font-weight: 600;
	font-size: 25px;
}
.pack__for {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	color: var(
		--mist-low
	);
	letter-spacing: 0.04em;
	margin-top: 6px;
}
.pack__price {
	font-family: var(
		--ff-display
	);
	font-weight: 700;
	font-size: 48px;
	letter-spacing: -0.02em;
	margin: 22px 0 2px;
}
.pack__price span {
	font-size: 16px;
	font-family: var(
		--ff-mono
	);
	font-weight: 400;
}
.pack__hr {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	color: var(
		--mist-low
	);
	margin-bottom: 22px;
}
.pack ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin-bottom: 26px;
	flex: 1;
}
.pack li {
	font-size: 14px;
	display: flex;
	gap: 11px;
	align-items: flex-start;
}
.pack li svg {
	width: 16px;
	height: 16px;
	color: var(--ok);
	flex: 0 0 auto;
	margin-top: 3px;
}
.pack li.off {
	color: var(
		--mist-low
	);
}
.pack li.off svg {
	color: var(
		--mist-low
	);
}
.pack .btn {
	justify-content: center;
	width: 100%;
}

/* ============ OFFER: ADDONS ============ */
.addons {
	display: grid;
	grid-template-columns: repeat(
		2,
		1fr
	);
	gap: 1px;
	background: var(
		--line-soft
	);
	border: 1px solid
		var(
			--line-soft
		);
	border-radius: var(
		--r
	);
	overflow: hidden;
}
.addon {
	background: var(
		--ink
	);
	padding: 24px 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	transition: 0.2s;
}
.addon:hover {
	background: var(
		--ink-3
	);
}
.addon__t h3 {
	font-size: 16px;
	margin-bottom: 4px;
}
.addon__t p {
	font-size: 13.5px;
	color: var(
		--mist-dim
	);
}
.addon__p {
	font-family: var(
		--ff-mono
	);
	font-weight: 600;
	color: var(--gold);
	white-space: nowrap;
	font-size: 15px;
}

/* ============ OFFER: COMPARISON ============ */
.cmp-scroll {
	overflow-x: auto;
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	background: var(
		--ink
	);
}
.cmp {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 560px;
}
.cmp th,
.cmp td {
	text-align: left;
	padding: 15px 18px;
	border-bottom: 1px
		solid
		var(
			--line-soft
		);
}
.cmp thead th {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(
		--mist-dim
	);
}
.cmp thead th.feat {
	color: var(--gold);
}
.cmp td:first-child {
	color: var(
		--mist-dim
	);
}
.cmp td.feat {
	color: var(--gold);
}
.cmp tbody tr:hover {
	background: var(
		--ink-2
	);
}
.cmp .yes {
	color: var(--ok);
}
.cmp .no {
	color: var(
		--mist-low
	);
}

/* ============ TIMELINE ============ */
.tl {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-left: 2px
		dashed
		var(
			--line
		);
	margin-left: 8px;
}
.tl__row {
	position: relative;
	padding: 0 0 30px
		30px;
}
.tl__row:last-child {
	padding-bottom: 0;
}
.tl__row::before {
	content: '';
	position: absolute;
	left: -7px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(
		--metal
	);
	box-shadow: 0 0 0
		3px
		rgba(
			31,
			58,
			99,
			0.12
		);
}
.tl__row h3 {
	font-size: 16px;
	margin-bottom: 5px;
}
.tl__row p {
	font-size: 14px;
	color: var(
		--mist-dim
	);
}
.tl__row .when {
	font-family: var(
		--ff-mono
	);
	font-size: 11px;
	color: var(
		--mist-low
	);
	letter-spacing: 0.05em;
	margin-bottom: 6px;
}
.split {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 50px;
	align-items: start;
}

/* ============ FAQ ============ */
.faq {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(
		--line-soft
	);
	border: 1px solid
		var(
			--line-soft
		);
	border-radius: var(
		--r
	);
	overflow: hidden;
}
.faq details {
	background: var(
		--ink
	);
}
.faq summary {
	padding: 22px 26px;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-family: var(
		--ff-display
	);
	font-weight: 600;
	font-size: 17px;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::after {
	content: '+';
	font-family: var(
		--ff-mono
	);
	color: var(--gold);
	font-size: 22px;
	transition: 0.2s;
}
.faq details[open] summary::after {
	transform: rotate(
		45deg
	);
}
.faq p {
	padding: 0 26px 24px;
	color: var(
		--mist-dim
	);
	font-size: 14.5px;
	max-width: 70ch;
}

/* ============ B2B: STATS ============ */
.stats {
	display: grid;
	grid-template-columns: repeat(
		3,
		1fr
	);
	gap: 20px;
	margin-top: 8px;
}
.stat {
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	padding: 26px;
	background: var(
		--ink
	);
}
.stat__big {
	font-family: var(
		--ff-display
	);
	font-weight: 700;
	font-size: clamp(
		34px,
		4.5vw,
		46px
	);
	letter-spacing: -0.02em;
}
.stat__lbl {
	font-size: 14px;
	color: var(
		--mist-dim
	);
	margin-top: 6px;
}

/* ============ B2B: AUDIENCE ============ */
.aud {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.audcard {
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	padding: 38px;
	background: linear-gradient(
		180deg,
		var(
			--ink
		),
		var(
			--ink-2
		)
	);
	position: relative;
	overflow: hidden;
}
.audcard__tag {
	position: absolute;
	top: 0;
	right: 0;
	font-family: var(
		--ff-mono
	);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(
		--mist-low
	);
	padding: 8px 14px;
	border-left: 1px
		solid
		var(
			--line-soft
		);
	border-bottom: 1px
		solid
		var(
			--line-soft
		);
}
.audcard__ico {
	width: 46px;
	height: 46px;
	color: var(--gold);
	margin-bottom: 22px;
}
.audcard h3 {
	font-size: 25px;
	margin-bottom: 8px;
}
.audcard .sub {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	color: var(--sky);
	letter-spacing: 0.04em;
	margin-bottom: 18px;
}
.audcard p {
	color: var(
		--mist-dim
	);
	font-size: 15px;
	margin-bottom: 20px;
}
.audcard ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.audcard li {
	font-size: 14.5px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.audcard li svg {
	width: 17px;
	height: 17px;
	color: var(--ok);
	flex: 0 0 auto;
	margin-top: 3px;
}

/* ============ B2B: ROI ============ */
.roi {
	border: 1px solid
		var(
			--gold
		);
	border-radius: 18px;
	padding: 46px;
	background: linear-gradient(
		135deg,
		rgba(
			31,
			58,
			99,
			0.07
		),
		var(
			--ink
		)
	);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 44px;
	align-items: center;
}
.roi h2 {
	margin-bottom: 14px;
}
.roi p {
	color: var(
		--mist-dim
	);
	font-size: 15.5px;
}
.roi__num {
	text-align: center;
	border-left: 1px
		solid
		var(
			--line-soft
		);
	padding-left: 40px;
}
.roi__num .big {
	font-family: var(
		--ff-display
	);
	font-weight: 700;
	font-size: clamp(
		48px,
		7vw,
		76px
	);
	line-height: 1;
	letter-spacing: -0.03em;
}
.roi__num .cap {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	color: var(
		--mist-dim
	);
	letter-spacing: 0.05em;
	margin-top: 12px;
	text-transform: uppercase;
}

/* ============ B2B: VOLUME ============ */
.vol {
	display: grid;
	grid-template-columns: repeat(
		3,
		1fr
	);
	gap: 20px;
}
.volcard {
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	padding: 30px;
	background: var(
		--ink
	);
	text-align: center;
	transition: 0.25s;
}
.volcard:hover {
	border-color: var(
		--gold
	);
	transform: translateY(
		-3px
	);
}
.volcard.is-feature {
	border-color: var(
		--gold
	);
	background: linear-gradient(
		180deg,
		rgba(
			31,
			58,
			99,
			0.06
		),
		var(
			--ink
		)
	);
}
.volcard__q {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(
		--mist-dim
	);
}
.volcard__unit {
	font-family: var(
		--ff-display
	);
	font-weight: 700;
	font-size: 38px;
	margin: 16px 0 2px;
	letter-spacing: -0.02em;
}
.volcard__unit span {
	font-size: 14px;
	font-family: var(
		--ff-mono
	);
	font-weight: 400;
}
.volcard__save {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	color: var(--ok);
}
.volcard__note {
	font-size: 13px;
	color: var(
		--mist-dim
	);
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px
		solid
		var(
			--line-soft
		);
}

/* ============ B2B: WHITE LABEL ============ */
.wl {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: center;
}
.wl__panel {
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	background: var(
		--ink
	);
	padding: 30px;
}
.wl__panel .row {
	display: flex;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px
		solid
		var(
			--line-soft
		);
	font-size: 14px;
	gap: 14px;
}
.wl__panel .row:last-child {
	border-bottom: 0;
}
.wl__panel .row span:first-child {
	color: var(
		--mist-dim
	);
}
.wl__panel .row b {
	font-family: var(
		--ff-mono
	);
	font-weight: 500;
	color: var(--gold);
	text-align: right;
}

/* ============ CONTACT PAGE ============ */
.contact {
	display: grid;
	grid-template-columns: repeat(
		3,
		1fr
	);
	gap: 20px;
}
.ccard {
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	padding: 30px;
	background: var(
		--ink
	);
	transition: 0.25s;
	display: block;
}
.ccard:hover {
	border-color: var(
		--gold
	);
	transform: translateY(
		-3px
	);
	box-shadow: 0 18px
		40px
		rgba(
			31,
			58,
			99,
			0.12
		);
}
.ccard__ico {
	width: 40px;
	height: 40px;
	color: var(--gold);
	margin-bottom: 18px;
}
.ccard h3 {
	font-size: 18px;
	margin-bottom: 6px;
}
.ccard__val {
	font-family: var(
		--ff-mono
	);
	font-size: 15px;
	color: var(--mist);
	word-break: break-word;
}
.ccard__sub {
	font-size: 13px;
	color: var(
		--mist-low
	);
	margin-top: 8px;
}

.prep {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.prep li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px 20px;
	border: 1px solid
		var(
			--line
		);
	border-radius: 10px;
	background: var(
		--ink-2
	);
}
.prep li .n {
	font-family: var(
		--ff-mono
	);
	color: var(--gold);
	font-weight: 600;
	flex: 0 0 auto;
}
.prep li b {
	display: block;
	margin-bottom: 3px;
}
.prep li p {
	font-size: 14px;
	color: var(
		--mist-dim
	);
}

.area {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 44px;
	align-items: center;
}
.area__map {
	position: relative;
	border: 1px solid
		var(
			--line
		);
	border-radius: var(
		--r
	);
	overflow: hidden;
	background: var(
		--ink-3
	);
	aspect-ratio: 16/10;
}
.area__hours {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.area__hours li {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	padding-bottom: 12px;
	border-bottom: 1px
		solid
		var(
			--line-soft
		);
	gap: 16px;
}
.area__hours li span:first-child {
	color: var(
		--mist-dim
	);
}
.area__hours li b {
	font-family: var(
		--ff-mono
	);
	font-weight: 500;
}

/* ============ CTA BAND ============ */
.cta {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid
		var(
			--line
		);
	padding: 60px;
	text-align: center;
	background: var(
		--ink-2
	);
}
.cta__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		620px
			320px
			at
			50%
			0%,
		var(
			--gold-glow
		),
		transparent
			66%
	);
	pointer-events: none;
}
.cta h2 {
	margin-bottom: 14px;
	position: relative;
}
.cta p {
	color: var(
		--mist-dim
	);
	max-width: 48ch;
	margin: 0 auto 30px;
	position: relative;
}
.cta__row {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
}

/* ============ FOOTER ============ */
.foot {
	border-top: 1px
		solid
		var(
			--line-soft
		);
	padding: 54px 0 36px;
	color: var(
		--mist-dim
	);
	background: var(
		--ink-2
	);
}
.foot__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 40px;
}
.foot h4 {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(
		--mist-low
	);
	margin-bottom: 16px;
}
.foot a {
	display: block;
	font-size: 14px;
	margin-bottom: 9px;
	color: var(
		--mist-dim
	);
}
.foot a:hover {
	color: var(--gold);
}
.foot__bot {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 24px;
	border-top: 1px
		solid
		var(
			--line-soft
		);
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	color: var(
		--mist-low
	);
}

/* ============ FLOATING PHONE ============ */
.fab-phone {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 20px 0
		17px;
	border-radius: 999px;
	background: var(
		--metal
	);
	color: #fff;
	font-family: var(
		--ff-body
	);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	box-shadow: 0 12px
		28px
		rgba(
			31,
			58,
			99,
			0.35
		);
	transition: 0.2s
		ease;
}
.fab-phone:hover {
	transform: translateY(
		-2px
	);
	filter: brightness(
		1.08
	);
	box-shadow: 0 16px
		34px
		rgba(
			31,
			58,
			99,
			0.42
		);
}
.fab-phone svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}
.fab-phone__txt {
	white-space: nowrap;
}

/* ============ HELPERS ============ */
.note {
	font-family: var(
		--ff-mono
	);
	font-size: 12px;
	color: var(
		--mist-low
	);
	letter-spacing: 0.03em;
}
.center {
	text-align: center;
}
.mt-30 {
	margin-top: 30px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 920px) {
	.nav__links {
		display: none;
		position: absolute;
		top: 70px;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: rgba(
			255,
			255,
			255,
			0.98
		);
		backdrop-filter: blur(
			14px
		);
		border-bottom: 1px
			solid
			var(
				--line-soft
			);
		padding: 8px
			0;
	}
	.nav.is-open
		.nav__links {
		display: flex;
	}
	.nav__links a {
		padding: 14px
			24px;
		font-size: 16px;
		border-bottom: 1px
			solid
			var(
				--line-soft
			);
	}
	.nav__links
		a.is-active::after {
		display: none;
	}
	.nav__burger {
		display: block;
	}
	.steps {
		grid-template-columns: 1fr 1fr;
	}
	.insight {
		grid-template-columns: 1fr;
	}
	.segs {
		grid-template-columns: 1fr;
	}
	.deliver {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.quotes {
		grid-template-columns: 1fr;
	}
	.ptease {
		grid-template-columns: 1fr;
	}
	.packs {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin: 0
			auto;
	}
	.addons {
		grid-template-columns: 1fr;
	}
	.split {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.stats {
		grid-template-columns: 1fr;
	}
	.aud {
		grid-template-columns: 1fr;
	}
	.roi {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.roi__num {
		border-left: 0;
		border-top: 1px
			solid
			var(
				--line-soft
			);
		padding-left: 0;
		padding-top: 28px;
	}
	.vol {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin: 0
			auto;
	}
	.wl {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.contact {
		grid-template-columns: 1fr;
	}
	.area {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.deliver__list {
		grid-template-columns: 1fr;
	}
	.reel {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 30px;
	}
	.reel__text {
		max-width: none;
	}
	.reel__text
		.eyebrow {
		justify-content: center;
	}
	.foot__grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	/* hero: zdjecie jako baner, tekst POD spodem na bialym (czytelnosc) */
	.reveal {
		height: clamp(
			320px,
			48vh,
			430px
		);
	}
	.hero__copy {
		position: static;
		background: none;
		padding: 26px
			0
			4px;
		pointer-events: auto;
	}
	.hero__copy .wrap {
		pointer-events: auto;
	}
	.hero__copy
		.eyebrow {
		color: var(
			--gold
		);
		text-shadow: none;
	}
	.hero__copy
		.eyebrow::before {
		background: var(
			--metal
		);
		opacity: 0.85;
	}
	.hero__copy h1 {
		color: var(
			--mist
		);
		font-size: clamp(
			28px,
			8vw,
			40px
		);
		max-width: 18ch;
		text-shadow: none;
	}
	.hero__copy h1 em {
		color: var(
			--gold
		);
	}
	.hero__copy .lead {
		color: var(
			--mist-dim
		);
		text-shadow: none;
		margin-bottom: 22px;
	}
	.hero__copy .trust {
		color: var(
			--mist-dim
		);
		text-shadow: none;
	}
	.hero__copy
		.trust
		b {
		color: var(
			--mist
		);
	}
	.hero__copy
		.hero__cta
		.btn {
		width: 100%;
		justify-content: center;
	}
	/* przyciski hero z powrotem jak na bialym tle */
	.hero__copy
		.btn--gold {
		box-shadow:
			0
				1px
				0
				rgba(
					255,
					255,
					255,
					0.18
				)
				inset,
			0
				10px
				24px
				rgba(
					31,
					58,
					99,
					0.24
				);
	}
	.hero__copy
		.btn--gold:hover {
		background: var(
			--metal
		);
		color: #fff;
		filter: brightness(
			1.08
		);
	}
	.hero__copy
		.btn--ghost {
		border-color: var(
			--line
		);
		color: var(
			--mist
		);
		background: transparent;
	}
	.hero__copy
		.btn--ghost:hover {
		border-color: var(
			--gold
		);
		color: var(
			--gold
		);
		background: rgba(
			31,
			58,
			99,
			0.05
		);
	}
	.stage__frame {
		inset: 12px;
	}
	.reveal__tag {
		font-size: 10px;
		padding: 5px
			9px;
		top: 14px;
	}
	.reveal__tag.l {
		left: 14px;
	}
	.reveal__tag.r {
		right: 14px;
	}
	.reel__video {
		width: 260px;
	}
	.steps {
		grid-template-columns: 1fr;
	}
	.cta,
	.roi {
		padding: 40px
			22px;
	}
	.audcard {
		padding: 28px;
	}
	.foot__grid {
		grid-template-columns: 1fr;
	}
	.wrap {
		padding: 0
			22px;
	}
	.section {
		padding: 56px
			0;
	}
	.section--tight {
		padding: 44px
			0;
	}
	.phead {
		padding: 44px
			0
			28px;
	}
	.section__head {
		margin-bottom: 32px;
	}
	/* strip: kolumna + wysrodkowanie zamiast rozjezdzajacego sie rzedu */
	.strip {
		padding: 34px
			0;
		text-align: center;
	}
	.strip__in {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	.strip__in p {
		max-width: none;
	}
	.strip__tags {
		justify-content: center;
		gap: 10px
			20px;
		font-size: 15px;
	}
	/* stopka: kolumna + srodek */
	.foot__bot {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
	}
	.nav__cta .btn {
		display: none;
	} /* na telefonie zostaje sam burger */
	.fab-phone {
		right: 16px;
		bottom: 16px;
		width: 52px;
		height: 52px;
		padding: 0;
		justify-content: center;
	}
	.fab-phone__txt {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
	.reveal__knob::after {
		animation: none !important;
	}
}