/* ==========================================================================
   BMA Express — стили главной. Макет 1440, контейнер 1312 (падинг 64).
   Токены — из Figma Foundations. Мобильный вид строится от 360.
   ========================================================================== */

/* Inter — свой хостинг, latin + latin-ext, вариативный (400–800). */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/inter-latin-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/inter-latin-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Рукописный акцент — свой хостинг, latin + latin-ext, Google Fonts по сети не подключаем.
   Обращаться только через --font-hand: замена шрифта = правка одной строки в :root. */
@font-face {
	font-family: "Yellowtail";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/yellowtail-latin-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Yellowtail";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/yellowtail-latin-ext-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--navy: #16233f;
	--red: #e11f2a;
	--red-hover: #b4141d;
	--red-text: #ff3b45;
	--red-text-hover: #ff7a82;
	--green: #2ea05c;

	--page: #0a0e18;
	--page-2: #0a111c;
	--page-3: #0b0f17;

	--ink: #f4f6fa;
	--ink-2: #d1d9e5;
	--ink-3: #b5bfd0;
	--ink-4: #96a1b4;
	--ink-5: #8a94a6;
	--ink-6: #808a9c;

	--glass: rgba(71, 95, 145, 0.2);
	--glass-2: rgba(31, 39, 60, 0.4);
	--card: #162137;
	--hair: rgba(255, 255, 255, 0.1);
	--hair-2: rgba(255, 255, 255, 0.14);

	--wrap: 1312px;
	--pad: 64px;

	--f: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-hand: "Yellowtail", cursive;
}

/* --- база ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--page);
	color: var(--ink-2);
	font: 400 16px/1.5 var(--f);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
svg { display: block; }

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.sr {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	padding: 12px 20px; background: var(--red); color: #fff;
}
.skip:focus { left: 12px; top: 12px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ac { color: var(--red); }
em { font-style: italic; }

/* --- рукописный акцент ---------------------------------------------------
   Общий кирпич: .hand — сам скрипт, .und — росчерк под текстом.
   Росчерк это инлайновый SVG, а не text-decoration и не border-bottom:
   у подчёркивания нельзя ни свесить концы за текст, ни задать форму.
   Скрипт при равном кегле читается мельче Inter, поэтому размер задаётся
   в em от соседнего Inter и подбирается оптически, а не числом. */
.hand {
	font-family: var(--font-hand);
	font-style: normal;
	font-weight: 400;
	font-size: 1.18em;
	line-height: 1;
	letter-spacing: 0;
	color: var(--red-text);
}
/* обёртка росчерка: inline-block, чтобы SVG считал ширину от текста,
   max-width — чтобы на 390 фраза переносилась внутри, а не вылезала за экран */
.und {
	position: relative;
	display: inline-block;
	max-width: 100%;
}
.und__u {
	position: absolute;
	left: -.05em;
	right: -.05em;
	top: calc(100% - .12em);
	/* width задаём явно: у inline-SVG есть своё соотношение сторон из viewBox,
	   и при width:auto оно перебивает растяжку по left/right — росчерк выходил
	   короче подчёркиваемых слов. preserveAspectRatio="none" тянет его по ширине. */
	width: calc(100% + .1em);
	height: .2em;
	fill: var(--red);
	pointer-events: none;
}
.und--m .und__u { fill: var(--ink-4); }

/* --- общие элементы ------------------------------------------------------ */

.eyebrow {
	margin: 0 0 14px;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--red-text);
}
.eyebrow--red { letter-spacing: 1.04px; font-weight: 500; }
.svc .eyebrow { letter-spacing: 1.04px; font-weight: 500; }
.prf .eyebrow, .ins .eyebrow, .ind .eyebrow, .tst .eyebrow { margin-bottom: 12px; letter-spacing: 6px; }
.how .eyebrow, .qte .eyebrow { letter-spacing: 6px; }
.why__head .eyebrow { margin-bottom: 16px; }
.faq .eyebrow, .cnt .eyebrow { margin-bottom: 18px; }
.hero .eyebrow { margin-bottom: 20px; }

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 26px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	transition: background-color .28s ease, border-color .28s ease, color .28s ease,
		box-shadow .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
}
/* блик, пробегающий по кнопке */
.btn::after {
	content: "";
	position: absolute;
	top: -20%;
	left: -70%;
	width: 42%;
	height: 140%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-18deg);
	transition: left .6s cubic-bezier(.22, .61, .36, 1);
	pointer-events: none;
}
.btn:hover::after,
.btn:focus-visible::after { left: 130%; }
.btn:active { opacity: .88; transition-duration: .08s; }
.btn > * { position: relative; z-index: 1; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-hover); box-shadow: 0 14px 28px -10px rgba(225, 31, 42, .55); }
.btn--ghost {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
}
.btn--ghost:hover {
	background: rgba(255, 255, 255, .2);
	border-color: rgba(255, 255, 255, .46);
	box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .75);
}
.btn--wide { width: 100%; justify-content: center; }
/* размер M — только шапка и .svinc__btn */
.btn--sm { gap: 8px; height: 44px; padding: 0 20px; font-size: 15px; }
.btn__ico { display: inline-flex; width: 16px; height: 16px; }
.btn__ico svg { width: 100%; height: 100%; }

.lnk {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 15px;
	color: var(--red-text);
}
.lnk:hover { color: var(--red-text-hover); }
.lnk--big { font-size: 17px; }
.lnk__a { transition: transform .18s ease; }
.lnk:hover .lnk__a,
.btn:hover .lnk__a { transform: translateX(3px); }

/* --- шапка --------------------------------------------------------------- */

.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(10, 14, 24, .72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	transition: background-color .3s ease, border-color .3s ease, transform .34s cubic-bezier(.4, 0, .2, 1);
}
/* скроллим вниз — шапка уезжает, вверх — возвращается */
.nav.is-hidden { transform: translateY(-100%); }
/* на главной шапка лежит поверх картинки героя — «Navbar (blur)» в макете 73:239 */
.nav--over {
	position: fixed;
	left: 0;
	right: 0;
	background: rgba(10, 14, 24, .16);
	border-bottom-color: rgba(255, 255, 255, .10);
}
.nav--over.is-stuck {
	background: rgba(10, 14, 24, .86);
	border-bottom-color: rgba(255, 255, 255, .06);
}
body.admin-bar .nav--over { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .nav--over { top: 46px; } }

section[id],
#apply { scroll-margin-top: 96px; }
.nav__in {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: calc(var(--wrap) + var(--pad) * 2);
	margin: 0 auto;
	/* в макете поля шапки 48px, а не 64 как у секций */
	padding: 16px max(48px, env(safe-area-inset-right)) 16px max(48px, env(safe-area-inset-left));
}
.nav__logo { flex: none; }
.nav__logo svg { width: 56px; height: auto; }

.nav__panel {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1;
	gap: 28px;
}
.nav__list { display: flex; align-items: center; gap: 22px; }
.nav__list a {
	font-weight: 500;
	font-size: 14px;
	color: rgba(255, 255, 255, .85);
	transition: color .16s ease;
}
.nav__list a { position: relative; }
.nav__list a:hover { color: #fff; }
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a,
.nav__list .current-menu-ancestor > a,
.nav__list a.is-current { color: #fff; }
.nav__list .current-menu-item > a::after,
.nav__list .current_page_item > a::after,
.nav__list .current-menu-ancestor > a::after,
.nav__list a.is-current::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 2px;
	background: var(--red);
	border-radius: 2px;
}

/* Выпадающие списки шапки. Стрелка — отдельная кнопка: на десктопе список
   открывается наведением и кнопка только рисуется, на мобиле она и открывает. */
.nav__list > li { position: relative; display: flex; align-items: center; gap: 5px; }
.nav__tog {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 14px;
	height: 14px;
	padding: 0;
	color: rgba(255, 255, 255, .55);
	background: none;
	border: 0;
	pointer-events: none;
	transition: color .16s ease, transform .16s ease;
}
.nav__tog svg { display: block; width: 10px; height: auto; }
.nav__list > li:hover > .nav__tog,
.nav__list > li:focus-within > .nav__tog { color: #fff; }

/* мостик под пунктом, чтобы список не закрывался в зазоре */
.nav__list > li.menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 14px;
}
.nav__sub {
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 60;
	min-width: 220px;
	margin-top: 14px;
	padding: 10px 0;
	background: #0d1524;
	border: 1px solid var(--hair);
	border-radius: 12px;
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.nav__list > li:hover > .nav__sub,
.nav__list > li:focus-within > .nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.nav__sub li + li { margin-top: 2px; }
.nav__sub a {
	display: block;
	padding: 8px 18px;
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
	color: var(--ink-3);
}
.nav__sub a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
/* красная подчёркивалка активного пункта внутри списка не нужна */
.nav__sub a::after { content: none; }

.nav__act { display: flex; align-items: center; gap: 28px; }
.nav__phone { font-weight: 600; font-size: 14px; color: #fff; }

.burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 10px;
}
.burger span {
	display: block;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- секции: общая обёртка ---------------------------------------------- */

section[class] { position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; }

.hero__in, .intro__in, .who__in, .why__in, .svc__in, .abt__in, .flt__in, .how__in,
.prf__in, .ind__in, .tst__in, .qte__in, .ins__in, .faq__in, .cnt__in, .page__in,
.ohero__in, .ostat__in, .ostep__in, .oben__in, .ojoin__in, .oflt__in, .oqte__in,
.abhero__in, .abstory__in, .abop__in, .abstat__in, .abval__in, .abwhy__in,
.abprom__in, .abcta__in,
.chero__in, .creach__in,
.svhero__in, .svwhat__in, .svinc__in, .svcrit__in, .svone__in, .svfb__in, .svcta__in,
.blhero__in, .blgrid__in, .arthero__in, .artcov__in, .artbody__in, .artrel__in,
.lghero__in, .lgb__in,
.fltab__in, .flcl__in, .flpick__in,
.e404__in,
.inintro__in, .inprose__in, .inchips__in, .incta__in, .inrel__in {
	position: relative;
	z-index: 1;
	max-width: calc(var(--wrap) + var(--pad) * 2);
	margin: 0 auto;
	/* вырез и скруглённые углы iPhone в альбомной ориентации */
	padding-left: max(var(--pad), env(safe-area-inset-left));
	padding-right: max(var(--pad), env(safe-area-inset-right));
}

/* --- 02. Первый экран ---------------------------------------------------- */

.hero { display: flex; align-items: flex-end; min-height: 840px; overflow: hidden; }
/* картинка абсолютом на всю секцию, под шапкой */
.hero__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(10, 17, 28, .5) 0%, rgba(10, 17, 28, .14) 11%, rgba(10, 17, 28, 0) 22%),
		linear-gradient(180deg, rgba(10, 17, 28, 0) 57%, rgba(10, 17, 28, .85) 86%, rgba(10, 17, 28, 1) 90%),
		linear-gradient(90deg, rgba(10, 17, 28, .97) 0%, rgba(10, 17, 28, .78) 34%, rgba(10, 17, 28, 0) 85%);
}
.hero__in { z-index: 2; width: 100%; padding-block: 0 76px; }
.hero__t {
	max-width: 600px;
	margin: 0 0 30px;
	font-weight: 700;
	font-size: 60px;
	line-height: 70px;
	letter-spacing: -1.2px;
	color: #fff;
}
.hero__s {
	max-width: 560px;
	margin: 0 0 38px;
	font-size: 18px;
	line-height: 28px;
	color: var(--ink-3);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }

.hero__stats {
	/* полоса на всю ширину контента, цифры разнесены по ней поровну */
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	max-width: none;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero__stats li {
	flex: 1 1 0;
	padding-inline: 32px;
	border-left: 1px solid rgba(255, 255, 255, .14);
}
.hero__stats li:first-child { padding-left: 0; border-left: 0; }
.hero__stat-v {
	display: block;
	font-weight: 600;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: -.3px;
	color: #fff;
}
.hero__stat-l { display: block; margin-top: 4px; font-size: 13px; line-height: 16px; color: var(--ink-4); }

/* --- 02b. Вводный абзац --------------------------------------------------- */

.intro {
	background-color: var(--page-2);
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}
.intro__in { padding-block: 56px; }
.intro__x {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
	font-size: 17px;
	line-height: 28px;
	color: var(--ink-2);
}
.intro__x b { font-weight: 700; color: var(--ink); }

/* --- 03. Почему BMA ------------------------------------------------------ */

.why { background-color: var(--page); }
.why::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 25, 45, .93) 0%, rgba(8, 14, 26, .96) 100%);
}
.why__in { padding-block: 100px; }
.why__head { max-width: 900px; margin-bottom: 48px; }
.why__t {
	margin: 0 0 16px;
	font-weight: 800;
	font-size: 40px;
	line-height: 46px;
	letter-spacing: -1px;
	color: var(--ink);
}
.why__s { max-width: 900px; font-size: 17px; line-height: 26px; color: var(--ink-2); }

.why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.wcard {
	min-height: 180px;
	padding: 30px;
	background: var(--glass);
	background-image: linear-gradient(160deg, rgba(6, 26, 66, .55), rgba(6, 26, 66, 0));
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.wcard__k {
	margin-bottom: 18px;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--red-text);
}
.wcard__t {
	margin-bottom: 18px;
	font-weight: 700;
	font-size: 22px;
	line-height: 27px;
	letter-spacing: -.3px;
	color: #fff;
}
.wcard__x { font-size: 16px; line-height: 21px; color: var(--ink-2); }

.why__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	max-width: 616px;
	margin-top: 48px;
}
.why__foot-x { font-size: 17px; color: var(--ink); }

/* --- 04. Услуги ---------------------------------------------------------- */

.svc { background: var(--page-2); }
.svc__in { padding-block: 62px 42px; }
.svc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}
.svc__t {
	max-width: 620px;
	font-weight: 700;
	font-size: 42px;
	line-height: 45px;
	letter-spacing: -.84px;
	color: var(--ink);
}
.svc__s { max-width: 360px; font-size: 15px; line-height: 22px; color: var(--ink-4); }

.svc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--hair);
	border: 0;
	border-block: 1px solid var(--hair);
}
.scell {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
	min-height: 211px;
	padding: 48px 28px;
	background: var(--page-2);
	background-size: cover;
	background-position: center;
	transition: background-color .2s ease;
}
.scell.is-featured { box-shadow: inset 0 2px 0 var(--red); }
.scell.is-featured::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 19, 30, .72) 0%, rgba(14, 19, 30, .94) 100%);
}
.scell > * { position: relative; z-index: 1; }
.scell:not(.is-featured):hover { background-color: #0d1524; }
a.scell:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

.scell__top { display: block; margin-bottom: 16px; line-height: 17px; }
.scell__n { font-weight: 500; font-size: 14px; letter-spacing: .56px; color: var(--red-text); }
.scell__i { position: absolute; top: 32px; right: 33px; width: 36px; height: 36px; color: #fff; opacity: .9; }
.scell__i svg { width: 100%; height: 100%; }
.scell__t {
	margin-bottom: 16px;
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -.2px;
	color: #fff;
}
.scell__x { max-width: 240px; font-size: 14px; line-height: 21px; color: var(--ink-4); }

/* --- 05. О компании ------------------------------------------------------ */

/* фонового фото здесь больше нет — секция держится на градиенте, текст во всю ширину */
.abt { min-height: 0; background: linear-gradient(180deg, #0e192d 0%, #080e1a 100%); }
.abt__in { padding-block: 84px 72px; }

/* шапка секции: заголовок слева, действие справа — иначе кнопка висит одна внизу слева,
   а справа от заголовка остаётся пустая половина полосы */
.abt__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 40px;
	margin-bottom: 40px;
}
.abt__t {
	max-width: 760px;
	margin-bottom: 16px;
	font-weight: 700;
	font-size: 48px;
	line-height: 51px;
	letter-spacing: -.96px;
	color: #fff;
}
/* 600px при 16px = ~75 знаков в строке; на 720px строка уходила за 90 */
.abt__s { max-width: 600px; margin-bottom: 0; font-size: 16px; line-height: 25px; color: var(--ink-3); }

.abt__pil {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 64px;
	row-gap: 0;
	margin-bottom: 0;
}
/* линейка сверху вместо красной чёрточки: четыре пункта читаются как один
   разворот, а не как четыре плитки; красный акцент уже есть в самой иконке */
.pil { display: flex; align-items: flex-start; gap: 16px; padding: 24px 0 26px; border-top: 1px solid var(--hair); }
.pil__i { flex: none; width: 24px; height: 24px; margin-top: 1px; color: #fff; }
.pil__i svg { width: 100%; height: 100%; }
.pil__t { display: block; font-weight: 600; font-size: 18px; line-height: 26px; color: #fff; }
.pil__s { display: block; margin-top: 4px; font-size: 16px; line-height: 26px; color: var(--ink-3); }

/* --- 06. Автопарк -------------------------------------------------------- */

.flt::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(5, 10, 20, .89) 0%,
			rgba(5, 10, 20, .87) 21%,
			rgba(5, 10, 20, .71) 36%,
			rgba(5, 10, 20, .23) 46%,
			rgba(5, 10, 20, 0) 57%),
		linear-gradient(180deg,
			rgba(8, 14, 24, 0) 74%,
			rgba(8, 14, 24, .17) 77%,
			rgba(8, 14, 24, .54) 82%,
			rgba(8, 14, 24, .80) 88%,
			rgba(8, 14, 24, .87) 100%);
}
/* макет 1440x780: высота по пропорции, иначе техника уезжает под подписи */
.flt { display: flex; min-height: clamp(780px, 54.167vw, 1040px); }
.flt__in {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	padding-block: clamp(100px, 6.944vw, 133px) clamp(64px, 4.444vw, 85px);
	text-align: center;
}
/* подписи держим над техникой: ряд тянется вместе с фото */
.flt .eyebrow { color: var(--red-text); letter-spacing: 8px; }
.flt__t {
	max-width: 1000px;
	margin: 0 auto 16px;
	font-weight: 800;
	font-size: 44px;
	line-height: 53px;
	letter-spacing: 0;
	color: #fff;
}
.flt__s { max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 25px; color: rgba(255, 255, 255, .72); }

.flt__list {
	display: flex;
	justify-content: space-between;
	gap: 35px;
	width: clamp(1065px, 73.958vw, 1420px);
	max-width: 100%;
	margin: auto auto 0;
	/* в макете ряд стоит на 8.5px правее центра — держим ту же пропорцию */
	transform: translateX(clamp(0px, .59vw, 11px));
}
.flt__item { width: clamp(240px, 16.667vw, 320px); }
.flt__name { display: block; font-weight: 500; font-size: 32px; line-height: 39px; letter-spacing: -.6px; color: #fff; }
.flt__cap { display: block; margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .62); }
.flt__cap strong { font-weight: 700; color: #fff; }

/* --- 07. Как работаем ---------------------------------------------------- */

.how { background: linear-gradient(180deg, #0e192d 0%, #080e1a 100%); }
.how__in { padding-block: 64px 46px; }
.how__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 72px;
}
.how__t { font-weight: 800; font-size: 38px; line-height: 46px; letter-spacing: 0; color: #fff; }
.how__s { max-width: 720px; margin: 14px 0 0; font-size: 16px; line-height: 26px; color: var(--ink-3); }

.how__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 37px;
}
.step { position: relative; padding-bottom: 108px; opacity: .5; transition: opacity .2s ease; }
.step.is-active,
.step:hover { opacity: 1; }
.step::after {
	content: "";
	position: absolute;
	bottom: 28px;
	left: 56px;
	right: -37px;
	height: 1px;
	background: rgba(255, 255, 255, .12);
}
.step:last-child::after { display: none; }
/* активный/наведённый шаг — красный пунктир, как в макете 96:102 */
.step.is-active::after,
.step:hover::after {
	background: repeating-linear-gradient(90deg, var(--red) 0 8px, rgba(225, 31, 42, 0) 8px 16px);
}

.step__dot {
	transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: #131d32;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
}
.step.is-active .step__dot,
.step:hover .step__dot {
	border: 2px solid var(--red);
	box-shadow: 0 0 0 6px rgba(225, 31, 42, .12);
}
.step__ico { display: block; width: 24px; height: 24px; color: #fff; transition: color .25s ease; }
.step.is-active .step__ico,
.step:hover .step__ico { color: var(--red); }
.step__ico svg { width: 100%; height: 100%; }

.step__l {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}
.step.is-active .step__l { color: var(--red-text); }
.step__t { display: block; margin-bottom: 8px; font-weight: 600; font-size: 19px; color: #fff; }
.step__x { display: block; max-width: 272px; font-size: 14px; line-height: 20px; color: var(--ink-4); }

/* --- 08. Кейсы / 12. Статьи --------------------------------------------- */

.prf { background: var(--page-3); }
.ins { background: var(--page-2); }
.prf__in, .ins__in { padding-block: 72px 76px; }

.prf__head, .ins__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 76px;
}
.prf__t, .ins__t { max-width: 760px; font-weight: 800; font-size: 40px; line-height: 48px; letter-spacing: 0; color: var(--ink); }
.ins__t { max-width: 820px; }
.prf__s, .ins__s { max-width: 360px; font-size: 15px; line-height: 23px; color: var(--ink-4); }

.prf__grid, .ins__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Кейсы едут дорожкой. Ширина карточки считается от числа видимых, чтобы шаг
   прокрутки совпадал с шагом сетки и карточка не вставала «в полтора столбца». */
.prf__grid.prf__grid--car {
	--prf-vis: 3;
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--prf-vis) - 1) * 24px) / var(--prf-vis));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* тень карточки на ховере уходит вниз на 22px, а прокрутка обрезала бы её и
	   завела вертикальный скролл; отступ возвращаем отрицательным margin, чтобы
	   расстояние до кнопки под секцией не поехало */
	padding-bottom: 26px;
	margin-bottom: -26px;
}
.prf__grid--car::-webkit-scrollbar { width: 0; height: 0; }
.prf__grid--car > .pcard { scroll-snap-align: start; }

.prf__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 22px; }
.prf__nav { display: flex; gap: 10px; }
/* display: flex перебивает display: none из-под атрибута hidden */
.prf__nav[hidden] { display: none; }
.prf__arw {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--hair-2);
	border-radius: 50%;
	background: var(--glass);
	font-size: 17px;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
}
.prf__arw:hover:not(:disabled) { border-color: var(--red); color: var(--red-text); }
.prf__arw:disabled { opacity: .3; cursor: default; }

.pcard, .ncard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--glass-2);
	border: 1px solid rgba(7, 29, 68, .9);
	border-radius: 4px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.pcard { min-height: 552px; }
.ncard { min-height: 418px; }
.pcard__img, .ncard__img { display: block; aspect-ratio: 421 / 180; overflow: hidden; }
.pcard__img img, .ncard__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.pcard:hover .pcard__img img,
.ncard:hover .ncard__img img { transform: scale(1.06); }
.pcard:hover, .ncard:hover {
	border-color: rgba(225, 31, 42, .4);
	box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .85);
}
.ncard__t a:hover { color: var(--red); }
.pcard__body, .ncard__body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.pcard__k, .ncard__k {
	margin-bottom: 11px;
	line-height: 13px;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--red-text);
}
.pcard__t, .ncard__t { margin-bottom: 25px; font-weight: 700; font-size: 19px; line-height: 25px; letter-spacing: -.2px; color: var(--ink); }
.ncard__t { margin-bottom: 14px; }
.pcard__x, .ncard__x { font-size: 15px; line-height: 23px; color: #94a1b5; }
.pcard__m { margin-top: auto; font-size: 13px; line-height: 16px; color: #808ca1; }
.pcard .lnk, .ncard .lnk { margin-top: 10px; }
.ncard__x { margin-bottom: auto; font-size: 14px; line-height: 21px; }

.prf__cta, .ins__cta { margin-top: 48px; text-align: center; }

/* --- 09. Отрасли --------------------------------------------------------- */

.ind { background: var(--page); }
.ind__in { padding-block: 72px; }
.ind__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 76px;
}
.ind__t { max-width: 760px; font-weight: 800; font-size: 40px; line-height: 48px; letter-spacing: 0; color: var(--ink); }
.ind__s { max-width: 360px; font-size: 15px; line-height: 23px; color: var(--ink-4); }

.ind__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.icard {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-height: 220px;
	padding: 48px 24px 42px;
	text-align: center;
	overflow: hidden;
	background-color: #0e1a30;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 4px;
}
/* картинка — отдельным слоем: blur даём самой картинке и подрезаем масштабом,
   иначе backdrop-filter оставляет резкую кромку по краям карточки */
.icard__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
}
.icard__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.16);
	filter: blur(6px);
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
.icard::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(5, 26, 66, .72);
}
.icard > .icard__i,
.icard > .icard__t,
.icard > .icard__s { position: relative; z-index: 2; }
.icard__i { width: 66px; height: 66px; color: #fff; }
.icard__i svg { width: 100%; height: 100%; }
.icard__t { display: block; margin-top: 18px; font-weight: 700; font-size: 21px; line-height: 25px; color: var(--ink); }
.icard__s { display: block; margin-top: 5px; font-size: 13px; line-height: 16px; color: rgba(244, 246, 250, .72); }
a.icard:hover { border-color: rgba(225, 31, 42, .4); }
a.icard:hover .icard__bg img { transform: scale(1.24); }

/* --- 10. Отзывы ---------------------------------------------------------- */

.tst { background: var(--page-3); }
.tst__in { padding-block: 72px 16px; }
.tst__head { margin-bottom: 48px; text-align: center; }
.tst__t { margin-bottom: 11px; font-weight: 800; font-size: 40px; line-height: 48px; letter-spacing: 0; color: var(--ink); }
.tst__s { font-size: 15px; line-height: 18px; color: var(--ink-4); }

.tst__grid { columns: 4; column-gap: 12px; max-width: 1284px; margin-inline: auto; }
.tcard {
	break-inside: avoid;
	margin: 0 0 12px;
	padding: 18px;
	background: var(--card);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
}
.tcard__q { margin: 0 0 42px; font-size: 14px; line-height: 21px; color: var(--ink); }
.tcard__who { display: flex; align-items: center; gap: 10px; }
.tcard__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
/* нет фотографии — кружок с инициалами, иначе подписи в соседних карточках
   разъезжаются по горизонтали (тот же приём, что у .svfb__av--ini) */
.tcard__av--ini { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; background: var(--glass); border: 1px solid var(--hair-2); font-weight: 600; font-size: 14px; letter-spacing: .5px; color: var(--ink-2); }
.tcard__n { display: block; font-weight: 600; font-size: 13px; color: #fff; }
.tcard__r { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-5); }

/* --- 11. Заявка --------------------------------------------------------- */

.qte::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 17, 28, .94) 0%, rgba(10, 17, 28, .5) 36%, rgba(8, 14, 26, .7) 76%, rgba(10, 17, 28, .95) 100%);
}
.qte__in { padding-block: 100px; }
.qte__left { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.qte__t { margin-bottom: 14px; font-weight: 800; font-size: 36px; line-height: 40px; letter-spacing: -.5px; color: #fff; }
.qte__s { margin-bottom: 0; font-size: 16px; line-height: 24px; color: var(--ink-3); }

.qte__quote {
	padding: 24px;
	background: var(--glass);
	background-image: linear-gradient(160deg, rgba(6, 26, 66, .5), rgba(6, 26, 66, 0));
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.qte__quote blockquote { margin: 0 0 16px; font-size: 17px; line-height: 26px; color: #fff; }
.qte__quote figcaption { display: flex; align-items: center; gap: 10px; }
.qte__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.qte__qn { display: block; font-weight: 600; font-size: 13px; color: #fff; }
.qte__qr { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-5); }

.qform {
	max-width: 720px;
	margin: 0 auto;
	padding: 36px 36px 70px;
	background: var(--glass-2);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 16px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}
.qform__e { margin-bottom: 10px; }
.qform__t { margin-bottom: 18px; font-weight: 800; font-size: 34px; line-height: 41px; letter-spacing: 0; color: #fff; }
/* описание под заголовком формы: заголовок к нему прижат вплотную, поэтому
   верхний отступ снимаю у него, а не добавляю сюда */
.qform__e + .qform__t { margin-bottom: 14px; }
.qform__x { margin: 0 0 26px; font-size: 16px; line-height: 25px; color: var(--ink-4); }
/* Заявка водителя: подзаголовок стоит сразу под H2, эйбрау над ним нет —
   лишние 4px снимаю тем же приёмом, что и в паре эйбрау + заголовок. */
.qform__t + .qform__x { margin-top: -4px; }
/* Согласие внутри .qform: сверху к нему добавляются 18px от последнего поля,
   поэтому свои 20px из .ocard__consent здесь превращаются в 2px — зазор
   получается тот же, что в карточке героя. */
.qform .ocard__consent { margin: 2px 0 24px; }
.qform__msg { margin-bottom: 18px; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.qform__msg--ok { background: rgba(46, 160, 92, .16); border: 1px solid rgba(46, 160, 92, .4); color: #c9f3d9; }
.qform__msg--err { background: rgba(225, 31, 42, .14); border: 1px solid rgba(225, 31, 42, .42); color: #ffd4d6; }

.fld { margin: 0 0 18px; }
.fld label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 13px; line-height: 16px; color: #fff; }
.fld input,
.fld textarea {
	display: block;
	width: 100%;
	padding: 0 14px;
	background: rgba(215, 221, 235, .16);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	color: #fff;
	font: inherit;
	font-size: 14px;
	/* без этого iOS рисует полям свою рамку и внутреннюю тень */
	-webkit-appearance: none;
	appearance: none;
}
.fld input { height: 50px; }
/* меньше 16px — iOS Safari зумит страницу при фокусе (в альбомной тоже) */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
	.fld input,
	.fld textarea { font-size: 16px; }
}
.fld textarea { min-height: 104px; padding: 13px 14px; resize: vertical; }
.fld input::placeholder,
.fld textarea::placeholder { color: rgba(255, 255, 255, .36); }
.fld input:focus,
.fld textarea:focus { outline: none; border-color: var(--red); }
.fld__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* ошибка валидации под полем */
.fld.is-err input,
.fld.is-err textarea { border-color: var(--red); }
/* Поле прошло проверку. Зелёная рамка держится и в фокусе: иначе возврат
   в уже заполненное поле красил бы его в красный и читался как новая ошибка. */
.fld.is-ok input,
.fld.is-ok textarea,
.fld.is-ok input:focus,
.fld.is-ok textarea:focus { border-color: var(--green); }
.fld__err { display: block; margin-top: 6px; font-size: 12px; line-height: 15px; color: #ff9ba0; }
.qform__act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.qform__act .btn { width: auto; min-width: 196px; }
.qform__note { margin: 0; font-size: 13px; line-height: 16px; color: #51617a; }

/* --- 13. FAQ ------------------------------------------------------------- */

.faq { background: linear-gradient(180deg, #0e1421 0%, #080b13 100%); }
.faq__in {
	display: grid;
	grid-template-columns: minmax(0, 492px) minmax(0, 760px);
	gap: 60px;
	align-items: start;
	padding-block: 92px 20px;
}
/* колонка едет вместе со списком, иначе под ней остаётся ~940px пустоты */
.faq__left { position: sticky; top: 110px; align-self: start; }
.faq__t { margin-bottom: 24px; font-weight: 800; font-size: 52px; line-height: 56px; letter-spacing: -1px; color: var(--ink); }
.faq__s { max-width: 420px; margin-bottom: 62px; font-size: 17px; line-height: 26px; color: var(--ink-5); }

.qa { border-top: 1px solid var(--hair); }
.qa__h { margin: 0; }
.qa__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 22px 0;
	text-align: left;
	transition: padding-bottom .34s cubic-bezier(.4, 0, .2, 1);
}
.qa.is-open .qa__btn { padding: 22px 0 14px; }
.qa__q { font-weight: 700; font-size: 21px; line-height: 28px; color: var(--ink); }
.qa__sign { position: relative; flex: none; width: 20px; height: 20px; }
.qa__sign::before,
.qa__sign::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 2px;
	background: var(--red);
	transform: translate(-50%, -50%);
	transition: transform .2s ease, opacity .2s ease;
}
.qa__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa.is-open .qa__sign::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
.qa__a {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	opacity: 0;
	padding-bottom: 0;
	transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1), padding-bottom .34s cubic-bezier(.4, 0, .2, 1), opacity .22s ease, visibility 0s linear .34s;
}
.qa__a > * { min-height: 0; overflow: hidden; }
.qa.is-open .qa__a {
	grid-template-rows: 1fr;
	visibility: visible;
	opacity: 1;
	padding-bottom: 34px;
	transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1), padding-bottom .34s cubic-bezier(.4, 0, .2, 1), opacity .28s ease .06s, visibility 0s;
}
.qa__a p { max-width: 660px; font-size: 16px; line-height: 26px; color: var(--ink-5); }

/* --- 14. Контакты -------------------------------------------------------- */

.cnt::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 14, 26, .95) 0%, rgba(8, 14, 26, .5) 26%, rgba(8, 14, 26, .5) 74%, rgba(10, 14, 24, .95) 100%);
}
.cnt__in { padding-block: 104px 108px; text-align: center; }
.cnt__t { max-width: 720px; margin: 0 auto; font-weight: 800; font-size: 52px; line-height: 56px; letter-spacing: -1.2px; color: var(--ink); }
.cnt__s { max-width: 560px; margin: 18px auto 0; font-size: 17px; line-height: 21px; color: var(--ink-5); }
.cnt__act { margin-top: 30px; }

/* --- 15. Подвал ---------------------------------------------------------- */

.ftr { background: #080b14; }
.ftr__in {
	display: grid;
	grid-template-columns: minmax(0, 436px) minmax(0, 1fr);
	gap: 60px;
	max-width: calc(var(--wrap) + var(--pad) * 2);
	margin: 0 auto;
	padding: 52px var(--pad) 42px;
}
.ftr__logo svg { width: 48px; height: auto; }
.ftr__tag { margin: 14px 0 0; max-width: 300px; font-size: 15px; line-height: 18px; color: var(--ink-4); }
.ftr__addr, .ftr__phone { font-size: 15px; line-height: 18px; font-weight: 600; color: var(--ink-3); }
.ftr__addr { margin-top: 30px; }
.ftr__phone { margin-top: 8px; color: #fff; }

.ftr__soc { display: flex; gap: 10px; margin-top: 26px; }
.ftr__soc a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, .05);
	border-radius: 9px;
	color: #fff;
	transition: background-color .18s ease;
}
.ftr__soc a:hover { background: rgba(255, 255, 255, .14); }
.ftr__soc svg { width: 18px; height: 18px; }

.ftr__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 12px; padding-top: 20px; }
.fcol__t {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 13px;
	line-height: 16px;
	color: #fff;
}
.fcol__list li + li { margin-top: 15px; }
.fcol__list a { font-size: 14px; line-height: 17px; color: var(--ink-4); transition: color .16s ease; }
.fcol__list a:hover { color: #fff; }

.ftr__rule {
	max-width: var(--wrap);
	height: 1px;
	margin: 0 auto;
	background: rgba(255, 255, 255, .08);
}
.ftr__bot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: calc(var(--wrap) + var(--pad) * 2);
	margin: 0 auto;
	padding: 28px var(--pad) 43px;
	font-size: 14px;
	line-height: 17px;
	color: var(--ink-6);
}

/* --- служебные страницы -------------------------------------------------- */

.page__in { padding-block: 120px 96px; }
.page__t { margin-bottom: 24px; font-weight: 800; font-size: 44px; line-height: 52px; color: var(--ink); }
.page__body { max-width: 760px; font-size: 17px; line-height: 28px; color: var(--ink-2); }
.page__body a { color: var(--red-text); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.card { background: var(--glass-2); border: 1px solid rgba(7, 29, 68, .9); border-radius: 4px; overflow: hidden; }
.card__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card__t { padding: 20px 20px 0; font-size: 19px; color: var(--ink); }
.card__x { padding: 8px 20px 22px; font-size: 15px; line-height: 23px; color: var(--ink-4); }
.pager { margin-top: 40px; }
.pager a, .pager .current { padding: 8px 12px; color: var(--ink-3); }
.pager .current { color: var(--red-text); }

/* --- плавные ховеры по всему сайту -------------------------------------- */

a,
button,
.wcard,
.scell,
.pcard,
.ncard,
.tcard,
.icard,
.pil,
.fcard {
	transition: color .25s ease, background-color .25s ease, border-color .25s ease,
		box-shadow .25s ease, opacity .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

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

@media (max-width: 1279px) {
	:root { --pad: 40px; }

	.hero__t { font-size: 48px; line-height: 56px; }
	.why__grid, .svc__grid, .prf__grid, .ins__grid, .ind__grid { grid-template-columns: repeat(2, 1fr); }
	.prf__grid.prf__grid--car { --prf-vis: 2; }
	/* 4 в ряд перестают помещаться — ужимаем шаг и подписи, а не переносим */
	.flt__list { flex-wrap: wrap; width: auto; justify-content: center; gap: 24px; transform: none; }
	.flt__item { width: clamp(210px, 16.667vw, 320px); }
	.flt__name { font-size: 26px; line-height: 32px; }
	.flt__cap { margin-top: 12px; }
	.how__steps { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
	.step:nth-child(2n)::after { display: none; }
	.tst__grid { columns: 3; }
	.faq__in { grid-template-columns: 1fr; gap: 44px; }
	.faq__left { position: static; }
	.qa__a p { max-width: 600px; }
	.ftr__in { grid-template-columns: 1fr; gap: 44px; }
	.ftr__cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
	.faq__t, .cnt__t { font-size: 40px; line-height: 46px; }
}

/* Полоса ноутбуков. Восемь пунктов со стрелками, телефон и кнопка в одну строку
   не помещаются: с 1216px и ниже "Our Fleet", "Join BMA" и номер телефона
   переносились, шапка вставала в два этажа. Отыгрываем место зазорами и полями,
   кегль и подписи не трогаем. Нижняя граница 1024px: ниже работает бургер
   со своими правилами, и телефон там остаётся видимым внутри панели. */
@media (min-width: 1024px) and (max-width: 1216px) {
	.nav__in {
		padding-right: max(32px, env(safe-area-inset-right));
		padding-left: max(32px, env(safe-area-inset-left));
	}
	.nav__list { gap: 12px; }
	.nav__act .nav__phone { display: none; }
}

@media (max-width: 1023px) {
	.burger { display: flex; }

	.nav__in {
		flex-wrap: nowrap;
		padding-left: max(var(--pad), env(safe-area-inset-left));
		padding-right: max(var(--pad), env(safe-area-inset-right));
	}
	.nav__panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		width: 100%;
		padding: 24px var(--pad) calc(28px + env(safe-area-inset-bottom));
		/* в альбомной меню длиннее экрана — прокручиваем его само, а не страницу */
		max-height: calc(100vh - 92px);
		max-height: calc(100dvh - 92px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background: #080c16;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .9);
	}
	.nav__panel.is-open { display: flex; }
	.nav__list { flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; }
	.nav__list a { display: inline-block; font-size: 17px; }
	.nav__list a::after { bottom: -5px; }
	.nav__list > li { flex-wrap: wrap; gap: 6px; width: 100%; }
	.nav__list > li.menu-item-has-children::after { content: none; }
	.nav__tog {
		width: 34px;
		height: 34px;
		margin-left: 2px;
		color: rgba(255, 255, 255, .7);
		pointer-events: auto;
	}
	.nav__tog svg { width: 12px; }
	.nav__tog[aria-expanded="true"] { transform: rotate(180deg); }
	.nav__sub {
		position: static;
		display: none;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 2px 0 4px;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
	.nav__list > li.is-open > .nav__sub { display: block; }
	.nav__sub li + li { margin-top: 0; }
	.nav__sub a {
		padding: 9px 0 9px 16px;
		font-size: 15px;
		white-space: normal;
		border-left: 1px solid var(--hair);
	}
	.nav__sub a:hover { background: none; }
	.nav__act { flex-wrap: wrap; align-items: center; gap: 16px; width: 100%; }
	.nav__phone { font-size: 16px; }

	.hero { min-height: 540px; }
	/* фото сужается вместе с экраном — держим место под технику */
	.flt { min-height: 82vw; }
	.flt__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		width: auto;
		margin: auto 0 0;
	}
	.flt__item {
		width: auto;
		padding: 14px 16px;
		background: rgba(8, 14, 26, .68);
		border: 1px solid rgba(255, 255, 255, .1);
		border-radius: 6px;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
	.hero__in { padding-block: 132px 60px; }
	.hero__t { font-size: 40px; line-height: 46px; }

	.why__in, .abt__in, .flt__in, .prf__in, .ins__in, .ind__in, .tst__in, .qte__in, .faq__in, .cnt__in { padding-block: 68px; }
	.intro__in { padding-block: 44px; }
	.flt__in { padding-block: 108px 28px; }
	.how__head { margin-bottom: 48px; }
	.step { opacity: 1; }
	.abt__t { max-width: none; }
	.why__t, .prf__t, .ins__t, .ind__t, .tst__t { font-size: 32px; line-height: 40px; }
	.svc__t { font-size: 32px; line-height: 38px; }
	.abt__t { font-size: 36px; line-height: 42px; }
	.abt__pil { column-gap: 44px; }
	.flt__t { font-size: 34px; line-height: 42px; }
	.flt__name { font-size: 26px; }
	.how__t { font-size: 30px; line-height: 38px; }
	.qform__t, .qte__t { font-size: 28px; line-height: 34px; }
	.faq__t, .cnt__t { font-size: 34px; line-height: 40px; }
	.qa__q { font-size: 18px; line-height: 26px; }

	.wcard { min-height: 0; }
	.pcard, .ncard { min-height: 0; }
	.tcard__q { margin-bottom: 24px; }
	.qform__act .btn { width: 100%; }
	.faq__s { max-width: none; margin-bottom: 32px; }
	.qa__btn { padding: 20px 0; }
	.qa.is-open .qa__btn { padding-bottom: 14px; }
	.qa__a { padding-bottom: 24px; }
	.qa__a p { line-height: 26px; }
	.cnt__s { max-width: none; line-height: 26px; }
	.qform { padding: 28px; }
}

/* две колонки тут дают ~35 знаков в строке при норме 45-75 — переходим на одну,
   но с потолком по ширине, иначе строка улетает за 100 знаков */
@media (max-width: 899px) {
	.abt__pil { grid-template-columns: 1fr; column-gap: 0; }
	.pil { max-width: 620px; }
}


@media (max-width: 1023px) {
	.tst__grid { columns: 2; }
}

@media (max-width: 767px) {
	:root { --pad: 20px; }

	.hero .eyebrow { font-size: 11px; letter-spacing: 1.6px; margin-bottom: 18px; }
	.hero__t { font-size: 32px; line-height: 38px; letter-spacing: -.6px; }
	.hero__s { font-size: 16px; line-height: 26px; margin-bottom: 48px; }
	.hero__cta { gap: 10px; margin-bottom: 52px; }
	.btn { height: 48px; padding: 0 22px; font-size: 15px; }
	.btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }

	.why__grid, .svc__grid, .prf__grid, .ins__grid, .ind__grid, .cards { grid-template-columns: 1fr; }
	.prf__grid.prf__grid--car { --prf-vis: 1; }
	.prf__aside { align-items: flex-start; }
	.svc__grid { border: 0; background: none; gap: 12px; }
	.scell { padding: 28px 20px; border: 1px solid var(--hair); }
	.scell__i { top: 20px; right: 20px; }
	.scell__x { max-width: none; }
	.flt { min-height: 660px; }
	.flt__list { gap: 10px; margin-top: 180px; }
	.flt__item { padding: 14px 12px; }
	.flt__name { font-size: 20px; line-height: 24px; }
	.flt__cap { margin-top: 6px; font-size: 12px; }
	.how__steps { grid-template-columns: 1fr; gap: 26px; }
	.step { padding: 2px 0 0 76px; }
	.step::after { display: none; }
	.step__dot { top: 0; bottom: auto; }
	.step__x { max-width: none; }
	.tst__grid { columns: 1; }
	.hero__stat-v { font-size: 18px; line-height: 24px; }
	.hero__stats li { flex: 1 1 45%; padding: 0 0 0 20px; margin-bottom: 18px; }
	.hero__stats li:nth-child(odd) { padding-left: 0; border-left: 0; }
	.abt__head { grid-template-columns: 1fr; justify-items: start; gap: 26px; }
	.abt__pil { grid-template-columns: 1fr; column-gap: 0; }
	.fld__row { grid-template-columns: 1fr; gap: 0; }
	.qform { padding: 24px 20px; }
	.ftr__cols { grid-template-columns: repeat(2, 1fr); }
	.ftr__in { padding-block: 56px 32px; }

	.why__t, .prf__t, .ins__t, .ind__t, .tst__t, .svc__t, .flt__t, .how__t, .faq__t, .cnt__t, .abt__t {
		font-size: 28px;
		line-height: 34px;
		letter-spacing: -.5px;
	}
	.page__t { font-size: 32px; line-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Owner Operators (шаблон templates/owner-operators.php)
   Геометрия 1:1 с макетом Figma 218:3.
   ========================================================================== */

/* --- OO 01. Первый экран ------------------------------------------------- */

.ohero {
	overflow: hidden;
	background: linear-gradient(180deg, #0e1321 0%, #080b13 100%);
}
.ohero__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* затемнение: плотное под шапкой, прозрачнее по центру */
.ohero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 96%;
	background: linear-gradient(180deg,
		rgba(10, 17, 28, .95) 0%,
		rgba(10, 17, 28, .58) 26%,
		rgba(10, 17, 28, .42) 58%,
		rgba(10, 17, 28, .42) 100%);
}
/* растворение в фон следующей секции */
.ohero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 52%;
	background: linear-gradient(180deg,
		rgba(10, 14, 24, 0) 48%,
		rgba(10, 14, 24, .85) 84%,
		#0a0e18 92%);
}
.ohero__in {
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 427px;
	align-items: center;
	gap: 40px;
	padding-block: 153px 63px;
}
.ohero__left { max-width: 900px; }

.ocrumb {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 58px;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: .3px;
	text-transform: uppercase;
}
.ocrumb a { font-weight: 500; color: #b8c2d1; transition: color .2s ease; }
.ocrumb a:hover { color: var(--red-text); }
.ocrumb__a { color: #94a1b5; }
.ocrumb strong { font-weight: 500; color: var(--ink); }

.ohero__t {
	margin: 0;
	font-weight: 800;
	font-size: 96px;
	line-height: .8;
	letter-spacing: -1.6px;
	color: var(--ink);
}
/* Подзаголовок героя. Цвет, max-width и отбивка от заголовка — как у
   .svhero__s на индустриях, чтобы страницы читались одной семьёй.
   Кегль на 2px крупнее: H1 здесь 96px против 64px, 18px под ним теряется.
   max-width держит строку в левой колонке — без него она уедет под форму. */
.ohero__s {
	max-width: 620px;
	margin: 32px 0 0;
	font-size: 20px;
	line-height: 30px;
	color: var(--ink-6);
}
/* --- OO 01a. Полоса показателей под первым экраном ------------------------
   Показатели переехали из героя в отдельную полосу: форма ячейки взята у .wcell
   с главной, типографика числа осталась прежней (30/36, -.6px) — цифры выглядят
   так же, как выглядели в герое, меняется только оправа. */

.ostat { background: var(--page-2); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ostat__in { padding-block: 48px; }
.ostat__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ostat__c {
	/* subgrid: число, заголовок, черта и подпись встают на одну линию у соседей
	   по ряду, поэтому короткой подписи не нужен min-height */
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 0;
	align-content: start;
	justify-items: center;
	padding: 30px 18px 26px;
	text-align: center;
	background: var(--glass-2);
	border: 1px solid var(--hair);
	border-radius: 4px;
}
.ostat__v {
	display: block;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 30px;
	line-height: 36px;
	letter-spacing: -.6px;
	color: #fff;
}
.ostat__t {
	margin: 0 0 14px;
	font-weight: 700;
	font-size: 17px;
	line-height: 25px;
	color: #fff;
}
.ostat__rule {
	display: block;
	width: 26px;
	height: 2px;
	margin-bottom: 14px;
	background: var(--red);
}
.ostat__s {
	font-size: 13px;
	line-height: 22px;
	color: var(--ink-4);
}

/* --- OO 02. Карточка-заявка в первом экране ------------------------------ */

.ocard {
	justify-self: end;
	width: 427px;
	padding: 30px;
	background: var(--glass-2);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 16px;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}
.ocard__h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--hair);
}
.ocard__t { margin: 0; font-weight: 800; font-size: 33px; line-height: 40px; color: #fff; }
.ocard__ico { display: inline-flex; flex: none; width: 40px; height: 40px; color: var(--ink); }
.ocard__ico svg { width: 100%; height: 100%; }
.ocard__f { margin-top: 16px; }
.ocard .fld { margin-bottom: 12px; }
.ocard .fld__row { gap: 12px; margin-bottom: 12px; }
.ocard .fld input { height: 48px; }
.ocard .qform__msg { margin: 16px 0 0; }

.ocard__consent { position: relative; margin-top: 20px; }
.ocheck { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }

/* Свой квадрат вместо системного: accent-color красит только галку, рамку и фон
   нативного чекбокса в тёмной карточке не достать. */
.ocheck input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--hair-2);
	border-radius: 5px;
	cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
.ocheck:hover input { border-color: rgba(255, 255, 255, .3); }
.ocard__consent.is-err .ocheck input { border-color: var(--red); }
.ocheck input:checked {
	background-color: var(--red);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7.3l2.9 2.9L11.4 4.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	border-color: var(--red);
}
.ocheck input:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; }
.ocheck__t { font-size: 13px; line-height: 18.2px; color: #fff; }

.omore { margin: 8px 0 0 30px; font-size: 13px; line-height: 18.2px; color: #fff; }
.omore summary {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: fit-content;
	font-weight: 500;
	line-height: 16px;
	color: #fff;
	cursor: pointer;
	list-style: none;
}
.omore summary::-webkit-details-marker { display: none; }
.omore summary::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s;
}
.omore[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.omore summary:hover { color: var(--red-text); }

/* Раскрытый текст висит над карточкой, а не растёт в потоке: иначе открытие
   «Read more» тянет карточку, за ней геро-секцию, и вся страница прыгает. */
.omore > p {
	position: absolute;
	right: 0;
	bottom: calc(100% + 12px);
	left: 0;
	z-index: 4;
	margin: 0;
	padding: 14px 16px;
	color: var(--ink-3);
	background: var(--card);
	border: 1px solid var(--hair-2);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.omore > p::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 34px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-top-color: var(--card);
}

.ocard__btn { margin-top: 42px; }

/* --- OO 03. Три шага ----------------------------------------------------- */

.ostep { background: var(--page-2); }
/* стык с первым экраном */
.ostep::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 180px;
	background: linear-gradient(180deg, #0a0e18 0%, rgba(10, 14, 24, 0) 100%);
}
.ostep__in { padding-block: 72px; }
.ostep__head { text-align: center; }
.ostep .eyebrow { margin-bottom: 14px; letter-spacing: .78px; }
.ostep__t {
	margin: 0;
	font-weight: 800;
	font-size: 38px;
	line-height: 46px;
	letter-spacing: -.76px;
	color: var(--ink);
}
.ostep__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 40px;
	border-top: 1px solid var(--hair);
	border-bottom: 2px solid var(--hair);
}
.ostep__c {
	position: relative;
	padding: 48px 28px;
	border-left: 1px solid var(--hair);
	transition: background-color .25s ease;
}
.ostep__c:first-child { border-left: 0; }
/* акцент при наведении — как «активная» ячейка в макете */
.ostep__c::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--red);
	opacity: 0;
	transition: opacity .25s ease;
}
.ostep__c:hover { background: rgba(255, 255, 255, .02); }
.ostep__c:hover::before,
.ostep__c:focus-within::before { opacity: 1; }
.ostep__ico {
	position: absolute;
	top: 32px;
	right: 32px;
	display: inline-flex;
	width: 36px;
	height: 36px;
	color: var(--red);
}
.ostep__ico svg { width: 100%; height: 100%; }
.ostep__n {
	display: block;
	font-weight: 500;
	font-size: 14px;
	line-height: 17px;
	letter-spacing: .56px;
	color: var(--red-text);
}
.ostep__ct {
	margin: 16px 0 0;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -.2px;
	color: var(--ink);
}
.ostep__cx {
	margin: 16px 0 0;
	max-width: 240px;
	font-size: 14px;
	line-height: 21px;
	color: var(--ink-4);
}
.ostep__cta { margin: 40px 0 0; text-align: center; }
.ostep__cta .btn { width: 436px; max-width: 100%; justify-content: center; }

/* --- OO 04. Преимущества ------------------------------------------------- */

.oben { background-color: var(--page-2); }
.oben::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgb(10, 17, 28) 0%,
			rgba(10, 17, 28, .79) 28%,
			rgba(10, 17, 28, 0) 49%),
		linear-gradient(180deg,
			rgba(10, 17, 28, 0) 77%,
			rgba(10, 17, 28, .79) 90%,
			rgb(10, 17, 28) 100%),
		linear-gradient(0deg, rgba(10, 17, 28, .42), rgba(10, 17, 28, .42));
}
.oben__in { padding-block: 80px; }
.oben__head { text-align: center; }
.oben .eyebrow { margin-bottom: 12px; letter-spacing: .78px; }
.oben__t {
	margin: 0;
	font-weight: 800;
	font-size: 38px;
	line-height: 46px;
	letter-spacing: -.76px;
	color: var(--ink);
}
.oben__s {
	max-width: 520px;
	margin: 12px auto 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--ink-4);
}
.oben__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 44px;
}
.oben__c {
	display: flex;
	flex-direction: column;
	min-height: 212px;
	padding: 30px;
	background: rgba(8, 15, 28, .96);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 8px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.oben__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oben__ico { display: inline-flex; width: 26px; height: 26px; color: var(--red); }
.oben__ico svg { width: 100%; height: 100%; }
/* текст всегда прижат к низу карточки — как в макете */
.oben__txt { margin-top: auto; padding-top: 24px; }
.oben__ct {
	margin: 0;
	font-weight: 600;
	font-size: 26px;
	line-height: 31px;
	letter-spacing: -.26px;
	color: var(--ink);
}
.oben__cx { margin: 8px 0 0; font-size: 15px; line-height: 22.5px; color: var(--ink-4); }
/* --- OO 04a. Чек-лист «Join BMA Express if you:» -------------------------- */
/* волосяные линии вместо карточек и галочка 20px без подложки — просьба Лены:
   minimal, premium, без крупных иконок */

.ojoin { background-color: var(--page); }
.ojoin__in { padding-block: 72px; }
/* Секция — одна карточка: текст в левой половине, фотография прижата к правому
   краю и уходит под градиент цвета фона. Фон карточки равен --page, поэтому
   градиент и заливка сходятся без шва. */
.ojoin__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	align-items: center;
	gap: 32px;
	padding: 44px 48px;
	overflow: hidden;
	background-color: var(--page);
	border: 1px solid var(--hair);
	border-radius: 8px;
}
.ojoin__ph {
	position: absolute;
	inset: 0 0 0 auto;
	width: 62%;
}
.ojoin__ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	/* кадр закатный и светлый в верхней трети, а кнопка с подписью стоят ровно
	   на небе. Гасим саму фотографию, а не подкладываем плашку под текст. */
	filter: brightness(.4);
}
/* rgba(10, 14, 24) — это --page числом: в градиенте переменная-цвет с альфой
   не поднимается, а шов между заливкой карточки и градиентом виден сразу. */
.ojoin__ph::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(10, 14, 24, 1) 0%,
		rgba(10, 14, 24, .95) 26%,
		rgba(10, 14, 24, .66) 58%,
		rgba(10, 14, 24, .4) 88%,
		rgba(10, 14, 24, .34) 100%);
}
.ojoin__body, .ojoin__aside { position: relative; z-index: 1; }
.ojoin__head { position: relative; display: inline-block; }
.ojoin__t {
	margin: 0;
	font-weight: 800;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -.64px;
	color: var(--ink);
}
/* росчерк под заголовком: короче текста, поэтому своя ширина, а не растяжка
   по краям как у .und__u */
.ojoin__fl {
	position: absolute;
	left: 0;
	top: calc(100% + 3px);
	width: 30%;
	height: 9px;
	fill: var(--red);
	pointer-events: none;
}
.ojoin__list {
	position: relative;
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	column-gap: 40px;
	row-gap: 18px;
}
/* разделитель колонок — одна линия на всю высоту списка, поэтому псевдоэлемент
   у списка, а не border у пунктов: у пунктов он рвался бы на row-gap */
.ojoin__list::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - .5px);
	width: 1px;
	background: var(--hair);
}
.ojoin__i {
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: start;
	column-gap: 14px;
}
.ojoin__ck { display: block; width: 20px; height: 20px; margin-top: 3px; }
.ojoin__ck svg { display: block; width: 20px; height: 20px; }
.ojoin__x {
	font-size: 17px;
	line-height: 26px;
	color: var(--ink-2);
}
.ojoin__aside {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
}
.ojoin__btn .hand { font-family: inherit; font-size: inherit; color: #fff; }
.ojoin__note { margin: 0; font-size: 17px; line-height: 26px; }
.ojoin__note .hand { color: var(--ink-4); font-size: 1.24em; }

/* --- OO 05. Автопарк ----------------------------------------------------- */

.oflt { background: var(--page-2); }
.oflt__in { padding-block: 70px; }
.oflt__head {
	display: grid;
	grid-template-columns: minmax(0, 600px) 380px;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--hair);
}
.oflt .eyebrow { margin-bottom: 16px; letter-spacing: 1.04px; }
.oflt__t {
	margin: 0;
	font-weight: 800;
	font-size: 44px;
	line-height: 48px;
	letter-spacing: -1.1px;
	color: var(--ink);
}
.oflt__x { margin: 0; padding-top: 5px; font-size: 16px; line-height: 24.8px; color: var(--ink-4); }

.oflt__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 65px;
	row-gap: 48px;
	margin-top: 40px;
}
.oflt__c { position: relative; }
.oflt__c + .oflt__c::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -33px;
	width: 1px;
	background: var(--hair);
}
.oflt__ph {
	position: relative;
	height: 200px;
	background: rgba(255, 255, 255, .03);
	border-radius: 14px;
	overflow: hidden;
}
/* мягкая тень под машиной, как в макете */
.oflt__ph::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: 14px;
	height: 38px;
	background: rgba(0, 0, 0, .5);
	border-radius: 50%;
	filter: blur(18px);
}
.oflt__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.oflt__n {
	margin: 18px 0 0;
	font-weight: 600;
	font-size: 22px;
	line-height: 27px;
	letter-spacing: -.33px;
	color: var(--ink);
}
.oflt__s { margin: 4px 0 0; font-size: 14px; line-height: 17px; color: var(--ink-4); }
.oflt__specs { margin: 18px 0 0; }
.oflt__sp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 44px;
	border-top: 1px solid var(--hair);
}
.oflt__sp:last-child { border-bottom: 1px solid var(--hair); }
.oflt__sp dt { font-size: 14px; line-height: 17px; color: var(--ink-4); }
.oflt__sp dd { margin: 0; font-weight: 600; font-size: 15px; line-height: 18px; color: var(--ink); }
.oflt__lnk { margin-top: 18px; font-weight: 600; font-size: 14px; line-height: 17px; }
.oflt__note { margin: 18px 0 0; max-width: 257px; font-size: 14px; line-height: 21px; color: var(--ink-2); }

/* --- OO 06. FAQ (общие стили с главной, отличия — в отступах) ------------ */

.faq--oo::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 200px;
	background: linear-gradient(180deg, var(--page-2) 0%, rgba(10, 17, 28, 0) 100%);
}
.faq--oo .faq__in { padding-block: 92px 56px; }
.faq--oo .faq__s { margin-bottom: 36px; }

/* --- OO 07. Заявка ------------------------------------------------------- */

.oqte { background: linear-gradient(180deg, #0e192d 0%, #080e1a 100%); }
.oqte::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg,
			rgba(10, 17, 28, .96) 0%,
			rgba(10, 17, 28, .62) 20%,
			rgba(10, 17, 28, 0) 33%),
		linear-gradient(180deg,
			rgba(10, 14, 24, 0) 78%,
			rgba(10, 14, 24, .85) 92%,
			#0a0e18 100%),
		linear-gradient(0deg, rgba(10, 17, 28, .45), rgba(10, 17, 28, .45));
}
.oqte__in {
	display: grid;
	grid-template-columns: minmax(0, 564px) minmax(0, 692px);
	justify-content: space-between;
	align-items: center;
	gap: 56px;
	padding-block: 113px 96px;
}
/* Левая колонка снята в админке: одна центральная колонка, ширина формы прежняя.
   Правило живёт вне медиазапросов и перекрывает их по весу — 692px здесь верхняя
   граница трека, на узких экранах он ужимается сам. */
.oqte--solo .oqte__in { grid-template-columns: minmax(0, 692px); justify-content: center; }
.oqte .eyebrow { letter-spacing: 6px; }
.oqte__t {
	margin: 0 0 14px;
	font-weight: 800;
	font-size: 36px;
	line-height: 40px;
	letter-spacing: -.5px;
	color: var(--ink);
}
.oqte__s { margin: 0; font-size: 16px; line-height: 24px; color: #bdc9de; }

.oqte__stats { display: flex; flex-wrap: wrap; margin-top: 62px; }
.oqte__stats li { padding-inline: 35px; border-left: 1px solid var(--hair-2); }
.oqte__stats li:first-child { padding-left: 0; border-left: 0; }
.oqte__stat-v { display: block; font-weight: 800; font-size: 34px; line-height: 41px; color: var(--ink); }
.oqte__stat-l { display: block; margin-top: 4px; font-size: 13px; line-height: 16px; color: var(--ink-5); }

.oqte__quote {
	margin: 67px 0 0;
	padding: 22px;
	background: var(--glass);
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 12px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.oqte__quote blockquote { margin: 0 0 20px; font-weight: 500; font-size: 16px; line-height: 23px; color: var(--ink); }
.oqte__quote figcaption { display: flex; align-items: center; gap: 10px; }
.oqte__av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.oqte__qn { display: block; font-weight: 600; font-size: 13px; line-height: 16px; color: var(--ink); }
.oqte__qr { display: block; margin-top: 1px; font-size: 12px; line-height: 15px; color: var(--ink-5); }

.oqte .qform { max-width: 692px; margin: 0; }
.fld__opt { margin-left: 8px; font-weight: 500; color: var(--ink-4); }

/* --- OO. Планшет --------------------------------------------------------- */

@media (max-width: 1279px) {
	.ohero__in { grid-template-columns: minmax(0, 1fr) 400px; padding-block: 132px 56px; }
	.ocard { width: 400px; margin-right: 0; }
	.ohero__t { font-size: 72px; letter-spacing: -1.2px; }
	.ohero__s { font-size: 18px; line-height: 28px; }

	.ostep__c { padding: 40px 22px; }
	.ostep__ico { top: 24px; right: 22px; width: 30px; height: 30px; }
	.oflt__head { grid-template-columns: minmax(0, 1fr) 320px; }
	.oflt__t { font-size: 38px; line-height: 44px; }
	.oflt__grid { column-gap: 40px; }
	.oflt__c + .oflt__c::before { left: -20px; }
	.oqte__in { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; padding-block: 88px 72px; }

	.ojoin__card { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px; padding: 36px; }
}

/* --- OO. Малый планшет --------------------------------------------------- */

@media (max-width: 1023px) {
	.ohero__in { grid-template-columns: 1fr; gap: 40px; padding-block: 120px 56px; }
	.ohero__left { max-width: none; }
	.ocrumb { margin-bottom: 32px; }
	.ohero__t { font-size: 60px; line-height: .92; }
	.ocard { justify-self: stretch; width: auto; max-width: 520px; }

	.oben__grid { grid-template-columns: repeat(2, 1fr); }

	/* правой половины больше нет: фотография становится фоном всей карточки,
	   поверх — сплошное затемнение, чтобы текст читался без плашек-подложек */
	.ojoin__card { grid-template-columns: 1fr; gap: 30px; padding: 32px; }
	.ojoin__ph { width: 100%; }
	.ojoin__ph img { object-position: 72% 50%; }
	.ojoin__ph::after {
		background: linear-gradient(180deg,
			rgba(10, 14, 24, .8) 0%,
			rgba(10, 14, 24, .76) 55%,
			rgba(10, 14, 24, .72) 100%);
	}

	.ojoin__in { padding-block: 56px; }
	.ojoin__list { column-gap: 32px; }
	.ojoin__t { font-size: 28px; line-height: 36px; }

	.oflt__grid { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
	.oflt__c + .oflt__c::before { display: none; }
	.oflt__head { grid-template-columns: 1fr; gap: 20px; padding-bottom: 28px; }
	.oflt__x { padding-top: 0; }

	.oqte__in { grid-template-columns: 1fr; gap: 40px; padding-block: 72px 64px; }
	.oqte .qform { max-width: none; }
	.oqte__quote { margin-top: 40px; }
	.oqte__stats { margin-top: 40px; }
}

/* --- OO. Телефон --------------------------------------------------------- */

@media (max-width: 767px) {
	.ohero__in { padding-block: 104px 44px; }
	.ohero__t { font-size: 40px; line-height: 1; letter-spacing: -.6px; }
	.ohero__s { max-width: 560px; margin-top: 22px; font-size: 16px; line-height: 25px; }
	.ostat__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ocard { max-width: none; padding: 22px; border-radius: 12px; }
	.ocard__t { font-size: 26px; line-height: 32px; }
	.ocard__ico { width: 32px; height: 32px; }
	.ocard .fld__row { gap: 0; }
	.ocard__btn { margin-top: 28px; }

	.ostep__in { padding-block: 56px; }
	.ostep__t, .oben__t { font-size: 28px; line-height: 34px; letter-spacing: -.5px; }
	.ostep__grid { grid-template-columns: 1fr; margin-top: 28px; }

	/* одна колонка — вертикальный разделитель убирается вместе со второй */
	.ojoin__in { padding-block: 48px; }
	.ojoin__card { padding: 26px 20px; gap: 26px; }
	.ojoin__list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; row-gap: 16px; }
	.ojoin__list::before { display: none; }
	.ojoin__t { font-size: 26px; line-height: 33px; }
	.ojoin__fl { width: 38%; }
	.ojoin__x { font-size: 16px; line-height: 25px; }
	.ojoin__btn { width: 100%; justify-content: center; }
	.ostep__c { padding: 32px 0; border-left: 0; border-top: 1px solid var(--hair); }
	.ostep__c:first-child { border-top: 0; }
	.ostep__ico { top: 32px; right: 0; }
	.ostep__cx { max-width: none; padding-right: 48px; }
	.ostep__cta { margin-top: 32px; }
	.ostep__cta .btn { width: 100%; }

	.oben__in { padding-block: 56px; }
	.oben__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
	.oben__c { min-height: 0; padding: 22px; }
	.oben__txt { padding-top: 20px; }
	.oben__ct { font-size: 22px; line-height: 28px; }

	.oflt__in { padding-block: 56px; }
	.oflt__t { font-size: 28px; line-height: 34px; letter-spacing: -.5px; }
	.oflt__grid { grid-template-columns: 1fr; row-gap: 36px; margin-top: 28px; }

	.faq--oo .faq__in { padding-block: 56px 40px; }

	.oqte__in { padding-block: 56px 48px; }
	.oqte__t { font-size: 28px; line-height: 34px; }
	.oqte__stats { margin-top: 28px; }
	.oqte__stats li { flex: 1 1 45%; margin-bottom: 20px; padding: 0 0 0 20px; }
	.oqte__stats li:nth-child(odd) { padding-left: 0; border-left: 0; }
	.oqte__stat-v { font-size: 28px; line-height: 34px; }
	.oqte__quote { margin-top: 28px; padding: 18px; }
}

/* --- AB 01. Первый экран ------------------------------------------------- */

.abhero { overflow: hidden; background-color: var(--page); }
.abhero__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* затемнение слева направо — текст читается поверх фото */
.abhero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* до 62% держим почти глухую заливку: там стоит подпись, а под ней светлый
	   борт фуры — при .62 контраст падал до 2.4:1 вместо 4.5:1 */
	background: linear-gradient(90deg,
		rgba(10, 14, 24, .95) 0%,
		rgba(10, 14, 24, .88) 40%,
		rgba(10, 14, 24, .72) 62%,
		rgba(10, 14, 24, .28) 100%);
}
/* растворение в фон следующей секции */
.abhero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 320px;
	background: linear-gradient(180deg,
		rgba(10, 17, 28, 0) 0%,
		rgba(10, 17, 28, .85) 68%,
		rgb(10, 17, 28) 100%);
}
.abhero__in { z-index: 2; padding-block: 128px 108px; }
.abhero .eyebrow { margin-bottom: 22px; }
.abhero__t {
	max-width: 760px;
	margin: 0 0 70px;
	font-weight: 800;
	font-size: 60px;
	line-height: 64px;
	letter-spacing: -1.6px;
	color: var(--ink);
}
.abhero__s {
	max-width: 560px;
	margin: 0 0 46px;
	font-size: 18px;
	line-height: 28px;
	/* --ink-4 был темнее, чем на главной, и на фото не добирал 4.5:1 */
	color: var(--ink-3);
}

/* --- AB 02. Кто мы ------------------------------------------------------- */

.abstory { background: var(--page-2); }
.abstory__in { padding-block: 80px; }
.abstory__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 72px;
}
.abstory__left { display: flex; flex-direction: column; gap: 24px; }
.abstory .eyebrow { margin: 0; letter-spacing: 1.5px; }
.abstory__t {
	margin: 0;
	font-weight: 800;
	font-size: 40px;
	line-height: 43.2px;
	letter-spacing: -.4px;
	color: var(--ink);
}
/* 560px при 16px = ~70 знаков; и это главный текст страницы, а не сноска,
   поэтому тот же --ink-3, что в «Как мы работаем» */
.abstory__x { max-width: 560px; margin: 0; font-size: 16px; line-height: 25.6px; color: var(--ink-3); }

/* Абзацы внутри текстового блока: .85em отбивки вместо стыка строк —
   иначе шесть абзацев «Кто мы» читаются одним куском. */
.rt > p { margin: 0; }
.rt > p + p { margin-top: .85em; }
.abstory__list { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.abstory__list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-weight: 500;
	font-size: 15px;
	line-height: 18.2px;
	color: var(--ink-2);
}
.abstory__list li::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-top: 6px;
	border-radius: 4px;
	background: var(--red);
}
.abstory__ph {
	position: relative;
	align-self: center;
	margin: 0;
	aspect-ratio: 620 / 460;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 18px;
}
.abstory__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* затемнение под плашкой */
.abstory__ph::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 220px;
	background: linear-gradient(180deg, rgba(10, 14, 23, 0) 0%, rgba(10, 14, 23, .85) 100%);
}
.abstory__badge {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: rgba(15, 20, 33, .6);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	font-weight: 500;
	font-size: 13px;
	line-height: 15.7px;
	color: var(--ink);
}
.abstory__dot { width: 8px; height: 8px; border-radius: 4px; background: var(--red); }

/* --- AB 03. Цифры -------------------------------------------------------- */

.abstat { background: var(--page-2); }
.abstat__in { padding-block: 80px; }
.abstat .eyebrow { letter-spacing: 1.5px; }
.abstat__t {
	margin: 0;
	font-weight: 800;
	font-size: 40px;
	line-height: 48.4px;
	letter-spacing: -.4px;
	color: var(--ink);
}
/* панель с заливкой и красные чёрточки убраны: та же волосяная линейка, что в
   блоке «О компании» на главной — четыре показателя читаются как один разворот.
   Четыре колонки не годятся: «48 U.S. states + Canada» в 328px не помещается. */
.abstat__panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 64px;
	row-gap: 0;
	margin-top: 40px;
	padding: 0;
	background: none;
	border-radius: 0;
}
.abstat__c {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 0 28px;
	border-top: 1px solid var(--hair);
}
.abstat__bar { display: none; }
/* 46px/900 было единственным 900 на сайте и вторым кеглем после H1 страниц:
   цифра кричала громче заголовка секции. Значение взято с первого экрана
   Owner Operators (.ostat__v), там та же подача показателей */
.abstat__v {
	font-weight: 600;
	font-size: 30px;
	line-height: 38px;
	letter-spacing: -.6px;
	color: var(--ink);
}
/* подписи стали предложениями, а не парой слов: 14px/16.9px для них тесно */
.abstat__l { max-width: 420px; font-size: 15px; line-height: 23px; color: var(--ink-4); }

/* --- AB 04. Принципы ----------------------------------------------------- */

/* четыре секции подряд на одном --page-2 сливались, а --page отличается на 3-4
   единицы RGB и границы не даёт. Полоса-градиент — уже принятый в теме приём
   разбивки (.how и .faq на главной, .oqte на Owner Operators) */
.abval { background: linear-gradient(180deg, #0e192d 0%, #080e1a 100%); }
.abval__in { padding-block: 80px; }
.abval .eyebrow { letter-spacing: 1.5px; }
.abval__t {
	margin: 0;
	font-weight: 800;
	font-size: 40px;
	line-height: 48.4px;
	letter-spacing: -.4px;
	color: var(--ink);
}
.abval__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 64px;
	row-gap: 0;
	margin-top: 40px;
}
/* как и на главной: линейка сверху вместо плитки с рамкой и заливкой */
.abval__c {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 26px 0 28px;
	background: none;
	border: 0;
	border-top: 1px solid var(--hair);
	border-radius: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.abval__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.abval__ico { display: inline-flex; width: 24px; height: 24px; color: var(--red); }
.abval__ico svg { width: 100%; height: 100%; }
.abval__n {
	font-weight: 600;
	font-size: 14px;
	line-height: 16.9px;
	color: #fff;
	opacity: .18;
}
/* карточки больше нет — текст идёт сразу под иконкой, а не прижат к низу */
.abval__txt { margin-top: 0; padding-top: 14px; }
.abval__ct {
	margin: 0;
	font-weight: 600;
	font-size: 26px;
	line-height: 31.5px;
	letter-spacing: -.26px;
	color: var(--ink);
}
/* 480px при 15px = ~64 знака в строке; на всю колонку было бы за 85 */
.abval__cx { max-width: 480px; margin: 8px 0 0; font-size: 15px; line-height: 22.5px; color: var(--ink-4); }

/* --- AB 05. Обещание ----------------------------------------------------- */

.abprom { background: var(--page-2); }
.abprom__in { padding-block: 80px; }
/* панель в две колонки: слева заголовок, справа пять обязательств.
   В одну колонку список из коротких строк оставлял бы полосу пустой справа. */
.abprom__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	column-gap: 72px;
	row-gap: 0;
	margin: 0;
	padding: 56px 64px 52px;
	background: linear-gradient(90deg, #141a2b 0%, #2e0f17 100%);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 20px;
}
.abprom .eyebrow { grid-area: 1 / 1 / 2 / 2; margin: 0 0 18px; letter-spacing: 1.5px; }
.abprom__t {
	grid-area: 2 / 1 / 3 / 2;
	max-width: 520px;
	margin: 0;
	font-weight: 800;
	font-size: 34px;
	line-height: 44.9px;
	letter-spacing: -.34px;
	color: var(--ink);
}
.abprom__list { grid-area: 1 / 2 / 3 / 3; }
.abprom__li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 13px 0 14px;
	font-weight: 600;
	font-size: 19px;
	line-height: 27px;
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.abprom__n { flex: none; font-weight: 600; font-size: 13px; line-height: 27px; color: #fff; opacity: .38; }
.abprom__x {
	grid-area: 3 / 1 / 4 / -1;
	max-width: 640px;
	margin: 40px 0 0;
	font-size: 17px;
	line-height: 27px;
	color: var(--ink-3);
}
.abprom__by { grid-area: 4 / 1 / 5 / -1; margin: 14px 0 0; font-weight: 500; font-size: 15px; line-height: 18.2px; color: var(--ink-5); }

/* --- AB 06. Призыв к действию -------------------------------------------- */

.abcta { overflow: hidden; background: var(--page-2); }
.abcta__img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 440px;
	object-fit: cover;
	object-position: center;
}
/* фото проявляется из фона сверху, уходит в фон снизу, слева затемнено под текст */
.abcta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	height: 440px;
	background:
		linear-gradient(180deg, rgb(10, 17, 28) 0%, rgba(10, 17, 28, 0) 45.45%),
		linear-gradient(180deg, rgba(10, 17, 28, 0) 50%, rgb(10, 17, 28) 100%),
		linear-gradient(90deg,
			rgba(10, 14, 24, .95) 0%,
			rgba(10, 14, 24, .7) 60%,
			rgba(10, 14, 24, .35) 100%);
}
.abcta__in { z-index: 2; padding-block: 116px; }
.abcta .eyebrow { margin-bottom: 20px; }
.abcta__t {
	max-width: 760px;
	margin: 0 0 60px;
	font-weight: 800;
	font-size: 52px;
	line-height: 56px;
	letter-spacing: -1.2px;
	color: var(--ink);
}
.abcta__s {
	max-width: 540px;
	margin: 0 0 32px;
	font-size: 18px;
	line-height: 28px;
	color: var(--ink-3);
}
/* две кнопки, а не кнопка и сноска: gap 28px был расчётом на текст рядом */
/* колонки 1fr вместо flex: кнопки всегда одной ширины и не разъезжаются,
   когда подпись меняют в админке */
.abcta__act {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: center;
	gap: 16px;
}
.abcta__btn { justify-content: center; }
.abcta__call {
	margin: 0;
	font-weight: 600;
	font-size: 16px;
	line-height: 19.4px;
	color: var(--ink);
}
.abcta__call a { color: inherit; }

/* --- AB. Планшет --------------------------------------------------------- */

@media (max-width: 1279px) {
	.abhero__in { padding-block: 104px 88px; }
	.abhero__t { font-size: 52px; line-height: 58px; margin-bottom: 52px; }

	.abstory__row { gap: 44px; }
	.abstory__t { font-size: 34px; line-height: 40px; }

	.abstat__panel { column-gap: 48px; }
	.abstat__v { font-size: 28px; line-height: 36px; }
	.abstat__t, .abval__t { font-size: 34px; line-height: 42px; }

	.abval__grid { column-gap: 48px; }
	.abval__txt { padding-top: 12px; }
	.abval__ct { font-size: 23px; line-height: 29px; }

	.abprom__panel { column-gap: 48px; padding: 48px 44px; }
	.abprom__t { font-size: 29px; line-height: 39px; }

	.abcta__in { padding-block: 96px; }
	.abcta__t { font-size: 44px; line-height: 50px; margin-bottom: 44px; }
}

/* --- AB. Малый планшет --------------------------------------------------- */

@media (max-width: 1023px) {
	.abhero__in { padding-block: 88px 72px; }
	.abhero__t { font-size: 44px; line-height: 50px; margin-bottom: 40px; }
	.abhero__s { margin-bottom: 36px; }

	.abstory__row { grid-template-columns: 1fr; gap: 40px; }
	.abstory__ph { max-width: 620px; }

	.abstat__panel { column-gap: 40px; }

	.abprom__panel { grid-template-columns: 1fr; padding: 40px 32px; }
	.abprom .eyebrow { grid-area: auto; }
	.abprom__t { grid-area: auto; max-width: none; font-size: 26px; line-height: 35px; }
	.abprom__list { grid-area: auto; margin-top: 28px; }
	.abprom__x { grid-area: auto; }
	.abprom__by { grid-area: auto; }

	.abcta__img, .abcta::before { height: 100%; }
	.abcta__in { padding-block: 80px; }
	.abcta__t { font-size: 38px; line-height: 44px; margin-bottom: 36px; }
}

/* --- AB. Телефон --------------------------------------------------------- */

@media (max-width: 767px) {
	.abhero__in { padding-block: 64px 56px; }
	.abhero .eyebrow { font-size: 11px; letter-spacing: 1.6px; margin-bottom: 18px; }
	.abhero__t { font-size: 34px; line-height: 40px; letter-spacing: -.8px; margin-bottom: 28px; }
	.abhero__s { font-size: 16px; line-height: 25px; margin-bottom: 28px; }
	.abhero__btn { width: 100%; justify-content: center; }

	.abstory__in, .abstat__in, .abval__in, .abprom__in { padding-block: 56px; }
	.abstory__t { font-size: 27px; line-height: 33px; }
	.abstory__badge { left: 16px; bottom: 16px; }

	.abstat__t, .abval__t { font-size: 27px; line-height: 33px; }
	.abstat__panel { grid-template-columns: 1fr; }
	.abstat__v { font-size: 26px; line-height: 34px; }

	.abval__grid { grid-template-columns: 1fr; margin-top: 28px; }
	.abval__txt { padding-top: 12px; }
	.abval__ct { font-size: 21px; line-height: 27px; }

	.abprom__panel { padding: 28px 22px; border-radius: 14px; }
	.abprom__t { font-size: 21px; line-height: 30px; }
	.abprom__li { font-size: 17px; line-height: 25px; }
	.abprom__x { margin-top: 28px; font-size: 16px; line-height: 25px; }

	.abcta__in { padding-block: 64px 56px; }
	.abcta__t { font-size: 30px; line-height: 36px; letter-spacing: -.6px; margin-bottom: 28px; }
	.abcta__s { font-size: 16px; line-height: 25px; margin-bottom: 28px; }
	.abcta__act { display: grid; grid-auto-flow: row; gap: 20px; }
	.abcta__btn { width: 100%; }
}

/* --- CT 01. Первый экран ------------------------------------------------- */

.chero { overflow: hidden; background-color: var(--page); }
.chero__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* затемнение сверху вниз — шапка лежит поверх фото, как «Navbar (blur)» в макете */
.chero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg,
		rgba(10, 17, 28, .92) 0%,
		rgba(10, 17, 28, .6) 55%,
		rgba(10, 17, 28, .32) 100%);
}
/* растворение в фон следующей секции */
.chero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 360px;
	background: linear-gradient(180deg,
		rgba(10, 14, 24, 0) 0%,
		rgba(10, 14, 24, .85) 68%,
		rgb(10, 17, 28) 84%);
}
.chero__in { z-index: 2; padding-block: 201px 108px; }
.chero .ocrumb { margin-bottom: 128px; }
.chero .eyebrow { margin-bottom: 16px; }
.chero__t {
	max-width: 900px;
	margin: 0 0 18px;
	font-weight: 800;
	font-size: 60px;
	line-height: 64px;
	letter-spacing: -1.6px;
	color: var(--ink);
}
.chero__s {
	max-width: 560px;
	margin: 0;
	font-size: 18px;
	line-height: 28px;
	color: var(--ink-3);
}

/* --- CT 02. Диспетчерская + заявка --------------------------------------- */

.creach { background-color: var(--page-2); }
.creach::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgb(10, 17, 28) 0%,
		rgba(10, 17, 28, .86) 22%,
		rgba(8, 14, 26, .9) 62%,
		rgb(10, 17, 28) 100%);
}
.creach__in {
	display: grid;
	grid-template-columns: 43fr 53fr;
	align-items: start;
	gap: 56px;
	padding-block: 62px;
}
/* в макете колонка с контактами начинается ниже карточки формы */
.creach__left { padding-top: 49px; }
.creach .eyebrow { margin-bottom: 10px; }
.creach__t {
	margin: 0 0 14px;
	font-weight: 800;
	font-size: 36px;
	line-height: 40px;
	letter-spacing: -.5px;
	color: var(--ink);
}
.creach__x { max-width: 520px; margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-4); }

.crow { max-width: 508px; margin-top: 42px; }
.crow__i { position: relative; display: flex; align-items: flex-start; gap: 22px; }
.crow__i + .crow__i { margin-top: 41px; }
/* разделитель короче строки — как в макете (353px) */
.crow__i:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -20px;
	width: 353px;
	max-width: 100%;
	height: 1px;
	background: var(--hair-2);
}
.crow__ico { flex: 0 0 26px; display: inline-flex; width: 26px; height: 26px; margin-top: 12px; color: var(--red); }
.crow__ico svg { width: 100%; height: 100%; }
.crow__txt { min-width: 0; }
.crow__l {
	display: block;
	font-weight: 600;
	font-size: 13px;
	line-height: 15.7px;
	letter-spacing: .3px;
	color: var(--ink-4);
}
.crow__v {
	display: block;
	margin-top: 4px;
	font-weight: 700;
	font-size: 19px;
	line-height: 23px;
	letter-spacing: -.2px;
	color: var(--ink);
	overflow-wrap: anywhere;
}
.crow__v a { color: inherit; transition: color .2s ease; }
.crow__v a:hover { color: var(--red-text); }

/* карточка формы — общая с главной, здесь она стоит в колонке, а не по центру */
.creach__form { max-width: none; margin: 0; padding: 36px 36px 70px; }

/* --- CT. Планшет --------------------------------------------------------- */

@media (max-width: 1279px) {
	.chero__in { padding-block: 176px 88px; }
	.chero .ocrumb { margin-bottom: 96px; }
	.chero__t { font-size: 52px; line-height: 58px; }

	.creach__in { gap: 40px; padding-block: 56px; }
	.creach__left { padding-top: 32px; }
	.creach__t { font-size: 32px; line-height: 38px; }
	.creach__form { padding: 32px 32px 56px; }
}

/* --- CT. Малый планшет --------------------------------------------------- */

@media (max-width: 1023px) {
	.chero__in { padding-block: 150px 72px; }
	.chero .ocrumb { margin-bottom: 64px; }
	.chero__t { font-size: 44px; line-height: 50px; }
	.chero__s { font-size: 17px; line-height: 27px; }

	.creach__in { grid-template-columns: 1fr; gap: 40px; }
	.creach__left { padding-top: 0; }
	.crow { max-width: none; }
	.crow__i:not(:last-child)::after { width: 100%; }
}

/* --- CT. Телефон --------------------------------------------------------- */

@media (max-width: 767px) {
	.chero__in { padding-block: 122px 56px; }
	.chero .ocrumb { gap: 10px; margin-bottom: 40px; }
	.chero .eyebrow { font-size: 11px; letter-spacing: 1.6px; margin-bottom: 18px; }
	.chero__t { font-size: 34px; line-height: 40px; letter-spacing: -.8px; margin-bottom: 18px; }
	.chero__s { font-size: 16px; line-height: 25px; }

	.creach__in { padding-block: 48px 56px; gap: 32px; }
	.creach__t { font-size: 27px; line-height: 33px; }
	.crow { margin-top: 32px; }
	.crow__i + .crow__i { margin-top: 34px; }
	.crow__i:not(:last-child)::after { bottom: -17px; }
	.crow__ico { flex-basis: 22px; width: 22px; height: 22px; margin-top: 10px; }
	.crow__v { font-size: 17px; line-height: 22px; }
	.creach__form { padding: 24px 20px 40px; }
	.creach__form .qform__t { font-size: 26px; line-height: 32px; }
}

/* ========================================================================== */
/* SV. Страница услуги (Expedited) — Figma 370:2                              */
/* ========================================================================== */

/* --- SV 01. Первый экран -------------------------------------------------- */

.svhero { overflow: hidden; background: var(--page); }
.svhero__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* шапка лежит поверх фото, поэтому верх затемняем сильнее, низ уводим в фон */
.svhero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(10, 14, 24, .92) 0%, rgba(10, 14, 24, .55) 22%, rgba(10, 14, 24, .55) 48%, rgba(10, 17, 28, .96) 100%),
		linear-gradient(90deg, rgba(10, 14, 24, .8) 0%, rgba(10, 14, 24, .35) 62%, rgba(10, 14, 24, .2) 100%);
}
.svhero__in { z-index: 2; padding-block: 201px 151px; }
.svhero .ocrumb { margin-bottom: 35px; }
/* 18px, а не 16: у .eyebrow нет line-height (19.5 против 15.73 в макете) —
   разницу добираем здесь, общее правило .eyebrow не трогаем. */
.svhero .eyebrow { margin-bottom: 18px; }
.svhero__t {
	max-width: 900px;
	margin: 0;
	font-weight: 800;
	font-size: 64px;
	line-height: 66px;
	letter-spacing: -1.6px;
	color: var(--ink);
}
/* подзаголовок слева, кнопки справа — обе колонки от нижней границы H1 */
.svhero__b {
	display: grid;
	/* правая колонка прижата к правому краю резинки: 64 + 1312 - 450 = 926 по макету */
	grid-template-columns: 620px minmax(0, 450px);
	justify-content: space-between;
	gap: 40px;
	align-items: start;
}
.svhero__s {
	max-width: 620px;
	margin: 32px 0 0;
	font-size: 18px;
	line-height: 28px;
	color: var(--ink-6);
}
.svhero__act { margin-top: 17px; }
.svhero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.svhero__note {
	margin: 24px 0 0;
	font-size: 15px;
	line-height: 18.15px;
	color: var(--ink-6);
}
/* Индустрия: в правом треке одна кнопка без note, трек схлопывается до её
   ширины, а space-between прижимает его к правому краю резинки — между
   однострочным подзаголовком и CTA открывается до 520px пустоты. У услуг в
   треке два элемента и подзаголовок 2-4 строки, пара колонок читается —
   базовое правило для них не трогаем, сужаем по body-классу. */
.single-industry .svhero__b { display: block; }
.single-industry .svhero__btns { margin-top: 28px; }

/* --- SV 02. Что такое expedited ------------------------------------------ */

.svwhat { overflow: hidden; background: var(--page-2); }
/* мягкий стык с первым экраном */
.svwhat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 180px;
	background: linear-gradient(180deg, rgba(10, 17, 28, .9) 0%, rgba(10, 17, 28, 0) 100%);
}
.svwhat__in { padding-block: 72px; }
.svwhat__head {
	display: grid;
	grid-template-columns: 600px 480px;
	justify-content: space-between;
	gap: 40px;
}
.svwhat__hl { max-width: 600px; }
.svwhat .eyebrow { letter-spacing: .78px; margin-bottom: 10px; }
.svwhat__t {
	margin: 0;
	font-weight: 800;
	font-size: 38px;
	line-height: 44px;
	letter-spacing: -.76px;
	color: var(--ink);
}
.svwhat__x {
	max-width: 480px;
	margin: 0;
	font-size: 17px;
	line-height: 27px;
	color: var(--ink-4);
}
.svwhat__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
	border-bottom: 2px solid var(--hair);
}
.svwhat__c {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 48px 28px;
}
/* вертикальные линейки между ячейками — только внутри ряда */
.svwhat__c + .svwhat__c::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1px;
	width: 1px;
	background: var(--hair);
}
.svwhat__body { min-width: 0; }
.svwhat__n {
	display: block;
	margin-bottom: 16px;
	font-weight: 500;
	font-size: 14px;
	line-height: 16.94px;
	letter-spacing: .56px;
	color: var(--red-text);
}
.svwhat__ct {
	margin: 0 0 16px;
	font-weight: 700;
	font-size: 20px;
	line-height: 24.2px;
	letter-spacing: -.2px;
	color: var(--ink);
}
.svwhat__cx {
	max-width: 240px;
	margin: 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--ink-4);
}
.svwhat__ico { flex: 0 0 36px; width: 36px; height: 36px; color: var(--red); }
.svwhat__ico svg { display: block; width: 100%; height: 100%; }

/* --- SV 03. Что входит в услугу ------------------------------------------ */

.svinc { overflow: hidden; background: var(--page-2); }
.svinc__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* Затемнение под фото 1:1 с макетом (392:2, высота 848):
   заливка #0A111C 42 % на всю секцию, сверху растяжка 0..416px (1 → .79 → 0)
   и снизу растяжка 656..856px (0 → .79 → 1). Проценты — от высоты секции. */
.svinc::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(10, 17, 28, 1) 0%, rgba(10, 17, 28, .79) 30.9%, rgba(10, 17, 28, 0) 49.1%),
		linear-gradient(180deg, rgba(10, 17, 28, 0) 77.4%, rgba(10, 17, 28, .79) 87.3%, rgba(10, 17, 28, .99) 100%),
		rgba(10, 17, 28, .42);
}
.svinc__in { z-index: 2; padding-block: 80px; text-align: center; }
.svinc .eyebrow { letter-spacing: .78px; margin-bottom: 8px; }
.svinc__t {
	max-width: 900px;
	margin: 0 auto 12px;
	font-weight: 800;
	font-size: 38px;
	line-height: 45.99px;
	letter-spacing: -.76px;
	color: var(--ink);
}
.svinc__s {
	max-width: 637px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 24px;
	color: #9aa3b2;
}
.svinc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.svinc__c {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* 12px — минимальный зазор из макета (карточка с двухстрочным заголовком);
	   в остальных space-between прижимает текст к низу, как в Figma. */
	gap: 12px;
	min-height: 212px;
	/* Обводка в макете INSIDE, поэтому 29px + 1px = 30px отступа как в Figma. */
	padding: 29px;
	background: rgba(8, 15, 28, .96);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 8px;
}
.svinc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.svinc__ico { flex: 0 0 26px; width: 26px; height: 26px; color: var(--red); }
.svinc__ico svg { display: block; width: 100%; height: 100%; }
.svinc__n {
	font-weight: 600;
	font-size: 14px;
	line-height: 16.94px;
	letter-spacing: .28px;
	color: rgba(255, 255, 255, .18);
}
.svinc__ct {
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 26px;
	line-height: 30px;
	letter-spacing: -.26px;
	/* В макете красный только первый смысловой кусок ([ac] в поле), остальное
	   белое. Кегль 26px, то есть красный здесь — --red, а не --red-text. */
	color: var(--ink);
}
.svinc__cx {
	margin: 0;
	font-size: 15px;
	line-height: 22.5px;
	color: #9aa3b2;
}
.svinc__act { margin: 44px 0 0; }
/* стрелка внутри кнопки — в макете это глиф в той же текстовой строке */
.svinc__ar { margin-left: 6px; font-size: 16px; line-height: 1; }

/* --- SV 04. Когда сроки критичны ----------------------------------------- */

.svcrit { overflow: hidden; background: var(--page-3); }
.svcrit__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* В макете (378:2) фото накрыто вертикальной растяжкой #0E192D 100 % →
   #080E1A 45 %: верх секции глухой, к низу фото проявляется. */
.svcrit::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(14, 25, 45, 1) 0%, rgba(8, 14, 26, .45) 100%);
}
/* Отдельный слой 401:2791 — нижние 327px уходят в цвет следующей секции. */
.svcrit::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 327px;
	background: linear-gradient(180deg, rgba(8, 14, 26, 0) 0%, rgba(8, 14, 26, .79) 41.9%, rgba(8, 14, 26, 1) 100%);
}
.svcrit__in { z-index: 2; padding-block: 100px; }
.svcrit .eyebrow { margin-bottom: 12px; }
.svcrit__t {
	max-width: 900px;
	margin: 0;
	font-weight: 800;
	font-size: 40px;
	line-height: 46px;
	letter-spacing: -1px;
	color: var(--ink);
}
/* Сетка на flex, а не на grid: карточек столько, сколько реальных ситуаций,
   и последний неполный ряд должен вставать по центру, а не обрываться дыркой.
   Базис задан как (100% - gap*(n-1))/n — это ровно то, что считал repeat(n, 1fr),
   ширина карточки против grid-варианта не меняется. */
.svcrit__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}
.svcrit__c {
	flex: 0 1 calc((100% - 40px) / 3);
	min-width: 0;
	min-height: 220px;
	padding: 29px;
	/* В макете (378:9) на стекле лежит второй слой #061A42 — 0.72 при
	   непрозрачности слоя 0.86, то есть 62 %. Без него карточка светит. */
	background: linear-gradient(rgba(6, 26, 66, .62), rgba(6, 26, 66, .62)), var(--glass);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 8px;
}
.svcrit__k {
	display: block;
	margin-bottom: 18px;
	font-weight: 600;
	font-size: 12px;
	line-height: 14.52px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--red-text);
}
.svcrit__ct {
	max-width: 360px;
	margin: 0 0 18px;
	font-weight: 700;
	font-size: 22px;
	line-height: 26.625px;
	letter-spacing: -.3px;
	color: var(--ink);
}
.svcrit__cx {
	margin: 0;
	font-size: 16px;
	line-height: 21px;
	color: var(--ink-2);
}

/* --- SV 05. Один контакт -------------------------------------------------- */

.svone { background: var(--page-2); }
.svone__in {
	display: grid;
	grid-template-columns: 500px minmax(0, 1fr);
	gap: 48px;
	padding-block: 70px;
}
.svone__l { max-width: 500px; }
.svone .eyebrow { margin-bottom: 14px; }
.svone__t {
	max-width: 480px;
	margin: 0 0 18px;
	font-weight: 800;
	font-size: 36px;
	line-height: 42px;
	letter-spacing: -1px;
	color: var(--ink);
}
.svone__x {
	max-width: 480px;
	margin: 0;
	font-size: 17px;
	line-height: 27px;
	color: var(--ink-6);
}
.svone__pts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.svone__n {
	display: block;
	margin-bottom: 8px;
	font-weight: 800;
	font-size: 22px;
	line-height: 26.625px;
	color: var(--red-text);
}
.svone__pt {
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 17px;
	line-height: 20.5739px;
	letter-spacing: -.2px;
	color: var(--ink);
}
.svone__px {
	margin: 0;
	font-size: 14px;
	line-height: 21px;
	color: #9aa4b4;
}

/* --- SV 06. Отзывы клиентов ---------------------------------------------- */

.svfb { background: var(--page-2); }
.svfb__in { padding-block: 70px; }
.svfb__head { text-align: center; }
.svfb .eyebrow { margin-bottom: 12px; }
.svfb__t {
	max-width: 900px;
	margin: 0 auto;
	font-weight: 800;
	font-size: 40px;
	line-height: 46px;
	letter-spacing: -1px;
	color: var(--ink);
}
.svfb__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}
.svfb__c { display: flex; }
.svfb__q {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 349px;
	margin: 0;
	padding: 32px 32px 40px;
	background: var(--glass-2);
	border-radius: 16px;
}
.svfb__mark {
	display: block;
	margin-bottom: 18px;
	font-weight: 800;
	font-size: 44px;
	line-height: 53.25px;
	color: var(--red);
}
.svfb__text { margin: 0; }
.svfb__text p { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink-2); }
.svfb__by {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 19px;
	border-top: 1px solid var(--hair);
}
/* хайрлайн отбит от текста цитаты сверху, а не только снизу */
.svfb__text + .svfb__by { margin-top: auto; }
.svfb__av { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.svfb__av--ini { display: flex; align-items: center; justify-content: center; background: var(--glass); border: 1px solid var(--hair-2); font-weight: 600; font-size: 15px; letter-spacing: .5px; color: var(--ink-2); }
.svfb__who { display: block; }
.svfb__name { display: block; font-weight: 600; font-size: 13px; line-height: 15.733px; color: var(--ink); }
.svfb__role { display: block; margin-top: 8px; font-size: 12px; line-height: 14.52px; color: var(--ink-5); }

/* --- SV 07. Финальный призыв --------------------------------------------- */

.svcta { overflow: hidden; background: var(--page); }
.svcta__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.svcta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Макет 385:2 (h=460): горизонтальная растяжка #080B14 — слева 98 %,
	   просвет 79 % на 63 % ширины, справа 88 %; плюс верхние 119px и
	   нижние 119px уходят в цвет соседних секций. */
	background:
		linear-gradient(180deg, rgba(8, 11, 19, 1) 0%, rgba(10, 15, 25, 0) 25.9%),
		linear-gradient(180deg, rgba(10, 15, 25, 0) 74.1%, rgba(10, 15, 25, .79) 85%, rgba(10, 15, 25, 1) 100%),
		linear-gradient(90deg, rgba(8, 11, 20, .98) 0%, rgba(8, 11, 20, .98) 47%, rgba(8, 11, 20, .79) 63%, rgba(8, 11, 20, .88) 100%);
}
.svcta__in { z-index: 2; padding-block: 99px; }
.svcta .eyebrow { margin-bottom: 14px; }
.svcta__t {
	max-width: 664px;
	margin: 0 0 24px;
	font-weight: 800;
	font-size: 44px;
	line-height: 53.25px;
	letter-spacing: -1px;
	color: var(--ink);
}
.svcta__s {
	max-width: 660px;
	margin: 0 0 27px;
	font-size: 17px;
	line-height: 20.5739px;
	color: #fff;
}
.svcta__act { margin: 0; }

/* --- SV 08. Заявка в две колонки (общая секция в режиме split) ------------ */

.qte--split .qte__in {
	display: grid;
	/* minmax(0, …) — чтобы между 1280 и 1440 колонки ужимались, а не
	   вылезали за вьюпорт: 564 + 692 больше контентной ширины на 1280. */
	grid-template-columns: minmax(0, 564px) minmax(0, 692px);
	justify-content: space-between;
	gap: 0 40px;
	align-items: start;
	padding-block: 113px 65px;
}
.qte--split .qte__left {
	max-width: none;
	margin: 0;
	padding-top: 49px;
	text-align: left;
}
.qte--split .qte .eyebrow,
.qte--split .eyebrow { margin-bottom: 10px; }
.qte--split .qte__t { margin-bottom: 14px; }
.qte--split .qte__s { color: var(--ink-6); font-size: 17px; line-height: 27px; }
.qte--split .qform { max-width: none; margin: 0; padding: 36px; }

.qte__checks { margin: 50px 0 0; padding: 0; list-style: none; }
.qte__check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 18px;
	line-height: 21.78px;
	color: var(--ink-2);
}
.qte__check + .qte__check { margin-top: 20px; }
.qte__tick {
	flex: 0 0 14px;
	font-weight: 700;
	font-size: 15px;
	line-height: 21.78px;
	color: var(--red-text);
}
.fld__hint { margin: -8px 0 18px; font-size: 12px; line-height: 15px; color: var(--ink-5); }

/* --- SV. Ноутбук --------------------------------------------------------- */

@media (max-width: 1279px) {
	.svhero__in { padding-block: 172px 112px; }
	.svhero__t { font-size: 54px; line-height: 58px; letter-spacing: -1.3px; }
	.svhero__b { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 32px; }
	.svhero__s { font-size: 17px; line-height: 27px; }

	.svwhat__head { grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; }
	.svwhat__t { font-size: 34px; line-height: 40px; }
	.svwhat__c { padding: 40px 22px; }
	.svwhat__cx { max-width: none; }

	.svinc__grid { grid-template-columns: repeat(2, 1fr); }
	.svcrit__c { flex-basis: calc((100% - 20px) / 2); }
	.svcrit__in { padding-block: 84px; }

	.svone__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; }
	.svone__t { font-size: 32px; line-height: 38px; }

	.svfb__grid { grid-template-columns: repeat(2, 1fr); }
	.svfb__t { font-size: 36px; line-height: 42px; }

	.svcta__in { padding-block: 84px; }
	.svcta__t { font-size: 40px; line-height: 48px; }

	.qte--split .qte__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; padding-block: 90px 64px; }
	.qte--split .qte__left { padding-top: 0; }
}

/* --- SV. Планшет --------------------------------------------------------- */

@media (max-width: 1023px) {
	.svhero__in { padding-block: 148px 88px; }
	.svhero__t { font-size: 44px; line-height: 50px; letter-spacing: -1.1px; }
	.svhero__b { grid-template-columns: 1fr; gap: 0; }
	.svhero__act { margin-top: 28px; }

	.svwhat__in { padding-block: 60px; }
	.svwhat__head { grid-template-columns: 1fr; gap: 20px; }
	.svwhat__grid { grid-template-columns: 1fr; }
	.svwhat__c { padding: 32px 0; }
	.svwhat__c + .svwhat__c::before { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 1px; }

	.svinc__in { padding-block: 64px; }
	.svinc__t { font-size: 34px; line-height: 40px; }

	.svcrit__t { font-size: 34px; line-height: 40px; }

	.svone__in { grid-template-columns: 1fr; gap: 36px; padding-block: 60px; }
	.svone__l, .svone__t, .svone__x { max-width: none; }

	.svfb__in { padding-block: 60px; }
	.svfb__grid { grid-template-columns: 1fr; }
	.svfb__q { min-height: 0; }

	.svcta__in { padding-block: 68px; }
	.svcta__t { font-size: 36px; line-height: 44px; }

	.qte--split .qte__in { grid-template-columns: 1fr; gap: 36px; padding-block: 72px 56px; }
	.qte--split .qform { padding: 28px; }
}

/* --- SV. Телефон --------------------------------------------------------- */

@media (max-width: 767px) {
	.svhero__in { padding-block: 122px 56px; }
	.svhero .ocrumb { gap: 10px; margin-bottom: 28px; }
	.svhero .eyebrow { font-size: 11px; letter-spacing: 1.6px; margin-bottom: 16px; }
	.svhero__t { font-size: 34px; line-height: 40px; letter-spacing: -.8px; }
	.svhero__s { margin-top: 22px; font-size: 16px; line-height: 25px; }
	.svhero__act { margin-top: 24px; }
	.svhero__btns { gap: 12px; }
	.svhero__btn { width: 100%; justify-content: center; }
	.svhero__note { margin-top: 18px; font-size: 14px; line-height: 20px; }

	.svwhat__in { padding-block: 48px; }
	.svwhat .eyebrow { font-size: 11px; letter-spacing: 1.6px; }
	.svwhat__t { font-size: 27px; line-height: 33px; letter-spacing: -.5px; }
	.svwhat__x { font-size: 16px; line-height: 25px; }
	.svwhat__grid { margin-top: 28px; }
	.svwhat__c { gap: 12px; padding: 26px 0; }
	.svwhat__ct { font-size: 18px; line-height: 23px; }
	.svwhat__ico { flex-basis: 28px; width: 28px; height: 28px; }

	.svinc__in { padding-block: 48px 56px; }
	.svinc .eyebrow { font-size: 11px; letter-spacing: 1.6px; }
	.svinc__t { font-size: 27px; line-height: 33px; letter-spacing: -.5px; }
	.svinc__s { font-size: 15px; line-height: 23px; }
	.svinc__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
	.svinc__c { min-height: 0; gap: 18px; padding: 24px 20px; }
	.svinc__ct { font-size: 22px; line-height: 27px; }
	.svinc__act { margin-top: 28px; }
	.svinc__btn { width: 100%; justify-content: center; }

	.svcrit__in { padding-block: 56px 64px; }
	.svcrit .eyebrow { font-size: 11px; letter-spacing: 1.6px; }
	.svcrit__t { font-size: 27px; line-height: 33px; letter-spacing: -.6px; }
	.svcrit__grid { gap: 14px; margin-top: 28px; }
	.svcrit__c { flex-basis: 100%; }
	.svcrit__c { min-height: 0; padding: 24px 20px; }
	.svcrit__ct { max-width: none; font-size: 20px; line-height: 25px; }
	.svcrit__cx { font-size: 15px; line-height: 22px; }

	.svone__in { gap: 28px; padding-block: 48px 56px; }
	.svone .eyebrow { font-size: 11px; letter-spacing: 1.6px; }
	.svone__t { font-size: 27px; line-height: 33px; letter-spacing: -.6px; }
	.svone__x { font-size: 16px; line-height: 25px; }
	.svone__pts { grid-template-columns: 1fr; gap: 26px; }

	.svfb__in { padding-block: 48px 56px; }
	.svfb .eyebrow { font-size: 11px; letter-spacing: 1.6px; }
	.svfb__t { font-size: 27px; line-height: 33px; letter-spacing: -.6px; }
	.svfb__grid { gap: 14px; margin-top: 28px; }
	.svfb__q { padding: 24px 20px 28px; }
	.svfb__mark { margin-bottom: 12px; font-size: 36px; line-height: 44px; }
	.svfb__text p { font-size: 15px; line-height: 24px; }

	.svcta__in { padding-block: 56px; }
	.svcta .eyebrow { font-size: 11px; letter-spacing: 1.6px; }
	.svcta__t { font-size: 28px; line-height: 34px; letter-spacing: -.6px; margin-bottom: 20px; }
	.svcta__s { font-size: 16px; line-height: 25px; margin-bottom: 24px; }
	.svcta__btn { width: 100%; justify-content: center; }

	.qte--split .qte__in { padding-block: 56px 48px; }
	.qte--split .eyebrow { font-size: 11px; letter-spacing: 1.6px; }
	.qte--split .qte__s { font-size: 16px; line-height: 25px; }
	.qte--split .qform { padding: 24px 20px; }
	.qte__checks { margin-top: 28px; }
	.qte__check { font-size: 16px; line-height: 22px; }
	.qte__check + .qte__check { margin-top: 16px; }
}

/* --- Кто мы (ABOUT BMA / Who We Are) ------------------------------------- */
.who {
	background: var(--page-2);
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}
.who__in {
	display: grid;
	grid-template-columns: 448px minmax(0, 1fr);
	gap: 32px;
	padding-block: 72px 76px;
}
.who__t {
	margin: 0 0 18px;
	font-weight: 700;
	font-size: 34px;
	line-height: 40px;
	letter-spacing: -.6px;
	color: #fff;
}
.who__rule {
	display: block;
	width: 44px;
	height: 3px;
	margin-bottom: 22px;
	background: var(--red);
}
.who__x {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 24px;
	color: var(--ink-3);
}
.who__x:last-child { margin-bottom: 0; }
.who__x b, .who__x strong { font-weight: 700; color: var(--ink); }

.who__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wcell {
	/* subgrid: иконка/заголовок/черта/подпись выравниваются по соседям в своём ряду,
	   поэтому короткому заголовку не нужен min-height и лишний воздух под ним */
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 0;
	align-content: start;
	justify-items: center;
	padding: 30px 18px 26px;
	text-align: center;
	background: var(--glass-2);
	border: 1px solid var(--hair);
	border-radius: 4px;
}
.wcell__i {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	color: var(--red);
}
.wcell__i svg { width: 34px; height: 34px; }
.wcell__t {
	margin: 0 0 14px;
	font-weight: 700;
	font-size: 17px;
	line-height: 25px;
	color: #fff;
}
.wcell__rule {
	display: block;
	width: 26px;
	height: 2px;
	margin-bottom: 14px;
	background: var(--red);
}
.wcell__s {
	font-size: 13px;
	line-height: 22px;
	color: var(--ink-4);
}

@media (max-width: 1119px) {
	/* карточки 2x2 рядом с текстом — четыре в ряд тут уже по 150px */
	.who__in { grid-template-columns: minmax(0, 448px) minmax(0, 1fr); gap: 32px; padding-block: 64px 68px; }
	.who__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
	.who__in { grid-template-columns: 1fr; gap: 36px; }
	/* 560px при 15px = ~75 знаков в строке, верхняя граница читаемости */
	.who__txt { max-width: 560px; }
	.who__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.who__in { padding-block: 48px; gap: 28px; }
	.who__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.who__t { font-size: 30px; line-height: 36px; }
	.wcell { padding: 24px 14px 22px; }
}

/* SV 09. Таймлайн «как это работает» на странице услуги — 5 шагов вместо 4.
   Общее правило .how__steps (4 колонки, gap 37) остаётся для главной; ниже 1280px
   работают уже существующие брейкпоинты (2 колонки → 1), их не трогаем. */
@media (min-width: 1280px) {
	.single-service .how__steps { grid-template-columns: repeat(5, 1fr); gap: 24px; }
	.single-service .step { padding-bottom: 92px; }
	.single-service .step::after { right: -24px; }
}

/* SV 10. Автопарк на странице услуги. В макете 370:2 заголовок 40/46 против
   44/48 на «Owner Operators», поэтому «Capacity for every shipment size»
   помещается в строку; значение характеристики — красным (на OO — белым).
   Переопределения по брейкпоинтам обязательны: селектор .single-service .oflt__t
   специфичнее правил внутри медиа-запросов и иначе перебивает их. */
.single-service .oflt__head { grid-template-columns: minmax(0, 620px) 380px; }
.single-service .oflt__t { font-size: 40px; line-height: 46px; letter-spacing: -1px; }
.single-service .oflt__sp dd { color: var(--red-text); }
@media (max-width: 1279px) {
	.single-service .oflt__head { grid-template-columns: minmax(0, 1fr) 320px; }
	.single-service .oflt__t { font-size: 38px; line-height: 44px; }
}
@media (max-width: 1023px) {
	.single-service .oflt__head { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.single-service .oflt__t { font-size: 28px; line-height: 34px; letter-spacing: -.5px; }
}

/* SV 11. Таймлайн на странице услуги: в макете 370:2 все пять шагов одинаково
   яркие, красным выделен только первый (кольцо, иконка, пунктир). На главной
   шаги 02–04 приглушены — там правило .step { opacity: .5 } остаётся. */
.single-service .step { opacity: 1; }
.single-service .step__l { color: var(--red-text); }
/* Соединительная линия в макете 370:2 — один сплошной прямоугольник #FFFFFF 12 %
   на всю ширину (401:2610), без красного пунктира у активного шага. Пунктир на
   :hover оставляем: в макете состояния наведения нет, это наша подсказка. */
.single-service .step.is-active::after { background: rgba(255, 255, 255, .12); }
.single-service .step:hover::after {
	background: repeating-linear-gradient(90deg, var(--red) 0 8px, rgba(225, 31, 42, 0) 8px 16px);
}

/* SV 12. Отбивки таймлайна на странице услуги. В макете 370:2 надзаголовок
   начинается на 88px от верха секции, а бейджи заканчиваются за 88px до низа;
   на главной секция плотнее. Заголовок здесь 40px против 38px (line-height 46
   общий, высота не меняется). */
.single-service .how__in { padding-block: 85px 81px; }
.single-service .how__t { font-size: 40px; }


/* --- AB 03. Как мы работаем ---------------------------------------------- */

.abop { background: var(--page-2); }
.abop__in { padding-block: 80px; }
.abop .eyebrow { letter-spacing: 1.5px; }
.abop__t {
	max-width: 860px;
	margin: 0;
	font-weight: 800;
	font-size: 40px;
	line-height: 48.4px;
	letter-spacing: -.4px;
	color: var(--ink);
}
/* строками, а не сеткой с иконками: те же четыре идеи стоят на главной,
   вторая одинаковая сетка читалась бы как повтор */
.abop__list { margin-top: 40px; }
.abop__i {
	display: grid;
	grid-template-columns: 48px minmax(0, 300px) minmax(0, 1fr);
	align-items: start;
	gap: 32px;
	padding: 26px 0 28px;
	border-top: 1px solid var(--hair);
}
.abop__i:last-child { border-bottom: 1px solid var(--hair); }
.abop__n { font-weight: 600; font-size: 14px; line-height: 26px; color: #fff; opacity: .3; }
.abop__it { margin: 0; font-weight: 600; font-size: 20px; line-height: 26px; color: #fff; }
/* 560px при 16px = ~70 знаков в строке; во всю колонку было бы под 110 */
.abop__ix { max-width: 560px; margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-3); }

/* --- AB 06. Почему возвращаются ------------------------------------------ */

.abwhy { background: var(--page); }
.abwhy__in { padding-block: 88px; }
.abwhy .eyebrow { letter-spacing: 1.5px; }
/* шапка по центру — тот же приём, что у .svfb__head и .oben__head (H2 max-width 900,
   margin auto). Секция единственная чисто текстовая на странице, и единственная не
   в две колонки: это и разводит её с соседями */
.abwhy__head { text-align: center; }
.abwhy__t {
	max-width: 900px;
	margin: 0 auto;
	font-weight: 800;
	font-size: 40px;
	line-height: 48.4px;
	letter-spacing: -.4px;
	color: var(--ink);
}
/* это поворот блока («судят по моментам, когда планы меняются»), а не сноска:
   стоял 17px/--ink-3, то есть тише перечисления, которое он вводит */
.abwhy__lead { max-width: 620px; margin: 18px auto 0; font-weight: 500; font-size: 20px; line-height: 31px; color: var(--ink-2, #e2e7ef); }
/* «моменты» — сетка 2x2 по макету Лены. Ячейку держит круг с иконкой, поэтому
   короткая фраза больше не висит в пустоте, а линейки сходятся в крест и читаются
   сеткой, а не обрывками. Полоса уже колонки текста (1000px): на всю ширину
   ячейка снова уезжала в 573px под фразу в 235px */
.abwhy__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 1000px;
	margin: 48px auto 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.abwhy__i {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 112px;
	padding: 24px 0;
}
.abwhy__i:nth-child(odd) { padding-right: 48px; border-right: 1px solid var(--hair); }
.abwhy__i:nth-child(even) { padding-left: 48px; }
.abwhy__i:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
/* круг тот же, что у шагов на главной (.step__dot): 56px, #131d32, рамка .12.
   Иконки на currentColor, поэтому цвет держит --red-text, а не хекс внутри файла */
.abwhy__ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: #131d32;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	color: var(--red-text);
}
.abwhy__ico svg { width: 24px; height: 24px; }
.abwhy__it { font-weight: 500; font-size: 18px; line-height: 28px; color: var(--ink); }
/* вывод — развязка секции, строится на нарастании: две строки приглушены,
   последняя крупнее и белая. Линейку сверху снял: при центрованном тексте
   она резала секцию пополам ни по чему */
.abwhy__x {
	max-width: 820px;
	margin: 56px auto 0;
	font-weight: 500;
	font-size: 20px;
	line-height: 31px;
	letter-spacing: -.2px;
	color: var(--ink-3);
	text-align: center;
}
.abwhy__x > p + p { margin-top: .6em; }
.abwhy__x > p:last-child::before {
	content: "";
	display: block;
	width: 64px;
	height: 2px;
	margin: 0 auto 26px;
	background: var(--red);
}
.abwhy__x > p:last-child {
	margin-top: 32px;
	font-weight: 600;
	font-size: 28px;
	line-height: 38px;
	letter-spacing: -.3px;
	color: var(--ink);
}

@media (max-width: 1200px) {
	.abop__t, .abwhy__t { font-size: 34px; line-height: 42px; }
	.abop__i { grid-template-columns: 40px minmax(0, 250px) minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 1023px) {
	.abop__in, .abwhy__in { padding-block: 64px; }
	/* заголовок и текст в одну колонку — 250px под заголовок уже мало */
	.abop__i { grid-template-columns: 40px minmax(0, 1fr); gap: 0 20px; }
	.abop__n { grid-row: 1 / span 2; }
	/* не none: во всю ширину получалось 108 знаков в строке при норме 45-75 */
	.abop__ix { max-width: 620px; margin-top: 6px; }
	/* две колонки на планшете дают ячейку ~420px, из которых 80 съедают круг и
	   отступ: длинная фраза ломается на три строки. Один столбец, линейки между */
	.abwhy__list { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-top: 40px; }
	.abwhy__i { min-height: 0; gap: 20px; padding: 20px 0; }
	.abwhy__i:nth-child(odd) { padding-right: 0; border-right: 0; }
	.abwhy__i:nth-child(even) { padding-left: 0; }
	.abwhy__i:not(:last-child) { border-bottom: 1px solid var(--hair); }
	.abwhy__t { max-width: 620px; }
	.abwhy__x { max-width: 620px; margin-top: 48px; font-size: 18px; line-height: 28px; }
	.abwhy__x > p:last-child { margin-top: 20px; font-size: 24px; line-height: 33px; }
}

@media (max-width: 767px) {
	.abop__in, .abwhy__in { padding-block: 56px; }
	.abop__t, .abwhy__t { font-size: 27px; line-height: 33px; }
	.abop__it { font-size: 18px; line-height: 25px; }
	.abop__ix { max-width: 560px; font-size: 15px; line-height: 24px; }
	.abwhy__lead { font-size: 16px; line-height: 25px; }
	.abwhy__list { margin-top: 32px; }
	.abwhy__i { gap: 16px; padding: 16px 0; }
	.abwhy__ico { width: 48px; height: 48px; }
	.abwhy__ico svg { width: 22px; height: 22px; }
	.abwhy__it { font-size: 17px; line-height: 26px; }
	.abwhy__x { margin-top: 38px; font-size: 17px; line-height: 27px; }
	.abwhy__x > p:last-child::before { width: 52px; margin-bottom: 20px; }
	.abwhy__x > p:last-child { margin-top: 16px; font-size: 21px; line-height: 29px; }
}

/* --- BL 01. Блог — первый экран ------------------------------------------- */

.blhero { overflow: hidden; background: var(--page); }
.blhero__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* горизонтальная растяжка лежит на самом снимке, вертикальная — поверх неё */
.blhero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(10, 14, 24, 0) 42.58%, rgba(10, 14, 24, .85) 81.78%, #0a111c 90.89%),
		linear-gradient(90deg, rgba(10, 17, 28, .92) 0%, rgba(10, 17, 28, .6) 55%, rgba(10, 17, 28, .32) 100%);
}
.blhero__in { z-index: 2; padding-block: 201px 108px; }
.blhero .ocrumb { margin-bottom: 128px; }
/* у .eyebrow нет line-height — рендер 19.5 против 15.73 в макете, разницу добираем здесь */
.blhero .eyebrow { margin-bottom: 18px; }
.blhero__t { max-width: 900px; margin: 0; font-weight: 800; font-size: 64px; line-height: 66px; letter-spacing: -1.6px; color: var(--ink); }
.blhero__s { max-width: 560px; margin: 14px 0 0; font-size: 18px; line-height: 28px; color: #b8c2d1; }

/* --- BL 02. Блог — избранная запись и лента -------------------------------- */

.blgrid { overflow: hidden; background: #0a111c; }
.blgrid__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.1); }
/* три слоя макета: затемнение сверху, затемнение снизу и общая подложка */
.blgrid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(180deg, rgba(10, 17, 28, 0) 0%, rgba(10, 17, 28, .79) 42.33%, #0a111c 100%),
		linear-gradient(180deg, rgba(10, 17, 28, 0) 0%, rgba(10, 17, 28, .79) 42.33%, #0a111c 100%),
		linear-gradient(rgba(10, 14, 24, .8), rgba(10, 14, 24, .8));
	background-size: 100% 500px, 100% 508px, auto;
	background-position: 0 0, 0 100%, 0 0;
	background-repeat: no-repeat;
}
.blgrid__in { z-index: 2; padding-block: 64px; }
.blgrid .eyebrow { margin-bottom: 20px; }

.blfeat {
	display: grid;
	grid-template-columns: 616px minmax(0, 1fr);
	background: var(--glass-2);
	border-radius: 4px;
	overflow: hidden;
}
.blfeat__img { display: block; }
.blfeat__img img { display: block; width: 100%; height: 100%; min-height: 400px; object-fit: cover; }
.blfeat__x { display: flex; flex-direction: column; padding: 56px 64px; }
.blfeat__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.blfeat__cat { margin: 0; font-weight: 700; font-size: 12px; line-height: 14.52px; letter-spacing: 1px; color: var(--red-text); }
.blfeat__meta { margin: 0; font-size: 14px; line-height: 16.94px; color: #94a1b5; white-space: nowrap; }
.blfeat__t { max-width: 580px; margin: 37px 0 0; font-weight: 800; font-size: 30px; line-height: 36px; letter-spacing: -.6px; color: var(--ink); }
.blfeat__t a { color: inherit; }
.blfeat__t a:hover { color: var(--red-text); }
.blfeat__s { max-width: 584px; margin: 16px 0 0; font-size: 16px; line-height: 25px; color: #94a1b5; }
.blfeat__more { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 24px; font-weight: 600; font-size: 15px; line-height: 18.15px; color: var(--red-text); }
.blfeat__a { transition: transform .2s ease; }
.blfeat:hover .blfeat__a { transform: translateX(3px); }

.blcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 42px; }
/* Неполный ряд ленты: ширину карточки держим как в сетке на три, ряд центрируем.
   Растягивать нельзя — кроп обложки bma-card 424x220, на 1440 трек ровно 424px.
   Модификатор ставится по числу карточек и на трёх снимается сам. */
.blcards--n2 { grid-template-columns: repeat(2, minmax(0, calc((100% - 40px) / 3))); justify-content: center; }
.blcards--n1 { grid-template-columns: minmax(0, calc((100% - 40px) / 3)); justify-content: center; }
.blcard { display: flex; flex-direction: column; background: var(--glass-2); border-radius: 4px; overflow: hidden; transition: background .2s ease; }
.blcard:hover { background: rgba(31, 39, 60, .62); }
.blcard__img { display: block; }
.blcard__img img { display: block; width: 100%; aspect-ratio: 424 / 220; object-fit: cover; }
.blcard__x { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 24px; }
.blcard__cat { margin: 0; font-weight: 700; font-size: 11px; line-height: 13.31px; letter-spacing: 1px; color: var(--red-text); }
/* min-height держит карточки одной высоты при заголовках в одну и две строки */
.blcard__t { margin: 11px 0 0; min-height: 50px; font-weight: 700; font-size: 19px; line-height: 25px; letter-spacing: -.2px; color: var(--ink); }
.blcard__t a { color: inherit; }
.blcard__t a:hover { color: var(--red-text); }
.blcard__s { margin: 17px 0 0; min-height: 42px; font-size: 14px; line-height: 21px; color: #94a1b5; }
.blcard__meta { margin: auto 0 0; padding-top: 15px; font-size: 13px; line-height: 15.73px; color: #808ca1; }

.blpager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 42px; }
.blpager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 11px;
	border: 1px solid var(--hair);
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
	color: var(--ink-3);
	transition: border-color .2s ease, color .2s ease;
}
.blpager a.page-numbers:hover { border-color: var(--hair-2); color: var(--ink); }
.blpager .page-numbers.current { border-color: var(--red); background: var(--red); color: #fff; }
.blpager .page-numbers.dots { border-color: transparent; }

/* --- ART 01. Запись — первый экран ---------------------------------------- */

.arthero { overflow: hidden; background: var(--page); }
.arthero__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.arthero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(10, 14, 24, 0) 52.87%, rgba(10, 14, 24, .85) 85.75%, #0a111c 93.4%),
		linear-gradient(90deg, rgba(10, 17, 28, .92) 0%, rgba(10, 17, 28, .6) 55%, rgba(10, 17, 28, .32) 100%);
}
.arthero__in { z-index: 2; padding-block: 201px 58px; }
.arthero .ocrumb { margin-bottom: 59px; min-width: 0; }
.arthero .ocrumb a.ocrumb__b { color: var(--ink); }
.arthero .ocrumb a.ocrumb__b:hover { color: var(--red-text); }
.arthero .ocrumb strong { overflow: hidden; font-weight: 700; color: rgba(244, 246, 250, .32); text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.arthero__cat { margin: 0 0 14px; font-weight: 700; font-size: 12px; line-height: 14.52px; letter-spacing: 1px; color: var(--red-text); }
.arthero__t { max-width: 720px; margin: 0; font-weight: 800; font-size: 44px; line-height: 50px; letter-spacing: -1px; color: var(--ink); }
.arthero__meta { margin: 24px 0 0; font-size: 15px; line-height: 18.15px; color: #94a1b5; }

/* --- ART 02. Запись — обложка --------------------------------------------- */

.artcov { overflow: hidden; background: #0a111c; }
/* хвост затемнения из первого экрана продолжается на обложку */
.artcov::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 0;
	height: 244px;
	background: linear-gradient(180deg, rgba(10, 14, 24, 0) 0%, rgba(10, 14, 24, .85) 68.27%, #0a111c 84.13%);
}
.artcov__in { z-index: 1; padding-block: 62px 36px; }
.artcov__fig { margin: 0; }
.artcov__img { display: block; width: 100%; aspect-ratio: 1312 / 458; object-fit: cover; border-radius: 16px; }
.artcov__cap { max-width: 720px; margin: 20px auto 0; font-size: 13px; line-height: 20px; color: #94a1b5; }

/* --- ART 03. Запись — текст ----------------------------------------------- */

.artbody { background: #0a111c; }
.artbody__in { padding-block: 8px 144px; }
.artbody__x { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 29px; color: #c7cfdb; }
.artbody__x > * { margin: 0; }
.artbody__x > * + * { margin-top: 29px; }
.artbody__x > h2 { font-weight: 700; font-size: 26px; line-height: 32px; letter-spacing: -.4px; color: var(--ink); }
.artbody__x > * + h2 { margin-top: 44px; }
.artbody__x > h2 + * { margin-top: 14px; }
.artbody__x > h3 { font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: -.2px; color: var(--ink); }
.artbody__x > * + h3 { margin-top: 36px; }
.artbody__x > h3 + * { margin-top: 12px; }
.artbody__x a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
.artbody__x a:hover { color: var(--red-text-hover); }
.artbody__x ul, .artbody__x ol { padding-left: 22px; }
.artbody__x li + li { margin-top: 10px; }
.artbody__x img { display: block; width: 100%; height: auto; border-radius: 8px; }
.artbody__x figure { margin: 0; }
.artbody__x figcaption { margin-top: 12px; font-size: 13px; line-height: 20px; color: #94a1b5; }
.artbody__x blockquote { position: relative; margin: 40px 0; padding-left: 28px; }
.artbody__x blockquote::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; border-radius: 2px; background: var(--red); }
.artbody__x blockquote p { margin: 0; font-weight: 600; font-size: 22px; line-height: 32px; letter-spacing: -.2px; color: var(--ink); }
.artbody__x blockquote p + p { margin-top: 12px; }

/* Средний CTA в теле статьи. Оформление то же, что у выноски (красная
   линейка слева, те же вертикальные отступы), но кегль возвращён к тексту:
   55 слов набором 22/600 читаются как крик, а блок задуман без давления. */
.artbody__x blockquote.artbody__cta p { font-weight: 400; font-size: 17px; line-height: 29px; letter-spacing: normal; color: #c7cfdb; }

/* --- кейс: колонка уже, чем у записи блога ------------------------------- */
/* 640px при кегле 17 — это ~75 знаков в строке. Страницу кейса читают
   подряд, а не просматривают, и 85 знаков записи блога тут уже мешают. */
.csbody__x { max-width: 640px; }
.csbody__all { margin-top: 48px; }
.csidx .prf__in { padding-block: 64px 76px; }

@media (max-width: 767px) {
	/* кегль здесь падает до 16px, и 640px снова дают 76 знаков */
	.csbody__x { max-width: 600px; }
	.csbody__all { margin-top: 36px; }
}

.artbody__x blockquote cite { display: block; margin-top: 14px; font-size: 15px; font-style: normal; line-height: 22px; color: #94a1b5; }
.artbody__x > blockquote + * { margin-top: 40px; }

/* Таблица сравнения. Колонка текста 720px, а сама таблица не сжимается ниже 480:
   на узком экране прокручивается она сама, страница по горизонтали стоит. */
.artbody__x .wp-block-table { overflow-x: auto; }
.artbody__x table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.artbody__x th, .artbody__x td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.artbody__x thead th { font-weight: 700; color: var(--ink); border-bottom-color: var(--hair-2); }
.artbody__x tbody td:first-child { font-weight: 600; color: var(--ink); }
.artbody__x tbody tr:last-child th, .artbody__x tbody tr:last-child td { border-bottom: 0; }

/* Ссылки по теме в конце статьи и метка недостающего факта для редактора. */
.artbody__x > .artbody__links { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--hair); font-size: 15px; line-height: 26px; color: #94a1b5; }
.artbody__x > .artbody__needs { color: #94a1b5; }

/* --- ART 04. Запись — читать дальше ---------------------------------------- */

.artrel { background: #0a111c; border-top: 1px solid rgba(255, 255, 255, .07); }
.artrel__in { padding-block: 71px 55px; }
.artrel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.artrel .eyebrow { margin-bottom: 12px; }
.artrel__t { margin: 0; font-weight: 800; font-size: 30px; line-height: 36.31px; letter-spacing: -.6px; color: var(--ink); }
.artrel__all { margin: 0 0 18px; line-height: 20.57px; }
.artrel__all a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; color: var(--red-text); }
.artrel__all a:hover { color: var(--red-text-hover); }
.artrel__a { transition: transform .2s ease; }
.artrel__all a:hover .artrel__a { transform: translateX(3px); }
.blcards--rel { margin-top: 28px; }
/* Неполный ряд: ширину карточки держим как в сетке на три, ряд центрируем.
   Растягивать нельзя — кроп обложки 424x220, на 1440 трек ровно 424px. */
.blcards--rel2 { grid-template-columns: repeat(2, minmax(0, calc((100% - 40px) / 3))); justify-content: center; }
.blcards--rel1 { grid-template-columns: minmax(0, calc((100% - 40px) / 3)); justify-content: center; }
.blcard--rel { border-radius: 8px; }
.blcard--rel .blcard__img img { aspect-ratio: 424 / 132; }
.blcard--rel .blcard__x { padding: 22px 24px; }
.blcard--rel .blcard__t { margin-top: 9px; min-height: 48px; font-size: 18px; line-height: 24px; }
.blcard--rel .blcard__meta { padding-top: 19px; }

@media (max-width: 1279px) {
	.blhero__in { padding-block: 176px 88px; }
	.blhero .ocrumb { margin-bottom: 96px; }
	.blhero__t { font-size: 54px; line-height: 58px; letter-spacing: -1.3px; }

	.blgrid__in { padding-block: 56px; }
	.blfeat { grid-template-columns: 46% minmax(0, 1fr); }
	.blfeat__x { padding: 44px; }
	.blfeat__t { margin-top: 30px; font-size: 27px; line-height: 33px; }
	.blcards { gap: 16px; margin-top: 34px; }
	.blcards--n2 { grid-template-columns: repeat(2, minmax(0, calc((100% - 32px) / 3))); }
	.blcards--n1 { grid-template-columns: minmax(0, calc((100% - 32px) / 3)); }
	.blcards--rel2 { grid-template-columns: repeat(2, minmax(0, calc((100% - 32px) / 3))); }
	.blcards--rel1 { grid-template-columns: minmax(0, calc((100% - 32px) / 3)); }
	.blcard__x { padding: 24px 24px 22px; }

	.arthero__in { padding-block: 176px 52px; }
	.arthero .ocrumb { margin-bottom: 48px; }
	.arthero__t { font-size: 38px; line-height: 44px; letter-spacing: -.8px; }

	.artcov__in { padding-block: 52px 32px; }
	.artbody__in { padding-block: 8px 112px; }
	.artrel__in { padding-block: 60px 48px; }
}

@media (max-width: 1023px) {
	.blhero__in { padding-block: 148px 72px; }
	.blhero .ocrumb { margin-bottom: 64px; }
	.blhero__t { font-size: 44px; line-height: 50px; letter-spacing: -1px; }
	.blhero__s { font-size: 17px; line-height: 27px; }

	.blgrid__in { padding-block: 48px; }
	.blfeat { grid-template-columns: 1fr; }
	.blfeat__img img { min-height: 0; aspect-ratio: 616 / 340; }
	.blfeat__x { padding: 34px 32px; }
	.blfeat__t { margin-top: 24px; max-width: none; }
	.blfeat__s { max-width: none; }
	.blcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Тут колонок уже две — ряд из двух карточек полон, модификатор снимаем. */
	.blcards--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: normal; }
	.blcards--n1 { grid-template-columns: minmax(0, calc((100% - 16px) / 2)); }

	/* «читать дальше» держим в три колонки — карточки низкие, второй ряд с сиротой хуже */
	.blcards--rel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.blcards--rel2 { grid-template-columns: repeat(2, minmax(0, calc((100% - 28px) / 3))); }
	.blcards--rel1 { grid-template-columns: minmax(0, calc((100% - 28px) / 3)); }
	.blcard--rel .blcard__x { padding: 20px; }

	.arthero__in { padding-block: 148px 48px; }
	.arthero__t { font-size: 34px; line-height: 40px; letter-spacing: -.6px; }
	.arthero__meta { margin-top: 20px; }

	.artcov__in { padding-block: 44px 28px; }
	.artbody__in { padding-block: 8px 96px; }
	.artrel__in { padding-block: 52px 44px; }
}

@media (max-width: 899px) {
	.blcard--rel .blcard__t { min-height: 44px; font-size: 16px; line-height: 22px; }
	.blcard--rel .blcard__meta { padding-top: 14px; }
}

@media (max-width: 767px) {
	.blhero__in { padding-block: 120px 56px; }
	.blhero .ocrumb { margin-bottom: 32px; }
	.blhero .eyebrow { margin-bottom: 14px; font-size: 11px; letter-spacing: 1.6px; }
	.blhero__t { font-size: 34px; line-height: 40px; letter-spacing: -.6px; }
	.blhero__s { max-width: none; margin-top: 14px; font-size: 16px; line-height: 25px; }

	.blgrid__in { padding-block: 44px; }
	.blgrid .eyebrow { margin-bottom: 16px; }
	.blfeat__img img { aspect-ratio: 16 / 9; }
	.blfeat__x { padding: 26px 22px; }
	.blfeat__top { flex-direction: column; align-items: flex-start; gap: 8px; }
	.blfeat__meta { white-space: normal; }
	.blfeat__t { margin-top: 18px; font-size: 23px; line-height: 29px; letter-spacing: -.4px; }
	.blfeat__s { margin-top: 12px; font-size: 15px; line-height: 24px; }
	.blfeat__more { padding-top: 20px; }

	.blcards, .blcards--rel, .blcards--rel2, .blcards--rel1, .blcards--n2, .blcards--n1 { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
	.blcard__t, .blcard__s { min-height: 0; }
	.blcard__x { padding: 22px 20px 20px; }
	.blcard--rel .blcard__img img { aspect-ratio: 16 / 9; }
	.blcard--rel .blcard__t { min-height: 0; font-size: 18px; line-height: 24px; }
	.blpager { margin-top: 28px; }

	.arthero__in { padding-block: 120px 40px; }
	.arthero .ocrumb { margin-bottom: 28px; }
	.arthero__cat { margin-bottom: 12px; font-size: 11px; letter-spacing: 1.6px; }
	.arthero__t { font-size: 29px; line-height: 35px; letter-spacing: -.4px; }
	.arthero__meta { margin-top: 18px; font-size: 14px; }

	.artcov__in { padding-block: 32px 24px; }
	.artcov__img { aspect-ratio: 16 / 9; border-radius: 10px; }
	.artcov__cap { margin-top: 14px; }

	.artbody__in { padding-block: 8px 72px; }
	.artbody__x { font-size: 16px; line-height: 27px; }
	.artbody__x > * + * { margin-top: 24px; }
	.artbody__x > h2 { font-size: 22px; line-height: 28px; }
	.artbody__x > * + h2 { margin-top: 36px; }
	.artbody__x > h3 { font-size: 18px; line-height: 26px; }
	.artbody__x > * + h3 { margin-top: 28px; }
	.artbody__x blockquote { margin: 32px 0; padding-left: 20px; }
	.artbody__x blockquote p { font-size: 19px; line-height: 28px; }
	.artbody__x blockquote.artbody__cta p { font-size: 16px; line-height: 27px; }
	.artbody__x > blockquote + * { margin-top: 32px; }
	.artbody__x table { font-size: 14px; line-height: 20px; }
	.artbody__x th, .artbody__x td { padding: 10px 12px; }
	.artbody__x > .artbody__links { margin-top: 36px; padding-top: 22px; font-size: 14px; line-height: 24px; }

	.artrel__in { padding-block: 44px 40px; }
	.artrel__head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.artrel__t { font-size: 24px; line-height: 30px; letter-spacing: -.4px; }
	.artrel__all { margin-bottom: 0; }
}


/* --- CT. Закрывающий блок ------------------------------------------------ */

.ctcta { background: var(--page-3); border-top: 1px solid var(--hair); }
.ctcta__in {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 96px var(--pad);
	text-align: center;
}
.ctcta .eyebrow { margin-bottom: 18px; }
.ctcta__t {
	margin: 0 0 16px;
	font-weight: 800;
	font-size: 40px;
	line-height: 46px;
	letter-spacing: -1px;
	color: var(--ink);
}
.ctcta__s {
	max-width: 620px;
	margin: 0 auto 34px;
	font-size: 17px;
	line-height: 27px;
	color: var(--ink-3);
}
.ctcta__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ctcta__btn { justify-content: center; }

@media (max-width: 1023px) {
	.ctcta__in { padding-block: 76px; }
	.ctcta__t { font-size: 34px; line-height: 40px; letter-spacing: -.7px; }
}

@media (max-width: 767px) {
	.ctcta__in { padding-block: 58px; }
	.ctcta__t { font-size: 28px; line-height: 34px; letter-spacing: -.5px; }
	.ctcta__s { margin-bottom: 28px; font-size: 16px; line-height: 25px; }
	/* justify-content: center из базового правила остаётся и в гриде: без явной
	   колонки трек жмётся по содержимому и width: 100% у кнопки не срабатывает */
	.ctcta__act { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.ctcta__btn { width: 100%; }
}

/* --- E404. Экран «страница не найдена» ----------------------------------- */
.e404 { position: relative; overflow: hidden; background: var(--page); }
.e404__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.e404::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(10, 14, 24, .9) 0%, rgba(10, 14, 24, .74) 50%, rgba(10, 14, 24, .92) 100%);
}
.e404__in { padding-block: 120px 158px; text-align: center; }
.e404 .eyebrow { margin-bottom: 15px; padding-left: 3px; font-size: 14px; line-height: 17px; }
.e404__code { margin: 0; padding-right: 4px; font-weight: 900; font-size: 150px; line-height: 182px; letter-spacing: -4px; color: var(--ink); }
.e404__t { margin: -3px 0 0; font-weight: 800; font-size: 44px; line-height: 53px; letter-spacing: -1px; color: var(--ink); }
.e404__s { max-width: 620px; margin: 12px auto 0; font-size: 18px; line-height: 22px; color: var(--ink-3); }
.e404__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 30px; }
.e404__btn { justify-content: center; }
.e404__btn .btn__ico { width: 16px; height: 16px; }
/* В макете вторая кнопка — только обводка, подложки под ней нет. */
.e404 .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .2); }

@media (max-width: 1023px) {
	.e404__in { padding-block: 96px 122px; }
	.e404__code { font-size: 120px; line-height: 146px; letter-spacing: -3px; }
	.e404__t { font-size: 36px; line-height: 44px; letter-spacing: -.8px; }
}

@media (max-width: 767px) {
	.e404__in { padding-block: 72px 92px; }
	.e404 .eyebrow { font-size: 11px; letter-spacing: 1.6px; line-height: 14px; }
	.e404__code { font-size: 84px; line-height: 102px; letter-spacing: -2px; }
	.e404__t { font-size: 28px; line-height: 34px; letter-spacing: -.5px; }
	.e404__s { margin-top: 12px; font-size: 16px; line-height: 25px; }
	.e404__act { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.e404__btn { width: 100%; }
}

/* --- LEGAL. Юридические страницы: Privacy / Terms / Cookies -------------- */
.lghero { background: #0f131e; }
.lghero__in { padding-block: 84px 38px; }
.lghero .eyebrow { margin-bottom: 16px; line-height: 16px; }
.lghero__t { margin: 0; font-weight: 800; font-size: 48px; line-height: 58px; letter-spacing: -1px; color: var(--ink); }
.lghero__d { margin: 10px 0 0; font-size: 15px; line-height: 18px; color: #94a1b5; }

.lgb { background: var(--page); }
.lgb__in {
	display: grid;
	grid-template-columns: 300px minmax(0, 840px);
	column-gap: 76px;
	padding-block: 64px 60px;
}
/* Оглавление держим на виду: страница длинная, подсветка пункта иначе бессмысленна. */
.lgb__toc { position: sticky; top: 114px; align-self: start; padding-top: 8px; }
.lgb__toct {
	margin: 0 0 23px;
	font-weight: 600;
	font-size: 12px;
	line-height: 15px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #94a1b5;
}
.lgb__list li + li { margin-top: 13px; }
/* Флексом, а не двумя пробелами: длинный пункт переносится с отступом под текст. */
.lgb__link {
	display: flex;
	gap: 8px;
	font-size: 14px;
	line-height: 17px;
	color: #94a1b5;
	transition: color .2s ease;
}
.lgb__link:hover { color: var(--ink); }
.lgb__link.is-current { font-weight: 600; color: var(--ink); }
.lgb__n { flex: none; }

.lgb__sec { scroll-margin-top: 114px; }
.lgb__sec + .lgb__sec { margin-top: 40px; }
.lgb__h {
	display: flex;
	gap: 10px;
	margin: 0;
	font-weight: 700;
	font-size: 24px;
	line-height: 30px;
	letter-spacing: -.4px;
	color: var(--ink);
}
.lgb__p { margin-top: 14px; }
.lgb__p p { font-size: 16px; line-height: 27px; color: #c7cfdb; }
.lgb__p p + p { margin-top: 14px; }

@media (max-width: 1279px) {
	.lgb__in { grid-template-columns: 260px minmax(0, 840px); column-gap: 56px; }
}

@media (max-width: 1023px) {
	.lghero__in { padding-block: 68px 34px; }
	.lghero__t { font-size: 40px; line-height: 48px; letter-spacing: -.8px; }
	.lgb__in { grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; padding-block: 56px 64px; }
}

@media (max-width: 899px) {
	.lgb__in { display: block; }
	.lgb__toc { position: static; padding-top: 0; margin-bottom: 44px; }
}

@media (max-width: 767px) {
	.lghero__in { padding-block: 48px 30px; }
	.lghero .eyebrow { margin-bottom: 12px; font-size: 11px; line-height: 14px; letter-spacing: 1.6px; }
	.lghero__t { font-size: 30px; line-height: 36px; letter-spacing: -.6px; }
	.lghero__d { font-size: 14px; line-height: 17px; }
	.lgb__in { padding-block: 44px 56px; }
	.lgb__toc { margin-bottom: 36px; }
	.lgb__sec + .lgb__sec { margin-top: 32px; }
	.lgb__h { gap: 8px; font-size: 20px; line-height: 26px; letter-spacing: -.3px; }
	.lgb__p { margin-top: 12px; }
	.lgb__p p { font-size: 15px; line-height: 25px; }
}
/* Единственный раздел — оглавление не выводится, колонку под него не держим. */
.lgb__in--solo { grid-template-columns: minmax(0, 840px); }

/* ==========================================================================
   FL. Our Fleet (templates/our-fleet.php)
   ========================================================================== */

/* --- FL 01. Таблица сравнения -------------------------------------------- */

.fltab { background: var(--page-2); }
.fltab__in { padding-block: 88px; }
.fltab .eyebrow { margin-bottom: 12px; letter-spacing: 3px; }
.fltab__t {
	margin: 0 0 40px;
	font-weight: 800;
	font-size: 40px;
	line-height: 46px;
	letter-spacing: -1px;
	color: var(--ink);
}
/* Таблицу нельзя пересобрать в карточки чисто на CSS: DOM у неё построчный,
   а карточка нужна поколоночная. Поэтому узкие ширины закрываем скроллом
   внутри собственного контейнера — вариант, прямо разрешённый заданием.
   Body при этом не двигается: наружу из .fltab__scroll ничего не торчит. */
.fltab__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	background: var(--glass-2);
	border: 1px solid var(--hair);
	border-radius: 10px;
}
.fltab__t2 {
	width: 100%;
	min-width: 880px;
	border-collapse: collapse;
	text-align: left;
}
.fltab__corner { width: 196px; border-bottom: 1px solid var(--hair-2); }
.fltab__ch {
	padding: 20px 22px;
	border-bottom: 1px solid var(--hair-2);
	border-left: 1px solid var(--hair);
	font-weight: 700;
	font-size: 17px;
	line-height: 24px;
	letter-spacing: -.2px;
	color: var(--ink);
	vertical-align: bottom;
}
.fltab__rh {
	width: 196px;
	padding: 18px 22px;
	border-top: 1px solid var(--hair);
	font-weight: 600;
	font-size: 15px;
	line-height: 23px;
	color: var(--ink-4);
	text-align: left;
	vertical-align: top;
}
.fltab__td {
	padding: 18px 22px;
	border-top: 1px solid var(--hair);
	border-left: 1px solid var(--hair);
	font-size: 16px;
	line-height: 24px;
	color: var(--ink-2);
	vertical-align: top;
}

/* --- FL 02. Классы техники ----------------------------------------------- */

.flcl { background: var(--page); }
.flcl__in { padding-block: 8px 88px; }
.flcl__b {
	display: grid;
	grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	gap: 48px;
	padding-block: 56px;
	border-top: 1px solid var(--hair);
	/* якорь из меню и из блока [ OUR TRUCKS ] не должен уезжать под липкую шапку */
	scroll-margin-top: 96px;
}
.flcl__b:first-child { border-top: 0; }
.flcl__ph {
	position: relative;
	height: 300px;
	background: rgba(255, 255, 255, .03);
	border-radius: 14px;
	overflow: hidden;
}
/* та же мягкая тень под машиной, что в блоке .oflt */
.flcl__ph::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: 18px;
	height: 44px;
	background: rgba(0, 0, 0, .5);
	border-radius: 50%;
	filter: blur(18px);
}
.flcl__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.flcl__txt { min-width: 0; }
.flcl__n {
	margin: 0;
	font-weight: 800;
	font-size: 32px;
	line-height: 38px;
	letter-spacing: -.6px;
	color: var(--ink);
}
.flcl__pay {
	margin: 10px 0 0;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--red-text);
}
.flcl__x { margin: 18px 0 0; max-width: 68ch; }
.flcl__x p { margin: 0 0 12px; font-size: 17px; line-height: 27px; color: var(--ink-2); }
.flcl__x p:last-child { margin-bottom: 0; }
.flcl__specs { margin: 26px 0 0; }
.flcl__sp {
	display: grid;
	grid-template-columns: 186px minmax(0, 1fr);
	gap: 16px;
	padding-block: 14px;
	border-top: 1px solid var(--hair);
}
.flcl__sp:last-child { border-bottom: 1px solid var(--hair); }
.flcl__dt { font-size: 14px; line-height: 24px; color: var(--ink-4); }
.flcl__dd { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-2); }

/* --- FL 03. Выбор техники ------------------------------------------------ */

.flpick { background: var(--page-2); }
.flpick__in { padding-block: 0 88px; }
.flpick__box {
	padding: 52px 56px;
	background: linear-gradient(rgba(6, 26, 66, .62), rgba(6, 26, 66, .62)), var(--glass);
	border: 1px solid var(--hair-2);
	border-radius: 12px;
}
.flpick__t {
	margin: 0;
	font-weight: 800;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -.64px;
	color: var(--ink);
}
.flpick__list { margin: 30px 0 0; }
.flpick__i {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22px minmax(0, 330px);
	align-items: baseline;
	gap: 16px;
	padding-block: 18px;
	border-top: 1px solid var(--hair);
}
.flpick__i:first-child { border-top: 0; padding-top: 0; }
.flpick__q { font-size: 17px; line-height: 26px; color: var(--ink-2); }
.flpick__ar { font-size: 17px; line-height: 26px; color: var(--red-text); }
.flpick__a { font-weight: 600; font-size: 17px; line-height: 26px; color: var(--ink); }
.flpick__x { margin: 30px 0 0; max-width: 68ch; }
.flpick__x p { margin: 0 0 12px; font-size: 17px; line-height: 27px; color: var(--ink-2); }
.flpick__x p:last-child { margin-bottom: 0; }

/* --- FL 04. Ссылка на страницу из блоков техники -------------------------- */

.otrk__more { margin: 28px 0 0; }
/* Названия машин ведут на якоря /our-fleet/. Подчёркивания нет, ховер как
   у остальных ссылок в тёмных блоках. */
.otrk__lnk { color: inherit; text-decoration: none; transition: color .18s ease; }
.otrk__lnk:hover,
.otrk__lnk:focus-visible { color: var(--red-text); }
/* На главной ряд машин стоит не по ширине контейнера, а в собственной коробке
   по центру. Кладём строку в такую же коробку, чтобы левые края совпали. */
.flt .otrk__more {
	width: clamp(1065px, 73.958vw, 1420px);
	max-width: 100%;
	margin: 28px auto 0;
	transform: translateX(clamp(0px, .59vw, 11px));
	text-align: left;
}

/* --- FL. Ноутбук --------------------------------------------------------- */

@media (max-width: 1279px) {
	.fltab__in { padding-block: 72px; }
	.flcl__in { padding-block: 8px 72px; }
	.flpick__in { padding-block: 0 72px; }
	.fltab__t { font-size: 38px; line-height: 44px; }
	.flcl__b { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 36px; padding-block: 48px; }
	.flcl__ph { height: 260px; }
	.flcl__sp { grid-template-columns: 170px minmax(0, 1fr); }
	.flpick__box { padding: 44px; }
	.flpick__i { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 280px); }
	/* Ряд машин здесь переносится в собственную коробку по центру: 4 карточки
	   плюс 3 промежутка по 24px. Повторяем ту же ширину, чтобы левые края
	   строки и ряда совпадали. */
	.flt .otrk__more {
		width: calc(clamp(210px, 16.667vw, 320px) * 4 + 72px);
		max-width: 100%;
		margin: 28px auto 0;
		transform: none;
	}
}

/* --- FL. Планшет --------------------------------------------------------- */

@media (max-width: 1023px) {
	.fltab__t { font-size: 28px; line-height: 34px; letter-spacing: -.5px; }
	/* с планшета ряд машин снова во всю ширину контейнера */
	.flt .otrk__more { width: auto; margin: 28px 0 0; }
	.flcl__b { grid-template-columns: 1fr; gap: 28px; }
	.flcl__ph { height: 280px; }
	.flcl__n { font-size: 28px; line-height: 34px; }
	.flpick__t { font-size: 28px; line-height: 36px; }
	.flpick__box { padding: 36px; }
	.flpick__i { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 240px); gap: 12px; }
}

/* --- FL. Телефон --------------------------------------------------------- */

@media (max-width: 767px) {
	.fltab__in { padding-block: 56px; }
	.flcl__in { padding-block: 4px 56px; }
	.flpick__in { padding-block: 0 56px; }
	.fltab__t { margin-bottom: 28px; }
	.fltab__ch, .fltab__rh, .fltab__td { padding: 14px 16px; }
	.flcl__b { padding-block: 36px; }
	.flcl__ph { height: 220px; }
	.flcl__n { font-size: 26px; line-height: 32px; }
	.flcl__x p { font-size: 16px; line-height: 25px; }
	.flcl__sp { grid-template-columns: 1fr; gap: 4px; }
	.flpick__box { padding: 24px; }
	.flpick__t { font-size: 24px; line-height: 31px; }
	/* вопрос на своей строке, стрелка и ответ — на следующей */
	.flpick__i { grid-template-columns: 22px minmax(0, 1fr); gap: 6px 8px; }
	.flpick__q { grid-column: 1 / -1; font-size: 16px; line-height: 25px; }
	.flpick__ar { grid-column: 1; font-size: 16px; line-height: 25px; }
	.flpick__a { grid-column: 2; font-size: 16px; line-height: 25px; }
	.flpick__x p { font-size: 16px; line-height: 25px; }
}

/* --- 24. Индустрии ------------------------------------------------------- */
/* Утверждённый текст индустрий не содержит ни формы, ни финального CTA, поэтому
	страница собрана из вступления, секций (карточки / список / шаги / проза),
	FAQ и блока перелинковки. Классы .svcrit и .how переиспользованы как есть. */

.inintro { background: var(--page-2); }
.inintro__in { padding-block: 72px 12px; }
.inintro__x { max-width: 860px; }
.inintro__x p { margin: 0 0 18px; font-size: 18px; line-height: 30px; color: var(--ink-2); }
.inintro__x p:last-child { margin-bottom: 0; }

.inprose { background: var(--page-2); }
.inprose__in { padding-block: 64px; }
.inprose__t {
	max-width: 900px;
	margin: 0 0 22px;
	font-weight: 800;
	font-size: 38px;
	line-height: 46px;
	letter-spacing: -1px;
	color: #fff;
}
.inprose__x { max-width: 860px; }
.inprose__x p { margin: 0 0 18px; font-size: 16px; line-height: 26px; color: var(--ink-3); }
.inprose__x p:last-child { margin-bottom: 0; }
.inprose__list { max-width: 900px; margin: 26px 0 0; padding: 0; list-style: none; }
.inprose__list li {
	position: relative;
	margin-top: 14px;
	padding-left: 22px;
	font-size: 16px;
	line-height: 26px;
	color: var(--ink-3);
}
.inprose__list li::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 0;
	width: 6px;
	height: 6px;
	background: var(--red);
	border-radius: 50%;
}
.inprose__list strong { font-weight: 600; color: #fff; }
.inprose__list + .inprose__x { margin-top: 26px; }

/* Подзаголовок и хвост у секции-карточек. */
.svcrit__s { max-width: 860px; margin-top: 16px; }
.svcrit__after { max-width: 860px; margin-top: 34px; }
.svcrit__s p, .svcrit__after p { margin: 0 0 14px; font-size: 16px; line-height: 26px; color: var(--ink-3); }
.svcrit__s p:last-child, .svcrit__after p:last-child { margin-bottom: 0; }

/* Шаги: заголовок с подводкой в одну колонку, номер вместо иконки. */
.how__hl { flex: 1 1 100%; min-width: 0; }
.how__after { max-width: 860px; margin-top: 44px; }
.how__after p { margin: 0 0 16px; font-size: 16px; line-height: 26px; color: var(--ink-3); }
.how__after p:last-child { margin-bottom: 0; }
.step__n { font-weight: 700; font-size: 20px; line-height: 1; color: #fff; }

/* Шаги на индустрии не интерактивны: ни активного, ни наведённого состояния. */
.single-industry .step { opacity: 1; }
.single-industry .step.is-active::after,
.single-industry .step:hover::after { background: rgba(255, 255, 255, .12); }
.single-industry .step:hover .step__dot { border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; }
.single-industry .step__x { max-width: 300px; font-size: 15px; line-height: 23px; color: var(--ink-2); }
.single-industry .step__x strong { font-weight: 600; color: #fff; }

/* Перелинковка. */
.inrel { background: var(--page-3); border-top: 1px solid var(--hair); }
.inrel__in { padding-block: 40px 60px; }
.inrel__x { margin: 12px 0 0; font-size: 16px; line-height: 30px; color: var(--ink-3); overflow-wrap: anywhere; }
.inrel__e2 { margin-top: 28px; }
.inrel__x a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .35);
	text-underline-offset: 3px;
	transition: color .16s ease;
}
.inrel__x a:hover { color: var(--red-text); }

@media (max-width: 1279px) {
	.inintro__in { padding-block: 56px 12px; }
	.inprose__in { padding-block: 52px; }
	.inprose__t { font-size: 30px; line-height: 38px; }
}

@media (max-width: 767px) {
	.inintro__in { padding-block: 44px 8px; }
	.inintro__x p { font-size: 16px; line-height: 27px; }
	.inprose__in { padding-block: 42px; }
	.inprose__t { font-size: 28px; line-height: 34px; letter-spacing: -.5px; }
	.inrel__in { padding-block: 32px 44px; }
	.single-industry .step__x { max-width: none; }
	.how__after, .svcrit__s, .svcrit__after { max-width: none; }
}

/* --- IN 06. Чипсы, шаги с иконкой, замыкающая полоса --------------------- */
/* Всё ниже — только новые классы: .svcrit__ci, .svhero__ic, .insteps--ico,
   .inchips, .inchip, .incta. Ни один существующий селектор не переопределён,
   поэтому вид 207, 208, 209, 211, 212 и страниц услуг не меняется. */

/* Иконка в карточке .svcrit__c. Цвет --red (#e11f2a), а не --red-text: часть
   иконок темы приходит с зашитым stroke="#E11F2A", который bma_icon() не
   перекрашивает; на currentColor #e11f2a весь набор выглядит одинаково. */
.svcrit__ci {
	display: block;
	width: 36px;
	height: 36px;
	margin-bottom: 18px;
	color: var(--red);
}
.svcrit__ci svg { width: 100%; height: 100%; }

/* Иконка в герое — слот пустой на всех существующих страницах. */
.svhero__ic {
	width: 40px;
	height: 40px;
	margin: 0 0 18px;
	color: var(--red-text);
}
.svhero__ic svg { width: 100%; height: 100%; }

/* Дорожка шагов в виде страницы услуги: пять колонок, иконка в кружке, подпись
   STEP 01. Повторяет правила .single-service, но по своему классу. Ниже 1280px
   работают уже существующие брейкпоинты дорожки (2 колонки → 1). */
@media (min-width: 1280px) {
	.insteps--ico .how__steps { grid-template-columns: repeat(5, 1fr); gap: 24px; }
	.insteps--ico .step { padding-bottom: 92px; }
	.insteps--ico .step::after { right: -24px; }
}
.insteps--ico .step__l { color: var(--red-text); }
/* Шаги индустрии не интерактивны — гасим и наведение на иконку. */
.insteps--ico .step:hover .step__ico { color: #fff; }

/* Кружок шага стоит НАД текстом, а не под ним. Причина: .step__dot был прибит к низу
   колонки (bottom: 0), а grid тянет все колонки до высоты самой длинной. На 209 шаг 02
   в 3 раза выше соседей, поэтому под короткими колонками зияло 322 px (1440) и 410 px
   (1280) пустоты, а иконка отрывалась от своего шага. Сверху зазор постоянный (37 px)
   при любой разнице высот. Ниже 768px работает существующая мобильная раскладка. */
@media (min-width: 768px) {
	.insteps--ico .step { padding: 92px 0 0; }
	.insteps--ico .step__dot { top: 0; bottom: auto; }
	.insteps--ico .step::after { top: 28px; bottom: auto; }
}

/* Число шагов задаёт секция: у четырёх шагов пятая колонка осталась бы пустой. */
@media (min-width: 1280px) {
	.insteps--n3 .how__steps { grid-template-columns: repeat(3, 1fr); }
	.insteps--n4 .how__steps { grid-template-columns: repeat(4, 1fr); }
	.insteps--n5 .how__steps { grid-template-columns: repeat(5, 1fr); }
}

/* Список подписей внутри карточки шага: без иконок, мельче основного текста,
   ширина та же, что у .step__x, чтобы колонка не разъезжалась. */
.step__sub { max-width: 272px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 19px; color: var(--ink-4); }
.step__sub li { position: relative; padding-left: 12px; }
.step__sub li + li { margin-top: 2px; }
.step__sub li::before { content: ""; position: absolute; top: 9px; left: 0; width: 5px; height: 1px; background: currentColor; opacity: .55; }
.step__x--after { margin-top: 10px; }

/* Врезка внутри лида: цвет наследуется — блок стоит и на светлом, и на тёмном фоне. */
.pullq { display: block; margin: 14px 0; padding: 2px 0 2px 16px; border-left: 2px solid var(--red); font-weight: 600; color: inherit; }
.pullq:first-child { margin-top: 0; }
.pullq:last-child { margin-bottom: 0; }

/* Ссылка внутри карточки: у a{color:inherit} глобально, здесь нужен видимый линк. */
.svcrit__cx a { display: inline-block; margin-top: 8px; color: var(--red-text); font-weight: 600; text-decoration: none; }
.svcrit__cx a:hover { text-decoration: underline; }

/* Чипсы без своего h2 — продолжение секции выше, верхний отступ снимаем. */
.inchips--cont .inchips__in { padding-block: 0 64px; }

/* Чипсы — перечень без описаний: у подписи нет второй строки, и карточка
   .svcrit__c была бы наполовину пустой. Поверхность, рамка и радиус взяты из
   самой карточки: отдельного токена поверхности в теме нет. */
.inchips { background: var(--page-2); }
.inchips__in { padding-block: 64px; }
.inchips__t {
	max-width: 900px;
	margin: 0 0 22px;
	font-weight: 800;
	font-size: 38px;
	line-height: 46px;
	letter-spacing: -1px;
	color: #fff;
}
.inchips__s { max-width: 860px; }
.inchips__s p, .inchips__after p { margin: 0 0 16px; font-size: 16px; line-height: 26px; color: var(--ink-3); }
.inchips__s p:last-child, .inchips__after p:last-child { margin-bottom: 0; }
.inchips__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 32px 0 0;
}
.inchip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	padding: 12px 16px;
	background: linear-gradient(rgba(6, 26, 66, .62), rgba(6, 26, 66, .62)), var(--glass);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 8px;
	font-size: 15px;
	line-height: 22px;
	color: var(--ink-2);
	overflow-wrap: break-word;
}
.inchip__ci {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--red-text);
}
.inchip__ci svg { width: 100%; height: 100%; }
.inchip__l { min-width: 0; }
.inchips__after { max-width: 860px; margin-top: 28px; }

/* Замыкающая полоса с двумя кнопками. */
.incta { background: var(--page-3); border-top: 1px solid var(--hair); }
.incta__in { padding-block: 72px; }
.incta__t {
	max-width: 760px;
	margin: 0 0 20px;
	font-weight: 800;
	font-size: 40px;
	line-height: 46px;
	letter-spacing: -1px;
	color: var(--ink);
}
.incta__s { max-width: 760px; }
.incta__s p { margin: 0 0 16px; font-size: 17px; line-height: 27px; color: var(--ink-3); }
.incta__s p:last-child { margin-bottom: 0; }
.incta__btns { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }

/* Ширина чипсов задана по замерам приёмки: на 1265 ещё четыре колонки. */
@media (max-width: 1264px) {
	.inchips__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1279px) {
	.inchips__in { padding-block: 52px; }
	.inchips__t { font-size: 30px; line-height: 38px; }
	.incta__in { padding-block: 60px; }
	.incta__t { font-size: 34px; line-height: 42px; }
}

@media (max-width: 1023px) {
	.inchips__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.inchips__in { padding-block: 42px; }
	.inchips__t { font-size: 28px; line-height: 34px; letter-spacing: -.5px; }
	.inchips__s, .inchips__after { max-width: none; }
	.inchips__grid { grid-template-columns: 1fr; margin-top: 24px; }
	.incta__in { padding-block: 48px; }
	.incta__t { font-size: 28px; line-height: 34px; letter-spacing: -.6px; }
	.incta__s { max-width: none; }
	.incta__btns { flex-direction: column; margin-top: 26px; }
	.incta__btn { width: 100%; justify-content: center; }
}