/* ============================================================
   Geoboard landing.css
   Section styling dla landing page (Day 33 redesign).
   Bazuje na tokens z main.css (--bg, --ink, --accent, --font-*).
   ============================================================ */

/* ─── 1. Top nav ─────────────────────────────────────────── */

.site-nav {
	display: flex;
	align-items: center;
}

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 10px 14px;
	font-family: var(--font-tight);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--ink-soft);
	text-decoration: none;
	letter-spacing: -0.01em;
	border-radius: var(--radius-sm);
	transition: color 0.15s ease, background 0.15s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
	opacity: 1;
	color: var(--ink);
	background: var(--line-soft);
	outline: none;
}

.site-nav__item--cta {
	margin-left: 8px;
}

.site-nav__cta {
	padding: 10px 18px;
	font-size: var(--fs-sm);
	gap: 6px;
}

.site-nav__cta:hover .site-nav__cta-arrow {
	transform: translateX(2px);
}

.site-nav__cta-arrow {
	display: inline-block;
	transition: transform 0.2s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Mobile hamburger button — hidden on desktop */
.site-nav__toggle {
	display: none;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 0;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	transition: background 0.15s ease;
}

.site-nav__toggle:hover {
	background: var(--line-soft);
}

.site-nav__toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform 0.2s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), opacity 0.2s ease;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
	opacity: 0;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Desktop: site-header__inner ma to samo space-between layout */

@media (max-width: 880px) {
	/* Day 57 v1.45.20 + v1.45.21 hotfix — Maciej "BANG działa" + 2 polish:
	   1. Empty <nav> container zajmuje flex space → hamburger pushed do środka
	   2. Toggle button jumps z relative→fixed on click — should be consistent
	   Fix: hide nav element całkowicie + hamburger always position fixed. */

	/* Hide nav element default (UL overlay takes over gdy is-open) */
	.site-nav {
		display: none !important;
	}

	/* Restore site-nav visibility gdy menu open (parent of UL overlay) */
	.site-nav:has(.site-nav__menu.is-open) {
		display: block !important;
	}

	/* Hide menu default — explicit dla cases gdy parent visible */
	.site-nav__menu {
		display: none !important;
	}

	/* Show menu as full-screen overlay when JS adds is-open class */
	.site-nav__menu.is-open {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		background: #faf8f3 !important;
		z-index: 9999 !important;
		padding: 80px 24px 40px !important;
		margin: 0 !important;
		list-style: none !important;
		overflow-y: auto !important;
	}

	.site-nav__menu.is-open .site-nav__item {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
	}

	.site-nav__menu.is-open .site-nav__link {
		display: block !important;
		width: 100% !important;
		padding: 16px 18px !important;
		font-size: 17px !important;
		color: #14130f !important;
		border-bottom: 1px solid rgba(20, 19, 15, 0.08) !important;
		border-radius: 0 !important;
		text-align: left !important;
		text-decoration: none !important;
	}

	.site-nav__menu.is-open .site-nav__item--cta {
		margin-top: 16px !important;
	}

	.site-nav__menu.is-open .site-nav__cta {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 16px 18px !important;
		font-size: 16px !important;
		border-radius: 8px !important;
		border-bottom: none !important;
		background: oklch(0.86 0.18 125) !important;
		color: #14130f !important;
		font-weight: 600 !important;
	}

	/* Hamburger button — ALWAYS fixed top-right (no jump on toggle).
	   Day 57 v1.45.21: Maciej "ikona przesuwa się po kliknięciu". Fix:
	   stała pozycja fixed dla obu stanów (closed + open). */
	.site-nav__toggle {
		display: inline-flex !important;
		position: fixed !important;
		top: 16px !important;
		right: 16px !important;
		z-index: 10000 !important;
	}

	body.has-nav-open {
		overflow: hidden;
	}
}

/* prefers-reduced-motion safety */
@media (prefers-reduced-motion: reduce) {
	.site-nav,
	.site-nav__toggle-bar,
	.site-nav__cta-arrow {
		transition: none !important;
	}
}

/* ─── 2. Hero ────────────────────────────────────────────── */

.hero {
	padding-top: var(--space-8);
	padding-bottom: var(--space-9);
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 50% 0%, var(--accent-soft) 0%, transparent 60%);
	z-index: 0;
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 920px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
	text-align: center;
}

.hero__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 760px;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--ink-soft);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-soft);
}

.hero__heading {
	font-size: var(--fs-hero);
	font-family: var(--font-tight);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	max-width: 22ch;
	margin: 0 auto;
}

.hero__subheading {
	font-size: var(--fs-lg);
	color: var(--ink-soft);
	line-height: 1.55;
	max-width: 60ch;
	margin: 0 auto;
}

.hero__widget {
	width: 100%;
	max-width: 720px;
	margin-top: var(--space-4);
}

/* Plugin shortcode renderuje własny styling (.pa-geo-form-wrap / .pa-geo-preview-widget).
   Theme dodaje subtle wrap shadow + cream→white gradient bg. */
.hero__widget > div {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 40px rgba(20, 19, 15, 0.08);
	overflow: hidden;
}

.hero__widget .form-placeholder {
	background: #fff8e6;
	border: 1px solid #f0c14b;
	border-radius: var(--radius);
	padding: var(--space-5);
	color: var(--ink);
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	text-align: left;
}

.hero__sample-link {
	margin: 0;
	font-size: var(--fs-sm);
}

.hero__sample-link a {
	color: var(--ink-soft);
	text-decoration-color: var(--line);
	font-family: var(--font-tight);
	font-weight: 500;
	letter-spacing: -0.01em;
}

.hero__sample-link a:hover,
.hero__sample-link a:focus-visible {
	color: var(--ink);
	text-decoration-color: var(--accent);
	opacity: 1;
}

.hero__badges {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-4);
	width: 100%;
	max-width: 880px;
	margin: var(--space-5) 0 0;
	padding: var(--space-5) 0 0;
	border-top: 1px solid var(--line);
}

.hero__badge {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	text-align: left;
}

.hero__badge-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--ink);
	background: var(--accent-soft);
	border-radius: 50%;
}

.hero__badge-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--fs-sm);
}

.hero__badge-text strong {
	font-family: var(--font-tight);
	font-weight: 700;
	font-size: var(--fs-base);
	letter-spacing: -0.01em;
	color: var(--ink);
}

.hero__badge-text span {
	color: var(--ink-mute);
	font-size: var(--fs-xs);
	font-family: var(--font-mono);
	letter-spacing: 0.02em;
}

@media (max-width: 640px) {
	.hero {
		padding-top: var(--space-6);
		padding-bottom: var(--space-7);
	}

	.hero__inner {
		gap: var(--space-5);
	}

	.hero__heading {
		font-size: clamp(2rem, 8vw, 2.75rem);
	}

	/* Day 54 wieczór HOTFIX — Maciej raport: "mobile okno wprowadzenia domeny
	   za duże". Hero widget pełna szerokość mobile + reduce internal padding +
	   margin-top eliminacja (juz jest gap z .hero__inner). Plugin widget
	   pa-geo-preview-wrap default padding 1.5rem na mobile = za dużo,
	   override do 1rem. */
	.hero__widget {
		margin-top: 0;
	}
	.hero__widget > div {
		border-radius: var(--radius);
	}
	.hero__widget .pa-geo-preview-wrap {
		padding: 1rem !important;
		margin: 0 !important;
	}
	/* Day 57 v1.45.19 — Maciej raport "okno wpisania domeny strasznie wysokie".
	   Mobile: explicit input height ~52px (NIE stretches do container).
	   Plus input row no stretch, items naturalna wysokość. */
	.hero__widget .pa-geo-preview-input-row {
		flex-direction: column !important;
		gap: 8px !important;
		align-items: stretch !important;
	}
	.hero__widget .pa-geo-preview-input-row input[type="text"] {
		height: 52px !important;
		min-height: 52px !important;
		max-height: 52px !important;
		padding: 0 14px !important;
		font-size: 16px !important; /* iOS prevent zoom-on-focus */
		box-sizing: border-box !important;
	}
	.hero__widget .pa-geo-preview-button {
		height: 52px !important;
		padding: 0 18px !important;
		font-size: 16px !important;
	}
	.hero__widget .pa-geo-preview-form {
		min-height: 0 !important;
	}

	.hero__badges {
		grid-template-columns: 1fr;
		gap: var(--space-3);
		text-align: left;
	}

	.hero__badge {
		padding: var(--space-3);
		background: var(--paper);
		border: 1px solid var(--line-soft);
		border-radius: var(--radius);
	}
}

/* ─── 3. Why now ─────────────────────────────────────────── */

.why-now {
	padding-top: var(--space-9);
	padding-bottom: var(--space-9);
	background: var(--paper);
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
}

.why-now__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
	align-items: center;
	max-width: 1080px;
	margin: 0 auto;
}

.why-now__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.why-now__copy .section-heading {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	letter-spacing: -0.025em;
	line-height: 1.15;
	text-align: left;
}

.why-now__source {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 400;
	color: var(--ink-mute);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: var(--space-2);
}

.why-now__lead {
	font-size: var(--fs-base);
	color: var(--ink-soft);
	line-height: 1.6;
}

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

.why-now__visual {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 16px 48px rgba(20, 19, 15, 0.10);
	background: var(--bg);
}

.why-now__visual img {
	width: 100%;
	height: auto;
	display: block;
}

.why-now__caption {
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-xs);
	font-family: var(--font-mono);
	color: var(--ink-mute);
	letter-spacing: 0.02em;
	text-align: center;
	background: var(--paper);
	border-top: 1px solid var(--line-soft);
}

@media (max-width: 880px) {
	.why-now__inner {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}

/* ─── 4. Jak to działa ──────────────────────────────────── */

.how-it-works {
	padding-top: var(--space-9);
	padding-bottom: var(--space-9);
}

.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.step {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(20, 19, 15, 0.08);
}

.step__num {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--ink-mute);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--accent-soft);
	color: var(--ink);
	border-radius: var(--radius);
}

.step__title {
	font-family: var(--font-tight);
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	line-height: 1.2;
}

.step__lead {
	font-size: var(--fs-sm);
	color: var(--ink-soft);
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 880px) {
	.steps {
		grid-template-columns: 1fr;
	}
}

/* ─── 5. Features (Co dostajesz) ─────────────────────────── */

.features {
	padding-top: var(--space-9);
	padding-bottom: var(--space-9);
	background: var(--paper);
	border-top: 1px solid var(--line-soft);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.feature-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	background: var(--bg);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.feature-card:hover {
	border-color: var(--accent);
	transform: translateY(-1px);
}

.feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--accent-soft);
	color: var(--ink);
	border-radius: 12px;
}

.feature-card__title {
	font-family: var(--font-tight);
	font-size: var(--fs-lg);
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0;
	line-height: 1.2;
}

.feature-card__lead {
	font-size: var(--fs-sm);
	color: var(--ink-soft);
	line-height: 1.55;
	margin: 0;
	flex: 1;
}

.feature-card__meta {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--ink-mute);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
	padding-top: var(--space-3);
	border-top: 1px dashed var(--line);
}

@media (max-width: 1080px) {
	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.feature-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── 6. Pricing teaser ──────────────────────────────────── */

.pricing-teaser {
	padding-top: var(--space-9);
	padding-bottom: var(--space-9);
}

.pricing-teaser__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
	text-align: center;
}

.pricing-teaser__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 640px;
}

.pricing-teaser__tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pricing-teaser__tier {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	align-items: center;
	padding: var(--space-5) var(--space-4);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	position: relative;
}

.pricing-teaser__tier--popular {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--bg);
}

.pricing-teaser__tier-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: 999px;
	font-weight: 600;
}

.pricing-teaser__tier-name {
	font-family: var(--font-tight);
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.pricing-teaser__tier-price {
	font-family: var(--font-tight);
	font-size: var(--fs-2xl);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1;
}

.pricing-teaser__tier-price small {
	font-size: var(--fs-sm);
	font-weight: 500;
	opacity: 0.6;
	letter-spacing: -0.01em;
}

.pricing-teaser__tier-meta {
	font-size: var(--fs-xs);
	font-family: var(--font-mono);
	color: var(--ink-mute);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.pricing-teaser__tier--popular .pricing-teaser__tier-meta {
	color: rgba(250, 248, 243, 0.7);
}

.pricing-teaser__cta {
	margin: 0;
}

@media (max-width: 720px) {
	.pricing-teaser__tiers {
		grid-template-columns: 1fr;
	}
	.pricing-teaser__tier-badge {
		top: -10px;
	}
}

/* ─── 7. Lifetime banner ─────────────────────────────────── */

.lifetime-banner {
	padding-top: var(--space-7);
	padding-bottom: var(--space-7);
}

.lifetime-banner__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-7);
	align-items: center;
	padding: var(--space-7);
	background: var(--ink);
	color: var(--bg);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(20, 19, 15, 0.18);
	background-image:
		radial-gradient(circle at 90% 10%, var(--accent-soft) 0%, transparent 35%),
		radial-gradient(circle at 10% 90%, oklch(0.86 0.18 125 / 0.10) 0%, transparent 40%);
}

.lifetime-banner__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.lifetime-banner__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--accent);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lifetime-banner__pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	animation: lifetime-pulse 1.6s ease-in-out infinite;
}

@keyframes lifetime-pulse {
	0%, 100% { box-shadow: 0 0 0 0 oklch(0.86 0.18 125 / 0.6); }
	50%      { box-shadow: 0 0 0 8px oklch(0.86 0.18 125 / 0); }
}

.lifetime-banner__heading {
	font-family: var(--font-tight);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--bg);
	margin: 0;
}

.lifetime-banner__price {
	color: var(--accent);
}

.lifetime-banner__heading s {
	opacity: 0.5;
	font-weight: 600;
}

.lifetime-banner__lead {
	font-size: var(--fs-base);
	color: rgba(250, 248, 243, 0.75);
	line-height: 1.55;
	margin: 0;
}

.lifetime-banner__cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: flex-start;
}

.lifetime-banner__btn {
	background: var(--accent);
	color: var(--accent-ink);
	border-color: var(--accent);
	width: 100%;
	justify-content: center;
}

.lifetime-banner__btn:hover,
.lifetime-banner__btn:focus-visible {
	background: var(--bg);
	color: var(--ink);
	border-color: var(--bg);
}

.lifetime-banner__micro {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: rgba(250, 248, 243, 0.5);
	letter-spacing: 0.02em;
	margin: 0;
}

@media (max-width: 880px) {
	.lifetime-banner__inner {
		grid-template-columns: 1fr;
		gap: var(--space-5);
		padding: var(--space-6);
	}
	.lifetime-banner__cta {
		align-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lifetime-banner__pulse {
		animation: none !important;
	}
}

/* ─── 8. Social proof ────────────────────────────────────── */

.social-proof {
	padding-top: var(--space-9);
	padding-bottom: var(--space-9);
	background: var(--paper);
	border-top: 1px solid var(--line-soft);
}

.social-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	max-width: 880px;
	margin: 0 auto var(--space-7);
	padding: var(--space-5) 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	list-style: none;
}

.social-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.social-stats__num {
	font-family: var(--font-tight);
	font-size: var(--fs-3xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--ink);
}

.social-stats__label {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--ink-mute);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.social-proof__placeholder {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--space-5);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	text-align: center;
	background: var(--bg);
}

.social-proof__placeholder-text {
	font-size: var(--fs-sm);
	color: var(--ink-mute);
	font-style: italic;
	margin: 0;
}

@media (max-width: 720px) {
	.social-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}
	.social-stats__num {
		font-size: var(--fs-2xl);
	}
}

/* ─── 9. FAQ ─────────────────────────────────────────────── */

.faq {
	padding-top: var(--space-9);
	padding-bottom: var(--space-9);
}

.faq-list {
	max-width: 820px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.faq-item {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.faq-item:has(details[open]) {
	border-color: var(--ink);
}

.faq-details {
	cursor: pointer;
}

.faq-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	font-family: var(--font-tight);
	font-size: var(--fs-base);
	font-weight: 600;
	letter-spacing: -0.01em;
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease;
}

.faq-summary:hover,
.faq-summary:focus-visible {
	background: var(--line-soft);
	outline: none;
}

/* Hide native marker (Safari + Firefox + Chrome) */
.faq-summary::-webkit-details-marker {
	display: none;
}
.faq-summary::marker {
	content: '';
}

.faq-summary__text {
	flex: 1;
}

.faq-summary__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--ink-soft);
	transition: transform 0.2s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
	flex-shrink: 0;
}

.faq-details[open] .faq-summary__icon {
	transform: rotate(180deg);
	color: var(--ink);
}

.faq-answer {
	padding: 0 var(--space-5) var(--space-5);
	color: var(--ink-soft);
	font-size: var(--fs-sm);
	line-height: 1.65;
	border-top: 1px solid var(--line-soft);
}

.faq-answer p {
	margin-top: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
	.faq-summary__icon {
		transition: none !important;
	}
}

/* ─── 10. Footer 4-column ────────────────────────────────── */
/* Override base footer styles z main.css — landing footer ma 4-col grid. */

.site-footer {
	padding-top: var(--space-9);
	padding-bottom: var(--space-5);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
	gap: var(--space-6);
	margin-bottom: var(--space-8);
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 280px;
}

.site-footer__logo {
	display: inline-flex;
	color: var(--bg);
	text-decoration: none;
}

.site-footer__logo .geoboard-logo {
	color: var(--bg);
}

.site-footer__logo .geoboard-logo__name {
	color: var(--bg);
}

.site-footer__tagline {
	font-size: var(--fs-sm);
	color: rgba(250, 248, 243, 0.7);
	line-height: 1.55;
	margin: 0;
}

.site-footer__powered {
	font-size: var(--fs-xs);
	color: rgba(250, 248, 243, 0.5);
	font-family: var(--font-mono);
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin: 0;
}

.site-footer__col-title {
	font-family: var(--font-tight);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--bg);
	margin: 0 0 var(--space-3);
	letter-spacing: 0.06em;
	font-size: 12px;
}

.site-footer__col-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.site-footer__col-list a {
	display: inline-block;
	font-size: var(--fs-sm);
	color: rgba(250, 248, 243, 0.7);
	text-decoration: none;
	line-height: 1.4;
	transition: color 0.15s ease;
}

.site-footer__col-list a:hover,
.site-footer__col-list a:focus-visible {
	color: var(--accent);
	opacity: 1;
	outline: none;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-5);
	border-top: 1px solid rgba(250, 248, 243, 0.10);
}

.site-footer__copy {
	font-size: var(--fs-xs);
	color: rgba(250, 248, 243, 0.5);
	font-family: var(--font-mono);
	letter-spacing: 0.02em;
	margin: 0;
}

.site-footer__contact {
	font-size: var(--fs-sm);
	color: rgba(250, 248, 243, 0.7);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}

.site-footer__contact a {
	color: var(--bg);
	text-decoration: none;
	font-family: var(--font-tight);
	font-weight: 500;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
	color: var(--accent);
	opacity: 1;
}

.site-footer__sep {
	color: rgba(250, 248, 243, 0.3);
}

@media (max-width: 1080px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.site-footer__brand {
		grid-column: 1 / -1;
		max-width: none;
		margin-bottom: var(--space-3);
	}
}

@media (max-width: 640px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}
	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ─── 11. Polish — performance + print + content-visibility ── */

/* content-visibility: auto pozwala browser'owi pominąć rendering off-screen
   sekcji do momentu gdy są blisko viewport. Lighthouse boost +5-10 pts.
   contain-intrinsic-size daje placeholder height żeby nie było scrollbar jump. */
.why-now,
.how-it-works,
.features,
.pricing-teaser,
.lifetime-banner,
.social-proof,
.faq {
	content-visibility: auto;
	contain-intrinsic-size: 1px 600px;
}

/* Print styles — chowa nav, widget Indygo, lifetime banner.
   Drukowane: hero copy + features + footer kontakt. */
@media print {
	.site-header,
	.indygo-widget,
	.indygo-revive,
	.lifetime-banner,
	.hero__widget,
	.hero__sample-link {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.hero,
	.why-now,
	.how-it-works,
	.features,
	.pricing-teaser,
	.social-proof,
	.faq {
		break-inside: avoid;
		padding: 16pt 0;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #555;
	}
}

/* Touch device hover suppression — fixes "stuck hover" na mobile po tap */
@media (hover: none) {
	.step:hover,
	.feature-card:hover {
		transform: none;
		box-shadow: none;
	}
}