/* 1vve.nl: the public page of 1VvE on design language 0.2.0 (docs/handover/ui/ontwerp-0.2.0-slimvve.md).
   Layout: one calm column of bands; the gradient only on brand moments (one word per heading, the primary
   button, the demo band), gold as the warm accent of labels, never as text colour. Everything is served from
   this folder: no external fonts, scripts or trackers, so the privacy statement can say so. */
@font-face { font-family: "Hanken Grotesk"; font-weight: 100 900; font-display: swap; src: url("HankenGrotesk-latin.woff2") format("woff2"); }

:root {
  --merk-a: #1b8df5; --merk-b: #3b6cf5; --merk-c: #6b4ff0;
  --merk: linear-gradient(100deg, var(--merk-a) 0%, var(--merk-b) 50%, var(--merk-c) 100%);
  --merk-zacht: linear-gradient(135deg, rgba(27,141,245,.16), rgba(107,79,240,.16));
  --warm: #e9b96a; --warm-zacht: #fbf1dc; --warm-tekst: #7a5a1e;
  --accent: #2d5fe8; --accent-soft: #e9effe;
  --label: #0b1b3f; --secondary: #4a587a; --tertiary: #5a6882;
  --bg: #f5f6fb; --surface: #ffffff; --separator: #e3e7f1; --fill: #f0f2f9;
  --navy: #0b1b3f; --op-navy: #ffffff; --op-navy-zacht: #d7defa;
  --plaats: #fff3c4; --plaats-tekst: #6b4b00;
  --card: 0 0 0 1px rgba(11,27,63,.05), 0 1px 2px rgba(11,27,63,.04), 0 14px 34px -22px rgba(45,95,232,.28);
  --font: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --breed: 72rem;
  color-scheme: light;
}
/* Light only, as the apps are light by default (decision 4): the logo is drawn for a light ground. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--label); font: 400 1.0625rem/1.55 var(--font); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { letter-spacing: -.022em; font-weight: 700; text-wrap: balance; line-height: 1.12; }
a { color: var(--accent); }
a:focus-visible, .knop:focus-visible { outline: 3px solid var(--merk-a); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; height: auto; }
.merk { background: var(--merk); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tm { font-size: .55em; vertical-align: super; font-weight: 600; letter-spacing: 0; margin-left: .05em; }
.plaats { background: var(--plaats); color: var(--plaats-tekst); border-radius: 4px; padding: 0 .3em; font-weight: 600; }

/* the bands and their inner column */
.band { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.binnen { max-width: var(--breed); margin: 0 auto; }
section.band { padding-block: clamp(3.5rem, 8vw, 6rem); }
section[id] { scroll-margin-top: 5rem; }
.kruimel { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--tertiary);
  display: inline-flex; align-items: center; gap: .5rem; }
.kruimel::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--warm); }
.kop { display: grid; gap: .8rem; max-width: 44rem; margin-bottom: 2.5rem; }
.kop h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.kop p { color: var(--secondary); font-size: 1.15rem; }

/* the top bar */
.balk { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--separator); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.balk .binnen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 40px; width: auto; display: block; }
.balk nav { display: flex; align-items: center; gap: 1.6rem; }
.balk nav a:not(.knop) { color: var(--secondary); text-decoration: none; font-weight: 500; font-size: .98rem; }
.balk nav a:not(.knop):hover { color: var(--label); }
@media (max-width: 760px) { .balk nav a:not(.knop) { display: none; } }

/* the primary button: the gradient */
.knop { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.3rem; border-radius: 999px;
  background: var(--merk); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(11,27,63,.25), 0 8px 20px -10px rgba(45,95,232,.6), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .15s ease, box-shadow .15s ease; }
.knop:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(11,27,63,.25), 0 12px 26px -10px rgba(45,95,232,.7), inset 0 1px 0 rgba(255,255,255,.28); }
.knop.stil { background: var(--surface); color: var(--label); box-shadow: var(--card); }
@media (prefers-reduced-motion: reduce) { .knop { transition: none; } .knop:hover { transform: none; } }

/* the hero, over the wave of the design language */
.held { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); }
.held::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 60% at 4% 0%, rgba(27,141,245,.20) 0%, transparent 70%),
    radial-gradient(45% 55% at 96% 4%, rgba(107,79,240,.18) 0%, transparent 70%),
    radial-gradient(30% 40% at 70% 55%, rgba(93,218,249,.10) 0%, transparent 70%),
    radial-gradient(28% 36% at 24% 70%, rgba(233,185,106,.14) 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.held .binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.held .tekst { display: grid; gap: 1.3rem; min-width: 0; }
.held h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); line-height: 1.04; letter-spacing: -.03em; }
.held .lead { color: var(--secondary); font-size: clamp(1.1rem, 1.6vw, 1.25rem); max-width: 34rem; }
.held .acties { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
.status { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--warm-tekst); background: var(--warm-zacht);
  border-radius: 999px; padding: .3rem .85rem; font-weight: 600; justify-self: start; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--warm); }
.beelden { margin: 0; position: relative; min-width: 0; padding-bottom: 2.5rem; }
.venster { background: var(--surface); border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(11,27,63,.08), 0 30px 60px -20px rgba(45,95,232,.32), 0 12px 28px -14px rgba(11,27,63,.25); }
.venster .dots { display: flex; gap: 6px; padding: 10px 12px; background: var(--fill); border-bottom: 1px solid var(--separator); }
.venster .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--separator); }
.venster img { display: block; width: 100%; }
.telefoon { position: absolute; right: -2%; bottom: 0; width: 30%; max-width: 13rem; border-radius: 22px; padding: 6px; background: #0b1b3f;
  box-shadow: 0 30px 50px -18px rgba(11,27,63,.55); }
.telefoon img { display: block; width: 100%; border-radius: 17px; }
.bijschrift { margin-top: .9rem; font-size: .85rem; color: var(--tertiary); max-width: 64%; }
@media (max-width: 860px) {
  .held .binnen { grid-template-columns: minmax(0, 1fr); }
  .telefoon { right: 2%; width: 34%; }
}

/* what it is: the four promises, then two halves */
.vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 960px) { .vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vier { grid-template-columns: minmax(0, 1fr); } }
.pijler { background: var(--surface); border-radius: 16px; box-shadow: var(--card); padding: 1.2rem 1.3rem; display: grid; gap: .4rem; align-content: start; min-width: 0; }
.pijler b { font-size: 1.15rem; letter-spacing: -.015em; background: var(--merk); -webkit-background-clip: text; background-clip: text; color: transparent; justify-self: start; }
.pijler p { color: var(--secondary); font-size: .95rem; }
.twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 760px) { .twee { grid-template-columns: minmax(0, 1fr); } }
.kaart { background: var(--surface); border-radius: 18px; box-shadow: var(--card); padding: clamp(1.4rem, 3vw, 2rem); min-width: 0; display: grid; gap: .9rem; align-content: start; }
.kaart h3 { font-size: 1.35rem; }
.kaart > p { color: var(--secondary); }
.pic { width: 2.75rem; height: 2.75rem; border-radius: 13px; background: var(--merk-zacht); display: grid; place-items: center; }
.pic svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.punten { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.punten li { position: relative; padding-left: 1.4rem; color: var(--secondary); }
.punten li::before { content: ""; position: absolute; left: .2rem; top: .58em; width: .5rem; height: .5rem; border-radius: 2px; background: var(--merk); transform: rotate(45deg); }
.oordeel { margin-top: 1.25rem; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; border-radius: 16px; background: var(--surface);
  box-shadow: var(--card); font-size: 1.12rem; font-weight: 500; }
.oordeel .ring { width: 12px; height: 12px; border-radius: 50%; flex: none; margin: 0 .5rem 0 .3rem; background: #1f9d55;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px #1f9d55, 0 0 0 11px rgba(31,157,85,.16); }

/* for whom: two ways, then the roles */
.manieren { margin-bottom: 1.25rem; }
.manieren .kaart h3 { font-size: 1.2rem; }
.rollen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 960px) { .rollen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rollen { grid-template-columns: minmax(0, 1fr); } }
.rol { background: var(--surface); border-radius: 16px; box-shadow: var(--card); padding: 1.4rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.rol h3 { font-size: 1.15rem; }
.rol p { color: var(--secondary); font-size: .98rem; }
.rol .ziet { font-size: .85rem; color: var(--tertiary); border-top: 1px solid var(--separator); padding-top: .6rem; margin-top: .2rem; }

/* the apps: screens with a general description, no app names: they still change */
.galerij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 960px) { .galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .galerij { grid-template-columns: minmax(0, 1fr); } }
.onderdeel { background: var(--surface); border-radius: 18px; box-shadow: var(--card); padding: 1.4rem; display: grid; gap: .9rem; align-content: start; min-width: 0; }
.onderdeel .tekst { display: grid; gap: .4rem; }
.onderdeel h3 { font-size: 1.2rem; }
.onderdeel p { color: var(--secondary); }
.ook { margin-top: 1.5rem; color: var(--secondary); text-align: center; }

/* the demo band */
.demo .slot { background: var(--navy); color: var(--op-navy); border-radius: 24px; padding: clamp(1.8rem, 5vw, 3.2rem); position: relative; overflow: hidden;
  isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.demo .slot::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(50% 70% at 100% 0%, rgba(107,79,240,.55) 0%, transparent 70%),
  radial-gradient(40% 60% at 0% 100%, rgba(27,141,245,.45) 0%, transparent 70%),
  radial-gradient(30% 40% at 60% 100%, rgba(233,185,106,.25) 0%, transparent 70%); }
.demo h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.demo p { color: var(--op-navy-zacht); font-size: 1.1rem; max-width: 36rem; margin-top: .9rem; }
.demo .contact { display: grid; gap: .7rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 1.4rem; min-width: 0; }
.demo .contact .naam { font-weight: 700; font-size: 1.1rem; }
.demo .contact .regel { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; color: var(--op-navy-zacht); overflow-wrap: anywhere; }
.demo .contact .regel b { color: #fff; font-weight: 600; }
.demo .contact .knop { justify-self: start; margin-top: .3rem; }
@media (max-width: 760px) { .demo .slot { grid-template-columns: minmax(0, 1fr); } }

/* the foot */
footer.band { padding-block: 2.5rem 3rem; border-top: 1px solid var(--separator); color: var(--tertiary); font-size: .9rem; }
footer .voetregel { text-align: center; }
footer a { color: var(--secondary); }

/* the privacy page */
.tekstpagina { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.tekstpagina .binnen { max-width: 46rem; }
.tekstpagina h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); margin: .7rem 0 .6rem; }
.tekstpagina .datum { color: var(--tertiary); font-size: .95rem; }
.tekstpagina h2 { font-size: 1.3rem; margin-top: 2.4rem; margin-bottom: .6rem; }
.tekstpagina p, .tekstpagina li { color: var(--secondary); }
.tekstpagina p + p { margin-top: .8rem; }
.tekstpagina ul { padding-left: 1.2rem; display: grid; gap: .4rem; margin: .6rem 0 0; }
.tekstpagina strong { color: var(--label); font-weight: 600; }
.samenvatting { background: var(--surface); border-radius: 16px; box-shadow: var(--card); padding: 1.3rem 1.5rem; margin-top: 1.6rem; border-left: 4px solid var(--warm); }
.samenvatting p { color: var(--label); }
.tabel { overflow-x: auto; margin-top: .8rem; }
.tabel table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; }
.tabel th { text-align: left; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tertiary); font-weight: 600; padding: 0 .8rem .5rem 0; }
.tabel td { padding: .6rem .8rem .6rem 0; border-top: 1px solid var(--separator); vertical-align: top; color: var(--secondary); }
.tabel td:first-child { color: var(--label); font-weight: 600; }

/* the planes of the logo: the brand's own shape, once in the hero and once in the demo band */
.held::after { content: ""; position: absolute; z-index: -1; pointer-events: none; right: -4rem; top: -3rem; width: min(34rem, 60vw); aspect-ratio: 656 / 826;
  background: url("beeld/vlakken.webp") no-repeat center / contain; opacity: .13; }
.demo .slot::after { content: ""; position: absolute; z-index: -1; pointer-events: none; right: -3rem; bottom: -5rem; width: 17rem; aspect-ratio: 656 / 826;
  background: url("beeld/vlakken.webp") no-repeat center / contain; opacity: .3; }