/* =========================================================================
   k3.css — дизайн-язык К-3 «Смена»: слой токенов и компонентов
   Project: mikekarni · teya-generated-site · aiworkagents.ru
   Задача T13-A (прогон KONVERSION). Источник: KONVERSION-PLAN/concepts/K-3/.

   ЧТО ЭТО. Отдельный слой поверх assets/dist/style.css. Даёт:
     · токены --k3-* (цвета, кегли, радиусы, тени, длительности);
     · компоненты .k3-* (кнопки, карточки, списки, бейджи, панели, PCB-фон);
     · ДВЕ трактовки секции — тёмную и светлую (обязательное требование T13).

   СКОУП. Весь файл живёт под `body.home`. Файл подключается ТОЛЬКО из
   front-page.php (см. wp_enqueue_style 'teya-k3' там же), поэтому на 24
   внутренних страницах он физически не грузится, а если когда-нибудь
   загрузится — селекторы всё равно не сработают вне главной.
   Шапка/футер общие для всего сайта, поэтому их правила тоже под `body.home`.

   РИТМ СЕКЦИЙ. Чередование тёмное/светлое остаётся ровно тем, что в
   front-page.php (решение владельца). Поэтому К-3-трактовки навешены не только
   на новые классы .k3-sec--*, но и на существующие .section--dark/.section--light:
   секции ниже hero получают язык К-3 без переписывания их разметки.

   ШРИФТЫ. Новых @font-face нет: используются self-hosted семейства темы
   (Geologica / Golos Text / JetBrains Mono) из assets/dist/style.css.
   ЦЕНЫ. В этом слое нет ни одной ценовой сущности.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ТОКЕНЫ К-3
   ------------------------------------------------------------------------- */
body.home {
	/* база */
	--k3-bg: #0A101C;
	--k3-bg-2: #0F1826;
	--k3-surface: #131E30;
	--k3-surface-2: #18253A;
	--k3-ink: #EDF1F7;
	--k3-muted: #96A5BA;
	--k3-line: #25334C;
	--k3-line-soft: #1B2740;

	/* акцент 1 — золото: только CTA анализа */
	--k3-gold: #E0A93C;
	--k3-gold-hover: #C9942B;
	--k3-on-gold: #141C2B;

	/* акцент 2 — бирюза: интерактив и Telegram */
	--k3-teal: #2BB8A3;
	--k3-teal-hover: #229987;
	--k3-on-teal: #0C1320;
	--k3-teal-soft: #8FE3D6;

	/* светлые секции-передышки */
	--k3-light: #F4F7FB;
	--k3-light-surface: #FFFFFF;
	--k3-light-ink: #131C29;
	--k3-light-muted: #54637A;
	--k3-light-line: #D8E0EC;
	--k3-teal-on-light: #18786B;
	--k3-gold-on-light: #9A6F12;

	/* фокус-кольцо (переопределяется на светлом) */
	--k3-focus: #7FD8CB;

	/* типографика — семейства те же, что в теме */
	--k3-display: var(--font-display);
	--k3-body: var(--font-body);
	--k3-mono: var(--font-mono);

	/* кегли: fluid clamp вместо фиксированных px темы */
	--k3-fs-h1: clamp(30px, 3.9vw, 46px);
	--k3-fs-h2: clamp(27px, 3.4vw, 42px);
	--k3-fs-hero: 17px;
	--k3-fs-micro: 13px;
	--k3-fs-num: clamp(32px, 2.7vw, 39px);

	/* сетка */
	--k3-max: 1180px;
	--k3-max-wide: 1420px;
	--k3-gut: 20px;
	--k3-sec-y: clamp(56px, 7vw, 104px);

	/* радиусы (в К-3 были захардкожены поэлементно — здесь именованы) */
	--k3-radius-sm: 10px;
	--k3-radius: 14px;
	--k3-radius-md: 16px;
	--k3-radius-lg: 18px;
	--k3-radius-pill: 999px;

	/* двухслойные тени: ambient + key */
	--k3-shadow: 0 1px 2px rgba(0, 0, 0, .32), 0 18px 44px rgba(0, 0, 0, .40);
	--k3-shadow-hover: 0 2px 4px rgba(0, 0, 0, .34), 0 26px 56px rgba(0, 0, 0, .48);
	--k3-shadow-light: 0 1px 2px rgba(19, 28, 41, .06), 0 14px 34px rgba(19, 28, 41, .10);
	--k3-shadow-light-hover: 0 2px 4px rgba(19, 28, 41, .08), 0 20px 44px rgba(19, 28, 41, .14);

	/* движение */
	--k3-ease: cubic-bezier(.4, 0, .2, 1);
	--k3-fast: 160ms;
	--k3-base: 240ms;
	--k3-slow: 400ms;

	/* шапка К-3 ниже темы (58px против 72px) — это же значение
	   отрабатывает body{padding-top:var(--header-h)} из dist/style.css */
	--header-h: 58px;

	background-color: var(--k3-bg);
	color: var(--k3-ink);
}

/* Кольцо фокуса К-3 (форма кнопки при фокусе не меняется — только outline). */
body.home :where(a, button, summary, input, [tabindex]):focus-visible {
	outline: 3px solid var(--k3-focus);
	outline-offset: 3px;
}

/* На бирюзовой заливке светло-бирюзовое кольцо сливается — берём светлое
   (тот же приём, что в теме для .btn--telegram). */
body.home .k3-btn--teal:focus-visible,
body.home .btn--teal:focus-visible {
	outline-color: var(--k3-ink);
}

body.home .section--light .k3-btn--teal:focus-visible,
body.home .section--light .btn--teal:focus-visible,
body.home .k3-sec--light .k3-btn--teal:focus-visible,
body.home .k3-sec--light .btn--teal:focus-visible {
	outline-color: var(--k3-light-ink);
}

/* -------------------------------------------------------------------------
   2. ТРАКТОВКИ СЕКЦИИ — ТЁМНАЯ И СВЕТЛАЯ
   Тёмная:  .k3-sec--dark  (= .section--dark темы), .k3-sec--dark-2 — на тон выше
   Светлая: .k3-sec--light (= .section--light темы)
   ------------------------------------------------------------------------- */
body.home .k3-sec {
	position: relative;
	padding-block: var(--k3-sec-y);
}

body.home .section--dark,
body.home .k3-sec--dark {
	background: var(--k3-bg);
	color: var(--k3-ink);
}

body.home .k3-sec--dark-2 {
	background: var(--k3-bg-2);
	color: var(--k3-ink);
}

body.home .section--light,
body.home .k3-sec--light {
	background: var(--k3-light);
	color: var(--k3-light-ink);
	--k3-focus: #0E5B51;
}

/* Ссылки и приглушённый текст в каждой трактовке */
body.home .section--dark a:not(.btn):not(.k3-btn),
body.home .k3-sec--dark a:not(.btn):not(.k3-btn),
body.home .k3-sec--dark-2 a:not(.btn):not(.k3-btn) {
	color: var(--k3-teal);
}

body.home .section--light a:not(.btn):not(.k3-btn),
body.home .k3-sec--light a:not(.btn):not(.k3-btn) {
	color: var(--k3-teal-on-light);
}

body.home .k3-sec--light .k3-mono,
body.home .k3-sec--light .k3-lead,
body.home .k3-sec--light .k3-note,
body.home .k3-sec--light .k3-card__text,
body.home .section--light .k3-mono,
body.home .section--light .k3-lead,
body.home .section--light .k3-note,
body.home .section--light .k3-card__text {
	color: var(--k3-light-muted);
}

/* -------------------------------------------------------------------------
   3. ТИПОГРАФИКА И УТИЛИТЫ
   ------------------------------------------------------------------------- */
body.home .k3-mono {
	font-family: var(--k3-mono);
	font-size: var(--k3-fs-micro);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--k3-muted);
}

body.home .k3-h1 {
	font-family: var(--k3-display);
	font-weight: 600;
	font-size: var(--k3-fs-h1);
	line-height: 1.08;
	letter-spacing: -.025em;
	max-width: 19ch;
	text-wrap: balance;
	margin: 0;
}

body.home .k3-h2 {
	font-family: var(--k3-display);
	font-weight: 600;
	font-size: var(--k3-fs-h2);
	line-height: 1.08;
	letter-spacing: -.015em;
	max-width: 20ch;
	text-wrap: balance;
	margin: 0;
}

body.home .k3-lead {
	margin-top: 16px;
	max-width: 68ch;
	color: var(--k3-muted);
	font-size: 19px;
	line-height: 1.55;
}

body.home .k3-note {
	margin-top: 18px;
	max-width: 72ch;
	color: var(--k3-muted);
	font-size: 15px;
	line-height: 1.55;
}

body.home .k3-sec__head {
	margin-bottom: clamp(28px, 3.5vw, 48px);
}

body.home .k3-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
   4. КНОПКИ К-3
   Совместимость: .btn темы уже пилюля 52px с теми же золотом/бирюзой,
   поэтому .k3-btn — не замена, а параллельный набор для новой разметки.
   ------------------------------------------------------------------------- */
body.home .k3-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 14px 26px;
	font-family: var(--k3-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: var(--k3-radius-pill);
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	transition: background-color var(--k3-fast) var(--k3-ease),
		color var(--k3-fast) var(--k3-ease),
		border-color var(--k3-fast) var(--k3-ease),
		transform var(--k3-fast) var(--k3-ease),
		box-shadow var(--k3-fast) var(--k3-ease);
}

body.home .k3-btn:hover {
	text-decoration: none;
}

body.home .k3-btn:active {
	transform: translateY(0) scale(.97);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .30);
	transition-duration: 80ms;
}

/* 1. золотая — CTA анализа (единственное золото первого экрана) */
body.home .k3-btn--gold {
	background: var(--k3-gold);
	color: var(--k3-on-gold);
}

body.home .k3-btn--gold:hover {
	background: var(--k3-gold-hover);
	color: var(--k3-on-gold);
	transform: translateY(-2px);
	box-shadow: var(--k3-shadow-hover);
}

/* 2. бирюзовая — Telegram и интерактив.
   `.btn--teal` — имя из спеки шага 13.1 (кнопка полного калькулятора); в теме
   такого модификатора нет, поэтому он объявлен здесь как равноправный синоним
   `.k3-btn--teal`. Скоуп body.home: на внутренние страницы не протекает. */
body.home .k3-btn--teal,
body.home .btn--teal {
	background: var(--k3-teal);
	color: var(--k3-on-teal);
}

body.home .k3-btn--teal:hover,
body.home .btn--teal:hover {
	background: var(--k3-teal-hover);
	color: var(--k3-on-teal);
	transform: translateY(-2px);
	box-shadow: var(--k3-shadow-hover);
}

/* 3. вторичная-контурная (обе трактовки) */
body.home .k3-btn--ghost {
	background: transparent;
	color: var(--k3-ink);
	border-color: var(--k3-line);
}

body.home .k3-btn--ghost:hover {
	color: var(--k3-teal);
	border-color: var(--k3-teal);
	background: rgba(43, 184, 163, .10);
	transform: translateY(-2px);
}

body.home .section--light .k3-btn--ghost,
body.home .k3-sec--light .k3-btn--ghost {
	color: var(--k3-light-ink);
	border-color: var(--k3-light-line);
}

body.home .section--light .k3-btn--ghost:hover,
body.home .k3-sec--light .k3-btn--ghost:hover {
	color: var(--k3-teal-on-light);
	border-color: var(--k3-teal-on-light);
	background: rgba(24, 120, 107, .08);
}

/* -------------------------------------------------------------------------
   5. КАРТОЧКИ, СПИСКИ, БЕЙДЖИ — обе трактовки
   ------------------------------------------------------------------------- */
body.home .k3-card {
	display: flex;
	flex-direction: column;
	padding: 22px;
	background: var(--k3-surface);
	border: 1px solid var(--k3-line-soft);
	border-radius: var(--k3-radius-md);
	color: var(--k3-ink);
	box-shadow: var(--k3-shadow);
	transition: transform var(--k3-base) var(--k3-ease),
		border-color var(--k3-base) var(--k3-ease),
		box-shadow var(--k3-base) var(--k3-ease);
}

body.home a.k3-card:hover {
	text-decoration: none;
	transform: translateY(-3px);
	border-color: var(--k3-teal);
	box-shadow: var(--k3-shadow-hover);
}

/* Цвет объявлен здесь же, а не отдельным правилом ниже (фикс ревью M-2 —
   было два объявления `body.home .k3-card__title` в 326 строках друг от друга).
   Зачем цвет вообще нужен: правило §2 красит любую ссылку секции в акцент, а
   карточка-ссылка отдавала этот цвет заголовку по наследству — заголовок и
   подпись-переход выходили одного цвета, иерархия пропадала. Собственное
   объявление наследование перебивает; светлая трактовка — сразу под §5. */
body.home .k3-card__title {
	font-family: var(--k3-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--k3-ink);
}

body.home .section--light .k3-card__title,
body.home .k3-sec--light .k3-card__title {
	color: var(--k3-light-ink);
}

body.home .k3-card__text {
	color: var(--k3-muted);
	font-size: 16px;
	line-height: 1.55;
}

body.home .k3-card__cta {
	margin-top: auto;
	padding-top: 16px;
	color: var(--k3-teal);
	font-weight: 600;
	font-size: 15px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
}

body.home .k3-card__meta {
	font-family: var(--k3-mono);
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--k3-muted);
	margin-bottom: 8px;
}

body.home .section--light .k3-card,
body.home .k3-sec--light .k3-card {
	background: var(--k3-light-surface);
	border-color: var(--k3-light-line);
	color: var(--k3-light-ink);
	box-shadow: var(--k3-shadow-light);
}

body.home .section--light a.k3-card:hover,
body.home .k3-sec--light a.k3-card:hover {
	border-color: var(--k3-teal-on-light);
	box-shadow: var(--k3-shadow-light-hover);
}

body.home .section--light .k3-card__cta,
body.home .k3-sec--light .k3-card__cta {
	color: var(--k3-teal-on-light);
}

body.home .k3-list li {
	position: relative;
	padding-left: 28px;
	margin-top: 12px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--k3-ink);
}

body.home .k3-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 12px;
	height: 3px;
	border-radius: 2px;
	background: var(--k3-teal);
}

body.home .section--light .k3-list li,
body.home .k3-sec--light .k3-list li {
	color: var(--k3-light-ink);
}

body.home .section--light .k3-list li::before,
body.home .k3-sec--light .k3-list li::before {
	background: var(--k3-teal-on-light);
}

body.home .k3-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: var(--k3-radius-pill);
	font-family: var(--k3-mono);
	font-size: var(--k3-fs-micro);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--k3-teal);
	border: 1px solid rgba(43, 184, 163, .45);
	background: rgba(43, 184, 163, .10);
}

body.home .section--light .k3-badge,
body.home .k3-sec--light .k3-badge {
	color: var(--k3-teal-on-light);
	border-color: rgba(24, 120, 107, .4);
	background: rgba(24, 120, 107, .08);
}

body.home .k3-panel {
	padding: 24px;
	border-radius: var(--k3-radius-md);
	border: 1px solid var(--k3-line-soft);
	background: var(--k3-surface);
	box-shadow: var(--k3-shadow);
}

body.home .section--light .k3-panel,
body.home .k3-sec--light .k3-panel {
	background: var(--k3-light-surface);
	border-color: var(--k3-light-line);
	box-shadow: var(--k3-shadow-light);
}

body.home .k3-quote {
	padding: 20px;
	margin: 0;
	background: var(--k3-surface);
	border: 1px solid var(--k3-line-soft);
	border-left: 3px solid var(--k3-teal);
	border-radius: 0 var(--k3-radius) var(--k3-radius) 0;
	font-size: 18px;
	line-height: 1.5;
	color: var(--k3-ink);
}

body.home .section--light .k3-quote,
body.home .k3-sec--light .k3-quote {
	background: var(--k3-light-surface);
	border-color: var(--k3-light-line);
	border-left-color: var(--k3-teal-on-light);
	color: var(--k3-light-ink);
}

body.home .k3-mono-line {
	margin-top: clamp(24px, 3vw, 40px);
	padding: 16px 20px;
	border-left: 3px solid var(--k3-teal);
	font-family: var(--k3-mono);
	font-size: 15px;
	line-height: 1.6;
	color: var(--k3-ink);
	background: var(--k3-surface);
	border-radius: 0 var(--k3-radius) var(--k3-radius) 0;
}

body.home .section--light .k3-mono-line,
body.home .k3-sec--light .k3-mono-line {
	background: var(--k3-light-surface);
	border-left-color: var(--k3-teal-on-light);
	color: var(--k3-light-ink);
}

/* -------------------------------------------------------------------------
   6. ФОН «ДОРОЖКИ ПЛАТЫ» (B-3)
   Разводка проводников — inline-SVG, ни одного растрового файла (~4 КБ):
   LCP-элементом остаётся текст H1.
   Геометрия лежит в <defs> один раз (template-parts/home/k3-pcb-defs.php),
   секции подключают её через <use> (template-parts/home/k3-pcb.php).
   Дисциплина эффекта:
     · трассы --k3-line-soft толщиной 1–1.4px — на пороге различимости;
     · искра --k3-teal-soft, свечение 6px, не ярче золотой кнопки и числа;
     · правая треть hero (карточка калькулятора) оставлена пустой;
     · только тёмные секции — на светлых платы нет по канону концепта.
   ------------------------------------------------------------------------- */
body.home .k3-pcb {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: .9;
}

body.home .k3-pcb svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ВНИМАНИЕ, не «упрощать» до body.home: эти четыре класса висят на <use>
   ВНУТРИ группы #pcb-set-a/#pcb-set-b, которую секции клонируют своим <use>.
   Клоны живут в shadow-дереве <use>, и селектор с предком (body.home …) туда не
   достаёт — трассы теряют fill:none и рисуются чёрными залитыми полигонами
   (проверено скриншотом). Селектор обязан быть из одного класса.
   Имена k3-pcb__* уникальны, файл грузится только на главной — коллизий нет. */
.k3-pcb__trace {
	fill: none;
	stroke: var(--k3-line-soft);
	stroke-width: 1.4;
}

.k3-pcb__trace--thin {
	stroke-width: 1;
	opacity: .7;
}

.k3-pcb__node {
	fill: var(--k3-line);
}

.k3-pcb__pad {
	fill: none;
	stroke: var(--k3-line);
	stroke-width: 1.4;
}

/* Контент секции обязан лежать выше платы: своего стекинг-контекста у секции
   нет, поэтому z-index назначается врапперу явно.
   Враппер ровно один — `.container` темы (ширина, поля и центровка живут в
   dist/style.css). Раньше здесь стоял ещё `.k3-wrap`, но такого компонента
   в слое нет — контейнер не объявлен нигде, и разметка на нём растеклась бы
   во всю ширину. Синоним убран, чтобы карта передачи не врала (фикс ревью I2). */
body.home .k3-has-pcb > .container {
	position: relative;
	z-index: 1;
}

/* Искра: короткий штрих, бегущий по трассе через stroke-dashoffset. */
body.home .k3-pcb__pulse {
	fill: none;
	stroke: var(--k3-teal-soft);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 52 2600;
	stroke-dashoffset: 2652;
	filter: drop-shadow(0 0 6px rgba(143, 227, 214, .5));
	animation: k3-pcb-run 7.2s linear infinite;
}

body.home .k3-pcb__pulse--2 { animation-delay: 1.2s; }
body.home .k3-pcb__pulse--3 { animation-delay: 2.4s; }
body.home .k3-pcb__pulse--4 { animation-delay: 3.6s; }
body.home .k3-pcb__pulse--5 { animation-delay: 4.8s; }
body.home .k3-pcb__pulse--6 { animation-delay: 6s; }

body.home .k3-pcb__pulse--slow {
	animation-duration: 11s;
	stroke-width: 1.8;
}

@keyframes k3-pcb-run {
	0%   { stroke-dashoffset: 2652; opacity: 0; }
	4%   { opacity: .85; }
	38%  { opacity: .85; }
	46%  { stroke-dashoffset: 0; opacity: 0; }
	100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Полоса-переход сразу под hero. Базовое правило темы рисует градиент
   светлое→тёмное (оно рассчитано на переход light→dark), а здесь порядок
   обратный: тёмный hero → светлая секция. Разворачиваем и переводим в тона К-3,
   иначе на стыке первого экрана видна светлая полоса поперёк тёмного фона. */
body.home #home-hero + .transition--fade-lg {
	background: linear-gradient(to bottom, var(--k3-bg) 0%, var(--k3-light) 100%);
}

/* -------------------------------------------------------------------------
   6b. КОМПОНЕНТЫ СЕКЦИЙ НИЖЕ HERO (T13-B)
   Добавка к §5: то, чего не хватило при переводе home-market … home-segments.
   Всё под body.home, обе трактовки (тёмная и светлая) описаны явно.
   ------------------------------------------------------------------------- */

/* Секция с платой: слой .k3-pcb абсолютный, поэтому секции нужен свой контекст
   позиционирования и обрезка (у hero это приходило из pages-home.css). */
body.home .k3-has-pcb {
	position: relative;
	overflow: hidden;
}

/* Числовая статистика («до 40%», «15–30%», «3–6 мес.»). Кегль берётся из
   --k3-fs-num — токен был объявлен в T13-A и до сих пор нигде не использован.
   На светлом число красится --k3-teal-on-light (AA), а НЕ --k3-gold-on-light:
   золото зарезервировано за CTA анализа (см. предупреждение в §3.2 карты). */
body.home .k3-stat__num {
	margin: 0;
	font-family: var(--k3-display);
	font-weight: 600;
	font-size: var(--k3-fs-num);
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--k3-teal);
}

body.home .k3-stat__label {
	margin: 10px 0 0;
	color: var(--k3-muted);
	font-size: 16px;
	line-height: 1.5;
}

body.home .section--light .k3-stat__num,
body.home .k3-sec--light .k3-stat__num {
	color: var(--k3-teal-on-light);
}

body.home .section--light .k3-stat__label,
body.home .k3-sec--light .k3-stat__label {
	color: var(--k3-light-muted);
}

/* Выделенная карточка в блоке сравнения («Я»). В теме она была обведена золотом
   и светилась --glow-gold — это давало второй золотой кластер в экране, где
   золотой CTA-кнопки нет вовсе. В концепте К-3 акцент такой карточки — бирюза. */
body.home .k3-card--me {
	border-color: var(--k3-teal);
}

body.home .section--light .k3-card--me,
body.home .k3-sec--light .k3-card--me {
	border-color: var(--k3-teal-on-light);
}

/* Цвет заголовка карточки-ссылки переехал в §5, к остальной типографике
   .k3-card__title (фикс ревью M-2 — дублирующийся селектор). Обе трактовки
   объявлены там же; здесь ничего не осталось. */

/* Ховер подписи-перехода в карточке-ссылке: остаётся бирюзовым (в теме он
   уводил в золото), меняется только насыщенность. */
body.home a.k3-card:hover .k3-card__cta {
	color: var(--k3-teal-soft);
}

body.home .section--light a.k3-card:hover .k3-card__cta,
body.home .k3-sec--light a.k3-card:hover .k3-card__cta {
	color: var(--k3-teal-on-light);
}

/* Иллюстрация секции. */
body.home .k3-figure {
	margin: 0;
}

body.home .k3-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--k3-radius-md);
	border: 1px solid var(--k3-line-soft);
}

body.home .section--light .k3-figure img,
body.home .k3-sec--light .k3-figure img {
	border-color: var(--k3-light-line);
	background: var(--k3-light-surface);
}

body.home .k3-figure figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--k3-muted);
}

body.home .section--light .k3-figure figcaption,
body.home .k3-sec--light .k3-figure figcaption {
	color: var(--k3-light-muted);
}

/* Отступы-утилиты (в концепте К-3 это .k3-mt-l / .k3-mt-s).
   Зачем они нужны отдельно: селекторы этого файла начинаются с `body.home`,
   то есть весят (0,2,1) — на класс-элемент больше, чем `.tmpl-home .home-xxx`
   (0,2,0) из pages-home.css. Поэтому компонент К-3 (.k3-lead, .k3-figure)
   перебивает поэлементные отступы страничного слоя, и там, где это важно,
   отступ задаётся утилитой — она объявлена ниже компонентов и выигрывает.
   Проверено замером: без утилиты закрывающий абзац home-pain получал
   margin-top 16px от .k3-lead вместо 40px из pages-home.css. */
body.home .k3-mt-l {
	margin-top: clamp(28px, 3.2vw, 44px);
}

body.home .k3-mb-l {
	margin-bottom: clamp(28px, 3.2vw, 44px);
}

/* Полосы-переходы между секциями (.transition--fade-* из dist/style.css).
   Базовое правило темы рисует градиент в её собственных тонах
   (#F6F8FB → #0F1622), а секции главной теперь окрашены токенами К-3
   (#F4F7FB → #0A101C): без пересчёта на каждом стыке остаётся видимый шов.
   Плюс два стыка развёрнуты не в ту сторону — после тёмной секции идёт
   светлая, а полоса всё равно светлеет книзу (тот же дефект, что был снят
   на стыке с hero в T13-A). Направление задаётся по секции-предшественнику. */
body.home #home-market + .transition,
body.home #home-solutions + .transition,
body.home #home-segments + .transition {
	background: linear-gradient(to bottom, var(--k3-light) 0%, var(--k3-bg) 100%);
}

body.home #home-utp + .transition,
body.home #home-products + .transition,
body.home #home-process + .transition,
body.home #home-pricing + .transition {
	background: linear-gradient(to bottom, var(--k3-bg) 0%, var(--k3-light) 100%);
}

/* -------------------------------------------------------------------------
   6c. КОМПОНЕНТЫ НИЖНИХ СЕКЦИЙ (T13-C)
   Добавка к §5 и §6b: то, чего не хватило при переводе
   home-process … home-cta. Всё под body.home, обе трактовки описаны явно.
   ------------------------------------------------------------------------- */

/* Стыки ниже зоны T13-B. Направление задаётся по секции-предшественнику тем же
   приёмом, что и выше: после светлой секции полоса темнеет книзу, после тёмной —
   светлеет. До правки все четыре полосы были в тонах старой темы
   (#F6F8FB → #0F1622), а две из них (после home-process и после home-pricing)
   ещё и развёрнуты наоборот — светлая полоса поперёк тёмного фона. */
body.home #home-trust + .transition,
body.home #home-faq + .transition {
	background: linear-gradient(to bottom, var(--k3-light) 0%, var(--k3-bg) 100%);
}

/* Волосяной стык «блог → финальный CTA»: обе секции тёмные, поэтому градиента
   нет вовсе — только линия. В теме она золотая (rgba(224,169,60,.2)) и в языке
   К-3 читалась бы вторым золотым пятном рядом с золотой кнопкой CTA. */
body.home #home-blog + .transition--hairline {
	background: var(--k3-bg);
	border-top-color: var(--k3-line-soft);
}

/* Две колонки: список шагов и схема рядом (эталон К-3, .k3-split). */
body.home .k3-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 36px);
	align-items: start;
}

/* Шаг процесса и шаг ценообразования — один компонент на обе секции
   (в эталоне К-3 так же: «06 · цена» и «07 · гарантия» собраны на .k3-step).
   Явных grid-column у колонок нет: на узком экране сетка схлопывается
   автоподстановкой, а не номерами (грабли перекомпоновки home-utp). */
body.home .k3-steps {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.home .k3-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 18px 20px;
	background: var(--k3-surface);
	border: 1px solid var(--k3-line-soft);
	border-radius: var(--k3-radius);
}

body.home .k3-step__n {
	font-family: var(--k3-mono);
	font-size: 15px;
	font-weight: 500;
	color: var(--k3-teal);
	font-variant-numeric: tabular-nums;
	padding-top: 2px;
}

body.home .k3-step__t {
	margin: 0;
	font-family: var(--k3-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--k3-ink);
}

body.home .k3-step__d {
	margin: 5px 0 0;
	color: var(--k3-muted);
	font-size: 16px;
	line-height: 1.5;
}

body.home .section--light .k3-step,
body.home .k3-sec--light .k3-step {
	background: var(--k3-light-surface);
	border-color: var(--k3-light-line);
}

body.home .section--light .k3-step__n,
body.home .k3-sec--light .k3-step__n {
	color: var(--k3-teal-on-light);
}

body.home .section--light .k3-step__t,
body.home .k3-sec--light .k3-step__t {
	color: var(--k3-light-ink);
}

body.home .section--light .k3-step__d,
body.home .k3-sec--light .k3-step__d {
	color: var(--k3-light-muted);
}

/* Бейдж в шапке секции («Честно») стоит отдельной строкой над заголовком. */
body.home .k3-sec__head .k3-badge {
	margin-bottom: 14px;
}

/* Аккордеон FAQ. Маркер «+»/«–» — flex-элемент строки вопроса, а не абсолютный
   псевдоэлемент темы: вопрос в две строки перестаёт наезжать на плюс.
   Правила темы, задававшие второй маркер, сняты из pages-home.css. */
body.home .k3-faq__item {
	border-bottom: 1px solid var(--k3-light-line);
}

body.home .k3-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 60px;
	padding: 14px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--k3-display);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	color: var(--k3-light-ink);
}

body.home .k3-faq__q::-webkit-details-marker {
	display: none;
}

body.home .k3-faq__q::after {
	content: "+";
	font-family: var(--k3-mono);
	font-size: 22px;
	line-height: 1;
	color: var(--k3-teal-on-light);
	flex: 0 0 auto;
}

body.home .k3-faq__item[open] .k3-faq__q::after {
	content: "–";
}

body.home .k3-faq__a {
	padding: 0 0 20px;
	max-width: 70ch;
	color: var(--k3-light-muted);
	font-size: 17px;
	line-height: 1.6;
}

body.home .k3-faq__a a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

/* Тёмная трактовка аккордеона в разметке главной не используется (FAQ стоит
   на светлой секции), но объявлена, чтобы компонент не «ослеп» при переносе. */
body.home .section--dark .k3-faq__item,
body.home .k3-sec--dark .k3-faq__item {
	border-bottom-color: var(--k3-line);
}

body.home .section--dark .k3-faq__q,
body.home .k3-sec--dark .k3-faq__q {
	color: var(--k3-ink);
}

body.home .section--dark .k3-faq__q::after,
body.home .k3-sec--dark .k3-faq__q::after {
	color: var(--k3-teal);
}

body.home .section--dark .k3-faq__a,
body.home .k3-sec--dark .k3-faq__a {
	color: var(--k3-muted);
}

/* Карточка статьи блога: обложка идёт от края до края, поэтому паддинг снят
   с самой карточки и живёт в .home-blog__body (pages-home.css). Объявлено
   здесь, а не там: поэлементное правило страничного слоя (0,2,0) проигрывает
   компоненту `body.home .k3-card` (0,2,1) — находка T13-B §6.1. */
body.home .home-blog__card {
	padding: 0;
	overflow: hidden;
}

/* Заголовок карточки — ссылка, а она красится акцентом по правилу §2.
   Тот же случай, что и .k3-card__title в T13-B §6.2: без явного цвета
   заголовок и мета-строка сливаются, иерархия пропадает. Ховер темы уводил
   заголовок в золото — на главной золото только у CTA анализа.
   Селектор повторяет форму правила §2 (`a:not(.btn):not(.k3-btn)`), иначе не
   перевешивает: у правила секции вес (0,4,2), у простого
   `body.home .home-blog__title a` — (0,2,2), и заголовок оставался бирюзовым
   (проверено скриншотом, а не рассуждением). */
body.home .section--dark .home-blog__title a:not(.btn):not(.k3-btn),
body.home .k3-sec--dark .home-blog__title a:not(.btn):not(.k3-btn) {
	color: var(--k3-ink);
}

body.home .section--dark .home-blog__card:hover .home-blog__title a:not(.btn):not(.k3-btn),
body.home .k3-sec--dark .home-blog__card:hover .home-blog__title a:not(.btn):not(.k3-btn) {
	color: var(--k3-teal);
	text-decoration: none;
}

/* Финальный экран: мягкий подъём тона книзу вместо плоского --k3-bg (эталон
   К-3, .k3-final). Объявлено здесь, потому что `body.home .section--dark`
   (0,2,1) перебивает фон из pages-home.css (0,2,0) — замер computed показал
   плоский #0A101C, когда правило стояло там. */
body.home .home-cta {
	background: linear-gradient(180deg, var(--k3-bg) 0%, #101B2C 100%);
}

/* Финальный CTA: заголовок и лид центрируются, а не жмутся к левому краю
   (у .k3-h2 собственный max-width 20ch и margin:0). */
body.home .home-cta .k3-h2,
body.home .home-cta .k3-lead {
	margin-left: auto;
	margin-right: auto;
}

/* Кросс-ссылки нижних секций: зона нажатия 44px при неизменном кегле —
   тем же приёмом, что T13-B применил к ссылкам решений и сегментов. */
body.home .home-process__link a,
body.home .home-trust__link a,
body.home .home-pricing__link a,
body.home .home-faq__all a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* -------------------------------------------------------------------------
   7. ШАПКА В ЯЗЫКЕ К-3 — только на главной
   Внутренние страницы (24 шт.) не грузят этот файл вовсе и остаются как были.
   ------------------------------------------------------------------------- */
body.home .site-header {
	background: rgba(10, 16, 28, .92);
	border-bottom: 1px solid var(--k3-line-soft);
}

body.home .site-header.is-scrolled {
	background: rgba(10, 16, 28, .96);
	border-bottom-color: var(--k3-line);
}

body.home .site-header__inner {
	max-width: var(--k3-max-wide);
	gap: 10px;
}

body.home .site-logo__img {
	height: 38px;
}

body.home .primary-menu a {
	color: var(--k3-muted);
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
}

body.home .primary-menu a:hover,
body.home .primary-menu .current-menu-item > a {
	color: var(--k3-ink);
}

body.home .primary-menu .sub-menu {
	background: var(--k3-surface);
	border-color: var(--k3-line);
	border-radius: var(--k3-radius);
	box-shadow: var(--k3-shadow);
}

body.home .primary-menu .sub-menu a {
	color: var(--k3-ink);
	border-radius: var(--k3-radius-sm);
}

body.home .primary-menu .sub-menu a:hover {
	background: var(--k3-surface-2);
	color: var(--k3-teal);
}

body.home .site-header__cta .k3-head__cta {
	min-height: 44px;
	padding: 10px 15px;
	font-size: 14px;
	white-space: nowrap;
}

/* CTA шапки не дублирует золотую кнопку hero: в первом экране её нет вовсе,
   она проявляется только когда hero ушёл из вида (класс is-past-hero ставит
   наблюдатель в assets/js/hero-minicalc.js). Второе условие — is-head-cta-on:
   JS проверяет, что кнопка РЕАЛЬНО помещается в строку шапки. Если полный
   текст не влезает — берётся короткий (is-head-cta-short), aria-label при
   этом всегда несёт формулировку оффера целиком. Место резервируется через
   visibility, а не display, поэтому строка шапки не дёргается. */
body.home .k3-head__cta {
	display: none;
}

body.home .k3-head__cta-short {
	display: none;
}

html.is-head-cta-on body.home .k3-head__cta {
	display: inline-flex;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity var(--k3-base) var(--k3-ease),
		transform var(--k3-base) var(--k3-ease),
		visibility var(--k3-base);
}

html.is-head-cta-on.is-past-hero body.home .k3-head__cta {
	visibility: visible;
	opacity: 1;
	transform: none;
}

html.is-head-cta-short body.home .k3-head__cta-full {
	display: none;
}

html.is-head-cta-short body.home .k3-head__cta-short {
	display: inline;
}

/* Без JS кнопки шапки нет вовсе — hero остаётся единственной точкой CTA. */
html.no-js body.home .k3-head__cta {
	display: none;
}

/* -------------------------------------------------------------------------
   8. АДАПТИВ
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* Меню темы уже уезжает в бургер на этой ширине — CTA шапки скрываем,
	   чтобы строка не толкалась с бургером. */
	body.home .k3-head__cta,
	html.is-head-cta-on body.home .k3-head__cta {
		display: none;
	}
}

/* T13-C: раскладка «список шагов + схема» распадается в один столбец там же,
   где это делает эталон К-3. Схлопывание — сменой числа колонок, без явных
   grid-column у детей: явный номер пережил бы схлопывание и ужал бы схему. */
@media (max-width: 860px) {
	body.home .k3-split {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	body.home {
		--k3-gut: 16px;
	}

	/* Номер шага уезжает над формулировкой: на 375px колонка «auto» съедала
	   ширину строки, и заголовки шагов ломались по слогам (эталон К-3, §600). */
	body.home .k3-step {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* -------------------------------------------------------------------------
   9. REDUCED MOTION — полноценная статичная страница
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	/* Плата остаётся статичной разводкой: трассы видны, искры не бегут. */
	body.home .k3-pcb__pulse {
		animation: none;
		opacity: 0;
	}

	body.home .k3-card,
	body.home .k3-btn {
		transition-duration: .001ms;
	}
}