/* =========================================================
   JB IT SOLUTIONS — HOMEPAGE ACHTERGRONDRITME

   1. Hero                         donkergrijs
   2. Voor organisaties            lichtgrijs
   3. Onze diensten                donkergrijs
   4. Persoonlijk aanspreekpunt    lichtgrijs
   5. Duidelijke afspraken         donkergrijs
   6. Footer                       extra donker
   ========================================================= */

/* =========================================================
   ALGEMENE CORRECTIES
   ========================================================= */

body.home .jb-site-main {
	margin: 0;
	padding: 0;
}

body.home .jb-site-main > section {
	width: 100%;
	max-width: none;
	margin: 0;
}

body.home .jb-audiences,
body.home .jb-home-services,
body.home .jb-services-home,
body.home .jb-personal,
body.home .home-personal,
body.home .jb-final-cta {
	width: 100%;
	margin: 0;
}

/* =========================================================
   1. HERO — DONKERGRIJS

   De bestaande hero-opmaak blijft behouden.
   Deze regels bewaken alleen de donkere achtergrond.
   ========================================================= */

body.home .jb-home-hero {
	background-color: #1c2226 !important;
}

/* =========================================================
   2. VOOR ORGANISATIES EN PARTICULIEREN — LICHTGRIJS
   ========================================================= */

body.home .jb-audiences {
	position: relative;
	color: #1c2226;
	border-top: 1px solid rgba(56, 62, 66, 0.08);
	border-bottom: 1px solid rgba(56, 62, 66, 0.09);
	background-color: #eef1f3 !important;
	background-image:
		radial-gradient(
			circle at 8% 20%,
			rgba(255, 140, 0, 0.09),
			transparent 29%
		),
		radial-gradient(
			circle at 92% 76%,
			rgba(56, 62, 66, 0.04),
			transparent 26%
		),
		linear-gradient(
			180deg,
			#f3f5f6 0%,
			#e9edef 100%
		) !important;
}

/* Kop donker op lichte achtergrond */

body.home .jb-audiences .jb-audiences__title,
body.home .jb-audiences h2.jb-audiences__title {
	color: #1c2226 !important;
}

body.home .jb-audiences .jb-audiences__intro {
	color: #566067 !important;
}

body.home .jb-audiences .jb-audiences__eyebrow {
	color: #ff8c00 !important;
}

/* Decoratieve cirkels */

body.home .jb-audiences::before {
	border-color: rgba(56, 62, 66, 0.08);
}

body.home .jb-audiences::after {
	border-color: rgba(255, 140, 0, 0.14);
}

/* Beide doelgroepkaarten licht houden */

body.home .jb-audiences .jb-audience-card {
	border-color: rgba(56, 62, 66, 0.14);
	background:
		linear-gradient(
			145deg,
			#ffffff 0%,
			#f2f4f5 100%
		) !important;
	box-shadow:
		0 22px 55px rgba(31, 36, 40, 0.12);
}

body.home .jb-audiences .jb-audience-card:hover,
body.home .jb-audiences .jb-audience-card:focus-within {
	border-color: rgba(255, 140, 0, 0.78);
	box-shadow:
		0 30px 70px rgba(31, 36, 40, 0.18);
}

/* =========================================================
   3. ONZE DIENSTEN — DONKERGRIJS

   Ondersteunt beide classnamen die tijdens de bouw
   voor deze sectie zijn gebruikt.
   ========================================================= */

body.home .jb-home-services,
body.home .jb-services-home {
	position: relative;
	width: 100%;
	color: #ffffff;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	background-color: #2b3135 !important;
	background-image:
		radial-gradient(
			circle at 10% 18%,
			rgba(255, 140, 0, 0.18),
			transparent 30%
		),
		radial-gradient(
			circle at 91% 78%,
			rgba(255, 140, 0, 0.07),
			transparent 26%
		),
		linear-gradient(
			135deg,
			#252b2f 0%,
			#30363a 52%,
			#383e42 100%
		) !important;
}

/* Koppen en intro wit */

body.home .jb-services-home .jb-services-home__eyebrow,
body.home .jb-home-services .jb-eyebrow {
	color: #ff8c00 !important;
}

body.home .jb-services-home .jb-services-home__title,
body.home .jb-services-home h2,
body.home .jb-home-services .jb-home-services__intro h2,
body.home .jb-home-services h2 {
	color: #ffffff !important;
}

body.home .jb-services-home .jb-services-home__intro,
body.home .jb-services-home .jb-services-home__header p,
body.home .jb-home-services .jb-home-services__lead {
	color: rgba(255, 255, 255, 0.72) !important;
}

/* Dienstenkaarten licht op donkere achtergrond */

body.home .jb-services-home .jb-services-home__card,
body.home .jb-home-services .jb-service-card {
	color: #1c2226;
	border-color: rgba(255, 255, 255, 0.19);
	background:
		linear-gradient(
			145deg,
			#ffffff 0%,
			#eef1f3 100%
		) !important;
	box-shadow:
		0 18px 44px rgba(10, 14, 17, 0.26);
}

body.home .jb-services-home .jb-services-home__card:hover,
body.home .jb-services-home .jb-services-home__card:focus-within,
body.home .jb-home-services .jb-service-card:hover,
body.home .jb-home-services .jb-service-card:focus-within {
	border-color: rgba(255, 140, 0, 0.9);
	background: #ffffff !important;
	box-shadow:
		0 26px 58px rgba(10, 14, 17, 0.34);
}

/* Titels in de dienstenkaarten donker houden */

body.home .jb-services-home .jb-services-home__card-title,
body.home .jb-services-home .jb-services-home__card-title a,
body.home .jb-home-services .jb-service-card__title,
body.home .jb-home-services .jb-service-card__title a,
body.home .jb-home-services .jb-service-card__content h3,
body.home .jb-home-services .jb-service-card__content h3 a {
	color: #1c2226 !important;
}

/* Omschrijving in de dienstenkaarten */

body.home .jb-services-home .jb-services-home__description,
body.home .jb-home-services .jb-service-card__desc,
body.home .jb-home-services .jb-service-card__content p {
	color: #59636a !important;
}

/* Onderste links donker */

body.home .jb-services-home .jb-services-home__link,
body.home .jb-home-services .jb-service-card__link {
	color: #1c2226 !important;
}

/* Knop onder de kaarten zichtbaar maken */

body.home .jb-services-home .jb-services-home__button,
body.home .jb-home-services .jb-button {
	border-color: rgba(255, 255, 255, 0.62);
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.05);
}

body.home .jb-services-home .jb-services-home__button:hover,
body.home .jb-home-services .jb-button:hover {
	border-color: #ff8c00;
	color: #1c2226 !important;
	background: #ff8c00;
}

/* =========================================================
   4. PERSOONLIJK AANSPREEKPUNT — LICHTGRIJS
   ========================================================= */

body.home .jb-personal,
body.home .home-personal {
	position: relative;
	width: 100%;
	color: #1c2226;
	border-top: 1px solid rgba(56, 62, 66, 0.07);
	border-bottom: 1px solid rgba(56, 62, 66, 0.08);
	background-color: #eef1f3 !important;
	background-image:
		radial-gradient(
			circle at 18% 42%,
			rgba(255, 140, 0, 0.08),
			transparent 28%
		),
		radial-gradient(
			circle at 94% 18%,
			rgba(56, 62, 66, 0.04),
			transparent 24%
		),
		linear-gradient(
			180deg,
			#f3f5f6 0%,
			#e9edef 100%
		) !important;
}

/* Kop en tekst donker houden */

body.home .jb-personal .jb-personal__title,
body.home .home-personal .home-personal__content h2 {
	color: #1c2226 !important;
}

body.home .jb-personal .jb-personal__intro,
body.home .home-personal .home-personal__content p {
	color: #566067 !important;
}

/* =========================================================
   5. DUIDELIJKE AFSPRAKEN — DONKERGRIJS OVER VOLLE BREEDTE
   ========================================================= */

body.home .jb-final-cta {
	position: relative;
	width: 100%;
	color: #ffffff;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	background-color: #2b3135 !important;
	background-image:
		radial-gradient(
			circle at 12% 16%,
			rgba(255, 140, 0, 0.19),
			transparent 31%
		),
		radial-gradient(
			circle at 90% 80%,
			rgba(255, 140, 0, 0.07),
			transparent 25%
		),
		linear-gradient(
			135deg,
			#252b2f 0%,
			#30363a 52%,
			#383e42 100%
		) !important;
}

/*
 * Het centrale paneel blijft zichtbaar, maar wordt iets
 * lichter dan de websitebrede achtergrond.
 */

body.home .jb-final-cta .jb-final-cta__panel {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.11);
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.075) 0%,
			rgba(255, 255, 255, 0.035) 100%
		) !important;
	box-shadow:
		0 26px 65px rgba(10, 14, 17, 0.25);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Koppen expliciet wit */

body.home .jb-final-cta .jb-final-cta__title,
body.home .jb-final-cta .jb-final-cta__contact-title,
body.home .jb-final-cta h2,
body.home .jb-final-cta h3 {
	color: #ffffff !important;
}

body.home .jb-final-cta .jb-final-cta__intro,
body.home .jb-final-cta .jb-final-cta__contact-text {
	color: rgba(255, 255, 255, 0.72) !important;
}

/* Decoratieve cirkels geschikt voor donker */

body.home .jb-final-cta::before {
	border-color: rgba(255, 255, 255, 0.055);
}

body.home .jb-final-cta::after {
	border-color: rgba(255, 140, 0, 0.14);
}

/* =========================================================
   6. FOOTER — EXTRA DONKER
   ========================================================= */

body.home .jb-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	background-color: #1b2024 !important;
	background-image:
		linear-gradient(
			180deg,
			#20262a 0%,
			#181d21 100%
		) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
	body.home .jb-audiences,
	body.home .jb-home-services,
	body.home .jb-services-home,
	body.home .jb-personal,
	body.home .home-personal,
	body.home .jb-final-cta {
		background-attachment: scroll;
	}
}

@media (max-width: 600px) {
	body.home .jb-home-services,
	body.home .jb-services-home,
	body.home .jb-final-cta {
		background-image:
			linear-gradient(
				180deg,
				#292f33 0%,
				#343a3e 100%
			) !important;
	}
}

/* =========================================================
   VERMINDERDE BEWEGING
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	body.home .jb-audiences,
	body.home .jb-home-services,
	body.home .jb-services-home,
	body.home .jb-personal,
	body.home .home-personal,
	body.home .jb-final-cta {
		background-attachment: scroll;
	}
}