:root {
  --bg: #fbfbfd;
  --vlak: #ffffff;
  --tekst: #1d1d1f;
  --zacht: #6e6e73;
  --lijn: #d2d2d7;
  --knop: #1d1d1f;
  --knop-tekst: #ffffff;
  --fout: #c4291c;
  --goed: #1d7a3e;
  --rand: 20px;
  --breed: 1080px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --vlak: #161617;
    --tekst: #f5f5f7;
    --zacht: #a1a1a6;
    --lijn: #424245;
    --knop: #f5f5f7;
    --knop-tekst: #1d1d1f;
    --fout: #ff6b5e;
    --goed: #4cd07d;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font: 17px/1.47 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.kop {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px max(var(--rand), env(safe-area-inset-left)) 12px max(var(--rand), env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--lijn) 60%, transparent);
}
.woordmerk { font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  border: 0; border-radius: 980px;
  background: var(--knop); color: var(--knop-tekst);
  font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: opacity .2s ease;
}
.knop:hover { opacity: .86; }
.knop:focus-visible, .stills:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #0a84ff; outline-offset: 2px;
}
.knop.klein { min-height: 36px; padding: 0 16px; font-size: 15px; }
.knop.vol { width: 100%; margin-top: 8px; }
.knop[disabled] { opacity: .5; cursor: default; }
main { max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand); }
.intro { text-align: center; padding: 72px 0 40px; }
.intro h1 { font-size: clamp(40px, 8vw, 72px); line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 16px; font-weight: 700; }
.zin { font-size: clamp(19px, 2.6vw, 24px); line-height: 1.35; color: var(--zacht); max-width: 34em; margin: 0 auto 28px; }
.tijdelijk { font-size: 13px; color: var(--zacht); margin: 18px 0 0; }
.demo { padding: 48px 0 24px; }
.demo h2, .slot h2 { font-size: clamp(28px, 4.4vw, 40px); letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 20px; font-weight: 600; }
.film { position: relative; max-height: 82vh; border-radius: 22px; overflow: hidden; background: #111; aspect-ratio: 16 / 9; }
.film video, .film img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-knop {
  position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px;
  border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .45); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background-repeat: no-repeat; background-position: center; background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='2' width='3.5' height='12' rx='1' fill='white'/%3E%3Crect x='9.5' y='2' width='3.5' height='12' rx='1' fill='white'/%3E%3C/svg%3E");
}
.film-knop.speel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5v11l9.5-5.5z' fill='white'/%3E%3C/svg%3E"); }
.stills {
  display: flex; gap: 14px; margin-top: 16px; padding-bottom: 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.stills::-webkit-scrollbar { display: none; }
.still { flex: 0 0 calc(50% - 7px); margin: 0; scroll-snap-align: start; }
.still img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; background: var(--lijn); }
.still figcaption { font-size: 14px; color: var(--zacht); margin-top: 8px; line-height: 1.4; }
.stipjes { display: flex; justify-content: center; gap: 8px; margin-top: 12px; min-height: 8px; }
.stipjes span { width: 7px; height: 7px; border-radius: 50%; background: var(--lijn); transition: background .2s; }
.stipjes span.aan { background: var(--tekst); }
.stipjes { align-items: center; }
.pijl {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lijn); cursor: pointer;
  background: var(--vlak) no-repeat center / 12px; color: var(--tekst);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1.5L8.5 6 4 10.5' stroke='%23888' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pijl.links { transform: scaleX(-1); margin-right: 8px; }
.pijl.rechts { margin-left: 8px; }
@media (hover: none) { .pijl { display: none; } }
.slot { text-align: center; padding: 72px 0 88px; }
.slot p { color: var(--zacht); margin: 0 0 24px; }
.voet {
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
  padding: 24px var(--rand) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--lijn); color: var(--zacht); font-size: 13px;
}

/* Het formulier. Zonder script staat het gewoon onderaan de pagina. */
.blad { padding: 32px 0 72px; }
.blad-vak { max-width: 560px; margin: 0 auto; }
.blad-wit { background: var(--bg); }
.blad-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blad-kop h2 { font-size: 28px; letter-spacing: -0.02em; margin: 0; font-weight: 600; }
.blad-intro { color: var(--zacht); margin: 8px 0 20px; font-size: 16px; }
.niveaus { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 24px; }
.niveaus article { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 16px; padding: 24px; }
.niveaus h3 { font-size: 20px; font-weight: 600; margin: 0 0 12px; }
.niveaus p { color: var(--zacht); margin: 0; }
.sluit { border: 0; background: transparent; color: var(--zacht); font: inherit; font-size: 15px; cursor: pointer; min-height: 44px; padding: 0 4px; }
.veld { display: block; margin-bottom: 14px; }
.veld > span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.veld em { font-style: normal; font-weight: 400; color: var(--zacht); }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--lijn); border-radius: 12px;
  background: var(--vlak); color: var(--tekst);
  font: inherit; font-size: 17px;
}
.veld textarea { resize: vertical; min-height: 84px; }
.veld select { -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 36px; }
[aria-invalid="true"] { border-color: var(--fout) !important; }
.fout { display: block; color: var(--fout); font-size: 13px; margin-top: 5px; min-height: 0; }
.fout:empty { display: none; }
.akkoord { margin: 6px 0 10px; }
.vink { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.vink input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--tekst); }
details { margin: 8px 0 0 30px; font-size: 14px; color: var(--zacht); }
details summary { cursor: pointer; color: var(--tekst); min-height: 32px; display: list-item; }
details p { margin: 8px 0; }
.melding { margin: 8px 0; font-size: 15px; }
.melding:empty { display: none; }
.melding.goed { color: var(--goed); }
.melding.fout { color: var(--fout); }
.pot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.klaar form { display: none; }
.klaar .blad-intro { display: none; }
.bedankt { font-size: 17px; margin: 12px 0 8px; }

.blad h2 { font-size: 28px; font-weight: 600; margin: 0 0 16px; }
.blad h3 { font-size: 20px; font-weight: 600; margin: 16px 0 8px; }
.blad article h3 { margin-top: 0; }
.blad ul { padding-left: 24px; margin: 16px 0; color: var(--zacht); }
.blad ul li { margin-bottom: 8px; }
.blad article { margin-bottom: 16px; }

/* Met script: het formulier als blad over de pagina. */
.js .blad { display: none; }
.js .blad.open {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 20; padding: 24px;
  background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.js .blad.open .blad-vak {
  width: 100%; max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-radius: 22px; padding: 22px 24px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.js .sluit[hidden] { display: inline-block; }
.op-slot { overflow: hidden; }

@media (min-width: 900px) {
  .still { flex-basis: calc(33.333% - 10px); }
}
@media (max-width: 700px) {
  :root { --rand: 16px; }
  body { font-size: 16px; }
  .intro { padding: 48px 0 28px; }
  .demo { padding: 36px 0 16px; }
  .film { aspect-ratio: 4 / 5; border-radius: 18px; }
  .film.liggend { aspect-ratio: 16 / 9; }
  .still { flex-basis: 84%; }
  .niveaus { grid-template-columns: 1fr; }
  .js .blad.open { padding: 0; align-items: flex-end; }
  .js .blad.open .blad-vak { max-height: 94dvh; border-radius: 20px 20px 0 0; padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knop, .stipjes span { transition: none; }
}

/* seven-stijl: kleuren en secties van seventechnologies.nl (2 okt 2026) */
:root { --bg: #FAFAFA; --tekst: #262626; --knop: #265C4A; --merk: #265C4A; }
@media (prefers-color-scheme: dark) { :root { --knop: #2f7a61; --merk: #6fc3a3; } }
.intro .knop + .knop { margin-left: 8px; }
.kop nav { display: flex; align-items: center; gap: 4px; }
.kop nav a.knop:not([data-open]) { background: none; color: var(--tekst); }
.kop nav a.knop:not([data-open]):hover { color: var(--merk); opacity: 1; }
.deel { padding: 56px 0; }
.deel-wit { background: var(--vlak); }
.deel-vak { max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.deel-vak > :not(.kaart) { grid-column: 1 / -1; }
.deel h2 { color: var(--merk); margin: 0 0 4px; }
.deel p { margin: 0; }
.deel ol, .deel ul { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.deel .knop { justify-self: start; }
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: 20px; }
.deel-wit .kaart { background: var(--bg); }
.kaart h3 { margin: 0 0 8px; font-size: 17px; }
.kaart p { color: var(--zacht); }
@media (max-width: 700px) { .deel { padding: 40px 0; } .kop nav a.knop:not([data-open]) { padding: 0 8px; } }

/* alleen-licht: nooit dark mode (Kevin, 2 okt 2026). Gaat voor elk eerder donker blok. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #FAFAFA; --vlak: #ffffff; --tekst: #262626; --zacht: #6e6e73; --lijn: #d2d2d7;
          --knop: #265C4A; --knop-tekst: #ffffff; --fout: #c4291c; --goed: #1d7a3e; --merk: #265C4A; }
}

/* Kop op de telefoon: woordmerk en demoknop op de eerste regel, de links eronder. */
a.woordmerk { text-decoration: none; }
.kop .knop { white-space: nowrap; }
@media (max-width: 560px) {
  .kop { flex-wrap: wrap; justify-content: flex-start; row-gap: 4px; padding-top: 10px; padding-bottom: 6px; }
  .kop::after { content: ""; flex-basis: 100%; height: 0; order: 2; }
  .kop nav { display: contents; }
  .kop nav a[data-open] { order: 1; margin-left: auto; }
  .kop nav a.knop:not([data-open]) { order: 3; min-height: 36px; padding: 0 16px 0 0; font-size: 15px; color: var(--zacht); }
}