/**
 * Страница: Главная.
 *
 * Все значения перенесены из design-reference/главная.html без округления;
 * источник помечен «reference:». Мобильных состояний в макете нет —
 * они спроектированы темой, см. docs/DESIGN-DEVIATIONS.md.
 */

/* ====================================================================
 * HERO
 * reference: background:#12295C; overflow:hidden
 * ================================================================== */

.tri-hero {
	position: relative;
	background-color: var(--tri-color-hero-navy); /* reference (v2): #0D2050 */
	overflow: hidden;
}

.tri-hero__bg {
	position: absolute;
	inset: 0;
}

.tri-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: var(--tri-color-surface-edf2fd);
}

/* reference: linear-gradient(90deg,rgba(4,18,46,0.72) 0%,rgba(4,18,46,0.42) 48%,rgba(6,30,80,0.12) 100%) */
.tri-hero__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		90deg,
		rgba(8, 22, 56, 0.86) 0%,
		rgba(8, 22, 56, 0.62) 50%,
		rgba(8, 22, 56, 0.42) 100%
	);
}

/* reference: right:-8%; top:-14%; 720x720; radial-gradient */
.tri-hero__glow {
	/* reference: в v2 вместо кругового свечения снизу идёт затемнение
	   140px — оно сшивает фотографию со следующей секцией. */
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 140px;
	pointer-events: none;
	background-image: linear-gradient(180deg, rgba(8, 22, 56, 0) 0%, rgba(8, 22, 56, 0.55) 100%);
}

.tri-hero__inner {
	position: relative;
	display: grid;
	gap: var(--tri-space-48); /* reference (v2): gap:48px */
	align-items: center;
	padding-block: var(--tri-space-64) var(--tri-space-40); /* reference (v2): 64px 0 40px */
}

.tri-hero__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* reference: 12px/800 ls0.12em uppercase; border 1px rgba(255,255,255,0.4);
   radius 6px; padding 9px 16px */
.tri-hero__badge {
	align-self: flex-start;
	display: inline-flex;
	font-size: var(--tri-fs-11-5);
	font-weight: var(--tri-fw-600);
	letter-spacing: var(--tri-ls-p0-1);
	text-transform: uppercase;
	color: var(--tri-color-white);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.4);
	border-radius: var(--tri-radius-6);
	padding: var(--tri-space-8) var(--tri-space-14);
}

/* reference: 58px/1.1/700; ls -0.028em; max-width:660px; margin-top:26px */
.tri-hero__title {
	font-size: var(--tri-fs-48); /* reference (v2): 48px */
	line-height: var(--tri-lh-1-1);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	margin-block-start: var(--tri-space-26);
	letter-spacing: var(--tri-ls-n0-028);
	max-width: 660px;
}

/* reference: 19px/1.55 #E6EAF2; margin-top:24px; max-width:680px */
.tri-hero__lead {
	font-size: var(--tri-fs-17-5); /* reference (v2): 17.5px */
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-e6eaf2);
	margin-block-start: var(--tri-space-24);
	max-width: 520px;
}

/* reference: 15.5px/1.55 #B4BAC5; margin-top:14px; max-width:660px */
.tri-hero__note {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-on-dark-b4bac5);
	margin-block-start: var(--tri-space-14);
	max-width: 660px;
}

/* reference: gap:14px; margin-top:34px */
.tri-hero__actions {
	margin-block-start: var(--tri-space-34);
}

/* --- Видео-карточка -------------------------------------------------- */

.tri-hero__media {
	position: relative;
	display: flex;
	justify-content: flex-end;
	min-width: 0;
}

/* reference: max-width:660px; radius 20px; shadow 0 30px 64px rgba(4,18,46,0.34) */
.tri-hero__video {
	/* reference (v2): карточка видео 500px шириной, поле обложки 300px */
	--tri-hero-video-h: 300px;
	position: relative;
	display: block;
	width: 100%;
	max-width: 500px;
	border-radius: var(--tri-radius-20);
	overflow: hidden;
	box-shadow: var(--tri-shadow-deep-64-34);
}

/* Кнопка-обложка не должна отличаться от карточки ничем, кроме курсора. */
button.tri-hero__video {
	appearance: none;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
}

/*
 * Место плеера — ровно то же, что занимала обложка: высота берётся из
 * одной переменной с телом карточки, поэтому подстановка плеера не
 * двигает соседние блоки. Пропорции 16:9 остаются нижней границей,
 * если карточка окажется уже макетной.
 */
.tri-hero__video--playing {
	height: var(--tri-hero-video-h);
	min-height: min(var(--tri-hero-video-h), 56.25vw);
	background-color: var(--tri-color-navy);
}

.tri-hero__video-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.tri-hero__video-bg {
	position: absolute;
	inset: 0;
}

.tri-hero__video-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: var(--tri-color-surface-edf2fd);
}

/* reference: linear-gradient(180deg,rgba(4,18,46,0.28) 0%,rgba(4,18,46,0.55) 52%,rgba(4,18,46,0.92) 100%) */
.tri-hero__video-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		180deg,
		rgba(4, 18, 46, 0.28) 0%,
		rgba(4, 18, 46, 0.55) 52%,
		rgba(4, 18, 46, 0.92) 100%
	);
}

/* reference: height:420px; padding:26px 30px 28px */
.tri-hero__video-body {
	position: relative;
	height: var(--tri-hero-video-h);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--tri-space-26) var(--tri-space-30) var(--tri-space-28);
}

/* reference: top:22px; left:26px; 12px/800 ls0.1em uppercase;
   background rgba(255,255,255,0.16); border rgba(255,255,255,0.28);
   radius 6px; padding 7px 12px */
.tri-hero__video-tag {
	position: absolute;
	top: var(--tri-space-16);
	left: var(--tri-space-18);
	font-size: var(--tri-fs-10-5);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-1);
	text-transform: uppercase;
	color: var(--tri-color-white);
	background-color: rgba(255, 255, 255, 0.16);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.28);
	border-radius: var(--tri-radius-6);
	padding: var(--tri-space-7) var(--tri-space-12);
}

/* reference: 88x88; rgba(255,255,255,0.94); shadow 0 14px 32px rgba(4,18,46,0.3) */
.tri-hero__play {
	position: absolute;
	top: 42%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: var(--tri-radius-circle);
	background-color: rgba(255, 255, 255, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--tri-shadow-deep-32-3);
	color: var(--tri-color-navy);
}

.tri-hero__video-meta {
	display: flex;
	align-items: center;
	gap: var(--tri-space-10); /* reference: gap:10px */
}

.tri-hero__dot {
	width: 6px;
	height: 6px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-accent);
	flex-shrink: 0;
}

/* reference: 12px/800 ls0.06em uppercase #FFFFFF */
.tri-hero__video-duration {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-06);
	text-transform: uppercase;
	color: var(--tri-color-white);
}

/* reference: 12.5px/500 #B4BAC5 */
.tri-hero__video-hint {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-on-dark-b4bac5);
}

/* reference: 23px/800 #FFFFFF lh1.25 mt10 */
.tri-hero__video-title {
	font-size: var(--tri-fs-23);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
	line-height: var(--tri-lh-1-25);
	margin-block-start: var(--tri-space-10);
}

/* reference: 12.5px/1.45 #C8CDD6 mt8 mw460 */
.tri-hero__video-text {
	font-size: var(--tri-fs-12-5);
	line-height: var(--tri-lh-1-45);
	color: var(--tri-color-on-dark-c8cdd6);
	margin-block-start: var(--tri-space-8);
	max-width: 460px;
}

/* --- Плашка показателей поверх видео ---------------------------------
 * reference: right:-18px; bottom:-34px; gap:18px; radius 10px;
 * padding 12px 20px; shadow 0 18px 40px rgba(4,18,46,0.22)
 * ------------------------------------------------------------------ */

.tri-hero__badge-stats {
	position: absolute;
	right: -18px;
	bottom: -34px;
	display: flex;
	align-items: center;
	gap: var(--tri-space-18);
	background-color: var(--tri-color-white);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-12) var(--tri-space-20);
	box-shadow: var(--tri-shadow-deep-40-22);
}

.tri-hero__badge-stat {
	display: flex;
	flex-direction: column;
}

/* reference: 19px/800 #16181D lh1 */
.tri-hero__badge-value {
	font-size: var(--tri-fs-19);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	line-height: var(--tri-lh-1);
	font-variant-numeric: tabular-nums lining-nums;
}

/* reference: 12px/500 #6B7280 mt3 */
.tri-hero__badge-label {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-muted-soft);
	margin-block-start: var(--tri-space-3);
}

/* reference: 1px x 30px #E2E5EA */
.tri-hero__badge-sep {
	width: 1px;
	height: 30px;
	background-color: var(--tri-color-border-e2e5ea);
	flex-shrink: 0;
}

/* --- Полоса показателей ----------------------------------------------
 * reference: gap:12px; padding:0 0 56px;
 * карточка rgba(255,255,255,0.86); border #DDE0E6; blur(14px);
 * radius 10px; padding 14px 22px; shadow 0 10px 26px rgba(4,34,92,0.07)
 * ------------------------------------------------------------------ */

.tri-hero__trust {
	/* reference: полоса показателей лежит внутри тёмного первого экрана,
	   поэтому плашки полупрозрачные, а не белые. Колонок в макете
	   четыре; если редактор заведёт пятый показатель, строка перенесёт
	   его, а не выбросит. */
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--tri-space-10);
	padding-block-end: var(--tri-space-40);
}

.tri-hero__trust-card {
	background-color: rgba(255, 255, 255, 0.12);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(14px);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-12) var(--tri-space-18);
}

/* reference: 19px/800 #12295C lh1 */
.tri-hero__trust-value {
	font-size: var(--tri-fs-19);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
	line-height: var(--tri-lh-1);
	font-variant-numeric: tabular-nums;
}

/* reference: 12px/600 #5A6270 mt6 */
.tri-hero__trust-label {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-on-dark-c8cdd6);
	margin-block-start: var(--tri-space-6);
}

/* --- Адаптив hero ---------------------------------------------------- */

@media (min-width: 1024px) {
	/* reference: grid-template-columns:47fr 53fr */
	.tri-hero__inner {
		grid-template-columns: 1.05fr 0.95fr; /* reference (v2) */
	}
}

@media (max-width: 1023px) {
	.tri-hero__glow {
		width: 420px;
		height: 420px;
		right: -30%;
	}

	.tri-hero__video {
		--tri-hero-video-h: 300px;
	}

	.tri-hero__play {
		width: 64px;
		height: 64px;
	}

	/* Плашка уходит в поток: за краем карточки на узком экране
	   она вызывала бы горизонтальное переполнение. */
	.tri-hero__badge-stats {
		position: static;
		margin-block-start: var(--tri-space-16);
		align-self: flex-start;
	}

	.tri-hero__media {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ====================================================================
 * УСЛУГИ — раскрывающиеся карточки
 * reference: контейнер padding:104px 0 92px
 * ================================================================== */

.tri-home-services {
	/* reference (v2): сплошной белый */
	background-color: var(--tri-color-white);
}

/* reference: flex; justify-content:space-between; align-items:flex-end; gap:40px */
.tri-home-services__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--tri-space-40);
}

/* reference: 44px/1.12/700; ls -0.022em; max-width:640px */
.tri-home-services__title {
	font-size: var(--tri-fs-40);
	line-height: var(--tri-lh-1-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-022);
	max-width: 640px;
	margin: 0;
}

/* reference: 15px/800 #16181D; gap:8px; padding-bottom:6px */
.tri-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-space-8);
	font-size: var(--tri-fs-15);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	white-space: nowrap;
	padding-block-end: var(--tri-space-6);
	text-decoration: none;
}

.tri-link-arrow svg {
	color: var(--tri-color-navy);
	flex-shrink: 0;
}

.tri-link-arrow:hover,
.tri-link-arrow:focus-visible {
	color: var(--tri-color-navy);
}

/* reference: display:flex; gap:16px; margin-top:44px; height:620px */
.tri-home-services__list {
	/* reference (v2): лента высотой 380px, зазор 10px. Высота
	   фиксирована — поэтому раскрытие карточки меняет только ширину и
	   страница под лентой не прыгает.

	   Высота поднята до 500px: при 380px белая панель раскрытой
	   карточки не помещалась и обрезалась — ссылка «Подробнее об
	   услуге» уходила за нижний край. 500px хватает самой длинной из
	   шести панелей, поэтому лента по-прежнему не прыгает. */
	display: flex;
	/* Зазор 8px вместо 10px: два пикселя ряда уходят в ширину
	   свёрнутых карточек, где их не хватало тексту. */
	gap: var(--tri-space-8);
	margin-block-start: var(--tri-space-44);
	align-items: stretch;
	height: 500px;
}

/* reference: radius 20px; background:#12295C; transition flex .55s */
.tri-svc-card {
	position: relative;
	flex: 1;
	min-width: 0;
	border-radius: var(--tri-radius-14); /* reference (v2): 14px */
	overflow: hidden;
	background-color: var(--tri-color-navy);
	box-shadow: var(--tri-shadow-navy-18-10);
	transition:
		flex 0.55s var(--tri-ease),
		box-shadow 0.55s var(--tri-ease);
}

/* reference: раскрытая карточка — flex:2.6; shadow 0 22px 50px rgba(4,34,92,0.22)
   Потолок ширины держит композицию из правок 14.09: в утверждённом
   макете раскрытая карточка занимает около трети ленты, а остальные
   направления остаются читаемыми. При шести карточках flex сам даёт
   эту треть; потолок нужен, когда направлений меньше шести. */
.tri-svc-card.is-open {
	flex: 2.6;
	/*
	 * Потолок снижен с 33% до 28%: при шести направлениях свёрнутой
	 * карточке оставалось 114px под текст, а самое длинное слово
	 * («Проектирование») занимает 137px — и разрывалось посередине.
	 * Теперь под текст остаётся 140px, и длинные названия переносятся
	 * по словам. Раскрытая карточка по-прежнему вдвое шире соседей.
	 */
	max-inline-size: 28%;
	box-shadow: var(--tri-shadow-navy-50-22);
}

.tri-svc-card__bg {
	position: absolute;
	inset: 0;
}

.tri-svc-card__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* reference (свёрнутая): rgba(4,18,46,0.62) -> rgba(4,18,46,0.42) */
.tri-svc-card__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		180deg,
		rgba(4, 18, 46, 0.62) 0%,
		rgba(4, 18, 46, 0.42) 100%
	);
}

/* reference (раскрытая): 0.55 -> 0.32 (45%) -> 0.20 */
.tri-svc-card.is-open .tri-svc-card__veil {
	background-image: linear-gradient(
		180deg,
		rgba(4, 18, 46, 0.55) 0%,
		rgba(4, 18, 46, 0.32) 45%,
		rgba(4, 18, 46, 0.2) 100%
	);
}

/* reference: свёрнутая padding:20px 18px; раскрытая padding:28px */
.tri-svc-card__body {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* Поле по бокам уменьшено: ширина нужна тексту названия. На узких
	   экранах карточка занимает весь экран, и там поле прежнее. */
	padding: var(--tri-space-20) var(--tri-space-12);
}

.tri-svc-card.is-open .tri-svc-card__body {
	padding: var(--tri-space-28);
}

/* reference: свёрнутая column gap:12px; раскрытая row gap:14px */
.tri-svc-card__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--tri-space-12);
	min-width: 0;
	width: 100%;
}

.tri-svc-card.is-open .tri-svc-card__head {
	flex-direction: row;
	gap: var(--tri-space-14);
}

/* reference: 46x46; radius 14px; rgba(255,255,255,0.16); border rgba(255,255,255,0.24) */
.tri-svc-card__icon {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-14);
	background-color: rgba(255, 255, 255, 0.16);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.24);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tri-color-white);
}

/* reference: свёрнутая 17px; раскрытая 27px; 800; lh1.2; ls-0.015em */
.tri-svc-card__title {
	font-size: var(--tri-fs-17);
	/* Междустрочие чуть свободнее: в две-три строки название больше
	   не выглядит сплющенным. */
	line-height: var(--tri-lh-1-3);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-white);
	letter-spacing: var(--tri-ls-n0-015);
	text-shadow: 0 2px 14px rgba(4, 18, 46, 0.5);
	/*
	 * `anywhere` разрывал слово в любом месте и без переноса:
	 * «Проектирова» / «ние». `break-word` делит только там, где иначе
	 * строка не помещается, а при нынешней ширине названия делятся
	 * по словам.
	 */
	overflow-wrap: break-word;
	align-self: stretch;
	width: 100%;
	min-width: 0;
	margin: 0;
	text-align: left;
}

.tri-svc-card.is-open .tri-svc-card__title {
	font-size: 27px;
}

/* reference: панель раскрытой карточки — #FFFFFF; radius 14px;
   padding 24px 26px; shadow 0 24px 56px rgba(4,34,92,0.18) */
.tri-svc-card__panel {
	display: none;
	margin-block-start: auto;
	background-color: var(--tri-color-white);
	border-radius: var(--tri-radius-12); /* reference (v2): 12px */
	padding: var(--tri-space-16) var(--tri-space-18);
	box-shadow: var(--tri-shadow-navy-56-18);
}

.tri-svc-card.is-open .tri-svc-card__panel {
	display: block;
}

/* reference: 15px/1.55 #3A3F49 */
.tri-svc-card__lead {
	font-size: var(--tri-fs-15);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-ink-secondary);
	margin: 0;
}

/* reference: gap:9px; margin-top:18px */
.tri-svc-card__items {
	list-style: none;
	margin: var(--tri-space-18) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-9);
}

/* reference: 14.5px/1.4 #16181D; w600; gap:10px */
.tri-svc-card__items li {
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-4);
	color: var(--tri-color-ink);
	font-weight: var(--tri-fw-600);
	display: flex;
	gap: var(--tri-space-10);
	align-items: flex-start;
}

.tri-svc-card__items svg {
	flex-shrink: 0;
	margin-block-start: 2px;
	color: var(--tri-color-navy);
}

/* reference: 14.5px/800 #12295C; border-bottom 1.5px; margin-top:20px; gap:8px */
.tri-svc-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-space-8);
	margin-block-start: var(--tri-space-20);
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
	border-bottom: 1.5px solid var(--tri-color-navy);
	padding-block-end: 2px;
	text-decoration: none;
}

/*
 * Переключение карточки — настоящая кнопка. В макете вся плитка была
 * кликабельным div; здесь кнопкой служит заголовок карточки, а ссылки
 * внутри раскрытой панели остаются самостоятельными ссылками.
 */
.tri-svc-card__toggle {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* --- Адаптив услуг ---------------------------------------------------
 * Горизонтальный аккордеон высотой 620px на узком экране нечитаем:
 * карточки становятся вертикальным списком и все раскрыты.
 * ------------------------------------------------------------------ */

/* Шесть карточек в ряд требуют ширины десктопной шапки: ниже 1280px
   аккордеон разворачивается в вертикальный список. */
@media (max-width: 1279px) {
	.tri-home-services__list {
		flex-direction: column;
		height: auto;
	}

	.tri-svc-card,
	.tri-svc-card.is-open {
		flex: none;
		/* Потолок ширины нужен только ленте: в колонке карточка
		   занимает всю ширину экрана. */
		max-inline-size: none;
		box-shadow: var(--tri-shadow-navy-18-10);
	}

	.tri-svc-card__body,
	.tri-svc-card.is-open .tri-svc-card__body {
		min-height: 320px;
		padding: var(--tri-space-20) var(--tri-space-18);
	}

	/* В колонке карточки идут одна под другой: зазор ленты им не нужен. */
	.tri-home-services__list {
		gap: var(--tri-space-10);
	}

	.tri-svc-card__toggle {
		cursor: default;
	}

	.tri-svc-card__panel,
	.tri-svc-card.is-open .tri-svc-card__panel {
		display: block;
		margin-block-start: var(--tri-space-20);
	}

	.tri-svc-card__head,
	.tri-svc-card.is-open .tri-svc-card__head {
		flex-direction: row;
		gap: var(--tri-space-14);
	}

	.tri-svc-card__title,
	.tri-svc-card.is-open .tri-svc-card__title {
		font-size: var(--tri-fs-19);
	}
}

/* ====================================================================
 * ПРЕИМУЩЕСТВА — «Единая платформа безопасности»
 * reference: контейнер padding:92px 0 100px; фон-градиент 5 стопов
 * ================================================================== */

.tri-home-eco {
	position: relative;
	overflow: hidden;
	/* reference (v2): сплошной #E8EFFB */
	background-color: var(--tri-color-surface-e8effb);
}

/* reference: right:-120px; top:-140px; 620x620 */
/* reference: left:-160px; bottom:-180px; 560x560 */
.tri-home-eco__head {
	 /* reference: max-width:760px */
	/* reference (v2): слева заголовок и описание, справа плашка. */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--tri-space-32);
}

/* reference: пилюля — gap:9px; #FFFFFF; border #DDE0E6; radius 100px;
   padding 8px 17px; 12.5px/800 #16181D; shadow 0 10px 26px rgba(4,34,92,0.07) */
.tri-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-space-9);
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border);
	border-radius: var(--tri-radius-pill);
	padding: var(--tri-space-8) var(--tri-space-17);
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	box-shadow: var(--tri-shadow-navy-26-07);
}

.tri-pill__dot {
	width: 7px;
	height: 7px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-accent);
	flex-shrink: 0;
}

/* reference: 42px/1.12/700; ls -0.022em; margin-top:18px */
.tri-home-eco__title {
	font-size: var(--tri-fs-40);
	line-height: var(--tri-lh-1-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	margin-block-start: var(--tri-space-18);
	letter-spacing: var(--tri-ls-n0-022);
}

/* reference: 19px/800 #12295C; margin-top:18px */
.tri-home-eco__kicker {
	font-size: var(--tri-fs-19);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
	margin-block-start: var(--tri-space-18);
}

/* reference: 17px/1.55 #5A6270; margin-top:10px; max-width:640px */
.tri-home-eco__text {
	font-size: var(--tri-fs-17);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-10);
	max-width: 640px;
}

/* reference: rgba(255,255,255,0.55); border rgba(255,255,255,0.9);
   radius 24px; padding 26px; margin-top:40px */
.tri-home-eco__panel {
	/* reference (v2): карточки лежат прямо на секции — светлой
	   обёртки вокруг них в макете нет. */
	background-color: transparent;
	border: 0;
	padding: 0;
	/* Отступ вернулся вместе со светлой обёрткой: без него вводный
	   абзац прилипал к верхнему краю карточек (правки 14.09). */
	margin-block-start: var(--tri-space-44);
}

/* reference: gap:12px; padding-bottom:22px; 16px/800 #16181D */
.tri-home-eco__panel-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--tri-space-12);
	padding-block-end: var(--tri-space-22);
	font-size: var(--tri-fs-16);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	text-align: center;
}

.tri-home-eco__panel-head span[aria-hidden] {
	width: 6px;
	height: 6px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-accent);
	flex-shrink: 0;
}

/* reference: grid-template-columns:repeat(4,1fr); gap:16px */
.tri-home-eco__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--tri-space-14); /* reference (v2): 14px */
}

/* reference: #FFFFFF; border rgba(18,41,92,0.10); radius 20px;
   padding 26px 28px; shadow 0 10px 26px rgba(4,34,92,0.06) */
.tri-eco-card {
	position: relative;
	overflow: hidden;
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-20);
	padding: var(--tri-space-26) var(--tri-space-28);
	display: flex;
	flex-direction: column;
	box-shadow: var(--tri-shadow-navy-26-06);
	min-width: 0;
}

/* reference: 12.5px/800 #12295C; bg #EDF2FD; border #DDE0E6; radius 10px; padding 5px 11px */
/* reference: 23px/1.2/700; ls -0.014em; margin-top:16px */
.tri-eco-card__title {
	font-size: var(--tri-fs-20); /* reference (v2): 20px */
	line-height: var(--tri-lh-1-2);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	margin-block-start: var(--tri-space-16);
	letter-spacing: var(--tri-ls-n0-014);
}

/* reference: 14.5px/1.5 #5A6270; margin-top:10px */
.tri-eco-card__text {
	font-size: var(--tri-fs-14);
	line-height: var(--tri-lh-1-5);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-10);
}

.tri-eco-card__media {
	margin-block-start: var(--tri-space-20); /* reference: margin-top:20px */
}

/* reference: height:118px; radius 10px */
.tri-eco-card__photo {
	height: 110px; /* reference (v2) */
	border-radius: var(--tri-radius-10);
	overflow: hidden;
}

.tri-eco-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* reference: #F5F8FF; border #E2E5EA; radius 10px; padding 13px 15px */
.tri-eco-widget {
	background-color: var(--tri-color-surface-f5f8ff);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-13) var(--tri-space-15);
}

.tri-eco-widget__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--tri-space-10);
}

.tri-eco-widget__row + .tri-eco-widget__bar {
	margin-block-start: var(--tri-space-7); /* reference: margin-top:7px */
}

.tri-eco-widget__bar + .tri-eco-widget__row {
	margin-block-start: var(--tri-space-10);
}

/* reference: 12px/700 #16181D */
.tri-eco-widget__label {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
}

/* reference: 12px/800; статусы #17703D и #8A5A0F */
.tri-eco-widget__state {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	white-space: nowrap;
}

.tri-eco-widget__state--done { color: var(--tri-color-success); }
.tri-eco-widget__state--wait { color: var(--tri-color-warn-text-strong); }

/* reference: height:5px; bg #EBEDF1; radius 100px; заливка #12295C */
.tri-eco-widget__bar {
	height: 5px;
	background-color: var(--tri-color-divider);
	border-radius: var(--tri-radius-pill);
	overflow: hidden;
}

.tri-eco-widget__bar > span {
	display: block;
	height: 100%;
	background-color: var(--tri-color-navy);
	border-radius: var(--tri-radius-pill);
}

/* reference: курс — 34x34 radius 10 #12295C, gap:12px */
.tri-eco-widget--course {
	display: flex;
	gap: var(--tri-space-12);
	align-items: center;
}

.tri-eco-widget__play {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: var(--tri-radius-10);
	background-color: var(--tri-color-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tri-color-white);
}

.tri-eco-widget__course {
	flex: 1;
	min-width: 0;
}

.tri-eco-widget__pct {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-muted-soft);
}

/* reference: 14px/800 #12295C; gap:8px; margin-top:auto; padding-top:22px */
.tri-eco-card__link {
	margin-block-start: auto;
	padding-block-start: var(--tri-space-22);
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-navy);
	display: flex;
	align-items: center;
	gap: var(--tri-space-8);
	text-decoration: none;
}

/* reference: карточка 04 — тёмная */
.tri-eco-card--navy {
	background-color: var(--tri-color-navy);
	border: 1.5px solid var(--tri-color-accent); /* reference (v2): жёлтая рамка */
}

.tri-eco-card--navy .tri-eco-card__title { color: var(--tri-color-white); }
.tri-eco-card--navy .tri-eco-card__text { color: var(--tri-color-on-dark-c8cdd6); }

/* reference: 12.5px/800 #FFFFFF; rgba(255,255,255,0.14); radius 6px; padding 5px 10px */
.tri-eco-card--navy .tri-eco-card__num {
	color: var(--tri-color-white);
	background-color: rgba(255, 255, 255, 0.14);
	border-color: transparent;
	border-radius: var(--tri-radius-6);
	padding: var(--tri-space-5) var(--tri-space-10);
}

.tri-eco-card--navy .tri-eco-card__link { color: var(--tri-color-accent); }

/* reference: AI-виджет — rgba(255,255,255,0.10); border rgba(255,255,255,0.18) */
.tri-eco-widget--ai {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.18);
}

/* reference: 12px/800 ls0.07em #F2B23F */
.tri-eco-widget__ai-label {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-800);
	letter-spacing: var(--tri-ls-p0-07);
	color: var(--tri-color-accent-f2b23f);
}

/* reference: 5px; rgba(255,255,255,0.3) и 0.18; radius 100px */
.tri-eco-widget__ghost {
	height: 5px;
	border-radius: var(--tri-radius-pill);
	background-color: rgba(255, 255, 255, 0.3);
	margin-block-start: var(--tri-space-9);
}

.tri-eco-widget__ghost + .tri-eco-widget__ghost {
	background-color: rgba(255, 255, 255, 0.18);
	margin-block-start: var(--tri-space-6);
}

/* reference: #FFFFFF; radius 6px; padding 8px 10px; margin-top:11px; 12px/1.4 #3A3F49 */
.tri-eco-widget__reply {
	background-color: var(--tri-color-white);
	border-radius: var(--tri-radius-6);
	padding: var(--tri-space-8) var(--tri-space-10);
	margin-block-start: var(--tri-space-11);
	font-size: var(--tri-fs-12);
	line-height: var(--tri-lh-1-4);
	color: var(--tri-color-ink-secondary);
}

/* ====================================================================
 * КАК МЫ РАБОТАЕМ
 * reference: контейнер padding:104px 0 92px; фон #FFFFFF
 * ================================================================== */

/* reference: 44px/700; ls -0.022em */
.tri-home-process__title {
	font-size: var(--tri-fs-44);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-022);
	margin: 0;
}

/* reference: 15px/700 #6B7280 */
/* reference: 14.5px/1.5 #5A6270; margin-top:10px */
/* ====================================================================
 * КОМАНДА
 * reference: контейнер padding:128px 0 0; grid 380px 1fr; gap:48px
 * ================================================================== */

.tri-home-team {
	/* reference (v2): сплошной белый */
	background-color: var(--tri-color-white);
}

.tri-home-team__grid {
	display: grid;
	gap: var(--tri-space-40); /* reference (v2): 40px */
}

/* reference: 13px/700 #12295C; gap:12px; штрих 34x2 #F8B327 */
.tri-eyebrow-rule {
	display: flex;
	align-items: center;
	gap: var(--tri-space-12);
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
}

.tri-eyebrow-rule::after {
	content: "";
	width: 34px;
	height: 2px;
	background-color: var(--tri-color-accent);
	flex-shrink: 0;
}

/* reference: 34px/1.16/700 #12295C; ls -0.02em; margin-top:16px */
.tri-home-team__title {
	font-size: var(--tri-fs-32);
	line-height: var(--tri-lh-1-16);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
	margin-block-start: var(--tri-space-16);
	letter-spacing: var(--tri-ls-n0-02);
	overflow-wrap: anywhere;
}

/* reference: выделение внутри заголовка — #2A56B8 */
.tri-home-team__title em {
	font-style: normal;
	color: var(--tri-color-link-2a56b8);
}

/* reference: 16.5px/1.55 #5A6270; margin-top:18px; max-width:64ch */
.tri-home-team__text {
	font-size: var(--tri-fs-16-5);
	line-height: var(--tri-lh-1-55);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-18);
	max-width: var(--tri-measure);
}

/* reference: #12295C; radius 14px; padding 24px 26px; margin-top:30px */
.tri-home-team__stat {
	background-color: var(--tri-color-navy);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-22) var(--tri-space-24); /* reference (v2) */
	margin-block-start: var(--tri-space-30);
}

.tri-home-team__stat-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--tri-space-16);
}

/* reference: 40px/700 #F8B327; lh1; ls -0.02em */
.tri-home-team__stat-value {
	font-size: var(--tri-fs-34); /* reference (v2): 34px */
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-accent);
	line-height: var(--tri-lh-1);
	letter-spacing: var(--tri-ls-n0-02);
	font-variant-numeric: tabular-nums lining-nums;
}

.tri-home-team__stat-icon {
	color: var(--tri-color-border-8fa6d6);
	flex-shrink: 0;
}

/* reference: 14.5px/1.45 #FFFFFF; w600; margin-top:12px */
.tri-home-team__stat-text {
	font-size: var(--tri-fs-14-5);
	line-height: var(--tri-lh-1-45);
	color: var(--tri-color-white);
	font-weight: var(--tri-fw-600);
	margin-block-start: var(--tri-space-12);
}

/* reference: #F8B327; radius 14px; padding 20px 26px; margin-top:14px; 16px/700 */
.tri-home-team__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-16);
	background-color: var(--tri-color-accent);
	color: var(--tri-color-ink);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-20) var(--tri-space-26);
	margin-block-start: var(--tri-space-14);
	font-size: var(--tri-fs-16);
	font-weight: var(--tri-fw-700);
	text-decoration: none;
	transition:
		transform var(--tri-duration-32) var(--tri-ease),
		box-shadow var(--tri-duration-32) var(--tri-ease);
}

.tri-home-team__cta:hover,
.tri-home-team__cta:focus-visible {
	color: var(--tri-color-ink);
	transform: translateY(-2px);
	box-shadow: var(--tri-shadow-accent-30-3);
}

/* reference: repeat(3,1fr); gap:16px */
.tri-home-team__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--tri-space-14); /* reference (v2): 14px */
}

/* reference: radius 14px; aspect-ratio 1/1; bg #EDF2FD */
.tri-member {
	position: relative;
	border-radius: var(--tri-radius-14);
	overflow: hidden;
	background-color: var(--tri-color-surface-edf2fd);
	aspect-ratio: 1 / 1;
	transition:
		transform var(--tri-duration-32) var(--tri-ease),
		box-shadow var(--tri-duration-32) var(--tri-ease);
}

.tri-member:hover {
	transform: translateY(-2px);
	box-shadow: var(--tri-shadow-navy-56-18);
}

.tri-member__photo {
	position: absolute;
	inset: 0;
}

.tri-member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* reference: заглушка фото — #EDF2FD; 12px/700 #6B7280 */
.tri-member__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--tri-space-12);
	background-color: var(--tri-color-surface-edf2fd);
	color: var(--tri-color-muted-soft);
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
}

/* reference: linear-gradient(180deg,rgba(4,18,46,0) 46%,rgba(4,18,46,0.55) 68%,rgba(4,18,46,0.92) 100%) */
.tri-member__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		180deg,
		rgba(4, 18, 46, 0) 46%,
		rgba(4, 18, 46, 0.55) 68%,
		rgba(4, 18, 46, 0.92) 100%
	);
}

/* reference: top/left 14px; gradient #EDAA2A -> #F8B327; radius 6px; padding 6px 11px */
.tri-member__tag {
	position: absolute;
	top: var(--tri-space-14);
	left: var(--tri-space-14);
	background-color: var(--tri-color-accent);
	color: var(--tri-color-ink);
	font-size: var(--tri-fs-11-5);
	font-weight: var(--tri-fw-700);
	border-radius: var(--tri-radius-6);
	padding: var(--tri-space-6) var(--tri-space-11);
	max-width: calc(100% - 28px);
	line-height: var(--tri-lh-1-25);
}

/* reference: padding:20px 20px 22px */
.tri-member__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--tri-space-14) var(--tri-space-16); /* reference (v2) */
}

/* reference: 19px/700 #FFFFFF; ls -0.012em */
.tri-member__name {
	font-size: var(--tri-fs-15); /* reference (v2): 15px */
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	letter-spacing: var(--tri-ls-n0-012);
}

/* reference: 34x2 #F8B327; margin:9px 0 10px */
.tri-member__rule {
	width: 24px;
	height: 2px;
	background-color: var(--tri-color-accent);
	margin: var(--tri-space-9) 0 var(--tri-space-10);
}

/* reference: 13px/700 #FFFFFF; lh1.35 */
.tri-member__role {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	line-height: var(--tri-lh-1-35);
}

/* reference: 12.5px/500 #C8CDD6; margin-top:5px; lh1.35 */
.tri-member__spec {
	font-size: var(--tri-fs-11-5);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-on-dark-c8cdd6);
	margin-block-start: var(--tri-space-5);
	line-height: var(--tri-lh-1-35);
}

@media (min-width: 1024px) {
	/* reference: grid-template-columns:380px 1fr */
	.tri-home-team__grid {
		grid-template-columns: 320px minmax(0, 1fr);
	}

	.tri-home-team__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ====================================================================
 * КЕЙСЫ
 * reference: контейнер padding:160px 0 96px; grid 340px 1fr; gap:56px
 * ================================================================== */

.tri-home-cases {
	/* reference (v2): сплошной #F3F7FE */
	background-color: var(--tri-color-surface-f3f7fe);
}

.tri-home-cases__grid {
	display: grid;
	gap: var(--tri-space-40); /* reference (v2): 40px */
	align-items: start;
}

/* reference: position:sticky; top:140px */
.tri-home-cases__aside {
	position: static;
}

/* reference: 40px/1.14/700; ls -0.022em */
.tri-home-cases__title {
	font-size: var(--tri-fs-40);
	line-height: var(--tri-lh-1-14);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-022);
	margin: 0;
}

/* reference: gap:18px; margin-top:32px */
.tri-home-cases__stats {
	display: grid;
	/* В референсе правок 14.09 показатели стоят друг под другом —
	   так узкая левая колонка отдаёт ширину карточкам. */
	grid-template-columns: 1fr;
	gap: var(--tri-space-20);
	margin-block-start: var(--tri-space-32);
}

/* reference: 38px/800 #16181D */
.tri-home-cases__stat-value {
	font-size: var(--tri-fs-38);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	font-variant-numeric: tabular-nums lining-nums;
}

/* reference: 14.5px/600 #5A6270 */
.tri-home-cases__stat-label {
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted);
}

.tri-home-cases__link {
	margin-block-start: var(--tri-space-30); /* reference: margin-top:30px */
	padding-block-end: 0;
}

/* reference: repeat(3,1fr); gap:18px */
.tri-home-cases__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--tri-space-14); /* reference (v2): 14px */
}

/* reference: #FFFFFF; border rgba(18,41,92,0.10); radius 20px */
.tri-case {
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid rgba(18, 41, 92, 0.1);
	border-radius: var(--tri-radius-20);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition:
		transform var(--tri-duration-32) var(--tri-ease),
		box-shadow var(--tri-duration-32) var(--tri-ease);
}

.tri-case:hover,
.tri-case:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--tri-shadow-navy-34-10);
}

/* reference: height:210px; bg #EDF2FD */
.tri-case__media {
	height: 210px;
	flex-shrink: 0;
	background-color: var(--tri-color-surface-edf2fd);
}

.tri-case__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* reference: padding:24px 26px 26px; gap:10px */
.tri-case__body {
	padding: var(--tri-space-24) var(--tri-space-26) var(--tri-space-26);
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-10);
	flex: 1;
}

.tri-case__meta {
	display: flex;
	gap: var(--tri-space-10);
	align-items: center;
	flex-wrap: wrap;
}

/* reference: 12px/700 #12295C; bg #EDF2FD; radius 6px; padding 4px 10px */
.tri-case__cat {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
	background-color: var(--tri-color-surface-edf2fd);
	border-radius: var(--tri-radius-6);
	padding: var(--tri-space-4) var(--tri-space-10);
}

/* reference: 12.5px/600 #6B7280 */
.tri-case__region {
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted-soft);
}

/* reference: 19px/800 #16181D; lh1.3; margin-top:2px */
.tri-case__title {
	font-size: var(--tri-fs-19);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	line-height: var(--tri-lh-1-3);
	margin: 2px 0 0;
}

/* reference: 13.5px/700 #5A6270 */
.tri-case__client {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted);
}

/* reference: border-top 1px #EBEDF1; padding-top:12px; margin-top:4px */
.tri-case__block {
	border-top: var(--tri-border-width) solid var(--tri-color-divider);
	padding-block-start: var(--tri-space-12);
}

.tri-case__block--first {
	margin-block-start: var(--tri-space-4);
}

/* reference: 13px/700 #5A6270 */
.tri-case__block-title {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-muted);
}

/* reference: gap:6px; margin-top:8px */
.tri-case__list {
	list-style: none;
	margin: var(--tri-space-8) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-6);
}

/* reference: 14px/1.45 #3A3F49; gap:9px */
.tri-case__list li {
	display: flex;
	gap: var(--tri-space-9);
	align-items: flex-start;
	font-size: var(--tri-fs-14);
	line-height: var(--tri-lh-1-45);
	color: var(--tri-color-ink-secondary);
}

/* reference: точка 5px #12295C; margin-top:7px */
.tri-case__list--dot li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: var(--tri-radius-circle);
	background-color: var(--tri-color-navy);
	flex-shrink: 0;
	margin-block-start: 7px;
}

/* reference: галочка #1C8A4C */
.tri-case__list--check svg {
	flex-shrink: 0;
	margin-block-start: 2px;
	color: var(--tri-color-success-1c8a4c);
}

/* reference: 13.5px/800 #16181D; gap:7px; margin-top:auto; padding-top:14px */
/* Настоящая кнопка, а не текстовая ссылка: правки 14.09 требуют
   одинаковый CTA на всех карточках кейсов. Вид берём у общей кнопки
   (.tri-btn--outline), здесь остаётся только раскладка внутри карточки. */
.tri-case__more {
	margin-block-start: auto;
	align-self: flex-start;
	margin-block-end: var(--tri-space-4);
}

.tri-case__more svg {
	color: var(--tri-color-navy);
}

@media (min-width: 1024px) {
	/* reference: grid-template-columns:340px 1fr */
	.tri-home-cases__grid {
		/* Левая колонка уже, чем была: по правкам 14.09 карточки кейсов
		   должны быть шире и ближе к пропорциям референса. */
		grid-template-columns: 300px minmax(0, 1fr);
	}

	.tri-home-cases__aside {
		position: sticky;
		top: calc(var(--tri-header-height) + var(--tri-space-22));
	}
}

/*
 * Три карточки в ряд — только когда на них хватает ширины.
 *
 * Левая колонка забирает 340px, и на 1024px трём карточкам оставалось
 * по 165px: заголовок проекта ломался по слогам, а перечень работ
 * превращался в столбик из одного-двух слов. В макете ряд считается от
 * контейнера 1640px, где на карточку приходится около 400px. Поэтому
 * до 1440px строим две колонки — там карточка получает около 390px,
 * как в макете, — а три включаем, когда на каждую снова приходится
 * больше 300px.
 */
@media (min-width: 1024px) and (max-width: 1439.98px) {
	.tri-home-cases__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1440px) {
	.tri-home-cases__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ====================================================================
 * ГЕОГРАФИЯ ПРОЕКТОВ
 * reference: контейнер padding:112px 0 0; grid 380px 1fr; gap:64px
 * ================================================================== */

.tri-home-geo__grid {
	display: grid;
	gap: var(--tri-space-40); /* reference (v2): 40px */
	align-items: center;
}

/* reference: 40px/1.15/700; ls -0.02em */
.tri-home-geo__title {
	font-size: var(--tri-fs-36); /* reference (v2): 36px */
	line-height: var(--tri-lh-1-15);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-02);
	margin: 0;
}

/* reference: 16px/1.6 #5A6270; margin-top:16px; max-width:64ch */
.tri-home-geo__text {
	font-size: var(--tri-fs-16);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-16);
	max-width: var(--tri-measure);
}

/* reference: gap:36px; margin-top:26px */
.tri-home-geo__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-36);
	margin-block-start: var(--tri-space-26);
}

/* reference: 34px/800 #16181D; ls -0.02em */
.tri-home-geo__stat-value {
	font-size: var(--tri-fs-34);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-02);
	font-variant-numeric: tabular-nums lining-nums;
}

/* reference: 13px/500 #6B7280; margin-top:4px */
.tri-home-geo__stat-label {
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-muted-soft);
	margin-block-start: var(--tri-space-4);
}

/* reference: margin-top:24px; строки с border-top 1px #EBEDF1; padding:11px 0 */
.tri-home-geo__rows {
	list-style: none;
	margin: var(--tri-space-24) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.tri-home-geo__row {
	border-top: var(--tri-border-width) solid var(--tri-color-divider);
	padding-block: var(--tri-space-11);
}

/* reference: 15.5px/800 #16181D */
.tri-home-geo__row-title {
	font-size: var(--tri-fs-15-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
}

/* reference: 13.5px/600 #6B7280; margin-top:3px */
.tri-home-geo__row-note {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-600);
	color: var(--tri-color-muted-soft);
	margin-block-start: var(--tri-space-3);
}

.tri-home-geo__link {
	display: inline-flex;
	margin-block-start: var(--tri-space-20);
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	text-decoration: none;
}

/* Карта России вынесена в assets/css/components/map.css:
   тот же компонент используется на странице проектов. */

@media (min-width: 1024px) {
	/* reference: grid-template-columns:380px 1fr */
	.tri-home-geo__grid {
		grid-template-columns: 320px minmax(0, 1fr);
	}
}

/* ====================================================================
 * ОТЗЫВЫ
 * reference: контейнер padding:112px 0 0; панель radius 24px;
 * padding 44px 46px 46px; градиент #16305F -> #12295C 46% -> #0F2450
 * ================================================================== */

.tri-home-reviews {
	/* reference (v2): сплошной тёмно-синий */
	background-color: var(--tri-color-navy);
}

.tri-home-reviews__panel {
	background-image: linear-gradient(
		180deg,
		var(--tri-color-navy-16305f) 0%,
		var(--tri-color-navy) 46%,
		var(--tri-color-navy-0f2450) 100%
	);
	border-radius: var(--tri-radius-24);
	padding: var(--tri-space-44) var(--tri-space-46) var(--tri-space-46);
}

.tri-home-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-40);
}

/* reference: 40px/700 #FFFFFF; ls -0.022em */
.tri-home-reviews__title {
	font-size: var(--tri-fs-32);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	letter-spacing: var(--tri-ls-n0-022);
	margin: 0;
}

/* reference: rgba(255,255,255,0.12); border rgba(255,255,255,0.22);
   radius 10px; padding 10px 16px; gap 11px */
.tri-rating-badge {
	display: flex;
	align-items: center;
	gap: var(--tri-space-11);
	background-color: rgba(255, 255, 255, 0.12);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.22);
	border-radius: var(--tri-radius-10);
	padding: var(--tri-space-10) var(--tri-space-16);
	white-space: nowrap;
	text-decoration: none;
}

.tri-rating-badge__stars {
	display: flex;
	gap: 2px;
	color: var(--tri-color-accent);
}

/* reference: 16px/700 #FFFFFF */
.tri-rating-badge__value {
	font-size: var(--tri-fs-16);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
}

/* reference: 13.5px/500 #C8CDD6 */
.tri-rating-badge__source {
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-on-dark-c8cdd6);
}

/* reference: repeat(3,1fr); gap:18px; margin-top:32px */
.tri-home-reviews__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--tri-space-14); /* reference (v2): 14px */
	margin-block-start: var(--tri-space-32);
}

/* reference: #FFFFFF; radius 14px; padding 26px 28px 24px */
.tri-review {
	background-color: var(--tri-color-white);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-26) var(--tri-space-28) var(--tri-space-24);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* reference: 12.5px/700 #2A56B8; штрих 26x2 */
.tri-review__cat {
	display: flex;
	align-items: center;
	gap: var(--tri-space-11);
	font-size: var(--tri-fs-12-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-link-2a56b8);
}

.tri-review__cat::before {
	content: "";
	width: 26px;
	height: 2px;
	background-color: var(--tri-color-link-2a56b8);
	flex-shrink: 0;
}

/* reference: кавычки 24x18 #C9CDD5; margin-top:14px */
.tri-review__quote {
	margin-block-start: var(--tri-space-14);
	color: var(--tri-color-border-c9cdd5);
}

/* reference: 15.5px/1.6 #3A3F49; w500; margin-top:14px */
.tri-review__text {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-ink-secondary);
	font-weight: var(--tri-fw-500);
	margin-block-start: var(--tri-space-14);
}

/* reference: gap:14px; margin-top:auto; padding-top:24px;
   border-top 1px rgba(18,41,92,0.09) */
.tri-review__foot {
	display: flex;
	align-items: center;
	gap: var(--tri-space-14);
	margin-block-start: auto;
	padding-block-start: var(--tri-space-24);
	border-top: var(--tri-border-width) solid rgba(18, 41, 92, 0.09);
}

/* reference: 84x28; contain; bg #EDF2FD */
.tri-review__logo {
	width: 84px;
	height: 28px;
	flex-shrink: 0;
	background-color: var(--tri-color-surface-edf2fd);
}

.tri-review__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* reference: 14px/700 #12295C */
.tri-review__company {
	font-size: var(--tri-fs-14);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
}

/* reference: 12px/500 #6B7280; margin-top:2px */
.tri-review__source {
	font-size: var(--tri-fs-12);
	font-weight: var(--tri-fw-500);
	color: var(--tri-color-muted-soft);
	margin-block-start: 2px;
}

/* reference: 13px/700 #12295C; gap:7px */
.tri-review__link {
	display: flex;
	align-items: center;
	gap: var(--tri-space-7);
	font-size: var(--tri-fs-13);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-navy);
	white-space: nowrap;
	text-decoration: none;
}

.tri-review__link:hover {
	color: var(--tri-color-link-2a56b8);
}

/* reference: rgba(255,255,255,0.07); border rgba(255,255,255,0.16);
   radius 14px; padding 26px 28px; margin-top:18px */
.tri-home-reviews__clients {
	background-color: rgba(255, 255, 255, 0.07);
	border: var(--tri-border-width) solid rgba(255, 255, 255, 0.16);
	border-radius: var(--tri-radius-14);
	padding: var(--tri-space-26) var(--tri-space-28);
	margin-block-start: var(--tri-space-18);
}

.tri-home-reviews__clients-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tri-space-40);
}

/* reference: 20px/700 #FFFFFF; ls -0.012em */
.tri-home-reviews__clients-title {
	font-size: var(--tri-fs-20);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-white);
	letter-spacing: var(--tri-ls-n0-012);
	margin: 0;
}

/* reference: 13.5px/700 #C8CDD6; gap:8px */
.tri-home-reviews__clients-link {
	display: flex;
	align-items: center;
	gap: var(--tri-space-8);
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-on-dark-c8cdd6);
	text-decoration: none;
}

.tri-home-reviews__clients-link:hover {
	color: var(--tri-color-white);
}

/* reference: repeat(4,1fr); gap:12px; margin-top:20px */
.tri-home-reviews__logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: var(--tri-space-12);
	margin-block-start: var(--tri-space-20);
	list-style: none;
	padding: 0;
}

/* reference: #FFFFFF; radius 10px; height 76px; padding 14px 18px */
.tri-home-reviews__logo {
	background-color: var(--tri-color-white);
	border-radius: var(--tri-radius-10);
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--tri-space-14) var(--tri-space-18);
}

.tri-home-reviews__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

@media (max-width: 767px) {
	.tri-home-reviews__panel {
		padding: var(--tri-space-26) var(--tri-space-20) var(--tri-space-28);
	}
}

/* ====================================================================
 * AI-ИНСТРУМЕНТЫ
 * reference: контейнер padding:128px 0 0; max-width заголовка 740px
 * ================================================================== */

/* reference: #F5F8FF; border rgba(18,41,92,0.09); radius 14px;
   padding 26px 28px; gap 12px */

/* ====================================================================
 * FAQ
 * reference: контейнер padding:160px 0 96px; grid 380px 1fr; gap:64px
 * ================================================================== */

.tri-home-faq {
	background-image: linear-gradient(
		180deg,
		#ffffff 0%,
		var(--tri-color-surface-f7faff) 16%,
		var(--tri-color-surface-edf3fd) 52%,
		var(--tri-color-surface-f6f9fe) 100%
	);
}

.tri-home-faq__grid {
	display: grid;
	gap: var(--tri-space-64);
}

/* reference: 40px/700; ls -0.022em */
.tri-home-faq__title {
	font-size: var(--tri-fs-40);
	font-weight: var(--tri-fw-700);
	color: var(--tri-color-ink);
	letter-spacing: var(--tri-ls-n0-022);
	margin: 0;
}

/* reference: 16px/1.6 #5A6270; margin-top:16px; max-width:64ch */
.tri-home-faq__text {
	font-size: var(--tri-fs-16);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin-block-start: var(--tri-space-16);
	max-width: var(--tri-measure);
}

.tri-home-faq__link {
	display: inline-flex;
	align-items: center;
	gap: var(--tri-space-8);
	margin-block-start: var(--tri-space-18);
	font-size: var(--tri-fs-14-5);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	text-decoration: none;
}

/* reference: gap:10px */
.tri-faq {
	display: flex;
	flex-direction: column;
	gap: var(--tri-space-10);
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* reference: #FFFFFF; border 1px #E2E5EA (открытый — #FFFFFF); radius 14px */
.tri-faq__item {
	background-color: var(--tri-color-white);
	border: var(--tri-border-width) solid var(--tri-color-border-e2e5ea);
	border-radius: var(--tri-radius-14);
	overflow: hidden;
	transition: border-color var(--tri-duration-28) var(--tri-ease);
}

.tri-faq__item:has(.tri-faq__q[aria-expanded="true"]) {
	border-color: var(--tri-color-white);
}

/* reference: padding 20px 24px; gap:20px */
.tri-faq__q {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--tri-space-20);
	padding: var(--tri-space-20) var(--tri-space-24);
	text-align: left;
	font-family: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

/* reference: 17px/800 #16181D; lh1.4 */
.tri-faq__q-text {
	font-size: var(--tri-fs-17);
	font-weight: var(--tri-fw-800);
	color: var(--tri-color-ink);
	line-height: var(--tri-lh-1-4);
}

/* reference: знак «+» 21px/700 #16181D, поворот на 45° при раскрытии */
.tri-faq__sign {
	flex-shrink: 0;
	color: var(--tri-color-ink);
	transition: transform var(--tri-duration-32) var(--tri-ease);
}

.tri-faq__q[aria-expanded="true"] .tri-faq__sign {
	transform: rotate(45deg);
}

/* reference: padding:0 24px 20px */
.tri-faq__a {
	padding: 0 var(--tri-space-24) var(--tri-space-20);
}

.tri-faq__a[hidden] {
	display: none;
}

/* reference: 15.5px/1.6 #5A6270; max-width:820px */
.tri-faq__a p {
	font-size: var(--tri-fs-15-5);
	line-height: var(--tri-lh-1-6);
	color: var(--tri-color-muted);
	margin: 0;
	max-width: 820px;
}

@media (min-width: 1024px) {
	/* reference: grid-template-columns:380px 1fr */
	.tri-home-faq__grid {
		grid-template-columns: 380px minmax(0, 1fr);
	}
}

/* ====================================================================
 * ФИНАЛЬНЫЙ КОНТАКТ
 * reference: секция padding:128px 0 0; панель radius 24px;
 * grid 1.4fr 1fr; левая часть padding 56px 60px
 * ================================================================== */

/* reference: rgba(255,255,255,0.04); border-left 1px rgba(255,255,255,0.1);
   padding 56px 48px; gap 18px */

/* reference: rgba(255,255,255,0.06); border rgba(255,255,255,0.12);
   radius 10px; padding 14px 18px; 14px/600 #C8CDD6 */

/* ====================================================================
 * Явные сетки desktop.
 *
 * auto-fit удобен для адаптива, но при фиксированном числе элементов
 * создаёт лишнюю пустую колонку и ломает пропорции макета. На desktop
 * число колонок задаётся точно, как в reference.
 * ================================================================== */

@media (min-width: 1024px) {
	/* reference: repeat(4,1fr) */
	.tri-home-eco__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	/* reference: repeat(5,1fr) */
	/* reference: repeat(4,1fr) */
	.tri-home-reviews__logos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.tri-home-eco__grid,
	.tri-home-reviews__list,
	.tri-home-team__cards,
	.tri-home-cases__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/* ====================================================================
 * «КАК МЫ РАБОТАЕМ» — МАРШРУТ ЭТАПОВ
 *
 * reference (v2): холст 1200x460, серая дорожка 10px #DCE4F5, поверх
 * неё синяя пройденная часть 4px #12295C, жёлтый бегунок 26px и пять
 * точек по 20px. Кривая тянется под ширину контейнера
 * (preserveAspectRatio="none"), поэтому точки и подписи расставлены в
 * процентах от того же холста — они едут вместе с ней.
 * ================================================================== */

.tri-home-process__title {
	font-family: var(--tri-font-display);
	font-size: var(--tri-fs-40);
	line-height: var(--tri-lh-1-12);
	font-weight: var(--tri-fw-700);
	letter-spacing: var(--tri-ls-n0-022);
	color: var(--tri-color-ink);
	margin: 0;
}

.tri-home-process__route {
	position: relative;
	margin-block-start: var(--tri-space-36);
}

/* Шапка блока: заголовок и подсказка стоят слева сверху. */
.tri-home-process__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--tri-space-12);
}

.tri-home-process__svg,
.tri-home-process__hint {
	display: none;
}

/* Список этапов: до планшета — обычный вертикальный список. */
.tri-home-process__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--tri-space-24);
}












/* Маршрут появляется там, где кривая читается: ниже 1024px этапы
   остаются вертикальным списком. */
@media (min-width: 1024px) {
	.tri-home-process__route {
		block-size: 460px;
	}
	.tri-home-process__svg {
		display: block;
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		overflow: visible;
	}
	.tri-home-process__track {
		fill: none;
		stroke: var(--tri-color-route-track);
		stroke-width: 10;
		stroke-linecap: round;
	}
	.tri-home-process__progress {
		fill: none;
		stroke: var(--tri-color-navy);
		stroke-width: 4;
		stroke-linecap: round;
		transition: stroke-dasharray 0.8s var(--tri-ease);
	}
	.tri-home-process__steps {
		display: block;
		gap: 0;
	}
	.tri-home-process__hint {
		display: flex;
		align-items: center;
		gap: var(--tri-space-8);
		font-size: var(--tri-fs-12);
		font-weight: var(--tri-fw-600);
		color: var(--tri-color-muted-soft);
	}
	.tri-home-process__hint-dot {
		inline-size: 10px;
		block-size: 10px;
		border-radius: 50%;
		border: 2px solid var(--tri-color-navy);
	}

	/* Пройденные этапы остаются отмеченными: линия дотянулась до
	   выбранной точки, а всё, что было до неё, уже позади. */
	.tri-home-process .tri-process-step.is-passed .tri-process-step__dot {
		background-color: var(--tri-color-navy);
		box-shadow: 0 0 0 6px rgba(18, 41, 92, 0.14);
	}
}

/* Подложка секции «Единая платформа» — общая фотография под очень
   светлой вуалью. reference (v2): снимок относится ко всей секции. */
.tri-home-eco__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.tri-home-eco__bg img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.tri-home-eco__veil {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: linear-gradient(
		180deg,
		rgba(240, 245, 253, 0.94) 0%,
		rgba(232, 239, 251, 0.9) 55%,
		rgba(232, 239, 251, 0.97) 100%
	);
}

.tri-home-eco > .tri-container {
	position: relative;
	z-index: 1;
}

.tri-home-eco__head-main {
	max-width: 640px; /* reference (v2): 640px */
}

/* На узком экране плашка переносится на свою строку и переносит текст:
   с flex-shrink:0 она выходила за правый край на 320px. */
.tri-home-eco__pill {
	max-width: 100%;
	white-space: normal;
}

@media (min-width: 768px) {
	.tri-home-eco__pill {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------
 * ЦЕЛИ НАЖАТИЯ НА СЕНСОРНЫХ ЭКРАНАХ (мобильный этап 14.09)
 *
 * Ссылки-действия внутри карточек набраны мелким шрифтом: по высоте
 * они занимали 20–26px, и палец попадал в них через раз. Размер
 * шрифта и вид ссылки не меняются — увеличивается только область,
 * по которой можно нажать.
 * ---------------------------------------------------------------- */
@media (max-width: 1023px) {
	.tri-svc-card__more,
	.tri-home-cases__link,
	.tri-home-geo__link {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}
}