/* ============================================================
   === Landing / Home page (index.html) ===
   ============================================================ */

.lp-main {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/*
 * Главная (body.page-landing): шапка как у hero — без «плиты» из base.
 * Класс на body, чтобы не зависеть от :has() и кэша.
 */
.page-landing .header:not(.app-topbar) {
	background:
		linear-gradient(
			180deg,
			rgba(13, 18, 26, 0.92) 0%,
			rgba(15, 22, 34, 0.78) 35%,
			rgba(15, 20, 28, 0.35) 85%,
			rgba(15, 20, 25, 0) 100%
		),
		radial-gradient(ellipse 110% 140% at 50% -50%, rgba(59, 130, 246, 0.32) 0%, transparent 58%),
		radial-gradient(ellipse 70% 100% at 92% -20%, rgba(139, 92, 246, 0.18) 0%, transparent 50%) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(96, 165, 250, 0.22) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .page-landing .header:not(.app-topbar) {
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.99) 0%,
			rgba(238, 242, 255, 0.95) 42%,
			rgba(224, 231, 255, 0.72) 88%,
			rgba(238, 242, 255, 0) 100%
		),
		radial-gradient(ellipse 100% 130% at 50% -45%, rgba(99, 102, 241, 0.28) 0%, transparent 54%),
		radial-gradient(ellipse 65% 95% at 90% -15%, rgba(59, 130, 246, 0.2) 0%, transparent 48%) !important;
	border-bottom-color: rgba(99, 102, 241, 0.38) !important;
	box-shadow: 0 8px 32px rgba(67, 56, 202, 0.14);
}

/* ── Shared helpers ── */
.lp-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.5rem;
	width: 100%;
}

/* Wider container for sections with large screenshots */
.lp-inner--wide {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
	width: 100%;
}

.lp-divider {
	width: 100%;
	height: 1px;
	background: var(--border);
}

.lp-section {
	padding: 4.5rem 0;
}

.lp-section--alt {
	background: var(--lp-section-alt-bg);
}

.lp-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin: 0 0 0.55rem;
}

.lp-eyebrow--center {
	text-align: center;
}

.lp-section-title {
	font-size: clamp(1.55rem, 3vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--text);
	margin: 0 0 0.7rem;
	text-align: center;
}

.lp-section-title--left {
	text-align: left;
}

.lp-section-desc {
	font-size: 1rem;
	color: var(--text-muted);
	line-height: 1.65;
	text-align: center;
	max-width: 560px;
	margin: 0 auto 2.75rem;
}

.lp-accent {
	background: linear-gradient(130deg, #60a5fa 0%, #818cf8 55%, #a78bfa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.lp-btn-lg {
	padding: 0.72rem 1.6rem;
	font-size: 0.975rem;
	border-radius: 10px;
}

/* ── Hero ── */
.lp-hero {
	position: relative;
	overflow: hidden;
	padding: 5rem 1.5rem 4.5rem;
	text-align: center;
}

.lp-hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 50% -5%, rgba(59, 130, 246, 0.14) 0%, transparent 70%),
		radial-gradient(ellipse 50% 30% at 80% 60%, rgba(139, 92, 246, 0.07) 0%, transparent 70%);
	pointer-events: none;
}

.lp-hero-content {
	position: relative;
	max-width: 780px;
	margin: 0 auto;
}

.lp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.28rem 0.9rem;
	background: rgba(59, 130, 246, 0.1);
	border: 1px solid rgba(59, 130, 246, 0.28);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--primary);
	letter-spacing: 0.03em;
	margin-bottom: 1.5rem;
}

.lp-badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--primary);
	animation: lp-pulse 2s ease-in-out infinite;
}

@keyframes lp-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.5; transform: scale(0.85); }
}

.lp-hero-title {
	font-size: clamp(2rem, 5.5vw, 3.25rem);
	font-weight: 800;
	line-height: 1.13;
	letter-spacing: -0.025em;
	color: var(--text);
	margin: 0 0 1.2rem;
}

.lp-hero-sub {
	font-size: 1.08rem;
	color: var(--text-muted);
	line-height: 1.68;
	margin: 0 auto 2.25rem;
	max-width: 600px;
}

.lp-hero-actions {
	display: flex;
	gap: 0.8rem;
	justify-content: center;
	flex-wrap: wrap;
}

.lp-hero-stats {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: center;
	justify-items: center;
	gap: 0;
	margin-top: 3.25rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 1.25rem 0.5rem;
	max-width: min(100%, 1080px);
	margin-left: auto;
	margin-right: auto;
}

.lp-hero-stat {
	min-width: 0;
	width: 100%;
	text-align: center;
	padding: 0 0.25rem;
	box-sizing: border-box;
}

.lp-hero-stat:not(:last-child) {
	border-right: 1px solid var(--border);
}

.lp-hero-stat-value {
	display: block;
	font-size: clamp(0.95rem, 1.15vw, 1.45rem);
	font-weight: 800;
	line-height: 1.15;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lp-hero-stat-label {
	display: block;
	font-size: 0.8rem;
	color: var(--text-muted);
	margin-top: 0.2rem;
}

.lp-stat-sep {
	display: none;
}

/* ── Two-col layout ── */
.lp-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

.lp-two-col--reverse {
	direction: rtl;
}

.lp-two-col--reverse > * {
	direction: ltr;
}

/* Stretch variant — both columns fill the same row height (good for portrait/tall screenshots) */
.lp-two-col--stretch {
	align-items: stretch;
}

.lp-two-col--stretch .lp-screenshot-box {
	height: 100%;
	min-height: 200px;
}

.lp-two-col--stretch .lp-screenshot-box.lp-screenshot-box--portrait {
	height: auto;
	min-height: 0;
	align-self: center;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 1100px) {
	.lp-two-col,
	.lp-two-col--reverse {
		grid-template-columns: 1fr;
		direction: ltr;
	}
	.lp-two-col--reverse > * {
		direction: ltr;
	}
	.lp-two-col--stretch .lp-screenshot-box {
		height: auto;
		min-height: 180px;
	}

	.lp-two-col--stretch .lp-screenshot-box.lp-screenshot-box--portrait {
		min-height: 0;
	}

	#columns .lp-two-col {
		flex-direction: column;
		gap: 1.5rem;
		justify-content: center;
		align-items: center;
	}

	#columns .lp-text-block {
		flex: 1 1 auto;
		text-align: center;
		width: 100%;
		max-width: 100%;
	}

	#columns .lp-checklist {
		display: inline-block;
		text-align: left;
	}

	#columns .lp-screenshot-fit {
		max-width: 100%;
		justify-content: center;
		height: auto;
	}

	#columns .lp-screenshot-fit img {
		height: auto;
		max-height: min(28rem, 72vh);
	}
}

/* ── Text block ── */
.lp-text-block {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.lp-body-text {
	font-size: 0.975rem;
	color: var(--text-muted);
	line-height: 1.68;
	margin: 0;
}

.lp-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.lp-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9rem;
	color: var(--text);
	line-height: 1.5;
}

.lp-check-icon {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(34, 197, 94, 0.14);
	color: #4ade80;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

/* ── Screenshot placeholder ── */
.lp-screenshot-box {
	background: var(--surface);
	border: 1.5px solid var(--border);
	border-radius: 14px;
	min-height: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	padding: 1rem;
	text-align: center;
	overflow: hidden;
}

/* Full-width image — preserve aspect ratio without stretching */
.lp-screenshot-box img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	object-fit: contain;
}

/* Portrait box — shows tall/narrow screenshots at natural size, centred in the box */
.lp-screenshot-box--portrait {
	min-height: 0;
	padding: 0.75rem;
	justify-content: center;
}

.lp-screenshot-box--portrait img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	margin: 0 auto;
	border-radius: 8px;
}

#columns .lp-inner {
	display: flex;
	justify-content: center;
}

#columns .lp-two-col {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#columns .lp-text-block {
	flex: 0 1 480px;
	min-width: min(100%, 320px);
	max-width: 480px;
}

#columns .lp-screenshot-fit {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: auto;
	max-width: 100%;
	margin-left: 0;
	overflow: hidden;
}

#columns .lp-screenshot-fit img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center center;
	border-radius: 8px;
}

.lp-api-showcase {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.lp-scanner-item--api .lp-si-accent {
	background: linear-gradient(180deg, rgb(99, 102, 241) 0%, rgb(129, 140, 248) 100%);
}

.lp-sc-icon--api {
	background: rgba(99, 102, 241, 0.14);
	color: rgb(129, 140, 248);
}

.lp-si-shot--placeholder {
	min-height: 220px;
}

.lp-si-shot--placeholder .lp-screenshot-placeholder {
	width: 100%;
	height: 100%;
	min-height: 220px;
}

.lp-ph-icon {
	opacity: 0.3;
	flex-shrink: 0;
}

.lp-ph-label {
	font-size: 0.82rem;
	color: var(--text-muted);
	line-height: 1.5;
	margin: 0;
	opacity: 0.75;
}

/* ── Scanner list (vertical rows with screenshot beside text) ── */
.lp-scanner-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.lp-scanner-item {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.lp-scanner-item:hover {
	border-color: rgba(59, 130, 246, 0.4);
	box-shadow: 0 8px 32px rgba(59, 130, 246, 0.08);
}

/* Colored accent bar at top */
.lp-si-accent {
	height: 3px;
}

.lp-scanner-item--spot    .lp-si-accent { background: linear-gradient(90deg, #3b82f6, #06b6d4); }
.lp-scanner-item--futures .lp-si-accent { background: linear-gradient(90deg, #8b5cf6, #ec4899); }
.lp-scanner-item--sf      .lp-si-accent { background: linear-gradient(90deg, #22c55e, #3b82f6); }
.lp-scanner-item--funding .lp-si-accent { background: linear-gradient(90deg, #f59e0b, #ef4444); }

/* Two-column body: text | screenshot */
.lp-si-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 360px;
}

.lp-si-content {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border-right: 1px solid var(--border);
}

.lp-si-shot {
	background: var(--surface-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 1.25rem;
}

.lp-si-shot img {
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	border-radius: 8px;
	display: block;
}

/* Flipped layout: screenshot left, text right */
.lp-scanner-item--flip .lp-si-content {
	order: 2;
	border-right: none;
	border-left: 1px solid var(--border);
}

.lp-scanner-item--flip .lp-si-shot {
	order: 1;
}

@media (max-width: 1100px) {
	.lp-si-body {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.lp-si-content {
		border-right: none;
		border-bottom: 1px solid var(--border);
	}
	.lp-scanner-item--flip .lp-si-content {
		order: 1;
		border-left: none;
		border-bottom: 1px solid var(--border);
	}
	.lp-scanner-item--flip .lp-si-shot {
		order: 2;
	}
	.lp-si-shot {
		min-height: 220px;
	}
}

.lp-sc-header {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.lp-sc-icon {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lp-sc-icon--spot    { background: rgba(59,  130, 246, 0.14); color: #60a5fa; }
.lp-sc-icon--futures { background: rgba(139, 92,  246, 0.14); color: #a78bfa; }
.lp-sc-icon--sf      { background: rgba(34,  197, 94,  0.14); color: #4ade80; }

.lp-sc-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--text);
	margin: 0;
}

.lp-sc-desc {
	font-size: 0.875rem;
	color: var(--text-muted);
	line-height: 1.62;
	margin: 0;
	flex: 1;
}

.lp-sc-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.38rem;
}

.lp-sc-features li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.83rem;
	color: var(--text-muted);
	line-height: 1.45;
}

.lp-sc-features li::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--primary);
	flex-shrink: 0;
	margin-top: 0.42em;
	opacity: 0.7;
}

.lp-sc-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
	transition: gap 0.15s;
}

.lp-sc-link:hover {
	gap: 0.65rem;
}

/* ── Steps ── */
.lp-steps-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
	gap: 0;
	align-items: stretch; /* equal height for all step cards */
}

@media (max-width: 840px) {
	.lp-steps-grid {
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}
	.lp-step-connector { display: none; }
}

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

.lp-step {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 1.4rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	/* height: 100% is implicit via align-items: stretch on parent grid */
}

.lp-step-connector {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
}

.lp-step-connector::after {
	content: '';
	width: 20px;
	height: 1px;
	border-top: 1.5px dashed var(--border);
}

.lp-step-num {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--primary);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lp-step-title {
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--text);
	margin: 0;
}

.lp-step-desc {
	font-size: 0.84rem;
	color: var(--text-muted);
	line-height: 1.55;
	margin: 0;
}

/* ── Features grid ── */
.lp-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem;
}

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

@media (max-width: 480px) {
	.lp-features-grid { grid-template-columns: 1fr; }
}

.lp-feature {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 13px;
	padding: 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.lp-feature-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(59, 130, 246, 0.12);
	color: #60a5fa;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lp-feature-title {
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--text);
	margin: 0;
}

.lp-feature-desc {
	font-size: 0.85rem;
	color: var(--text-muted);
	line-height: 1.58;
	margin: 0;
}

/* ── Trust grid ── */
.lp-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.1rem;
}

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

@media (max-width: 480px) {
	.lp-trust-grid { grid-template-columns: 1fr; }
}

.lp-trust-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 13px;
	padding: 1.4rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.lp-trust-icon {
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: rgba(59, 130, 246, 0.1);
	color: #60a5fa;
	display: flex;
	align-items: center;
	justify-content: center;
}


.lp-trust-title {
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--text);
	margin: 0;
}

.lp-trust-desc {
	font-size: 0.84rem;
	color: var(--text-muted);
	line-height: 1.58;
	margin: 0;
}

.lp-trial-inline-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: #4ade80;
	text-decoration: none;
	transition: opacity 0.15s;
}

.lp-trial-inline-btn:hover {
	opacity: 0.75;
}

/* ── Filter tags ── */
.lp-filter-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.lp-filter-tag {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	background: var(--surface-hover);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.8rem;
	color: var(--text-muted);
	font-weight: 500;
}

/* ── CTA section ── */
.lp-cta {
	position: relative;
	overflow: hidden;
	padding: 5.5rem 1.5rem;
	text-align: center;
}

.lp-cta-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 80% at 50% 110%, rgba(59, 130, 246, 0.12) 0%, transparent 70%),
		radial-gradient(ellipse 40% 40% at 20% 50%, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
	pointer-events: none;
}

.lp-cta-title {
	font-size: clamp(1.7rem, 3.5vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--text);
	margin: 0 0 0.85rem;
	line-height: 1.15;
}

.lp-cta-sub {
	font-size: 1.05rem;
	color: var(--text-muted);
	margin: 0 auto 2rem;
	max-width: 460px;
	line-height: 1.62;
}

.lp-cta-actions {
	display: flex;
	gap: 0.8rem;
	justify-content: center;
	flex-wrap: wrap;
}

.lp-cta-inner {
	position: relative;
}

/* Landing footer */
.lp-footer {
	padding: 2.5rem 0 2rem;
	border-top: 1px solid rgba(79, 108, 246, 0.12);
	background: rgba(8, 12, 22, 0.35);
}

.lp-footer-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.lp-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem 1.25rem;
}

.lp-footer-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.lp-footer-link:hover {
	color: var(--primary);
}

.lp-footer-link svg {
	flex-shrink: 0;
	opacity: 0.85;
}

.lp-footer-support {
	margin: 0;
	font-size: 0.9rem;
	color: var(--text-muted);
	line-height: 1.5;
}

.lp-footer-support a {
	color: var(--primary);
	text-decoration: none;
	font-weight: 500;
}

.lp-footer-support a:hover {
	text-decoration: underline;
}

.lp-footer-support-sep {
	margin: 0 0.35rem;
	opacity: 0.45;
}

.lp-footer-support-link {
	font-weight: 500;
}

.lp-tg-channel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
}

.lp-btn-icon {
	flex-shrink: 0;
}

.lp-footer-copy {
	margin: 0;
	font-size: 0.82rem;
	color: var(--text-muted);
	opacity: 0.75;
	line-height: 1.45;
}

html[data-theme="light"] .lp-footer {
	background: rgba(248, 250, 252, 0.85);
	border-top-color: rgba(0, 0, 0, 0.08);
}

/* Trial period button style (green accent) */
.btn-trial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.55rem 1.25rem;
	border-radius: var(--radius);
	border: 1.5px solid rgba(34, 197, 94, 0.45);
	background: rgba(34, 197, 94, 0.1);
	color: #4ade80;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.btn-trial:hover {
	background: rgba(34, 197, 94, 0.18);
	border-color: rgba(34, 197, 94, 0.65);
}

/* === Responsive: landing === */
@media (max-width: 640px) {
	.lp-section {
		padding: 3rem 0;
	}

	.lp-section-title {
		font-size: 1.5rem;
	}

	.lp-hero-title {
		font-size: clamp(1.75rem, 8vw, 3rem);
	}

	.lp-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.lp-hero-actions .btn,
	.lp-hero-actions .btn-trial {
		text-align: center;
		justify-content: center;
	}

	.lp-two-col--stretch .lp-screenshot-box.lp-screenshot-box--portrait {
		width: 75%;
	}
}

@media (max-width: 720px) {
	.lp-hero-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: 1rem;
		padding: 1rem 0.35rem;
	}

	.lp-hero-stat {
		border: none !important;
		padding-bottom: 0 !important;
	}
}

@media (max-width: 420px) {
	.lp-hero-stat-value {
		font-size: 0.95rem;
	}

	.lp-steps-grid {
		gap: 1rem;
	}
}

/* ── FUNDING scanner icon ── */
.lp-sc-icon--funding {
	background: rgba(245, 158, 11, 0.14);
	color: #f59e0b;
}

/* ── Screenshot placeholder (used while real screenshots not yet inserted) ── */
.lp-screenshot-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 200px;
	background: var(--surface-hover);
	border: 2px dashed var(--border);
	border-radius: 10px;
	text-align: center;
	padding: 1.5rem;
}

.lp-placeholder-label {
	font-size: 0.8rem;
	color: var(--text-muted);
	opacity: 0.7;
	max-width: 260px;
	line-height: 1.4;
}

.lp-screenshot-placeholder--wide {
	min-height: 120px;
}

/* ── API section ── */
.lp-features-grid--api {
	margin-bottom: 2.5rem;
}

.lp-feature--linked {
	position: relative;
}

.lp-feature--linked .lp-scanner-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--primary);
	text-decoration: none;
	margin-top: auto;
	padding-top: 0.25rem;
	transition: opacity 0.15s ease;
}

.lp-feature--linked .lp-scanner-link:hover {
	opacity: 0.75;
}

.lp-api-docs-callout {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 1.35rem 1.75rem;
	margin-top: 1rem;
}

.lp-api-docs-callout__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(59, 130, 246, 0.12);
	color: #60a5fa;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lp-api-docs-callout__body {
	flex: 1;
	min-width: 0;
}

.lp-api-docs-callout__title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	margin: 0 0 0.25rem;
}

.lp-api-docs-callout__text {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin: 0;
	line-height: 1.5;
}

.lp-api-docs-callout__btn {
	flex-shrink: 0;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.lp-api-docs-callout {
		flex-direction: column;
		align-items: flex-start;
	}
	.lp-api-docs-callout__btn {
		width: 100%;
		text-align: center;
	}
}

.lp-api-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-bottom: 3rem;
}

.lp-api-block {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.lp-api-block-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.lp-api-block-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(var(--primary-rgb, 99, 102, 241), 0.12);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lp-api-block-title {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text);
	margin: 0;
}

.lp-api-block-desc {
	font-size: 0.9rem;
	color: var(--text-muted);
	margin: 0;
}

.lp-code {
	font-family: 'Menlo', 'Consolas', monospace;
	font-size: 0.85em;
	background: var(--surface-hover);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.1em 0.35em;
	color: var(--primary);
}

.lp-endpoint-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lp-endpoint {
	display: grid;
	grid-template-columns: 52px 1fr;
	grid-template-rows: auto auto;
	gap: 0.15rem 0.6rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--border);
}

.lp-endpoint:last-child {
	border-bottom: none;
}

.lp-endpoint-method {
	grid-row: 1 / 3;
	align-self: center;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	text-align: center;
	flex-shrink: 0;
}

.lp-endpoint-method--get {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

.lp-endpoint-method--ws {
	background: rgba(99, 102, 241, 0.15);
	color: var(--primary);
}

.lp-endpoint-path {
	font-family: 'Menlo', 'Consolas', monospace;
	font-size: 0.78rem;
	color: var(--text);
	word-break: break-all;
}

.lp-endpoint-desc {
	font-size: 0.8rem;
	color: var(--text-muted);
}

/* Webhook showcase */
.lp-webhook-showcase {
	margin-bottom: 3rem;
}

/* API stats row */
.lp-api-stats-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
}

.lp-api-stats-shots {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2.5rem;
}

.lp-api-stats-shots .lp-screenshot-box {
	min-height: 0;
	padding: 0.65rem;
}

.lp-api-stats-shots .lp-screenshot-box img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

@media (max-width: 900px) {
	.lp-api-details {
		grid-template-columns: 1fr;
	}

	.lp-api-stats-row {
		grid-template-columns: 1fr;
	}

	.lp-api-stats-shots {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.lp-api-stats-shots {
		grid-template-columns: 1fr;
	}
}

/* Tablet drawer range: comfortable reading scale (820–1100px width) */
@media (min-width: 820px) and (max-width: 1100px) {
	.lp-main {
		font-size: 1.0625rem;
	}

	.lp-section {
		padding: 5rem 0;
	}

	.lp-hero {
		padding: 4.5rem 2rem 4rem;
	}

	.lp-badge {
		font-size: 0.875rem;
		padding: 0.45rem 0.95rem;
	}

	.lp-hero-title {
		font-size: 3.1rem;
	}

	.lp-hero-sub {
		font-size: 1.28rem;
		max-width: 680px;
		line-height: 1.7;
	}

	.lp-btn-lg,
	.lp-hero-actions .btn-primary,
	.lp-hero-actions .btn-secondary,
	.lp-hero-actions .btn-trial {
		font-size: 1.05rem;
		padding: 0.8rem 1.55rem;
	}

	.lp-hero-stats {
		padding: 1.5rem 0.75rem;
		margin-top: 3.5rem;
	}

	.lp-hero-stat-value {
		font-size: 1.35rem;
	}

	.lp-hero-stat-label {
		font-size: 0.95rem;
	}

	.lp-eyebrow {
		font-size: 0.875rem;
	}

	.lp-section-title {
		font-size: 2.2rem;
	}

	.lp-section-desc {
		font-size: 1.15rem;
		max-width: 640px;
		margin-bottom: 3rem;
	}

	.lp-body-text {
		font-size: 1.125rem;
		line-height: 1.72;
	}

	.lp-checklist li {
		font-size: 1.05rem;
		gap: 0.75rem;
	}

	.lp-check-icon {
		width: 22px;
		height: 22px;
	}

	.lp-sc-title {
		font-size: 1.35rem;
	}

	.lp-sc-desc {
		font-size: 1.05rem;
		line-height: 1.68;
	}

	.lp-sc-features li {
		font-size: 0.98rem;
	}

	.lp-sc-icon {
		width: 48px;
		height: 48px;
	}

	.lp-cta {
		padding: 6rem 2rem;
	}

	.lp-cta-title {
		font-size: 2.4rem;
	}

	.lp-cta-sub {
		font-size: 1.2rem;
		max-width: 540px;
	}

	.lp-cta-actions .btn-primary,
	.lp-cta-actions .btn-secondary,
	.lp-cta-actions .btn-trial {
		font-size: 1.05rem;
		padding: 0.8rem 1.55rem;
	}
}