/* ============================================================
   BaronPay — оформление статических info-страниц.
   Токены и приёмы те же, что в приложении (frontend/src/index.css):
   тёмный фон + золото, шрифты Space Grotesk / Montenegrin Gothic One.
   Раньше страницы были неоново-зелёными и выбивались из бренда.
   Один файл на все страницы — цвета не хардкодятся в разметке.
   ============================================================ */

:root {
	--bg: #0a0a0c;
	--bg-2: #101013;
	--surface: #17171b;
	--surface-border: rgba(233, 196, 90, 0.26);
	--hairline: rgba(233, 196, 90, 0.14);
	--text: #f3efe3;
	--text-soft: rgba(243, 239, 227, 0.78);
	--muted: #86837a;
	--gold-1: #f4cf5a;
	--gold-2: #d99f2b;
	--gold-solid: #e8b93a;
	--gold-ink: #2a2205;
	--card-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
	color-scheme: dark;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	background: radial-gradient(900px 520px at 50% -8%, rgba(233, 196, 90, 0.1), transparent 62%),
		var(--bg);
	color: var(--text);
	line-height: 1.7;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.container {
	max-width: 880px;
	margin: 0 auto;
	padding: 32px 20px;
}
/* Каталог услуг с плитками шире текстовых страниц */
.container.wide {
	max-width: 980px;
}

header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 32px;
}
header img {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	border: 1px solid var(--hairline);
}
header .brand {
	font-weight: 700;
	font-size: 18px;
	color: var(--text);
}

/* Золотой заголовок с бегущим бликом — как .gold-title в приложении */
h1 {
	font-family: 'Montenegrin Gothic One', 'Space Grotesk', sans-serif;
	font-weight: 400;
	font-size: clamp(26px, 5.2vw, 36px);
	line-height: 1.15;
	letter-spacing: 0.01em;
	margin-bottom: 16px;
	background: linear-gradient(
		100deg,
		var(--gold-2) 0%,
		var(--gold-1) 28%,
		#fff4cf 50%,
		var(--gold-1) 72%,
		var(--gold-2) 100%
	);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 3px 12px rgba(233, 196, 90, 0.25));
	animation: gold-shine 4.5s linear infinite;
}
@keyframes gold-shine {
	0% {
		background-position: 210% 0;
	}
	100% {
		background-position: -210% 0;
	}
}

h2 {
	font-size: clamp(20px, 3.4vw, 26px);
	margin: 36px 0 14px;
	color: var(--gold-solid);
}
h3 {
	font-size: 18px;
	margin: 20px 0 8px;
	color: var(--text);
}
p {
	margin-bottom: 14px;
	color: var(--text-soft);
}
ul,
ol {
	margin: 12px 0 18px 22px;
	color: var(--text-soft);
}
li {
	margin-bottom: 8px;
}
strong {
	color: var(--text);
}
code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.92em;
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--bg-2);
	border: 1px solid var(--hairline);
	color: var(--gold-1);
}
a {
	color: var(--gold-solid);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.lead {
	font-size: 18px;
	color: var(--text);
	opacity: 0.92;
	margin-bottom: 28px;
}

/* Золотая пилюля — та же, что у кнопок приложения */
.cta {
	display: inline-block;
	padding: 15px 30px;
	margin: 8px 8px 8px 0;
	background: linear-gradient(155deg, var(--gold-1), var(--gold-2));
	color: var(--gold-ink);
	font-weight: 700;
	font-size: 17px;
	border-radius: 14px;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(233, 196, 90, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(233, 196, 90, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.45);
	text-decoration: none;
}
.cta.secondary {
	background: transparent;
	color: var(--gold-solid);
	border: 1px solid var(--surface-border);
	box-shadow: none;
}
.cta.secondary:hover {
	border-color: var(--gold-solid);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.card {
	background: var(--surface);
	border: 1px solid var(--surface-border);
	border-radius: 16px;
	padding: 20px;
	margin: 16px 0;
	box-shadow: var(--card-shadow);
}
.faq h3 {
	cursor: default;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin: 24px 0;
}
.tile {
	display: block;
	background: var(--surface);
	border: 1px solid var(--surface-border);
	border-radius: 16px;
	padding: 24px;
	color: var(--text);
	text-decoration: none;
	box-shadow: var(--card-shadow);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tile:hover {
	transform: translateY(-2px);
	border-color: var(--gold-solid);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.62);
	text-decoration: none;
}
.tile h3 {
	font-size: 20px;
	color: var(--gold-solid);
	margin: 0 0 8px;
}
.tile p {
	color: var(--muted);
	font-size: 14px;
	margin: 0;
}

.crumbs {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 20px;
}

.price-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0;
}
.price-table th,
.price-table td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--hairline);
	color: var(--text-soft);
}
.price-table th {
	color: var(--gold-solid);
	font-weight: 600;
}

footer {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--hairline);
	color: var(--muted);
	font-size: 14px;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	h1 {
		animation: none;
	}
	.cta,
	.tile {
		transition: none;
	}
}

@media (max-width: 600px) {
	.container {
		padding: 24px 16px;
	}
	.lead {
		font-size: 16px;
	}
}