/*
 * Простые блоки: логотипы, шаги, преимущества, цифры, отзывы, про нас и видео.
 *
 * Один файл на всю группу — они делят одну грамматику секции и на странице
 * почти всегда стоят вместе. Тяжёлым блокам (витрины, категории, интерьер)
 * пойдут свои файлы: там стилей на порядок больше, и грузить их ради
 * страницы без этих блоков незачем.
 *
 * Всё под .uhl-home: имена классов из макета сохранены, чтобы сверка
 * с утверждённым видом оставалась механической.
 */

/* ================================================================ кнопка */

.uhl-home .ux-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 13px 22px;
	border-radius: 3px;
	/* Рамки нет — как в макете. Прозрачная рамка добавляла кнопке два
	   пикселя высоты; вариант с контуром объявляет свою рамку сам. */
	border: 0;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ux-dur-fast) var(--ux-ease), color var(--ux-dur-fast) var(--ux-ease);
}

.uhl-home .ux-btn--blue { background: var(--uxc-blue); color: #fff; }
.uhl-home .ux-btn--blue:hover { background: #17417f; color: #fff; }

/* =============================================================== логотипы */

.uhl-home .ux-trust { padding: 34px 0 26px; }

/* Лента идёт НЕ от края до края, а в тех же границах, что остальная
   страница: в макете она шириной с контейнер. Во всю ширину она читалась
   как отдельная полоса поверх страницы, а не как её часть. */
.uhl-home .ux-trust .ux-marq {
	max-width: var(--uxc-in);
	margin-left: auto;
	margin-right: auto;
}

.uhl-home .ux-marq {
	overflow: hidden;
	/* Края растворяются, а не обрезаются: обрезанный логотип читается
	   как ошибка вёрстки, растворённый — как продолжение ленты.

	   Полоса в clamp, а не в процентах. Процент считается от ширины ленты:
	   на телефоне 8% — это 30px, растворения не видно вовсе, а на 4K —
	   300px, и логотип пропадает целиком. Здесь 60-240px при любом экране
	   и любом числе логотипов.

	   8% раньше выглядели ровным обрывом ещё и потому, что логотипы сами
	   стоят на 42% прозрачности: градиенту было почти нечего гасить. */
	--uhl-fade: clamp(60px, 14%, 240px);

	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--uhl-fade), #000 calc(100% - var(--uhl-fade)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 var(--uhl-fade), #000 calc(100% - var(--uhl-fade)), transparent 100%);
}

/* Длительность здесь — только запасная: скрипт пересчитывает её от
   фактической длины дорожки, чтобы скорость не зависела ни от числа
   логотипов, ни от ширины экрана.

   will-change поднимает дорожку в свой слой. Без него браузер каждый кадр
   перерисовывает широкую полосу под маской краёв — это и давало рывки,
   тем заметнее, чем длиннее лента. */
.uhl-home .ux-marq__t {
	display: flex;
	width: max-content;
	animation: uhl-marq 42s linear infinite;
	will-change: transform;
}

.uhl-home .ux-marq__set { display: flex; align-items: center; gap: 46px; padding-right: 46px; }

.uhl-home .ux-marq:hover .ux-marq__t { animation-play-state: paused; }

@keyframes uhl-marq {
	from { transform: translate3d(0, 0, 0); }
	/* Ровно половина: вторая копия встаёт на место первой без рывка. */
	to   { transform: translate3d(-50%, 0, 0); }
}

.uhl-home .ux-logo img { display: block; height: 46px; width: auto; object-fit: contain; }

/* Обесцвечивание — по умолчанию: чужие фирменные цвета иначе спорят
   с палитрой страницы и перетягивают внимание на себя. */
.uhl-home .ux-marq.is-mono .ux-logo img {
	filter: grayscale(1);
	opacity: .62;
	transition: filter var(--ux-dur-base) var(--ux-ease), opacity var(--ux-dur-base) var(--ux-ease);
}

.uhl-home .ux-marq.is-mono .ux-logo img:hover { filter: none; opacity: 1; }

.uhl-home .ux-trust__h {
	margin: 18px 0 0;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--uxc-mut);
	letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
	.uhl-home .ux-marq__t { animation: none; }
	.uhl-home .ux-marq { overflow-x: auto; }
}

/* =================================================================== шаги */

/*
 * Колонок ровно столько, сколько шагов, и БЕЗ зазора между ними.
 *
 * Зазор разорвал бы линию-связку: она идёт от края колонки до края, и в
 * промежутке ей не на чем держаться. Воздух между шагами даёт внутренний
 * отступ самого шага.
 *
 * auto-flow вместо repeat(N): число шагов задаёт менеджер, а не вёрстка,
 * и auto-fit тут не годится — при четырёх шагах он оставлял пятую пустую
 * колонку, и ряд уезжал влево.
 */
.uhl-home .ux-steps {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0;
}

.uhl-home .ux-step {
	position: relative;
	text-align: center;
	padding: 0 16px;
}

/* Полка под иконку. Её фиксированная высота держит линию на одной прямой
   у всех шагов — иначе подпись разной длины перекашивала бы связку. */
.uhl-home .ux-step__rail {
	position: relative;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.uhl-home .ux-step__rail::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 2px;
	/* Своего токена у этой линии нет: она светлее любой рамки в палитре. */
	background: #e1e8f1;
	transform: translateY(-50%);
	z-index: 0;
}

/* У крайних шагов линия обрывается на середине: снаружи ряда ей вести некуда. */
.uhl-home .ux-step:first-child .ux-step__rail::before { left: 50%; }
.uhl-home .ux-step:last-child  .ux-step__rail::before { right: 50%; }

.uhl-home .ux-step__node {
	position: relative;
	z-index: 1;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	background: #fff;
	border: 1px solid #d8e1ee;
	border-radius: 3px;
	color: var(--uxc-blue);
	box-shadow: 0 10px 24px -14px rgba(31, 79, 158, .4);
	transition: transform var(--ux-dur-press) var(--ux-ease-hover),
		border-color var(--ux-dur-base) var(--ux-ease),
		box-shadow var(--ux-dur-base) var(--ux-ease);
}

.uhl-home .ux-step__node .ux-ic { width: 27px; height: 27px; stroke-width: 1.6; }

/* Номер — ярлыком на углу карточки, а не строкой рядом с иконкой. */
.uhl-home .ux-step__node b {
	position: absolute;
	top: -10px;
	left: -10px;
	min-width: 24px;
	height: 24px;
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--uxc-blue);
	color: #fff;
	border-radius: 3px;
	font-family: 'Geologica', 'Onest', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--ux-dur-base) var(--ux-ease);
}

.uhl-home .ux-step:hover .ux-step__node { transform: translateY(-3px); border-color: var(--uxc-blue); }
.uhl-home .ux-step:hover .ux-step__node b { background: var(--uxc-gold); color: var(--uxc-ink); }

.uhl-home .ux-step h3 {
	margin: 0 0 8px;
	font-family: 'Geologica', 'Onest', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--uxc-ink);
}

/* Ширина в символах, а не в пикселях: строка обязана ломаться примерно
   в том же месте при любом кегле и на любом языке. */
.uhl-home .ux-step p {
	margin: 0 auto;
	max-width: 25ch;
	font-size: 13.5px;
	line-height: 1.55;
	color: #5f6d80;
}

/* Призыв под рядом — по центру и без подложки: тонированная плашка спорила
   с белыми карточками шагов и тянула взгляд на себя раньше самих шагов. */
.uhl-home .ux-step__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 38px;
	padding: 30px 0 0;
	border-top: 1px solid var(--uxc-line3);
}

.uhl-home .ux-step__cta b {
	font-family: 'Geologica', 'Onest', system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--uxc-ink);
}

/* ============================================================ преимущества */

.uhl-home .ux-adv2 { text-align: center; }

/* Лид набран тем же чернилом, что и абзац «О компании»: это одна роль —
   длинный вводный текст, и цвет у неё один. Ширина в знаках, а не в
   пикселях: строка остаётся читаемой при другом кегле.

   60ch, а не 52: в макете это свойство объявлено ДВАЖДЫ, и побеждает
   второе. Замерять, а не читать правило глазами — здесь это уже третий
   такой случай после .ux-in и .ux-rowhead. */
.uhl-home .ux-adv2__lead {
	max-width: 60ch;
	margin: 0 auto 28px;
	color: var(--uxc-ink3);
	font-size: 15px;
	line-height: 1.6;
}

/* Ровно четыре колонки, а не auto-fit. Auto-fit подстраивается под ширину
   и на нашей раскладке давал пять — ряд переставал совпадать с макетом,
   а карточки становились уже и выше. Пороги 920/560 макетные. */
.uhl-home .ux-adv2grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: left;
}

@media (max-width: 920px) {
	.uhl-home .ux-adv2grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.uhl-home .ux-adv2grid { grid-template-columns: 1fr; }
}

.uhl-home .ux-adv2card {
	display: flex;
	gap: 14px;
	padding: 17px;
	background: #fff;
	/* Рамка и тень — режима плотности макета, того же, что у «Цифр». */
	border: 1px solid #edf1f6;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 8px 24px -18px rgba(16, 24, 40, .18);
	transition: border-color var(--ux-dur-fast) var(--ux-ease),
		transform var(--ux-dur-press) var(--ux-ease-hover);
}

/* Тень при наведении НЕ меняется: в макете она объявлена важной в режиме
   плотности и перебивает наведение. Двигается только рамка и сама карточка. */
.uhl-home .ux-adv2card:hover {
	border-color: #cdd9ea;
	transform: translateY(-2px);
}

/* Почти квадратная плашка 44×44, а не скруглённый кружок: радиус 2px. */
.uhl-home .ux-adv2card__ic {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 2px;
	background: #eef3fb;
	color: var(--uxc-blue);
}

.uhl-home .ux-adv2card__ic .ux-ic { width: 23px; height: 23px; }

/* Заголовок блока преимуществ стоит теснее общего: под ним лид-строка. */
.uhl-home .ux-adv2 .ux-h2 { margin: 8px 0 6px; }

.uhl-home .ux-adv2card h3 {
	margin: 0 0 5px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--uxc-ink2);
	line-height: 1.2;
}

/* #5f6d80, а не --uxc-mut: в режиме плотности макет чуть теплее гасит
   текст карточки. Разница в два пункта, но иначе замер расходится. */
.uhl-home .ux-adv2card p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: #5f6d80;
}

/* ================================================================= цифры */

/* Ни рамки, ни подложки: числа стоят прямо на тонировке секции.
   Так в макете заказчика — в финальном этот блок остался старым,
   карточкой с разделителями, и его сюда НЕ переносим. */
.uhl-home .ux-nums {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

/* Текст прижат влево и стоит на фиксированном расстоянии от знака
   (10 слева + 108 знак + 20 зазор). Пока он был центрован, отступ
   до знака зависел от длины самого числа и гулял от ячейки к ячейке. */
.uhl-home .ux-num {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	padding: 30px 16px 30px 138px;
	overflow: hidden;
}

/* Знак — крупный светлый фон позади числа, а не иконка над ним.
   108px, потому что на 30px тонкие глифы сливались в прямоугольник.
   Прозрачность НЕ применяем: цвет задан явно, и ослабление
   удвоилось бы — знак пропал бы совсем. */
.uhl-home .ux-num__ic {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
	margin: 0;
	width: auto;
	height: auto;
	color: #eef2f7;
	pointer-events: none;
}

.uhl-home .ux-num__ic .ux-ic { width: 108px; height: 108px; stroke-width: 1.1; }

/* tabular-nums: цифры одной ширины, иначе «50 000» и «6 400» стоят
   в ряду с разным оптическим весом.

   z-index поднимает число НАД знаком: знак лежит фоном в той же ячейке,
   и без этого его линии проходили бы поверх цифр. */
.uhl-home .ux-num dt {
	/* БЕЗ position: relative. Иконка лежит внутри dt (обёртка внутри dl
	   вправе содержать только dt и dd) и позиционируется абсолютно —
	   ей нужен .ux-num как система отсчёта, а не dt. Порядок наложения
	   при этом не страдает: .ux-num — флексбокс, а у флекс-элемента
	   z-index работает и без позиционирования. */
	z-index: 1;
	margin: 0;
	font-size: 38px;
	font-weight: 700;
	color: var(--uxc-ink2);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Приписка идёт тем же кеглем и золотым — так в макете.
   Раньше модуль уменьшал её вдвое и красил синим, чтобы «м²» не спорило
   с «6400»; в утверждённом макете спор решён цветом, а не размером. */
.uhl-home .ux-num dt i { font-style: normal; color: var(--uxc-gold); }

.uhl-home .ux-num dd {
	position: relative;
	z-index: 1;
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--uxc-mut);
}

/* ================================================================ отзывы */

/* Сводка и критерии — две панели в ряд, карточки под ними.
   Пропорция 1.4fr / 1fr из макета: панель оценки шире, потому что несёт
   пять столбиков распределения, и при равных долях они слипаются. */
.uhl-home .ux-rvgrid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 18px;
	margin-bottom: 18px;
}

.uhl-home .ux-rvscore,
.uhl-home .ux-rvcrit {
	background: #fff;
	border: 1px solid var(--uxc-line);
	border-radius: 3px;
}

.uhl-home .ux-rvscore { padding: 22px; }

.uhl-home .ux-rvscore__top {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 22px;
	align-items: center;
	margin-bottom: 16px;
}

/* tabular-nums: без него «4.8» и «5.0» разной ширины, и число дёргается
   при смене набора отзывов. */
.uhl-home .ux-big {
	font-size: 50px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--uxc-ink);
}

.uhl-home .ux-rvdist { display: flex; gap: 8px; justify-content: space-between; }
.uhl-home .ux-rd { text-align: center; }

.uhl-home .ux-rd__f {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin: 0 auto 5px;
	color: #fff;
}

.uhl-home .ux-rd__f .ux-star { width: 15px; height: 15px; }
.uhl-home .ux-rd b { display: block; font-size: 13px; font-weight: 700; color: var(--uxc-ink); }
.uhl-home .ux-rd small { font-size: 11px; color: var(--uxc-mut2); }

/* Синий, а не почти чёрный. Он и раньше был состоянием наведения этой
   кнопки, и он же — фон главных кнопок модуля (`ux-btn--blue`). Тёмный
   переехал в наведение: новых цветов не заводим. */
.uhl-home .ux-rvbtn {
	display: block;
	text-align: center;
	background: var(--uxc-blue);
	color: #fff;
	padding: 12px;
	border-radius: 3px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background .2s;
}

/* В макете у кнопки состояния наведения нет вовсе. Ссылка без отклика
   читается как подпись, поэтому оно здесь есть — синим, а не осветлением:
   почти чёрный фон при осветлении становится серым и выглядит выключенным. */
.uhl-home .ux-rvbtn:hover,
.uhl-home .ux-rvbtn:focus-visible { background: var(--uxc-ink2); color: #fff; }

.uhl-home .ux-rvcrit {
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 13px;
}

.uhl-home .ux-crit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	color: var(--uxc-ink3);
}

.uhl-home .ux-crit > div { display: flex; gap: 2px; color: var(--uxc-gold); }
.uhl-home .ux-cstar { width: 16px; height: 16px; flex: none; }
.uhl-home .ux-cstar.is-off { color: var(--uxc-line); }

/* Лента, а не сетка. Ширина карточки фиксирована, потому что у ленты нет
   «ряда»: доля от контейнера дала бы карточку во всю прокручиваемую длину.
   280 + зазор 16 — те же четыре в ряд на десктопе, что и были сеткой,
   а на телефоне видно карточку с хвостом следующей: это и есть подсказка,
   что ленту можно листать.

   Обёртка внутри .ux-in, а не во всю ширину, как у видео: вынести отзывы
   до края экрана — это уже смена макета. Поэтому и боковой отступ дорожки
   обнуляем: колонка контента свой отступ уже дала. */
.uhl-home .ux-rvcarwrap { margin-top: 4px; }

/* Селектор ЧЕРЕЗ обёртку намеренно. У `.uhl-home .ux-rvcards` и
   `.uhl-home .ux-track` одинаковый вес, а `.ux-track` объявлен ниже —
   значит выигрывает он, и боковой отступ во всю ширину оставался на месте.
   Замерено: дорожка выходила за колонку на 32 px, и стрелки показывались
   там, где всё помещается. */
.uhl-home .ux-rvcarwrap .ux-rvcards {
	gap: 16px;
	padding: 8px 0 18px;
}

/* Доля контейнера, а не фиксированные пиксели: фиксированная ширина не
   тянется, и на широком экране справа оставалась пустота — замерено
   254 px при ленте 1422. Зазор 16, поэтому вычитаем (N-1) × 16. */
.uhl-home .ux-rvcarwrap .ux-rc2 {
	flex: 0 0 calc((100% - 48px) / 4);
	scroll-snap-align: start;
}

@media (max-width: 1199px) {
	.uhl-home .ux-rvcarwrap .ux-rc2 { flex-basis: calc((100% - 32px) / 3); }
}

@media (max-width: 899px) {
	.uhl-home .ux-rvcarwrap .ux-rc2 { flex-basis: calc((100% - 16px) / 2); }
}

/* На телефоне карточка во всю ширину: подсказку «дальше есть ещё» дают
   точки, и обрезанный край второй карточки для этого больше не нужен. */
@media (max-width: 619px) {
	.uhl-home .ux-rvcarwrap .ux-rc2 { flex-basis: 100%; }
}

/* Точки. Форма та же, что у баннера: видимая точка маленькая, а нажимается
   вся кнопка — 44px это минимальная тач-цель, ниже начинаются промахи. */
.uhl-home .ux-cardots {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 2px;
}

.uhl-home .ux-cardots[hidden] { display: none; }

/* Курсор-рука: единственный признак того, что ленту можно тянуть. Стрелок
   здесь больше нет, и без него мышь не догадается. Ставит его скрипт —
   без него тянуть всё равно нечем. */
.uhl-home .ux-track.is-drag-on { cursor: grab; }
.uhl-home .ux-track.is-dragging { cursor: grabbing; }

/* Пока тянут, текст не выделяется: иначе вместо прокрутки получается
   подсветка отзыва. */
.uhl-home .ux-track.is-dragging,
.uhl-home .ux-track.is-dragging * { user-select: none; }

.uhl-home .ux-cardot {
	position: relative;
	width: 44px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.uhl-home .ux-cardot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: var(--uxc-mut2, #8a97a8);
	transition: background .2s, transform .2s;
}

.uhl-home .ux-cardot.is-on::before {
	background: var(--uxc-blue, #1f4f9e);
	transform: scale(1.35);
}

.uhl-home .ux-rc2 {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--uxc-line);
	border-radius: 3px;
}

.uhl-home .ux-rc2 header { display: flex; align-items: center; gap: 10px; }
.uhl-home .ux-rc2 header b { flex: 1; font-size: 13.5px; }

/* Логотип чужой: цвета заданы самому символу и снаружи не меняются.
   Здесь только размер. */
.uhl-home .ux-rc__g { width: 16px; height: 16px; flex: none; }

.uhl-home .ux-rc__av {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 700;
	background: var(--uxc-mut2);
}

.uhl-home .ux-rc__st2 { margin: 0; display: flex; gap: 2px; color: var(--uxc-gold); }

/* Звезда рейтинга — из спрайта, а не глифом «★»: системный шрифт рисует
   его разной толщины на разных платформах, а местами подставляет цветное
   эмодзи вместо знака.

   ЗАЛИВКА ЗАДАНА САМОМУ СИМВОЛУ, и селектор поэтому без .uhl-home.
   Причины две. Первая: символы спрайта несут fill="none" ПРЕЗЕНТАЦИОННЫМ
   АТРИБУТОМ, и правило на <use> его не перебьёт — наследование берёт
   значение с ближайшего предка в клонированном поддереве, то есть
   с самого symbol. Вторая: спрайт печатается ДО .uhl-home, вне этого
   контейнера, так что вложенный селектор просто не совпал бы.

   Пятиконечная звезда контуром для рейтинга читается хуже сплошной:
   «получено» и «не получено» должны различаться с одного взгляда. */
#uhlh-star { fill: currentColor; stroke: none; }

.uhl-home .ux-star { width: 15px; height: 15px; flex: none; }
.uhl-home .ux-star.is-off { color: var(--uxc-line); }
/* Отзыв на 1784 знака занимал 64 строки и растягивал ВСЕ карточки ряда:
   сетка равняет их по самой высокой, и под остальными оставалось по метру
   пустоты при собственном тексте в 4-5 строк. Обрезаем ПОКАЗ, а не текст —
   в разметке он остаётся целиком.

   Пять строк — замер, а не вкус. Из девяти отзывов с оценкой 4+ семь
   укладываются в пять строк, и длинных всего два, оба из Google. При восьми
   строках кнопку получали те же два, но карточка была на 66 px выше —
   то есть три строки пустоты у всех ради ничего. */
.uhl-home .ux-rc__tx {
	margin: 0;
	font-size: 14.5px;
	color: var(--uxc-ink3);

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
}

/* Накладка длинного отзыва.

   Раскрытие НА МЕСТЕ пришлось убрать: сетка равняет карточки ряда по самой
   высокой, и нажатие «Читать далее» поднимало все четыре с 331 px до 1549 —
   то есть возвращало ровно ту пустоту, ради которой обрезка и делалась.
   Замерено на живой странице. */
.uhl-home .ux-rvmodal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(13, 25, 45, .55);
}

.uhl-home .ux-rvmodal[hidden] { display: none; }

.uhl-home .ux-rvmodal__panel {
	position: relative;
	width: 100%;
	max-width: 640px;

	/* Панель, а не страница: отзыв на 1784 знака иначе не прочитать
	   с телефона — прокрутка ушла бы под накладку. */
	max-height: 82vh;
	overflow-y: auto;

	padding: 26px 26px 22px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 60px -18px rgba(13, 25, 45, .5);
}

.uhl-home .ux-rvmodal__x {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--uxc-mut2, #6b7280);
	cursor: pointer;
}

.uhl-home .ux-rvmodal__x:hover { color: var(--uxc-ink3, #1f2937); }

.uhl-home .ux-rvmodal__body { display: flex; flex-direction: column; gap: 12px; }

/* Внутри накладки обрезки нет: ради этого её и открывают. */
.uhl-home .ux-rvmodal .ux-rc__tx {
	-webkit-line-clamp: unset;
	display: block;
	overflow: visible;
}

/* Пока накладка открыта, страница под ней не прокручивается: иначе колесо
   уводит фон, а панель стоит на месте. */
.uhl-home-rvlock, .uhl-home-rvlock body { overflow: hidden; }

/* Кнопка на месте ссылки: действие остаётся на странице, никуда не ведёт. */
.uhl-home .ux-rc__more {
	align-self: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	color: var(--uxc-acc, #1f4f9e);
	cursor: pointer;
	text-decoration: underline;
}

.uhl-home .ux-rc__more:hover { text-decoration: none; }
.uhl-home .ux-rc__d  { display: block; font-size: 12.5px; color: var(--uxc-mut2); }

@media (max-width: 900px) {
	.uhl-home .ux-rvgrid { grid-template-columns: 1fr; }
	.uhl-home .ux-rvscore__top { grid-template-columns: 1fr; justify-items: center; }
}

/* ========================================================= про нас и FAQ */

/* Левая колонка УЖЕ правой: .92 против 1.08. Модуль держал наоборот,
   и список вопросов оказывался теснее текста о компании.
   minmax(0, …) — своё: без него длинное слово в тексте раздувает колонку
   сверх доли и ломает сетку. */
.uhl-home .ux-af2 {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}

/* Заголовок здесь просторнее общего: под ним сразу абзац, а не ряд
   карточек. Разрядка -.02em — базовая макетная; общий .ux-h2 берёт
   -.015em, потому что там её перекрывает режим плотности. */
.uhl-home .ux-af2__about .ux-h2 {
	margin: 0 0 14px;
	line-height: 1.18;
	letter-spacing: -.02em;
}

.uhl-home .ux-af2__about .ux-eyebrow { margin-bottom: 12px; }

/* 48ch, а не вся ширина колонки: строка длиннее полусотни знаков
   читается заметно тяжелее. */
.uhl-home .ux-af2__about p {
	margin: 0 0 16px;
	max-width: 48ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--uxc-ink3);
}

/* Именно `p a`, а не `a`: под общим правилом оказывалась и кнопка,
   а она — тоже ссылка. Синий текст ложился на синий фон, и кнопки
   не было видно вовсе. В макете граница ровно такая же. */
.uhl-home .ux-af2__about p a { color: var(--uxc-blue); font-weight: 600; text-decoration: none; }
.uhl-home .ux-af2__about p a:hover { text-decoration: underline; }

/* Последняя ссылка абзаца — это «Виробничі можливості →», и стрелка,
   оторванная переносом от текста, читается как мусор. В макете для неё
   заведён отдельный класс, но наш сборщик ссылок классов не ставит:
   он подставляет anchor по маркеру [4]. Отсюда :last-child. */
.uhl-home .ux-af2__about p a:last-child { white-space: nowrap; }

/* Тот же приём, что и в «Цифрах»: одна карточка с разделителями. */
.uhl-home .ux-af2__mini {
	display: flex;
	margin: 20px 0 22px;
	border: 1px solid var(--uxc-line);
	border-radius: 3px;
	background: var(--uxc-tint2);
	overflow: hidden;
}

.uhl-home .ux-af2__mini > div { flex: 1; padding: 15px 18px; }
.uhl-home .ux-af2__mini > div + div { border-left: 1px solid var(--uxc-line2); }

.uhl-home .ux-af2__mini dt {
	margin: 0;
	font-size: 25px;
	font-weight: 700;
	color: var(--uxc-blue);
	line-height: 1.05;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.uhl-home .ux-af2__mini dd {
	margin: 5px 0 0;
	font-size: 11.5px;
	color: var(--uxc-mut);
	letter-spacing: .01em;
}

.uhl-home .ux-af2__faqh { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--uxc-ink); }

/* ---------------------------------------------------- прокрутка вопросов

   Много вопросов — это длинная лестница: блок рос вниз, колонка «о нас»
   оставалась короткой, и рядом с ней висел столбец пустоты. Поэтому
   у списка своя прокрутка.

   Высота НЕ в пикселях. Обёртка растягивается на высоту строки сетки,
   а её задаёт левая колонка; список лежит absolute внутри. Так число
   вопросов вообще не влияет на размер блока, и волшебное число под
   каждый текст подбирать не нужно. min-height — только пол на случай,
   когда слева очень короткий текст. */
.uhl-home .ux-af2__faq {
	/* У сетки align-items: start, поэтому сама колонка не тянется. */
	align-self: stretch;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 340px;

	/* Цвет затемнения внизу. Переменной, а не зашитым значением: секция
	   бывает тонированной, и одно значение подошло бы только к одному
	   из двух фонов. */
	--uhl-faq-fade: #fff;
}

.uhl-home .ux-blk--tint .ux-af2__faq { --uhl-faq-fade: var(--uxc-tint); }

.uhl-home .ux-af2__faqh { flex: 0 0 auto; }

/* Заголовок остаётся НАД прокруткой: внутри absolute-области список
   накрыл бы его собой. */
.uhl-home .ux-faqwrap {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.uhl-home .ux-faqwrap .ux-faq {
	position: absolute;
	inset: 0;
	overflow-y: auto;

	/* Прокрутка не «пробивает» наружу: докрутив список до конца, человек
	   иначе продолжал бы листать страницу, не убрав курсор со списка. */
	overscroll-behavior: contain;

	/* Место под полосу, чтобы она не легла на угол карточки вопроса. */
	padding-right: 10px;
}

.uhl-home .ux-faq:focus-visible {
	outline: 2px solid var(--uxc-blue);
	outline-offset: 3px;
	border-radius: 8px;
}

/* Тонкая полоса вместо общей: общая шире и перекрывала бы правый край
   карточек вопросов. */
.uhl-home .ux-faq { scrollbar-width: thin; scrollbar-color: #c9d4e3 transparent; }
.uhl-home .ux-faq::-webkit-scrollbar { width: 6px; }
.uhl-home .ux-faq::-webkit-scrollbar-track { background: transparent; }
.uhl-home .ux-faq::-webkit-scrollbar-thumb { background: #c9d4e3; border-radius: 3px; }
.uhl-home .ux-faq::-webkit-scrollbar-thumb:hover { background: #a9bad2; }

.uhl-home .ux-faq__fade {
	position: absolute;
	left: 0;
	/* Не заходим на полосу прокрутки — иначе затемнение легло бы
	   поверх неё и полоса выглядела бы обрезанной. */
	right: 10px;
	bottom: 0;
	height: 44px;
	pointer-events: none;
	border-radius: 0 0 10px 10px;
	background: linear-gradient(to bottom, transparent, var(--uhl-faq-fade));
	transition: opacity .2s ease;
}

/* Конец списка — и когда прокручивать нечего вовсе: иначе на трёх
   вопросах затемнение висело бы над пустотой и обещало продолжение,
   которого нет. Класс ставит frontend.js. */
.uhl-home .ux-af2__faq.is-end .ux-faq__fade { opacity: 0; }

/* Вопрос — отдельная карточка, а не строка списка: в макете у каждого
   своя рамка и свой фон, а между ними воздух. Прежде это был сплошной
   список с волоском между строками. */
.uhl-home .ux-faq details {
	margin-bottom: 10px;
	background: #fff;
	border: 1px solid var(--uxc-line);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color var(--ux-dur-fast) var(--ux-ease),
		box-shadow var(--ux-dur-fast) var(--ux-ease);
}

.uhl-home .ux-faq details:hover { border-color: #cdd9e8; }

/* Раскрытый — с засечкой слева и тенью. Внутренняя тень сверху даёт
   тонкую светлую линию под рамкой: без неё карточка на белом фоне
   выглядит просто сдвинутой. */
.uhl-home .ux-faq details[open] {
	border-color: #c5d3e8;
	box-shadow: 0 1px 0 #eef3fb inset, 0 10px 26px -16px rgba(22, 40, 60, .28);
}

.uhl-home .ux-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 17px 22px;
	font-size: 16px;
	font-weight: 600;
	color: var(--uxc-ink);
	/* Прозрачная засечка стоит всегда: иначе на раскрытии строка
	   дёргалась бы на два пикселя вправо. */
	border-left: 2px solid transparent;
	transition: border-color var(--ux-dur-fast) var(--ux-ease),
		padding-left var(--ux-dur-fast) var(--ux-ease);
}

.uhl-home .ux-faq details[open] summary {
	border-left-color: var(--uxc-blue);
	padding-left: 20px;
}

.uhl-home .ux-faq summary::-webkit-details-marker { display: none; }

/* Плашка со знаком слева от вопроса. */
.uhl-home .ux-faq summary .qn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 2px;
	background: #eef3fb;
	color: var(--uxc-blue);
}

.uhl-home .ux-faq summary .qn .ux-ic { width: 17px; height: 17px; }

/* Знак справа. Он же становится крестиком: поворот на 45° вместо
   второго значка — так не нужно ни менять разметку, ни держать
   в спрайте «минус» ради одного состояния. */
.uhl-home .ux-faq summary .pm {
	margin-left: auto;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--uxc-blue);
	transition: transform var(--ux-dur-base) var(--ux-ease);
}

.uhl-home .ux-faq details[open] summary .pm { transform: rotate(45deg); }

/* 64px слева — это 22 отступа карточки плюс плашка 28 плюс зазор 14:
   ответ встаёт ровно под текстом вопроса, а не под его значком. */
.uhl-home .ux-faq .ans {
	padding: 0 22px 20px 64px;
	color: var(--uxc-mut);
	font-size: 14.5px;
	line-height: 1.6;

	/* Раскрытие и закрытие — плавные. Высоту в пикселях ставит
	   frontend.js: `auto` не анимируется, промежуточных значений
	   у него нет.

	   Нижний отступ едет вместе с высотой. Он не входит в height, и без
	   него в конце закрытия оставалась бы полоса в 20px, которая потом
	   пропадала бы скачком — то есть ровно тот рывок, ради устранения
	   которого всё и делается. */
	overflow: hidden;
	transition: height .22s ease, padding-bottom .22s ease;
}

/* Кому движение мешает — тому его нет. Скрипт это же условие читает
   отдельно и просто переключает состояние без промежуточных шагов. */
@media (prefers-reduced-motion: reduce) {
	.uhl-home .ux-faq .ans { transition: none; }
}

/* Строка для компаний под кнопкой: отделена волоском и набрана мельче —
   это приписка, а не ещё один призыв. */
.uhl-home .ux-af2__b2b {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #eef1f6;
	font-size: 12.5px;
	color: #7a8694;
}

.uhl-home .ux-af2__b2b a { color: var(--uxc-blue); font-weight: 600; }


/* ================================================================= видео */

/*
 * Лента с прокруткой, а не сетка.
 *
 * В макете видно две плитки и половину третьей — это и есть подсказка,
 * что дальше есть ещё. Сетка так не умеет: она либо показывает всё, либо
 * переносит на вторую строку, и ряд теряет вид.
 *
 * Отступ по бокам подводит первую плитку ровно под заголовок: лента идёт
 * во всю ширину экрана, а заголовок сидит в контейнере. При 1440 это 74px,
 * как в макете; на узких экранах остаётся 24px обычного поля.
 */
/* Обёртка ленты. Имена .ux-carwrap/.ux-track взяты из макета, а не
   придуманы: там этот же узел обслуживает «Категории» и «Интерьер»,
   и когда дойдёт до них — переносить будет нечего. */
.uhl-home .ux-carwrap {
	position: relative;

	/* Лента держится в колонке контента, а не тянется до края окна.
	   Раньше тянулась — и выше 1480, где .container темы перестаёт расти,
	   лента с ней расходилась: на 1920 карусель занимала 0..1910 при
	   контенте 215..1695, а стрелки уезжали на 38 и 1872.

	   Отступ дорожки ниже трогать не нужно: когда обёртка ограничена тем же
	   --uxc-in, calc(50% - --uxc-in/2 + --uxc-pad) сходится ровно к
	   --uxc-pad, и max() берёт его. Первая плитка остаётся под заголовком. */
	max-width: var(--uxc-in);
	margin-left: auto;
	margin-right: auto;
}

.uhl-home .ux-track {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Отступ считается от ШИРИНЫ САМОЙ ЛЕНТЫ (50%), а не от 100vw: vw
	   включает полосу прокрутки, и первая плитка уезжала на пять пикселей
	   правее заголовка. */
	padding: 8px max(var(--uxc-pad), calc(50% - var(--uxc-in) / 2 + var(--uxc-pad))) 18px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* Полоса прячется ТОЛЬКО когда скрипт жив — класс ставит он же.
   В макете она спрятана всегда, но там и стрелки печатаются сразу;
   у нас без скрипта стрелок нет, и лента осталась бы неподвижной. */
.uhl-home .ux-carwrap.is-car .ux-track { scrollbar-width: none; }
.uhl-home .ux-carwrap.is-car .ux-track::-webkit-scrollbar { display: none; }

/* Кнопки. Позиция из макета: при широком поле они стоят рядом с лентой,
   при узком — ложатся на первую и последнюю плитку. Так и в макете. */
.uhl-home .ux-carr {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #3a4654;
	box-shadow: 0 6px 18px -4px rgba(22, 40, 60, .32);
	cursor: pointer;
	transition: transform var(--ux-dur-press) var(--ux-ease-out),
		box-shadow var(--ux-dur-base) var(--ux-ease);
}

.uhl-home .ux-carr:hover {
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 12px 26px -6px rgba(22, 40, 60, .45);
}

.uhl-home .ux-carr:active { transform: translateY(-50%) scale(.94); }

/* display:flex выше сильнее, чем браузерное правило для [hidden],
   поэтому скрытие приходится объявлять отдельно. */
.uhl-home .ux-carr[hidden] { display: none; }

.uhl-home .ux-carr .ux-ic { width: 20px; height: 20px; }

.uhl-home .ux-carr--l { left: clamp(10px, 2vw, 46px); }
.uhl-home .ux-carr--r { right: clamp(10px, 2vw, 46px); }

/* Отдельной иконки «стрелка влево» в спрайте нет и заводить её незачем:
   это та же стрелка, отражённая по горизонтали. */
.uhl-home .ux-carr--l .ux-ic { transform: scaleX(-1); }

.uhl-home .ux-vtile {
	position: relative;
	display: block;
	/* Ширина макетная. Именно она задаёт «две с половиной плитки в кадре»:
	   1456 / (560 + 18) = 2,5. Прежние фиксированные 446px давали ровно
	   три, и подсказки «дальше есть ещё» не читалось. */
	flex: 0 0 clamp(340px, 31vw, 560px);
	/* Прилипание по ЦЕНТРУ, как в макете. При «start» браузер подтягивает
	   первую плитку к краю прокрутки и съедает отступ, которым лента
	   подводится под заголовок. */
	scroll-snap-align: center;
	border-radius: 3px;
	overflow: hidden;
	background: #000;
	text-decoration: none;
	aspect-ratio: 16 / 9;
}

.uhl-home .ux-vtile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--ux-dur-slow) var(--ux-ease-out);
}

.uhl-home .ux-vtile:hover img { transform: scale(1.04); }

/* Ярлык внизу слева, а не круг по центру: круг перекрывает то самое место
   обложки, где у этих роликов набрано название. */
.uhl-home .ux-vtile__play {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px 6px 11px;
	border-radius: 2px;
	/* На 4% темнее макетного #e53935: белый на нём давал 4.23 при норме
	   4.5. Разницу в цвете не видно, разницу в читаемости — видно. */
	background: #dc3733;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	/* 1.5 даёт ярлыку макетные 30px высоты: 12 * 1.5 + 6 + 6. */
	line-height: 1.5;
}

/* Треугольник плеера — рамкой, без лишнего узла в разметке. */
.uhl-home .ux-vtile__play::before {
	content: "";
	border: 7px solid transparent;
	border-left: 10px solid #fff;
	border-right: 0;
}

/* Бейдж свежего ролика. Синий взят токеном: в макете здесь #1f4f9e, то есть
   ровно --uxc-blue, и разводить второй синий незачем. */
.uhl-home .ux-vtile__new {
	position: absolute;
	z-index: 3;
	top: 10px;
	left: 10px;
	padding: 5px 9px;
	border-radius: 20px;
	background: var(--uxc-blue);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(11, 20, 40, .35);
}

.uhl-home .ux-vtile__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 14px 12px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	background: linear-gradient(180deg, transparent, rgba(10, 16, 28, .82));
}

/* =============================================================== адаптив */

/* Ниже 1000px «Цифры» встают 2×2 — порог макетный.

   А вот второй порог — НАШ, и он закрывает дыру самого макета: там
   ячейка на узком экране выходит 154px, отступ под знак съедает 138
   плюс 16 справа, и на текст не остаётся ничего — число пропадает
   под overflow. Проверено замером: scrollWidth больше clientWidth.
   В одну колонку ширины хватает, и знак остаётся на месте. */
@media (max-width: 1000px) {
	.uhl-home .ux-nums { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
	.uhl-home .ux-nums { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.uhl-home .ux-af2 { grid-template-columns: 1fr; }

	/* В одну колонку прокрутке внутри блока взяться неоткуда: держать
	   палец в маленьком окошке и листать им список — это ловушка, из
	   которой страница дальше не идёт. Список просто течёт.

	   Правила стоят В ЭТОМ ЖЕ медиазапросе намеренно. Разные пороги для
	   сетки и для прокрутки оставляют полосу ширин, где колонок ещё две,
	   а список уже развёрнут во всю высоту — то есть ровно то, ради чего
	   всё это делалось, там не работает. */
	.uhl-home .ux-af2__faq { display: block; min-height: 0; }
	.uhl-home .ux-faqwrap { position: static; }
	.uhl-home .ux-faqwrap .ux-faq { position: static; overflow: visible; padding-right: 0; }
	.uhl-home .ux-faq__fade { display: none; }
	.uhl-home .ux-step__cta { flex-direction: column; }
	.uhl-home .ux-logo img { height: 36px; }
}

/* Пороги макетные: 820 — два шага в ряд, 480 — по одному. Линия-связка
   при переносе на две строки гаснет: она соединяла бы шаг с тем, что
   стоит под ним, а не за ним. */
@media (max-width: 820px) {
	.uhl-home .ux-steps {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
		gap: 30px 0;
	}

	.uhl-home .ux-step__rail::before { display: none; }
}

@media (max-width: 480px) {
	.uhl-home .ux-steps { grid-template-columns: 1fr; gap: 22px; }
}