/*
 * Landing page chrome on top of Tabler + main.css.
 * Surfaces and text use --pgw-* only (driven by prefers-color-scheme in main.css)
 * so the page stays one coherent light or dark theme — no mixed bands.
 */

:root {
	--landing-wheat: var(--pgw-theme-wheat, #d1caa1);
	--landing-slate: var(--pgw-theme-slate, #66717e);
	--landing-mist: var(--pgw-theme-mist, #d4d6b9);
}

body.landing {
	margin: 0;
	padding: 0;
	border: none;
	min-height: 100vh;
	background-color: var(--pgw-bg);
	color: var(--pgw-text);
	font-family: var(--tblr-font-sans-serif, "Fira Sans", system-ui, sans-serif);
	font-size: var(--tblr-body-font-size, 0.875rem);
	line-height: var(--tblr-body-line-height, 1.5);
}

body.landing a:not(.btn) {
	color: var(--pgw-link);
}

body.landing a:not(.btn):hover {
	color: var(--pgw-link-hover);
}

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 9999;
	padding: 0.5rem 1rem;
	background: var(--pgw-btn-bg);
	color: var(--pgw-btn-text);
	font-weight: 600;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

.landing-nav {
	background: color-mix(in srgb, var(--pgw-bg-raised) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--pgw-border);
}

.landing-nav .navbar-brand,
.landing-nav .navbar-brand .ms-2,
.landing-nav .nav-link {
	color: var(--pgw-text);
}

.landing-nav .nav-link:hover,
.landing-nav .nav-link:focus {
	color: var(--pgw-text);
	opacity: 0.85;
}

.landing-nav .navbar-toggler {
	border-color: var(--pgw-border);
}

.landing-nav .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2352525b' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
	.landing-nav .navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}
}

.landing-nav .navbar-brand-image {
	width: 2rem;
	height: 2rem;
	object-fit: contain;
}

/* Primary buttons: brand tokens, readable in both schemes */
body.landing .btn-primary {
	background-color: var(--pgw-btn-bg);
	border-color: var(--pgw-border-muted);
	color: var(--pgw-btn-text);
}

body.landing .btn-primary:hover,
body.landing .btn-primary:focus {
	background-color: var(--pgw-btn-hover-bg);
	border-color: var(--pgw-border);
	color: var(--pgw-btn-hover-text);
}

body.landing .btn-outline-secondary {
	border-color: var(--pgw-border);
	color: var(--pgw-text);
}

body.landing .btn-outline-secondary:hover,
body.landing .btn-outline-secondary:focus {
	background-color: var(--pgw-bg-muted);
	border-color: var(--pgw-border-muted);
	color: var(--pgw-text);
}

/* Hero */
.hero {
	position: relative;
	overflow: clip;
	padding: clamp(3.5rem, 10vw, 6.5rem) 0 clamp(3rem, 8vw, 5rem);
	text-align: center;
	background:
		radial-gradient(ellipse 110% 70% at 50% -15%, color-mix(in srgb, var(--landing-wheat) 28%, transparent), transparent 55%),
		radial-gradient(ellipse 70% 45% at 100% 80%, color-mix(in srgb, var(--landing-slate) 14%, transparent), transparent 50%),
		radial-gradient(ellipse 60% 40% at 0% 70%, color-mix(in srgb, var(--landing-mist) 16%, transparent), transparent 45%),
		var(--pgw-bg);
}

@media (prefers-color-scheme: dark) {
	.hero {
		background:
			radial-gradient(ellipse 110% 70% at 50% -15%, color-mix(in srgb, var(--landing-wheat) 12%, transparent), transparent 55%),
			radial-gradient(ellipse 70% 45% at 100% 80%, color-mix(in srgb, var(--landing-slate) 28%, transparent), transparent 50%),
			radial-gradient(ellipse 60% 40% at 0% 70%, color-mix(in srgb, var(--landing-mist) 8%, transparent), transparent 45%),
			var(--pgw-bg);
	}
}

.hero__wash {
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(
			-18deg,
			transparent,
			transparent 4px,
			color-mix(in srgb, var(--pgw-text) 4%, transparent) 4px,
			color-mix(in srgb, var(--pgw-text) 4%, transparent) 5px
		);
	opacity: 0.4;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 15%, transparent 70%);
	animation: wash-drift 32s linear infinite;
}

@keyframes wash-drift {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(-1.5%, 1%);
	}
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 40rem;
	margin-inline: auto;
}

.hero__logo {
	display: block;
	width: clamp(5.5rem, 16vw, 8rem);
	height: auto;
	margin: 0 auto 1rem;
	filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--landing-slate) 35%, transparent));
	animation: logo-float 5.5s ease-in-out infinite;
}

@keyframes logo-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}

.hero__version {
	margin: 0 0 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pgw-text-muted);
}

.hero__title {
	margin: 0 0 0.5rem;
	font-size: clamp(2.5rem, 7vw, 3.75rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--pgw-text);
}

.hero__tagline {
	margin: 0 0 1rem;
	font-size: clamp(1.125rem, 2.5vw, 1.35rem);
	font-weight: 500;
	color: var(--pgw-text-muted);
}

.hero__lede {
	margin: 0 auto 1.75rem;
	max-width: 34rem;
	color: var(--pgw-text-muted);
	text-wrap: pretty;
}

.hero__actions {
	justify-content: center;
}

/* Sections — same theme; muted is only a soft within-scheme tint */
.section {
	padding: clamp(3rem, 8vw, 5rem) 0;
	background-color: var(--pgw-bg);
	color: var(--pgw-text);
}

.section--muted {
	background-color: var(--pgw-bg-muted);
	border-block: 1px solid var(--pgw-border);
}

.section__heading {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 3.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--pgw-text);
}

.section .text-secondary {
	color: var(--pgw-text-muted) !important;
}

.feature {
	height: 100%;
	padding: 0.25rem 0;
}

.feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.85rem;
	border-radius: var(--tblr-border-radius, 4px);
	background: color-mix(in srgb, var(--landing-mist) 45%, var(--pgw-bg-muted));
	color: var(--landing-slate);
}

@media (prefers-color-scheme: dark) {
	.feature__icon {
		background: color-mix(in srgb, var(--landing-slate) 40%, var(--pgw-bg-muted));
		color: var(--landing-wheat);
	}
}

.feature__title {
	margin: 0 0 0.4rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--pgw-text);
}

.feature__desc {
	font-size: 0.9375rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.pullquote {
	margin: 0 0 1.5rem;
	padding: 1.35rem 1.5rem;
	border-left: 3px solid var(--landing-slate);
	background: var(--pgw-bg-raised);
	border-radius: 0 var(--tblr-border-radius, 4px) var(--tblr-border-radius, 4px) 0;
}

.pullquote p {
	margin: 0;
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	font-weight: 500;
	line-height: 1.45;
	font-style: italic;
	color: var(--pgw-text);
}

.install-snippet {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	overflow-x: auto;
	border: 1px solid var(--pgw-border);
	border-radius: var(--tblr-border-radius, 4px);
	background: var(--pgw-code-bg);
	color: var(--pgw-text);
	font-family: var(--tblr-font-monospace, "Fira Code", ui-monospace, monospace);
	font-size: 0.875rem;
	line-height: 1.5;
}

.install-snippet code {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

body.landing code {
	background-color: var(--pgw-code-bg);
	border: 1px solid var(--pgw-code-border);
	color: var(--pgw-text);
}

.landing-footer {
	padding: 2rem 0 2.5rem;
	background-color: var(--pgw-bg);
	border-top: 1px solid var(--pgw-border);
	color: var(--pgw-text-muted);
}

.landing-footer .link-secondary,
.landing-footer .text-secondary {
	color: var(--pgw-text-muted) !important;
}

.landing-footer .link-secondary:hover {
	color: var(--pgw-link) !important;
}

@media (prefers-reduced-motion: reduce) {
	.hero__wash,
	.hero__logo {
		animation: none;
	}
}