/* ============================================================
   Дистрибуция 360 — дизайн-система гостевого раздела
   (/, /auth/, /start/, /404, /privacy/).
   Построена на токенах intervolga.ru:
   Open Sans, #E7131A, #212121 / #62727B, #16181F, #F1F4F5,
   нулевые скругления, контрастная типографическая шкала.
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root {
	/* Цвет — бренд */
	--iv-red:        #E7131A;
	--iv-red-hover:  #C10F15;
	--iv-red-soft:   #FDECED;

	/* Цвет — текст */
	--ink:            #212121;
	--ink-muted:      #62727B;
	--ink-faint:      #667680; /* WCAG AA 4.7:1 на белом, 4.25:1 на --surface */
	--ink-invert:     #FFFFFF;
	--ink-invert-mut: #B4BCC2;

	/* Цвет — поверхности */
	--bg:        #FFFFFF;
	--surface:   #F1F4F5;
	--surface-2: #E7ECEE;
	--dark:      #16181F;
	--dark-2:    #1F222C;

	/* Линии */
	--line:        #E1E6E8;
	--line-strong: #C2CBD0;
	--line-dark:   rgba(255,255,255,.14);

	/* Типографика */
	--font: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
	--fs-display: clamp(2.4rem, 5.6vw, 4rem);
	--fs-h2:      clamp(1.9rem, 4.2vw, 3.125rem);
	--fs-h3:      clamp(1.2rem, 1.9vw, 1.4375rem);
	--fs-lead:    clamp(1.0625rem, 1.4vw, 1.1875rem);
	--fs-body:    1rem;
	--fs-sm:      .9375rem;
	--fs-xs:      .8125rem;

	/* Ритм */
	--gutter: 2.5rem;
	--maxw: 1220px;
	--section-y: clamp(3.75rem, 7.5vw, 6.5rem);

	--radius: 0;
	--ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. База ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* height:auto обязателен: без него атрибут height в разметке
   растягивает картинку по вертикали при width:100% */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font); color: var(--ink); }

/* h1 — Open Sans Bold, как в hero intervolga.ru */
h1 {
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.02em;
}
/* h2 — фирменный приём Интерволги: light-начертание + жирный акцент */
h2 {
	font-size: var(--fs-h2);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -.02em;
}
h2 strong, h2 b { font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.28; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--iv-red); text-decoration: none; }

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

.inner {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
@media (max-width: 640px) { :root { --gutter: 1.25rem; } }

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

body.overflow-hidden { overflow: hidden; }

/* ---------- 3. Утилиты типографики ---------- */
.eyebrow {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--iv-red);
	margin-bottom: 1.1rem;
}
.eyebrow--invert { color: #FF7A7F; }

.lead {
	font-size: var(--fs-lead);
	line-height: 1.62;
	color: var(--ink-muted);
	font-weight: 300;
}

.section-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.section-head h2 { margin-bottom: 1.1rem; }
/* На /start/ заголовок «Выберите демо-стенд» переносится на две строки, и без
   собственного отступа выносные элементы букв почти касались лид-абзаца —
   блок читался как слипшийся. Отступ задаём h1 отдельно: у h2 он уже есть. */
.section-head h1 { margin-bottom: 1.1rem; }
/* На /start/ шапка секции занимает всю контентную ширину: там она несёт
   не рекламный текст, а объяснение сценариев, и узкая колонка в 62ch
   растягивала её на лишние строки. На лендинге ограничение остаётся. */
.page-start .section-head { max-width: none; }

/* ---------- 4. Кнопки ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.2;
	padding: .95rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .18s var(--ease), color .18s var(--ease),
	            border-color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--iv-red); color: #fff; }
.btn--primary:hover { background: var(--iv-red-hover); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface); }

.btn--ghost-invert { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-invert:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.btn--lg { padding: 1.1rem 2.25rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

/* Иконка внутри кнопки/ссылки: наследует цвет текста, тянется за font-size.
   Рисуется inline-SVG, а не иконочным шрифтом — нет зависимости от woff2. */
.ico {
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.btn--lg .ico { width: 1.2em; height: 1.2em; }
/* стрелка входа слегка едет вправо на hover — подсказка направления */
.btn .ico-login-arrow { transition: transform .18s var(--ease); }
.btn:hover .ico-login-arrow { transform: translateX(2px); }

.ico-xs { width: 1em; height: 1em; stroke-width: 2; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 600;
	color: var(--iv-red);
	border-bottom: 1px solid transparent;
	transition: border-color .18s var(--ease), gap .18s var(--ease);
}
.link-arrow:hover { border-color: currentColor; gap: .75rem; }

/* ---------- 5. Шапка ---------- */
.site-header {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255,255,255,.94);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--line);
}
.site-header .inner { display: flex; align-items: center; gap: 2rem; min-height: 74px; }

.brand { display: flex; align-items: center; gap: .8rem; color: var(--ink); flex-shrink: 0; }
.brand-mark { width: 44px; height: 44px; flex-shrink: 0; display: block; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
	font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
	border-bottom: 2px solid transparent; padding-bottom: 3px;
	transition: color .18s var(--ease), border-color .18s var(--ease);
}
.site-nav a:hover { color: var(--iv-red); border-color: var(--iv-red); }

@media (max-width: 1080px) { .site-nav { display: none; } .site-header .inner { gap: 1rem; } .header-cta { margin-left: auto; } }
@media (max-width: 460px) { .header-cta { display: none; } }

/* ---------- 6. Hero ---------- */
.hero {
	position: relative;
	background: var(--dark);
	color: var(--ink-invert);
	overflow: hidden;
	isolation: isolate;
}
.hero::after {
	content: "";
	position: absolute; right: -12%; top: -30%;
	width: 44%; height: 160%;
	background: linear-gradient(180deg, rgba(231,19,26,.45), rgba(231,19,26,0));
	transform: skewX(-14deg);
	z-index: -1; pointer-events: none;
}
.sparks-canvas {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	z-index: -1; pointer-events: none; opacity: .9;
}
.hero .inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding-top: clamp(3.25rem, 6.5vw, 5.5rem);
	padding-bottom: clamp(3.25rem, 6.5vw, 5.5rem);
}
.hero h1 { color: #fff; margin-bottom: 1.5rem; }
.hero-lead {
	font-size: var(--fs-lead); font-weight: 300; line-height: 1.6;
	color: var(--ink-invert-mut); max-width: 48ch; margin-bottom: 1.75rem;
}
.hero-points { list-style: none; margin: 0 0 2.1rem; padding: 0; display: grid; gap: .7rem; }
.hero-points li {
	position: relative; padding-left: 1.5rem;
	font-size: var(--fs-sm); color: #D6DBDE; line-height: 1.5;
}
.hero-points li::before {
	content: ""; position: absolute; left: 0; top: .5em;
	width: 8px; height: 8px; background: var(--iv-red);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.hero-note { margin-top: 1.35rem; font-size: var(--fs-xs); color: #8A9299; }

.hero-visual {
	position: relative; margin: 0;
	border: 1px solid var(--line-dark);
	background: var(--dark-2);
	box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
}
.hero-visual img { width: 100%; aspect-ratio: 1200 / 597; object-fit: cover; object-position: top center; }
.hero-visual figcaption {
	padding: .8rem 1.1rem; font-size: var(--fs-xs);
	color: #8A9299; border-top: 1px solid var(--line-dark);
}
@media (max-width: 900px) {
	.hero .inner { grid-template-columns: 1fr; }
	.hero-visual { order: 2; }
}
.hero--solo .inner { grid-template-columns: minmax(0, 760px); }
.hero-lead--strong { font-weight: 700; color: #fff; }

/* ---------- 7. Полоса фактов ---------- */
.factbar { background: var(--dark-2); border-top: 1px solid var(--line-dark); color: #fff; }
.factbar-grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1px; background: var(--line-dark);
	border-left: 1px solid var(--line-dark); border-right: 1px solid var(--line-dark);
}
.fact { background: var(--dark-2); padding: 1.6rem clamp(1.1rem, 2.4vw, 2rem); }
.fact b { display: block; font-size: 1.4375rem; font-weight: 800; letter-spacing: -.01em; }
.fact span { display: block; margin-top: .35rem; font-size: var(--fs-xs); color: #949CA3; line-height: 1.45; }
@media (max-width: 780px) { .factbar-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 8. Секции ---------- */
.section { padding: var(--section-y) 0; }
.section--surface { background: var(--surface); }
.section--dark { background: var(--dark); color: var(--ink-invert); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead { color: var(--ink-invert-mut); }

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}
.split h2 { margin: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- 9. Метрики ---------- */
.metrics {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.metric {
	background: #fff; padding: 2rem 1.6rem;
	display: flex; flex-direction: column; gap: .6rem;
	text-decoration: none; color: inherit;
	transition: background-color .18s var(--ease);
}
.metric:hover { background: var(--iv-red-soft); }
.metric-num {
	font-size: clamp(1.9rem, 3.4vw, 2.625rem);
	font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--iv-red);
}
.metric-label { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-muted); }
.metric-src {
	margin-top: auto; padding-top: 1rem;
	font-size: var(--fs-xs); font-weight: 600; color: var(--ink-faint);
	display: inline-flex; align-items: center; gap: .35rem;
	transition: color .18s var(--ease);
}
.metric:hover .metric-src { color: var(--iv-red-hover); } /* 5.5:1 на --iv-red-soft */
.metrics-note { margin-top: 1.2rem; font-size: var(--fs-xs); color: var(--ink-faint); max-width: 78ch; }
@media (max-width: 900px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .metrics { grid-template-columns: 1fr; } }

/* ---------- 10. Возможности ---------- */
.feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: center;
	padding: clamp(2.5rem, 5vw, 3.75rem) 0;
	border-top: 1px solid var(--line);
}
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature--reverse .feature-media { order: 2; }
.feature-media { border: 1px solid var(--line); background: var(--surface); }
.feature-media img { width: 100%; aspect-ratio: 1200 / 597; object-fit: cover; object-position: top center; }
.feature-index {
	display: block; font-size: var(--fs-xs); font-weight: 700;
	letter-spacing: .16em; color: var(--iv-red); margin-bottom: .85rem;
}
.feature-text h3 { margin-bottom: .85rem; }
.feature-text p { color: var(--ink-muted); line-height: 1.65; }
.feature-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; }
.feature-tags li {
	font-size: var(--fs-xs); font-weight: 600; color: var(--ink-muted);
	border: 1px solid var(--line-strong); padding: .35rem .7rem;
}
@media (max-width: 860px) {
	.feature { grid-template-columns: 1fr; gap: 1.6rem; }
	.feature--reverse .feature-media { order: 0; }
}

/* ---------- 11. Этапы ---------- */
.steps {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark);
}
.step { background: var(--dark); padding: 2rem 1.6rem 2.1rem; }
.step-num {
	display: block; font-size: .8125rem; font-weight: 800;
	letter-spacing: .16em; color: var(--iv-red); margin-bottom: 1.35rem;
}
.step h3 { font-size: 1.0625rem; margin-bottom: .6rem; }
.step p { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-invert-mut); }
.step-when { display: block; margin-top: 1.1rem; font-size: var(--fs-xs); font-weight: 600; color: #8A9299; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- 12. Блок заявки ---------- */
.cta-band { background: var(--iv-red); color: #fff; }
.cta-band .inner {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(2rem, 5vw, 4rem); align-items: center;
	padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.88); font-size: var(--fs-lead); font-weight: 300; margin-top: 1rem; }
.cta-form { display: grid; gap: .85rem; }
.cta-form label:not(.form-check) {
	font-size: var(--fs-xs); font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	display: block; margin-bottom: .35rem;
}
.cta-form input:not([type="checkbox"]) {
	width: 100%; font-family: var(--font); font-size: var(--fs-body);
	padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.5);
	border-radius: var(--radius); background: rgba(0,0,0,.14); color: #fff;
}
.cta-form input::placeholder { color: rgba(255,255,255,.62); }
.cta-form input:focus { outline: 2px solid #fff; outline-offset: 1px; border-color: #fff; }
.cta-form .btn--submit { background: #fff; color: var(--iv-red); }
.cta-form .btn--submit:hover { background: var(--dark); color: #fff; }
.cta-consent { font-size: var(--fs-xs); color: rgba(255,255,255,.85); line-height: 1.5; }
.cta-consent a { color: #fff; text-decoration: underline; }
@media (max-width: 860px) { .cta-band .inner { grid-template-columns: 1fr; } }

/* ---------- 13. Футер ---------- */
.site-footer {
	background: var(--dark); color: var(--ink-invert-mut);
	padding: clamp(3rem, 6vw, 4.25rem) 0 2rem; font-size: var(--fs-sm);
}
.footer-top {
	display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
	gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-dark);
}
.site-footer .brand { color: #fff; margin-bottom: 1rem; }
.footer-about { max-width: 46ch; line-height: 1.6; color: #949CA3; }
.footer-col h4 {
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: #fff; margin: 0 0 1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-col a { color: var(--ink-invert-mut); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
	padding-top: 1.6rem; display: flex; flex-wrap: wrap;
	justify-content: space-between; gap: 1rem;
	font-size: var(--fs-xs); color: #7C858C;
}
.footer-bottom a { color: #949CA3; }
.footer-bottom a:hover { color: #fff; }
@media (max-width: 780px) { .footer-top { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- 14. Cookie ---------- */
.cookie-notice {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: #fff; border-top: 3px solid var(--iv-red);
	box-shadow: 0 -16px 40px -20px rgba(22,24,31,.35);
}
.cookie-notice-inner {
	max-width: var(--maxw); margin: 0 auto;
	padding: 1.1rem var(--gutter);
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.5rem; flex-wrap: wrap;
}
.cookie-notice p { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); max-width: 76ch; }
.cookie-notice-btn {
	flex-shrink: 0; font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
	padding: .75rem 1.5rem; background: var(--iv-red); color: #fff;
	border: none; border-radius: var(--radius); cursor: pointer;
	transition: background-color .18s var(--ease);
}
.cookie-notice-btn:hover { background: var(--iv-red-hover); }

/* ---------- 15. Страница входа (/auth/) ---------- */
.auth-wrap {
	min-height: 100vh;
	display: grid; place-items: center;
	padding: 3rem var(--gutter); background: var(--surface);
}
.auth-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); padding: 2.5rem 2.25rem; }
.auth-card h1 { font-size: 1.875rem; margin-bottom: .75rem; }
.auth-card .auth-sub { color: var(--ink-muted); margin-bottom: 1.75rem; }
.auth-card label {
	display: block; font-size: var(--fs-xs); font-weight: 700;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--ink-muted); margin-bottom: .4rem;
}
.auth-card input {
	width: 100%; font-family: var(--font); font-size: var(--fs-body);
	padding: .8rem .9rem; border: 1px solid var(--line-strong);
	border-radius: var(--radius); margin-bottom: 1.15rem; color: var(--ink); background: #fff;
}
.auth-card input:focus { outline: none; border-color: var(--iv-red); box-shadow: 0 0 0 3px var(--iv-red-soft); }
.auth-alert {
	background: var(--iv-red-soft); border-left: 3px solid var(--iv-red);
	color: #8E0D12; padding: .75rem 1rem; font-size: var(--fs-sm); margin-bottom: 1.25rem;
}
.auth-alert.d-none { display: none; }
.auth-foot { margin-top: 1.5rem; text-align: center; font-size: var(--fs-xs); color: var(--ink-faint); }

/* ---------- 16. Витрина стендов (/start/) ---------- */
.card-row {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 1px; background: var(--line); border: 1px solid var(--line);
	margin-top: 2rem;
}
.card {
	background: #fff; padding: 2rem 1.75rem 1.9rem;
	display: flex; flex-direction: column;
	text-decoration: none; color: inherit;
	transition: background-color .18s var(--ease);
}
.card:hover { background: var(--surface); }
.card .tag {
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--iv-red); margin-bottom: 1rem;
}
.card h3 { margin-bottom: .7rem; font-size: 1.1875rem; }
.card p { font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.55; margin-bottom: 1.5rem; }
.card .go { margin-top: auto; font-weight: 600; font-size: var(--fs-sm); color: var(--iv-red); }
@media (max-width: 860px) { .card-row { grid-template-columns: 1fr; } }

.scenario-cta {
	margin-top: 1.5rem; background: var(--surface); border-left: 3px solid var(--iv-red);
	padding: 1.75rem 2rem; display: flex; align-items: center;
	justify-content: space-between; gap: 1.75rem; flex-wrap: wrap;
}
.scenario-cta-text { flex: 1 1 420px; }
.scenario-cta-text .tag {
	display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: var(--iv-red); margin-bottom: .55rem;
}
.scenario-cta-text h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.scenario-cta-text p { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0; max-width: 76ch; }

.session-bar { font-size: var(--fs-xs); color: var(--ink-faint); }
.session-bar a { color: var(--iv-red); }

.page-foot {
	margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
}

.back-home {
	display: flex; width: fit-content; align-items: center; gap: .45rem;
	font-size: var(--fs-sm); font-weight: 600; color: var(--ink-muted); margin-bottom: 1.4rem;
}
.back-home:hover { color: var(--iv-red); }

/* ---------- 17. Чекбокс согласия в формах ---------- */
.form-check {
	display: flex; align-items: flex-start; gap: .6rem;
	font-size: var(--fs-xs); line-height: 1.5;
}
.form-check input { width: auto; margin: .2rem 0 0; accent-color: currentColor; flex-shrink: 0; }
.cta-form .form-check { color: rgba(255,255,255,.85); }
.cta-form .form-check a { color: #fff; text-decoration: underline; }
.modal-form .form-check { color: var(--ink-muted); }
.modal-form .form-check a { color: var(--iv-red); text-decoration: underline; }

/* ---------- 18. Попап заявки ---------- */
.modal-overlay {
	position: fixed; inset: 0; z-index: 90;
	background: rgba(22,24,31,.6);
	opacity: 0; visibility: hidden;
	transition: opacity .18s var(--ease);
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
	position: fixed; z-index: 91; inset: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 1.5rem; overflow-y: auto;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .18s var(--ease);
}
.modal.open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal-dialog {
	width: 100%; max-width: 440px; background: #fff;
	padding: 2.25rem 2rem; position: relative;
	transform: translateY(12px);
	transition: transform .18s var(--ease);
}
.modal.open .modal-dialog { transform: translateY(0); }
.modal-close {
	position: absolute; top: 1rem; right: 1rem;
	width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
	background: transparent; border: none; cursor: pointer; color: var(--ink-faint);
	transition: color .15s var(--ease);
}
.modal-close:hover { color: var(--iv-red); }
.modal-title { font-size: 1.375rem; margin-bottom: .6rem; }
.modal-sub { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.55; margin-bottom: 1.5rem; }
.modal-form { display: grid; gap: .85rem; }
.modal-form label:not(.form-check) {
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--ink-muted); display: block; margin-bottom: .35rem;
}
.modal-form input:not([type="checkbox"]) {
	width: 100%; font-family: var(--font); font-size: var(--fs-body);
	padding: .8rem .9rem; border: 1px solid var(--line-strong);
	border-radius: var(--radius); color: var(--ink); background: #fff;
}
.modal-form input:focus { outline: none; border-color: var(--iv-red); box-shadow: 0 0 0 3px var(--iv-red-soft); }
.modal-success { display: none; text-align: center; padding: .5rem 0; }
.modal-success.show { display: block; }
.modal-success h3 { margin-bottom: .7rem; }
.modal-success p { color: var(--ink-muted); margin-bottom: 1.5rem; }

/* ---------- 19. Болевые точки ---------- */
.pain-grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.pain-card { background: #fff; padding: 2rem 1.75rem; }
.pain-card h3 { font-size: 1.0625rem; margin-bottom: .65rem; }
.pain-card p { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 900px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pain-grid { grid-template-columns: 1fr; } }

/* ---------- 20. Компоненты платформы ---------- */
.solution-intro { max-width: 74ch; }
.solution-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .7rem; }
.solution-points li {
	position: relative; padding-left: 1.5rem;
	font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5;
}
.solution-points li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 8px; height: 8px; background: var(--iv-red);
}
.components-grid {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1px; background: var(--line); border: 1px solid var(--line);
	margin: 2.5rem 0;
}
.component-card { background: #fff; padding: 1.9rem 1.5rem; }
.component-card h3 { font-size: 1.0625rem; margin-bottom: .6rem; }
.component-card p { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 900px) { .components-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .components-grid { grid-template-columns: 1fr; } }

/* ---------- 21. Функциональные возможности ---------- */
.capabilities {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
}
.capability-col h3 {
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--iv-red); margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.capability-item { margin-bottom: 1.5rem; }
.capability-item:last-child { margin-bottom: 0; }
.capability-item strong { display: block; font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.capability-item p { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 780px) { .capabilities { grid-template-columns: 1fr; gap: 2.25rem; } }

/* ---------- 22. Баннер-цитата ---------- */
.banner-strip {
	background: var(--surface-2); border-left: 3px solid var(--iv-red);
	padding: 1.5rem 2rem; margin-top: clamp(2rem, 4vw, 3rem);
	font-size: var(--fs-sm); font-weight: 700; letter-spacing: .02em;
}

/* ---------- 22a. Слайдер роликов в «Возможностях» (STOR-145) ---------- */
/* Трек шириной с окно просмотра, слайды из него выпирают и обрезаются:
   средний по flex-порядку выводится в центр базовым сдвигом
   (50% − 1.5 ширины слайда − отступ), а --vs-shift двигает трек на шаг
   при перелистывании. Логика — apps/lk/assets/site-video-slider.js. */
.capability-video { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.capability-video > h3 { max-width: 74ch; }
.vslider {
	--vs-slide: 78%;
	--vs-gap: 2%;
	--vs-shift: 0;
	position: relative;
	margin: clamp(1.4rem, 3vw, 2rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
}
.vslider-viewport { position: relative; overflow: hidden; }
.vslider-track {
	position: relative; z-index: 1;
	display: flex; align-items: flex-start; gap: var(--vs-gap); width: 100%;
	transform: translateX(calc(50% - 1.5 * var(--vs-slide) - var(--vs-gap) - var(--vs-shift) * (var(--vs-slide) + var(--vs-gap))));
	transition: transform .45s var(--ease);
}
.vslider.is-instant .vslider-track { transition: none; }
.vslider-slide {
	position: relative;
	flex: 0 0 var(--vs-slide); max-width: var(--vs-slide);
	opacity: .4; transition: opacity .35s var(--ease);
}
.vslider-slide.is-active { opacity: 1; }
.vslider-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vslider-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
/* Прозрачная накладка: клик по соседнему ролику должен переключать слайд,
   а не проваливаться в плеер VK. */
.vslider-hit {
	position: absolute; inset: 0; z-index: 2; display: block;
	padding: 0; border: 0; background: transparent; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.vslider-slide.is-active .vslider-hit { display: none; }
@media (hover: none) {
	.vslider-slide.is-active:not(.is-playing) .vslider-hit { display: block; }
}
.vslider-caption {
	margin: .85rem 0 0; font-size: var(--fs-sm); font-weight: 700;
	line-height: 1.45; color: var(--ink-muted);
}
.vslider-slide.is-active .vslider-caption { color: var(--ink); }
/* «Призраки» — заглушки под треком: закрывают проём, который на время
   анимации открывается с набегающей стороны. */
.vslider-ghost {
	position: absolute; top: 0; z-index: 0;
	width: var(--vs-slide); aspect-ratio: 16 / 9; background: #000; opacity: .4;
}
.vslider-ghost--prev { left: calc(50% - 1.5 * var(--vs-slide) - var(--vs-gap)); }
.vslider-ghost--next { left: calc(50% + .5 * var(--vs-slide) + var(--vs-gap)); }
.vslider-nav { position: static; }
.vslider-arrow {
	position: absolute; top: 50%; z-index: 3; margin-top: -2.4rem;
	display: flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; padding: 0 0 .25rem; border: 0;
	background: rgba(22, 24, 31, .82); color: #fff;
	font: 700 1.7rem/1 var(--font); cursor: pointer;
	transition: background .2s var(--ease);
}
.vslider-arrow:hover { background: var(--iv-red); }
.vslider-arrow--prev { left: 0; }
.vslider-arrow--next { right: 0; }
.vslider-cta { max-width: 74ch; margin-bottom: 1.6rem; }
@media (max-width: 780px) {
	.vslider { --vs-slide: 100%; --vs-gap: 4%; }
	.vslider-slide { opacity: 1; }
	.vslider-ghost { display: none; }
	.vslider-nav { display: flex; justify-content: center; gap: .75rem; margin-top: 1.1rem; }
	.vslider-arrow { position: static; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.vslider-track, .vslider-slide { transition: none; }
}

/* ---------- 23. Эффект (ROI) ---------- */
.roi-grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.roi-card { background: #fff; padding: 1.9rem 1.6rem; }
.roi-num {
	display: block; font-size: clamp(1.7rem, 3vw, 2.25rem);
	font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--iv-red); margin-bottom: .7rem;
}
.roi-label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: .5rem; line-height: 1.4; }
.roi-card p { color: var(--ink-muted); font-size: var(--fs-xs); line-height: 1.55; }
.roi-note { margin-top: 1.2rem; font-size: var(--fs-xs); color: var(--ink-faint); max-width: 80ch; }
@media (max-width: 900px) { .roi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .roi-grid { grid-template-columns: 1fr; } }

/* ---------- 24. Внедрение — аккордеон этапов ---------- */
.stage-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stage {
	background: var(--dark); color: #fff;
}
.stage-head {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.5rem 1.75rem; background: transparent; border: none; cursor: pointer;
	font-family: var(--font); color: inherit; text-align: left;
}
.stage-head:disabled { cursor: default; opacity: 1; color: inherit; }
.stage-head-text { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.stage-num { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; color: var(--iv-red); }
.stage-when { font-size: var(--fs-xs); color: #8A9299; }
.stage-head h3 { font-size: 1.125rem; margin-top: .5rem; }
.stage-toggle-icon { flex-shrink: 0; transition: transform .18s var(--ease); color: #8A9299; }
.stage[data-open="true"] .stage-toggle-icon { transform: rotate(180deg); }
.stage-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.stage[data-open="true"] .stage-panel { grid-template-rows: 1fr; }
.stage-panel-inner { overflow: hidden; }
.stage-body { padding: 0 1.75rem 1.75rem; }
.stage-body h3 { margin-bottom: 1rem; }
.stage-body p { color: #B4BCC2; font-size: var(--fs-sm); margin-bottom: 1rem; }
.stage-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.stage-tags li {
	font-size: var(--fs-xs); color: #D6DBDE; border: 1px solid var(--line-dark); padding: .4rem .75rem;
}

/* ---------- 25. Кому подходит ---------- */
.fit-grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.fit-card { background: #fff; padding: 1.9rem 1.6rem; }
.fit-card h3 { font-size: 1.0625rem; margin-bottom: .6rem; }
.fit-card p { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 900px) { .fit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fit-grid { grid-template-columns: 1fr; } }

/* ---------- 26. Дисквалификатор ---------- */
.disqualifier {
	background: var(--surface); border: 1px solid var(--line);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	margin-top: 2rem;
}
.disqualifier-points { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .6rem; }
.disqualifier-points li {
	position: relative; padding-left: 1.5rem;
	font-size: var(--fs-sm); color: var(--ink); line-height: 1.5;
}
.disqualifier-points li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 8px; height: 8px; background: var(--ink-faint);
}
.disqualifier p { color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.6; }

/* ---------- 27. FAQ ---------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-head {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.4rem 0; background: transparent; border: none; cursor: pointer;
	font-family: var(--font); text-align: left; color: var(--ink);
}
.faq-head h3 { font-size: 1.0625rem; }
.faq-toggle-icon { flex-shrink: 0; transition: transform .18s var(--ease); color: var(--ink-faint); }
.faq-item[data-open="true"] .faq-toggle-icon { transform: rotate(180deg); }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.faq-item[data-open="true"] .faq-panel { grid-template-rows: 1fr; }
.faq-panel-inner { overflow: hidden; }
.faq-body { padding: 0 0 1.4rem; color: var(--ink-muted); font-size: var(--fs-sm); line-height: 1.65; max-width: 78ch; }

/* ---------- 28. Настройки движения ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.sparks-canvas { display: none; }
}

/* ============ ФОРМЫ ЗАЯВКИ ============
   .lead-hp — honeypot: поле-приманка для ботов. Убрано с экрана и из
   доступного дерева, но остаётся в DOM и отправляется вместе с формой:
   заполнено — значит заявку прислал не человек (см. lead-handler.php). */
.lead-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Одна строка ошибки над кнопкой отправки. Форма при этом остаётся
   заполненной — переписывать введённое пользователю не приходится. */
.lead-error {
	margin: 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(220, 53, 69, .12);
	color: #b02a37;
	font-size: 13px;
	line-height: 1.4;
}

.lead-error[hidden] {
	display: none;
}

/* Подсветка полей, которые не прошли серверную валидацию. */
.lead-field-invalid input,
.lead-field-invalid textarea {
	border-color: #dc3545;
}