/* ==========================================================================
   Schoonvermogen — Robots Overview Page Stylesheet
   Reuses tokens, .container, .btn, .eyebrow, .section-title, .checklist,
   .link-arrow and .section-header from assets/css/home.css. Only
   Robots-page-only layout lives here, scoped under .robots-page /
   .robots-* section classes so nothing here can affect other pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared page-local button variant
   -------------------------------------------------------------------------- */
/* .btn--outline-dark is only used on this page today (the comparison
   section's secondary CTA on a light background). It extends the shared
   .btn base from home.css rather than duplicating it — if a future page
   needs the same variant, promote this rule into home.css instead of
   redefining it a second time. */
.btn--outline-dark {
	background: transparent;
	color: var(--primary);
	border: 1.5px solid var(--grey-border);
}

.btn--outline-dark:hover {
	border-color: var(--primary);
	background: var(--grey-light);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
.robots-hero {
	position: relative;
	min-height: clamp(520px, 60vw, 700px);
	display: flex;
	align-items: center;
	background: var(--primary);
	overflow: hidden;
}

.robots-hero__media { position: absolute; inset: 0; z-index: 0; }
.robots-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.robots-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(1,2,66,0.92) 15%, rgba(1,2,66,0.6) 45%, rgba(1,2,66,0.15) 78%);
	z-index: 0;
}

.robots-hero__content { position: relative; z-index: 1; max-width: 600px; }

.robots-hero__title {
	font-size: clamp(30px, 3.8vw, 44px);
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--white);
	line-height: 1.16;
	margin-bottom: 16px;
}

.robots-hero__description {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text-light);
	max-width: 440px;
	margin-bottom: 12px;
}

.robots-hero__audience {
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-light);
	max-width: 440px;
	margin-bottom: 30px;
}

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

.robots-hero__scroll-indicator {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 1;
	width: 26px;
	height: 42px;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--radius-pill);
	display: flex;
	justify-content: center;
	padding-top: 8px;
}

.robots-hero__scroll-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--accent);
	animation: robots-scroll-dot 1.8s ease-in-out infinite;
}

@keyframes robots-scroll-dot {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(10px); opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
	.robots-hero__scroll-dot { animation: none; }
}

/* --------------------------------------------------------------------------
   3. Selector (SV1 / SV2 cards)
   -------------------------------------------------------------------------- */
.robots-selector { padding-block: var(--section-pad); }

.robots-selector__intro {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text-body);
	margin-top: 14px;
}

.robots-selector__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: clamp(32px, 5vw, 56px);
	align-items: stretch;
}

.robot-select-card {
	border-radius: var(--radius-large);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.robot-select-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); }

.robot-select-card--dark {
	background: linear-gradient(155deg, var(--primary) 0%, #061759 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.robot-select-card--light {
	background: var(--white);
	border: 1px solid var(--grey-border);
}

.robot-select-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.robot-select-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.robot-select-card:hover .robot-select-card__media img { transform: scale(1.025); }

.robot-select-card__body { padding: 28px; display: flex; flex-direction: column; flex: 1; }

.robot-select-card__title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.robot-select-card--dark .robot-select-card__title { color: var(--white); }
.robot-select-card--light .robot-select-card__title { color: var(--primary); }

.robot-select-card__subtitle { font-size: 13.5px; margin-bottom: 22px; }
.robot-select-card--dark .robot-select-card__subtitle { color: var(--text-light); }
.robot-select-card--light .robot-select-card__subtitle { color: var(--text-muted); }

.robot-select-card__features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 16px;
	margin-bottom: 26px;
}

.robot-select-card__features li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.robot-select-card--dark .robot-select-card__features li { color: var(--text-light-strong); }
.robot-select-card--light .robot-select-card__features li { color: var(--primary); }

.robot-select-card__feature-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.robot-select-card--dark .robot-select-card__feature-icon { color: var(--accent); }
.robot-select-card--light .robot-select-card__feature-icon { color: var(--accent-dark); }

.robot-select-card__body .btn { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   4. Comparison
   -------------------------------------------------------------------------- */
.robots-comparison { background: var(--grey-light); padding-block: var(--section-pad); }

.robots-comparison__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.robots-comparison__text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text-body);
	margin-block: 16px 26px;
	max-width: 340px;
}

.robots-comparison__table-wrap {
	background: var(--white);
	border: 1px solid var(--grey-border);
	border-radius: var(--radius-medium);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.robots-comparison__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
}

.robots-comparison__table thead th {
	background: var(--primary);
	color: var(--white);
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 16px 22px;
}

.robots-comparison__table thead th:first-child { border-top-left-radius: var(--radius-medium); }
.robots-comparison__table thead th:last-child { border-top-right-radius: var(--radius-medium); }

.robots-comparison__table tbody th {
	text-align: left;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--primary);
	padding: 14px 22px;
	white-space: nowrap;
}

.robots-comparison__table tbody td {
	font-size: 13.5px;
	color: var(--text-body);
	padding: 14px 22px;
}

.robots-comparison__table tbody tr:not(:last-child) th,
.robots-comparison__table tbody tr:not(:last-child) td {
	border-bottom: 1px solid var(--grey-border);
}

.robots-comparison__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-dark);
}

/* --------------------------------------------------------------------------
   5. Applications
   -------------------------------------------------------------------------- */
.robots-applications { padding-block: var(--section-pad); }

.robots-applications__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.robots-app-card {
	display: block;
	border-radius: var(--radius-medium);
	overflow: hidden;
	border: 1px solid var(--grey-border);
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.robots-app-card:hover,
.robots-app-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-medium); }

.robots-app-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.robots-app-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.robots-app-card:hover .robots-app-card__media img,
.robots-app-card:focus-visible .robots-app-card__media img { transform: scale(1.05); }

.robots-app-card__body {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--white);
}

.robots-app-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(22, 197, 235, 0.1);
	color: var(--accent-dark);
	flex-shrink: 0;
}

.robots-app-card__text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.robots-app-card__text strong { font-size: 14px; font-weight: 700; color: var(--primary); }
.robots-app-card__text span { font-size: 12px; color: var(--text-muted); }

.robots-app-card__arrow {
	color: var(--accent-dark);
	font-weight: 700;
	transition: transform 0.25s var(--ease);
	flex-shrink: 0;
}

.robots-app-card:hover .robots-app-card__arrow,
.robots-app-card:focus-visible .robots-app-card__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Cleaning companies
   -------------------------------------------------------------------------- */
.robots-cleaning-companies { background: var(--primary); }

.robots-cleaning-companies__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	min-height: clamp(440px, 42vw, 580px);
}

.robots-cleaning-companies__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 5vw, 80px) clamp(24px, 5vw, 72px);
}

.robots-cleaning-companies__text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text-light);
	max-width: 480px;
}

.robots-cleaning-companies__text + .robots-cleaning-companies__text { margin-top: 12px; }

.robots-cleaning-companies__list { margin-block: 22px 28px; }
.robots-cleaning-companies__list .checklist__item { color: var(--white); }
.robots-cleaning-companies__list .checklist__icon { color: var(--accent); }

.robots-cleaning-companies__media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   7. Technology
   -------------------------------------------------------------------------- */
.robots-technology { padding-block: var(--section-pad); background: var(--grey-light); }

.robots-technology__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}

.robots-technology__text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text-body);
	max-width: 460px;
	margin-block: 14px 30px;
}

.robots-technology__features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px 20px;
}

.robots-feature { display: flex; align-items: flex-start; gap: 10px; }

.robots-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-dark);
	flex-shrink: 0;
	margin-top: 1px;
}

.robots-feature__text { display: flex; flex-direction: column; gap: 2px; }
.robots-feature__text strong { font-size: 13.5px; font-weight: 700; color: var(--primary); }
.robots-feature__text span { font-size: 12px; color: var(--text-muted); }

.robots-technology__media {
	border-radius: var(--radius-large);
	overflow: hidden;
	box-shadow: var(--shadow-medium);
}

.robots-technology__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   8. Personal advice
   -------------------------------------------------------------------------- */
.robots-advice__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: stretch;
	min-height: clamp(380px, 38vw, 500px);
}

.robots-advice__media img { width: 100%; height: 100%; object-fit: cover; }

.robots-advice__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(40px, 5vw, 80px) clamp(24px, 5vw, 72px);
}

.robots-advice__text {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--text-body);
	max-width: 440px;
	margin-block: 16px 28px;
}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.robots-faq { padding-block: var(--section-pad); }

.robots-faq__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 20px;
	align-items: start;
}

.robots-faq-item {
	background: var(--white);
	border: 1px solid var(--grey-border);
	border-radius: var(--radius-small);
	overflow: hidden;
}

.robots-faq-item__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	text-align: left;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--primary);
}

.robots-faq-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--grey-light);
	color: var(--primary);
	flex-shrink: 0;
	transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.robots-faq-item.is-open .robots-faq-item__icon {
	transform: rotate(45deg);
	background: var(--accent);
	color: var(--primary);
}

.robots-faq-item__answer {
	padding: 0 22px 20px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--text-body);
}

/* --------------------------------------------------------------------------
   10. Final CTA
   -------------------------------------------------------------------------- */
.robots-final-cta {
	position: relative;
	min-height: clamp(320px, 32vw, 420px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--primary);
}

.robots-final-cta__media { position: absolute; inset: 0; z-index: 0; }
.robots-final-cta__media img { width: 100%; height: 100%; object-fit: cover; }

.robots-final-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(1,2,66,0.92) 25%, rgba(1,2,66,0.55) 60%, rgba(1,2,66,0.15) 90%);
	z-index: 0;
}

.robots-final-cta__content { position: relative; z-index: 1; max-width: 560px; }

.robots-final-cta__text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text-light);
	max-width: 440px;
	margin-block: 14px 28px;
}

.robots-final-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   11. Responsive — Tablet (≤ 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.robots-hero { min-height: auto; padding-block: clamp(72px, 12vw, 120px) 72px; }
	.robots-hero__content { max-width: 560px; }

	.robots-selector__grid { grid-template-columns: 1fr; }

	.robots-comparison__grid { grid-template-columns: 1fr; }

	.robots-applications__grid { grid-template-columns: repeat(2, 1fr); }

	.robots-cleaning-companies__grid { grid-template-columns: 1fr; }
	.robots-cleaning-companies__media img { aspect-ratio: 16/9; }

	.robots-technology__grid { grid-template-columns: 1fr; }
	.robots-technology__media img { aspect-ratio: 16/9; }

	.robots-advice__grid { grid-template-columns: 1fr; }
	.robots-advice__media img { aspect-ratio: 16/9; }

	.robots-faq__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   12. Responsive — Mobile (≤ 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.robots-hero__actions { flex-direction: column; align-items: stretch; }
	.robots-hero__actions .btn { justify-content: center; }

	.robot-select-card__features { grid-template-columns: 1fr; }

	.robots-applications__grid { grid-template-columns: 1fr 1fr; }

	.robots-comparison__table { min-width: 480px; }

	.robots-technology__features { grid-template-columns: 1fr; }

	.robots-final-cta__actions { flex-direction: column; align-items: stretch; }
	.robots-final-cta__actions .btn { justify-content: center; }
}

@media (max-width: 420px) {
	.robots-applications__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   1. HERO — compacter en krachtiger
   -------------------------------------------------------------------------- */

.robots-hero {
	min-height: clamp(460px, 48vw, 590px);
}

.robots-hero__title {
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}


/* --------------------------------------------------------------------------
   2. ROBOT SELECTOR — iets compacter
   -------------------------------------------------------------------------- */

.robot-select-card__body {
	padding: 24px;
}

.robot-select-card__subtitle {
	line-height: 1.5;
	margin-bottom: 18px;
}


/* --------------------------------------------------------------------------
   3. VERGELIJKING — compact + duidelijke CTA
   -------------------------------------------------------------------------- */

.robots-comparison {
	padding-block: clamp(56px, 7vw, 88px);
}

.btn--outline-dark {
	background: var(--white);
	color: var(--primary);
	border: 1.5px solid var(--primary);
	box-shadow: 0 4px 14px rgba(1, 2, 66, 0.06);
}

.btn--outline-dark:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--white);
	transform: translateY(-2px);
}

.robots-comparison__table-wrap {
	overflow-x: hidden;
}

.robots-comparison__table {
	width: 100%;
	min-width: 0;
	table-layout: fixed;
}

.robots-comparison__table thead th {
	padding: 14px 16px;
	line-height: 1.3;
}

.robots-comparison__table tbody th {
	padding: 14px 16px;
	white-space: normal;
	line-height: 1.35;
}

.robots-comparison__table tbody td {
	padding: 14px 16px;
	line-height: 1.35;
}


/* --------------------------------------------------------------------------
   4. NIEUWE KANS / REINIGINGSBEDRIJVEN
   Veel minder hoog
   -------------------------------------------------------------------------- */

.robots-cleaning-companies__grid {
	min-height: clamp(340px, 32vw, 430px);
}

.robots-cleaning-companies__content {
	padding: clamp(34px, 4vw, 56px) clamp(24px, 5vw, 64px);
}

.robots-cleaning-companies__content .btn {
	align-self: flex-start;
	width: auto;
}


/* --------------------------------------------------------------------------
   5. TECHNOLOGIE — iets compacter
   -------------------------------------------------------------------------- */

.robots-technology {
	padding-block: clamp(56px, 7vw, 88px);
}


/* --------------------------------------------------------------------------
   6. PERSOONLIJK ADVIES — minder hoog + korte CTA
   -------------------------------------------------------------------------- */

.robots-advice__grid {
	min-height: clamp(320px, 30vw, 400px);
}

.robots-advice__content {
	padding: clamp(34px, 4vw, 56px) clamp(24px, 5vw, 64px);
}

.robots-advice__content .btn {
	align-self: flex-start;
	width: auto;
}


/* --------------------------------------------------------------------------
   7. FINAL CTA — compacter
   -------------------------------------------------------------------------- */

.robots-final-cta {
	min-height: clamp(280px, 28vw, 360px);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1024px) {

	/* Extra ruimte onder hero-content voor scroll indicator */
	.robots-hero {
		min-height: auto;
		padding-top: clamp(72px, 12vw, 120px);
		padding-bottom: 110px;
	}

	/* Split-secties mogen mobiel/tablet hun eigen hoogte bepalen */
	.robots-cleaning-companies__grid,
	.robots-advice__grid {
		min-height: 0;
	}
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

	/* Hero */
	.robots-hero__title {
		font-size: clamp(31px, 9vw, 38px);
	}

	.robots-hero__scroll-indicator {
		bottom: 26px;
	}

	/* Robotkaarten */
	.robot-select-card__body {
		padding: 22px;
	}

	/* Vergelijking volledig binnen scherm */
	.robots-comparison__table {
		width: 100%;
		min-width: 0;
		table-layout: fixed;
	}

	.robots-comparison__table thead th,
	.robots-comparison__table tbody th,
	.robots-comparison__table tbody td {
		font-size: 11px;
		padding: 10px 7px;
		overflow-wrap: anywhere;
		word-break: normal;
	}

	.robots-comparison__table thead th:first-child,
	.robots-comparison__table tbody th {
		width: 42%;
	}

	.robots-comparison__table thead th:nth-child(2),
	.robots-comparison__table thead th:nth-child(3) {
		width: 29%;
	}

	.robots-comparison__table-wrap {
		overflow-x: hidden;
	}

	/* Nieuwe kans — betere verticale ruimte */
	.robots-cleaning-companies__content {
		padding: 44px 24px;
	}

	.robots-cleaning-companies__content .eyebrow {
		margin-bottom: 10px;
	}

	.robots-cleaning-companies__content .section-title {
		margin-bottom: 18px;
	}

	.robots-cleaning-companies__text + .robots-cleaning-companies__text {
		margin-top: 14px;
	}

	.robots-cleaning-companies__list {
		margin-block: 24px 26px;
	}

	.robots-cleaning-companies__content .btn {
		align-self: flex-start;
		width: auto;
	}

	/* Advies */
	.robots-advice__content {
		padding: 44px 24px;
	}

	.robots-advice__content .btn {
		align-self: flex-start;
		width: auto;
	}
}

/* ==========================================================================
   ROBOTS — ACTUAL FINAL LAYOUT FIX
   ========================================================================== */


/* =========================================================
   HERO — muis exact onder het midden van BEIDE buttons
   ========================================================= */

.robots-hero__actions {
	position: relative !important;
}

.robots-hero__scroll-indicator {
	position: absolute !important;
	left: 50% !important;
	right: auto !important;
	top: calc(100% + 28px) !important;
	bottom: auto !important;
	transform: translateX(-50%) !important;
}


/* =========================================================
   TOEPASSINGEN — hele contentstrook iets breder
   ========================================================= */

.robots-applications .container {
	width: min(1320px, calc(100% - 64px)) !important;
	max-width: 1320px !important;
}

.robots-applications__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 22px !important;
}

.robots-app-card__media {
	aspect-ratio: 4 / 3 !important;
}

.robots-app-card__body {
	padding: 18px !important;
	min-height: 94px !important;
}

.robots-app-card__icon {
	width: 40px !important;
	height: 40px !important;
}

.robots-app-card__text strong {
	font-size: 15px !important;
}

.robots-app-card__text span {
	font-size: 12.5px !important;
	line-height: 1.45 !important;
}


/* "Bekijk alle oplossingen" direct weg */
.robots-applications .section-header > .link-arrow {
	display: none !important;
}


/* =========================================================
   NIEUWE KANS — desktop ECHT lager maken
   ========================================================= */

@media (min-width: 1025px) {

	.robots-cleaning-companies__grid {
		height: 410px !important;
		min-height: 410px !important;
		max-height: 410px !important;
		overflow: hidden !important;
	}

	.robots-cleaning-companies__content {
		height: 410px !important;
		box-sizing: border-box !important;
		padding: 26px 48px !important;
		justify-content: center !important;
		overflow: hidden !important;
	}

	.robots-cleaning-companies__content .eyebrow {
		margin-bottom: 7px !important;
	}

	.robots-cleaning-companies__content .section-title {
		font-size: 31px !important;
		line-height: 1.06 !important;
		margin-bottom: 9px !important;
		max-width: 690px !important;
	}

	.robots-cleaning-companies__text {
		font-size: 13.5px !important;
		line-height: 1.48 !important;
		max-width: 520px !important;
	}

	.robots-cleaning-companies__text + .robots-cleaning-companies__text {
		margin-top: 6px !important;
	}

	.robots-cleaning-companies__list {
		margin-top: 13px !important;
		margin-bottom: 15px !important;
	}

	.robots-cleaning-companies__list .checklist__item {
		margin-bottom: 5px !important;
		font-size: 13px !important;
	}

	.robots-cleaning-companies__content .btn {
		align-self: flex-start !important;
		width: auto !important;
		min-width: 0 !important;
		padding-top: 11px !important;
		padding-bottom: 11px !important;
	}

	.robots-cleaning-companies__media {
		height: 410px !important;
		min-height: 410px !important;
		max-height: 410px !important;
		overflow: hidden !important;
	}

	.robots-cleaning-companies__media img {
		display: block !important;
		width: 100% !important;
		height: 410px !important;
		min-height: 0 !important;
		max-height: 410px !important;
		aspect-ratio: auto !important;
		object-fit: cover !important;
	}
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.robots-cleaning-companies__grid,
	.robots-cleaning-companies__content,
	.robots-cleaning-companies__media {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.robots-cleaning-companies__content {
		padding: 42px 32px !important;
		overflow: visible !important;
	}

	.robots-cleaning-companies__media img {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		aspect-ratio: 16 / 9 !important;
		object-fit: cover !important;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

	/* genoeg ruimte onder buttons voor muis */
	.robots-hero {
		padding-bottom: 105px !important;
	}

	.robots-hero__actions {
		position: relative !important;
	}

	.robots-hero__scroll-indicator {
		left: 50% !important;
		top: calc(100% + 24px) !important;
		bottom: auto !important;
		transform: translateX(-50%) !important;
	}

	/* container niet kunstmatig verbreden */
	.robots-applications .container {
		width: calc(100% - 40px) !important;
		max-width: none !important;
	}

	.robots-applications__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	.robots-app-card__body {
		padding: 13px !important;
		min-height: 0 !important;
	}

	.robots-app-card__icon {
		width: 34px !important;
		height: 34px !important;
	}

	.robots-cleaning-companies__content {
		padding: 44px 24px !important;
	}
}

/* ==========================================================================
   ROBOTS — SMALL FINAL CORRECTIONS
   ========================================================================== */


/* ----------------------------------------------------------
   NIEUWE KANS — iets groter, maar nog steeds compact
   ---------------------------------------------------------- */

@media (min-width: 1025px) {

	.robots-cleaning-companies__grid {
		height: 500px !important;
		min-height: 500px !important;
		max-height: 500px !important;
	}

	.robots-cleaning-companies__content {
		height: 500px !important;
		padding-top: 46px !important;
		padding-bottom: 46px !important;
	}

	.robots-cleaning-companies__media {
		height: 500px !important;
		min-height: 500px !important;
		max-height: 500px !important;
	}

	.robots-cleaning-companies__media img {
		width: 100% !important;
		height: 500px !important;
		max-height: 500px !important;
		object-fit: cover !important;
		display: block !important;
	}
}


/* ----------------------------------------------------------
   HERO — button-groep alleen zo breed als de knoppen zelf
   Hierdoor wordt de muis ECHT tussen de twee buttons gezet.
   ---------------------------------------------------------- */

@media (min-width: 641px) {

	.robots-hero__actions {
		position: relative !important;
		display: flex !important;
		width: max-content !important;
		max-width: 100% !important;
	}

	.robots-hero__scroll-indicator {
		position: absolute !important;
		left: 50% !important;
		right: auto !important;
		top: calc(100% + 28px) !important;
		bottom: auto !important;
		transform: translateX(-50%) !important;
	}
}


/* ----------------------------------------------------------
   MOBIEL — normale volle knopbreedte behouden
   ---------------------------------------------------------- */

@media (max-width: 640px) {

	.robots-hero__actions {
		width: 100% !important;
	}

	.robots-hero__scroll-indicator {
		left: 50% !important;
		top: calc(100% + 24px) !important;
		transform: translateX(-50%) !important;
	}
}

/* ==========================================================
   ROBOTS — FINAL FIX: ADVICE + OTHER APPLICATION
   ========================================================== */


/* ----------------------------------------------------------
   ANDERE TOEPASSING — nette afsluitende regel
   ---------------------------------------------------------- */

.robots-applications__contact {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(8, 30, 66, 0.10);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	color: #53647a;
}

.robots-applications__contact strong {
	color: #102a4c;
	font-weight: 700;
}

.robots-applications__contact > span {
	color: #53647a;
}

.robots-applications__contact .link-arrow {
	margin-left: 4px;
	white-space: nowrap;
}


/* ----------------------------------------------------------
   PERSOONLIJK ADVIES — veel compacter
   ---------------------------------------------------------- */

@media (min-width: 1025px) {

	.robots-advice__grid {
		height: 470px !important;
		min-height: 470px !important;
		max-height: 470px !important;
	}

	.robots-advice__media {
		height: 470px !important;
		min-height: 470px !important;
		max-height: 470px !important;
		overflow: hidden !important;
	}

	.robots-advice__media img {
		display: block !important;
		width: 100% !important;
		height: 470px !important;
		min-height: 470px !important;
		max-height: 470px !important;
		object-fit: cover !important;
	}

	.robots-advice__content {
		height: 470px !important;
		min-height: 470px !important;
		max-height: 470px !important;
		box-sizing: border-box !important;
		padding-top: 50px !important;
		padding-bottom: 50px !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
	}
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 640px) {

	.robots-applications__contact {
		margin-top: 20px;
		padding-top: 18px;
		display: block;
		text-align: left;
	}

	.robots-applications__contact strong,
	.robots-applications__contact > span,
	.robots-applications__contact .link-arrow {
		display: block;
	}

	.robots-applications__contact > span {
		margin-top: 3px;
	}

	.robots-applications__contact .link-arrow {
		margin: 7px 0 0;
	}
}

/* ==========================================================
   ROBOTS HERO VIDEO — LEESBAARHEID FINAL
   ========================================================== */

.robots-hero__media {
	z-index: 0 !important;
}

/* Donkere navy laag over de bewegende video */
.robots-hero::before {
	content: '';
	position: absolute;
	inset: 0;

	z-index: 1 !important;

	background:
	linear-gradient(
		90deg,
		rgba(1, 2, 66, 0.88) 0%,
		rgba(1, 2, 66, 0.80) 28%,
		rgba(1, 2, 66, 0.62) 52%,
		rgba(1, 2, 66, 0.34) 76%,
		rgba(1, 2, 66, 0.16) 100%
	) !important;

	pointer-events: none;
}

/* Alle hero-content zeker boven de overlay */
.robots-hero__content {
	position: relative;
	z-index: 2 !important;
}

/* Teksten scherper op bewegend beeld */
.robots-hero__title {
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.robots-hero__description {
	color: rgba(255, 255, 255, 0.92) !important;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
}

.robots-hero__audience {
	color: rgba(255, 255, 255, 0.84) !important;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
}


/* Secundaire CTA beter zichtbaar */
.robots-hero .btn--outline-light {
	background: rgba(1, 2, 66, 0.34) !important;

	border-color: rgba(255, 255, 255, 0.72) !important;

	color: #ffffff !important;

	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.robots-hero .btn--outline-light:hover {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: #ffffff !important;
	color: #ffffff !important;
}


/* Eventuele scroll-indicator ook boven video-overlay */
.robots-hero__scroll-indicator {
	z-index: 3 !important;
}
@media (max-width: 768px) {
	.robots-hero__media video {
		object-position: 72% 78% !important;
	}
}