/* ==================================================================
   Kelpie_v2 — Hero (экспертиза), фронтенд
   Соразмерность под контейнер 1200px (как остальной сайт): значения
   макета (артборд 1707px) уменьшены ~×0.7. Без scale-JS, без «проводов».
   «Закрытые» стили: box-sizing reset + typography-firewall + !important.
   Breakpoints: ≤980 (2→1 колонка, документ под текстом, бейджи в строку),
   ≤768 (нижний отступ 56px), ≤560 (форма/карточки в столбик), ≤420 (мин.).
   ================================================================== */

.kbv2-hero,
.kbv2-hero *,
.kbv2-hero *::before,
.kbv2-hero *::after { box-sizing: border-box !important; }

/* ── typography firewall: вернуть наследование голым элементам, чтобы темовые `p{font-size}` / `h*{}` не продавливали блок; классовые правила ниже всё равно выигрывают ── */
.kbv2-hero :where(p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,figure,figcaption,small,strong,em,b,i,span,a,button,input,label) { font-size: inherit; line-height: inherit; font-family: inherit; }

.kbv2-hero {
	--kbv2hero-navy:#1B2A45;
	--kbv2hero-blue:#1888D6;
	--kbv2hero-ink-soft:#5A6678;
	--kbv2hero-line:#E3E9F2;
	--kbv2hero-orange:#FF7A2E;
	--kbv2hero-orange-deep:#EE5C0C;
	--kbv2hero-green:#27B24A;

	position: relative !important;
	overflow: visible !important;
	max-width: 1200px !important;
	margin: 0 auto 88px !important;
	padding: 24px 0 32px !important;
	border-radius: 0 !important;
	font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--kbv2hero-navy) !important;
	text-align: left !important;
	background: transparent !important;
}

/* подложка-чертёж подвески (фото) под белой вуалью — как .stage в макете */
.kbv2-hero__bp {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none !important;
	/* во всю ширину экрана, а не по контейнеру — как .stage в макете */
	left: 50% !important; right: auto !important;
	width: 100vw !important; max-width: 100vw !important;
	transform: translateX(-50%) !important;
	background-image: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), var(--kbv2-hero-van) !important;
	background-size: cover, cover !important;
	background-position: center, center !important;
	background-repeat: no-repeat, no-repeat !important;
	opacity: 1 !important;
	/* растворяем только нижнюю кромку — чтобы фон не обрывался полосой перед следующим блоком */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%) !important;
	        mask-image: linear-gradient(180deg, #000 0%, #000 76%, transparent 100%) !important;
}

/* подпись над документом — только на мобиле (на десктопе документ говорит сам за себя) */
.kbv2-hero__doclabel { display: none !important; }

.kbv2-hero__wrap { position: relative !important; z-index: 1 !important; }

/* ── Хлебные крошки ───────────────────────────────────────────── */
.kbv2-hero__crumbs {
	display: flex !important; flex-wrap: wrap !important; align-items: center !important;
	gap: 8px !important; margin: 0 0 18px !important;
	font-size: 13px !important; color: var(--kbv2hero-ink-soft) !important;
}
.kbv2-hero__crumbs a { font-size: 13px !important; color: var(--kbv2hero-ink-soft) !important; text-decoration: none !important; }
.kbv2-hero__crumbs a:hover { color: var(--kbv2hero-blue) !important; }
.kbv2-hero__sep { color: #B3BECD !important; }
.kbv2-hero__cur { color: var(--kbv2hero-navy) !important; }

/* ── Сетка ────────────────────────────────────────────────────── */
.kbv2-hero__grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 430px) !important;
	gap: 24px !important;
	align-items: start !important;
}

/* ── Левая колонка ────────────────────────────────────────────── */
.kbv2-hero__left { min-width: 0 !important; }

.kbv2-hero__h1 {
	margin: 0 !important;
	font-family: 'Manrope', sans-serif !important;
	font-weight: 800 !important;
	font-size: clamp(26px, 3.5vw, 44px) !important;
	line-height: 1.08 !important;
	letter-spacing: -1px !important;
	color: var(--kbv2hero-navy) !important;
}
.kbv2-hero__h1 strong { font-size: inherit !important; color: var(--kbv2hero-blue) !important; font-weight: 800 !important; }

.kbv2-hero__sub {
	margin: 22px 0 0 !important;
	font-size: clamp(15px, 1.6vw, 17px) !important;
	line-height: 1.5 !important;
	color: var(--kbv2hero-ink-soft) !important;
	max-width: 520px !important;
}

/* ── Форма ────────────────────────────────────────────────────── */
.kbv2-hero__form {
	margin: 26px 0 0 !important;
	max-width: 480px !important;
	display: flex !important; align-items: center !important; gap: 6px !important;
	background: #fff !important;
	border: 1px solid var(--kbv2hero-line) !important;
	border-radius: 999px !important;
	padding: 6px 6px 6px 22px !important;
	box-shadow: 0 18px 36px -26px rgba(22,36,59,.30) !important;
}
.kbv2-hero__ph {
	flex: 1 1 auto !important; min-width: 0 !important;
	border: 0 !important; outline: none !important; background: transparent !important;
	font-family: 'Manrope', sans-serif !important;
	font-size: 15px !important; color: var(--kbv2hero-navy) !important;
	padding: 8px 0 !important;
}
.kbv2-hero__ph::placeholder { color: #9AA4B2 !important; opacity: 1 !important; }
.kbv2-hero__btn {
	flex: 0 0 auto !important;
	display: inline-flex !important; align-items: center !important; gap: 9px !important;
	border: 0 !important; cursor: pointer !important; text-decoration: none !important;
	font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; font-size: 14px !important;
	color: #fff !important;
	background: linear-gradient(180deg, var(--kbv2hero-orange), var(--kbv2hero-orange-deep)) !important;
	border-radius: 999px !important; padding: 12px 20px !important; white-space: nowrap !important;
	box-shadow: 0 10px 22px -10px rgba(238,92,12,.6) !important;
	transition: transform .16s ease, box-shadow .16s ease;
}
.kbv2-hero__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(238,92,12,.7) !important; }
.kbv2-hero__btn svg { width: 17px !important; height: 17px !important; flex: 0 0 auto !important; }

.kbv2-hero__consent {
	margin: 12px 0 0 !important; max-width: 460px !important;
	font-size: 12px !important; line-height: 1.45 !important; color: #A6AFBC !important;
}
.kbv2-hero__consent a { font-size: 12px !important; color: #8B95A4 !important; text-decoration: underline !important; }

/* ── Карточки ─────────────────────────────────────────────────── */
.kbv2-hero__cards { margin: 24px 0 0 !important; display: flex !important; gap: 16px !important; max-width: 540px !important; }
.kbv2-hero__card {
	flex: 1 1 0 !important; min-width: 0 !important;
	background: #fff !important; border: 1px solid var(--kbv2hero-line) !important;
	border-radius: 16px !important; padding: 18px 18px 20px !important;
	box-shadow: 0 16px 34px -28px rgba(22,36,59,.26) !important;
}
.kbv2-hero__card-lbl { font-size: 14px !important; font-weight: 700 !important; color: #3A475E !important; }
.kbv2-hero__card-big {
	margin: 6px 0 8px !important; font-family: 'Manrope', sans-serif !important;
	font-weight: 800 !important; font-size: clamp(18px, 1.9vw, 23px) !important;
	line-height: 1.05 !important; letter-spacing: -.5px !important; color: var(--kbv2hero-blue) !important;
}
.kbv2-hero__card-dsc { font-size: 13.5px !important; line-height: 1.42 !important; color: #737E8E !important; }

/* ── Колонка документа + бейджи ───────────────────────────────── */
.kbv2-hero__doccol { position: relative !important; min-width: 0 !important; }
.kbv2-hero__docwrap {
	width: min(330px, 100%) !important; margin: 34px 0 0 auto !important;
	transform: rotate(9deg) !important; transform-origin: center !important;
}
.kbv2-hero__doc {
	width: 100% !important; background: #fff !important; border: 1px solid #E7ECF3 !important;
	border-radius: 5px !important; padding: 17px 18px 14px !important;
	box-shadow: 0 36px 70px -36px rgba(22,36,59,.5), 0 6px 18px -14px rgba(22,36,59,.3) !important;
	font-family: 'PT Sans', system-ui, sans-serif !important; color: #1c2330 !important;
	position: relative !important; overflow: hidden !important;
}
.kbv2-hero__seal-bg {
	position: absolute !important; left: 40% !important; top: 48% !important; width: 150px !important; height: 150px !important;
	transform: translate(-50%,-50%) !important; border-radius: 50% !important; border: 6px solid #2A52A8 !important; opacity: .05 !important;
}
.kbv2-hero__doc-head { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 10px !important; }
.kbv2-hero__brand img { height: 18px !important; width: auto !important; display: block !important; }
.kbv2-hero__addr { text-align: right !important; font-size: 5.8px !important; line-height: 1.55 !important; color: #3a4150 !important; }
.kbv2-hero__doc-title { text-align: center !important; margin: 11px 0 2px !important; }
.kbv2-hero__doc-title h2, .kbv2-hero__doc-t {
	display: block !important;
	margin: 0 !important; font-family: 'Manrope', sans-serif !important; font-weight: 800 !important;
	font-size: 8.6px !important; line-height: 1.34 !important; letter-spacing: .2px !important; color: #16243B !important;
}
.kbv2-hero__doc-no { text-align: center !important; font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; font-size: 8.6px !important; color: #1577C4 !important; margin: 5px 0 9px !important; }
.kbv2-hero__rows { display: grid !important; grid-template-columns: 1fr auto !important; gap: 0 !important; font-size: 6.6px !important; }
.kbv2-hero__l { font-size: 6.6px !important; color: #2a3140 !important; padding: 2.1px 0 !important; border-bottom: 1px solid #EEF1F6 !important; }
.kbv2-hero__v { font-size: 6.6px !important; font-weight: 700 !important; color: #16243B !important; padding: 2.1px 0 2.1px 10px !important; text-align: right !important; border-bottom: 1px solid #EEF1F6 !important; }
.kbv2-hero__sec { margin-top: 8px !important; font-size: 6.6px !important; line-height: 1.5 !important; color: #222a38 !important; }
.kbv2-hero__sec-h { font-size: 6.6px !important; font-weight: 700 !important; color: #16243B !important; display: flex !important; gap: 4px !important; }
.kbv2-hero__sec-h span { font-size: 6.6px !important; }
.kbv2-hero__sec-n { font-size: 6.6px !important; }
.kbv2-hero__sec p { font-size: 6.6px !important; line-height: 1.5 !important; font-family: 'PT Sans', system-ui, sans-serif !important; margin: 2px 0 0 !important; color: #39414f !important; }
.kbv2-hero__doc-foot { margin-top: 11px !important; position: relative !important; min-height: 70px !important; }
.kbv2-hero__ff { display: flex !important; align-items: baseline !important; gap: 7px !important; font-size: 6.6px !important; margin-bottom: 8px !important; }
.kbv2-hero__k { font-size: 6.6px !important; color: #2a3140 !important; }
.kbv2-hero__vv { font-size: 6.6px !important; font-weight: 700 !important; color: #16243B !important; }
.kbv2-hero__sig { display: flex !important; align-items: flex-end !important; gap: 6px !important; }
.kbv2-hero__sig svg { width: 42px !important; height: 20px !important; }
.kbv2-hero__nm { font-size: 6.6px !important; color: #16243B !important; font-weight: 700 !important; }
.kbv2-hero__stamp {
	position: absolute !important; right: 18px !important; top: 2px !important; width: 76px !important; height: 76px !important;
	border-radius: 50% !important; border: 2px solid #1B5FB0 !important; color: #1B5FB0 !important;
	display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
	transform: rotate(-9deg) !important;
}
.kbv2-hero__stamp::before { content: "" !important; position: absolute !important; inset: 5px !important; border-radius: 50% !important; border: 1px dashed #1B5FB0 !important; opacity: .8 !important; }
.kbv2-hero__stamp b { font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; font-size: 10.5px !important; line-height: 1.05 !important; letter-spacing: .4px !important; text-align: center !important; }
.kbv2-hero__disc { margin-top: 9px !important; padding-top: 8px !important; border-top: 1px solid #ECEFF4 !important; font-size: 5.6px !important; line-height: 1.5 !important; color: #7c8494 !important; }

/* ── Бейджи (поверх документа на десктопе) ────────────────────── */
.kbv2-hero__badge {
	position: absolute !important; z-index: 4 !important; display: flex !important; align-items: center !important; gap: 10px !important;
	background: #fff !important; border-radius: 14px !important; padding: 11px 16px 11px 13px !important;
	box-shadow: 0 20px 40px -22px rgba(22,36,59,.36) !important;
}
.kbv2-hero__badge--1 { top: -22px !important; right: 0 !important; }
.kbv2-hero__badge--2 { bottom: 96px !important; left: -120px !important; }

/* ── Провода от пилюль к документу (как в макете) ─────────────── */
/* якорятся к самой пилюле, поэтому не зависят от её ширины/высоты */
.kbv2-hero__wire { position: absolute !important; display: block !important; pointer-events: none !important; }
.kbv2-hero__wire svg { width: 100% !important; height: 100% !important; display: block !important; overflow: visible !important; }
.kbv2-hero__wire--1 { right: calc(100% - 34px) !important; top: calc(100% - 8px) !important; width: 78px !important; height: 66px !important; }
.kbv2-hero__wire--2 { left: calc(100% - 8px) !important; top: 50% !important; margin-top: -15px !important; width: 60px !important; height: 30px !important; }
.kbv2-hero__chk {
	flex: 0 0 auto !important; width: 28px !important; height: 28px !important; border-radius: 50% !important;
	background: var(--kbv2hero-green) !important; color: #fff !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	box-shadow: 0 5px 12px -6px rgba(39,178,74,.7) !important;
}
.kbv2-hero__chk svg { width: 16px !important; height: 16px !important; }
.kbv2-hero__btx { font-size: 13.5px !important; line-height: 1.18 !important; font-weight: 700 !important; color: #26344C !important; max-width: 160px !important; }

/* ════════════ Адаптив ════════════ */
/* узкий десктоп: левая колонка уже — опускаем нижнюю пилюлю, чтобы не наезжала на карточки */
@media (max-width: 1140px) {
	.kbv2-hero__badge--2 { bottom: 46px !important; left: -86px !important; }
}

@media (max-width: 980px) {
	.kbv2-hero__grid { grid-template-columns: 1fr !important; gap: 26px !important; }
	.kbv2-hero__bp { background-size: cover, cover !important; background-position: center, 62% center !important; opacity: .75 !important; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%) !important; mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%) !important; }
	.kbv2-hero__doclabel {
		display: block !important; order: -1 !important;
		font-family: 'Manrope', sans-serif !important; font-weight: 800 !important;
		font-size: 12px !important; letter-spacing: 1.6px !important; text-transform: uppercase !important;
		color: #7A8596 !important; text-align: center !important; margin: 4px 0 -4px !important;
	}
	.kbv2-hero__docwrap { transform: rotate(0) !important; margin-top: 6px !important; }
	.kbv2-hero__doccol { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; }
	.kbv2-hero__docwrap { margin: 4px auto 6px !important; }
	.kbv2-hero__badge { position: static !important; width: min(330px, 100%) !important; margin: 0 auto !important; }
	.kbv2-hero__badge--1, .kbv2-hero__badge--2 { inset: auto !important; }
	.kbv2-hero__wire { display: none !important; }
	.kbv2-hero__docwrap { width: min(330px, 100%) !important; margin: 4px auto 6px !important; }
	.kbv2-hero__btx { max-width: none !important; }
}

@media (max-width: 768px) {
	.kbv2-hero { margin-bottom: 56px !important; padding: 24px 16px 28px !important; }
}

@media (max-width: 560px) {
	.kbv2-hero__form { flex-direction: column !important; align-items: stretch !important; border-radius: 16px !important; padding: 10px !important; }
	.kbv2-hero__ph { padding: 9px 8px !important; text-align: center !important; }
	.kbv2-hero__btn { justify-content: center !important; padding: 12px 18px !important; }
	.kbv2-hero__cards { flex-direction: column !important; gap: 12px !important; }
	.kbv2-hero__addr { white-space: normal !important; }
	.kbv2-hero__v { white-space: normal !important; word-break: break-word !important; }
}

@media (max-width: 420px) {
	.kbv2-hero { padding: 20px 12px 24px !important; }
	.kbv2-hero__h1 { letter-spacing: -.5px !important; }
	.kbv2-hero__sub { margin-top: 16px !important; }
	.kbv2-hero__docwrap { width: min(300px, 100%) !important; }
}