/* ================================================================
   ITB homepage — company-level layer.
   Всё под .itb-home. Подключать последним, после itb-production.min.css.
   Глобальные селекторы (.card, .btn, .row, h2, .container) не используются.
   ================================================================ */

/* ---------- Font Awesome: тот же шрифт, что и на /products/Security_Capsule_SIEM/
   fonts/css/all.css новее, чем шрифты в fonts/webfonts/. Duotone-иконки
   выводят один и тот же символ дважды и рассчитывают на лигатуру в шрифте,
   которая складывает пару во второй слой. В старом duotone такой лигатуры
   нет — каждая стрелка рисуется двойной. Подходящий файл лежит в
   fonts/2024/webfonts/. Ровно это же объявление есть в siem-stripe.css.
   Должно идти после all.css в каскаде, иначе не перебьёт. */
@font-face {
	font-family: 'Font Awesome 6 Duotone';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("/bitrix/templates/itb/fonts/2024/webfonts/fa-duotone-900.woff2") format("woff2"),
	     url("/bitrix/templates/itb/fonts/2024/webfonts/fa-duotone-900.ttf") format("truetype");
}

/* Стрелки у ссылок и кнопок ведёт общий примитив в itb-design-system.css:
   сдвиг на 3px за .16s вместо прежней myIconAnimation длиной 1s. */

.itb-home {
	/* ---------- canonical site grid --------------------------------
	   Единая геометрия сайта. 1320 — внешний structural grid, к нему
	   привязаны левый и правый anchors всех секций. 820 — интро секции,
	   720 — читаемая колонка: на 1320 текст растягивать нельзя.
	   1440 — исключение для крупного визуала, а не второй контейнер.

	   Замер SC SIEM: страница сидит в общесайтовом .main_content
	   (max-width 1627px, отступ до контента 65px), то есть её сетка
	   текучая и на 1440 даёт 1295px, на 1920 — 1497px. Совпадение
	   1:1 на всех ширинах невозможно без правки .main_content, а её
	   в этом этапе не трогаем. Расхождения замерены в отчёте.

	   Сами значения контейнеров и отступа живут в itb-design-system.css:
	   здесь только потребление. Ступень gutter (65px от 576px, 40px ниже)
	   тоже задана там — прежний clamp давал на 768–1280 отступ на 7–30px
	   меньше эталонного и ломал совпадение краёв. */

	/* ---------- локальные роли цвета -------------------------------
	   Имена --home-* оставлены как есть: они читаются по месту
	   применения и их правда много. Значений за ними больше нет —
	   каждое ссылается на общий токен. Фолбэк повторяет прежнее
	   значение: если файл дизайн-системы не доехал на прод, страница
	   отрисуется как до перехода, а не сломается. */
	--home-text: var(--itb-color-text, #161616);
	--home-muted: var(--itb-color-muted, #6f6f6f);
	--home-line: var(--itb-color-border, #e5e5e5);
	--home-line-soft: var(--itb-color-divider, #eceef1);
	--home-soft: var(--itb-color-surface-muted, #f7f7f7);
	/* Фон секционных полос. Отдельно от --home-soft: тот используется
	   для мелких поверхностей — чипов, плашек, ступеней сцен, — и менять
	   его вместе с полосами означало бы двигать сразу всё. */
	--home-band: var(--itb-color-surface-tint, #f7f8fa);
	--home-band-accent: var(--itb-color-accent-surface, rgba(220, 53, 69, .06));
	--home-red: var(--itb-color-accent, #dc3545);
	--home-red-dark: var(--itb-color-accent-hover, #c20f13);
	--home-blue: var(--itb-color-ink, #0a2540);
	--home-radius: var(--itb-radius, 6px);
	--home-radius-lg: var(--itb-radius-lg, 12px);
	--home-ease: var(--itb-ease, cubic-bezier(.16, 1, .3, 1));
	color: var(--home-text);
	background: var(--itb-color-surface, #fff);
}

/* --- защита от legacy-глобальных правил шаблона -------------------- */

/* :where() обнуляет вклад тега в специфичность: правила ниже весят 0,1,0.
   Этого достаточно, чтобы перебить глобальные ul/li/button/a/h1 из
   itb-production.min.css и style.min.css (0,0,1), но собственные классы
   .itb-home-* остаются сильнее и не требуют лишних префиксов. */
.itb-home :where(ul, ol) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.itb-home :where(li)::marker {
	content: none;
}

.itb-home :where(img, svg, video) {
	display: block;
	max-width: 100%;
}

.itb-home :where(img, video) {
	height: auto;
}

/* Из-под сброса выведены носители общих примитивов. :not() внутри :where()
   веса тоже не добавляет, а без этого исключения сброс — он лежит в файле
   главной, то есть позже — забирал бы у .itb-btn и .itb-chip фон, рамку и
   внутренние отступы при равной специфичности. Остальные кнопки и ссылки
   главной на сбросе держатся и из него не выводятся. */
.itb-home :where(button:not(.itb-btn, .itb-home-btn, .itb-chip, .itb-home-filter)) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: inherit;
}

.itb-home :where(a:not(.itb-link, .itb-home-link, .itb-btn, .itb-home-btn)) {
	color: inherit;
}

.itb-home :where(p) {
	margin: 0;
}

/* Вес 500 и наследуемый цвет заголовка — как на /products/Security_Capsule_SIEM/,
   чтобы главная читалась как та же система, а не как отдельный сайт. */
.itb-home :where(h1, h2, h3, h4) {
	margin: 0;
	font-weight: 500;
	text-transform: none;
}

/* --- каркас секций ------------------------------------------------- */

.itb-home-section {
	padding: clamp(56px, 6.5vw, 112px) 0;
}

/* Фоновый ритм: белое — полоса — белое. Полосы стоят на Products,
   Cases и Insights, между ними секции остаются белыми. Тёмных блоков нет. */
.itb-home-section--soft {
	background: var(--home-band);
}

.itb-home-section--flush {
	padding-top: 0;
}

/* Единственный shell главной. Через width: min(), а не max-width +
   padding: тогда 1320 — это ширина самого контента, и левый край секции
   совпадает с левым краем текста, без скрытого внутреннего отступа. */
.itb-home-wrap {
	width: min(var(--itb-container, 1320px), calc(100% - var(--itb-gutter, 65px) * 2));
	margin-inline: auto;
}

/* Исключение для крупного визуала. Заголовки, копия и anchors остаются
   на 1320 — это не второй постоянный контейнер. */
.itb-home-wrap--wide {
	width: min(var(--itb-container-wide, 1440px), calc(100% - var(--itb-gutter, 65px) * 2));
}

.itb-home-head {
	max-width: var(--itb-content, 820px);
	margin-bottom: clamp(32px, 3.5vw, 56px);
}

/* Читаемая колонка для длинных абзацев внутри широких секций */
.itb-home-reading {
	max-width: var(--itb-reading, 720px);
}

/* --- типографика ---------------------------------------------------
   .itb-home-eyebrow задан общим примитивом в itb-design-system.css.

   Кегли заголовков берутся из общесайтовой рампы (токены --itb-size-h*):
   до перехода главная объявляла свои clamp, из которых h1 всё равно был
   мёртвым кодом — itb-production.min.css задаёт h1 через !important, —
   а h2 на 1440 давал 52px против 36.8px эталона. Разные значения для
   одной роли убраны; межбуквенное и интерлиньяж тоже из токенов. */

.itb-home-h1 {
	font-size: var(--itb-size-h1, clamp(2rem, 2rem + 3.18182vw - 10.1818px, 3.75rem));
	line-height: var(--itb-lh-h1, 1.05);
	letter-spacing: var(--itb-tracking-h1, -.035em);
	margin-bottom: 1.25rem;
}

.itb-home-h2 {
	font-size: var(--itb-size-h2, clamp(1.75rem, 1.75rem + 1.02273vw - 3.27273px, 2.3rem));
	line-height: var(--itb-lh-h2, 1.12);
	letter-spacing: var(--itb-tracking-h2, -.025em);
	margin-bottom: 1.1rem;
}

/* Вес 700 и интерлиньяж 1.3 — иерархия заголовков карточек эталона
   (.siem-case-title, .siem-bento-title). Кегль остаётся текучим:
   на главной H3 живут и в плотных карточках, и в широких блоках. */
.itb-home-h3 {
	font-size: clamp(1.15rem, 1.4vw, 1.5rem);
	font-weight: var(--itb-weight-title, 700);
	line-height: var(--itb-lh-h3, 1.3);
	letter-spacing: var(--itb-tracking-h3, -.012em);
}

.itb-home-lede {
	font-size: clamp(1rem, .3vw + .95rem, 1.125rem);
	line-height: var(--itb-lh-body, 1.62);
	color: var(--home-muted);
}

.itb-home-copy {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--home-muted);
}

.itb-home-note {
	font-size: .85rem;
	line-height: 1.5;
	color: var(--home-muted);
}

/* --- кнопки и ссылки ----------------------------------------------
   .itb-home-btn (включая --primary и --ghost), .itb-home-link и рамка
   фокуса заданы общими примитивами в itb-design-system.css. Здесь
   остаётся только раскладка группы действий — она у главной своя. */

.itb-home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: clamp(24px, 2.5vw, 36px);
}

/* ================================================================
   01 HERO
   ================================================================ */

.itb-home-hero {
	padding: clamp(40px, 5vw, 88px) 0 clamp(48px, 5.5vw, 96px);
}

.itb-home-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}

/* Мера набора задаётся каждому блоку отдельно, а не всей колонке: ch и em
   считаются от собственного font-size, поэтому общий кап на обёртке (16px)
   резал заголовок в 60px до пяти символов в строке. em вместо px — мера
   едет вместе с clamp() кегля, и заголовок всегда ломается примерно
   на том же слове. */
.itb-home-hero-copy .itb-home-h1 {
	max-width: 10em;
}

.itb-home-hero-lede {
	max-width: 30em;
}

.itb-home-hero-scene {
	/* резерв места до отрисовки SVG: CLS */
	aspect-ratio: 620 / 470;
	width: 100%;
}

.itb-home-hero-scene svg {
	width: 100%;
	height: 100%;
}

.itb-home-hero-scene text {
	font-family: inherit;
}

/* Список шагов включается вместо SVG на узких экранах (см. ADAPTIVE) */
.itb-home-hero-steps {
	display: none;
	counter-reset: home-step;
}

.itb-home-hero-step {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 1fr);
	gap: .1rem .7rem;
	padding: .8rem 0;
	border-top: 1px solid var(--home-line-soft);
	counter-increment: home-step;
	opacity: 0;
	transition: opacity .5s var(--home-ease);
}

.itb-home-hero-step::before {
	content: counter(home-step, decimal-leading-zero);
	grid-row: span 2;
	align-self: center;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--home-muted);
}

.itb-home-hero-step--own::before {
	color: var(--home-red);
}

.itb-home-hero-step-name {
	font-size: 1rem;
	font-weight: 600;
}

.itb-home-hero-step-note {
	font-size: .85rem;
	color: var(--home-muted);
}

.itb-home .is-playing .itb-home-hero-step,
.itb-home .is-complete .itb-home-hero-step {
	opacity: 1;
}

.itb-home-hero-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: clamp(32px, 3.5vw, 52px);
	border-top: 1px solid var(--home-line);
}

.itb-home-hero-trust > li {
	padding: 1.1rem 1.25rem 0 0;
}

.itb-home-trust-value {
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.itb-home-trust-label {
	display: block;
	margin-top: .3rem;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--home-muted);
}

/* ================================================================
   02 ЕДИНЫЙ КОНТУР
   ================================================================ */

.itb-home-journey-grid {
	display: grid;
	grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 56px);
	align-items: start;
}

.itb-home-journey-nav {
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--home-line);
	counter-reset: home-stage;
}

.itb-home-journey-btn {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: .7rem;
	padding: .85rem 1.1rem;
	margin-left: -1px;
	border-left: 2px solid transparent;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--home-muted);
	cursor: pointer;
	counter-increment: home-stage;
	transition: color var(--itb-motion-control, .18s ease),
		border-color var(--itb-motion-control, .18s ease),
		background-color var(--itb-motion-control, .18s ease);
}

.itb-home-journey-btn::before {
	content: counter(home-stage, decimal-leading-zero);
	flex: 0 0 auto;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--home-muted);
	opacity: .7;
}

.itb-home-journey-btn:hover {
	color: var(--home-text);
	background: rgba(0, 0, 0, .02);
}

.itb-home-journey-btn.is-active {
	color: var(--home-text);
	border-left-color: var(--home-red);
	background: #fff;
}

.itb-home-journey-btn.is-active::before {
	color: var(--home-red);
	opacity: 1;
}

.itb-home-journey-stage {
	border: 1px solid var(--home-line);
	border-radius: var(--home-radius-lg);
	background: #fff;
	padding: clamp(22px, 2.4vw, 40px);
	min-height: 320px;
}

.itb-home-journey-panel {
	display: none;
}

.itb-home-journey-panel.is-active {
	display: block;
}

.itb-home-journey-panel-title {
	font-size: clamp(1.3rem, 1.8vw, 1.75rem);
	letter-spacing: -.02em;
	margin-bottom: .75rem;
}

.itb-home-journey-panel-copy {
	max-width: 58ch;
	margin-bottom: 1.5rem;
}

.itb-home-journey-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(16px, 2vw, 32px);
}

.itb-home-journey-items > li {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	padding: .7rem 0;
	border-top: 1px solid var(--home-line-soft);
	font-size: .95rem;
}

.itb-home-journey-items .itb-home-dot {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--home-red);
	transform: translateY(-2px);
}

.itb-home-journey-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.4rem;
}

/* .itb-home-tag задан общим примитивом в itb-design-system.css. */

/* ================================================================
   03 ПРОДУКТЫ
   ================================================================ */

.itb-home-products {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	gap: clamp(16px, 1.6vw, 24px);
	align-items: stretch;
}

.itb-home-product {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--home-line);
	border-radius: var(--home-radius-lg);
	background: #fff;
	padding: clamp(22px, 2.4vw, 40px);
}

.itb-home-product--lead {
	background: var(--home-soft);
	border-color: var(--home-line-soft);
}

.itb-home-product--lead .itb-home-product-title {
	font-size: clamp(1.6rem, 2.6vw, 2.6rem);
}

.itb-home-product-side {
	display: grid;
	gap: clamp(16px, 1.6vw, 24px);
	grid-template-rows: 1fr 1fr;
}

/* .itb-home-product-kicker — тот же eyebrow, задан общим примитивом. */

.itb-home-product-title {
	font-size: clamp(1.4rem, 2.1vw, 2.1rem);
	letter-spacing: -.025em;
	line-height: 1.12;
	margin-bottom: .7rem;
}

.itb-home-product-copy {
	max-width: 52ch;
	margin-bottom: 1.5rem;
}

.itb-home-product-foot {
	margin-top: auto;
	padding-top: 1.4rem;
}

.itb-home-product-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--home-line);
	margin-bottom: 1.5rem;
}

.itb-home-product-metric {
	padding: 1rem 1rem 0 0;
}

.itb-home-product-metric-value {
	display: block;
	font-size: clamp(1.25rem, 1.7vw, 1.6rem);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1;
}

.itb-home-product-metric-label {
	display: block;
	margin-top: .35rem;
	font-size: .78rem;
	line-height: 1.4;
	color: var(--home-muted);
}

.itb-home-product-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.4rem;
}

/* --- micro-proof: События -> Корреляция -> Инцидент --------------- */

/* Ведущая карточка тянется по высоте правой колонки, а её подвал прибит
   к низу через margin-top: auto. Без flex-grow запас высоты собирался
   в пустую полосу между схемой и метриками. Теперь его забирает панель
   схемы и растягивает собственные интервалы: подпись остаётся наверху,
   шкала — внизу, рамка читается как поле диаграммы, а не как пустой блок. */
.itb-home-microproof {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--home-line);
	border-radius: var(--home-radius);
	background: var(--home-soft);
	padding: clamp(18px, 1.8vw, 26px);
	margin-bottom: 1.6rem;
}

.itb-home-microproof-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.1rem;
}

.itb-home-microproof-label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--home-muted);
}

/* margin-block: auto забирает запас высоты растянутой карточки: подпись
   остаётся сверху, шкала со точками — снизу, значения встают по центру
   поля. При отсутствии запаса auto равен нулю, и собственные отступы
   шкалы работают как раньше. */
.itb-home-microproof-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.5vw, 24px);
	margin-block: auto;
}

.itb-home-microproof-step {
	min-width: 0;
}

.itb-home-microproof-step-name {
	display: block;
	font-size: .78rem;
	font-weight: 600;
	color: var(--home-muted);
	margin-bottom: .35rem;
}

.itb-home-microproof-step-value {
	display: block;
	font-size: clamp(1.2rem, 1.6vw, 1.55rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.itb-home-microproof-step-unit {
	display: block;
	margin-top: .3rem;
	font-size: .78rem;
	color: var(--home-muted);
}

.itb-home-microproof-track {
	position: relative;
	height: 1px;
	background: var(--home-line);
	margin-top: 1.1rem;
}

.itb-home-microproof-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--home-red);
	transition: width 1.6s var(--home-ease);
}

.itb-home-microproof.is-playing .itb-home-microproof-fill,
.itb-home-microproof.is-complete .itb-home-microproof-fill {
	width: 100%;
}

.itb-home-microproof-nodes {
	display: flex;
	justify-content: space-between;
	margin-top: -3px;
}

.itb-home-microproof-node {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--home-line);
	transition: border-color .3s var(--home-ease), background-color .3s var(--home-ease);
}

.itb-home-microproof.is-playing .itb-home-microproof-node,
.itb-home-microproof.is-complete .itb-home-microproof-node {
	border-color: var(--home-red);
	background: var(--home-red);
}

.itb-home-microproof.is-playing .itb-home-microproof-node:nth-child(2) {
	transition-delay: .6s;
}

.itb-home-microproof.is-playing .itb-home-microproof-node:nth-child(3) {
	transition-delay: 1.2s;
}

/* --- ThreatLens micro-visual -------------------------------------- */

.itb-home-tl-flow {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 1.1rem 0 1.4rem;
}

.itb-home-tl-step {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .6rem .75rem;
	border: 1px solid var(--home-line);
	border-radius: var(--home-radius);
	background: var(--home-soft);
	font-size: .85rem;
	font-weight: 600;
}

.itb-home-tl-step-index {
	font-size: .72rem;
	font-weight: 700;
	color: var(--home-muted);
	font-variant-numeric: tabular-nums;
}

.itb-home-tl-step-note {
	margin-left: auto;
	font-size: .78rem;
	font-weight: 400;
	color: var(--home-muted);
}

/* ================================================================
   04 METRICS BAND
   ================================================================ */

.itb-home-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--home-line);
	border-bottom: 1px solid var(--home-line);
}

.itb-home-metric {
	padding: clamp(24px, 3vw, 44px) clamp(16px, 2vw, 32px);
	border-left: 1px solid var(--home-line);
}

.itb-home-metric:first-child {
	border-left: 0;
	padding-left: 0;
}

/* Кегль остаётся крупнее эталонного: на главной это единственная полоса
   чисел на всю ширину, у продукта — врезка внутри текста. Трекинг,
   насыщенность и подпись общие. */
.itb-home-metric-value {
	display: block;
	font-size: clamp(2.1rem, 3.3vw, 3.25rem);
	font-weight: var(--itb-weight-title, 700);
	letter-spacing: var(--itb-tracking-metric, -.045em);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.itb-home-metric-label {
	display: block;
	margin-top: .75rem;
	font-size: var(--itb-metric-label-size, .875rem);
	line-height: var(--itb-metric-label-lh, 1.4);
	color: var(--home-muted);
}

/* ================================================================
   05 НАПРАВЛЕНИЯ
   ================================================================ */

.itb-home-direction {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: clamp(20px, 3vw, 56px);
	padding: clamp(28px, 3.5vw, 52px) 0;
	border-top: 1px solid var(--home-line);
}

.itb-home-direction:last-child {
	border-bottom: 1px solid var(--home-line);
}

.itb-home-direction-num {
	display: block;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--home-muted);
	margin-bottom: .7rem;
	font-variant-numeric: tabular-nums;
}

.itb-home-direction-title {
	font-size: clamp(1.35rem, 2vw, 2rem);
	letter-spacing: -.025em;
	line-height: 1.15;
	margin-bottom: .8rem;
}

.itb-home-direction-copy {
	max-width: 46ch;
}

.itb-home-direction-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(16px, 2vw, 32px);
	align-content: start;
}

.itb-home-direction-links > li {
	border-top: 1px solid var(--home-line-soft);
}

.itb-home-direction-links a {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	padding: .7rem 0;
	font-size: .95rem;
	font-weight: 500;
	text-decoration: none;
	/* Список ссылок — та же роль, что у .siem-platform-link: спокойная
	   вторичная база, тёмный текст при наведении. Красный здесь не
	   используется, иначе у одного и того же жеста на двух страницах
	   получается разный язык. Раскладка строки своя: у главной в ней
	   есть штрих-маркер и другая мера набора. */
	color: var(--itb-color-text-tertiary, #525252);
	transition: color var(--itb-motion-fast, .16s ease);
}

.itb-home-direction-links a:hover {
	color: var(--itb-color-text, #161616);
	text-decoration: none;
}

.itb-home-direction-links .itb-home-mark {
	flex: 0 0 auto;
	width: 6px;
	height: 1px;
	background: var(--home-muted);
	transform: translateY(-4px);
}

.itb-home-direction-all {
	margin-top: 1.1rem;
}

/* ================================================================
   06 КЕЙСЫ
   ================================================================ */

.itb-home-cases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--home-line);
}

.itb-home-case {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.5vw, 40px) clamp(18px, 2vw, 32px);
	border-left: 1px solid var(--home-line);
}

.itb-home-case:first-child {
	border-left: 0;
	padding-left: 0;
}

.itb-home-case-meta {
	display: block;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--home-muted);
	margin-bottom: .8rem;
}

.itb-home-case-name {
	margin-bottom: .8rem;
}

.itb-home-case-facts {
	margin: 1.2rem 0 1.4rem;
}

.itb-home-case-facts > li {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: .75rem;
	padding: .6rem 0;
	border-top: 1px solid var(--home-line-soft);
	font-size: .88rem;
	line-height: 1.45;
}

.itb-home-case-facts dt,
.itb-home-case-fact-key {
	color: var(--home-muted);
}

.itb-home-case-link {
	margin-top: auto;
}

/* ================================================================
   07 ЛИЦЕНЗИИ И ЭКСПЕРТИЗА
   ================================================================ */

.itb-home-trust-grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(24px, 3vw, 64px);
	align-items: start;
}

.itb-home-trust-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(20px, 2.5vw, 44px);
}

.itb-home-trust-list > li {
	padding: 1rem 0;
	border-top: 1px solid var(--home-line);
}

.itb-home-trust-name {
	display: block;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
}

.itb-home-trust-detail {
	display: block;
	margin-top: .35rem;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--home-muted);
}

/* ================================================================
   08 INSIGHTS
   ================================================================ */

.itb-home-insights-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(24px, 2.5vw, 40px);
}

.itb-home-filters {
	display: flex;
	gap: .4rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	max-width: 100%;
}

.itb-home-filters::-webkit-scrollbar {
	display: none;
}

/* Фильтр материалов — это чип: интерактивный контрол с состоянием.
   Внешний вид, наведение и активное состояние заданы общим примитивом
   .itb-chip в itb-design-system.css; здесь только то, что нужно внутри
   горизонтальной прокрутки. */
.itb-home-filter {
	flex: 0 0 auto;
	white-space: nowrap;
}

.itb-home-insights {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 32px);
}

.itb-home-insight {
	display: flex;
	flex-direction: column;
	padding-top: 1.1rem;
	border-top: 1px solid var(--home-line);
}

.itb-home-insight[hidden] {
	display: none;
}

.itb-home-insight-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	font-size: .78rem;
	color: var(--home-muted);
	margin-bottom: .7rem;
}

.itb-home-insight-kind {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--home-text);
}

.itb-home-insight-title {
	font-size: 1.2rem;
	line-height: 1.28;
	letter-spacing: -.018em;
	margin-bottom: .55rem;
}

.itb-home-insight .itb-home-copy {
	font-size: .92rem;
}

.itb-home-insight-title a {
	text-decoration: none;
	transition: color var(--itb-motion-fast, .16s ease);
}

/* Карточка материала — без рамки и поверхности, реагировать нечему,
   поэтому отзыв на наведение берёт на себя заголовок. Акцент здесь тот
   же системный, что и у наведения на кнопку. */
.itb-home-insight-title a:hover {
	color: var(--home-red);
	text-decoration: none;
}

.itb-home-insight-link {
	margin-top: auto;
	padding-top: 1rem;
}

/* webinar-карточка: единственная surface в этой секции */
.itb-home-insight--webinar {
	grid-column: span 2;
	flex-direction: row;
	gap: clamp(20px, 2.5vw, 40px);
	align-items: center;
	padding: clamp(20px, 2.2vw, 32px);
	border: 1px solid var(--home-line);
	border-radius: var(--home-radius-lg);
	background: var(--home-soft);
}

.itb-home-insight--webinar .itb-home-insight-body {
	min-width: 0;
}

.itb-home-webinar-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: .9rem;
}

.itb-home-webinar-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	margin-top: 1rem;
}

.itb-home-webinar-flow-step {
	padding: .35rem .6rem;
	border: 1px solid var(--home-line);
	border-radius: var(--home-radius);
	background: #fff;
	font-size: .78rem;
	font-weight: 600;
	white-space: nowrap;
}

.itb-home-webinar-flow-sep {
	color: var(--home-muted);
	font-size: .78rem;
}

/* ================================================================
   09 FINAL CTA — светлая поверхность
   ================================================================ */

/* Светлый акцент, а не тёмный блок: финал должен читаться как продолжение
   страницы, поэтому красный взят почти в белом разведении. */
.itb-home-cta {
	background: var(--home-band-accent);
	border-top: 1px solid var(--home-line);
}

/* Читаемая колонка, а не произвольные 44rem: финальный блок набирается
   по той же мере, что и длинные абзацы на странице. */
.itb-home-cta-inner,
.itb-home-cta-copy {
	max-width: var(--itb-reading, 720px);
}

/* ================================================================
   MOTION
   ================================================================ */

.itb-home [data-home-animate] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s var(--home-ease), transform .6s var(--home-ease);
	will-change: opacity, transform;
}

.itb-home [data-home-animate].is-inview {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* --- hero scene ---------------------------------------------------- */

/* Линия рисуется за всё время сцены, шаг за шагом обгоняя подписи:
   4.8s — столько же, сколько data-home-duration у hero. */
.itb-home-scene-path {
	stroke-dasharray: var(--dash, 600);
	stroke-dashoffset: var(--dash, 600);
	transition: stroke-dashoffset 4.4s linear;
}

.itb-home .is-playing .itb-home-scene-path,
.itb-home .is-complete .itb-home-scene-path {
	stroke-dashoffset: 0;
}

.itb-home-scene-node,
.itb-home-scene-label {
	opacity: 0;
	transition: opacity .5s var(--home-ease);
}

.itb-home .is-playing .itb-home-scene-node,
.itb-home .is-playing .itb-home-scene-label,
.itb-home .is-complete .itb-home-scene-node,
.itb-home .is-complete .itb-home-scene-label {
	opacity: 1;
}

/* Шаг раз в 0.8s: успеваешь прочитать подпись до появления следующей.
   Последний шаг выходит на 4.0s, сцена закрывается на 4.8s.
   .is-playing — слишком общее имя, чтобы оставлять его без namespace. */
.itb-home .is-playing [data-scene-step="1"] { transition-delay: 0s; }
.itb-home .is-playing [data-scene-step="2"] { transition-delay: .8s; }
.itb-home .is-playing [data-scene-step="3"] { transition-delay: 1.6s; }
.itb-home .is-playing [data-scene-step="4"] { transition-delay: 2.4s; }
.itb-home .is-playing [data-scene-step="5"] { transition-delay: 3.2s; }
.itb-home .is-playing [data-scene-step="6"] { transition-delay: 4s; }

/* ================================================================
   ADAPTIVE
   ================================================================ */

@media (max-width: 1199.98px) {
	.itb-home-products {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}
}

@media (max-width: 991.98px) {
	.itb-home-hero-grid {
		grid-template-columns: 1fr;
		gap: clamp(28px, 4vw, 40px);
	}

	.itb-home-hero-copy .itb-home-h1,
	.itb-home-hero-lede {
		max-width: none;
	}

	.itb-home-journey-grid {
		grid-template-columns: 1fr;
	}

	/* мобильная навигация этапов: скролл внутри блока, не страницы */
	.itb-home-journey-nav {
		flex-direction: row;
		border-left: 0;
		border-bottom: 1px solid var(--home-line);
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		max-width: 100%;
	}

	.itb-home-journey-nav::-webkit-scrollbar {
		display: none;
	}

	.itb-home-journey-btn {
		flex: 0 0 auto;
		margin-left: 0;
		margin-bottom: -1px;
		padding: .7rem .9rem;
		border-left: 0;
		border-bottom: 2px solid transparent;
		white-space: nowrap;
	}

	.itb-home-journey-btn.is-active {
		border-left-color: transparent;
		border-bottom-color: var(--home-red);
	}

	.itb-home-journey-stage {
		min-height: 0;
	}

	.itb-home-products {
		grid-template-columns: 1fr;
	}

	.itb-home-product-side {
		grid-template-rows: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.itb-home-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.itb-home-metric:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}

	.itb-home-metric:nth-child(n + 3) {
		border-top: 1px solid var(--home-line);
	}

	.itb-home-direction {
		grid-template-columns: 1fr;
		gap: clamp(16px, 2.5vw, 28px);
	}

	.itb-home-direction-copy {
		max-width: none;
	}

	.itb-home-cases {
		grid-template-columns: 1fr;
		border-top: 0;
	}

	.itb-home-case {
		border-left: 0;
		padding-left: 0;
		padding-right: 0;
		border-top: 1px solid var(--home-line);
	}

	.itb-home-trust-grid {
		grid-template-columns: 1fr;
	}

	.itb-home-insights {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.itb-home-insight--webinar {
		grid-column: span 2;
	}
}

@media (max-width: 767.98px) {
	/* SVG-сцена на такой ширине даёт подписи меньше 8px — отдаём список */
	.itb-home-hero-svg {
		display: none;
	}

	.itb-home-hero-steps {
		display: block;
	}

	/* На мобильных этапы — обычный список, а не сцена: пошаговое проявление
	   за 4 с оставляло под списком пустое место, пока ждёшь последние шаги.
	   Desktop-сцену здесь не воспроизводим. */
	.itb-home .itb-home-hero-step,
	.itb-home .itb-home-scene-label {
		opacity: 1;
		transition: none;
	}

	.itb-home-hero-scene {
		aspect-ratio: auto;
	}

	.itb-home-hero-trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.itb-home-hero-trust > li:nth-child(n + 3) {
		border-top: 1px solid var(--home-line-soft);
		margin-top: .25rem;
	}

	.itb-home-journey-items {
		grid-template-columns: 1fr;
	}

	.itb-home-product-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.itb-home-product-side {
		grid-template-columns: 1fr;
	}

	.itb-home-direction-links {
		grid-template-columns: 1fr;
	}

	.itb-home-trust-list {
		grid-template-columns: 1fr;
	}

	.itb-home-insights {
		grid-template-columns: 1fr;
	}

	.itb-home-insight--webinar {
		grid-column: auto;
		flex-direction: column;
		align-items: flex-start;
	}

	.itb-home-case-facts > li {
		grid-template-columns: 7rem minmax(0, 1fr);
	}
}

@media (max-width: 575.98px) {
	.itb-home-metrics {
		grid-template-columns: 1fr;
	}

	.itb-home-metric {
		border-left: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.itb-home-metric:nth-child(n + 2) {
		border-top: 1px solid var(--home-line);
	}

	.itb-home-microproof-steps {
		grid-template-columns: 1fr;
		gap: .9rem;
	}

	.itb-home-microproof-track,
	.itb-home-microproof-nodes {
		display: none;
	}

	.itb-home-case-facts > li {
		grid-template-columns: 1fr;
		gap: .2rem;
	}
}

@media (max-width: 439.98px) {
	.itb-home-hero-trust {
		grid-template-columns: 1fr;
	}

	.itb-home-hero-trust > li {
		padding-right: 0;
		border-top: 1px solid var(--home-line-soft);
	}

	.itb-home-hero-trust > li:first-child {
		border-top: 0;
	}

	.itb-home-actions .itb-home-btn {
		width: 100%;
		justify-content: center;
	}
}

/* ================================================================
   REDUCED MOTION — финальные состояния без движения
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
	.itb-home [data-home-animate] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.itb-home .itb-home-scene-path {
		stroke-dashoffset: 0 !important;
		transition: none !important;
	}

	.itb-home .itb-home-scene-node,
	.itb-home .itb-home-scene-label,
	.itb-home .itb-home-hero-step {
		opacity: 1 !important;
		transition: none !important;
	}

	.itb-home .itb-home-microproof-fill {
		width: 100% !important;
		transition: none !important;
	}

	.itb-home .itb-home-microproof-node {
		border-color: var(--home-red) !important;
		background: var(--home-red) !important;
		transition: none !important;
	}

	.itb-home .itb-home-journey-btn {
		transition: none !important;
	}

	/* Переходы и сдвиг стрелки у общих примитивов — ссылок, кнопок,
	   чипов — снимает сам itb-design-system.css. */
}