/* Главная страница: editorial-сетка (docs/ux-guidelines.md —
   крупная типографика, большие изображения, много воздуха).
   Стиль v2: базовый светлый фон, тёмные секции — статичные острова
   (класс sc-section--tint красит себя сам, см. style.css). */

/* ---------- Секции ---------- */
.sc-section { padding: 56px 0; }

/* Утилиты секций и отступов (inline-стили запрещены, docs/patterns.md) */
.sc-section--intro { padding-bottom: 0; }
.sc-section--tight { padding-top: 32px; }
.sc-section--flush { padding-top: 0; }
.sc-section--bleed { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.sc-h2-gap { margin-top: 40px; }
.sc-mt { margin-top: 24px; }
.sc-mt-sm { margin-top: 14px; }
.sc-center { text-align: center; }
.sc-lead-center { text-align: center; max-width: var(--content); margin: 0 auto 24px; }
.sc-back { color: inherit; text-decoration: none; }
.sc-img-rounded { border-radius: var(--radius); }
/* Надзаголовок секции — янтарный штрих (микродеталь) */
.sc-section__label {
	color: var(--c-accent); font-weight: 700; font-size: 14px;
	text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 8px;
}
.sc-section h2 { margin: 0 0 24px; } /* размер/капс — из style.css (Unbounded) */
.sc-section__lead { font-size: 19px; max-width: var(--content); }

/* ---------- Hero ---------- */
.sc-hero { padding: 64px 0 56px; }
.sc-hero h1 { max-width: 20ch; margin: 0 0 20px; } /* капс-манифест из style.css */
.sc-hero__facts {
	color: var(--c-muted); font-size: 18px; margin: 0 0 28px;
	max-width: var(--content);
}
.sc-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.sc-hero__cta .sc-btn { font-size: 18px; padding: 15px 26px; }

/* ---------- Сетки карточек ---------- */
.sc-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.sc-card {
	border: 1px solid var(--c-border); border-radius: var(--radius);
	padding: 22px;
}
.sc-card h3 { margin: 0 0 10px; }
.sc-card ul { margin: 0 0 12px; padding-left: 20px; }
.sc-card li { margin-bottom: 6px; }
.sc-card__answer { font-weight: 600; margin: 0; }

.sc-benefit h3 { font-size: 18px; margin: 0 0 6px; }
.sc-benefit p { margin: 0; color: var(--c-muted); font-size: 15px; }

/* ---------- Таблица сравнения альтернатив ---------- */
.sc-table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.sc-alt-table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 15px; }
.sc-alt-table th, .sc-alt-table td {
	border: 1px solid var(--c-border); padding: 10px 12px;
	text-align: left; vertical-align: top;
}
.sc-alt-table thead th { font-weight: 700; border-bottom-width: 2px; }
.sc-alt-table .is-us { background: var(--c-warn-bg); font-weight: 600; }
.sc-alt-note { color: var(--c-muted); font-size: 15px; max-width: var(--content); }

/* ---------- Карточки работ (Porsche: подпись на фото, hover-зум) ---------- */
.sc-works { gap: 24px; }
.sc-work-card { text-decoration: none; color: var(--c-text); display: block; }
.sc-work-card__img {
	position: relative; aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg); overflow: hidden;
	border: 1px solid var(--c-border);
	display: flex; align-items: center; justify-content: center;
	color: var(--c-muted); font-size: 14px;
}
/* Фото + hover-зум (плавный, как у Porsche) */
.sc-work-card__photo {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.sc-work-card:hover .sc-work-card__photo,
.sc-work-card:focus-visible .sc-work-card__photo { transform: scale(1.045); }
/* Вуаль снизу — чтобы белая подпись читалась на любом рендере */
.sc-work-card__img::after {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(15, 12, 9, .62), transparent 45%);
}
.sc-work-card__ph { position: relative; z-index: 0; }
.sc-work-card__cap {
	position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 2;
	color: #fff; font-weight: 600; font-size: clamp(17px, 2.2vw, 21px);
	line-height: 1.2;
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.sc-work-card:hover .sc-work-card__cap { transform: translateY(-4px); }
.sc-work-card__meta { padding: 10px 2px 0; font-size: 15px; color: var(--c-muted); }

/* Уважаем «уменьшить движение»: без зума и сдвига подписи */
@media (prefers-reduced-motion: reduce) {
	.sc-work-card__photo, .sc-work-card__cap { transition: none; }
	.sc-work-card:hover .sc-work-card__photo { transform: none; }
	.sc-work-card:hover .sc-work-card__cap { transform: none; }
}

/* ---------- Этапы процесса ---------- */
.sc-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.sc-steps li {
	counter-increment: step; position: relative;
	padding: 0 0 18px 56px; max-width: var(--content);
}
.sc-steps li::before {
	content: counter(step); position: absolute; left: 0; top: -2px;
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--btn-bg); color: var(--btn-text);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
}
.sc-steps b { display: block; }
.sc-steps span { color: var(--c-muted); font-size: 15px; }

/* ---------- Чек-лист качества ---------- */
.sc-check { list-style: none; margin: 0; padding: 0; max-width: var(--content); }
.sc-check li { padding: 0 0 12px 34px; position: relative; font-size: 17px; }
.sc-check li::before {
	content: '✓'; position: absolute; left: 0; top: 0;
	color: var(--c-accent); font-weight: 800; font-size: 20px;
}

/* ---------- Портфолио: фильтр-чипы, мета работы, пагинация ---------- */
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.sc-chips a {
	border: 1px solid var(--c-border); border-radius: 999px;
	padding: 8px 16px; text-decoration: none;
	color: var(--c-text); font-size: 15px;
}
.sc-chips a.is-active {
	background: var(--btn-bg); color: var(--btn-text);
	border-color: var(--btn-bg);
}

.sc-work-meta { display: flex; gap: 28px; flex-wrap: wrap; color: var(--c-muted); font-size: 14px; }
.sc-work-meta b { display: block; color: var(--c-text); font-size: 19px; }

.navigation.pagination { margin: 32px 0 0; }
.navigation.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.navigation.pagination .page-numbers {
	border: 1px solid var(--c-border); border-radius: var(--radius);
	padding: 8px 14px; text-decoration: none; color: var(--c-text);
}
.navigation.pagination .page-numbers.current {
	background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg);
}

/* ---------- FAQ (нативный аккордеон details/summary) ---------- */
.sc-faq { max-width: var(--content); }
.sc-faq details {
	border: 1px solid var(--c-border); border-radius: var(--radius);
	margin-bottom: 10px; padding: 0 18px;
}
.sc-faq summary {
	font-weight: 600; font-size: 17px; cursor: pointer;
	padding: 14px 0; list-style-position: inside;
}
.sc-faq details[open] summary { border-bottom: 1px solid var(--c-border); }
.sc-faq details p { color: var(--c-muted); }

/* ---------- Финальный блок заявки ---------- */
.sc-cta-final { text-align: center; }
.sc-cta-final h2 { margin-bottom: 12px; }
.sc-cta-final p { max-width: var(--content); margin: 0 auto 24px; }
.sc-cta-final .sc-hero__cta { justify-content: center; }

/* ---------- Адаптив ---------- */
@media (min-width: 600px) {
	.sc-grid--2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
	.sc-section { padding: 88px 0; }
	.sc-hero { padding: 104px 0 88px; }
	.sc-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.sc-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.sc-works.sc-grid--2 { grid-template-columns: 1fr 1fr; } /* editorial: крупно, не плитка */
}