/* ===== Призыв к действию ===== */
.section.cta-block {
	padding: 56px 0;
}
/* Полоса с кнопкой на макете главной: 244 px высотой */
.section.cta-block--button {
	padding: 38px 0 40px;
}
/* С формой справа: на макете «Разработки» форма почти от края до края полосы, 256 px
   (сверху 18, снизу 16; у нас выше на строку согласия на обработку данных) */
.section.cta-block--form {
	padding: 18px 0 16px;
}
.cta-block {
	overflow: hidden;
	isolation: isolate;
	background:
		url("../../assets/img/lines.svg") left bottom / cover no-repeat,
		radial-gradient(45% 90% at 12% 10%, rgba(0, 170, 130, 0.16), transparent 70%),
		radial-gradient(40% 80% at 70% 100%, rgba(18, 214, 140, 0.16), transparent 70%),
		linear-gradient(180deg, #021512 0%, var(--c-dark) 100%);
}
.cta-block__grid {
	position: relative;
	z-index: 1;
	display: grid;
	align-items: center;
	gap: 32px 48px;
}
.cta-block__title {
	font-size: clamp(26px, 2.5vw, 36px);
	line-height: 1.25;
	color: #fff;
	letter-spacing: -0.02em;
}
.cta-block__title .accent {
	color: var(--c-accent-2);
}
.cta-block__text {
	margin-top: 14px;
	font-size: 19px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.85);
	max-width: 520px;
}
.cta-block__action {
	display: grid;
	justify-items: center;
	gap: 14px;
}
.cta-block__btn {
	min-width: 250px;
	min-height: 56px;
	border-radius: 999px;
}
.cta-block__note {
	font-size: 14px;
	font-weight: 500;
	color: var(--c-accent);
	text-align: center;
}

/* Фото в край */
.cta-block__photo {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 44%;
	z-index: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 32%);
}
.cta-block__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 28%;
}
.cta-block__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(1, 13, 10, 0.35), transparent 40%);
}

/* Кнопка + картинка */
.cta-block--button .cta-block__grid {
	grid-template-columns: minmax(0, 1.45fr) auto minmax(0, 0.95fr);
}
.cta-block--button.cta-block--visual-photo .cta-block__grid {
	grid-template-columns: minmax(0, 560px) auto 1fr;
	min-height: 180px;
}
.cta-block--button.cta-block--visual-none .cta-block__grid {
	grid-template-columns: minmax(0, 1fr) auto;
}
.cta-block__devices {
	align-self: center;
}
.cta-block__devices .devices {
	max-width: 440px;
}
/* Ноутбук поверх фона по теме проекта (кейсы): фон шире фото, мягко уходит влево под текст */
.cta-block--with-bg .cta-block__photo--bg {
	width: 56%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.cta-block--with-bg .cta-block__photo--bg img {
	object-position: 50% 50%;
}

/* Заголовок поменьше: макеты «Кейсы» и «О компании» — заголовок 31/1.25, текст в две строки, полоса с кнопкой 212 px */
@media (min-width: 1025px) {
	.section.cta-block--button.cta-block--title-s {
		padding: 34px 0 32px;
	}
	.cta-block--title-s .cta-block__title {
		font-size: 31px;
	}
	.cta-block--title-s .cta-block__text {
		margin-top: 12px;
		max-width: 548px;
		line-height: 1.45;
	}
	.cta-block--button.cta-block--title-s.cta-block--visual-photo .cta-block__grid {
		grid-template-columns: minmax(0, 575px) auto 1fr;
		column-gap: 0;
		min-height: 146px;
	}
	.cta-block--title-s .cta-block__btn {
		min-width: 246px;
		min-height: 53px;
	}
	/* С ноутбуком («Контекстная реклама», «CRM»): полоса ≈240, текст 18/1.45, ноутбук заходит в поля */
	.cta-block--button.cta-block--title-s.cta-block--visual-devices .cta-block__text {
		font-size: 18px;
	}
	.cta-block--title-s .cta-block__devices {
		margin: -14px 0;
	}
	.cta-block--title-s .cta-block__devices .devices {
		max-width: 340px;
		margin-left: auto;
	}
}

/* Форма и список (макет «Контакты»): полоса ≈265, заголовок 31 в строку, форма ≈320, список ≈300 */
@media (min-width: 1101px) {
	.section.cta-block--form-list {
		padding: 26px 0;
	}
	.cta-block--form-list .cta-block__grid {
		grid-template-columns: minmax(0, 555fr) minmax(0, 320fr) minmax(0, 300fr);
		column-gap: 48px;
	}
}

/* Картинка в центре, форма справа */
.cta-block--form .cta-block__grid {
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.4fr) minmax(0, 340px);
	min-height: 212px;
}
.cta-block--form.cta-block--visual-none .cta-block__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
}
.cta-block--form .cta-block__photo {
	left: 38%;
	right: auto;
	width: 42%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
}
.cta-block--form .cta-block__photo::after {
	background: linear-gradient(0deg, rgba(1, 13, 10, 0.45), rgba(1, 13, 10, 0.15));
}
.cta-block--form .cta-block__devices .devices {
	max-width: 380px;
}

/* Форма в центре, список справа */
.cta-block--form-list .cta-block__grid {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 0.95fr);
}
.cta-block__list {
	display: grid;
	gap: 16px;
}
.cta-block__list li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 16px;
	line-height: 1.35;
	color: #fff;
}
.cta-block__list-icon {
	display: grid;
	place-items: center;
	color: var(--c-accent);
	flex: none;
}
.cta-block__list-icon .icon {
	width: 22px;
	height: 22px;
	stroke-width: 1.8;
}

/* Форма на тёмном */
.cta-block__form .lead-form {
	gap: 10px;
}
/* Пустые строки ошибки и статуса не добавляют отступов */
.cta-block__form .lead-form > .field__error:empty,
.cta-block__form .lead-form__status:empty {
	display: none;
}
.cta-block__form .lead-form__fields {
	gap: 6px;
}
.cta-block__form .field input,
.cta-block__form .field textarea {
	padding: 7px 14px;
	font-size: 15px;
	line-height: 22px;
	border-radius: 6px;
	/* Плотная тёмная заливка, как на макете: на фоне фото поля не теряются */
	background: rgba(4, 26, 20, 0.86);
	border-color: rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.cta-block__form .field input::placeholder,
.cta-block__form .field textarea::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
.cta-block__form .field textarea {
	min-height: 36px;
	max-height: 120px;
}
.cta-block__form .consent {
	font-size: 12px;
}
.cta-block__form .consent input {
	width: 16px;
	height: 16px;
}
.cta-block__form .lead-form__submit {
	min-height: 42px;
	width: 100%;
	font-size: 15px;
	border-radius: 8px;
}
/* Форма справа («Разработка»): поля 36 с шагом 42 */
.cta-block--form .cta-block__form .lead-form {
	gap: 8px;
}
.cta-block--form .cta-block__form .field input,
.cta-block--form .cta-block__form .field textarea {
	padding-block: 6px;
}
.cta-block__form .lead-form__status.is-ok {
	color: var(--c-accent);
}

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
	.cta-block--form-list .cta-block__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.cta-block--form-list .cta-block__list {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 1024px) {
	.cta-block__grid,
	.cta-block--button .cta-block__grid,
	.cta-block--button.cta-block--visual-photo .cta-block__grid,
	.cta-block--button.cta-block--visual-none .cta-block__grid,
	.cta-block--form .cta-block__grid,
	.cta-block--form.cta-block--visual-none .cta-block__grid,
	.cta-block--form-list .cta-block__grid {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		gap: 28px;
	}
	.cta-block__action {
		justify-items: start;
	}
	.cta-block__note {
		text-align: left;
	}
	.cta-block__photo,
	.cta-block--form .cta-block__photo {
		left: 0;
		right: 0;
		width: auto;
		opacity: 0.28;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.cta-block__spacer {
		display: none;
	}
	/* Телефон выше ноутбука — даём место, чтобы не наезжал на подпись под кнопкой */
	.cta-block__devices {
		padding-top: 36px;
	}
	.cta-block__devices .devices {
		margin-inline: 0;
	}
	.cta-block__form {
		max-width: 520px;
	}
	/* Палец: поля и кнопка не ниже 44–48 px, галочка согласия крупнее */
	.cta-block__form .field input,
	.cta-block--form .cta-block__form .field input {
		min-height: 46px;
		padding-block: 11px;
	}
	.cta-block__form .field textarea,
	.cta-block--form .cta-block__form .field textarea {
		min-height: 46px;
		padding-block: 11px;
	}
	.cta-block__form .lead-form__submit {
		min-height: 50px;
	}
	.cta-block__form .consent {
		font-size: 13px;
		padding-block: 4px;
	}
	.cta-block__form .consent input {
		width: 22px;
		height: 22px;
	}
}
@media (max-width: 640px) {
	.section.cta-block {
		padding: 44px 0;
	}
	.cta-block__text {
		font-size: 15px;
		line-height: 1.55;
	}
	.cta-block__action,
	.cta-block__btn {
		width: 100%;
	}
	.cta-block__btn {
		min-width: 0;
	}
	.cta-block__action {
		justify-items: stretch;
	}
	.cta-block__note {
		text-align: center;
	}
	.cta-block--form-list .cta-block__list {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.cta-block__list li {
		font-size: 15px;
	}
}
/* Планшет: форма на всю ширину контейнера (была ≈70 %, справа пусто); ноутбук под кнопкой — по центру
   и меньше. Телефон: ноутбук в призыве без фона-сцены скрыт — под кнопкой оставалось много пустого места */
@media (min-width: 641px) and (max-width: 1024px) {
	.cta-block__form {
		max-width: none;
	}
	.cta-block--visual-devices .cta-block__devices .devices {
		max-width: 440px;
		margin-inline: auto;
	}
}
@media (max-width: 640px) {
	.cta-block--visual-devices:not(.cta-block--with-bg) .cta-block__devices {
		display: none;
	}
}