/* ==========================================================================
   PlantScout — vase life landing page
   Design system overgenomen van plantscout.eu
   (plantscout-public-colors.css / plantscout-public2.css)

   1. Tokens
   2. Base
   3. Buttons, links, leaf
   4. Navbar
   5. Hero (main-slide)
   6. USP row
   7. Cards & sections
   8. Demo / contact
   9. Footer
   10. Responsive
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  /* Colors */
  --dark-color:     #242424;
  --text-light:     #fff;
  --primary-light:  #00c853;
  --light-hover:    #068e4f;
  --primary-dark:   #00733e;
  --dark-hover:     #015931;
  --tertiary-color: #053240;
  --grey-bg:        #f2f2f2;
  --grey-bg-soft:   #fafafa;
  --green-tint:     #3ac80026;

  /* Font/text values */
  --font-family-titles: "Baloo 2", cursive;
  --font-family-normal: Arial, Helvetica, sans-serif;
  --font-size-buttons: 18px;
  --font-size-nav: 19px;
  --font-size-normal: 19px;
  --font-size-card: 20px;
  --font-size-card-secondary-title: 30px;
  --font-size-card-tertiary-title: 22px;
  --font-size-heading-1: 40px;
  --font-size-footer-quote: 26px;

  --container: 1140px;
  --gutter: 15px;
  --navbar-h: 93px;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* 2. Base --------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-h) + 20px);
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-family-normal);
  font-size: var(--font-size-normal);
  color: var(--dark-color);
  background: #fff;
  max-width: 100%;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-family-titles);
  color: var(--dark-color);
  font-weight: 700;
  margin: 0;
}
h1, h2 { font-size: var(--font-size-heading-1); line-height: 50px; }
h3 { font-size: var(--font-size-card-secondary-title); line-height: 50px; }
h4 { font-size: var(--font-size-card-tertiary-title); line-height: 34px; }

p { margin: 0; line-height: 35px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.span-primary { color: var(--primary-light); }
.span-secondary { color: var(--primary-dark); }
.font-title { font-family: var(--font-family-titles); }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: 80px 0; }
.section-grey { background: var(--grey-bg-soft); }

.section-head { max-width: 760px; margin-bottom: 50px; }
.section-head p { margin-top: 15px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--primary-light);
  color: #fff;
  padding: 12px 20px;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 3px; }

/* 3. Buttons, links, leaf ----------------------------------------------- */
.ps-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 36px;
  border: none;
  border-radius: 50px;
  background: var(--primary-light);
  color: #fff;
  font-family: var(--font-family-titles);
  font-size: var(--font-size-buttons);
  font-weight: 500;
  line-height: 46px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s ease-in-out;
}
.ps-button:hover { background: var(--light-hover); color: #fff; }

.ps-button-demo { min-width: 213px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family-titles);
  font-weight: 700;
  font-size: var(--font-size-buttons);
  color: var(--primary-light);
  transition: color .3s ease-in-out;
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .3s ease-in-out; }
.link-arrow:hover { color: var(--light-hover); }
.link-arrow:hover svg { transform: translateX(4px); }

/* leaf-in-a-circle, zoals het icoon op plantscout.eu */
.leaf {
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 50%;
  background: var(--primary-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease-in-out;
}
.leaf svg { width: 26px; height: 26px; }

/* 4. Navbar --------------------------------------------------------------
   Maten en posities zijn 1:1 overgenomen van de navbar op plantscout.eu:
   full-bleed balk met padding 8px 16px, logo op ware grootte (203x56) met
   5px 0 padding en 16px marge rechts, daarna 48px ruimte voor het menu.
   Menu-items: li marge 16px + link padding 8px (= 64px tussen twee teksten).
   Rechts staan de twee vlaggen (25x13); de loginknop uit hun navbar hoort
   niet op deze landingpage en is eruit gelaten. */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--dark-color);
  padding: 8px 16px;
  height: var(--navbar-h);
}

/* het logo staat tegen de onderkant van de balk en het menu 6px onder het
   midden — dat is precies hoe de bootstrap-navbar op plantscout.eu uitvalt */
.navbar-brand { display: block; flex: none; align-self: flex-end; padding: 5px 0; margin-right: 16px; }
.navbar-brand img { width: 203px; height: 56px; }

.navbar-collapse {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  flex: 1 1 auto;
  margin-left: 48px;
}

.navbar-middle-links { display: flex; align-items: center; margin: 6px auto 0 0; }
.navbar-middle-links .nav-item { margin: 16px; }
.nav-link {
  display: block;
  padding: 8px;
  white-space: nowrap;
  font-family: var(--font-family-titles);
  font-size: var(--font-size-nav);
  font-weight: 500;
  line-height: 28.5px;
  color: #fff;
  transition: color .3s ease-in-out;
}
.nav-link:hover,
.nav-link.is-active { color: var(--primary-light); }

.lang-switch { display: flex; flex-direction: column; flex: none; align-self: center; margin-left: 10px; }
/* padding 8px/1px geeft exact dezelfde maat en regelafstand als hun tabel */
.lang {
  padding: 8px 1px;
  background: none;
  border: 0;
  line-height: 0;
  cursor: pointer;
}
.lang .flag { width: 25px; height: 13px; }
.lang[aria-pressed="false"] .flag { opacity: .75; transition: opacity .3s ease-in-out; }
.lang:hover .flag { opacity: 1; }

.navbar-toggler { display: none; }

/* 5. Hero --------------------------------------------------------------- */
/* De foto is 1991x789 en heeft links een lege zone voor de kaart. Vanaf ~1700px
   staan alle vijf de vazen naast de kaart; daaronder snijdt 'cover' rechts wat af. */
.main-slide {
  position: relative;
  background: url("../img/hero-vaselife.webp") 48% center / cover no-repeat #f4f4f5;
}
.main-slide .container { position: relative; z-index: 10; }
.main-slide-row { display: flex; padding: 60px 0 90px; }

.card-layout {
  background: #fff;
  box-shadow: 0 7px 10px #00000029;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

/* Op desktop staat de kaart bijna tegen de linkerrand, zoals in het ontwerp,
   zodat hij in de lege linkerzone van de foto valt en de vazen ernaast staan. */
/* De kaart ligt precies tussen de bloemen en de vazen. In de foto (1991x789,
   verhouding 2,5234) staat de bovenkant van de bloemen op y=170 en de onderkant
   van de vazen op y=709, dus op 21,55% en 89,86% van de hoogte. Omgerekend naar
   de breedte van het scherm (de foto is breedte / 2,5234 hoog) wordt dat:

     boven de bloemen  21,55% / 2,5234 = 8,54vw
     de kaart zelf     68,31% / 2,5234 = 27,07vw
     onder de vazen    10,14% / 2,5234 = 4,02vw

   Boven de bloemen zit alleen lege muur; daarvan is de helft (4,27vw) van de
   foto af gesneden met een negatieve background-position. De ruimte boven de
   kaart is daarmee ook 4,27vw, dus de bovenkant van de kaart ligt nog steeds
   op de bloemen en de onderkant op de vazen.

   Past de inhoud niet in 27,07vw (smallere schermen), dan groeit de kaart mee;
   de foto schaalt dan mee op en snijdt links en rechts wat af. */
@media (min-width: 992px) {
  .main-slide { background-position: 48% -4.27vw; }
  .main-slide .container { max-width: 1760px; padding-inline: clamp(20px, 3vw, 48px); }
  .main-slide-row { padding: 4.27vw 0 4.02vw; }
  .card-layout { width: clamp(430px, 38%, 560px); min-height: 27.07vw; }
  /* de groene voetregel blijft tegen de onderrand van de kaart staan */
  .main-slide .card-layout { display: flex; flex-direction: column; }
  .main-slide .card-body { flex: 1; }

  /* De foto vult de sectie, dus als de kaart in de ene taal hoger is dan in de
     andere verspringt de foto bij het wisselen van taal. Daarom zijn de twee
     verschillen weggewerkt: "Digitaal vaaslevenonderzoek" is bij 40px breder
     dan de kaart en valt dan over twee regels — op 36px past het net op één —
     en de introtekst is in het Nederlands één regel langer, dus die krijgt in
     beide talen de hoogte van vier regels. */
  .main-slide .card-body { container-type: inline-size; }
  .card-layout h1 { font-size: min(40px, 9cqw); }
  html[lang="nl"] .card-layout h1 { font-size: min(40px, 7.4cqw); }
  .main-slide .card-text { min-height: 140px; }
}

/* onder 1570px is de kaart smaller dan zijn maximum van 560px; daar loopt de
   groene voetregel in het Nederlands over twee regels en in het Engels over één */
@media (min-width: 992px) and (max-width: 1569px) {
  .main-slide .card-footer { min-height: 90px; }
}
.card-layout .card-body { padding: 40px 40px 30px; }
.main-slide .card-layout { color: var(--tertiary-color); }

.badge {
  display: inline-block;
  background: var(--green-tint);
  color: var(--primary-dark);
  font-family: var(--font-family-titles);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 9px 18px;
  border-radius: 50px;
  margin-bottom: 25px;
}

.card-layout h1 { margin-bottom: 25px; }
.card-layout .card-text { margin-bottom: 30px; }

.card-actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }

.card-footer {
  display: flex;
  align-items: center;
  gap: 15px;
  border: none;
  background: rgba(0, 0, 0, .03);
  padding: 15px 40px;
}
.card-footer .span-3 {
  font-family: var(--font-family-titles);
  font-weight: 700;
  color: var(--primary-light);
  line-height: 30px;
  transition: color .3s ease-in-out;
}
.card-footer a { text-decoration: underline; }
.card-footer:hover .span-3 { color: var(--light-hover); }
.card-footer:hover .leaf { background: var(--primary-dark); }

/* 6. USP row ------------------------------------------------------------ */
.usp-row { background: var(--grey-bg); }
.usp-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-block: 45px;
}
.usp-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 5px 25px;
  border-left: 1px solid #dcdcdc;
}
.usp-list li:first-child { border-left: 0; }
.usp-list svg { width: 34px; height: 34px; color: var(--primary-light); }
.usp-list p {
  font-family: var(--font-family-titles);
  font-weight: 500;
  font-size: var(--font-size-card);
  line-height: 28px;
}

/* 7. Cards & sections --------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* groene onderrand die groeit bij hover — zoals .card-secondary */
.card-secondary {
  background: #fff;
  box-shadow: 0 1px 10px #00733f1a;
  border-bottom: 25px solid var(--primary-light);
  padding: 30px 30px 30px;
  transition: ease-out .3s;
}
.card-secondary:hover {
  border-bottom-width: 30px;
  background: var(--green-tint);
}
.card-secondary .card-secondary-title {
  color: var(--primary-light);
  font-family: var(--font-family-titles);
  font-size: var(--font-size-card-secondary-title);
  font-weight: 700;
  line-height: 44px;
  margin: 15px 0 10px;
}
.card-secondary p,
.card-tertiary p { font-size: var(--font-size-card); line-height: 32px; }

.card-secondary-logo-section { display: flex; align-items: center; gap: 15px; min-height: 54px; }
.card-secondary-logo-section .step-no {
  font-family: var(--font-family-titles);
  font-weight: 700;
  font-size: 22px;
  color: var(--primary-dark);
}
.card-secondary .leaf { transition: transform .3s ease-in-out; }
.card-secondary:hover .leaf { transform: scale(1.2); }

/* variant met donkergroene titel — zoals .card-tertiary */
.card-tertiary {
  background: #fff;
  box-shadow: 0 1px 10px #00733f1a;
  border-bottom: 25px solid var(--primary-light);
  padding: 30px;
  transition: ease-out .3s;
}
.card-tertiary:hover { border-bottom-width: 30px; }
.card-tertiary .card-tertiary-title {
  color: var(--primary-dark);
  font-family: var(--font-family-titles);
  font-size: var(--font-size-card-tertiary-title);
  font-weight: 700;
  line-height: 32px;
  padding-top: 10px;
  margin-bottom: 10px;
}

.ticks { display: grid; gap: 10px; margin-top: 20px; }
.ticks li {
  position: relative;
  padding-left: 34px;
  font-size: var(--font-size-card);
  line-height: 32px;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.4 11.2 12.5 5' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* 7b. Hoe het werkt ------------------------------------------------------
   De sectie volgt de werkwijze: eerst de keurcriteria van de klant instellen,
   daarna per ronde aanmelden in het webportaal, scoren in de app en het
   rapport teruglezen. De twee schermweergaven rechts zijn nagetekend in CSS
   (geen screenshots) en zijn decoratief. */
.cards-2 { grid-template-columns: 1fr 1fr; }

.how-setup {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: start;
  background: var(--green-tint);
  border-radius: 10px;
  padding: 40px;
  margin-bottom: 60px;
}
.how-setup .badge { background: #fff; }
.how-setup-title { font-size: 26px; line-height: 36px; margin-bottom: 12px; }
.how-setup p { font-size: var(--font-size-card); line-height: 32px; }
.how-setup-list { margin-top: 0; }

.how-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 70px;
  align-items: start;
}

.how-steps { display: grid; gap: 34px; }
.how-step { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 22px; }
/* doorlopende lijn tussen de stapnummers */
.how-step::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 62px;
  bottom: -42px;
  border-left: 2px solid #dfe5e1;
}
.how-step:last-child::before { content: none; }
.how-step-no {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  color: #fff;
  font-family: var(--font-family-titles);
  font-weight: 700;
  font-size: 20px;
}
.how-tag {
  font-family: var(--font-family-titles);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary-dark);
}
.how-step-title { font-size: 24px; line-height: 34px; margin: 4px 0 8px; }
.how-step p { font-size: var(--font-size-card); line-height: 32px; }

.how-devices { margin-top: 70px; }

/* het portaalscherm met daarover de telefoon */
.how-visual { position: relative; padding-bottom: 270px; }
@media (min-width: 992px) {
  .how-visual { position: sticky; top: calc(var(--navbar-h) + 30px); }
}

.mock-portal {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 7px 10px #00000029;
  overflow: hidden;
}
.mock-bar { display: flex; gap: 6px; background: var(--dark-color); padding: 12px 16px; }
.mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: #4d4d4d; }
.mock-bar span:first-child { background: var(--primary-light); }

.mock-portal-body { padding: 22px 24px 26px; }
.mock-portal-title {
  font-family: var(--font-family-titles);
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  margin-bottom: 16px;
}
.mock-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 20px; }
.mock-fields > div { display: flex; flex-direction: column; }
.mock-fields dt { font-size: 12px; line-height: 16px; color: var(--primary-dark); }
.mock-fields dd {
  flex: 1;
  margin: 4px 0 0;
  padding: 7px 10px;
  font-size: 13px;
  line-height: 18px;
  border: 1px solid #ced4da;
  border-radius: 6px;
}
.mock-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mock-table th {
  text-align: left;
  font-weight: 400;
  color: #6b6b6b;
  background: var(--grey-bg);
  padding: 8px 10px;
}
.mock-table td { padding: 9px 10px; border-bottom: 1px solid #ececec; }
.mock-qr {
  display: inline-block;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-dark);
  border: 1px solid var(--primary-light);
  border-radius: 4px;
}
.mock-button {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--primary-light);
  color: #fff;
  font-family: var(--font-family-titles);
  font-weight: 500;
  font-size: 14px;
}

.mock-phone {
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 218px;
  background: var(--grey-bg);
  border: 9px solid var(--dark-color);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 24px #0000002e;
}
.mock-phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--primary-light);
  color: #fff;
  padding: 10px 12px;
  font-family: var(--font-family-titles);
  font-size: 11px;
  font-weight: 500;
}
.mock-phone-title { font-weight: 700; font-size: 13px; }
.mock-phone-body { padding-bottom: 10px; font-size: 11px; }
.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  padding: 9px 12px;
  border-bottom: 1px solid #ececec;
  line-height: 16px;
}
.mock-row-scan { justify-content: flex-start; gap: 8px; }
.mock-row-scan svg { width: 16px; height: 16px; flex: none; }
.mock-label {
  padding: 7px 12px;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.mock-step { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.mock-step i {
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--dark-color);
  color: #fff;
  font-style: normal;
  font-size: 11px;
  line-height: 1;
}
.mock-green { color: var(--primary-dark); }

/* 8. Contact / demo ------------------------------------------------------
   Het blok onderaan plantscout.eu/Home/QualityControl (.row-dark
   .section-demo): donkere band met een gecentreerde kop, de regel over de
   demo op maat en vier kaarten die als pijlen achter elkaar staan. Daaronder
   loopt de achtergrond via een verloop naar --tertiary-color, met links het
   logo en in het midden de knop naar het contactformulier op plantscout.eu. */
.row-dark {
  position: relative;
  overflow: hidden;
  background: var(--dark-color);
  color: var(--text-light);
  padding-top: 96px;
}
.row-dark .container { position: relative; }
.row-dark h2,
.row-dark h3 { color: var(--text-light); }
.row-dark h2 { margin-bottom: 48px; }
.row-dark h3 { font-size: var(--font-size-card-secondary-title); line-height: 37px; }
.text-center { text-align: center; }

/* het blad steekt rechtsboven buiten de container uit */
.section-leaf { position: absolute; top: -55px; right: -55px; width: 66px; }

.demo-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 48px;
}
.demo-step {
  position: relative;
  background: #fff;
  color: var(--tertiary-color);
  box-shadow: 0 1px 10px #00733f1a;
  border-bottom: 25px solid var(--primary-light);
  padding: 40px 40px 25px;
  min-height: 336px;
}
.demo-step h4 {
  color: var(--primary-light);
  font-size: 26px;
  line-height: 31px;
  margin-bottom: 8px;
}
.demo-step p { font-size: 15px; line-height: 28px; }

/* de pijlpunt op de groene balk; de laatste kaart heeft er geen */
.demo-step.arrow::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -25px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid var(--primary-light);
}

.demo-gradient {
  margin-top: 60px;
  background: linear-gradient(180deg, #1a2e3400 0%, var(--tertiary-color) 100%);
}
.demo-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 72px;
}
.demo-logo { position: absolute; left: var(--gutter); width: 160px; height: auto; }

/* 9. Footer ------------------------------------------------------------- */
.footer { background: var(--grey-bg); padding-top: 30px; }
.footer-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px 30px;
  border-top: 1px solid var(--tertiary-color);
  padding-top: 25px;
}
.footer a {
  color: var(--primary-light);
  text-decoration: underline;
  font-family: var(--font-family-titles);
  font-weight: 600;
  transition: color .3s ease-in-out;
}
.footer a:hover { color: var(--light-hover); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 0 40px;
  flex-wrap: wrap;
}
.footer-bottom .leaf { background: none; width: 40px; height: 40px; }
.footer-bottom .leaf svg { width: 40px; height: 40px; }
.footer-contact { display: flex; gap: 25px; flex-wrap: wrap; font-size: 17px; }

/* 10. Responsive -------------------------------------------------------- */
/* zoals mx-md-0 / mx-xl-3 op plantscout.eu: onder 1200px vallen de
   horizontale marges van de menu-items weg zodat alles blijft passen */
@media (max-width: 1199px) {
  .navbar-middle-links .nav-item { margin: 16px 0; }
  .navbar-collapse { margin-left: 24px; }

  /* de telefoon steekt niet meer buiten de container uit */
  .mock-phone { right: 0; }
}

@media (max-width: 991px) {
  :root { --navbar-h: 82px; }
  .navbar-brand { align-self: center; }

  .navbar-toggler {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 40px;
    margin-left: 4px;
    order: 4;
    padding: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 6px;
    cursor: pointer;
  }
  .navbar-toggler span {
    display: block;
    width: 22px;
    height: 2px;
    margin-inline: auto;
    background: #fff;
    transition: transform .3s ease, opacity .3s ease;
  }
  .navbar-toggler[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar-toggler[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .navbar-toggler[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* zoals de ingeklapte bootstrap-navbar: menu, loginknop en vlaggen
     zitten samen in het uitklappaneel onder de balk */
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
    background: var(--dark-color);
    padding: 8px 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, .15);
  }
  .navbar-collapse.is-open { display: flex; }
  .navbar-middle-links { flex-direction: column; align-items: flex-start; margin-right: 0; }
  .navbar-middle-links .nav-item { margin: 4px 0; }
  .lang-switch { align-self: flex-start; margin: 14px 0 0 8px; }

  /* kaart over de volle breedte: foto als band bovenaan in plaats van erachter */
  /* de foto heeft bovenin lege ruimte; de negatieve offset schuift die weg
     zodat de bloemen in de band boven de kaart staan */
  .main-slide { background-size: 170% auto; background-position: 60% calc(30px - 16vw); }
  .main-slide-row { padding: 210px 0 60px; }

  .usp-list { grid-template-columns: repeat(3, 1fr); row-gap: 35px; }
  .usp-list li:nth-child(3n + 1) { border-left: 0; }

  .cards { grid-template-columns: 1fr 1fr; }

  /* de schermweergaven staan onder de stappen in plaats van ernaast */
  .how-setup { grid-template-columns: 1fr; gap: 24px; padding: 30px; margin-bottom: 45px; }
  .how-main { grid-template-columns: 1fr; gap: 50px; }
  .how-visual { max-width: 560px; margin-inline: auto; padding-bottom: 0; }
  .mock-phone { position: static; margin: 24px 0 0 auto; }
  .how-devices { margin-top: 50px; }

  /* de vier stappen in twee rijen van twee */
  .row-dark { padding-top: 70px; }
  .row-dark h2 { margin-bottom: 32px; }
  .demo-steps { grid-template-columns: 1fr 1fr; }
  /* geen pijl aan het einde van een rij */
  .demo-step:nth-child(2n)::after { content: none; }
  .section-leaf { top: -45px; right: 0; width: 48px; }
}

@media (max-width: 767px) {
  :root {
    --font-size-heading-1: 32px;
    --font-size-card-secondary-title: 26px;
    --font-size-normal: 17px;
  }
  h1, h2 { line-height: 42px; }
  h3 { line-height: 38px; }
  p { line-height: 30px; }

  .section { padding: 55px 0; }

  .main-slide { background-size: 240% auto; background-position: 62% calc(10px - 22vw); }
  .main-slide-row { padding: 155px 0 50px; }
  .card-layout .card-body { padding: 28px 24px 22px; }
  .card-footer { padding: 14px 24px; }
  .card-actions { gap: 20px; }

  .usp-list { grid-template-columns: repeat(2, 1fr); }
  .usp-list li { border-left: 0; padding-inline: 10px; }

  .cards { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; gap: 12px 22px; }

  .how-setup { padding: 24px; }
  .how-setup-title { font-size: 23px; line-height: 32px; }
  .how-steps { gap: 28px; }
  .how-step { grid-template-columns: 44px 1fr; gap: 16px; }
  .how-step::before { left: 21px; top: 52px; bottom: -36px; }
  .how-step-no { width: 44px; height: 44px; font-size: 17px; }
  .how-step-title { font-size: 21px; line-height: 30px; }

  /* geen overlap meer: de telefoon staat onder het portaalscherm */
  .how-visual { padding-bottom: 0; }
  .mock-phone { position: static; margin: 24px auto 0; }

  /* stappen onder elkaar en het logo boven de knop in plaats van ernaast */
  .demo-steps { grid-template-columns: 1fr; gap: 40px; }
  .demo-step { min-height: 0; padding: 28px 24px 20px; }
  .demo-gradient { margin-top: 45px; }
  .demo-cta { flex-direction: column; gap: 28px; padding-block: 48px; }
  .demo-logo { position: static; width: 140px; }
}

@media (max-width: 400px) {
  .mock-fields { grid-template-columns: 1fr 1fr; }
  .mock-portal-body { padding: 18px 16px 20px; }
}

@media (max-width: 480px) {
  .card-actions { flex-direction: column; align-items: flex-start; }
  .card-actions .ps-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}