.pe-def,
.pe-def *,
.pe-def *::before,
.pe-def *::after {
	box-sizing: border-box;
}

.pe-def {
	--pe-grid-step: 120px;
	--pe-grid-ink: rgba(139, 139, 141, 0.105);
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 487px;
	margin: 0 calc(var(--pe-header-gutter, 40px) * -1);
	padding: 72px var(--pe-header-gutter, 40px);
	overflow: hidden;
	border-bottom: 1px solid #8b8b8d;
	background: #2b2b2f;
	color: #fff;
	font: 400 16px/1.55 Play, Arial, sans-serif;
	scroll-margin-top: 24px;
}

body:has(.pe-header.is-overlay) .pe-def {
	margin-inline: 0;
}

.pe-def__empty {
	margin: 0;
	padding: 24px;
	background: #2b2b2f;
	color: #fff;
}

.pe-def::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(90deg, var(--pe-grid-ink) 1px, transparent 1px),
		linear-gradient(0deg, var(--pe-grid-ink) 1px, transparent 1px);
	background-size: var(--pe-grid-step) var(--pe-grid-step);
}

.pe-def__art {
	position: absolute;
	inset: 0 0 0 58%;
	z-index: -1;
	overflow: hidden;
	isolation: isolate;
}

.pe-def__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.76;
}

.pe-def__art::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, #2b2b2f 0%, rgba(43, 43, 47, 0.86) 24%, rgba(43, 43, 47, 0.094) 88%),
		linear-gradient(0deg, rgba(43, 43, 47, 0.61), transparent 35%, transparent 70%, rgba(43, 43, 47, 0.4));
}

.pe-def__mark {
	position: absolute;
	top: 50%;
	right: 8%;
	z-index: 2;
	width: clamp(160px, min(19vw, 364.8px), 370px);
	height: auto;
	aspect-ratio: 10 / 12;
	color: #fff;
	opacity: 0.22;
	transform: translateY(-50%);
	pointer-events: none;
}

.pe-def__copy {
	position: relative;
	z-index: 1;
	width: 60%;
	max-width: 1040px;
}

.pe-def--reverse .pe-def__art {
	inset: 0 58% 0 0;
}

.pe-def--reverse .pe-def__art::after {
	background:
		linear-gradient(270deg, #2b2b2f 0%, rgba(43, 43, 47, 0.86) 24%, rgba(43, 43, 47, 0.094) 88%),
		linear-gradient(0deg, rgba(43, 43, 47, 0.61), transparent 35%, transparent 70%, rgba(43, 43, 47, 0.4));
}

.pe-def--reverse .pe-def__mark {
	right: auto;
	left: 8%;
}

.pe-def--reverse .pe-def__copy {
	margin-left: auto;
}

.pe-def--figure {
	display: block;
	align-items: stretch;
	min-height: 0;
	padding-block: clamp(28px, min(4vw, 76.8px), 88px);
	overflow: clip;
}

.pe-def--figure > h2 {
	position: relative;
	z-index: 1;
	width: min(100%, 72rem);
	margin-bottom: clamp(14px, min(2vw, 38.4px), 32px);
	font-size: clamp(28px, min(2.4vw + 1rem, calc(46.08px + 1rem)), 48px);
}

.pe-def--figure .pe-def__split {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, min(42vw, 52rem));
	gap: clamp(16px, min(3.2vw, 61.44px), 56px);
	align-items: start;
	width: 100%;
	max-width: 110rem;
}

.pe-def--figure .pe-def__copy {
	width: auto;
	max-width: none;
	min-width: 0;
}

.pe-def--figure .pe-def__text {
	max-width: none;
	margin-top: 0;
	font-size: clamp(15px, min(0.2vw + 14px, calc(3.84px + 14px)), 18px);
}

.pe-def--figure .pe-def__art {
	position: static;
	inset: auto;
	z-index: 1;
	width: 100%;
	max-width: min(100%, 52rem);
	margin: 0;
	line-height: 0;
	overflow: hidden;
	justify-self: end;
}

.pe-def--figure .pe-def__photo {
	position: static;
	inset: auto;
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1440 / 900;
	opacity: 1;
	object-fit: cover;
	object-position: center top;
}

.pe-def--figure .pe-def__art::after,
.pe-def--figure .pe-def__mark {
	display: none;
}

@media (max-width: 900px) {
	.pe-def--figure .pe-def__split {
		grid-template-columns: 1fr;
	}

	.pe-def--figure .pe-def__art {
		order: 2;
		justify-self: stretch;
		max-width: min(100%, 40rem);
		margin-inline: auto;
	}

	.pe-def--figure .pe-def__photo {
		aspect-ratio: 1440 / 860;
	}
}

@media (max-width: 480px) {
	.pe-def--figure {
		padding-block: 28px 24px;
		padding-inline: var(--pe-header-gutter, 16px);
	}

	.pe-def--figure .pe-def__art {
		max-width: 100%;
	}

	.pe-def--figure .pe-def__photo {
		aspect-ratio: 1440 / 820;
	}

	.pe-def--figure .pe-def__list {
		gap: 14px;
	}
}

@media (min-width: 1920px) {
	.pe-def--figure .pe-def__split {
		grid-template-columns: minmax(0, 1.15fr) minmax(28rem, 48rem);
	}
}

@media (min-width: 1921px) {
	body:has(.pe-header.is-overlay) .pe-def,
	.pe-def {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
	}

	.pe-def--figure .pe-def__split {
		max-width: none;
		width: 100%;
		padding-inline: 0;
	}

	.pe-def--figure > h2 {
		max-width: min(100%, 72rem);
	}
}

@media (min-width: 2560px) {
	.pe-def--figure .pe-def__split {
		grid-template-columns: minmax(0, 1.1fr) minmax(32rem, 56rem);
	}

	.pe-def--figure .pe-def__art {
		max-width: min(100%, 56rem);
	}

	.pe-def--figure .pe-def__photo {
		aspect-ratio: 1440 / 900;
	}
}

.pe-def h2 {
	margin: 0;
	max-width: 100%;
	color: #fff;
	font-family: Tektur, Play, sans-serif;
	font-size: 48px;
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -0.5px;
	text-wrap: balance;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.pe-def__text {
	max-width: 88ch;
	margin-top: 24px;
}

.pe-def p {
	margin: 0;
	font: 400 16px/1.55 Play, Arial, sans-serif;
}

.pe-def p + p {
	margin-top: 16px;
}

.pe-def__list {
	display: grid;
	gap: 20px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.pe-def__list li {
	position: relative;
	padding-left: 28px;
	font: 400 16px/1.55 Play, Arial, sans-serif;
}

.pe-def__bullet {
	position: absolute;
	top: 6px;
	left: 0;
	display: block;
	width: 10px;
	height: 12px;
	color: #fff;
	opacity: 0.8;
}

.pe-def__list strong {
	font-weight: 700;
}

.pe-def__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid rgba(139, 139, 141, 0.45);
}

.pe-def__links a {
	color: #bca0e8;
	font: 400 16px/1.4 Play, Arial, sans-serif;
	text-decoration: none;
}

.pe-def__links a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pe-def__links a:focus-visible {
	outline: 2px solid #7e33ff;
	outline-offset: 4px;
}

.pe-def__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 20px;
	margin-top: 28px;
}

.pe-def .pe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 45px;
	padding: 12px 26px;
	border: 1px solid #7e33ff;
	background: #7e33ff;
	color: #fff;
	font: 400 16px/1.3 Play, Arial, sans-serif;
	text-decoration: none;
}

.pe-def .pe-btn .pe-arrow {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.pe-def .pe-btn:hover {
	opacity: 0.86;
}

.pe-def .pe-btn:focus-visible {
	outline: 2px solid #7e33ff;
	outline-offset: 4px;
}

.pe-def__social {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pe-def__messenger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: inherit;
	background: transparent;
	text-decoration: none;
}

.pe-def__messenger svg {
	display: block;
	width: 23px;
	height: 23px;
	flex: 0 0 auto;
	pointer-events: none;
}

.pe-def__messenger:hover {
	background: rgba(154, 136, 175, 0.133);
}

.pe-def__messenger:focus-visible {
	outline: 2px solid #7e33ff;
	outline-offset: 4px;
}

@media (max-width: 1360px) {
	.pe-def h2 {
		font-size: 40px;
	}

	.pe-def__art {
		left: 54%;
	}
}

@media (max-width: 960px) {
	.pe-def {
		min-height: 520px;
		padding-block: 56px;
	}

	.pe-def h2 {
		font-size: 36px;
	}

	.pe-def__copy {
		width: 72%;
	}

	.pe-def__art {
		left: 57%;
	}

	.pe-def__mark {
		right: 4%;
		width: 160px;
	}
}

@media (max-width: 600px) {
	.pe-def {
		align-items: flex-start;
		min-height: 0;
		padding-top: 40px;
		padding-bottom: 244px;
	}

	/* Figure layout stacks art in flow — no reserved space for absolute photo. */
	.pe-def--figure {
		padding-top: 28px;
		padding-bottom: 24px;
	}

	.pe-def h2 {
		font-size: 28px;
		line-height: 1.2;
		text-wrap: pretty;
	}

	.pe-def__copy,
	.pe-def--reverse .pe-def__copy {
		width: 100%;
		max-width: none;
		margin-left: 0;
	}

	.pe-def__text {
		margin-top: 24px;
		max-width: none;
	}

	/* Beat .pe-def--reverse .pe-def__art { inset: 0 58% 0 0 } — full-width bottom photo. */
	.pe-def__art,
	.pe-def--reverse .pe-def__art,
	.pe-def--guarantees .pe-def__art {
		inset: auto 0 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 228px;
	}

	.pe-def__photo {
		object-position: center 54%;
		opacity: 0.65;
	}

	.pe-def__art::after,
	.pe-def--reverse .pe-def__art::after {
		background: linear-gradient(#2b2b2f, transparent 40%, rgba(43, 43, 47, 0.333));
	}

	.pe-def__mark,
	.pe-def--reverse .pe-def__mark {
		top: 52%;
		right: 10%;
		left: auto;
		width: 112px;
		opacity: 0.2;
	}
}

/* «Гарантии»: арт из референса (куб + play + чеклист) справа, 1:1. */
.pe-def--guarantees .pe-def__art {
	inset: 0 0 0 52%;
	z-index: 0;
}

.pe-def--guarantees .pe-def__photo {
	object-fit: contain;
	object-position: center right;
	opacity: 1;
}

.pe-def--guarantees .pe-def__art::after {
	/* Лёгкий переход в текст, без съедания куба. */
	background: linear-gradient(90deg, #2b2b2f 0%, rgba(43, 43, 47, 0.4) 8%, rgba(43, 43, 47, 0) 28%);
	pointer-events: none;
}

.pe-def--guarantees .pe-def__mark {
	display: none;
}

.pe-def--guarantees .pe-def__copy {
	width: min(55%, 720px);
}

@media (max-width: 960px) {
	.pe-def--guarantees .pe-def__art {
		left: 48%;
	}

	.pe-def--guarantees .pe-def__copy {
		width: min(58%, 640px);
	}
}

@media (max-width: 600px) {
	.pe-def--guarantees {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding-bottom: 0;
	}

	.pe-def--guarantees .pe-def__copy {
		order: 1;
		width: 100%;
		max-width: none;
		margin-left: 0;
	}

	.pe-def--guarantees .pe-def__art,
	.pe-def--guarantees.pe-def .pe-def__art {
		position: relative;
		inset: auto;
		left: 0;
		right: 0;
		order: 2;
		z-index: 0;
		width: calc(100% + var(--pe-header-gutter, 40px) * 2);
		height: auto;
		margin-inline: calc(var(--pe-header-gutter, 40px) * -1);
		aspect-ratio: 556 / 488;
	}

	.pe-def--guarantees .pe-def__photo {
		position: absolute;
		inset: 0;
		object-fit: contain;
		object-position: center;
		opacity: 1;
	}

	.pe-def--guarantees .pe-def__art::after {
		background: linear-gradient(#2b2b2f, transparent 32%);
	}
}