/* ==========================================================================
   ПаркКонтур — слой стилей поверх theme.json
   Компоненты лендинга, состояния и анимации. Токены живут в theme.json.
   ========================================================================== */

:root {
	--pk-radius-sm: 10px;
	--pk-radius: 16px;
	--pk-radius-lg: 24px;
	--pk-radius-xl: 32px;
	--pk-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pk-transition: 220ms var(--pk-ease);
	--pk-header-h: 60px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pk-header-h) + 16px);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Никакого overflow на body: и hidden, и clip ломают position: sticky
	   у шапки. Горизонтальный вылет обрезают сами секции (.pk-mesh). */
}

::selection {
	background: rgba(109, 63, 168, 0.18);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: var(--pk-radius-sm);
}

/* ==========================================================================
   1. Шапка
   ========================================================================== */

/* Прилипает внешняя обёртка части шаблона: сама .pk-header лежит внутри неё,
   а обёртка ровно её высоты — прилипание внутри неё ничего бы не дало. */
.wp-site-blocks > header.wp-block-template-part {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
}

.pk-header {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: saturate(180%) blur(16px);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid transparent;
	transition: background var(--pk-transition), border-color var(--pk-transition),
		box-shadow var(--pk-transition);
}

.pk-header.is-scrolled {
	background: rgba(255, 255, 255, 0.9);
	border-bottom-color: var(--wp--preset--color--line);
	box-shadow: 0 1px 24px rgba(12, 9, 24, 0.06);
}

.pk-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.pk-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	position: relative;
	color: var(--wp--preset--color--ink);
	transition: color var(--pk-transition);
}

.pk-header .wp-block-navigation a:where(:not(.wp-element-button))::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--gradient--accent-line);
	transition: right var(--pk-transition);
}

.pk-header .wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.pk-header .wp-block-navigation a:where(:not(.wp-element-button)):hover::after,
.pk-header .wp-block-navigation .is-active > a::after {
	right: 0;
}

/* WordPress ставит отступ между header, main и footer из общего blockGap.
   Секции задают вертикальные поля сами, а этот зазор выглядел белой
   полосой под шапкой — убираем его. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Компактная строка шапки.
   Высоту держит min-height, а не отступы: так белая полоса не выше
   своего содержимого, что бы ни попало внутрь строки. */
.pk-header__row {
	padding-block: 0;
	min-height: var(--pk-header-h);
	align-items: center;
}

.pk-header :where(.wp-block-group, .wp-block-buttons, .wp-block-navigation) {
	margin-block: 0;
}

.pk-header .wp-block-button__link {
	padding-block: 0.55rem;
}

/* Логотип-знак */
.pk-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
}

.pk-logo__mark {
	display: block;
	width: auto;
	height: 28px;
	flex: none;
}

.pk-logo--lg .pk-logo__mark {
	height: 36px;
}

.pk-logo__text {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.pk-logo--lg .pk-logo__text {
	font-size: 1.35rem;
}

.pk-dark .pk-logo__text {
	color: #fff;
}

/* ==========================================================================
   2. Кнопки
   ========================================================================== */

.wp-block-button__link {
	position: relative;
	overflow: hidden;
	transition: background-color var(--pk-transition), transform var(--pk-transition),
		box-shadow var(--pk-transition), color var(--pk-transition),
		border-color var(--pk-transition);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform 700ms var(--pk-ease);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::before {
	transform: translateX(120%);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--glow);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--line);
	background: transparent;
	color: var(--wp--preset--color--ink);
	box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background: rgba(109, 63, 168, 0.05);
	box-shadow: none;
}

.pk-dark .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.pk-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
}

/* ==========================================================================
   3. Тёмные и светлые области
   ========================================================================== */

.pk-dark,
.pk-dark :where(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.pk-dark :where(p, li) {
	color: rgba(255, 255, 255, 0.7);
}

.pk-dark a:where(:not(.wp-element-button)) {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	transition: color var(--pk-transition);
}

.pk-dark a:where(:not(.wp-element-button)):hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pk-dark .pk-light,
.pk-dark .pk-light :where(h1, h2, h3, h4, h5, h6),
.pk-dark .pk-light .pk-metric__value {
	color: var(--wp--preset--color--ink);
}

.pk-dark .pk-light :where(p, li),
.pk-dark .pk-light .pk-metric__label {
	color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   4. Фоновые эффекты
   ========================================================================== */

/* Сетка на тёмном */
.pk-grid-bg {
	position: relative;
	isolation: isolate;
}

.pk-grid-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 35%, transparent 100%);
	mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 35%, transparent 100%);
}

/* Цветные пятна */
.pk-mesh {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.pk-mesh::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -30%;
	left: 50%;
	width: min(1100px, 120%);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background:
		radial-gradient(circle at 28% 32%, rgba(109, 63, 168, 0.55), transparent 58%),
		radial-gradient(circle at 74% 26%, rgba(229, 110, 57, 0.26), transparent 52%),
		radial-gradient(circle at 52% 74%, rgba(42, 179, 167, 0.3), transparent 56%);
	filter: blur(90px);
	opacity: 0.62;
	animation: pk-drift 22s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes pk-drift {
	0% {
		transform: translateX(-52%) translateY(-2%) scale(1);
	}
	50% {
		transform: translateX(-48%) translateY(3%) scale(1.08);
	}
	100% {
		transform: translateX(-51%) translateY(-1%) scale(1.02);
	}
}

/* Тонкая верхняя линия-градиент у секции */
.pk-topline {
	position: relative;
}

.pk-topline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--wp--preset--gradient--accent-line);
	opacity: 0.55;
}

/* ==========================================================================
   5. Типовые элементы секций
   ========================================================================== */

.pk-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.pk-dark .pk-eyebrow {
	color: var(--wp--preset--color--accent-2);
}

.pk-section-head > :where(h2, h3) {
	max-width: 22ch;
}

.pk-section-head > p:last-child {
	max-width: 58ch;
}

.pk-lead {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
}

/* Пилюля */
.pk-pill {
	display: flex;
	width: fit-content;
	margin-inline: 0 auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

.pk-dark .pk-pill {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.8);
}

.pk-pill--live::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-2);
	box-shadow: 0 0 0 0 rgba(42, 179, 167, 0.55);
	animation: pk-ping 2.4s var(--pk-ease) infinite;
}

@keyframes pk-ping {
	0% {
		box-shadow: 0 0 0 0 rgba(42, 179, 167, 0.5);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(42, 179, 167, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(42, 179, 167, 0);
	}
}

/* Тег-чип */
.pk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.pk-chips li {
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--base);
}

.pk-dark .pk-chips li {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   6. Карточки
   ========================================================================== */

.pk-card {
	position: relative;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--pk-radius);
	background: var(--wp--preset--color--base);
	transition: transform var(--pk-transition), box-shadow var(--pk-transition),
		border-color var(--pk-transition), background var(--pk-transition);
}

.pk-card:hover {
	transform: translateY(-4px);
	border-color: rgba(109, 63, 168, 0.28);
	box-shadow: var(--wp--preset--shadow--lift);
}

/* Карточка тянется на высоту колонки средствами флексбокса.
   height:100% здесь давало переполнение: контент вылезал за границу
   карточки и наезжал на следующий блок. */
.wp-block-column > .pk-card {
	flex: 1 1 auto;
}

.pk-card--flat:hover {
	transform: none;
	box-shadow: var(--wp--preset--shadow--card);
	border-color: var(--wp--preset--color--line);
}

/* Подсветка за курсором */
.pk-card--spot::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		420px circle at var(--pk-mx, 50%) var(--pk-my, 0%),
		rgba(109, 63, 168, 0.1),
		transparent 60%
	);
	opacity: 0;
	transition: opacity var(--pk-transition);
	pointer-events: none;
}

.pk-card--spot:hover::before {
	opacity: 1;
}

.pk-dark .pk-card {
	background: rgba(255, 255, 255, 0.035);
	border-color: rgba(255, 255, 255, 0.09);
	backdrop-filter: blur(6px);
}

.pk-dark .pk-card:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.2);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.pk-dark .pk-card--spot::before {
	background: radial-gradient(
		420px circle at var(--pk-mx, 50%) var(--pk-my, 0%),
		rgba(42, 179, 167, 0.12),
		transparent 60%
	);
}

/* Крупная карточка-«герой» внутри сетки */
.pk-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
}

.pk-card__text {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	margin: 0.6rem 0 0;
}

.pk-dark .pk-card__text {
	color: rgba(255, 255, 255, 0.68);
}

/* Иконка */
.pk-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--wp--preset--gradient--accent-soft);
	color: var(--wp--preset--color--accent);
	margin-bottom: 1.1rem;
}

.pk-icon svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pk-dark .pk-icon {
	background: rgba(42, 179, 167, 0.12);
	color: var(--wp--preset--color--accent-2);
}

/* ==========================================================================
   7. Цифры и диаграммы
   ========================================================================== */

.pk-metric__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxl);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.pk-dark .pk-metric__value {
	color: #fff;
}

.pk-metric__label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	margin: 0.5rem 0 0;
}

.pk-dark .pk-metric__label {
	color: rgba(255, 255, 255, 0.58);
}

/* Горизонтальные столбцы точности */
.pk-bars {
	display: grid;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pk-bar__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.pk-bar__name {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.pk-bar__value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.pk-bar__track {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--line);
	overflow: hidden;
}

.pk-dark .pk-bar__track {
	background: rgba(255, 255, 255, 0.09);
}

.pk-bar__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 999px;
	background: var(--wp--preset--gradient--accent-line);
	transition: width 1.4s var(--pk-ease);
}

.pk-bar--weak .pk-bar__fill {
	background: linear-gradient(90deg, #e56e39, #f0a06a);
}

.pk-bar--mid .pk-bar__fill {
	background: linear-gradient(90deg, #e56e39, #6d3fa8);
}

.is-visible .pk-bar__fill {
	width: var(--pk-bar, 0%);
}

.pk-bar__note {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	margin: 0.45rem 0 0;
}

.pk-dark .pk-bar__note {
	color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   8. Номерной знак и сцена распознавания
   ========================================================================== */

.pk-plate {
	display: inline-flex;
	align-items: stretch;
	border-radius: 8px;
	background: #fff;
	color: #0a0e1a;
	border: 2px solid #11162a;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	letter-spacing: 0.06em;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.pk-plate__num {
	padding: 0.5rem 1rem;
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	white-space: nowrap;
}

.pk-plate__region {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0.25rem 0.6rem;
	border-left: 2px solid #11162a;
	font-size: clamp(1rem, 2vw, 1.45rem);
	line-height: 1;
	gap: 3px;
}

.pk-plate__flag {
	font-size: 0.55rem;
	letter-spacing: 0.05em;
	opacity: 0.75;
}

.pk-plate__region > span {
	white-space: nowrap;
}

.pk-plate--blue {
	background: #1e40af;
	color: #fff;
	border-color: #0b1b4d;
}

.pk-plate--blue .pk-plate__region {
	border-left-color: rgba(255, 255, 255, 0.5);
}

/* Голосование по серии кадров */
.pk-frames {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pk-frames li {
	padding: 0.7rem 0.5rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	text-align: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.62);
	transition: transform var(--pk-transition), border-color var(--pk-transition);
}

.pk-frames li b {
	display: block;
	font-size: 0.68rem;
	font-weight: 500;
	opacity: 0.55;
	margin-bottom: 0.3rem;
}

.pk-frames li.is-pick {
	border-color: var(--wp--preset--color--accent-2);
	color: #fff;
	background: rgba(42, 179, 167, 0.12);
	transform: translateY(-3px);
}

/* ==========================================================================
   9. Шаги и таймлайн
   ========================================================================== */

.pk-steps {
	counter-reset: pk-step;
	display: grid;
	gap: 1px;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--pk-radius);
	overflow: hidden;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.pk-step {
	position: relative;
	padding: 1.6rem 1.4rem;
	background: #080c1a;
	transition: background var(--pk-transition);
}

.pk-step:hover {
	background: #0d1226;
}

.pk-step__num {
	counter-increment: pk-step;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-2);
	letter-spacing: 0.1em;
}

.pk-step__num::before {
	content: "0" counter(pk-step);
}

.pk-step h3 {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0.6rem 0 0.5rem;
}

.pk-step p {
	font-size: var(--wp--preset--font-size--sm);
	margin: 0;
}

/* Вертикальный таймлайн ленты проезда */
.pk-trace {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.pk-trace::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: linear-gradient(180deg, var(--wp--preset--color--accent), rgba(42, 179, 167, 0.2));
	border-radius: 2px;
}

.pk-trace li {
	position: relative;
	padding: 0 0 1.1rem 2.1rem;
	font-size: var(--wp--preset--font-size--sm);
}

.pk-trace li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 3px solid var(--wp--preset--color--accent);
}

.pk-dark .pk-trace li::before {
	background: #080c1a;
}

.pk-trace time {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.15rem;
}

/* ==========================================================================
   10. Сравнение «было / стало»
   ========================================================================== */

.pk-compare {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.pk-compare__col {
	border-radius: var(--pk-radius);
	padding: 1.6rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}

.pk-compare__col--old {
	background: var(--wp--preset--color--surface);
}

.pk-compare__col--new {
	border-color: rgba(109, 63, 168, 0.3);
	box-shadow: 0 18px 44px rgba(109, 63, 168, 0.12);
}

.pk-compare h3 {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0 0 1rem;
}

.pk-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.pk-list li {
	position: relative;
	padding-left: 1.9rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.pk-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15rem;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(109, 63, 168, 0.1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d3fa8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: center;
}

.pk-list--minus li::before {
	background-color: rgba(120, 130, 150, 0.12);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8497' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

.pk-dark .pk-list li {
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   11. Приватность канала
   ========================================================================== */

.pk-tunnel {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	padding: 1.75rem;
	border-radius: var(--pk-radius);
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
}

.pk-tunnel__node {
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
}

.pk-tunnel__node b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	margin-bottom: 0.2rem;
}

.pk-tunnel__pipe {
	position: relative;
	height: 44px;
	min-width: 120px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	overflow: hidden;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.45);
}

.pk-tunnel__pipe::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 34%;
	background: linear-gradient(90deg, transparent, rgba(42, 179, 167, 0.35), transparent);
	animation: pk-flow 2.6s linear infinite;
}

@keyframes pk-flow {
	from { transform: translateX(-120%); }
	to { transform: translateX(400%); }
}

@media (max-width: 720px) {
	.pk-tunnel {
		grid-template-columns: 1fr;
	}

	.pk-tunnel__pipe {
		transform: rotate(90deg);
		justify-self: center;
	}
}

/* ==========================================================================
   12. Бегущая строка
   ========================================================================== */

.pk-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.pk-marquee__track {
	display: flex;
	gap: 3rem;
	width: max-content;
	animation: pk-marquee 34s linear infinite;
}

.pk-marquee:hover .pk-marquee__track {
	animation-play-state: paused;
}

.pk-marquee__item {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--muted);
	opacity: 0.65;
	white-space: nowrap;
}

@keyframes pk-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   13. Дорожная карта / честный блок
   ========================================================================== */

.pk-roadmap {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.pk-roadmap li {
	padding: 1.3rem 1.4rem;
	border-radius: var(--pk-radius);
	border: 1px dashed var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}

.pk-roadmap b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--md);
	margin-bottom: 0.35rem;
}

.pk-roadmap span {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.pk-status {
	display: inline-block;
	margin-bottom: 0.7rem;
	padding: 0.2rem 0.6rem;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pk-status--soon {
	background: rgba(229, 110, 57, 0.14);
	color: #b04a19;
}

.pk-status--no {
	background: rgba(92, 103, 121, 0.12);
	color: var(--wp--preset--color--muted);
}

.pk-status--done {
	background: rgba(42, 179, 167, 0.14);
	color: #197a71;
}

/* ==========================================================================
   13a. Плитка-ссылка на раздел
   ========================================================================== */

.pk-tile {
	display: block;
	padding: 1.75rem;
	text-decoration: none;
	color: inherit;
}

.pk-tile:hover {
	text-decoration: none;
}

/* Ссылка на демо: заметнее обычного текста, но не третья кнопка подряд */
.pk-demo-link {
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(255, 255, 255, 0.62);
}

.pk-demo-link a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
	border-bottom: 1px solid rgba(42, 179, 167, 0.45);
	padding-bottom: 1px;
	transition: color var(--pk-transition), border-color var(--pk-transition);
}

.pk-dark .pk-demo-link a {
	color: var(--wp--preset--color--accent-2);
}

.pk-demo-link a::after {
	content: " →";
	white-space: nowrap;
}

.pk-demo-link a:hover {
	color: #fff;
	border-color: #fff;
	text-decoration: none;
}

/* Тот же приём на светлом фоне */
.pk-demo-link--light {
	color: var(--wp--preset--color--muted);
}

.pk-demo-link--light a {
	color: var(--wp--preset--color--accent);
	border-bottom-color: rgba(109, 63, 168, 0.4);
}

.pk-demo-link--light a:hover {
	color: #5a3390;
	border-color: #5a3390;
}

/* Пункт меню, ведущий на демо: выделен цветом и значком внешней ссылки */
.pk-header .wp-block-navigation .pk-nav-demo a {
	color: var(--wp--preset--color--accent);
}

.pk-header .wp-block-navigation .pk-nav-demo a::before {
	content: "↗";
	margin-right: 0.25rem;
	font-size: 0.85em;
}

/* ==========================================================================
   Скриншоты интерфейса
   ========================================================================== */

.pk-shot {
	margin: 0;
	border-radius: var(--pk-radius-lg);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	box-shadow: var(--wp--preset--shadow--lift);
	background: #0b0f1a;
	line-height: 0;
}

.pk-shot img {
	display: block;
	width: 100%;
	height: auto;
}

/* Скриншот в первом экране уходит за край колонки — так интерфейс читается
   крупнее, а обрезает его сама секция (у .pk-mesh есть overflow: hidden). */
@media (min-width: 1100px) {
	.pk-shot--bleed {
		margin-right: -6rem;
		width: calc(100% + 6rem);
		max-width: none;
	}

	/* Схема проезда на первом экране — так же крупнее колонки */
	.pk-scene.pk-scene--hero {
		margin-left: -3rem;
		margin-right: -3rem;
		width: calc(100% + 6rem);
	}
}

/* Кабинет жильца — вертикальный кадр телефона на подложке: в полную ширину
   колонки он вымахивает на два экрана, поэтому ограничен по ширине. */
.pk-phone-stage {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--pk-radius-lg);
	border: 1px solid var(--wp--preset--color--line);
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(109, 63, 168, 0.16), transparent 70%),
		linear-gradient(180deg, rgba(42, 179, 167, 0.10), rgba(109, 63, 168, 0.05));
}

.pk-shot--phone {
	max-width: 320px;
	margin-inline: auto;
	border-radius: 26px;
}

/* В лайтбоксе WordPress клонирует ту же <figure> вместе с нашими классами, и
   ограничение ширины обрезает картинку по бокам — внутри оверлея снимаем всё. */
.wp-lightbox-overlay .pk-shot {
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	background: none;
}

.pk-dark .pk-shot {
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
}

.pk-shot figcaption {
	padding: 0.8rem 1.1rem;
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	text-align: left;
}

.pk-dark .pk-shot figcaption {
	background: rgba(255, 255, 255, 0.04);
	border-top-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.6);
}

/* Карточка с акцентом — например, свежая функция */
.pk-card--accent {
	border-color: rgba(109, 63, 168, 0.32);
	box-shadow: 0 20px 48px rgba(109, 63, 168, 0.12);
}

/* Отступ списков внутри карточек задаётся стилем, а не inline-разметкой:
   так блоки остаются валидными для редактора. */
.pk-card > .pk-list,
.pk-card > .pk-chips,
.pk-card > .pk-frames {
	margin-top: 1.2rem;
}

/* Карточка целиком ведёт по ссылке из своего заголовка */
.pk-card--link {
	cursor: pointer;
}

.pk-card--link .pk-card__title a {
	color: inherit;
	text-decoration: none;
}

.pk-card--link:hover .pk-card__title a {
	color: var(--wp--preset--color--accent);
}

.pk-tile__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

.pk-tile__more::after {
	content: "→";
	transition: transform var(--pk-transition);
}

.pk-tile:hover .pk-tile__more::after {
	transform: translateX(4px);
}

/* Компактная версия дорожной карты (тизер на главной) */
.pk-roadmap--compact {
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

.pk-roadmap--compact li {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 0.25rem 1rem;
	padding: 1rem 1.2rem;
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
}

.pk-roadmap--compact .pk-status {
	margin-bottom: 0;
	grid-row: span 2;
}

.pk-roadmap--compact b {
	color: #fff;
	margin-bottom: 0;
}

.pk-roadmap--compact span:not(.pk-status) {
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--wp--preset--font-size--xs);
}

/* ==========================================================================
   13b. Стенд: имитация контроллера
   ========================================================================== */

.pk-bench {
	border-radius: var(--pk-radius-lg);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--lift);
	overflow: hidden;
}

.pk-bench__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
}

.pk-bench__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--success);
	box-shadow: 0 0 0 3px rgba(42, 179, 167, 0.16);
}

.pk-bench__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	padding: 1.5rem;
}

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

.pk-bench__col {
	display: grid;
	gap: 0.7rem;
	align-content: start;
}

.pk-bench__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.pk-bench__row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
}

/* Тумблер */
.pk-switch {
	flex: none;
	position: relative;
	width: 34px;
	height: 19px;
	border-radius: 999px;
	background: var(--wp--preset--color--line);
	transition: background var(--pk-transition);
}

.pk-switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(12, 9, 24, 0.25);
	transition: transform var(--pk-transition);
}

.pk-switch.is-on {
	background: var(--wp--preset--color--accent);
}

.pk-switch.is-on::after {
	transform: translateX(15px);
}

/* Лампа реле */
.pk-lamp {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--line);
	border: 1px solid rgba(12, 9, 24, 0.08);
}

.pk-lamp.is-lit {
	background: var(--wp--preset--color--accent-2);
	border-color: transparent;
	box-shadow: 0 0 0 4px rgba(42, 179, 167, 0.18);
	animation: pk-lamp-pulse 2.6s var(--pk-ease) infinite;
}

@keyframes pk-lamp-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(42, 179, 167, 0.18); }
	50% { box-shadow: 0 0 0 7px rgba(42, 179, 167, 0.06); }
}

/* ==========================================================================
   13c. Журнал обновлений
   ========================================================================== */

.pk-release {
	position: relative;
	padding: 0 0 2.25rem 2.5rem;
	border-left: 2px solid var(--wp--preset--color--line);
	margin-left: 8px;
}

.pk-release:last-child {
	padding-bottom: 0;
	border-left-color: transparent;
}

.pk-release::before {
	content: "";
	position: absolute;
	left: -9px;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 3px solid var(--wp--preset--color--accent);
}

.pk-release--planned::before {
	border-color: var(--wp--preset--color--line);
}

.pk-release__date {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.06em;
}

.pk-release__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0.35rem 0 0.6rem;
}

.pk-release__body {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	max-width: 64ch;
	margin: 0;
}

/* ==========================================================================
   14. FAQ
   ========================================================================== */

.pk-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1.3rem 0;
}

.pk-faq summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -0.02em;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: center;
	transition: color var(--pk-transition);
}

.pk-faq summary:hover {
	color: var(--wp--preset--color--accent);
}

.pk-faq summary::-webkit-details-marker {
	display: none;
}

.pk-faq summary::after {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d3fa8' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	transition: transform var(--pk-transition);
}

.pk-faq .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.pk-faq .wp-block-details p {
	margin: 0.8rem 0 0;
	color: var(--wp--preset--color--muted);
	max-width: 68ch;
	animation: pk-fade-in 320ms var(--pk-ease);
}

@keyframes pk-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. Появление при прокрутке
   ========================================================================== */

.pk-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 700ms var(--pk-ease), transform 700ms var(--pk-ease);
	will-change: opacity, transform;
}

.pk-reveal.is-visible {
	opacity: 1;
	transform: none;
}

.pk-reveal--left { transform: translateX(-28px); }
.pk-reveal--right { transform: translateX(28px); }

/* На узких экранах горизонтальный сдвиг вылезает за край и добавляет
   прокрутку вбок — там появляемся только снизу вверх. */
@media (max-width: 900px) {
	.pk-reveal--left,
	.pk-reveal--right {
		transform: translateY(22px);
	}
}
.pk-reveal--zoom { transform: scale(0.96); }

.pk-reveal--left.is-visible,
.pk-reveal--right.is-visible,
.pk-reveal--zoom.is-visible {
	transform: none;
}

/* Каскад для детей контейнера */
.pk-stagger > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 620ms var(--pk-ease), transform 620ms var(--pk-ease);
}

.pk-stagger.is-visible > * {
	opacity: 1;
	transform: none;
}

.pk-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.pk-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.pk-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.pk-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.pk-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.pk-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }
.pk-stagger.is-visible > *:nth-child(7) { transition-delay: 420ms; }
.pk-stagger.is-visible > *:nth-child(8) { transition-delay: 490ms; }
.pk-stagger.is-visible > *:nth-child(9) { transition-delay: 560ms; }

/* ==========================================================================
   16. Шапка на узких экранах и оверлей-меню
   ========================================================================== */

@media (max-width: 1099px) {
	.pk-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.pk-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 14px;
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--ink);
		box-shadow: 0 2px 10px rgba(7, 5, 15, 0.06);
		transition: background var(--pk-transition), border-color var(--pk-transition);
	}

	.pk-header .wp-block-navigation__responsive-container-open:hover {
		background: #fff;
		border-color: var(--wp--preset--color--accent);
	}

	/* Иконка из коробки — 24 px и почти не видна на белом. */
	.pk-header .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
		fill: currentColor;
	}

	.pk-header .wp-block-buttons .wp-block-button.is-style-outline {
		display: none;
	}

	.pk-header .wp-block-button__link {
		padding: 0.7rem 1.15rem;
		white-space: nowrap;
	}

	.pk-header .wp-block-navigation {
		order: 3;
	}

	.pk-header .wp-block-buttons {
		order: 2;
		margin-left: auto;
	}

	.pk-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		z-index: 200;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		overflow: auto;
		/* Без этого отступы прибавляются к 100% ширины, и оверлей вылезает
		   за экран — меню съезжает вправо и вниз. */
		box-sizing: border-box;
		padding: 4.5rem 1.5rem;
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--ink);
		justify-content: center;
		align-items: center;
	}

	.pk-header .is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1.4rem;
		width: 100%;
		padding-top: 0;
		margin: auto 0;
	}

	.pk-header .is-menu-open .wp-block-navigation__container {
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 1.4rem;
		width: 100%;
	}

	.pk-header .is-menu-open .wp-block-navigation-item {
		width: 100%;
		justify-content: center;
	}

	.pk-header .is-menu-open .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--xl);
		font-weight: 700;
	}

	.pk-header .is-menu-open .wp-block-navigation__responsive-container-close {
		/* absolute считался бы от диалога, а он начинается там же, где пункты,
		   и крестик оказывался посреди экрана. */
		position: fixed;
		top: 0.7rem;
		right: 0.9rem;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 14px;
		color: var(--wp--preset--color--ink);
	}

	.pk-header .is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 26px;
		height: 26px;
		fill: currentColor;
	}
}

/* Телефоны: в строку шапки должны поместиться знак, кнопка и гамбургер */
@media (max-width: 600px) {
	.pk-header .alignwide {
		gap: 0.75rem;
	}

	.pk-logo__mark {
		width: 28px;
		height: 28px;
	}

	.pk-logo__text {
		font-size: 1.05rem;
	}

	.pk-header .wp-block-button__link {
		padding: 0.6rem 0.85rem;
		font-size: var(--wp--preset--font-size--xs);
	}
}

@media (max-width: 360px) {
	.pk-logo__text {
		display: none;
	}
}

/* Полосы секций стыкуются вплотную: свои отступы они задают сами, а общий
   межблочный зазор оставлял между цветными полосами пустую строку. */
.entry-content > .wp-block-group.alignfull + .wp-block-group.alignfull {
	margin-block-start: 0;
}

/* ==========================================================================
   Команда установки и таблица путей
   ========================================================================== */

/* Терминальная плашка: одна команда, которую человек копирует и вставляет. */
.pk-cmd {
	border-radius: var(--pk-radius);
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #080c1a;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--lift);
}

.pk-cmd__head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: rgba(255, 255, 255, 0.55);
}

.pk-cmd__dots {
	display: inline-flex;
	gap: 5px;
	flex: none;
}

.pk-cmd__dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
}

.pk-cmd__dots i:first-child {
	background: rgba(229, 110, 57, 0.7);
}

.pk-cmd__dots i:nth-child(2) {
	background: rgba(42, 179, 167, 0.6);
}

.pk-cmd__copy {
	margin-left: auto;
	flex: none;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: 0.28rem 0.8rem;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	cursor: pointer;
	transition: color var(--pk-transition), border-color var(--pk-transition), background var(--pk-transition);
}

.pk-cmd__copy:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.06);
}

.pk-cmd__copy.is-done {
	color: var(--wp--preset--color--accent-2);
	border-color: rgba(42, 179, 167, 0.5);
}

.pk-cmd pre {
	margin: 0;
	padding: 1.15rem 1.15rem;
	overflow-x: auto;
	background: none;
}

.pk-cmd code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.82rem, 0.62rem + 0.5vw, 1rem);
	line-height: 1.7;
	color: #e8ecff;
	white-space: pre;
}

/* Приглашение оболочки перед командой — не копируется вместе с ней. */
.pk-cmd code::before {
	content: "$ ";
	color: var(--wp--preset--color--accent-2);
}

.pk-cmd--plain code::before {
	content: none;
}

/* На узком экране подпись терминала уступает место кнопке, а команда
   переносится по словам — горизонтальная прокрутка внутри блока неудобна. */
@media (max-width: 560px) {
	.pk-cmd__head > span:not(.pk-cmd__dots) {
		display: none;
	}

	.pk-cmd code {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}

	/* Адрес склада не рвём на дефисе: перенос выглядел бы пробелом, а
	   короткую команду часто набирают руками. */
	.pk-cmd .pk-nowrap {
		white-space: nowrap;
	}
}

/* Выдача кода на скачивание комплекта. */
.pk-get__form {
	border-radius: var(--pk-radius);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.pk-get__title {
	margin: 0 0 1.1rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.pk-get__row {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.9rem;
}

.pk-get__q {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1 1 320px;
	font-weight: 600;
}

.pk-get__input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink);
}

.pk-get__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.pk-get__button {
	flex: 0 0 auto;
	padding: 0.78rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	cursor: pointer;
	transition: filter var(--pk-transition);
}

.pk-get__button:hover {
	filter: brightness(1.12);
}

.pk-get__button[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Ловушка для роботов: человек её не видит и не заполняет. */
.pk-get__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pk-get__note {
	margin: 0.9rem 0 0;
	min-height: 1.2em;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.pk-get__note.is-bad {
	color: var(--wp--preset--color--warn);
}

.pk-get__until {
	margin: 0.9rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

/* Два шага: команда одна для всех, код у каждого свой. */
.pk-get__part + .pk-get__part {
	margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.pk-get__label {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 0.9rem;
	font-weight: 600;
}

.pk-get__step {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
}

/* Код установки: крупно и моноширинно — его переписывают с экрана руками,
   а в обычном шрифте путаются l / I / 1 и O / 0. */
.pk-code {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: clamp(1rem, 3vw, 1.4rem) clamp(1rem, 3vw, 1.6rem);
	border-radius: var(--pk-radius);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
}

.pk-code__value {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	background: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.05rem, 0.7rem + 1.5vw, 1.65rem);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
	overflow-wrap: anywhere;
	user-select: all;
}

.pk-code__d {
	color: var(--wp--preset--color--accent);
}

.pk-code__copy {
	flex: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 0.45rem 1rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	cursor: pointer;
	transition: border-color var(--pk-transition), color var(--pk-transition);
}

.pk-code__copy:hover {
	border-color: var(--wp--preset--color--accent);
}

.pk-code__copy.is-done {
	color: var(--wp--preset--color--accent-2);
	border-color: var(--wp--preset--color--accent-2);
}

.pk-get__oneline {
	margin-top: 1.1rem;
}

.pk-get__oneline > summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.pk-get__oneline > .pk-cmd {
	margin-top: 0.8rem;
}

@media (max-width: 560px) {
	.pk-code {
		flex-direction: column;
		align-items: stretch;
	}

	.pk-code__copy {
		align-self: flex-start;
	}
}

/* Таблица путей: где что лежит после установки. */
.pk-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

.pk-table th,
.pk-table td {
	text-align: left;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
}

.pk-table th {
	font-size: var(--wp--preset--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.pk-table tr:last-child td {
	border-bottom: 0;
}

.pk-table td:last-child {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}

.pk-dark .pk-table th,
.pk-dark .pk-table td {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

.pk-dark .pk-table td:last-child {
	color: var(--wp--preset--color--accent-2);
}

.pk-table-wrap {
	overflow-x: auto;
}

/* Калькулятор цены: число терминалов → три суммы. Данные берутся из таблицы
   ниже, поэтому цены правятся в одном месте — в самой таблице. */
.pk-calc {
	border-radius: var(--pk-radius-lg);
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--lift);
	overflow: hidden;
}

.pk-calc__picker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.9rem 1.5rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
}

.pk-calc__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pk-calc__step {
	min-width: 46px;
	padding: 0.5rem 0.4rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background var(--pk-transition), border-color var(--pk-transition), color var(--pk-transition);
}

.pk-calc__step:hover {
	border-color: var(--wp--preset--color--accent);
}

.pk-calc__step[aria-pressed="true"] {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

.pk-calc__out {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pk-calc__cell {
	padding: 1.5rem;
	border-right: 1px solid var(--wp--preset--color--line);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.pk-calc__cell:last-child {
	border-right: 0;
}

.pk-calc__label {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.pk-calc__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.pk-calc__note {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 680px) {
	.pk-calc__cell {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.pk-calc__cell:last-child {
		border-bottom: 0;
	}
}

/* Таблица цен: первый столбец — счёт терминалов, остальные — суммы. */
.pk-price-table caption {
	caption-side: bottom;
	padding-top: 0.9rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	text-align: left;
}

.pk-price-table td,
.pk-price-table tbody th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
	text-align: left;
}

.pk-price-table tbody th {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.pk-price-table td:last-child {
	color: var(--wp--preset--color--ink);
}

.pk-price-table tbody tr:hover {
	background: var(--wp--preset--color--surface);
}

/* Код внутри обычного текста карточек. */
.pk-inline-code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88em;
	padding: 0.1em 0.42em;
	border-radius: 6px;
	background: rgba(109, 63, 168, 0.1);
	color: var(--wp--preset--color--accent);
	white-space: nowrap;
}

.pk-dark .pk-inline-code {
	background: rgba(255, 255, 255, 0.08);
	color: #d8ddff;
}

/* ==========================================================================
   17. Мелочи
   ========================================================================== */

.pk-mono {
	font-family: var(--wp--preset--font-family--mono);
}

.pk-note {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
}

.pk-dark .pk-note {
	color: rgba(255, 255, 255, 0.45);
}

.pk-divider {
	height: 1px;
	background: var(--wp--preset--gradient--accent-line);
	opacity: 0.4;
	border: 0;
	margin: 0;
}

/* Крупная цитата */
.pk-quote {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.025em;
}

/* ==========================================================================
   17a. Пункты без рамок
   ========================================================================== */

/* Второстепенные пункты секции — без рамки и подложки, только линия сверху.
   Рамки остаются у главного, иначе всё на странице одинаково громкое. */
.pk-points .pk-card,
.pk-points .pk-card:hover {
	padding: 1.1rem 0 0 !important;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.pk-points .pk-card::before {
	content: none;
}

.pk-dark .pk-points .pk-card {
	border-top-color: rgba(255, 255, 255, 0.14);
}

/* ==========================================================================
   17b. Жидкое стекло
   ========================================================================== */

/* Рецепт по мотивам Liquid Glass Studio: размытие и насыщенность фона,
   полупрозрачная заливка, светлая кромка сверху и блик. Только CSS —
   SVG-преломление (backdrop-filter: url()) Safari не поддерживает, поэтому
   его нет. Стеклу нужно, что преломлять: в тёмных секциях с сеткой за ним
   лежит мягкое цветное свечение. */
.pk-dark.pk-grid-bg:not(.pk-mesh)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(38% 46% at 18% 78%, rgba(109, 63, 168, 0.32), transparent 70%),
		radial-gradient(30% 40% at 84% 62%, rgba(42, 179, 167, 0.18), transparent 70%),
		radial-gradient(26% 32% at 62% 102%, rgba(229, 110, 57, 0.14), transparent 70%);
	pointer-events: none;
}

.pk-dark .pk-card,
.pk-dark .pk-step,
.pk-dark .wp-block-button.is-style-outline .wp-block-button__link {
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 55%, rgba(255, 255, 255, 0.05));
	border-color: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		inset 0 -1px 0 rgba(255, 255, 255, 0.06),
		0 10px 34px rgba(0, 0, 0, 0.28);
}

/* Блик по верхнему краю — как свет на толстом стекле. */
.pk-dark .pk-card::after,
.pk-dark .pk-step::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(170deg, rgba(255, 255, 255, 0.12), transparent 28%);
	pointer-events: none;
}

.pk-dark .pk-card:hover,
.pk-dark .pk-step:hover {
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.07));
	border-color: rgba(255, 255, 255, 0.26);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.36),
		inset 0 -1px 0 rgba(255, 255, 255, 0.08),
		0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Шаги стоят плиткой с зазором в 1 px: у стекла зазор становится просветом. */
.pk-dark .pk-steps {
	gap: 1px;
	background: rgba(255, 255, 255, 0.06);
}

.pk-dark .pk-step {
	border-radius: 0;
}

.pk-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
	border-color: rgba(255, 255, 255, 0.34);
}

/* Шапка — светлое стекло с кромкой. */
.pk-header {
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.6);
}

/* На телефоне размытие дорогое — делаем его легче. */
@media (max-width: 600px) {
	.pk-dark .pk-card,
	.pk-dark .pk-step,
	.pk-dark .wp-block-button.is-style-outline .wp-block-button__link {
		-webkit-backdrop-filter: blur(10px) saturate(150%);
		backdrop-filter: blur(10px) saturate(150%);
	}
}

/* Без поддержки размытия стекло стало бы прозрачным — даём плотную заливку. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pk-dark .pk-card,
	.pk-dark .pk-step {
		background: rgba(20, 16, 40, 0.92);
	}
}

/* ==========================================================================
   18. Уважение к настройкам движения
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.pk-reveal,
	.pk-stagger > * {
		opacity: 1;
		transform: none;
	}

	.pk-bar__fill {
		width: var(--pk-bar, 0%);
	}
}

/* ---------- Живые схемы (assets/js/scenes.js) ---------- */

.pk-scene {
	position: relative;
	width: 100%;
}

.pk-scene__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* На светлых секциях схема стоит в тёмной подложке */
.pk-scene--panel {
	box-sizing: border-box;
	border-radius: 20px;
	padding: clamp(8px, 2vw, 20px);
	background: radial-gradient(120% 100% at 30% 20%, #241546 0%, #120a26 60%, #0b0718 100%);
	box-shadow: var(--wp--preset--shadow--lift);
}

.pk-scene-wrap {
	margin-inline: auto;
}

/* Ширину alignwide задаёт раскладка WordPress, поэтому селектор с запасом */
.wp-block-group .pk-scene-wrap.pk-scene-wrap--md {
	max-width: 680px;
}

.wp-block-group .pk-scene-wrap.pk-scene-wrap--lg {
	max-width: 1080px;
}

.pk-scene-wrap .pk-note {
	margin: var(--wp--preset--spacing--20) 0 0;
	text-align: center;
}

.pk-scene__plate {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	fill: #0a0e1a;
	letter-spacing: 0.02em;
}

.pk-scene__tiny {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	fill: #0a0e1a;
}

.pk-scene__chip,
.pk-scene__tag,
.pk-scene__ui,
.pk-scene__btn {
	font-family: var(--wp--preset--font-family--sans);
	fill: #fff;
}

.pk-scene__chip { font-size: 9.4px; font-weight: 600; }
.pk-scene__tag { font-size: 9px; font-weight: 600; }
.pk-scene__ui { font-size: 8.4px; font-weight: 600; }
.pk-scene__ui--dim { fill: rgba(255, 255, 255, 0.55); font-weight: 500; }
.pk-scene__btn { font-size: 8.6px; font-weight: 700; }

.pk-scene__mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 8.5px;
	fill: #fff;
	letter-spacing: 0.06em;
}

.pk-scene__mono--dim { fill: rgba(255, 255, 255, 0.5); }

.pk-scene__read {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 19px;
	font-weight: 700;
	fill: #fff;
	letter-spacing: 0.08em;
}

.pk-scene__big {
	font-family: var(--wp--preset--font-family--display);
	font-size: 26px;
	font-weight: 800;
	fill: #fff;
}

.pk-scene__field {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 700;
	fill: #0a0e1a;
}

/* Кнопка запуска схемы, когда в системе включено «Уменьшить движение» */
.pk-scene__play {
	position: absolute;
	right: 12px;
	bottom: 12px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(10, 6, 24, 0.82);
	color: #fff;
	font: 600 var(--wp--preset--font-size--xs) / 1 var(--wp--preset--font-family--sans);
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.pk-scene__play svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: var(--wp--preset--color--accent-2);
}

.pk-scene__play:hover,
.pk-scene__play:focus-visible {
	border-color: var(--wp--preset--color--accent-2);
}

/* Телефон под кнопками финального блока «Посмотрим на ваш въезд» */
.pk-cta-phone {
	font-size: var(--wp--preset--font-size--md);
	color: rgba(255, 255, 255, 0.72);
}

.pk-cta-phone a {
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.pk-cta-phone a:hover,
.pk-cta-phone a:focus-visible {
	border-bottom-color: var(--wp--preset--color--accent-2);
}

/* Номер телефона не рвётся посередине */
a[href^="tel:"] {
	white-space: nowrap;
}

/* Подписи колонок подвала. Не заголовки: иначе после разделов страницы
   (H2) шёл бы сразу H6, и структура заголовков рвалась. */
.pk-footer-title {
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.1;
	text-transform: uppercase;
}