/* =============================================================
   Паттерны секций: шапка, первый экран, сетки, шаги, тарифы,
   форма, подвал. Это уровень выше базовых элементов — здесь
   описано, как элементы стоят друг относительно друга.
   ============================================================= */

/* --- Шапка --------------------------------------------------- */

.top {
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--z-header);
	backdrop-filter: blur(14px);
	background: color-mix(in srgb, var(--bg) 76%, transparent);
	border-bottom: var(--border) solid transparent;
	transition: border-color var(--t-mid), background var(--t-mid);
}
.top.stuck { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: var(--s-5); height: 68px; }

.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;          /* без этого логотип плющит при сжатии шапки */
	text-decoration: none;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: -.03em;
}
.logo svg, .logo img { width: 26px; height: 26px; flex: 0 0 auto; }

.nav { margin-left: auto; display: flex; gap: var(--s-6); }
.nav a { text-decoration: none; color: var(--ink2); font-size: var(--t-small); transition: color var(--t-fast); }
.nav a:hover { color: var(--ink); }

@media (max-width: 900px) { .nav { display: none; } }

/* Мобильное меню: раскрывается под шапкой, а не поверх всего экрана. */
.menu { display: none; border-top: var(--border) solid var(--line); background: var(--bg); }
.menu.open { display: block; }
.menu a {
	display: block;
	padding: 16px var(--pad);
	text-decoration: none;
	color: var(--ink2);
	border-bottom: var(--border) solid var(--line);
}

/* --- Первый экран -------------------------------------------- */

/*
 * Две колонки: текст и визуал. Пропорция 1 : 1.05 — визуал чуть
 * шире, но не подавляет. Ошибка, которую легко совершить, —
 * маленький текст слева и огромный блок справа: экран
 * разваливается, читать нечего.
 */
.hero { padding: calc(68px + var(--s-8)) 0 var(--s-8); }
.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: center;
}
.hero-text { display: grid; gap: var(--s-5); max-width: 620px; }
.hero-text h1 em { font-style: normal; color: var(--brand); }

.facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 48px);
	padding-top: var(--s-4);
	border-top: var(--border) solid var(--line);
}

@media (max-width: 900px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero { padding-top: calc(60px + var(--s-6)); }
}

/* --- Сетки --------------------------------------------------- */

.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: var(--s-3); grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .grid-2, .grid-4 { grid-template-columns: 1fr; } }

/* --- Шаги ---------------------------------------------------- */

/*
 * Три колонки: номер, суть, результат. Правая колонка —
 * обязательство: шаг без проверяемого результата превращается
 * в описание процесса, за который никто не отвечает.
 */
.steps { display: grid; border-top: var(--border) solid var(--line); }
.step {
	display: grid;
	grid-template-columns: 72px 1fr 260px;
	gap: var(--s-5);
	align-items: start;
	padding: var(--s-6) 0;
	border-bottom: var(--border) solid var(--line);
}
.step .n { font-family: var(--font-display); font-size: var(--t-small); color: var(--brand); padding-top: 4px; }
.step h3 { font-size: 22px; }
.step p { color: var(--ink2); margin-top: 6px; }
.step .out { font-size: var(--t-small); color: var(--ink3); padding-top: 4px; }

@media (max-width: 860px) {
	.step { grid-template-columns: 44px 1fr; }
	.step .out { grid-column: 2; padding-top: 0; }
}

/* --- Тарифы -------------------------------------------------- */

.price { display: grid; gap: var(--s-3); align-content: start; }
.price .amount { font-family: var(--font-display); font-size: 30px; letter-spacing: var(--ls-tight); }
.price .amount small { font-size: var(--t-small); font-weight: 400; color: var(--ink3); letter-spacing: 0; }
.price ul { margin: 0; padding-left: 18px; color: var(--ink2); font-size: 16px; display: grid; gap: 6px; }

/* --- Форма --------------------------------------------------- */

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
.form {
	display: grid;
	gap: var(--s-4);
	background: var(--surface);
	border: var(--border) solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(22px, 3vw, 34px);
	box-shadow: var(--sh-3);
}
.contacts { display: grid; gap: var(--s-4); font-size: 16px; color: var(--ink2); }
.contacts a { color: var(--ink); text-decoration: none; border-bottom: var(--border) solid var(--line2); }

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

/* --- Липкая сцена и главы ------------------------------------ */

/*
 * Раскадровка: визуал стоит на месте, текст едет мимо.
 * Холст прозрачный, поэтому на узком экране колонке
 * обязательно нужен фон — иначе текст поедет сквозь визуал.
 */
.scroll-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.scroll-scene .stage { position: sticky; top: 68px; height: calc(100svh - 68px); order: 2; }
.scroll-scene .chapters { order: 1; }
.scroll-scene .chapter { min-height: 100svh; display: grid; align-content: center; gap: var(--s-4); padding: var(--s-7) 0; }

@media (max-width: 900px) {
	.scroll-scene { grid-template-columns: 1fr; gap: 0; }
	.scroll-scene .stage {
		order: 0; top: 60px; height: 42svh; min-height: 260px;
		background: var(--bg); z-index: var(--z-sticky);
	}
	.scroll-scene .chapter { min-height: 64svh; align-content: start; padding: var(--s-5) 0 var(--s-6); }
}

/* --- Подвал -------------------------------------------------- */

.footer {
	padding: var(--s-7) 0 var(--s-8);
	border-top: var(--border) solid var(--line);
	color: var(--ink3);
	font-size: 14px;
}
.footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; }