/* =============================================================
   PIARNYA — Hero Section (ВЕТКА: white-hero)
   Белый фон · градиент как акцент · editorial-premium стиль
   Зависит от: variables.css, base.css
   ============================================================= */

/* ── СЕКЦИЯ ─────────────────────────────────────────────────── */
.hero {
	position: relative;
	min-height: max(560px, calc(100svh - var(--header-total-h)));
	background: var(--color-bg);
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Декоративный blob — маджента, правый верх */
.hero::before {
	content: '';
	position: absolute;
	top: -25%;
	right: -8%;
	width: 55%;
	height: 110%;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at center,
		rgba(204, 31, 160, .09)  0%,
		rgba(123, 47, 190, .06) 45%,
		transparent             70%
	);
	pointer-events: none;
}

/* Декоративный blob — бирюза, левый низ */
.hero::after {
	content: '';
	position: absolute;
	bottom: -20%;
	left: -8%;
	width: 45%;
	height: 80%;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at center,
		rgba(0, 200, 212, .07)   0%,
		transparent             65%
	);
	pointer-events: none;
}

/* ── СЕТКА ──────────────────────────────────────────────────── */
.hero__inner {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: var(--sp-12);
	align-items: center;
	padding-block: clamp(var(--sp-16), 8vh, var(--sp-24));
	position: relative;
	z-index: 1;
}

/* ── EYEBROW ────────────────────────────────────────────────── */
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-bottom: var(--sp-6);
	max-width: none;
	/* pill-бейдж с градиентной обводкой */
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--radius-full);
	background:
		linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
		var(--gradient-brand) border-box;
	border: 1.5px solid transparent;
}

.hero__eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--_magenta-500);
	flex-shrink: 0;
	box-shadow: 0 0 6px var(--_magenta-400);
}

/* ── ЗАГОЛОВОК ──────────────────────────────────────────────── */
.hero__title {
	font-size: clamp(var(--text-4xl), 5.5vw, var(--text-6xl));
	line-height: 1.05;
	color: var(--color-text);
	margin-bottom: var(--sp-6);
	max-width: 14ch;
}

/* Акцентное слово — фирменный градиент */
.hero__title-highlight {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ── ПОДЗАГОЛОВОК ───────────────────────────────────────────── */
.hero__subtitle {
	font-size: clamp(var(--text-base), 1.3vw, var(--text-lg));
	line-height: var(--leading-normal);
	color: var(--color-text-muted);
	margin-bottom: var(--sp-10);
	max-width: 44ch;
}

/* ── КНОПКИ ─────────────────────────────────────────────────── */
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	margin-bottom: var(--sp-12);
}

/* Основная: градиентная (из base.css .btn) */
.hero__btn-primary {
	box-shadow: var(--shadow-lg);
}

.hero__btn-primary:hover {
	transform: translateY(-2px);
	box-shadow:
		0 20px 56px rgba(123, 47, 190, .22),
		0 8px 20px rgba(0, 0, 0, .1);
}

.hero__btn-icon {
	flex-shrink: 0;
	transition: transform var(--dur-base) var(--ease);
}

.hero__btn-primary:hover .hero__btn-icon {
	transform: translateX(4px);
}

/* Вторичная: из base.css .btn--outline */

/* Третичная — текстовая ссылка */
.btn--text {
	background: transparent;
	color: var(--color-text-muted);
	padding-inline: 0;
	min-height: auto;
	text-underline-offset: 4px;
	font-weight: 500;
	transition: color var(--dur-base) var(--ease);
}

.btn--text:hover {
	color: var(--color-primary);
	background: transparent;
	transform: none;
	box-shadow: none;
}

/* ── ЦИФРЫ ──────────────────────────────────────────────────── */
.hero__stats {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
}

.hero__stat {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.hero__stat-value {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--color-text);
	line-height: 1;
}

.hero__stat-label {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: .07em;
}

.hero__stat-sep {
	display: block;
	width: 1px;
	height: 36px;
	background: var(--color-border-2);
	flex-shrink: 0;
}

/* ── ВИЗУАЛ (правая колонка) ────────────────────────────────── */
.hero__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Точечная подложка */
.hero__visual::before {
	content: '';
	position: absolute;
	inset: -24px;
	background-image: radial-gradient(
		circle,
		var(--color-border) 1px,
		transparent 1px
	);
	background-size: 20px 20px;
	pointer-events: none;
	opacity: .7;
}

/* Карточка с градиентной рамкой */
.hero__visual-card {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-xl);
	/* Градиентная рамка через background layering */
	background:
		linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
		var(--gradient-brand) border-box;
	border: 2px solid transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	color: var(--color-text-subtle);
	text-align: center;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

/* Декоративный свет внутри */
.hero__visual-card::before {
	content: '';
	position: absolute;
	top: -30%;
	left: 20%;
	width: 60%;
	height: 60%;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba(204, 31, 160, .08) 0%,
		transparent 70%
	);
	pointer-events: none;
}

/* Иконка — градиентная */
.hero__visual-icon {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	opacity: .6;
}

.hero__visual-label {
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
	font-weight: 500;
	color: var(--color-text-subtle);
}

/* ── ПЕРЕХОД В БЕЛЫЙ ────────────────────────────────────────── */
/* На белом фоне переход не нужен */
.hero__fade {
	display: none;
}

/* ── АДАПТИВ ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: var(--sp-10);
	}

	.hero__eyebrow {
		justify-content: center;
	}

	.hero__title {
		max-width: none;
	}

	.hero__subtitle {
		max-width: none;
	}

	.hero__actions {
		justify-content: center;
	}

	.hero__stats {
		justify-content: center;
	}

	.hero__visual {
		max-width: 480px;
		margin-inline: auto;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.hero__title {
		font-size: clamp(var(--text-3xl), 9vw, var(--text-4xl));
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.hero__stats {
		gap: var(--sp-4);
	}

	.hero__stat-label {
		font-size: 10px;
		letter-spacing: .04em;
	}

	.hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__actions .btn {
		justify-content: center;
	}

	.hero__stats {
		gap: var(--sp-5);
	}
}