/*
Theme Name: A-Cleaning
Theme URI: https://a-cleaning.com.ua/
Author: WebLift
Author URI: https://web-lift.com/
Description: Легка тема для клінінгової компанії A-Cleaning. Чистий PHP, нуль JavaScript-залежностей, дизайн-система в одному файлі.
Version: 4.5.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: a-cleaning
*/

/* ---------- базовий reset ----------
   Без box-sizing:border-box .acl-wrap з width:100% + padding 24px давав 438px
   на 390-піксельному екрані й ламав сторінку горизонтальним скролом. */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; }

img,
video,
svg { max-width: 100%; height: auto; }

img { display: block; }

button { font: inherit; }

table { border-collapse: collapse; }

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/manrope-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/manrope-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/manrope-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/manrope-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   A-CLEANING — дизайн за референсом Pool X.
   Усі значення зняті з рендеру референсу на 1440px, не на око:
   контейнер 1286, секції 200px, H1 72/80, H2 48/60, текст 18/27,
   кнопки радіус 12 і падінг 26/38, цифри статистики 90/700,
   бейдж кроку — коло 83px.
   ============================================================ */

:root {
	/* палітра */
	/* 31.08.2026: #326bff давав рівно 4,48:1 з білим — на 0,02 менше
	   за поріг 4,5:1 для тексту < 24px. Зачіпало кнопки, ціни в таблицях,
	   пункти меню. #2e66f0 дає 4,91:1 і візуально не відрізняється. */
	--ac-accent: #2e66f0;
	--ac-accent-dark: #1b47bd;
	--ac-dark: #0e1323;
	--ac-text: #0e1323;
	--ac-muted: #626d7a;
	--ac-light: #f4f8ff;
	--ac-line: #e9f2fd;
	--ac-border: #cbdcec;
	--ac-white: #ffffff;
	--ac-star: #ffc700;
	--ac-success: #63de77;

	/* типографіка */
	--ac-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--fs-h1: 72px;
	--lh-h1: 1.115;
	--fs-h2: 48px;
	--lh-h2: 1.25;
	--fs-h3: 24px;
	--fs-h4: 20px;
	--fs-body: 18px;
	--lh-body: 1.5;
	--fs-small: 16px;
	--fs-stat: 90px;

	/* сітка */
	--container: 1286px;
	--section-pad: 200px;
	--gutter: 24px;

	/* форма */
	--r-btn: 12px;
	--r-card: 16px;
	--r-img: 16px;

	--ease: cubic-bezier(.2, .7, .3, 1);
	--fast: .18s;
	--slow: .34s;
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }

body {
	margin: 0;
	font-family: var(--ac-font);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--ac-muted);
	background: var(--ac-white);
	-webkit-tap-highlight-color: transparent;
}

img, video, svg { max-width: 100%; height: auto; }
img { display: block; }
button { font: inherit; }
table { border-collapse: collapse; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--ac-text);
	font-weight: 700;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.35; }
h4 { font-size: var(--fs-h4); line-height: 1.4; }

p { margin: 0; text-wrap: pretty; }
a { color: var(--ac-accent); text-decoration: none; }

::selection { background: #2e66f026; color: var(--ac-dark); }

:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 3px; border-radius: 6px; }
.sec--blue :focus-visible, .touch :focus-visible, .cta-band :focus-visible { outline-color: #fff; }

/* ---------- каркас ---------- */
.wrap {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.sec { padding: var(--section-pad) 0; }
.sec--light { background: var(--ac-light); }
.sec--dark { background: var(--ac-dark); }
.sec--blue { background: var(--ac-accent); }
.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4 { color: #fff; }
.sec--dark p { color: #abb8c8; }
/* Синій фон дають три класи, не один: .sec--blue, .touch і .cta-band.
   Правила кольору мусять перелічувати всі три, інакше текст успадковує
   --ac-text (майже чорний) і --ac-muted (сіро-синій) і зникає на синьому. */
.sec--blue h1, .sec--blue h2, .sec--blue h3, .sec--blue h4,
.touch h1, .touch h2, .touch h3, .touch h4,
.cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4 { color: #fff; }

/* Тіло тексту — чистий білий, без прозорості: 18px це не «великий текст»
   за WCAG, тож #ffffffd9 на #326bff давав близько 3,6:1 і не проходив. */
.sec--blue p, .touch p, .cta-band p { color: #fff; }

/* Посилання, що не кнопки: інакше беруть --ac-accent, тобто синє на синьому. */
.sec--blue a:not(.btn), .touch a:not(.btn), .cta-band a:not(.btn) {
	color: #fff; text-decoration: underline; text-underline-offset: 3px;
}

/* акцентне слово в заголовку — підпис референсу */
.hl { color: var(--ac-accent); }
.sec--dark .hl { color: var(--ac-accent); }

.eyebrow {
	display: block;
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	/* Не --ac-accent: #326bff на білому дає 4,48:1, на --ac-light 4,21:1,
	   а надзаголовок це 16px, тобто поріг 4,5:1. Темніший тон дає 7,8 і 7,4. */
	color: var(--ac-accent-dark);
	margin-bottom: 20px;
}

/* На темній секції той самий синій дає 4,12:1 — там потрібен світлий тон (8,6:1). */
.sec--dark .eyebrow { color: #8fb0ff; }

.sec--blue .eyebrow, .touch .eyebrow, .cta-band .eyebrow { color: #fff; }

.head {
	max-width: 720px;
	margin: 0 auto 72px;
	text-align: center;
}

.head p { margin-top: 24px; font-size: var(--fs-body); }

.lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ac-muted); }
.sec--dark .lead { color: #abb8c8; }

/* ---------- кнопки ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 26px 38px;
	border-radius: var(--r-btn);
	border: 1px solid transparent;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
		border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--ac-accent); border-color: var(--ac-accent); color: #fff; }
.btn--primary:hover { background: var(--ac-accent-dark); border-color: var(--ac-accent-dark); color: #fff; }

.btn--outline { background: transparent; border-color: var(--ac-text); color: var(--ac-text); font-weight: 500; }
.btn--outline:hover { background: var(--ac-text); color: #fff; }

.btn--outline-light { background: transparent; border-color: #fff; color: #fff; font-weight: 500; }
.btn--outline-light:hover { background: #fff; color: var(--ac-text); }

.btn--white { background: #fff; border-color: #fff; color: var(--ac-text); }
.btn--white:hover { background: var(--ac-light); }

.btn--sm { padding: 16px 24px; font-size: var(--fs-small); }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-row--center { justify-content: center; }

/* ---------- topbar ---------- */
.topbar {
	background: var(--ac-light);
	padding: 20px 0;
	font-size: var(--fs-small);
}

.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topbar__contacts { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.topbar__contacts a { color: var(--ac-text); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; }
.topbar__contacts a:hover { color: var(--ac-accent); }
.topbar__contacts svg { color: var(--ac-accent); flex: none; }
.topbar__sep { width: 1px; height: 20px; background: var(--ac-border); }
.topbar__social { display: flex; align-items: center; gap: 18px; }
.topbar__social a { color: var(--ac-accent); display: inline-flex; }
.topbar__social a:hover { color: var(--ac-accent-dark); }

/* ---------- шапка ---------- */
.header {
	background: #fff;
	border-bottom: 1px solid var(--ac-line);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow var(--slow) var(--ease);
}
.header.is-stuck { box-shadow: 0 8px 24px #19213d14; }

.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 100px; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ac-text); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.brand:hover { color: var(--ac-text); }
.brand__mark { width: 44px; height: 44px; flex: none; }

.nav { display: flex; align-items: center; gap: 40px; }
.nav__list { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav__list a { color: var(--ac-text); font-size: var(--fs-small); font-weight: 500; position: relative; padding-block: 4px; }
.nav__list a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
	background: var(--ac-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--slow) var(--ease);
}
.nav__list a:hover::after, .nav__list .current-menu-item > a::after { transform: scaleX(1); }
.nav__list a:hover, .nav__list .current-menu-item > a { color: var(--ac-accent); }

.burger { display: none; flex-direction: column; gap: 5px; width: 48px; height: 48px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--ac-border); border-radius: var(--r-btn); cursor: pointer; }
.burger span { display: block; width: 20px; height: 2px; background: var(--ac-text); transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { padding: 0; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; min-height: 810px; }
.hero__text { padding: 90px 0; }
.hero h1 { margin-bottom: 28px; }
.hero .lead { max-width: 34ch; margin-bottom: 44px; }
.hero__media { align-self: stretch; display: flex; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-img); }

/* ---------- статистика ---------- */
.stats { padding: 90px 0; background: var(--ac-light); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat { text-align: center; }
.stat__num { display: block; font-size: var(--fs-stat); font-weight: 700; line-height: 1; color: var(--ac-text); margin-bottom: 12px; }
.stat__label { font-size: var(--fs-body); color: var(--ac-muted); }

/* ---------- сітки ---------- */
.grid { display: grid; gap: 32px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- картка з іконкою ---------- */
.card {
	background: #fff;
	border: 1px solid var(--ac-line);
	border-radius: var(--r-card);
	padding: 40px;
	transition: box-shadow var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.card:hover { box-shadow: 0 18px 48px #19213d14; transform: translateY(-4px); }
.card__icon {
	width: 72px; height: 72px; border-radius: 50%;
	background: var(--ac-light); color: var(--ac-accent);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 28px;
	transition: background-color var(--slow) var(--ease);
}
.card:hover .card__icon { background: #dbe7ff; }
.card h3 { margin-bottom: 14px; }
.card p { font-size: var(--fs-small); }

/* ---------- split: текст + фото ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.split__media img { width: 100%; border-radius: var(--r-img); }

.checks { list-style: none; margin: 40px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.checks li { position: relative; padding-left: 36px; font-size: var(--fs-small); color: inherit; }
.checks li::before {
	content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--ac-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 14px; background-repeat: no-repeat; background-position: center;
}
.sec--dark .checks li { color: #dbe3f0; }

/* ---------- послуги ---------- */
.service {
	background: #fff;
	border: 1px solid var(--ac-line);
	border-radius: var(--r-card);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: box-shadow var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.service:hover { box-shadow: 0 18px 48px #19213d14; transform: translateY(-4px); }
.service__icon { width: 64px; height: 64px; color: var(--ac-accent); margin-bottom: 12px; }
.service h3 { margin: 0; }
.service p { font-size: var(--fs-small); flex: 1; }
.service__price { font-weight: 700; color: var(--ac-accent); font-size: var(--fs-body); }
.service__link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 700; color: var(--ac-text); }
.service__link::after { content: "\2192"; color: var(--ac-accent); transition: transform var(--slow) var(--ease); }
.service:hover .service__link::after { transform: translateX(5px); }

/* ---------- блакитна смуга з фото ---------- */
.touch { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--ac-accent); }
.touch__text { padding: 140px 0; }
.touch__inner { max-width: calc(var(--container) / 2); margin-left: auto; padding: 0 60px 0 var(--gutter); }
.touch__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- кроки ---------- */
.step {
	background: #fff;
	border: 1px solid var(--ac-line);
	border-radius: var(--r-card);
	padding: 48px 40px;
	text-align: center;
	transition: box-shadow var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.step:hover { box-shadow: 0 18px 48px #19213d14; transform: translateY(-4px); }
.step__num {
	width: 83px; height: 83px; border-radius: 100px; background: var(--ac-accent);
	color: #fff; font-size: 32px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 28px;
}
.step h3 { margin-bottom: 14px; }
.step p { font-size: var(--fs-small); }

/* ---------- прайс ---------- */
.price-wrap { overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--ac-line); background: #fff; }
.price { width: 100%; }
.price th, .price td { padding: 22px 28px; text-align: left; border-bottom: 1px solid var(--ac-line); font-size: var(--fs-small); }
.price thead th { background: var(--ac-light); font-weight: 700; color: var(--ac-text); white-space: nowrap; }
.price tbody tr:last-child td { border-bottom: 0; }
.price tbody tr { transition: background-color var(--fast) var(--ease); }
.price tbody tr:hover { background: var(--ac-light); }
.price td:first-child { font-weight: 700; color: var(--ac-text); }
.price .val { color: var(--ac-accent); font-weight: 700; white-space: nowrap; }
.price-note { margin-top: 24px; font-size: var(--fs-small); }

/* ---------- відгуки ---------- */
.reviews { display: grid; grid-template-columns: 380px 1fr; gap: 60px; align-items: start; }
.review {
	background: #fff; border: 1px solid var(--ac-line); border-radius: var(--r-card);
	padding: 40px; display: flex; flex-direction: column; gap: 20px;
	transition: box-shadow var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.review:hover { box-shadow: 0 18px 48px #19213d14; transform: translateY(-4px); }
.review__stars { color: var(--ac-star); letter-spacing: 3px; }
.review p { font-size: var(--fs-small); }
.review__person { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.review__avatar {
	width: 48px; height: 48px; border-radius: 50%; flex: none;
	background: var(--ac-accent); color: #fff; font-weight: 700;
	display: flex; align-items: center; justify-content: center; font-size: var(--fs-body);
}
.review__name { font-weight: 700; color: var(--ac-text); font-size: var(--fs-small); }
.review__role { font-size: 14px; color: var(--ac-muted); }

/* ---------- райони ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pills a {
	padding: 16px 28px; border-radius: var(--r-btn); background: #fff;
	border: 1px solid var(--ac-line); color: var(--ac-text); font-weight: 700; font-size: var(--fs-small);
	transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.pills a:hover { background: var(--ac-accent); border-color: var(--ac-accent); color: #fff; transform: translateY(-2px); }

/* ---------- фінальна блакитна смуга ---------- */
.cta-band { background: var(--ac-accent); padding: 88px 0; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band h2 { max-width: 18ch; }

/* ---------- підвал ---------- */
.footer { background: var(--ac-dark); color: #abb8c8; padding: 100px 0 40px; }
.footer a { color: #fff; }
.footer a:hover { color: var(--ac-accent); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid #ffffff1a; }
.footer h2 { color: #fff; margin-bottom: 28px; font-size: var(--fs-h4); font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: var(--fs-small); }
.footer ul a { display: inline-block; transition: transform var(--fast) var(--ease); }
.footer ul a:hover { transform: translateX(3px); }
.footer p { font-size: var(--fs-small); margin-bottom: 28px; max-width: 40ch; }
.footer__brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: 26px; font-weight: 700; margin-bottom: 24px; }
.footer__contact li { display: flex; gap: 14px; align-items: flex-start; }
.footer__contact svg { color: var(--ac-accent); flex: none; margin-top: 3px; }
.footer__bottom { padding-top: 32px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; }

/* ---------- сторінки послуг ---------- */
.hero--svc .hero__grid { min-height: 0; }
.hero--svc .hero__text { padding: 40px 0 90px; }
.hero--svc .lead { max-width: 46ch; margin-bottom: 32px; }

.crumbs { padding: 28px 0 0; font-size: 14px; color: var(--ac-muted); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a { color: var(--ac-muted); }
.crumbs a:hover { color: var(--ac-accent); }
.crumbs span[aria-hidden] { color: var(--ac-border); }

.facts { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 14px; }
.facts li { position: relative; padding-left: 36px; font-size: var(--fs-small); }
.facts li::before {
	content: ""; position: absolute; left: 0; top: 7px; width: 20px; height: 20px;
	border-radius: 50%; background: var(--ac-accent);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 20px no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.facts strong { color: var(--ac-text); }

.grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ---------- FAQ: акордеон без жодного рядка JS ---------- */
.faq { max-width: 900px; margin: 0 auto; display: grid; gap: 16px; }
.faq__item {
	background: #fff; border: 1px solid var(--ac-line); border-radius: var(--r-card);
	padding: 4px 32px; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.faq__item[open] { border-color: var(--ac-border); box-shadow: 0 18px 48px #19213d0f; }
.faq__item summary {
	list-style: none; cursor: pointer; padding: 24px 44px 24px 0; position: relative;
	font-size: var(--fs-h4); font-weight: 700; color: var(--ac-text); line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
	content: ""; position: absolute; right: 0; top: 50%; width: 14px; height: 14px;
	margin-top: -7px; border-right: 2px solid var(--ac-accent); border-bottom: 2px solid var(--ac-accent);
	transform: rotate(45deg) translateY(-25%); transition: transform var(--fast) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq__item summary:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 4px; border-radius: 4px; }
.faq__body { padding-bottom: 26px; }
.faq__body p { margin: 0; font-size: var(--fs-small); }

/* ---------- контент звичайних сторінок ---------- */
.content { max-width: 800px; margin: 0 auto; }
.content h2 { margin: 48px 0 20px; }
.content h3 { margin: 36px 0 16px; }
.content p, .content li { margin-bottom: 16px; }
.content ul, .content ol { padding-left: 22px; }
.content a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- форма заявки ----------
   Єдиний канал звернення на сайті: телефон ніде не публікуємо. */
.sec--form { background: var(--ac-accent); padding: 130px 0; }
.sec--form .eyebrow { color: #fff; }
.sec--form h2 { color: #fff; }
/* Акцентне слово на синьому: 28px bold — «великий текст», поріг 3:1.
   #b9ccff давав 2,81:1, #d6e2ff дає 3,46:1 і зберігає відтінок. */
.sec--form .hl { color: #d6e2ff; }
.sec--form .lead { color: #fff; margin-top: 24px; }

.form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.form-split__text .checks { margin: 40px 0 32px; }
.form-split__text .checks li { color: #fff; }
.form-split__text .checks li::before { background-color: #ffffff2e; }
.form-split__mail { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); color: #fff; }
.form-split__mail svg { flex: none; }
.form-split__mail a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.form {
	background: #fff; border-radius: var(--r-card); padding: 40px;
	display: grid; gap: 20px; box-shadow: 0 24px 60px #0e132326;
}

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.form__field { display: grid; gap: 10px; }
.form__field > span { font-size: 14px; font-weight: 700; color: var(--ac-text); }
.form__field b { color: var(--ac-accent); font-weight: 700; }

.form input,
.form select,
.form textarea {
	width: 100%; padding: 18px 20px; font: inherit; font-size: var(--fs-small);
	color: var(--ac-text); background: var(--ac-light);
	border: 1px solid var(--ac-line); border-radius: var(--r-btn);
	transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.form input::placeholder,
.form textarea::placeholder { color: #9aa6b4; }
.form input:focus,
.form select:focus,
.form textarea:focus { outline: none; border-color: var(--ac-accent); background: #fff; }
.form textarea { resize: vertical; min-height: 96px; }
.form select { appearance: none; cursor: pointer; padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626d7a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 18px center; background-size: 18px;
}

.form__submit { width: 100%; margin-top: 4px; }
.form__note { font-size: 13px; color: var(--ac-muted); line-height: 1.5; }

/* Пастка для ботів: прибрана з потоку, але не display:none — частина ботів
   вміє це читати й такі поля пропускає. */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__notice { padding: 16px 20px; border-radius: var(--r-btn); font-size: var(--fs-small); font-weight: 500; }
.form__notice--ok { background: #e8f9ec; color: #1c7a33; border: 1px solid #63de7755; }
.form__notice--err { background: #fdecec; color: #a32424; border: 1px solid #a3242433; }

/* ---------- анімації ----------
   Приховуємо блоки одразу в CSS під класом .js (його ставить скрипт у <head>),
   а не класом, який навішує JS після завантаження: інакше контент спершу
   блимне, а потім зникне. Якщо IntersectionObserver недоступний, скрипт у
   підвалі знімає .js — і сторінка просто лишається статичною. */
.js .head,
.js .card,
.js .step,
.js .service,
.js .review,
.js .faq__item,
.js .price-wrap,
.js .price-note,
.js .stat,
.js .pills,
.js .split > *,
.js .reviews > *,
.js .touch__inner,
.js .form-split > * {
	opacity: 0;
	transform: translateY(20px);
	will-change: opacity, transform;
}

.js .is-in {
	opacity: 1;
	transform: none;
	transition: opacity .55s var(--ease), transform .55s var(--ease);
	will-change: auto;
}

/* Сходинка всередині сітки: сусідні картки виїжджають одна за одною. */
.js .grid > *:nth-child(2),
.js .stats__grid > *:nth-child(2) { transition-delay: .08s; }
.js .grid > *:nth-child(3),
.js .stats__grid > *:nth-child(3) { transition-delay: .16s; }
.js .grid > *:nth-child(4),
.js .stats__grid > *:nth-child(4) { transition-delay: .24s; }
.js .grid > *:nth-child(5) { transition-delay: .32s; }
.js .grid > *:nth-child(6) { transition-delay: .4s; }
.js .faq__item:nth-child(2) { transition-delay: .05s; }
.js .faq__item:nth-child(3) { transition-delay: .1s; }
.js .faq__item:nth-child(4) { transition-delay: .15s; }

/* Hero не чекає скролу — він і так у полі зору, тому просто вʼїжджає. */
@keyframes acl-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

@keyframes acl-zoom {
	from { opacity: 0; transform: scale(1.04); }
	to   { opacity: 1; transform: none; }
}

.js .hero__text > * { animation: acl-rise .6s var(--ease) both; }
.js .hero__text > *:nth-child(2) { animation-delay: .07s; }
.js .hero__text > *:nth-child(3) { animation-delay: .14s; }
.js .hero__text > *:nth-child(4) { animation-delay: .21s; }
.js .hero__text > *:nth-child(5) { animation-delay: .28s; }
.js .hero__media { animation: acl-zoom .8s var(--ease) both; animation-delay: .1s; overflow: hidden; border-radius: var(--r-img); }
.js .crumbs { animation: acl-rise .5s var(--ease) both; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 0; top: 0; background: var(--ac-accent); color: #fff; padding: 14px 22px; z-index: 200; }

/* ---------- адаптив ---------- */
@media (max-width: 1200px) {
	:root { --fs-h1: 56px; --fs-h2: 40px; --fs-stat: 68px; --section-pad: 120px; }
	.hero__grid { gap: 48px; min-height: 0; }
	.split { gap: 56px; }
	.footer__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}

@media (max-width: 1024px) {
	.nav {
		position: absolute; top: 100%; left: 0; right: 0; background: #fff;
		border-bottom: 1px solid var(--ac-line); flex-direction: column; align-items: stretch;
		gap: 24px; padding: 28px var(--gutter) 32px; display: none;
	}
	.nav.is-open { display: flex; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 20px; }
	.burger { display: flex; }
	.header__cta { width: 100%; }
	.hero__grid, .split, .touch, .reviews, .form-split { grid-template-columns: 1fr; }
	.form-split { gap: 48px; }
	.sec--form { padding: 90px 0; }
	.hero__text { padding: 64px 0 0; }
	.hero--svc .hero__text { padding: 32px 0 56px; }
	.stats__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
	.grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr 1fr; }
	.touch__inner { max-width: none; margin: 0; padding: 0 var(--gutter); }
	.touch__text { padding: 90px 0; }
	.touch__media { order: -1; }
	.touch__media img { max-height: 420px; }
	.reviews { gap: 40px; }
}

@media (max-width: 767px) {
	:root { --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 20px; --fs-body: 16px; --fs-stat: 48px; --section-pad: 72px; }
	.head { margin-bottom: 40px; }
	.grid, .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; gap: 20px; }
	.faq__item { padding: 0 20px; }
	.faq__item summary { font-size: var(--fs-body); padding: 20px 36px 20px 0; }
	.checks { grid-template-columns: 1fr; }
	.btn { padding: 20px 28px; width: 100%; }
	.btn--sm { width: auto; }
	.card, .service, .step, .review { padding: 28px 24px; }
	.stats { padding: 56px 0; }
	.stats__grid { gap: 28px; }
	.topbar__inner { justify-content: center; }
	.topbar__contacts { gap: 14px; justify-content: center; }
	.topbar__sep, .topbar__social { display: none; }
	.footer__grid { grid-template-columns: 1fr; gap: 40px; }
	.cta-band__inner { flex-direction: column; align-items: flex-start; }
	.form { padding: 24px 20px; }
	.form__row { grid-template-columns: 1fr; }
	.price th, .price td { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.card:hover, .service:hover, .step:hover, .review:hover, .pills a:hover, .btn:active { transform: none; }

	/* Хто вимкнув анімації — бачить готову сторінку, а не порожні блоки. */
	.js .head, .js .card, .js .step, .js .service, .js .review, .js .faq__item,
	.js .price-wrap, .js .price-note, .js .stat, .js .pills, .js .split > *,
	.js .reviews > *, .js .touch__inner, .js .form-split > *,
	.js .hero__text > *, .js .hero__media, .js .crumbs {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition-delay: 0s !important;
	}
}