/* =========================================================
   carwash-POSEIDON — ядро: токени, база, типографіка, UI
   ========================================================= */

/* ---------- 1. Токени ---------- */
:root {
	/* Поверхні */
	--pc-bg: #000000;
	--pc-bg-1: #0a0a0b;
	--pc-bg-2: #121214;
	--pc-bg-3: #17181b;

	/* Лінії */
	--pc-line: rgba(255, 255, 255, .10);
	--pc-line-2: rgba(255, 255, 255, .18);

	/* Текст */
	--pc-text: #f2f4f7;
	--pc-muted: #9aa3ad;
	--pc-dim: #6b7280;

	/* Акцент — срібло (заміна фіолетового в донорському дизайні) */
	--pc-silver: #d7dde5;
	--pc-silver-bright: #f4f7fa;
	--pc-silver-dim: #9aa3ad;
	--pc-silver-deep: #6e7885;
	--pc-metal: linear-gradient(135deg, #6e7885 0%, #aeb8c4 20%, #f4f7fa 44%, #d7dde5 58%, #8e97a3 78%, #c9d1da 100%);
	--pc-metal-soft: linear-gradient(135deg, rgba(215, 222, 230, .16), rgba(244, 247, 250, .04) 55%, rgba(110, 120, 133, .14));
	--pc-glow: 0 0 46px rgba(215, 222, 230, .16);

	/* Шрифти */
	--pc-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--pc-font-display: "Unbounded", var(--pc-font);

	/* Розміри */
	--pc-shell: 1440px;
	--pc-gutter: clamp(16px, 4vw, 48px);
	--pc-radius: 22px;
	--pc-radius-lg: 30px;
	--pc-header-h: 76px;

	/* Рух */
	--pc-ease: cubic-bezier(.22, .61, .36, 1);
	--pc-dur: .45s;
}

@media (max-width: 767px) {
	:root {
		--pc-radius: 18px;
		--pc-radius-lg: 22px;
		--pc-header-h: 64px;
	}
}

/* ---------- 2. Скидання ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pc-header-h) + 24px);
}

body.pc {
	margin: 0;
	background: var(--pc-bg);
	color: var(--pc-text);
	font-family: var(--pc-font);
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.6;
	font-weight: 400;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.pc.is-locked { overflow: hidden; }

img,
video,
iframe,
svg { display: block; max-width: 100%; }

img,
video { height: auto; }

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 400;
	line-height: 1.02;
}

p { margin: 0; }

[hidden] { display: none !important; }

:focus-visible {
	outline: 2px solid var(--pc-silver);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection {
	background: var(--pc-silver);
	color: #000;
}

/* Скролбар */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pc-bg-1); }
::-webkit-scrollbar-thumb {
	background: #2a2c31;
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: #3a3d44; }

/* ---------- 3. Каркас ---------- */
.pc-shell {
	width: 100%;
	max-width: var(--pc-shell);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.pc-main > section {
	position: relative;
	padding-block: clamp(64px, 9vw, 130px);
}

/* Ховаємо вгору, а не за лівий край: left:-9999px додає сторінці
   горизонтальне переповнення. */
.pc-skip {
	position: fixed;
	left: 12px;
	top: 12px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--pc-silver);
	color: #000;
	transform: translateY(-200%);
	transition: transform .2s var(--pc-ease);
}
.pc-skip:focus { transform: none; }

/* ---------- 4. Типографіка ---------- */
.pc-h1,
.pc-h2 {
	font-family: var(--pc-font-display);
	font-weight: 300;
	letter-spacing: -.01em;
	text-transform: uppercase;
}

.pc-h1 {
	font-size: clamp(30px, 5.2vw, 76px);
	line-height: .98;
}

.pc-h2 {
	font-size: clamp(24px, 3.2vw, 46px);
	line-height: 1.04;
}

.pc-h1 span,
.pc-h2 span { display: block; }

.pc-lead,
.services__lead,
.gallery__lead,
.contacts__lead,
.packages__lead,
.faq__lead,
.about__lead {
	color: var(--pc-muted);
	max-width: 62ch;
}

.pc-tag {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pc-silver-dim);
}

/* ---------- 5. Кнопки ---------- */
.pc-btn {
	--btn-h: 52px;
	--btn-icon: 34px;
	/*
	 * Відступи однакові з обох боків — і з кружком, і без нього.
	 * Спокуса притиснути кружок до краю тут програє: щойно кнопку
	 * розтягують на всю ширину картки, різниця відступів зсуває весь
	 * вміст убік, і це помітно.
	 */
	--btn-pad: 22px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: var(--btn-h);
	padding-inline: var(--btn-pad);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform var(--pc-dur) var(--pc-ease), background-color var(--pc-dur), color var(--pc-dur), border-color var(--pc-dur);
}

.pc-btn:hover { transform: translateY(-2px); }
.pc-btn:active { transform: translateY(0); }

.pc-btn__icon {
	display: grid;
	place-items: center;
	width: var(--btn-icon);
	height: var(--btn-icon);
	border-radius: 50%;
	flex: none;
	transition: transform var(--pc-dur) var(--pc-ease);
}

.pc-btn:hover .pc-btn__icon { transform: rotate(45deg); }
/* Телефон і стрілка вниз не крутяться — крутиться лише діагональна стрілка. */
.pc-btn:hover .pc-btn__icon:has(.pc-icon--phone),
.pc-btn:hover .pc-btn__icon:has(.pc-icon--arrow-d) { transform: none; }

.pc-btn--solid {
	background: var(--pc-metal);
	color: #08090a;
	box-shadow: var(--pc-glow);
}
.pc-btn--solid .pc-btn__icon {
	background: rgba(0, 0, 0, .18);
	color: #08090a;
}

.pc-btn--ghost {
	border: 1px solid var(--pc-line-2);
	color: var(--pc-text);
	background: rgba(255, 255, 255, .02);
}
.pc-btn--ghost .pc-btn__icon {
	background: rgba(255, 255, 255, .08);
	color: var(--pc-silver);
}
.pc-btn--ghost:hover {
	border-color: var(--pc-silver);
	background: rgba(215, 222, 230, .08);
}

/*
 * Кнопка-іконка: та сама пігулка, тільки кругла й без підпису.
 * Ширина дорівнює висоті, тож вона стає рівно такою, як кружок
 * усередині сусідніх кнопок, і ряд читається як одне ціле.
 */
.pc-btn--icon {
	width: var(--btn-h);
	padding-inline: 0;
	gap: 0;
}

.pc-btn--icon .pc-btn__icon {
	background: none;
	color: var(--pc-silver);
}

.pc-btn--icon:hover .pc-btn__icon {
	background: none;
	color: var(--pc-text);
	transform: none;
}

/* ---------- 6. Шапка ---------- */
.pc-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 90;
	padding-top: 14px;
	/* Шар промотуємо одразу й назавжди: якщо він зʼявляється лише на час
	   анімації, Chromium лишає привида від попереднього кадру. */
	transform: translate3d(0, 0, 0);
	will-change: transform;
	backface-visibility: hidden;
	transition: transform .5s var(--pc-ease);
}

.pc-header.is-hidden { transform: translate3d(0, -120%, 0); }

.pc-header__inner {
	width: min(calc(var(--pc-shell) - 32px), calc(100% - var(--pc-gutter) * 2));
	margin-inline: auto;
	height: var(--pc-header-h);
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 8px 8px 8px 16px;
	border: 1px solid var(--pc-line);
	border-radius: 999px;
	/* Без backdrop-filter: разом із анімованим transform він лишає
	   привида пігулки при ховзанні шапки. На чорному тлі розмиття
	   майже не читалось, тому просто робимо фон щільнішим. */
	background: rgba(8, 8, 9, .86);
}

.pc-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.pc-brand__mark { width: 26px; color: var(--pc-silver); }
.pc-brand__mark svg { width: 100%; height: auto; }

.pc-brand__text { display: grid; }

.pc-brand__name {
	font-family: var(--pc-font-display);
	font-size: 15px;
	letter-spacing: .22em;
	line-height: 1;
}

.pc-brand__tagline {
	font-size: 8px;
	letter-spacing: .32em;
	color: var(--pc-dim);
	line-height: 1.6;
}

.pc-nav { flex: 1; min-width: 0; }

.pc-nav__list {
	display: flex;
	justify-content: center;
	gap: 4px;
}

.pc-nav__link {
	display: block;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--pc-muted);
	border: 1px solid transparent;
	transition: color .3s, border-color .3s, background-color .3s;
}

.pc-nav__link:hover,
.pc-nav__link.is-current {
	color: var(--pc-text);
	border-color: var(--pc-line-2);
	background: rgba(255, 255, 255, .04);
}

.pc-header__side {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	/* На вузькому екрані .pc-nav схована, і розсувати блоки нічому —
	   без auto права група злипалась із логотипом. */
	margin-left: auto;
}

.pc-header__cta { --btn-h: 46px; }

/* Перемикач мов */
.pc-lang {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border: 1px solid var(--pc-line);
	border-radius: 999px;
	gap: 2px;
}

.pc-lang__item {
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--pc-dim);
	transition: color .3s, background .3s;
}

.pc-lang__item:hover { color: var(--pc-text); }

.pc-lang__item.is-active {
	background: var(--pc-metal);
	color: #08090a;
}

/* Бургер */
.pc-burger {
	display: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--pc-line-2);
	place-content: center;
	gap: 5px;
	flex-direction: column;
	align-items: center;
}

.pc-burger span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--pc-text);
	transition: transform .35s var(--pc-ease), opacity .2s;
}

.pc-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.pc-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pc-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Мобільне меню */
.pc-menu {
	position: fixed;
	inset: 0;
	z-index: 85;
	background: rgba(4, 4, 5, .96);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: calc(var(--pc-header-h) + 32px) var(--pc-gutter) 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transition: opacity .3s;
}

.pc-menu.is-open { opacity: 1; }

/* Сітка живе на внутрішньому контейнері — інакше нема чого розсувати. */
.pc-menu__inner {
	min-height: 100%;
	display: grid;
	align-content: space-between;
	gap: 36px;
}

.pc-menu__list { display: grid; gap: 4px; }

.pc-menu__list a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pc-line);
}

.pc-menu__num {
	font-size: 11px;
	color: var(--pc-silver-deep);
	letter-spacing: .1em;
}

.pc-menu__label {
	font-family: var(--pc-font-display);
	font-size: clamp(26px, 8vw, 40px);
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1;
}

.pc-menu__foot { display: grid; gap: 8px; }

.pc-menu__phone {
	font-family: var(--pc-font-display);
	font-size: clamp(22px, 6vw, 30px);
	color: var(--pc-silver);
}

.pc-menu__hours { color: var(--pc-muted); font-size: 14px; }

/* Соцмережі */
.pc-socials { display: flex; gap: 8px; }

.pc-socials a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--pc-line);
	color: var(--pc-muted);
	transition: color .3s, border-color .3s, background .3s;
}

.pc-socials a:hover {
	color: #08090a;
	background: var(--pc-metal);
	border-color: transparent;
}

/* ---------- 7. Плейсхолдери та медіа ---------- */
.pc-ph,
.pc-media {
	position: relative;
	aspect-ratio: var(--pc-ratio, 4 / 5);
	width: 100%;
	overflow: hidden;
	border-radius: inherit;
}

.pc-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pc-ph {
	display: grid;
	place-items: center;
	gap: 10px;
	background:
		radial-gradient(120% 90% at 30% 10%, rgba(215, 222, 230, .10), transparent 60%),
		linear-gradient(145deg, #131417 0%, #0a0a0b 55%, #17181b 100%);
	border: 1px solid var(--pc-line);
	color: var(--pc-silver-deep);
}

.pc-ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px);
	pointer-events: none;
}

.pc-ph__mark { width: clamp(28px, 14%, 54px); opacity: .55; }
.pc-ph__mark svg { width: 100%; height: auto; }

.pc-ph__label {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	opacity: .8;
	text-align: center;
	padding-inline: 12px;
}

/* ---------- 8. Горизонтальні скролери ---------- */
.pc-scroller {
	display: flex;
	gap: clamp(12px, 1.4vw, 20px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.pc-scroller::-webkit-scrollbar { display: none; }
.pc-scroller > * { scroll-snap-align: start; flex: none; }

.pc-slider-nav { display: flex; gap: 8px; }

.pc-slider-nav button {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--pc-line-2);
	color: var(--pc-text);
	transition: background .3s, color .3s, border-color .3s;
}

.pc-slider-nav button:hover:not(:disabled) {
	background: var(--pc-metal);
	color: #08090a;
	border-color: transparent;
}

.pc-slider-nav button:disabled { opacity: .35; cursor: default; }

/* ---------- 9. Поява при скролі ---------- */
.pc-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s var(--pc-ease), transform .7s var(--pc-ease);
	transition-delay: calc(var(--d, 0) * 90ms);
}

.pc-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* ---------- 10. Форма ---------- */
.pc-form {
	display: grid;
	gap: 16px;
	align-content: start;
	padding: clamp(20px, 3vw, 36px);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-lg);
	background: linear-gradient(160deg, var(--pc-bg-2), var(--pc-bg-1));
}

.pc-form__title {
	font-family: var(--pc-font-display);
	font-size: clamp(20px, 2.4vw, 30px);
	font-weight: 300;
	text-transform: uppercase;
}

.pc-field { display: grid; gap: 7px; }

.pc-field__label {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pc-silver-dim);
}

.pc-field input,
.pc-field textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--pc-line);
	border-radius: 14px;
	background: rgba(255, 255, 255, .03);
	transition: border-color .3s, background .3s;
	resize: vertical;
}

.pc-field input:focus,
.pc-field textarea:focus {
	outline: none;
	border-color: var(--pc-silver);
	background: rgba(215, 222, 230, .06);
}

/* Пастка для ботів: прибираємо з очей кліпом, без зсуву за край екрана. */
.pc-field--trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pc-form__submit { justify-self: start; }

.pc-form__note {
	font-size: 12px;
	color: var(--pc-dim);
}

.pc-form__status {
	font-size: 14px;
	min-height: 1.2em;
}

.pc-form__status.is-ok { color: var(--pc-silver-bright); }
.pc-form__status.is-error { color: #ff6b6b; }

/* ---------- 11. Підвал ---------- */
.pc-footer {
	position: relative;
	padding-top: clamp(50px, 6vw, 90px);
	border-top: 1px solid var(--pc-line);
	background: linear-gradient(180deg, var(--pc-bg) 0%, #08080a 100%);
	overflow: hidden;
}

.pc-footer__top {
	display: grid;
	grid-template-columns: 1.2fr 1.3fr 1.3fr;
	align-items: start;
	gap: clamp(24px, 3vw, 48px);
	padding-bottom: clamp(30px, 4vw, 56px);
}

.pc-footer__title {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pc-silver-deep);
	margin-bottom: 14px;
}

/*
 * Вісім пунктів в один стовпчик витягували ліву колонку втричі вище за
 * сусідні, і підвал ставав кособоким. Розкладаємо у дві колонки по
 * чотири — читається згори вниз, як і має нав'язатись око.
 */
.pc-footer__nav {
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	gap: 10px clamp(18px, 2.4vw, 40px);
	justify-content: start;
}
.pc-footer__nav a,
.pc-footer__link {
	color: var(--pc-muted);
	transition: color .3s;
}
.pc-footer__nav a:hover,
.pc-footer__link:hover { color: var(--pc-text); }

.pc-footer__big {
	display: block;
	font-family: var(--pc-font-display);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 300;
	color: var(--pc-silver);
	/* Номер телефону розривати не можна — він перестає читатись. */
	white-space: nowrap;
}

.pc-footer__muted {
	margin-top: 8px;
	color: var(--pc-dim);
	font-size: 14px;
}

.pc-footer__col .pc-socials { margin-top: 16px; }

.pc-footer__wordmark {
	display: flex;
	justify-content: space-between;
	font-family: var(--pc-font-display);
	font-weight: 300;
	font-size: clamp(44px, 14.9vw, 230px);
	line-height: .82;
	letter-spacing: -.02em;
	background: var(--pc-metal);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: .5;
	user-select: none;
	padding-bottom: 10px;
}

/*
 * Підпис розробника. Окремим рядком під копірайтом, а не четвертим
 * елементом у ньому: той ряд уже тримає три речі й на телефоні
 * переноситься.
 */
.pc-footer__credit {
	padding-block: 16px 22px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pc-dim);
	text-align: center;
}

.pc-footer__credit a,
.pc-footer__credit strong {
	color: var(--pc-silver-dim);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .3s, border-color .3s;
}

.pc-footer__credit a:hover {
	color: var(--pc-silver);
	border-color: var(--pc-silver-deep);
}

.pc-footer__policy {
	color: var(--pc-silver-dim);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .3s, border-color .3s;
}

.pc-footer__policy:hover {
	color: var(--pc-silver);
	border-color: var(--pc-silver-deep);
}

.pc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	/* Праворуч висить кнопка звуку — лишаємо їй місце. */
	padding-right: 64px;
	gap: 12px;
	padding-block: 22px;
	border-top: 1px solid var(--pc-line);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pc-dim);
}

.pc-footer__up {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color .3s;
}
.pc-footer__up:hover { color: var(--pc-text); }

/* ---------- 12. Адаптив каркасу ---------- */
@media (max-width: 1180px) {
	.pc-nav { display: none; }
	.pc-burger { display: flex; }
	.pc-header__cta { display: none; }
}

@media (max-width: 767px) {
	.pc-header__inner { padding-left: 12px; gap: 10px; }
	.pc-brand__tagline { display: none; }

	/*
	 * Третя мова додала перемикачу майже 45 px, і на вузькому екрані
	 * вміст шапки переріс її саму — бургер виїжджав за правий край.
	 * Тому на телефоні перемикач стискається: менші поля й кегль.
	 */
	.pc-lang { padding: 3px; }
	.pc-lang__item { padding: 5px 9px; font-size: 11px; letter-spacing: .06em; }
}

/* Перемикач мов у меню потрібен лише тоді, коли його немає в шапці. */
.pc-menu__lang { display: none; }

@media (max-width: 520px) {
	/*
	 * Третя мова зробила перемикач завширшки майже як логотип, і разом
	 * з брендом та бургером вміст шапки переріс її саму — бургер виїжджав
	 * за край. Підпилювати відступи тут марно: на 320 px бракувало 41 px,
	 * а на 360 — двох, тобто запасу не лишалось узагалі.
	 *
	 * Тому на телефоні перемикач переїжджає в бургер-меню. Бренд лишається
	 * цілим, шапка дихає, а мова — за один дотик.
	 */
	.pc-header__side .pc-lang { display: none; }
	.pc-menu__lang { display: block; margin-bottom: 18px; }
	.pc-menu__lang .pc-lang__item { padding: 8px 16px; font-size: 13px; }
	.pc-header__inner { padding-left: 12px; padding-right: 8px; gap: 10px; }
	.pc-footer__top { grid-template-columns: 1fr; }
	.pc-footer__bottom { padding-right: 56px; }
	.pc-btn { --btn-h: 48px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.pc-reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ---------- 13. Перемикач фонової музики ---------- */
.pc-sound {
	position: fixed;
	right: clamp(14px, 2vw, 26px);
	bottom: clamp(14px, 2vw, 26px);
	z-index: 80;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--pc-line-2);
	background: rgba(8, 8, 9, .86);
	transition: border-color .3s, background .3s, transform .3s var(--pc-ease);
}

.pc-sound:hover {
	border-color: var(--pc-silver);
	transform: translateY(-2px);
}

.pc-sound__bars {
	display: flex;
	align-items: center;
	gap: 2.5px;
	height: 16px;
}

.pc-sound__bars i {
	display: block;
	width: 2.5px;
	height: 4px;
	border-radius: 2px;
	background: var(--pc-silver-deep);
	transition: background .3s;
}

.pc-sound.is-on .pc-sound__bars i {
	background: var(--pc-silver);
	animation: pc-eq .9s ease-in-out infinite alternate;
}

/* Смужки стартують у різних фазах — інакше вони стрибають синхронно
   й читаються як миготіння, а не як еквалайзер. */
.pc-sound.is-on .pc-sound__bars i:nth-child(1) { animation-delay: -.6s; }
.pc-sound.is-on .pc-sound__bars i:nth-child(2) { animation-delay: -.2s; }
.pc-sound.is-on .pc-sound__bars i:nth-child(3) { animation-delay: -.45s; }
.pc-sound.is-on .pc-sound__bars i:nth-child(4) { animation-delay: -.05s; }

@keyframes pc-eq {
	from { height: 4px; }
	to { height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.pc-sound.is-on .pc-sound__bars i { animation: none; height: 10px; }
}

/* ---------- Окрема сторінка ---------- */
.pc-page {
	padding-block: clamp(120px, 14vw, 200px) clamp(60px, 8vw, 110px);
}

.pc-page .pc-shell { max-width: 820px; }

.pc-page__head {
	margin-bottom: clamp(28px, 4vw, 48px);
	padding-bottom: clamp(20px, 2.6vw, 32px);
	border-bottom: 1px solid var(--pc-line);
}

.pc-page__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pc-silver-dim);
	text-decoration: none;
	transition: color .3s;
}

.pc-page__back:hover { color: var(--pc-silver); }
.pc-page__back svg { transform: rotate(-135deg); }

.pc-page__meta {
	margin-top: 14px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pc-silver-dim);
}

.pc-page__body {
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.75;
	color: var(--pc-text-dim);
}

.pc-page__body > * + * { margin-top: 1.1em; }

.pc-page__body h2 {
	margin-top: 2.2em;
	font-family: var(--pc-font-display);
	font-weight: 300;
	font-size: clamp(19px, 1.9vw, 26px);
	line-height: 1.25;
	color: var(--pc-text);
}

.pc-page__body h3 {
	margin-top: 1.8em;
	font-size: clamp(16px, 1.3vw, 19px);
	color: var(--pc-text);
}

.pc-page__body ul,
.pc-page__body ol { padding-left: 1.3em; }
.pc-page__body li + li { margin-top: .5em; }
.pc-page__body strong { color: var(--pc-text); font-weight: 600; }

.pc-page__body a {
	color: var(--pc-silver);
	text-decoration: none;
	border-bottom: 1px solid var(--pc-silver-deep);
	transition: color .3s, border-color .3s;
}

.pc-page__body a:hover { color: #fff; border-color: currentColor; }

.pc-page__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: .94em;
}

.pc-page__body th,
.pc-page__body td {
	padding: 10px 12px;
	text-align: left;
	border: 1px solid var(--pc-line);
	vertical-align: top;
}

.pc-page__body th { color: var(--pc-text); font-weight: 600; }

/* ---------- Швидкий доступ ---------- */
.pc-quick {
	/* Повільніше, ніж звична поява: кнопки мають танути, а не блимати. */
	transition: opacity .5s var(--pc-ease), transform .5s var(--pc-ease);
	position: fixed;
	z-index: 80;
	left: clamp(14px, 2vw, 26px);
	bottom: clamp(14px, 2vw, 26px);
	display: grid;
	gap: 8px;
	/* Кнопка звуку живе праворуч — цим лишаємо лівий бік. */
}

.pc-quick.is-off {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}

.pc-quick__btn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--pc-line);
	background: rgba(14, 15, 16, .86);
	color: var(--pc-silver);
	transition: border-color .3s, background .3s, color .3s, transform .3s var(--pc-ease);
}

.pc-quick__btn:hover {
	border-color: var(--pc-silver);
	color: var(--pc-text);
	transform: translateY(-2px);
}

/* Запис — головна дія, тож вона єдина світиться. */
.pc-quick__btn--book {
	background: var(--pc-metal);
	border-color: transparent;
	color: #08090a;
}

.pc-quick__btn--book:hover { color: #08090a; }

/* Поки меню відкрите, кнопки не мають лізти поверх нього. */
body.is-locked .pc-quick { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.pc-quick__btn { transition: none; }
}