/* Hero — Figma: Hero (79:173) */
.hero {
	position: relative;
	padding-block: clamp(64px, 7.64vw, 110px) clamp(72px, 9.3vw, 134px);
	background: var(--color-dark) var(--hero-bg) center / cover no-repeat;
	color: var(--color-light);
	overflow: hidden;
}

.hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 56px;
}

.hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 31px;
	width: 100%;
	max-width: 521px;
}

.hero__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.hero__title-accent {
	display: block;
	color: var(--color-primary);
}

.hero__lead {
	max-width: 465px;
	color: var(--color-neutral-3);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.hero__btn {
	min-width: 226px;
}

.hero__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.hero__check {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--color-neutral-3);
}

/* Check Icon: 14×14 frame, glyph inset 23.44% 10.94% 23.44% 14.18% */
.hero__check-icon {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
}

.hero__check-icon > span {
	position: absolute;
	inset: 23.44% 10.94% 23.44% 14.18%;
}

.hero__check-icon img {
	width: 100%;
	height: 100%;
	max-width: none;
}

/* Tablet (stacked): everything centred above the diagram */
@media (min-width: 768px) and (max-width: 1279px) {
	.hero__text,
	.hero__heading,
	.hero__actions,
	.hero__checks {
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.hero__text {
		max-width: 600px;
	}

	/* Keep the Figma line breaks (Control your / industrial data.) */
	.hero__heading {
		max-width: 521px;
	}

	.hero__lead {
		max-width: 520px;
	}
}

@media (min-width: 1280px) {
	.hero__inner {
		flex-direction: row;
		justify-content: space-between;
		gap: 40px;
	}
}