@font-face {
  font-family: "Jost";
  src: url("/assets/jost-300.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/jost-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/jost-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kleuren = de tokens van het Lenou-dashboard (tokens.css); licht/donker volgt het toestel, zoals het dashboard. */
  color-scheme: dark;
  --bg: #0c0c0d;
  --surface: #131314;
  --text: #ece9e2;
  --muted: #8a8781;
  /* Lichtste tint die nog 4,5:1 haalt op de achtergrond (WCAG AA). */
  --dim: #807e79;
  --accent: #c8a96e;
  --lit: #e2c06d;
  --hairline: color-mix(in srgb, var(--text) 9%, transparent);
  --pv: #e2c06d;
  --batterij: #7aa2f2;
  --net: #dd8a76;
  --huis: #a9c0b4;
  --ok: #7fb77e;
  --warn: #e0a84a;
  --bad: #dd8a76;
  --on-accent: #14110a;
  --head-bg: rgba(12, 12, 13, 0.92);
  --gutter: 16px;
  --measure: 62ch;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Eén leesbare kolom, maar met dezelfde linkerkant als het woordmerk in de kop —
   anders schuift een tekstpagina zichtbaar weg onder de navigatie. */
.narrow > * {
  max-width: 720px;
}

section {
  padding: 56px 0;
  border-top: 1px solid var(--hairline);
}

section:first-of-type {
  border-top: 0;
}

/* ---------- Header ---------- */

.site-head {
  border-bottom: 1px solid var(--hairline);
  background: var(--head-bg);
  z-index: 10;
}

/* Sticky pas als de kop op één regel past — op een telefoon vreet hij anders een derde
   van het scherm op. */
@media (min-width: 720px) {
  .site-head {
    position: sticky;
    top: 0;
    backdrop-filter: blur(12px);
  }
}

.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: baseline;
  padding-top: 16px;
  padding-bottom: 16px;
}

.wordmark {
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.wordmark:hover,
.wordmark:focus-visible {
  color: var(--accent);
}

nav.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: baseline;
}

nav.main-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

nav.main-nav a:hover,
nav.main-nav a:focus-visible {
  color: var(--text);
}

nav.main-nav a[aria-current="page"] {
  color: var(--accent);
}

.lang {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.lang a {
  color: var(--dim);
  text-decoration: none;
}

.lang a:hover,
.lang a:focus-visible {
  color: var(--text);
}

.lang [aria-current="true"] {
  color: var(--accent);
}

/* ---------- Type ---------- */

h1 {
  font-weight: 300;
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
}

h2 {
  font-weight: 300;
  font-size: clamp(1.45rem, 3.4vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
}

h3 {
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--text);
}

p,
ul,
ol,
dl {
  max-width: var(--measure);
}

p {
  margin: 0 0 18px;
}

.lead {
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--text);
}

.muted {
  color: var(--muted);
}

.label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible {
  color: var(--lit);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

ul,
ol {
  padding-left: 1.15em;
  margin: 0 0 18px;
}

li {
  margin-bottom: 8px;
}

li::marker {
  color: var(--dim);
}

strong {
  font-weight: 500;
  color: var(--text);
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 5px;
}

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 40px 0;
}

/* ---------- Hero ---------- */

.hero {
  padding: clamp(56px, 11vw, 104px) 0 48px;
  border-top: 0;
}

.hero p.lead {
  max-width: 34ch;
}

/* ---------- Cards & grids ---------- */

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 28px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 22px;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.card p + p {
  margin-top: 12px;
}

/* ---------- Merkenlijsten ---------- */

.brands {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brands li {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 14px;
}

.brand-group {
  padding: 26px 0;
  border-top: 1px solid var(--hairline);
}

.brand-group:last-of-type {
  border-bottom: 1px solid var(--hairline);
}

.brand-group > p {
  margin: 0 0 16px;
}

/* Logo's uit Simple Icons (CC0), zelf gehost in /assets/logos. Eén kleur, gedempt: het merk
   krijgt zijn vorm, niet zijn kleur. De naam blijft tekst ernaast. */
.logo {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: -2px;
  background-color: var(--muted);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

.brand h3 .logo {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.logo-appletv { --logo: url("/assets/logos/appletv.svg"); }
.logo-bmw { --logo: url("/assets/logos/bmw.svg"); }
.logo-mini { --logo: url("/assets/logos/mini.svg"); }
.logo-mqtt { --logo: url("/assets/logos/mqtt.svg"); }
.logo-philipshue { --logo: url("/assets/logos/philipshue.svg"); }
.logo-shelly { --logo: url("/assets/logos/shelly.svg"); }
.logo-sonos { --logo: url("/assets/logos/sonos.svg"); }
.logo-tesla { --logo: url("/assets/logos/tesla.svg"); }
.logo-volvo { --logo: url("/assets/logos/volvo.svg"); }
.logo-zigbee { --logo: url("/assets/logos/zigbee.svg"); }

/* Woordmerken vullen maar een strook van hun vierkante tekenvlak. Het vlak wordt breder dan
   hoog gemaakt en het masker vierkant op die breedte gelegd, zodat het woord leesbaar is
   zonder aan het bestand zelf te komen. */
.logo-appletv,
.brand h3 .logo-appletv { width: 25px; -webkit-mask-size: 25px 25px; mask-size: 25px 25px; }
.logo-mini,
.brand h3 .logo-mini { width: 27px; -webkit-mask-size: 27px 27px; mask-size: 27px 27px; }
.logo-philipshue,
.brand h3 .logo-philipshue { width: 28px; -webkit-mask-size: 28px 28px; mask-size: 28px 28px; }
.logo-sonos,
.brand h3 .logo-sonos { width: 50px; -webkit-mask-size: 50px 50px; mask-size: 50px 50px; }

.site-foot .marks {
  flex-basis: 100%;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ---------- Platformen ---------- */

/* Een kaart die naar een dossier leidt: dezelfde kaart, maar het hele vlak is de link. */
a.card {
  display: block;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

a.card:hover,
a.card:focus-visible {
  color: var(--text);
  border-color: var(--accent);
}

a.card h3 {
  margin-bottom: 6px;
}

a.card .more {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--muted);
  white-space: nowrap;
}

.tag.local {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.tag.build {
  color: var(--text);
  border-style: dashed;
  border-color: var(--dim);
}

.brands li.build {
  border-style: dashed;
  border-color: var(--dim);
  color: var(--muted);
}

/* Een merk in een dossier: naam, verbinding, en wat er binnenkomt en buitengaat. */
.brand {
  padding: 26px 0;
  border-top: 1px solid var(--hairline);
}

.brand:last-of-type {
  border-bottom: 1px solid var(--hairline);
}

.brand h3 {
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: 10px;
}

.brand .rows {
  margin: 12px 0 0;
}

.brand .rows > div:last-child {
  border-bottom: 0;
}

.back {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 18px;
}

/* ---------- Shots ---------- */

.shots {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.shots li {
  margin: 0;
}

.shots img,
.shot-wide img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
}

.shots figcaption,
.shot-wide figcaption {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 10px;
}

figure {
  margin: 0;
}

.shot-wide {
  margin: 32px 0 0;
}

/* ---------- FAQ ---------- */

.faq {
  margin-top: 8px;
}

.faq details {
  border-top: 1px solid var(--hairline);
  padding: 4px 0;
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--hairline);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 32px 16px 0;
  position: relative;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 14px;
  color: var(--accent);
  font-size: 1.2rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq summary:hover {
  color: var(--accent);
}

.faq .answer {
  padding: 0 0 18px;
}

.faq .answer p:last-child,
.faq .answer ul:last-child {
  margin-bottom: 0;
}

/* ---------- Contact block ---------- */

.contact {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 26px;
  margin: 8px 0 28px;
  max-width: var(--measure);
}

.contact .mail {
  font-size: clamp(1.2rem, 3.6vw, 1.6rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  word-break: break-word;
}

/* ---------- Definition-style privacy rows ---------- */

.rows {
  max-width: var(--measure);
  margin: 0 0 18px;
}

.rows > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
}

.rows > div:last-child {
  border-bottom: 1px solid var(--hairline);
}

.rows dt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.rows dd {
  margin: 0;
  color: var(--text);
}

@media (min-width: 640px) {
  .rows > div {
    grid-template-columns: 200px 1fr;
  }

  .rows dt {
    padding-top: 4px;
  }
}

/* ---------- Footer ---------- */

.site-foot {
  border-top: 1px solid var(--hairline);
  padding: 34px 0 48px;
  margin-top: 24px;
}

.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: baseline;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.site-foot a {
  color: var(--muted);
  text-decoration: none;
}

.site-foot a:hover,
.site-foot a:focus-visible {
  color: var(--text);
}

.site-foot .spacer {
  margin-left: auto;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--gutter);
  top: 10px;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 10px 16px;
  color: var(--text);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Werkwijze ---------- */

/* Stappen: een genummerde lijst, het nummer klein en in goud, de tekst eronder. */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 28px 0 0;
  max-width: 720px;
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding: 20px 0 20px 52px;
  margin: 0;
  border-top: 1px solid var(--hairline);
}

.steps > li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 22px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.steps h3 {
  margin-bottom: 6px;
}

.steps p {
  margin: 0;
  color: var(--muted);
}

.steps p + p,
.steps p + ul {
  margin-top: 10px;
}

.steps ul {
  margin: 10px 0 0;
  color: var(--muted);
}


/* Vergelijking: een gewone tabel op een breed scherm; op een telefoon wordt elke vorm een eigen blok,
   met de rijnaam boven de waarde, zodat er nooit zijwaarts gescrold moet worden. */
.compare {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  margin-top: 28px;
  font-size: 0.96rem;
}

.compare th,
.compare td {
  text-align: left;
  vertical-align: top;
  padding: 14px 16px 14px 0;
  border-top: 1px solid var(--hairline);
}

.compare thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 0;
}

.compare tbody th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 17px;
  width: 18%;
}

.compare td {
  color: var(--text);
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 1px solid var(--hairline);
}

@media (max-width: 719px) {
  .compare thead {
    display: none;
  }

  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
    width: auto;
  }

  .compare tbody tr {
    padding: 12px 0;
    border-top: 1px solid var(--hairline);
  }

  .compare tbody tr:last-child {
    border-bottom: 1px solid var(--hairline);
  }

  .compare tbody th,
  .compare td,
  .compare tbody tr:last-child th,
  .compare tbody tr:last-child td {
    border: 0;
    padding: 4px 0;
    width: auto;
  }

  .compare tbody th {
    color: var(--text);
    padding-bottom: 8px;
  }

  .compare td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
  }
}

.after {
  margin-top: 18px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Een anker onder de plakkende kop valt er anders half onder. */
section[id] {
  scroll-margin-top: 72px;
}

/* Hardware op Hoe wij werken: dezelfde gedempte logo's, iets groter, op een eigen regel onder de titel. */
.logo-intel { --logo: url("/assets/logos/intel.svg"); }
.logo-linux { --logo: url("/assets/logos/linux.svg"); }
.logo-docker { --logo: url("/assets/logos/docker.svg"); }
.logo-apple { --logo: url("/assets/logos/apple.svg"); }
.logo-macos { --logo: url("/assets/logos/macos.svg"); }
.hw-logos { display: flex; gap: 14px; align-items: center; margin: 2px 0 10px; }
.hw-logos .logo { width: 22px; height: 22px; margin: 0; -webkit-mask-size: contain; mask-size: contain; }
.hw-logos .logo-intel { width: 52px; -webkit-mask-size: 52px 52px; mask-size: 52px 52px; }
.hw-logos .logo-macos { width: 76px; -webkit-mask-size: 76px 76px; mask-size: 76px 76px; }

/* ---------- Functies ---------- */

/* Twee knoppen onder de hero: één gevuld in goud, één met een rand. */
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}

.btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 15px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.btn:hover,
.btn:focus-visible {
  color: var(--lit);
  border-color: var(--lit);
}

.btn.primary {
  background: var(--accent);
  color: var(--bg);
}

.btn.primary:hover,
.btn.primary:focus-visible {
  background: var(--lit);
  color: var(--bg);
}

/* Een verhaal: de belofte in één zin, dan de schermafdruk, dan wat het concreet doet. */
.story .lead {
  max-width: 40ch;
}

.feature {
  padding: 26px 0;
  border-top: 1px solid var(--hairline);
}

.feature:first-of-type {
  margin-top: 28px;
}

.feature h3 {
  font-size: 1.2rem;
  font-weight: 300;
  margin-bottom: 10px;
}

.feature .tag {
  display: inline-block;
  margin: 0 0 12px;
}

.feature p:last-child,
.feature ul:last-child {
  margin-bottom: 0;
}

/* Tekst naast een staande telefoonafdruk; op een smal scherm eronder. */
.split {
  display: grid;
  gap: 28px;
  align-items: start;
}

@media (min-width: 820px) {
  .split {
    grid-template-columns: 1fr 300px;
    gap: 48px;
  }
}

.shot-phone {
  margin: 0;
  max-width: 300px;
}

.shot-phone img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--surface);
}

.shot-phone figcaption {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 10px;
}

.shot-wide.half {
  max-width: 820px;
}

.note {
  font-size: 0.92rem;
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 14px;
}

/* Een rand van 1px telt bij de breedte maar de hoogte volgt het beeld: bij een platte strook (een kaart van
   300 px hoog) vervormt dat zichtbaar. Een omlijning binnen het beeld neemt geen plaats in. */
.shot-wide img,
.shot-phone img {
  border: 0;
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
}

/* Een bredere telefoonafdruk naast de tekst: een kaart die op 300 px te klein leest. */
@media (min-width: 820px) {
  .split.wide-shot {
    grid-template-columns: 1fr 400px;
  }
}

.shot-phone.wide {
  max-width: 400px;
}

.shot-phone.wide img {
  border-radius: 14px;
}

/* ---------- Rittenplanner: het verhaal in één beeld ---------- */

/* Agenda → rit → laden in de goedkope uren → klaar. HTML en CSS, geen afbeelding: scherp op elke
   breedte. De eindtoestand (60 %, vinkje getekend) is de gewone stijl; de animatie speelt er
   alleen naartoe, zodat prefers-reduced-motion (hierboven) gewoon het eindbeeld laat zien. */
.trip {
  position: relative;
  margin: 28px 0 0;
  padding: 22px 18px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 78% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
    radial-gradient(80% 70% at 0% 100%, color-mix(in srgb, var(--lit) 5%, transparent), transparent 70%),
    var(--surface);
  overflow: hidden;
}

.trip-steps {
  display: grid;
  gap: 0;
}

.trip-step {
  position: relative;
  padding: 18px 2px 22px;
  min-width: 0;
}

.trip-step + .trip-step {
  border-top: 1px solid var(--hairline);
}

/* Een pijltje tussen twee stappen: onder elkaar op een smal scherm, naast elkaar op een breed. */
.trip-step + .trip-step::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  background: var(--surface);
  transform: rotate(45deg);
}

.trip-k {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.trip-k b {
  font-weight: 500;
  color: var(--accent);
  margin-right: 6px;
}

.trip-big {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0 0 6px;
}

.trip-big small {
  font-size: 15px;
  color: var(--muted);
  margin-left: 2px;
}

.trip-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

.trip-sub strong {
  font-weight: 400;
  color: var(--text);
}

/* 1 · Agenda */
.trip-day {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 2%, transparent);
  overflow: hidden;
}

.trip-day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
}

.trip-day-head strong {
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text);
}

.trip-events {
  list-style: none;
  margin: 0;
  padding: 10px 10px 12px;
  display: grid;
  gap: 8px;
}

.trip-events li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0 10px;
  align-items: baseline;
}

.trip-events time {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.trip-events .ev {
  display: block;
  padding: 6px 10px;
  border-left: 2px solid var(--accent);
  border-radius: 4px 8px 8px 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  line-height: 1.3;
}

.trip-events .ev b {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: var(--text);
}

.trip-events .ev span {
  font-size: 12px;
  color: var(--muted);
}

/* 2 · Rit */
.trip-route {
  display: block;
  width: 100%;
  height: 54px;
  margin: 0 0 12px;
  overflow: visible;
}

.trip-route-ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin: -6px 0 14px;
}

.trip-dash {
  stroke-dasharray: 3 5;
  animation: trip-drive 1.6s linear infinite;
}

@keyframes trip-drive {
  to { stroke-dashoffset: -16; }
}

/* 3 · Laden */
.trip-batt {
  position: relative;
  height: 30px;
  margin: 26px 6px 30px 0;
  border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
  border-radius: 8px;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 5%, transparent) 0 4px, transparent 4px 8px) 0 0 / 20% 100% no-repeat,
    color-mix(in srgb, var(--text) 2%, transparent);
}

/* Het knopje van de batterij */
.trip-batt::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 9px;
  width: 4px;
  height: 10px;
  border-radius: 0 2px 2px 0;
  background: color-mix(in srgb, var(--text) 28%, transparent);
}

.trip-batt-now,
.trip-batt-add {
  position: absolute;
  top: 3px;
  bottom: 3px;
}

.trip-batt-now {
  left: 3px;
  width: calc(41% - 3px);
  border-radius: 5px 0 0 5px;
  background: color-mix(in srgb, var(--accent) 55%, var(--bg));
}

.trip-batt-add {
  left: 41%;
  width: 19%;
  border-radius: 0 5px 5px 0;
  background: linear-gradient(90deg, var(--accent), var(--lit));
  box-shadow: 0 0 18px color-mix(in srgb, var(--lit) 35%, transparent);
  transform-origin: left center;
  animation: trip-fill 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes trip-fill {
  0%, 8% { transform: scaleX(0); }
  40%, 100% { transform: scaleX(1); }
}

.trip-batt-mark {
  position: absolute;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.trip-batt-mark.top { bottom: calc(100% + 7px); }
.trip-batt-mark.bot { top: calc(100% + 8px); }
.trip-batt-mark.lit { color: var(--lit); font-weight: 500; }

/* De streep "nodig" over de batterij */
.trip-batt-need {
  position: absolute;
  left: 59%;
  top: -5px;
  bottom: -5px;
  width: 0;
  border-left: 1px dashed var(--text);
  opacity: 0.7;
}

.trip-prices {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
}

.trip-prices rect { fill: color-mix(in srgb, var(--text) 16%, transparent); }
.trip-prices rect.cheap { fill: var(--lit); animation: trip-glow 9s ease-in-out infinite; }

@keyframes trip-glow {
  0%, 8% { opacity: 0.45; }
  20%, 40% { opacity: 1; }
  100% { opacity: 1; }
}

.trip-axis {
  position: relative;
  height: 16px;
  font-size: 11px;
  color: var(--dim);
  margin: 4px 0 10px;
  font-variant-numeric: tabular-nums;
}

.trip-axis span { position: absolute; top: 0; white-space: nowrap; }
.trip-axis .a0 { left: 0; }
.trip-axis .a1 { left: calc(9.5 / 14 * 100%); transform: translateX(-50%); color: var(--lit); }
.trip-axis .a2 { right: 0; }

/* 4 · Klaar */
.trip-check {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 0 14px;
}

.trip-check circle {
  fill: color-mix(in srgb, var(--lit) 10%, transparent);
  stroke: var(--lit);
  stroke-width: 1.5;
}

.trip-check path {
  fill: none;
  stroke: var(--lit);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 0;
  animation: trip-tick 9s ease-out infinite;
}

@keyframes trip-tick {
  0%, 40% { stroke-dashoffset: 30; }
  52%, 100% { stroke-dashoffset: 0; }
}

.trip-ready .trip-big {
  font-size: 26px;
}

/* Twee kolommen op een tablet: de nummers vertellen de volgorde, de pijlen vallen weg. */
@media (min-width: 600px) and (max-width: 899px) {
  .trip-steps {
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
  }
  .trip-step + .trip-step { border-top: 0; }
  .trip-step:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
  .trip-step + .trip-step::before { display: none; }
}

/* Vier naast elkaar, met een pijl tussen elke stap. */
@media (min-width: 900px) {
  .trip {
    padding: 30px 28px 34px;
  }
  .trip-steps {
    grid-template-columns: 1.1fr 0.9fr 1.25fr 0.85fr;
    gap: 0 44px;
  }
  .trip-step {
    padding: 0;
  }
  .trip-step + .trip-step {
    border-top: 0;
  }
  .trip-step + .trip-step::after {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
  }
  .trip-step + .trip-step::before {
    top: 50%;
    left: -27px;
    margin: -5px 0 0;
    transform: rotate(-45deg);
    z-index: 1;
  }
}

/* De echte schermafdruk als bewijs: klein, in een telefoonrand, onder het beeld. */
.trip-proof {
  display: grid;
  gap: 28px;
  align-items: start;
  margin-top: 28px;
}

@media (min-width: 820px) {
  .trip-proof {
    grid-template-columns: 1fr 300px;
    gap: 48px;
  }
}

.shot-phone.proof {
  max-width: 300px;
}

.shot-phone.proof .bezel {
  position: relative;
  padding: 20px 8px 8px;
  border-radius: 26px;
  background: #1b1b1d;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.8);
}

.shot-phone.proof .bezel::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 44px;
  height: 5px;
  margin-left: -22px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

.shot-phone.proof img {
  border-radius: 16px;
}

/* ---------- De app: een iPad en een iPhone met echte schermen ---------- */

/* Twee toestellen in HTML en CSS, met de schermafdrukken uit het voorbeeldhuis erin. De schermen
   wisselen met een kruisovergang zonder script: elk beeld heeft dezelfde animatie, telkens een vak
   later gestart. Bij prefers-reduced-motion staat alleen het eerste scherm (zie onderaan). */
.appshow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin-top: 36px;
}

.dev {
  margin: 0;
  width: 100%;
}

.dev-body {
  position: relative;
  background: #1b1b1d;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent),
    inset 0 0 0 3px #0a0a0b,
    0 28px 60px rgba(0, 0, 0, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.4);
}

.dev-screen {
  position: relative;
  overflow: hidden;
  background: #000;
}

.dev-screen img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.dev-screen img:first-child {
  opacity: 1;
}

.dev-iphone {
  order: 1;
  max-width: 250px;
}

.dev-iphone .dev-body {
  padding: 8px;
  border-radius: 44px;
}

.dev-iphone .dev-screen {
  aspect-ratio: 1206 / 2622;
  border-radius: 36px;
}

/* Het dynamische eiland: op de iPhone 18 Pro 126 bij 37 punten van 402 bij 874. */
.dev-island {
  position: absolute;
  z-index: 2;
  top: 1.3%;
  left: 50%;
  width: 31%;
  height: 4.2%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

.dev-ipad {
  order: 3;
  max-width: 420px;
}

.dev-ipad .dev-body {
  padding: 11px;
  border-radius: 30px;
}

.dev-ipad .dev-screen {
  aspect-ratio: 1668 / 2420;
  border-radius: 20px;
}

.dev-ipad figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}

/* Het onderschrift dat met de iPhone meewisselt: alle regels in dezelfde rastercel, zodat het blok
   zo hoog is als de langste en er niets verspringt. */
.dev-caps {
  order: 2;
  display: grid;
  width: 100%;
  max-width: 460px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.dev-caps li {
  grid-area: 1 / 1;
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  opacity: 0;
}

.dev-caps li:first-child {
  opacity: 1;
}

.dev-caps b {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}

/* Vijf schermen op de iPhone, elk vier seconden; drie op de iPad, elk zes. Het nieuwe beeld ligt
   bovenop en komt in; het oude gaat pas weg als het nieuwe er helemaal staat, dus nooit zwart ertussen. */
.dev-iphone img {
  animation: dev-show5 20s linear infinite;
}

.dev-caps li {
  animation: dev-cap5 20s linear infinite;
}

.dev-iphone img:nth-child(2), .dev-caps li:nth-child(2) { animation-delay: 4s; }
.dev-iphone img:nth-child(3), .dev-caps li:nth-child(3) { animation-delay: 8s; }
.dev-iphone img:nth-child(4), .dev-caps li:nth-child(4) { animation-delay: 12s; }
.dev-iphone img:nth-child(5), .dev-caps li:nth-child(5) { animation-delay: 16s; }

.dev-ipad img {
  animation: dev-show3 18s linear infinite;
}

.dev-ipad img:nth-child(2) { animation-delay: 6s; }
.dev-ipad img:nth-child(3) { animation-delay: 12s; }

@keyframes dev-show5 {
  0% { opacity: 0; }
  3% { opacity: 1; }
  23% { opacity: 1; }
  26% { opacity: 0; }
  100% { opacity: 0; }
}

/* Tekst mag niet even dubbel staan: de oude regel is weg voor de nieuwe komt. */
@keyframes dev-cap5 {
  0% { opacity: 0; }
  1.5% { opacity: 0; }
  4% { opacity: 1; }
  19% { opacity: 1; }
  21% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dev-show3 {
  0% { opacity: 0; }
  3% { opacity: 1; }
  36.33% { opacity: 1; }
  39.33% { opacity: 0; }
  100% { opacity: 0; }
}

@media (min-width: 820px) {
  .appshow {
    position: relative;
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
  }

  .dev-ipad {
    order: 1;
    max-width: 470px;
  }

  .dev-ipad figcaption {
    max-width: 380px;
  }

  .dev-iphone {
    position: absolute;
    z-index: 1;
    top: 150px;
    right: 0;
    width: 220px;
  }

  .dev-caps {
    order: 2;
    max-width: none;
    text-align: left;
  }
}

/* Geen beweging: het eerste scherm blijft staan, en het onderschrift wordt een gewone lijst van
   wat de iPhone kan tonen. (De algemene regel hierboven zet animation al op none.) */
@media (prefers-reduced-motion: reduce) {
  .dev-screen img:not(:first-child) {
    display: none;
  }

  .dev-caps {
    display: block;
    text-align: left;
  }

  .dev-caps li {
    opacity: 1;
    margin-bottom: 8px;
  }

  .dev-caps b {
    display: inline;
    margin-right: 6px;
  }
}

/* ---------- Lenou Pro ---------- */

.pro-twee .pro-hier {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.pro-anim {
  margin: 28px 0 0;
  padding: 18px 16px 16px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 78% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%),
    var(--surface);
}

.pro-anim svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 4px;
}

.pro-anim figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
}

.pro-anim-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pro-klok {
  color: var(--muted);
  font-size: 15px;
}

.pro-klok b {
  color: var(--text);
  font-weight: 500;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}

.pro-knop {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}

.pro-knop:focus-visible,
.pro-schuif:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pro-schuif {
  width: 100%;
  accent-color: var(--accent);
}

.pro-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
}

.pro-legende i {
  display: inline-block;
  width: 12px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: -1px;
}

.pro-legende .lg-ok { background: color-mix(in srgb, var(--lit) 90%, transparent); }
.pro-legende .lg-wolk { background: color-mix(in srgb, var(--lit) 40%, transparent); }
.pro-legende .lg-schaduw { background: rgba(138, 135, 129, 0.45); }
.pro-legende .lg-dood { background: #2a1615; box-shadow: 0 0 0 1.5px #e0614f; }

.pro-status {
  margin: 12px 0 0;
  font-size: 15px;
}

.pro-melding {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 3px solid #e0614f;
  background: rgba(224, 97, 79, 0.08);
  border-radius: 6px;
  font-size: 15px;
}

.pro-melding b {
  font-weight: 500;
  margin-right: 6px;
}

#ps-svg .ps-dak { fill: var(--text); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; }
#ps-svg .ps-id { fill: var(--dim); font-size: 10px; }
#ps-svg .ps-rand { fill: none; stroke: transparent; stroke-width: 1.5; }
#ps-svg .ps-rand.aan { stroke: #e0614f; }
#ps-svg .ps-curve { fill: color-mix(in srgb, var(--lit) 14%, transparent); stroke: color-mix(in srgb, var(--lit) 60%, transparent); stroke-width: 1; }
#ps-svg .ps-as { stroke: var(--hairline); }
#ps-svg .ps-cursor { stroke: var(--text); stroke-width: 1; opacity: 0.6; }

#pp-svg .pp-raster { stroke: var(--hairline); }
#pp-svg .pp-as { fill: var(--dim); font-size: 11px; }
#pp-svg .pp-net { fill: color-mix(in srgb, var(--text) 32%, transparent); transition: y 0.25s, height 0.25s; }
#pp-svg .pp-bat { fill: var(--lit); transition: y 0.25s, height 0.25s; }
#pp-svg .pp-grens { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
#pp-svg .pp-label { fill: var(--accent); font-size: 12px; }
#pp-svg .pp-label.dim { fill: var(--dim); }

.pro-tellers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 10px 0 0;
}

.pro-tellers dt {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.pro-tellers dd {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- Productschakelaar Home | Pro (naast het woordmerk) ---------- */

.product {
  display: inline-flex;
  margin: 0 auto 0 0;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  align-self: center;
}

.product a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 999px;
  transition: color 0.12s, background 0.12s;
}

.product a:hover { color: var(--text); }
.product a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.product a[aria-current="page"] {
  background: var(--accent);
  color: #14110a;
}

/* ---------- Lenou Pro: de kleuren van het dashboard (tokens.css van het Lenou-dashboard) ---------- */


@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f6f4ef;
    --surface: #ffffff;
    --text: #1b1c1e;
    --muted: #5a5750;
    --dim: #74716a;
    --accent: #8a6717;
    --lit: #a8842a;
    --hairline: rgba(20, 17, 10, 0.12);
    --pv: #a8842a;
    --batterij: #2f5fb8;
    --net: #b85f49;
    --huis: #5f7a6c;
    --ok: #3f7a3d;
    --warn: #9a6a12;
    --bad: #a0452f;
    --head-bg: rgba(246, 244, 239, 0.92);
  }
  .product a[aria-current="page"] { color: #ffffff; }
}

.site-head { background: var(--head-bg); }

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 520px;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(1200px 520px at 50% -140px, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}

.pro-anim {
  background: var(--surface);
  border-radius: 12px;
}

.card { border-radius: 12px; }

.pro-legende .lg-ok { background: var(--pv); }
.pro-legende .lg-wolk { background: color-mix(in srgb, var(--pv) 45%, transparent); }
.pro-legende .lg-schaduw { background: color-mix(in srgb, var(--dim) 45%, transparent); }
.pro-legende .lg-dood { background: color-mix(in srgb, var(--bad) 15%, transparent); box-shadow: 0 0 0 1.5px var(--bad); }
.pro-legende .lg-net { background: var(--net); }
.pro-legende .lg-bat { background: var(--batterij); }

.pro-melding {
  border-left-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
}

#ps-svg .ps-rand.aan { stroke: var(--bad); }
#ps-svg .ps-curve { fill: color-mix(in srgb, var(--pv) 18%, transparent); stroke: var(--pv); }
#pp-svg .pp-net { fill: var(--net); }
#pp-svg .pp-bat { fill: var(--batterij); }
.pro-tellers .t-net { color: var(--net); }
.pro-tellers .t-bat { color: var(--batterij); }
.pro-tellers .t-zonder { color: var(--text); }