/* ChistoMaster Services — фирменный визуальный язык: "показания прибора".
   v2: исправлен контраст по WCAG (4.5:1 для обычного текста, 3:1 для крупного/UI),
   добавлены градиентные фоны. Все коэффициенты контраста проверены расчётом
   (формула относительной яркости из WCAG 2.1), не на глаз.

   ВАЖНО про teal: один оттенок физически не может одновременно проходить
   норму и как текст на тёмном фоне, и как фон под белый текст / текст на
   светлом фоне — поэтому два токена вместо одного:
   --cms-teal-bright (для текста на тёмном) и --cms-teal-deep (для фона/текста на светлом). */

:root {
	--cms-ink: #12181F;
	--cms-ink-soft: #232B36;
	--cms-ink-deep: #0B0F14;
	--cms-concrete: #ECE9E1;
	--cms-concrete-dark: #DAD5C8;
	--cms-amber: #E8A33D;
	--cms-teal-bright: #4FB6A1;
	--cms-teal-deep: #2E6A5E;
	--cms-text: #1C1F24;
	--cms-muted: #6B6F76;
	--cms-border: #D8D3C8;
	--cms-bg-soft: #F7F5EF;
	--cms-radius: 4px;
	--cms-font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
	--cms-font-body: 'IBM Plex Sans', Arial, sans-serif;
	--cms-font-mono: 'Space Grotesk', 'Courier New', monospace;

	--cms-grad-dark: linear-gradient(135deg, var(--cms-ink) 0%, var(--cms-ink-soft) 100%);
	--cms-grad-teal: linear-gradient(135deg, var(--cms-teal-deep) 0%, #1F4A40 100%);
	--cms-grad-light: linear-gradient(180deg, var(--cms-bg-soft) 0%, var(--cms-concrete) 100%);
}

.cms-service-page,
.cms-silo-page { font-family: var(--cms-font-body); }
.cms-service__header h1,
.cms-silo__header h1,
.cms-service__price h2,
.cms-service__faq h2,
.cms-service__related h2,
.cms-service__cta-final h2 { font-family: var(--cms-font-display); letter-spacing: -0.01em; }

.cms-breadcrumbs { font-size: 14px; color: var(--cms-muted); margin-bottom: 20px; }
.cms-breadcrumbs a { color: var(--cms-teal-deep); text-decoration: none; }
.cms-breadcrumbs a:hover { text-decoration: underline; }

.cms-service__header h1 {
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 600;
	line-height: 1.15;
	margin-bottom: 16px;
	color: var(--cms-ink);
}

.cms-service__image img { width: 100%; height: auto; border-radius: var(--cms-radius); margin-bottom: 24px; }
.cms-service__content { font-size: 17px; line-height: 1.7; color: var(--cms-text); margin-bottom: 32px; }

.cms-service__price {
	background: var(--cms-grad-dark);
	color: var(--cms-concrete);
	border-radius: var(--cms-radius);
	padding: 32px 28px;
	margin: 32px 0;
	text-align: center;
	position: relative;
}
.cms-service__price h2 { color: var(--cms-concrete); }
.cms-price-badge {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--cms-font-mono);
	font-size: 34px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--cms-amber);
	padding: 14px 8px;
	margin: 16px 0;
	border-top: 2px solid var(--cms-amber);
	border-bottom: 2px solid var(--cms-amber);
}
.cms-price-badge::before, .cms-price-badge::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 18px;
	background: repeating-linear-gradient(to bottom, var(--cms-amber) 0 2px, transparent 2px 6px);
}
.cms-price-note { color: var(--cms-concrete-dark); font-size: 14px; margin-bottom: 20px; opacity: .95; }
.cms-service__price .cms-lead-form input { color: var(--cms-ink); }

.cms-service__faq { margin: 40px 0; }
.cms-faq-accordion { border-top: 1px solid var(--cms-border); }
.cms-faq-item { border-bottom: 1px solid var(--cms-border); }
.cms-faq-question {
	width: 100%; text-align: left; background: none; border: none; padding: 18px 4px;
	font-size: 16px; font-weight: 600; color: var(--cms-text); cursor: pointer;
	display: flex; justify-content: space-between; align-items: center;
}
.cms-faq-icon { font-size: 22px; color: var(--cms-teal-deep); transition: transform .2s ease; }
.cms-faq-item.is-open .cms-faq-icon { transform: rotate(45deg); }
.cms-faq-answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; padding: 0 4px; color: var(--cms-muted); }
.cms-faq-item.is-open .cms-faq-answer { max-height: 400px; padding-bottom: 18px; }

.cms-service__related { margin: 32px 0; }
.cms-related-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cms-related-list li a {
	display: inline-block; padding: 8px 16px; background: var(--cms-bg-soft);
	border: 1px solid var(--cms-border); border-radius: 999px; color: var(--cms-ink);
	text-decoration: none; font-size: 14px;
}
.cms-related-list li a:hover { background: var(--cms-ink); color: #fff; }

.cms-service__cta-final {
	background: var(--cms-grad-teal);
	color: #fff; border-radius: var(--cms-radius); padding: 36px 28px; text-align: center; margin: 40px 0;
}
.cms-service__cta-final h2 { color: #fff; }
.cms-lead-form { max-width: 480px; margin: 0 auto; }
.cms-lead-form__row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cms-lead-form input[type="text"], .cms-lead-form input[type="tel"] {
	flex: 1 1 auto; padding: 12px 14px; border-radius: var(--cms-radius); border: none;
	font-size: 15px; font-family: var(--cms-font-body);
}
.cms-lead-form__submit {
	width: 100%; background: var(--cms-amber); color: var(--cms-ink); border: none; padding: 14px;
	font-size: 16px; font-weight: 700; border-radius: var(--cms-radius); cursor: pointer;
	font-family: var(--cms-font-display);
}
.cms-lead-form__submit:hover { opacity: .9; }
.cms-lead-form__consent { font-size: 12px; opacity: .95; margin-top: 10px; }

.cms-silo__header h1 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 12px; }
.cms-silo__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin: 30px 0; }
.cms-silo__card {
	display: block; border: 1px solid var(--cms-border); border-radius: var(--cms-radius); overflow: hidden;
	text-decoration: none; color: var(--cms-text); background: var(--cms-grad-light);
	transition: box-shadow .2s ease, transform .2s ease;
}
.cms-silo__card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.cms-silo__card-image img { width: 100%; height: 160px; object-fit: cover; }
.cms-silo__card h3 { font-family: var(--cms-font-display); font-size: 16px; margin: 14px 14px 6px; }
.cms-silo__card-price { display: block; margin: 0 14px 14px; color: var(--cms-teal-deep); font-weight: 700; font-family: var(--cms-font-mono); }

.cms-faq-question:focus-visible, .cms-lead-form__submit:focus-visible,
.cms-related-list a:focus-visible, .cms-silo__card:focus-visible {
	outline: 3px solid var(--cms-amber); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cms-faq-icon, .cms-faq-answer, .cms-silo__card { transition: none; }
}

@media (max-width: 600px) {
	.cms-price-badge { font-size: 24px; padding: 10px 6px; gap: 10px; }
	.cms-lead-form__row { flex-direction: column; }
}