/* «ТВОЯ ЦЕЛЬ» — тёмная low-poly тема (см. PLAN.md) */

@font-face {
	font-family: "Inter";
	src: url("assets/fonts/Inter-Variable.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Unbounded";
	src: url("assets/fonts/Unbounded-Variable.ttf") format("truetype");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #050b1a;
	--bg-2: #0a1428;
	--card: rgba(148, 180, 255, 0.05);
	--card-hover: rgba(148, 180, 255, 0.09);
	--border: rgba(148, 180, 255, 0.14);
	--text: #eef3ff;
	--muted: #9fb0d0;
	--accent: #3b82f6;
	--accent-bright: #60a5fa;
	--accent-deep: #1e5eff;
	--brand-blue: #177cb9;
	--danger: #f87171;
	--warn: #fbbf24;
	--ok: #34d399;
	/* фирменный фиолетовый сервиса app.ygoal.ru (violet-600 / violet-400) */
	--brand-violet: #7c3aed;
	--brand-violet-bright: #a78bfa;
	--radius: 16px;
	--font-body: "Inter", system-ui, -apple-system, sans-serif;
	--font-display: "Unbounded", var(--font-body);
	--poly: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20720'%20preserveAspectRatio='xMidYMid%20slice'%3E%3Cpolygon%20points='0,0%20105,0%200,86'%20fill='%232e6bff'/%3E%3Cpolygon%20points='105,0%20114,147%200,86'%20fill='%23275ad5'/%3E%3Cpolygon%20points='105,0%20211,0%20114,147'%20fill='%232557cf'/%3E%3Cpolygon%20points='211,0%20208,97%20114,147'%20fill='%232350bf'/%3E%3Cpolygon%20points='211,0%20373,0%20371,158'%20fill='%232453c5'/%3E%3Cpolygon%20points='211,0%20371,158%20208,97'%20fill='%232454c9'/%3E%3Cpolygon%20points='373,0%20444,0%20486,111'%20fill='%23183987'/%3E%3Cpolygon%20points='373,0%20486,111%20371,158'%20fill='%231e46a6'/%3E%3Cpolygon%20points='444,0%20603,0%20640,82'%20fill='%231a3c90'/%3E%3Cpolygon%20points='444,0%20640,82%20486,111'%20fill='%23193988'/%3E%3Cpolygon%20points='603,0%20709,0%20750,102'%20fill='%23102559'/%3E%3Cpolygon%20points='603,0%20750,102%20640,82'%20fill='%23122b65'/%3E%3Cpolygon%20points='709,0%20803,0%20810,88'%20fill='%230c1a3f'/%3E%3Cpolygon%20points='709,0%20810,88%20750,102'%20fill='%230b193c'/%3E%3Cpolygon%20points='803,0%20961,0%20944,147'%20fill='%230f2250'/%3E%3Cpolygon%20points='803,0%20944,147%20810,88'%20fill='%230d1e48'/%3E%3Cpolygon%20points='961,0%201041,0%20944,147'%20fill='%23091531'/%3E%3Cpolygon%20points='1041,0%201053,127%20944,147'%20fill='%230c1a3f'/%3E%3Cpolygon%20points='1041,0%201194,0%201212,109'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1041,0%201212,109%201053,127'%20fill='%230a1633'/%3E%3Cpolygon%20points='1194,0%201284,0%201324,83'%20fill='%23081129'/%3E%3Cpolygon%20points='1194,0%201324,83%201212,109'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1284,0%201440,0%201324,83'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1440,0%201440,83%201324,83'%20fill='%23060d1f'/%3E%3Cpolygon%20points='0,86%20114,147%200,215'%20fill='%23224fbb'/%3E%3Cpolygon%20points='114,147%20135,234%200,215'%20fill='%23204bb3'/%3E%3Cpolygon%20points='114,147%20208,97%20224,247'%20fill='%231e46a8'/%3E%3Cpolygon%20points='114,147%20224,247%20135,234'%20fill='%231d44a1'/%3E%3Cpolygon%20points='208,97%20371,158%20224,247'%20fill='%231b3e93'/%3E%3Cpolygon%20points='371,158%20356,223%20224,247'%20fill='%231d44a2'/%3E%3Cpolygon%20points='371,158%20486,111%20505,257'%20fill='%23163378'/%3E%3Cpolygon%20points='371,158%20505,257%20356,223'%20fill='%2317347d'/%3E%3Cpolygon%20points='486,111%20640,82%20505,257'%20fill='%23153276'/%3E%3Cpolygon%20points='640,82%20579,246%20505,257'%20fill='%23163278'/%3E%3Cpolygon%20points='640,82%20750,102%20579,246'%20fill='%2311265a'/%3E%3Cpolygon%20points='750,102%20722,272%20579,246'%20fill='%23122a65'/%3E%3Cpolygon%20points='750,102%20810,88%20722,272'%20fill='%230e204b'/%3E%3Cpolygon%20points='810,88%20859,222%20722,272'%20fill='%230c1c43'/%3E%3Cpolygon%20points='810,88%20944,147%20859,222'%20fill='%230b193b'/%3E%3Cpolygon%20points='944,147%201000,208%20859,222'%20fill='%23060d1f'/%3E%3Cpolygon%20points='944,147%201053,127%201073,262'%20fill='%23070f24'/%3E%3Cpolygon%20points='944,147%201073,262%201000,208'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1053,127%201212,109%201171,239'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1053,127%201171,239%201073,262'%20fill='%2308132c'/%3E%3Cpolygon%20points='1212,109%201324,83%201281,254'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1212,109%201281,254%201171,239'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1324,83%201440,83%201281,254'%20fill='%23070f24'/%3E%3Cpolygon%20points='1440,83%201440,262%201281,254'%20fill='%23060d1f'/%3E%3Cpolygon%20points='0,215%20135,234%200,366'%20fill='%23193a8b'/%3E%3Cpolygon%20points='135,234%20152,344%200,366'%20fill='%23183681'/%3E%3Cpolygon%20points='135,234%20224,247%20152,344'%20fill='%231a3b8d'/%3E%3Cpolygon%20points='224,247%20256,368%20152,344'%20fill='%23183885'/%3E%3Cpolygon%20points='224,247%20356,223%20367,356'%20fill='%23132c69'/%3E%3Cpolygon%20points='224,247%20367,356%20256,368'%20fill='%23153073'/%3E%3Cpolygon%20points='356,223%20505,257%20509,397'%20fill='%23102558'/%3E%3Cpolygon%20points='356,223%20509,397%20367,356'%20fill='%23102557'/%3E%3Cpolygon%20points='505,257%20579,246%20509,397'%20fill='%23122a65'/%3E%3Cpolygon%20points='579,246%20598,374%20509,397'%20fill='%230e204c'/%3E%3Cpolygon%20points='579,246%20722,272%20598,374'%20fill='%230e214e'/%3E%3Cpolygon%20points='722,272%20683,377%20598,374'%20fill='%230e1f4b'/%3E%3Cpolygon%20points='722,272%20859,222%20683,377'%20fill='%230e214f'/%3E%3Cpolygon%20points='859,222%20852,401%20683,377'%20fill='%2309142f'/%3E%3Cpolygon%20points='859,222%201000,208%20852,401'%20fill='%23091531'/%3E%3Cpolygon%20points='1000,208%20987,342%20852,401'%20fill='%23071025'/%3E%3Cpolygon%20points='1000,208%201073,262%20987,342'%20fill='%23060e22'/%3E%3Cpolygon%20points='1073,262%201070,374%20987,342'%20fill='%23071026'/%3E%3Cpolygon%20points='1073,262%201171,239%201070,374'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1171,239%201160,357%201070,374'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1171,239%201281,254%201292,328'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1171,239%201292,328%201160,357'%20fill='%2309132e'/%3E%3Cpolygon%20points='1281,254%201440,262%201292,328'%20fill='%23070f23'/%3E%3Cpolygon%20points='1440,262%201440,323%201292,328'%20fill='%2308122b'/%3E%3Cpolygon%20points='0,366%20152,344%2089,459'%20fill='%2316347b'/%3E%3Cpolygon%20points='0,366%2089,459%200,503'%20fill='%230e204b'/%3E%3Cpolygon%20points='152,344%20256,368%20231,511'%20fill='%2311285e'/%3E%3Cpolygon%20points='152,344%20231,511%2089,459'%20fill='%23132c69'/%3E%3Cpolygon%20points='256,368%20367,356%20325,476'%20fill='%23132b66'/%3E%3Cpolygon%20points='256,368%20325,476%20231,511'%20fill='%230b193b'/%3E%3Cpolygon%20points='367,356%20509,397%20484,512'%20fill='%230a1634'/%3E%3Cpolygon%20points='367,356%20484,512%20325,476'%20fill='%230c1c41'/%3E%3Cpolygon%20points='509,397%20598,374%20627,511'%20fill='%23071025'/%3E%3Cpolygon%20points='509,397%20627,511%20484,512'%20fill='%23071128'/%3E%3Cpolygon%20points='598,374%20683,377%20627,511'%20fill='%23060e21'/%3E%3Cpolygon%20points='683,377%20701,473%20627,511'%20fill='%230a1634'/%3E%3Cpolygon%20points='683,377%20852,401%20701,473'%20fill='%230a1839'/%3E%3Cpolygon%20points='852,401%20828,512%20701,473'%20fill='%230a1635'/%3E%3Cpolygon%20points='852,401%20987,342%20998,451'%20fill='%23060d1f'/%3E%3Cpolygon%20points='852,401%20998,451%20828,512'%20fill='%23071127'/%3E%3Cpolygon%20points='987,342%201070,374%20998,451'%20fill='%23070f23'/%3E%3Cpolygon%20points='1070,374%201053,457%20998,451'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1070,374%201160,357%201053,457'%20fill='%2308122c'/%3E%3Cpolygon%20points='1160,357%201178,479%201053,457'%20fill='%2309142f'/%3E%3Cpolygon%20points='1160,357%201292,328%201178,479'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1292,328%201327,460%201178,479'%20fill='%2309142f'/%3E%3Cpolygon%20points='1292,328%201440,323%201440,438'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1292,328%201440,438%201327,460'%20fill='%23060d1f'/%3E%3Cpolygon%20points='0,503%2089,459%20109,606'%20fill='%23102456'/%3E%3Cpolygon%20points='0,503%20109,606%200,593'%20fill='%230d1d44'/%3E%3Cpolygon%20points='89,459%20231,511%20278,616'%20fill='%2308122b'/%3E%3Cpolygon%20points='89,459%20278,616%20109,606'%20fill='%23091532'/%3E%3Cpolygon%20points='231,511%20325,476%20361,610'%20fill='%230a1737'/%3E%3Cpolygon%20points='231,511%20361,610%20278,616'%20fill='%23071026'/%3E%3Cpolygon%20points='325,476%20484,512%20495,563'%20fill='%23070f24'/%3E%3Cpolygon%20points='325,476%20495,563%20361,610'%20fill='%23071026'/%3E%3Cpolygon%20points='484,512%20627,511%20495,563'%20fill='%230a1634'/%3E%3Cpolygon%20points='627,511%20634,624%20495,563'%20fill='%23060d1f'/%3E%3Cpolygon%20points='627,511%20701,473%20634,624'%20fill='%23071025'/%3E%3Cpolygon%20points='701,473%20751,625%20634,624'%20fill='%23060d1f'/%3E%3Cpolygon%20points='701,473%20828,512%20751,625'%20fill='%23060d1f'/%3E%3Cpolygon%20points='828,512%20831,592%20751,625'%20fill='%23060d1f'/%3E%3Cpolygon%20points='828,512%20998,451%20927,611'%20fill='%23060d20'/%3E%3Cpolygon%20points='828,512%20927,611%20831,592'%20fill='%23060d1f'/%3E%3Cpolygon%20points='998,451%201053,457%20927,611'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1053,457%201043,564%20927,611'%20fill='%23091430'/%3E%3Cpolygon%20points='1053,457%201178,479%201043,564'%20fill='%23071127'/%3E%3Cpolygon%20points='1178,479%201176,572%201043,564'%20fill='%23091430'/%3E%3Cpolygon%20points='1178,479%201327,460%201307,562'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1178,479%201307,562%201176,572'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1327,460%201440,438%201307,562'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1440,438%201440,558%201307,562'%20fill='%23071027'/%3E%3Cpolygon%20points='0,593%20109,606%200,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='109,606%2091,720%200,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='109,606%20278,616%2091,720'%20fill='%23060e20'/%3E%3Cpolygon%20points='278,616%20207,720%2091,720'%20fill='%23091531'/%3E%3Cpolygon%20points='278,616%20361,610%20207,720'%20fill='%23091430'/%3E%3Cpolygon%20points='361,610%20349,720%20207,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='361,610%20495,563%20440,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='361,610%20440,720%20349,720'%20fill='%2309142f'/%3E%3Cpolygon%20points='495,563%20634,624%20631,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='495,563%20631,720%20440,720'%20fill='%23070f24'/%3E%3Cpolygon%20points='634,624%20751,625%20631,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='751,625%20730,720%20631,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='751,625%20831,592%20810,720'%20fill='%23070f23'/%3E%3Cpolygon%20points='751,625%20810,720%20730,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='831,592%20927,611%20810,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='927,611%20939,720%20810,720'%20fill='%2309132e'/%3E%3Cpolygon%20points='927,611%201043,564%20939,720'%20fill='%23060e20'/%3E%3Cpolygon%20points='1043,564%201067,720%20939,720'%20fill='%23071128'/%3E%3Cpolygon%20points='1043,564%201176,572%201189,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1043,564%201189,720%201067,720'%20fill='%2308122a'/%3E%3Cpolygon%20points='1176,572%201307,562%201288,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1176,572%201288,720%201189,720'%20fill='%2308122b'/%3E%3Cpolygon%20points='1307,562%201440,558%201288,720'%20fill='%23060d1f'/%3E%3Cpolygon%20points='1440,558%201440,720%201288,720'%20fill='%23060d1f'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
	scroll-behavior: smooth;
	/* Флюидная типографика: все размеры в rem растут вместе с шириной экрана
	   (~19px до ~1280px → 24px на 4K), чтобы на больших мониторах текст не мельчил.
	   База ×1.2 — весь текст крупнее на 20%; h1/h2 компенсированы ниже (÷1.2) */
	font-size: clamp(19.2px, 15.36px + 0.3vw, 24px);
}
/* На телефонах clamp сидит на нижней границе — поднимаем базу, чтобы текст не мельчил */
@media (max-width: 720px) {
	html { font-size: 21px; }
}
body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }

.container { max-width: 72.5rem; margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; position: relative; }

.font-display {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
h1.font-display { font-size: clamp(1.417rem, 4vw, 2.417rem); }
h2.font-display { font-size: clamp(1.125rem, 2.6vw, 1.667rem); }
h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }

:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; }

/* ── Low-poly фон (hero и заявка) ─────────────────────────── */
.poly-bg { isolation: isolate; overflow: hidden; }
.poly-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--poly);
	background-size: cover;
	background-position: center top;
}
.poly-bg::after {
	/* затемнение к низу, чтобы полигоны не спорили с текстом */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(1200px 500px at 20% 0%, rgba(30, 94, 255, 0.10), transparent 60%),
		linear-gradient(180deg, rgba(5, 11, 26, 0.55) 0%, rgba(5, 11, 26, 0.92) 70%, var(--bg) 100%);
}

/* ── Навигация ────────────────────────────────────────────── */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(5, 11, 26, 0.8);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
}
.nav-row { display: flex; align-items: center; gap: 2rem; height: 64px; }
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand .name { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; }
.brand .name span { color: var(--brand-blue); }
/* Бренд «переезжает»: вверху страницы — крупно в hero, в шапке скрыт;
   после прокрутки — наоборот (класс at-top ставит script.js) */
.nav .brand, .hero-brand { transition: opacity 0.35s, transform 0.35s; }
body.at-top .nav .brand { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.hero-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.2rem; }
.hero-brand .name {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 700;
	letter-spacing: 0.06em;
}
.hero-brand .name span { color: var(--brand-blue); }
body:not(.at-top) .hero-brand { opacity: 0; transform: translateY(-14px) scale(0.9); }
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav-links a { color: var(--muted); font-size: 0.92rem; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.burger { display: none; }
.mobile-menu { display: none; }
/* !important: Битрикс/шаблон могут перебить display у <a> — иначе ссылка торчит под футером на десктопе */
a.mobile-sticky-cta,
a.back-to-top { display: none !important; }

/* ── Кнопки, пилюли, бейджи ───────────────────────────────── */
.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: linear-gradient(135deg, var(--accent-deep), var(--accent));
	color: #fff;
	font-weight: 600;
	font-size: 0.75rem;
	padding: 0.7rem 1.5rem;
	border-radius: 999px;
	box-shadow: 0 0 24px rgba(30, 94, 255, 0.35);
	transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 36px rgba(30, 94, 255, 0.55); }
.btn-lg { padding: 0.9rem 2.2rem; font-size: 1.05rem; }

.pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid rgba(167, 139, 250, 0.3);
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
	font-size: 0.8rem;
	color: var(--brand-violet-bright);
	background: rgba(124, 58, 237, 0.12);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-violet-bright); animation: dot-pulse 2.4s infinite; }
.pill .dot.danger { background: var(--danger); }
@keyframes dot-pulse { 50% { opacity: 0.4; } }

.badge {
	font-size: 0.68rem;
	font-weight: 600;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	white-space: nowrap;
}
.badge-done { background: rgba(52, 211, 153, 0.14); color: var(--ok); }
.badge-active { background: rgba(96, 165, 250, 0.16); color: var(--accent-bright); }
.badge-locked { background: rgba(159, 176, 208, 0.12); color: var(--muted); }
.badge-warn { background: rgba(251, 191, 36, 0.14); color: var(--warn); }

/* ── Карточки ─────────────────────────────────────────────── */
.card-glass {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	backdrop-filter: blur(8px);
	transition: background 0.25s, border-color 0.25s;
}
.card-glass:hover { background: var(--card-hover); border-color: rgba(148, 180, 255, 0.24); }
.card-glass.lg { border-radius: 22px; }

.section-header { max-width: 45rem; }
.section-header h2 { margin-top: 1.1rem; }
.subtitle { color: var(--muted); margin-top: 0.8rem; font-weight: 600; }

/* ── Прогресс-бары ────────────────────────────────────────── */
.bar { height: 6px; border-radius: 999px; background: rgba(148, 180, 255, 0.12); overflow: hidden; }
.bar-fill {
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
	transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar-fill.is-visible { width: var(--w, 60%); }

/* ── HERO ─────────────────────────────────────────────────── */
.hero { padding: 110px 0 120px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; }
.hero h1 { margin-top: 1.3rem; }
.lead { color: var(--muted); font-size: 1.1rem; margin-top: 1.2rem; max-width: 34rem; }
.hero-cta-row { display: flex; align-items: center; gap: 1.2rem; margin-top: 2rem; flex-wrap: wrap; }
.hero-cta-row .meta { color: var(--muted); font-size: 0.85rem; max-width: 16rem; }

.hero-visual { position: relative; min-width: 0; }
.route-mock { padding: 1.5rem; min-width: 0; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(30, 94, 255, 0.12); }
.route-mock-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.route-mock-title { min-width: 0; }
.route-mock-title .lbl { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.route-mock-title strong { font-size: 0.98rem; }
.route-mock-head .badge { flex-shrink: 0; }
.route-steps { margin-top: 1.1rem; display: grid; gap: 0.45rem; }
.route-steps li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.87rem;
	padding: 0.55rem 0.65rem;
	border-radius: 10px;
	border: 1px solid transparent;
	min-width: 0;
}
.route-steps .step-lbl { flex: 1; min-width: 0; line-height: 1.35; }
.route-steps li .badge { flex-shrink: 0; margin-left: auto; }
.route-steps .mark {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 700;
}
.route-steps .done .mark { background: rgba(52, 211, 153, 0.16); color: var(--ok); }
.route-steps .active { background: rgba(96, 165, 250, 0.08); border-color: rgba(96, 165, 250, 0.25); }
.route-steps .active .mark { background: var(--accent); color: #fff; }
.route-steps .locked { color: var(--muted); }
.route-steps .locked .mark { background: rgba(159, 176, 208, 0.12); color: var(--muted); }

.chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	backdrop-filter: blur(8px);
	animation: float 6s ease-in-out infinite;
}
.chip::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	flex-shrink: 0;
}
.chip-1 {
	top: -14px; right: 8%;
	background: rgba(52, 211, 153, 0.18);
	border: 1px solid rgba(52, 211, 153, 0.55);
	color: #6ee7b7;
	box-shadow: 0 8px 24px rgba(52, 211, 153, 0.35), 0 0 16px rgba(52, 211, 153, 0.25);
}
.chip-1::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.chip-2 {
	bottom: -14px; left: 7%; animation-delay: -2s;
	background: rgba(251, 191, 36, 0.18);
	border: 1px solid rgba(251, 191, 36, 0.55);
	color: #fcd34d;
	box-shadow: 0 8px 24px rgba(251, 191, 36, 0.35), 0 0 16px rgba(251, 191, 36, 0.25);
}
.chip-2::before { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.chip-3 {
	bottom: -14px; right: 14%; animation-delay: -4s;
	background: rgba(59, 130, 246, 0.22);
	border: 1px solid rgba(96, 165, 250, 0.6);
	color: #93c5fd;
	box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4), 0 0 16px rgba(96, 165, 250, 0.3);
}
.chip-3::before { background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-bright); }
.chip svg { color: var(--ok); }
@keyframes float { 50% { transform: translateY(-7px); } }

/* ── Проблема ─────────────────────────────────────────────── */
.pain-main { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.6rem; }
.pain-card-lg { display: flex; gap: 1.1rem; padding: 1.6rem; }
.pain-card-lg p { color: var(--muted); font-size: 0.92rem; margin-top: 0.45rem; }
.icon-tile {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-bright);
	background: rgba(96, 165, 250, 0.1);
	border: 1px solid rgba(96, 165, 250, 0.18);
}
.pain-small { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1.2rem; }
.pain-card-sm { padding: 1.2rem; }
/* Каскад слева направо при появлении блока (is-visible ставит script.js) */
.pain-small.fade-up .pain-card-sm {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.pain-small.fade-up .pain-card-sm:nth-child(2) { transition-delay: 0.15s; }
.pain-small.fade-up .pain-card-sm:nth-child(3) { transition-delay: 0.3s; }
.pain-small.fade-up .pain-card-sm:nth-child(4) { transition-delay: 0.45s; }
.pain-small.fade-up.is-visible .pain-card-sm { opacity: 1; transform: none; }
.pain-card-sm svg { color: var(--muted); }
.pain-card-sm p { font-size: 0.88rem; color: var(--muted); margin-top: 0.7rem; }

.result-bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem 1.5rem;
	margin-top: 2.2rem;
	border-color: rgba(248, 113, 113, 0.25);
}
.result-bar svg { flex: none; color: var(--danger); }
.result-bar p { font-size: 0.95rem; color: var(--muted); }
.result-bar p strong { color: var(--text); }
.result-bar.accent { border-color: rgba(52, 211, 153, 0.25); }
.result-bar.accent svg { color: var(--ok); }

/* ── Как собирается маршрут ───────────────────────────────── */
.ai-mock {
	display: grid;
	grid-template-columns: 1fr auto 1.2fr;
	gap: 2rem;
	align-items: center;
	padding: 2rem;
	margin-top: 2.6rem;
}
.ai-files { display: grid; gap: 0.5rem; }
.ai-files .file {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.82rem;
	color: var(--muted);
	background: rgba(148, 180, 255, 0.06);
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 0.45rem 0.7rem;
}
.ftag {
	font-style: normal;
	font-size: 0.6rem;
	font-weight: 700;
	padding: 0.1rem 0.4rem;
	border-radius: 5px;
	background: rgba(96, 165, 250, 0.15);
	color: var(--accent-bright);
}
.ftag-pdf { background: rgba(248, 113, 113, 0.15); color: var(--danger); }
.ftag-mp3 { background: rgba(251, 191, 36, 0.14); color: var(--warn); }

.ai-core { position: relative; text-align: center; padding: 1.4rem 1.8rem; }
.ai-core svg { color: var(--accent-bright); margin: 0 auto; }
.ai-glow {
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(30, 94, 255, 0.28), transparent 70%);
	animation: pulse-glow 3s ease-in-out infinite;
	z-index: -1;
}
@keyframes pulse-glow { 50% { opacity: 0.45; transform: scale(1.12); } }
.ai-label { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; margin-top: 0.6rem; }
.ai-sub { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.8rem; }

.ai-out { display: grid; gap: 0.45rem; }
.ai-out-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.2rem; }
.ai-out-row {
	position: relative;
	overflow: hidden;
	font-size: 0.85rem;
	padding: 0.5rem 0.8rem;
	border-radius: 9px;
	border: 1px solid var(--border);
	background: rgba(148, 180, 255, 0.05);
}
/* Сборка маршрута ИИ: этапы «проявляются» слева со световым сканом — не fade-up / float */
.ai-mock.fade-up:not(.is-visible) .ai-out-row {
	opacity: 0;
	transform: translateX(18px);
	filter: blur(3px);
}
.ai-mock.is-visible .ai-out-row {
	animation: ai-assemble 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ai-mock.is-visible .ai-out-row:nth-child(2) { animation-delay: 0.28s; }
.ai-mock.is-visible .ai-out-row:nth-child(3) { animation-delay: 0.52s; }
.ai-mock.is-visible .ai-out-row:nth-child(4) { animation-delay: 0.76s; }
.ai-mock.is-visible .ai-out-row:nth-child(5) { animation-delay: 1s; }
.ai-out-row::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(96, 165, 250, 0.28) 45%, transparent 100%);
	transform: translateX(-120%);
	pointer-events: none;
	opacity: 0;
}
.ai-mock.is-visible .ai-out-row::after {
	animation: ai-scan 0.65s ease-out forwards;
}
.ai-mock.is-visible .ai-out-row:nth-child(2)::after { animation-delay: 0.28s; }
.ai-mock.is-visible .ai-out-row:nth-child(3)::after { animation-delay: 0.52s; }
.ai-mock.is-visible .ai-out-row:nth-child(4)::after { animation-delay: 0.76s; }
.ai-mock.is-visible .ai-out-row:nth-child(5)::after { animation-delay: 1s; }
.ai-mock.is-visible .ai-out-row.active {
	animation:
		ai-assemble 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.76s forwards,
		ai-live 2.2s ease-in-out 1.4s infinite;
}
@keyframes ai-assemble {
	from {
		opacity: 0;
		transform: translateX(18px);
		filter: blur(3px);
		letter-spacing: 0.03em;
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
		letter-spacing: normal;
	}
}
@keyframes ai-scan {
	0% { opacity: 0; transform: translateX(-120%); }
	25% { opacity: 1; }
	100% { opacity: 0; transform: translateX(120%); }
}
@keyframes ai-live {
	50% { border-color: rgba(96, 165, 250, 0.7); box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18); }
}
.ai-out-row.done { border-color: rgba(52, 211, 153, 0.3); }
.ai-out-row.active { border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.09); }
.ai-out-row.locked { color: var(--muted); }

.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
.flow-card { padding: 1.4rem; }
.flow-card .num {
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--accent-bright);
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(96, 165, 250, 0.12);
	margin-bottom: 0.8rem;
}
.flow-card p { font-size: 0.86rem; color: var(--muted); margin-top: 0.4rem; }

/* ── Демо-видео ──────────────────────────────────────────── */
.demo-video {
	max-width: 880px;
	margin: 3rem auto 0;
	text-align: center;
}
.demo-video-title {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--text);
	letter-spacing: -0.01em;
}
.demo-video-title .dot {
	width: 8px; height: 8px; border-radius: 999px;
	background: var(--accent-bright);
	box-shadow: 0 0 10px var(--accent-bright);
}
.demo-video-sub {
	margin-top: 0.4rem;
	font-size: 0.95rem;
	color: var(--muted);
}
.demo-video-frame {
	margin-top: 1.5rem;
	padding: 0.6rem;
	border-radius: var(--radius);
	overflow: hidden;
}
.demo-video-frame video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	background: #000;
	aspect-ratio: 16 / 9;
}
@media (max-width: 640px) {
	.demo-video-title { font-size: 1.1rem; }
	.demo-video-frame { padding: 0.4rem; }
}

.info-bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem 1.5rem;
	margin-top: 1.6rem;
	border-color: rgba(96, 165, 250, 0.3);
}
.info-bar svg { flex: none; color: var(--accent-bright); }
.info-bar p { font-size: 0.95rem; color: var(--muted); }
.info-bar p strong { color: var(--text); }

/* ── Для руководителей ────────────────────────────────────── */
.manager-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.manager-grid h2 { margin-top: 1.1rem; }
.feature-list { margin-top: 1.6rem; display: grid; gap: 0.9rem; }
.feature-list li { position: relative; padding-left: 1.6rem; color: var(--muted); font-size: 0.95rem; }
.feature-list li strong { color: var(--text); }
.feature-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: linear-gradient(135deg, var(--accent-deep), var(--accent-bright));
	transform: rotate(45deg);
}
.accent-note { margin-top: 1.6rem; font-family: var(--font-display); font-size: 0.95rem; color: var(--accent-bright); }

.dash-mock { padding: 1.5rem; min-width: 0; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); }
.dash-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 1rem; }
.dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.stat { text-align: center; padding: 0.8rem 0.4rem; border-radius: 12px; background: rgba(148, 180, 255, 0.06); border: 1px solid var(--border); min-width: 0; }
.stat .v { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--accent-bright); }
.stat.warn .v { color: var(--warn); }
.stat .l { display: block; font-size: 0.72rem; color: var(--muted); line-height: 1.3; }
.dash-list { display: grid; gap: 0.5rem; margin-top: 1rem; }
.dash-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	font-size: 0.84rem;
	padding: 0.55rem 0.75rem;
	border-radius: 9px;
	border: 1px solid var(--border);
	min-width: 0;
}
.dash-row .nm { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row .badge { flex-shrink: 0; }
.dash-row.warn { border-color: rgba(251, 191, 36, 0.3); }
.dash-mock .bar { margin-top: 1.1rem; }
.dash-foot { font-size: 0.78rem; color: var(--muted); margin-top: 0.55rem; }

/* ── Пример пути ──────────────────────────────────────────── */
.path { margin-top: 2.6rem; max-width: 47.5rem; }
/* Самолёт справа от этапов: огни полосы загораются по мере прохождения,
   после 5-го этапа — взлёт влево (классы ставит script.js) */
#example .container { position: relative; }
/* Звёздное небо на весь блок: слои точек с разным шагом, чтобы не было видно сетки */
#example {
	background-image:
		radial-gradient(circle at 25px 45px, rgba(238, 243, 255, 0.5) 1px, transparent 1.6px),
		radial-gradient(circle at 160px 120px, rgba(159, 176, 208, 0.45) 1.2px, transparent 1.8px),
		radial-gradient(circle at 310px 70px, rgba(238, 243, 255, 0.35) 1px, transparent 1.6px),
		radial-gradient(circle at 90px 210px, rgba(159, 176, 208, 0.4) 1px, transparent 1.6px),
		radial-gradient(circle at 240px 260px, rgba(238, 243, 255, 0.45) 1.3px, transparent 2px),
		radial-gradient(circle at 380px 200px, rgba(159, 176, 208, 0.35) 1px, transparent 1.6px);
	background-size: 420px 390px, 560px 430px, 480px 470px, 390px 520px, 520px 360px, 610px 490px;
}
.launch-scene {
	position: absolute;
	right: 24px;
	bottom: 9rem;
	width: 260px;
	pointer-events: none;
}
.launch-scene svg { overflow: visible; }
@media (max-width: 1160px) { .launch-scene { display: none; } }
.launch-scene .lamp { fill: rgba(159, 176, 208, 0.22); transition: fill 0.4s, filter 0.4s, opacity 1.5s; }
.launch-scene .lamp.lit { fill: #34d399; filter: drop-shadow(0 0 5px rgba(52, 211, 153, 0.9)); }
/* по мере удаления самолёта огни гаснут и полоса плавно пропадает */
.launch-scene .runway { transition: opacity 1.5s; }
.launch-scene.launch .runway { opacity: 0; transition-delay: 2.4s; }
/* огни гаснут последовательно слева направо */
.launch-scene.launch .lamp { opacity: 0; }
.launch-scene.launch .lamp:nth-of-type(1) { transition: fill 0.4s, filter 0.4s, opacity 1s 2.4s; }
.launch-scene.launch .lamp:nth-of-type(2) { transition: fill 0.4s, filter 0.4s, opacity 1s 2.7s; }
.launch-scene.launch .lamp:nth-of-type(3) { transition: fill 0.4s, filter 0.4s, opacity 1s 3s; }
.launch-scene.launch .lamp:nth-of-type(4) { transition: fill 0.4s, filter 0.4s, opacity 1s 3.3s; }
.launch-scene.launch .lamp:nth-of-type(5) { transition: fill 0.4s, filter 0.4s, opacity 1s 3.6s; }
.launch-scene .plane { will-change: transform; transform-box: fill-box; transform-origin: 45% 55%; }
.launch-scene.launch .plane { animation: plane-takeoff 4s 0.3s forwards; }
.launch-scene .gear { transition: opacity 0.3s; }
/* отрыв от полосы — на ~28% анимации (0.3s задержка + 1.12s разбега): убираем шасси сразу после */
.launch-scene.launch .gear { opacity: 0; transition-delay: 1.5s; }
.launch-scene .ground-shadow { transition: opacity 1.2s ease 1s; }
.launch-scene.launch .ground-shadow { opacity: 0; }
/* нос слева: положительный rotate поднимает нос при наборе высоты.
   Тайминги заданы на каждом кейфрейме так, чтобы скорость на стыках
   сегментов совпадала (иначе easing перезапускается и движение дёргается) */
@keyframes plane-takeoff {
	0% { transform: translate(0, 0) rotate(0); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.5); }
	28% { transform: translate(-170px, 0) rotate(0); opacity: 1; animation-timing-function: cubic-bezier(0.33, 0.33, 0.7, 0.61); }
	60% { transform: translate(-560px, -60px) rotate(7deg); opacity: 1; animation-timing-function: cubic-bezier(0.3, 0.26, 0.7, 0.67); }
	100% { transform: translate(-1300px, -260px) rotate(10deg); opacity: 0; }
}
.path-step { display: flex; gap: 1.2rem; position: relative; padding-bottom: 2rem; }
.path-step::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 34px;
	bottom: 2px;
	width: 2px;
	background: linear-gradient(180deg, rgba(96, 165, 250, 0.35), rgba(148, 180, 255, 0.08));
}
.path-step:last-child { padding-bottom: 0; }
.path-step:last-child::before { display: none; }
.path-step .mark {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 700;
	background: rgba(159, 176, 208, 0.12);
	color: var(--muted);
	border: 1px solid var(--border);
	z-index: 1;
	transition: background 0.35s, color 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.path-step h3, .path-step p, .path-step .checks { transition: color 0.35s; }
/* пройденные — как огни полосы: сплошной зелёный с неоновым свечением */
.path-step.done .mark { background: var(--ok); color: #06281c; border-color: var(--ok); box-shadow: 0 0 10px rgba(52, 211, 153, 0.9); }
.path-step.active .mark { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
.path-step p { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
.path-step .checks { display: block; font-size: 0.78rem; color: var(--accent-bright); margin-top: 0.5rem; }
.path-step.locked h3, .path-step.locked p, .path-step.locked .checks { color: var(--muted); }

/* ── Сценарии ─────────────────────────────────────────────── */
.scen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.6rem; }
.scen-card { padding: 1.6rem; display: flex; flex-direction: column; min-width: 0; }
.scen-card > p { color: var(--muted); font-size: 0.9rem; margin-top: 0.5rem; }
.scen-mock {
	margin-top: 1.2rem;
	padding: 1rem;
	border-radius: 12px;
	background: rgba(5, 11, 26, 0.55);
	border: 1px solid var(--border);
	display: grid;
	gap: 0.6rem;
	min-width: 0;
}
.scen-task-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.scen-task-text { font-size: 0.88rem; overflow-wrap: anywhere; }
.scen-task-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-width: 0; flex-wrap: wrap; }
.btn-mini {
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(135deg, var(--accent-deep), var(--accent));
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	white-space: nowrap;
}
.ddl { font-size: 0.75rem; color: var(--warn); }
.scen-reg-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.88rem; min-width: 0; }
.scen-reg-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.scen-stat { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.scen-stat b { color: var(--text); font-weight: 600; }
.scen-stat.err b { color: var(--danger); }

.ticks { margin-top: auto; padding-top: 1.2rem; display: grid; gap: 0.4rem; }
.ticks li { position: relative; padding-left: 1.4rem; font-size: 0.85rem; color: var(--muted); }
.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.ticks.lg li { font-size: 0.95rem; padding-left: 1.6rem; }

/* ── Выгоды ───────────────────────────────────────────────── */
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 2.6rem; }
.benefit { padding: 1.5rem; }
.benefit p { color: var(--muted); font-size: 0.88rem; margin-top: 0.5rem; }

/* ── Заявка ───────────────────────────────────────────────── */
.demo-section { padding-bottom: 110px; }
.demo-card { margin-top: 2.6rem; padding: 2.4rem; }
.demo-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; }
.demo-left h3 { font-size: 1.15rem; }
.demo-left .ticks { margin-top: 1.4rem; }
.privacy { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--muted); margin-top: 1.8rem; }
.privacy svg { flex: none; }

.b24-wrap { position: relative; min-height: 420px; border-radius: 14px; background: rgba(255, 255, 255, 0.02); }
.b24-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	color: var(--muted);
	font-size: 0.85rem;
}
.spinner {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 3px solid rgba(148, 180, 255, 0.2);
	border-top-color: var(--accent-bright);
	animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.b24-empty-hint { font-size: 0.85rem; color: var(--muted); padding: 1.2rem; }
.b24-empty-hint code { color: var(--accent-bright); }

/* Перекраска встроенной формы B24 под тёмную тему страницы.
   Стили формы инжектятся её скриптом, поэтому всё через !important.
   Набор селекторов взят с ygoal.ru (.yg-b24-wrapper) — там он проверен
   на этой же форме inline/90/1xex05. */
#b24-form-root .b24-form,
#b24-form-root .b24-form-wrapper,
#b24-form-root [id^="b24-form"],
#b24-form-root [class*="b24-form__wrapper"],
#b24-form-root [class*="b24-form__container"] {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	font-family: inherit !important;
	color: var(--text) !important;
}
#b24-form-root .b24-form-head,
#b24-form-root .b24-form-body,
#b24-form-root .b24-form-footer,
#b24-form-root [class*="b24-form__body"],
#b24-form-root [class*="b24-form__footer"] { background: transparent !important; }
#b24-form-root .b24-form-header,
#b24-form-root .b24-form-header-title,
#b24-form-root .b24-form-header-description,
#b24-form-root [class*="b24-form__header"],
#b24-form-root [class*="b24-form__title"] { display: none !important; }
#b24-form-root label,
#b24-form-root .b24-form-field-label,
#b24-form-root .b24-form-field-label-text,
#b24-form-root .b24-form-control-label,
#b24-form-root .b24-form-control-desc,
#b24-form-root [class*="b24-form__label"] {
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	color: var(--muted) !important;
	font-family: inherit !important;
	background: transparent !important;
}
#b24-form-root input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
#b24-form-root textarea,
#b24-form-root select,
#b24-form-root .b24-form-control,
#b24-form-root .b24-form-field-input,
#b24-form-root .b24-form-field-textarea,
#b24-form-root [class*="b24-form__input"] {
	width: 100% !important;
	background: rgba(148, 180, 255, 0.08) !important;
	border: 1px solid var(--border) !important;
	border-radius: 10px !important;
	color: var(--text) !important;
	font-size: 1rem !important;
	font-family: inherit !important;
	padding: 22px 16px 8px 16px !important;
	box-shadow: none !important;
}
#b24-form-root input::placeholder,
#b24-form-root textarea::placeholder,
#b24-form-root .b24-form-control::placeholder { color: rgba(159, 176, 208, 0.5) !important; }
#b24-form-root input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
#b24-form-root textarea:focus,
#b24-form-root select:focus,
#b24-form-root .b24-form-control:focus,
#b24-form-root .b24-form-field-input:focus,
#b24-form-root [class*="b24-form__input"]:focus {
	outline: none !important;
	border-color: var(--accent-bright) !important;
	box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
}
#b24-form-root .b24-form-field-type-file,
#b24-form-root [class*="b24-form__file"] {
	background: rgba(148, 180, 255, 0.04) !important;
	border: 1px dashed var(--border) !important;
	border-radius: 10px !important;
	padding: 16px !important;
}
#b24-form-root .b24-form-field-type-file *,
#b24-form-root [class*="b24-form__file"] * { color: var(--muted) !important; }
/* Кнопка «Выбрать файл»: общий паддинг 22/8 под плавающий лейбл сюда не подходит */
#b24-form-root .b24-form-control-file-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 14px 16px !important;
	cursor: pointer !important;
}
/* «+» из двух абсолютных псевдоэлементов виснет в углу — прячем */
#b24-form-root .b24-form-control-file-button::before,
#b24-form-root .b24-form-control-file-button::after { display: none !important; }
#b24-form-root input[type="submit"],
#b24-form-root button[type="submit"],
#b24-form-root .b24-form-btn,
#b24-form-root [class*="b24-form__btn"] {
	background: linear-gradient(135deg, var(--accent-deep), var(--accent)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	padding: 14px 24px !important;
	cursor: pointer !important;
	width: 100% !important;
	box-shadow: 0 0 24px rgba(30, 94, 255, 0.35) !important;
	transition: transform 0.2s, box-shadow 0.2s !important;
}
#b24-form-root input[type="submit"]:hover,
#b24-form-root button[type="submit"]:hover,
#b24-form-root .b24-form-btn:hover,
#b24-form-root [class*="b24-form__btn"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 36px rgba(30, 94, 255, 0.55) !important;
}
#b24-form-root .b24-form-field-agreement,
#b24-form-root .b24-form-field-label-agreement,
#b24-form-root [class*="b24-form__agreement"] { font-size: 0.8rem !important; line-height: 1.5 !important; }
#b24-form-root .b24-form-field-agreement *,
#b24-form-root .b24-form-field-label-agreement *,
#b24-form-root [class*="b24-form__agreement"] * { color: var(--muted) !important; }
#b24-form-root .b24-form-field-agreement a,
#b24-form-root .b24-form-field-label-agreement a,
#b24-form-root [class*="b24-form__agreement"] a { color: var(--accent-bright) !important; }
#b24-form-root .b24-form-field-error-message,
#b24-form-root [class*="b24-form__error"] { color: #f87171 !important; font-size: 0.75rem !important; font-family: inherit !important; }
#b24-form-root .b24-form-success-container,
#b24-form-root [class*="b24-form__success"] {
	background: transparent !important;
	color: var(--text) !important;
	font-family: inherit !important;
	text-align: center !important;
	padding: 32px 0 !important;
}
#b24-form-root .b24-form-success-container * { color: var(--muted) !important; }

.muted-mono-note { margin-top: 1.4rem; font-size: 0.78rem; color: var(--muted); opacity: 0.75; }
.muted-mono-note code { color: var(--accent-bright); }

/* ── Тарифы (/tariffs/) ───────────────────────────────────── */
.period-toggle {
	display: flex;
	width: fit-content;
	max-width: 100%;
	margin: 2.2rem auto 0;
	gap: 0.3rem;
	padding: 0.3rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--card);
	flex-wrap: wrap;
	justify-content: center;
	box-sizing: border-box;
}
.period-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	border: 0;
	background: none;
	color: var(--muted);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.5rem 1.2rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.period-btn .badge { pointer-events: none; display: inline-flex; align-items: center; line-height: 1; padding: 0.28rem 0.55rem; } /* клик всегда на кнопку, не на бейдж */
.period-btn[data-period="yearly"] .badge { background: #059669; color: #fff; }
.period-btn.is-active { background: var(--brand-blue); color: #fff; }
.period-btn.is-active .badge { background: rgba(255, 255, 255, 0.18); color: #fff; }
.period-btn[data-period="yearly"].is-active .badge {
	background: #059669;
	color: #fff;
}

.tariff-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
	gap: 1.2rem;
	margin-top: 1.8rem;
}
.tariff-card { padding: 1.5rem; display: flex; flex-direction: column; min-width: 0; }
.tariff-card .tagline { color: var(--muted); font-size: 0.83rem; margin-top: 0.25rem; }
.tariff-card .price { margin-top: 1.1rem; min-height: 6.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.tariff-card .price s { color: var(--muted); font-size: 0.85rem; }
.tariff-card .price .val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; overflow-wrap: anywhere; }
.tariff-card .price .per { color: var(--muted); font-size: 0.8rem; }
.tariff-grid[data-period="monthly"] .price-y { display: none; }
.tariff-grid[data-period="yearly"] .price-m { display: none; }
.tariff-card .ticks { padding-top: 1rem; padding-bottom: 1.3rem; }
.tariff-card .btn-primary { justify-content: center; margin-top: auto; }

/* ── Реквизиты (/requisites/) ─────────────────────────────── */
.req-card { margin-top: 2.6rem; padding: 2rem 2.4rem; max-width: 47.5rem; min-width: 0; width: 100%; }
.req-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.8rem 2rem; }
.req-list dt { color: var(--muted); font-size: 0.9rem; }
.req-list dd { font-size: 0.95rem; min-width: 0; overflow-wrap: anywhere; }
.req-list a { color: var(--accent-bright); }
.req-list a:hover { text-decoration: underline; }
@media (max-width: 720px) {
	.req-card { padding: 1.25rem 1.15rem; }
	.req-list { grid-template-columns: 1fr; gap: 0.15rem; }
	.req-list dt {
		font-size: 0.72rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}
	.req-list dd { font-size: 0.92rem; margin-bottom: 0.95rem; line-height: 1.45; }
	.req-list dd:last-child { margin-bottom: 0; }

	.period-toggle { width: 100%; max-width: 22rem; }
	.period-btn { flex: 1 1 auto; padding: 0.5rem 0.75rem; font-size: 0.82rem; }
	.tariff-card { padding: 1.25rem; }
	.tariff-card .price { min-height: 0; }
	.tariff-card .price .val { font-size: 1.35rem; }
}

/* ── Футер ────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); padding: 2.5rem 0; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.tag-line { color: var(--muted); font-size: 0.85rem; margin-top: 0.7rem; }
.footer-links { display: flex; align-items: center; gap: 1rem 1.5rem; font-size: 0.88rem; color: var(--muted); flex-wrap: wrap; }
.footer-links a:hover { color: var(--text); }

/* ── Лицензионное соглашение (terms) ─────────────────────── */
.terms-doc {
	max-width: 760px;
	margin: 3rem auto 0;
	padding: 2.5rem;
}
.terms-doc .updated {
	color: var(--muted);
	font-size: 0.85rem;
	margin-bottom: 1.5rem;
}
.terms-doc .terms-body { line-height: 1.7; font-size: 0.95rem; color: var(--text); }
.terms-doc .terms-body p { margin-bottom: 1rem; }
.terms-doc .terms-body a { color: var(--primary); text-decoration: underline; }
.terms-doc .terms-body a:hover { color: var(--primary-hover); }
@media (max-width: 640px) {
	.terms-doc { padding: 1.5rem; }
	.terms-doc .terms-body { font-size: 0.9rem; }
}

/* ── Появление при скролле ────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-up.is-visible { opacity: 1; transform: none; }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.fade-up { opacity: 1; transform: none; }
	.pain-small.fade-up .pain-card-sm { opacity: 1; transform: none; }
	.bar-fill { width: var(--w, 60%); }
	.ai-mock.fade-up:not(.is-visible) .ai-out-row,
	.ai-out-row {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

/* ── Адаптив ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.hero-grid, .manager-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
	.hero-grid > *, .manager-grid > * { min-width: 0; }
	.pain-small, .benefit-grid { grid-template-columns: repeat(2, 1fr); }
	.flow { grid-template-columns: repeat(2, 1fr); }
	.scen-grid { grid-template-columns: 1fr; }
	.ai-mock { grid-template-columns: 1fr; }
	.ai-core { justify-self: center; }
	.ai-files { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
	.container { padding: 0 16px; }
	section { padding: 64px 0; }
	.hero { padding: 72px 0 84px; }
	.nav-links, .nav-cta { display: none; }
	/* Внутренние страницы без бургера — компактная шапка */
	.nav-row:not(:has(.burger)) {
		gap: 0.6rem;
	}
	.nav-row:not(:has(.burger)) .nav-links {
		display: flex;
		margin-left: auto;
		gap: 0.5rem;
		align-items: center;
		flex-shrink: 0;
	}
	.nav-row:not(:has(.burger)) .nav-links a {
		font-size: 0.8rem;
		white-space: nowrap;
	}
	.nav-row:not(:has(.burger)) .nav-cta {
		display: inline-flex;
		padding: 0.4rem 0.85rem;
		font-size: 0.78rem;
		flex-shrink: 0;
	}
	.nav-row:not(:has(.burger)) .brand {
		min-width: 0;
		flex: 1 1 auto;
	}
	.nav-row:not(:has(.burger)) .brand .name {
		font-size: 0.72rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		gap: 5px;
		margin-left: auto;
		width: 42px;
		height: 42px;
		/* iOS: пустой button + слабый border сливаются с тёмной шапкой */
		-webkit-appearance: none;
		appearance: none;
		background: rgba(148, 180, 255, 0.12);
		border: 1px solid rgba(238, 243, 255, 0.45);
		border-radius: 9px;
		cursor: pointer;
		padding: 0 10px;
		color: #eef3ff;
	}
	.burger span {
		display: block;
		width: 100%;
		height: 2px;
		flex: 0 0 2px;
		background: currentColor;
		border-radius: 2px;
		transition: transform 0.25s, opacity 0.25s;
	}
	.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); }

	/* Sticky CTA + «наверх» — только мобилка */
	a.mobile-sticky-cta {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: max(12px, env(safe-area-inset-bottom, 0px));
		z-index: 45;
		padding: 0.85rem 1.4rem;
		border-radius: 999px;
		background: linear-gradient(135deg, var(--accent-deep), var(--accent));
		color: #fff;
		font-weight: 600;
		font-size: 1rem;
		box-shadow: 0 4px 28px rgba(30, 94, 255, 0.45);
	}
	a.mobile-sticky-cta[hidden] { display: none !important; }
	a.back-to-top {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 16px;
		bottom: max(12px, env(safe-area-inset-bottom, 0px));
		z-index: 45;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: rgba(10, 20, 40, 0.92);
		border: 1px solid rgba(238, 243, 255, 0.35);
		color: #eef3ff;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	}
	a.back-to-top[hidden] { display: none !important; }
	body.has-sticky-cta { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
	.mobile-menu {
		display: block;
		border-top: 1px solid var(--border);
		background: rgba(5, 11, 26, 0.97);
	}
	.mobile-menu[hidden] { display: none; }
	.mobile-menu .container { display: grid; gap: 0.4rem; padding-top: 1rem; padding-bottom: 1.4rem; }
	.mobile-menu a { padding: 0.55rem 0; color: var(--muted); font-weight: 500; }
	.mobile-menu .btn-primary { color: #fff; justify-content: center; margin-top: 0.6rem; }

	.pain-main, .demo-grid { grid-template-columns: 1fr; }
	.demo-card { padding: 1.4rem; }
	.hero-cta-row .meta { max-width: none; }

	/* Чипы: в потоке под карточкой, без absolute-наложений */
	.hero-visual {
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
	}
	.chip {
		position: static;
		align-self: flex-start;
		animation: none;
		font-size: 0.68rem;
		padding: 0.4rem 0.75rem;
		max-width: 100%;
	}
	.chip-1, .chip-2, .chip-3 { align-self: flex-start; }
	/* ряд чипов под мокапом */
	.hero-visual .chip-1 { order: 1; }
	.hero-visual .chip-2 { order: 2; }
	.hero-visual .chip-3 { order: 3; }

	.route-mock, .dash-mock { padding: 1.15rem; }
	.route-mock-title strong { font-size: 0.9rem; }
	.route-steps li { font-size: 0.8rem; padding: 0.5rem 0.55rem; gap: 0.45rem; }
	.badge { font-size: 0.62rem; padding: 0.12rem 0.45rem; }
	.dash-stats { gap: 0.45rem; }
	.stat { padding: 0.65rem 0.3rem; }
	.stat .v { font-size: 1.25rem; }
	.stat .l { font-size: 0.62rem; }
	.dash-row { font-size: 0.78rem; padding: 0.5rem 0.6rem; gap: 0.45rem; }
}

@media (max-width: 480px) {
	.pain-small, .flow, .benefit-grid, .ai-files { grid-template-columns: 1fr; }
	.container { padding: 0 16px; }
	/* Узкий экран: логотип без текста — место для ссылок */
	.nav-row:not(:has(.burger)) .brand .name { display: none; }
	.route-mock, .dash-mock { padding: 1rem; }
	.route-steps li { font-size: 0.76rem; }
	/* Длинные бейджи — перенос строки статуса под подписью */
	.route-steps li {
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.route-steps .mark { margin-top: 0.1rem; }
	.route-steps .step-lbl { flex: 1 1 calc(100% - 2.2rem); }
	.route-steps li .badge {
		margin-left: calc(22px + 0.45rem);
		margin-top: -0.1rem;
	}
	.dash-row {
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.dash-row .nm { flex: 1 1 auto; white-space: normal; }
	.dash-row .badge { margin-left: auto; }
}