/* =========================================================
   Blok: hero (achtergrond + titel + CTA-knop)
   Selectors 1:1 overgenomen uit assets/css/pages/home.css (sectie "1. HERO"),
   zodat het blok zelfstandig op elke pagina werkt. Gebruikt uitsluitend
   bestaande --sellabees-* tokens. Zie BLOCKS-GUIDE.md.
   ========================================================= */
.sellabees-hero {
	position: relative;
	min-height: 585px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.sellabees-hero__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.sellabees-hero__overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, 0.25);
	z-index: 1;
}
.sellabees-hero__inner { position: relative; z-index: 2; width: 100%; }
.sellabees-hero__title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 80px;
	line-height: 1.0;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 28px;
}
.sellabees-hero__cta {
	display: inline-flex; align-items: center;
	height: 40px;
	background: var(--sellabees-red);   /* #dd2532, conform design */
	color: #fff;
	font-family: var(--sellabees-font-heading);
	text-transform: uppercase;
	font-size: 14px; letter-spacing: .03em;
	padding: 0 18px;
	border-radius: 0;                   /* rechte hoeken, conform design */
}
.sellabees-hero__cta:hover { background: var(--sellabees-red-dark); }

/* =========================================================
   RESPONSIVE (1:1 uit home.css)
   ========================================================= */
@media (max-width: 1100px) {
	.sellabees-hero__title { font-size: 60px; }
}

@media (max-width: 981px) {
	.sellabees-hero { min-height: 461px; }
	.sellabees-hero__title { font-size: 34px; margin-bottom: 20px; }
}