/* hero-proj-banner.css — два компонента
   1. .hpb-banner — full-bleed hero (1920×864) в ВЕРХУ главной, под прозрачную шапку
   2. .hpi — компактный inline-баннер «Проектировщикам» на месте .GNLD_AUDIENCES
   Figma: file fel5lfSnsWRIkZhtzLgXuQ, node 40-251 */

/* ============ 1. БОЛЬШОЙ HERO ВВЕРХУ ============ */

.hpb-banner {
	position: relative;
	width: 100%;
	min-height: 864px;
	max-height: 864px;
	margin-top: -139px;
	overflow: hidden;
	z-index: 1;
	background:
		radial-gradient(ellipse 55% 45% at 67% 72%,
			rgba(203, 41, 252, 0.55) 0%,
			rgba(203, 41, 252, 0.28) 25%,
			rgba(203, 41, 252, 0.08) 55%,
			transparent 75%),
		radial-gradient(ellipse 115.63% 73.05% at 74.19% 122.16%,
			#CB29FC 14%,
			rgba(59, 72, 130, 0.75) 39%,
			rgba(27, 28, 31, 0.54) 66%,
			#17181A 100%),
		#17181A;
	color: #FFFFFF;
	font-family: 'Museo Sans Cyrl', sans-serif;
}

.hpb-banner__container {
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
	height: 864px;
}

.hpb-banner__image {
	position: absolute;
	left: 48%;
	top: 18.4%;
	width: 38.7%;
	height: 75.9%;
	background: url('/local/assets/images/hero-proj-banner.png') no-repeat center;
	background-size: contain;
	pointer-events: none;
}

.hpb-banner__content {
	position: absolute;
	left: 19.4%;
	top: 41.3%;
	max-width: 584px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hpb-banner__title {
	margin: 0;
	font-family: 'Museo Sans Cyrl', sans-serif;
	font-size: 48px;
	font-weight: 600;
	line-height: 120%;
	color: #FFFFFF;
	letter-spacing: -0.01em;
}

.hpb-banner__subtitle {
	margin: 0;
	max-width: 370px;
	font-family: 'Museo Sans Cyrl', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 130%;
	color: #FFFFFF;
}

.hpb-banner__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: max-content;
	height: 48px;
	padding: 0 24px;
	background: #AC2DC3;
	border: 0;
	border-radius: 8px;
	color: #FFFFFF;
	font-family: 'Museo Sans Cyrl', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 130%;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, transform .15s;
}
.hpb-banner__cta:hover {
	background: #c43cdb;
	color: #FFFFFF;
	transform: translateY(-1px);
}
.hpb-banner__cta:active {
	transform: translateY(0);
}

/* ============ 2. КОМПАКТНАЯ ПЛАШКА .hpi (Проектировщикам) ============ */
/* Контейнер .GNLD_AUDIENCES — обнуляем Aspro-декор */
.GNLD_AUDIENCES--hero,
.GNLD_AUDIENCES.GNLD_AUDIENCES--hero.grey_block {
	background: transparent !important;
	padding: 32px 0 !important;
	margin: 0 auto !important;
	max-width: none !important;
}

/* .hpi — Figma точные значения:
   container: radial-gradient + #171819 + border-radius 24
   title 48px/57.6 weight 600 (left 65, top 116, w458)
   subtitle 16px/20.8 weight 400 (left 65, top 201, w467)
   cta height 48 padding 0/24 #AC2DC3 radius 8 16/20.8 weight 400 (left 65, top 275)
   image 573×476 (left 659, top 0) */
.hpi {
	position: relative;
	display: block;
	width: 100%;
	max-width: 1200px;
	margin: 60px auto;
	min-height: 340px;
	background:
		radial-gradient(ellipse 119.22% 64.23% at 76.73% 124.32%,
			#CB29FC 22%,
			#3B4882 49%,
			#30354C 73%,
			#2F3033 100%),
		#171819;
	border-radius: 24px;
	overflow: visible;
	font-family: 'Museo Sans Cyrl', sans-serif;
	color: #FFFFFF;
}

.hpi__inner {
	position: relative;
	width: 100%;
	height: 340px;
}

.hpi__content {
	position: absolute;
	left: 65px;
	top: 64px;
	display: flex;
	flex-direction: column;
}

.hpi__title {
	margin: 0;
	width: 458px;
	font-size: 48px;
	font-weight: 600;
	line-height: 57.6px;
	color: #FFFFFF;
	letter-spacing: -0.01em;
}

.hpi__subtitle {
	margin: 64px 0 0 0;
	width: 467px;
	font-size: 16px;
	font-weight: 400;
	line-height: 20.8px;
	color: #FFFFFF;
}

.hpi__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: max-content;
	height: 48px;
	margin-top: 48px;
	padding: 0 24px;
	background: #AC2DC3;
	border: 0;
	border-radius: 8px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 400;
	line-height: 20.8px;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, transform .15s;
}
.hpi__cta:hover {
	background: #c43cdb;
	color: #FFFFFF;
	transform: translateY(-1px);
}

.hpi__image {
	position: absolute;
	right: 72px;
	bottom: -36px;
	width: 573px;
	height: 476px;
	background: url('/local/assets/images/hero-proj-banner.png') no-repeat right bottom;
	background-size: contain;
	pointer-events: none;
	z-index: 2;
}

/* ============ Адаптив ============ */
@media (max-width: 1200px) {
	.hpi { max-width: calc(100% - 32px); min-height: 320px; }
	.hpi__inner { height: 320px; }
	.hpi__content { left: 32px; top: 80px; }
	.hpi__title { font-size: 36px; line-height: 1.2; width: auto; max-width: 50%; }
	.hpi__subtitle { width: auto; max-width: 50%; }
	.hpi__image { width: 45%; height: 100%; left: 55%; }
}

@media (max-width: 768px) {
	.hpi { min-height: auto; }
	.hpi__inner { height: auto; padding: 24px 16px 24px; }
	.hpi__content { position: static; }
	.hpi__title { font-size: 28px; width: auto; max-width: 100%; }
	.hpi__subtitle { width: auto; max-width: 100%; }
	.hpi__image { position: relative; left: 0; top: 0; width: 100%; height: 240px; background-position: center; background-size: contain; margin-top: 16px; }
	.hpb-banner { min-height: 560px; max-height: none; margin-top: 0; }
	.hpb-banner__container { height: auto; padding: 320px 16px 40px; }
	.hpb-banner__content { position: static; max-width: 100%; }
	.hpb-banner__image { top: 0; left: 0; width: 100%; height: 280px; background-position: center top; background-size: cover; }
	.hpb-banner__title { font-size: 28px; }
	.hpb-banner__subtitle { font-size: 16px; max-width: 100%; }
}