/* =========================================================
   Datavloot — stylesheet v5 (18 september 2026)
   De stylesheet van de hele site: de home, platform, diensten, zelfbouw, de
   missie, de faq, de blog met vijf artikelen, en de privacyverklaring. De
   prototypes v2 tot en met v4 waar deze uit voortkwam zijn opgeruimd, net als
   de regels voor de waarom-pagina; wat ervan overeind bleef staat hier.

   Naar het voorbeeld van lemmabase.com, met het donkerblauw van het logo als
   donkere grond in plaats van bijna-zwart, zachte hoeken, een petrol gloed in
   de hero met een tweede tekstlink naast de knop, en oker als contrastkleur.
   Kleuren zijn en blijven die van datavloot.
   ========================================================= */

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

:root{
  /* Donkere grond: het donkerblauw van het logo en de navigatie (--navy),
     in plaats van het bijna-zwart uit de terminal. */
  --deep:#1F3C4E;
  --deep-2:#152935;
  --navy-2:#152935;
  --navy:#1F3C4E;

  /* Lichte grond */
  --ivory:#EEF4F7;
  --ivory-2:#E1ECF1;
  --white:#ffffff;

  /* Tussenblauw: de grond tussen het lichte ivoor en het donkere logoblauw in.
     Zo heeft de pagina meer dan twee gronden om mee af te wisselen. */
  --sea:#23566E;
  --sea-2:#1B4A61;

  /* Inkt op licht */
  --text:#1F3C4E;
  --text-muted:#4E6470;
  --text-dim:#8199A3;

  /* Inkt op donker */
  --ink-light:#EEF4F7;
  --ink-light-2:#DCE6EA;

  /* Accenten */
  --primary:#C98A1F;          /* oker: de ene knop */
  --primary-hover:#DBA03C;
  --primary-soft:#E8BF6E;     /* oker op donker, voor kleine tekst */
  --accent:#1C7A96;           /* petrol: links en de navigatielijn */
  --accent-soft:#6FB4C6;

  /* Lijnen: één haarlijn, op licht en op donker */
  --rule:rgba(31,60,78,.14);
  --rule-dark:rgba(238,244,247,.14);

  --font-display:'PT Serif',Georgia,'Times New Roman',serif;
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --radius:6px;
  --maxw:80rem;
  --gutter:24px;
  --nav-h:64px;

  /* Fijne korrel voor donkere vlakken (zoals lemmabase's stone-surface). */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

html{scroll-behavior:smooth;font-size:17px}
body{
  font-family:var(--font-sans);
  background:var(--ivory);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block}
a{color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
.canvas :focus-visible,.hero :focus-visible,.site-nav :focus-visible{outline-color:var(--primary-soft)}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:96px 0}
.rule{border-top:1px solid var(--rule)}
.canvas{position:relative;background:var(--deep);color:var(--ink-light)}
.canvas::before{content:'';position:absolute;inset:0;background-image:var(--noise);background-size:240px 240px;opacity:.12;pointer-events:none;mix-blend-mode:screen}
.canvas>*{position:relative}
.canvas.rule{border-top-color:var(--rule-dark)}
section[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* ---- Typografie ---- */
.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;line-height:1.2}
h1.display{font-weight:700;line-height:1.05;letter-spacing:-.015em}

/* ---- Knoppen: rechte hoeken, één hoogte, drie varianten ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 32px;border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--font-sans);font-size:.9375rem;font-weight:500;text-decoration:none;
  cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--deep)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-outline{background:transparent;border-color:currentColor;color:var(--text)}
.btn-outline:hover{background:rgba(31,60,78,.08)}
.canvas .btn-outline,.hero .btn-outline{color:var(--ink-light);border-color:var(--ink-light-2)}
.canvas .btn-outline:hover,.hero .btn-outline:hover{background:rgba(238,244,247,.08)}
.btn-sm{height:36px;padding:0 16px;font-size:.875rem}

/* ============ Navigatie: vast, dun, donker ============ */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(31,60,78,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule-dark);color:var(--ink-light);
}
/* Drie kolommen: het logo links, de titels precies in het midden van de balk,
   de demo-knop uiterst rechts. De buitenste kolommen zijn even breed (1fr),
   zodat het midden het midden blijft ook als het logo breder is dan de knop. */
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  height:var(--nav-h);padding:0 var(--gutter)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-light);font-weight:600;font-size:1.05rem;letter-spacing:-.01em}
.nav-inner>.nav-logo{justify-self:start}
.logo-badge{
  display:block;flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background-color:var(--navy);background-image:url('assets/logo-cirkel.png');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* In de menubalk net iets groter dan in de footer, niet meer dan dat; de balk
   zelf blijft 64px. */
.site-nav .nav-logo{gap:10px;font-size:1.1rem}
.site-nav .logo-badge{width:30px;height:30px}
.nav-links{display:flex;align-items:stretch;list-style:none;margin:0;padding:0;justify-self:center}
.nav-links li{display:flex;align-items:stretch;border-bottom:2px solid transparent;transition:border-color .15s}
.nav-links li:hover,.nav-links li:focus-within{border-bottom-color:var(--primary)}
.nav-links a{display:flex;align-items:center;padding:0 14px;font-size:.875rem;font-weight:500;color:rgba(238,244,247,.85);text-decoration:none;white-space:nowrap;transition:color .15s}
.nav-links a:hover{color:var(--ink-light)}
.nav-right{display:flex;align-items:center;justify-self:end;gap:8px}
/* De balk is een .wrap en liep dus tot 80rem, gecentreerd. Op een breed
   scherm stonden het merkteken en de demoknop daardoor ver van de hoek.
   De balk loopt nu over de volle breedte; de zijmarge blijft de gutter,
   zodat ze niet tegen de schermrand plakken. Het logo schuift mee naar
   links, wat bij een balk over de volle breedte hoort. */
.site-nav .wrap{max-width:none}
.mobile-toggle{display:none;background:transparent;border:1px solid var(--rule-dark);color:var(--ink-light);cursor:pointer;width:40px;height:40px;border-radius:var(--radius);align-items:center;justify-content:center}
.mobile-toggle svg{width:18px;height:18px}

.mobile-menu{position:fixed;top:0;right:0;bottom:0;width:300px;background:var(--deep-2);color:var(--ink-light);z-index:200;transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column;border-left:1px solid var(--rule-dark)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-overlay{position:fixed;inset:0;background:rgba(31,60,78,.6);z-index:150;opacity:0;pointer-events:none;transition:opacity .25s}
.mobile-menu-overlay.open{opacity:1;pointer-events:auto}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center;height:var(--nav-h);padding:0 20px 0 24px;border-bottom:1px solid var(--rule-dark)}
.mobile-menu-head span{font-weight:500;font-size:.9375rem}
.mobile-menu-close{background:none;border:none;cursor:pointer;color:var(--ink-light-2);font-size:1.6rem;width:32px;height:32px;line-height:1}
.mobile-menu-links{flex:1;padding:16px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.mobile-menu-links a{padding:12px 12px;color:var(--ink-light-2);text-decoration:none;font-size:1rem;font-weight:500;border-radius:var(--radius);border-left:2px solid transparent}
.mobile-menu-links a:hover,.mobile-menu-links a.active{color:var(--ink-light);border-left-color:var(--primary);background:rgba(238,244,247,.05)}
.mobile-menu-foot{padding:16px;border-top:1px solid var(--rule-dark)}
.mobile-menu-foot .btn{width:100%}

/* ============ Hero: beeldvullend, donker, één knop ============ */
.hero{
  position:relative;display:flex;flex-direction:column;
  min-height:100svh;background:var(--deep);color:var(--ink-light);overflow:hidden;
}
@media(min-width:768px){.hero{min-height:78svh}}
.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none}
.hero-media img,.hero-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%;
  filter:brightness(.62) saturate(.75) contrast(1.05);
}
/* Twee scrims, net als bij lemmabase: van links voor de kop, van onder voor de logoband. */
.hero-scrim{position:absolute;inset:0}
.hero-scrim-x{background-image:linear-gradient(90deg,rgba(31,60,78,.92) 22%,rgba(31,60,78,.82) 40%,rgba(31,60,78,.32) 58%,rgba(31,60,78,0) 92%)}
.hero-scrim-y{background-image:linear-gradient(rgba(31,60,78,.35) 0%,rgba(31,60,78,0) 30%,rgba(31,60,78,.25) 60%,rgba(31,60,78,.85) 100%)}
.hero-glow{background-image:radial-gradient(ellipse 55% 70% at 86% 18%,rgba(28,122,150,.32),transparent 70%)}
.hero-inner{
  position:relative;z-index:1;flex:1;display:grid;align-content:end;
  width:100%;max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h) + 40px) var(--gutter) 40px;
}
@media(min-width:768px){.hero-inner{align-content:center;padding-top:var(--nav-h);padding-bottom:0}}
/* De max-width kapt de kop af op ongeveer zoveel tekens, zodat hij op een
   breed scherm geen eindeloze regel wordt. Op 15ch braken de Engelse koppen
   'Message in a bottle' (19 tekens) en 'Frequently asked' (16); 19ch laat
   die passen en verandert niets aan de kortere koppen, want een max-width
   rekt niets op. */
.hero h1{font-size:clamp(2.2rem,5.2vw,3.75rem);max-width:19ch;margin-bottom:20px;color:var(--ink-light)}
.hero p{font-size:clamp(1rem,1.6vw,1.3125rem);line-height:1.55;color:rgba(238,244,247,.9);max-width:44ch;margin-bottom:36px}
.hero-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
@media(min-width:768px){.hero-actions{flex-direction:row;align-items:center;gap:28px}}
.hero .btn{width:100%}
@media(min-width:768px){.hero .btn{width:auto}}
.hero-link{color:rgba(238,244,247,.85);text-decoration:none;font-weight:500;font-size:.9375rem;border-bottom:1px solid rgba(238,244,247,.35);padding-bottom:2px;transition:color .15s,border-color .15s}
.hero-link:hover{color:var(--ink-light);border-bottom-color:var(--primary)}

/* ============ Componentenband onder de hero ============ */
.band{
  position:relative;z-index:1;border-top:1px solid rgba(111,180,198,.2);
  background:rgba(21,41,53,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:6px 0 6px;display:flex;align-items:center;
}
.marquee{min-width:0;flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5% 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5% 95%,transparent)}
.marquee-track{display:flex;align-items:center;gap:72px;width:max-content;padding:14px 0;animation:marquee 46s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-item{display:flex;align-items:center;gap:10px;color:rgba(238,244,247,.72);font-size:1rem;font-weight:500;letter-spacing:.01em;white-space:nowrap}
/* De echte merktekens, elk op een wit plaatje: anders vallen de donkere logo's
   (Python, GitHub) weg tegen het donkerblauw van de band. */
.marquee-item .mark{width:26px;height:26px;flex-shrink:0;object-fit:contain;background:var(--white);border-radius:6px;padding:3px}
.marquee-item small{font-family:var(--font-mono);font-size:.72rem;color:rgba(238,244,247,.45);font-weight:400;letter-spacing:.02em}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@keyframes uses-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:56px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{
  position:relative;display:flex;aspect-ratio:16/10;overflow:hidden;isolation:isolate;
  text-decoration:none;color:var(--ink-light-2);background:var(--deep-2);
  border:1px solid rgba(201,138,31,.22);border-radius:var(--radius);
  transition:border-color .2s;
}
.card:hover,.card:focus-visible{border-color:rgba(238,244,247,.45);outline:none}
.card-media{position:absolute;inset:0;z-index:0;transform:scale(1.08);transition:transform .35s ease;will-change:transform}
.card:hover .card-media{transform:scale(1)}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.55) brightness(.62)}
.card-media svg{width:100%;height:100%;display:block}
/* De twee kaartbeelden die uit opmaak bestaan in plaats van een foto: een
   tint terug, want het is achtergrond en niet de inhoud van de kaart. De
   foto's krijgen dat via een filter op de <img>, en dat grijpt niet op
   opmaak; hier doet doorzichtigheid hetzelfde werk. */
.card-media-term,.card-media-tiles{opacity:.55}
/* Op de kaart 'Voor de bouwer' draagt de terminal het beeld in plaats van een
   foto: drie commando's laten sneller zien wat je krijgt dan een schermbeeld
   van een editor. Hij vult de kaart en legt zijn eigen rand en hoeken af, die
   heeft de kaart al. En hij zoomt niet mee: bij een foto is dat een mooie
   beweging, bij tekst snijdt het regels af.
   De scrim van .card-overlay blijft eroverheen liggen, zodat het opschrift
   onderin leesbaar blijft. */
.card-media-term,.card:hover .card-media-term{transform:none}
.card-media-term .terminal{height:100%;border:0;border-radius:0;font-size:.78rem}
.card-media-term .terminal-body{padding:18px 20px}
/* En de kaart 'Voor de bestuurder' draagt de dienstentegels, op dezelfde
   donkere grond als de sectie waar ze heen wijst. Vier stuks, twee bij
   twee: .offers gaat op een breed scherm naar drie kolommen, en dat gaat
   hier niet op, want de kaart is smal. Ook deze zoomt niet mee. */
.card-media-tiles,.card:hover .card-media-tiles{transform:none}
.card-media-tiles{padding:22px;display:grid;align-content:start}
.card-media-tiles .offers{margin-top:0;gap:10px;grid-template-columns:1fr 1fr}
.card-media-tiles .offer{padding:14px 16px}
.card-media-tiles .offer-kicker{font-size:.68rem}
.card-media-tiles .offer-head{margin-top:4px;font-size:1rem}
.card-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(to top,rgba(21,41,53,.92) 0%,rgba(21,41,53,.8) 22%,rgba(21,41,53,0) 55%),var(--noise);
  background-size:auto,240px 240px;background-repeat:no-repeat,repeat}
.card-text{position:relative;z-index:2;margin-top:auto;width:100%;padding:20px;display:flex;flex-direction:column;gap:2px}
.card-eyebrow{font-size:.75rem;color:var(--primary-soft);font-weight:500}
.card-title{font-family:var(--font-display);font-size:1.5rem;line-height:1.2;color:var(--ink-light)}

/* ============ Afsluiter (licht) ============ */
.closer h2{font-size:clamp(2rem,4vw,3rem);line-height:1.2;letter-spacing:-.015em}
.closer p{margin-top:24px;font-size:1.125rem;line-height:1.65;color:var(--text-muted);max-width:60ch}
.closer-actions{margin-top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
@media(min-width:640px){.closer-actions{flex-direction:row;gap:16px}}
.closer-contact{margin-top:28px;font-size:.9375rem;color:var(--text-muted)}
.closer-contact a{color:var(--accent);text-decoration:none}
.closer-contact a:hover{text-decoration:underline;text-underline-offset:3px}
.closer-grid{display:grid;gap:40px}
@media(min-width:1024px){.closer-grid{grid-template-columns:7fr 5fr;gap:64px;align-items:center}}

/* De bemanning op de expeditiepagina: dezelfde ronde portretten als de
   compacte .crew-lijst hierboven, maar dan als kaart, met de tekst in de eigen
   woorden van de persoon. Vorm en gronden van .offer, zodat het er niet als een
   vreemd component tussen staat. De links onderaan, uitgelijnd tussen de twee
   kaarten ook als de ene meer tekst heeft dan de andere. */
.mates{display:grid;gap:16px;margin-top:48px}
@media(min-width:900px){.mates{grid-template-columns:1fr 1fr;gap:24px}}
.mate{display:flex;flex-direction:column;padding:28px 26px;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius)}
.mate-head{display:flex;gap:18px;align-items:center}
.mate-head img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--rule)}
.mate-name{font-family:var(--font-display);font-size:1.2rem;line-height:1.3;color:var(--text)}
.mate-role{font-size:.875rem;color:var(--text-muted);margin-top:2px}
.mate p{margin-top:18px;line-height:1.65;color:rgba(31,60,78,.9)}
.mate strong{font-weight:600;color:var(--text)}
.mate-links{margin-top:auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:10px 18px}
.canvas .mate{background:rgba(238,244,247,.05);border-color:var(--rule-dark)}
.canvas .mate-head img{border-color:var(--rule-dark)}
.canvas .mate-name{color:var(--ink-light)}
.canvas .mate-role{color:var(--ink-light-2)}
.canvas .mate p{color:var(--ink-light-2)}
.canvas .mate strong{color:var(--ink-light)}
/* Petrol is op donker te donker voor een link; daar draagt de lichte oker. */
.canvas .mate-links .block-link{color:var(--primary-soft)}

/* ============ Vragen en antwoorden ============
   Uitklapbare regels met een haarlijn ertussen, dezelfde vorm als de
   bouwstappen en de .crew-lijst. De vraag in de schreefletter, want dat is de
   kop van het blokje; het plusje in oker, want dat is het enige wat aanwijst
   dat er iets te openen valt. Het antwoord staat op leesbreedte.
   ========================================================= */
.faq-list{margin-top:48px;border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:24px;padding:20px 0;
  font-family:var(--font-display);font-weight:400;font-size:1.125rem;line-height:1.4;
  color:var(--text);transition:color .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-family:var(--font-mono);font-size:1.2rem;line-height:1;
  color:var(--primary);flex-shrink:0}
.faq-item[open] summary::after{content:'–'}
.faq-item summary:hover{color:var(--accent)}
.faq-a{padding-bottom:24px;line-height:1.7;color:rgba(31,60,78,.9);max-width:68ch}
.canvas .faq-list{border-top-color:var(--rule-dark)}
.canvas .faq-item{border-bottom-color:var(--rule-dark)}
.canvas .faq-item summary{color:var(--ink-light)}
.canvas .faq-item summary::after{color:var(--primary-soft)}
.canvas .faq-item summary:hover{color:var(--accent-soft)}
.canvas .faq-a{color:var(--ink-light-2)}

/* ============ De route: de zeekaart en de etappes ============
   Overgenomen van de vervallen vaarroute-pagina en omgezet naar de v5-tokens.
   De kaart houdt zijn perkament: het is een zeekaart, en dat warme vlak is
   precies wat hem van een gewone tijdlijn onderscheidt. De lijn, de peiling en
   de stip van 'nu' dragen de oker van v5, zodat het vlak er niet als een los
   eiland bij ligt. Op smal schuift de kaart horizontaal in plaats van te
   verdwijnen, zoals hij op de oude pagina deed.
   ========================================================= */
.chart{--chart-line:#B08A4E;--chart-parch:#FBF4E6;
  margin-top:48px;padding:32px 28px 20px;overflow-x:auto;
  background:var(--chart-parch);border:1px solid rgba(201,138,31,.32);border-radius:var(--radius)}
.chart svg{display:block;width:100%;min-width:640px;height:auto}
.chart-route{fill:none;stroke:var(--chart-line);stroke-width:2.5;stroke-dasharray:1 9;stroke-linecap:round}
.chart-route-far{fill:none;stroke:var(--chart-line);stroke-width:2;stroke-dasharray:1 7;opacity:.55;stroke-linecap:round}
.chart-boat path,.chart-boat line{stroke:var(--navy);stroke-width:1.6;fill:none;stroke-linecap:round}
.chart-num{font-family:var(--font-mono);font-size:13px;font-weight:600;fill:var(--chart-line)}
.chart-name{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;fill:var(--text-muted)}
.chart-tick{stroke:var(--chart-line);stroke-width:1.5;opacity:.5}
.chart-ring{fill:none;stroke:var(--primary);stroke-width:1.5;opacity:.4}
.chart-mark{fill:var(--accent)}
.chart-mark-now{fill:var(--primary)}
.chart-year{font-family:var(--font-mono);font-size:10px;fill:var(--text-dim)}
.chart-goal circle,.chart-goal line{stroke:var(--primary);stroke-width:1.5;fill:none}
.chart-horizon{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;fill:var(--text-dim)}

/* De vijf etappes eronder, in de vorm van de .offer-tegels: vijf stuks, dus
   drie en twee. De etappe die nu draait krijgt de okeren rand, de stip op de
   horizon een stippellijn: die is er nog niet. */
.legs{display:grid;gap:16px;margin-top:16px}
@media(min-width:700px){.legs{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.legs{grid-template-columns:repeat(3,1fr)}}
.leg{padding:22px 24px;background:var(--white);border:1px solid var(--rule);border-radius:var(--radius)}
.leg-when{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.leg h3{margin-top:8px;font-family:var(--font-display);font-weight:400;font-size:1.2rem;line-height:1.3;color:var(--text)}
.leg p{margin-top:8px;font-size:.9rem;line-height:1.6;color:rgba(31,60,78,.9)}
.leg-now{border-color:rgba(201,138,31,.5)}
.leg-now .leg-when{color:var(--warm-deep)}
.leg-far{border-style:dashed}
.leg-status{display:inline-block;margin-top:14px;padding:3px 10px;border-radius:20px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em}
.leg-status.live{background:rgba(201,138,31,.14);color:var(--warm-deep)}
.leg-status.plan{background:rgba(28,122,150,.1);color:var(--accent)}
.leg-status.idea{border:1px dashed var(--rule);color:var(--text-dim)}

/* ============ Flessenpost: de afleveringen ============
   Dezelfde beeldkaarten als onderaan de home, met een beeld uit de
   aflevering zelf. Wat nog moet verschijnen staat bovenaan over de volle
   breedte, met een stippelrand: er valt nog niets te lezen.
   ========================================================= */
.blog-cards{margin-top:48px}
@media(min-width:640px){.blog-cards .card-wide{grid-column:1/-1;aspect-ratio:auto;min-height:220px}}
.card-upcoming,.card-upcoming:hover{border-style:dashed;border-color:rgba(201,138,31,.22)}
/* De eerste aflevering heeft geen foto; daar staat het logo, klein op de
   donkere grond en iets boven het midden, weg van het opschrift. */
.card-media-logo{display:grid;place-items:center;padding-bottom:14%;background:var(--navy)}
.card-media-logo img{width:34%;height:auto;aspect-ratio:1;object-fit:contain;filter:none}
.blog-meta{display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dim)}
.blog-tag{padding:3px 10px;border-radius:20px}
.blog-tag.published{background:rgba(28,122,150,.1);color:var(--accent)}
.blog-tag.soon{background:rgba(201,138,31,.14);color:var(--warm-deep)}

/* ============ Blog-artikel ============
   Deze pagina's hebben geen hero, dus de leeskolom begint onder de vaste
   menubalk. Eén kolom op leesbreedte; de schreefletter draagt de kop en de
   tussenkoppen, de schreefloze het lopende verhaal.
   ========================================================= */
.article{max-width:46rem;margin:0 auto;padding:calc(var(--nav-h) + 48px) var(--gutter) 0}
.article-refs[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
.article-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:32px;
  font-size:.875rem;color:var(--text-muted);text-decoration:none}
.article-back:hover{color:var(--accent)}
.article-header{margin-bottom:44px;padding-bottom:36px;border-bottom:1px solid var(--rule)}
.article-header .blog-meta{margin-bottom:18px}
.article-header h1{font-family:var(--font-display);font-weight:400;
  font-size:clamp(2rem,4.4vw,2.8rem);line-height:1.12;letter-spacing:-.015em;color:var(--text)}
.article-standfirst{margin-top:20px;font-size:1.1875rem;line-height:1.55;color:var(--text-muted)}
.article-byline{display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  text-decoration:none;color:inherit}
.article-byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--rule)}
.byline-name{font-weight:500;font-size:.9375rem;color:var(--text)}
.article-byline:hover .byline-name{color:var(--accent)}
.byline-role{font-size:.82rem;color:var(--text-muted)}
.article-body h2{margin:44px 0 14px;font-family:var(--font-display);font-weight:400;
  font-size:1.5rem;line-height:1.3;color:var(--text)}
/* Het nummertje voor een tussenkop: hier geen streepje en geen eigen regel. */
.article-body h2 .kicker{display:inline;margin:0 10px 0 0;font-size:.85rem;color:var(--warm-deep)}
.article-body h2 .kicker::before{display:none}
.article-body p{margin-bottom:20px;font-size:1.0625rem;line-height:1.75;color:rgba(31,60,78,.9)}
.article-body p strong{font-weight:600;color:var(--text)}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.article-body ul{margin:0 0 20px;padding-left:0;list-style:none}
.article-body ul li{position:relative;margin-bottom:11px;padding-left:24px;
  font-size:1.0625rem;line-height:1.65;color:rgba(31,60,78,.9)}
.article-body ul li::before{content:'';position:absolute;left:3px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--primary)}
.article-frame{margin:24px 0;padding:8px 28px 28px;
  background:var(--ivory-2);border:1px solid var(--rule);border-radius:var(--radius)}
.article-frame>:first-child{margin-top:0}
.article-frame>:last-child{margin-bottom:0}
.article-figure{margin:34px 0;overflow:hidden;background:var(--white);
  border:1px solid var(--rule);border-radius:var(--radius)}
.article-figure img{display:block;width:100%;height:auto}
.article-figure figcaption{padding:12px 16px;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:.76rem;color:var(--text-dim)}
.article-figure-inline{float:right;width:240px;max-width:40%;margin:6px 0 20px 26px;
  overflow:hidden;border:1px solid var(--rule);border-radius:var(--radius)}
.article-figure-inline img{display:block;width:100%;height:auto}
.article-body p code{padding:1px 6px;border-radius:4px;background:rgba(28,122,150,.1);
  font-family:var(--font-mono);font-size:.88em;color:var(--text)}
.article-body .code-chip{margin:4px 0 24px}
.article-code{margin:4px 0 24px;padding:16px 18px;overflow-x:auto;
  background:#0F2028;border:1px solid #223842;border-radius:var(--radius);
  font-family:var(--font-mono);font-size:.84rem;line-height:1.6;color:var(--ink-light-2)}
.article-code code{font-family:inherit}
.article-code .comment{color:#7593A0}
/* De uitgelichte zin: okeren kantlijn, in de schreefletter. */
.article-pull{margin:34px 0;padding:4px 0 4px 22px;border-left:3px solid var(--primary);
  font-family:var(--font-display);font-size:1.3rem;line-height:1.4;color:var(--text)}
.article-note{margin:38px 0;padding:22px 26px;line-height:1.65;color:var(--text);
  background:rgba(201,138,31,.1);border:1px solid rgba(201,138,31,.32);border-radius:var(--radius)}
.article-refs{margin-top:34px;font-size:.82rem;line-height:1.6;color:var(--text-dim)}
.article-refs h5{margin-bottom:10px;font-family:var(--font-mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim)}
.article-refs a{color:var(--accent);word-break:break-word}
/* De uitsmijter onder het artikel: de enige donkere grond op deze pagina's. */
.article-cta{margin-top:56px;padding:44px 32px;text-align:center;
  background:var(--deep);border-radius:var(--radius)}
.article-cta h3{font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--ink-light)}
.article-cta p{max-width:44ch;margin:10px auto 24px;line-height:1.6;color:var(--ink-light-2)}
/* Ruimte tussen het artikel en de footer. */
.article-end{height:80px}

/* ============ Footer ============ */
footer{border-top:1px solid var(--rule);padding:64px 0 32px;background:var(--ivory)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px 24px}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(5,1fr)}}
.footer-brand .nav-logo{color:var(--text);margin-bottom:14px}
.footer-brand p{font-size:.875rem;line-height:1.6;color:var(--text-muted);max-width:30ch}
.footer-col h3{font-size:.875rem;font-weight:600;color:var(--text);margin-bottom:12px}
.footer-col a{display:block;font-size:.875rem;color:var(--text-muted);text-decoration:none;margin-bottom:8px}
.footer-col a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.gh-icon{width:1em;height:1em;vertical-align:-.125em;margin-right:6px}
.footer-bottom{margin-top:48px;padding-top:32px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.875rem;color:var(--text-muted)}
.footer-bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ============ KPI-tegels (terug uit de huidige home) ============
   Witte tegels met haarlijnrand op licht; doorschijnend op het donkerblauw.
   Zelfde radius als de knoppen. De pijl rechtsboven en het oplichten bij hover
   staan op a.kpi: een tegel die nergens heen gaat hoort er ook niet naar te
   wijzen. Op de home zijn het gewone vlakken, op de waarom-pagina waren het
   links; die pagina staat inmiddels in het archief. */
.kpis{display:grid;grid-template-columns:1fr;gap:16px;margin-top:48px}
@media(min-width:640px){.kpis{grid-template-columns:repeat(3,1fr)}}
.kpi{position:relative;display:block;text-decoration:none;color:inherit;padding:22px 44px 22px 24px;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);transition:border-color .2s,background-color .2s}
a.kpi:hover{border-color:var(--accent-soft)}
a.kpi::after{content:'\2192';position:absolute;top:20px;right:20px;font-family:var(--font-mono);font-size:.95rem;line-height:1;color:var(--accent);opacity:.65;transition:transform .2s,opacity .2s}
a.kpi:hover::after{opacity:1;transform:translateX(3px)}
.kpi-num{font-family:var(--font-display);font-size:1.75rem;line-height:1.1;color:var(--text)}
.kpi-label{font-size:.9rem;line-height:1.45;color:var(--text-muted)}
.kpi-note{margin-top:18px;font-size:.875rem;line-height:1.55;color:var(--text-dim)}
.kpi-note a{color:var(--accent);text-decoration:none}
.kpi-note a:hover{text-decoration:underline;text-underline-offset:3px}
.kpi-note .star{color:var(--primary);font-weight:700}

/* Op donker */
.canvas .kpi{background:rgba(238,244,247,.05);border-color:var(--rule-dark)}
.canvas a.kpi:hover{background:rgba(238,244,247,.08);border-color:rgba(238,244,247,.4)}
.canvas a.kpi::after{color:var(--primary-soft)}
.canvas .kpi-num{color:var(--ink-light)}
.canvas .kpi-label{color:var(--ink-light-2)}
.canvas .kpi-note{color:rgba(238,244,247,.6)}
.canvas .kpi-note a{color:var(--primary-soft)}
.canvas .kpi-note .star{color:var(--primary-soft)}
.canvas .kpis{margin-top:40px;margin-bottom:56px}

/* ============ v5: eigen indeling ============ */
/* Sectiekop over de volle breedte: kicker, kop en lead naast elkaar. */
.head{display:grid;gap:16px;align-items:end}
@media(min-width:1024px){.head{grid-template-columns:7fr 5fr;gap:64px}}
/* De kop van een sectie. Ook die in een .duo-kolom, die niet in een .head
   zit maar wel een sectiekop is en dus dezelfde maat hoort te hebben. */
.head h2,.duo h2{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.15;letter-spacing:-.012em}
.head p{font-size:1.0625rem;line-height:1.65;color:var(--text-muted)}
.canvas .head h2,.canvas .duo h2{color:var(--ink-light)}
.canvas .head p{color:var(--ink-light-2)}
.kicker{font-family:var(--font-mono);font-size:.75rem;color:var(--accent);margin-bottom:14px}
.canvas .kicker{color:var(--primary-soft)}

/* De route: vier stappen op één lijn, het logo aan het begin. */
.route{position:relative;margin-top:56px;padding-top:34px}
.route::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule)}
.route-start{position:absolute;left:0;top:0;transform:translateY(-50%);display:flex;align-items:center;gap:10px;background:var(--ivory);padding-right:14px}
.route-start .logo-badge{width:34px;height:34px}
.route-start span{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted)}
.route-steps{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:768px){.route-steps{grid-template-columns:repeat(4,1fr);gap:32px}}
.step{position:relative}
.step::before{content:'';position:absolute;left:0;top:-43px;width:13px;height:13px;border-radius:50%;background:var(--ivory);border:1.5px solid var(--accent)}
@media(max-width:767px){.step::before{display:none}}
/* Behalve de eerste: die stip ligt op dezelfde plek als het merkteken
   'datavloot' waar de lijn begint, en staat er dus bovenop. De lijn
   begint daar al, een stip erbij zegt niets extra's. */
.step:first-child::before{display:none}
.step small{display:block;font-family:var(--font-mono);font-size:.72rem;color:var(--accent);margin-bottom:6px}
.step strong{display:block;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.step span{display:block;margin-top:6px;font-size:.9rem;line-height:1.5;color:var(--text-muted)}
.route-end{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.9375rem;color:var(--text-muted)}
.route-end .arrow-link{color:var(--accent);text-decoration:none;font-weight:500}
.route-end .arrow-link:hover{color:var(--text)}
/* De route staat op de home nu op donker. Zonder deze regels valt de naam van
   elke stap weg: .step strong staat op --text, het donkerblauw van de grond
   zelf. Het merkteken linksboven maskeert de lijn en moet dus dezelfde grond
   dragen als de sectie. */
.canvas .route::before{background:var(--rule-dark)}
.canvas .route-start{background:var(--deep)}
.canvas .route-start span{color:var(--primary-soft)}
.canvas .step::before{background:var(--primary-soft);border-color:var(--primary-soft)}
.canvas .step small{color:var(--primary-soft)}
.canvas .step strong{color:var(--ink-light)}
.canvas .step span{color:var(--ink-light-2)}
.canvas .route-end{border-top-color:var(--rule-dark);color:var(--ink-light-2)}
.canvas .route-end .arrow-link{color:var(--primary-soft)}
.canvas .route-end .arrow-link:hover{color:var(--ink-light)}

/* ============ Balkenschema: de tien werkdagen ============
   De route-component op de home zet elke stap even breed neer en zegt daarmee
   alleen iets over de volgorde. Hier gaat het om de duur, dus loopt elke
   etappe als balk over een raster van tien dagen: installeren is er één,
   modelleren zijn er vier, en dat zie je meteen. Links de naam met zijn
   steekwoorden, rechts de balk; op smal onder elkaar.
   ========================================================= */
.gantt{margin-top:56px;border-top:1px solid var(--rule)}
.gantt-head,.gantt-list>li{display:grid;gap:12px;padding:18px 0;border-bottom:1px solid var(--rule)}
@media(min-width:768px){
  .gantt-head,.gantt-list>li{grid-template-columns:19rem 1fr;gap:32px;align-items:center}
}
.gantt-head{padding:10px 0}
.gantt-unit{font-family:var(--font-mono);font-size:.72rem;color:var(--warm-deep)}
.gantt-scale{display:grid;grid-template-columns:1fr 1fr;gap:4px;
  font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim)}
.gantt-scale span{padding-left:10px;border-left:2px solid var(--primary)}
.gantt-list{list-style:none;margin:0;padding:0}
.gantt-meta strong{display:block;font-family:var(--font-display);font-weight:400;
  font-size:1.2rem;line-height:1.3;color:var(--text)}
.gantt-meta small{display:block;margin-top:3px;font-family:var(--font-mono);
  font-size:.72rem;color:var(--warm-deep)}
.gantt-meta .keys{margin-top:8px;font-size:.82rem}
/* Het raster van tien dagen. De lege vakjes blijven wit, zodat het blad
   waarop de balk ligt zichtbaar blijft en de duur af te lezen is. */
.gantt-track{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;padding:4px;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius)}
.gantt-bar{height:22px;border-radius:3px;background:var(--primary)}

/* Waarom: open sectie, drie beloften naast elkaar met verticale haarlijnen. */
.promises{display:grid;gap:0;margin-top:48px;border-top:1px solid var(--rule)}
@media(min-width:768px){.promises{grid-template-columns:repeat(3,1fr)}}
.promise{padding:26px 0;border-bottom:1px solid var(--rule)}
@media(min-width:768px){.promise{padding:32px 32px 36px;border-bottom:0;border-left:1px solid var(--rule)}.promise:first-child{padding-left:0;border-left:0}.promise:last-child{padding-right:0}}
.promise h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.3;color:var(--text)}
.promise p{margin-top:10px;line-height:1.6;color:rgba(31,60,78,.9)}
.promises+.kpis{margin-top:40px}

/* Nog twee beeldkaarten: even groot naast elkaar, geen grote en kleine. */
.cards .card-title{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.cards .card-text{padding:24px}

/* ============ v5: oker als contrastkleur ============
   Oker was tot nu toe alleen de knop. Hier ook: de streep voor elk kopje,
   de stippen en labels op de route, de getallen in de tegels en de markers
   in lijsten. Op licht de donkere oker (--warm-deep, AA-contrast), op donker
   de lichte (--primary-soft). */
:root{--warm-deep:#9C6A15}
.kicker{display:flex;align-items:center;gap:10px;color:var(--warm-deep)}
.kicker::before{content:'';width:22px;height:2px;background:var(--primary)}
.canvas .kicker{color:var(--primary-soft)}
.canvas .kicker::before{background:var(--primary-soft)}
.route::before{background:var(--rule)}
.route-start span{color:var(--warm-deep)}
.step::before{border-color:var(--primary);background:var(--primary)}
.step small{color:var(--warm-deep)}
.kpi-num{color:var(--warm-deep)}
.canvas .kpi-num{color:var(--primary-soft)}
a.kpi::after{color:var(--primary);opacity:.8}
.promises{border-top:2px solid var(--primary)}
.nav-links li.active{border-bottom-color:var(--primary)}
.hero-link:hover{border-bottom-color:var(--primary)}

/* ============ Subpagina's ============
   Elke pagina draagt dezelfde hero als de home: hetzelfde vlootbeeld en
   dezelfde hoogte. Alleen de kop verschilt, en in de band eronder staan de
   ankers van de pagina in plaats van de componenten. Daarna dezelfde
   afwisseling van licht en donker. */
.nav-links li.active{border-bottom-color:var(--primary)}
.nav-links li.active a{color:var(--ink-light)}

/* Home: dezelfde vloot, maar in de hoge hero. Iets naar rechts uitgesneden,
   zodat de kop links niet op de grootste boot valt. */
.hero-vloot .hero-media img{object-position:62% 45%}
/* Hero zonder foto: het vlootbeeld is voorbehouden aan de home. Hier alleen
   de donkere grond met een klein verloop naar rechts, van het logoblauw
   naar het tussenblauw uit de kleurenreeks. Twee tinten die dicht bij
   elkaar liggen, dus het blijft een rustig vlak. En zonder beeld hoeft de
   balk niet hoog: wat er staat is de kop met drie steekwoorden. */
.hero-plain{min-height:auto;
  background-image:linear-gradient(100deg,var(--deep) 0%,var(--deep) 38%,var(--sea) 100%)}
@media(min-width:768px){.hero-plain{min-height:44svh}}
/* De kop op twee regels: 'Open-source' groot, de tweede regel een maat kleiner. */
.hero-h1-sub{display:block;font-size:.62em;line-height:1.1;margin-top:.1em}

/* Waarom: de vloot vaart door de hele breedte. Links achter de kop dempt de
   scrim de grootste boot tot silhouet, rechts blijven de zeilen zichtbaar. */

/* Gesplitste sectie: kop links, inhoud rechts, bovenaan uitgelijnd. */
.split-top{display:grid;gap:32px}
@media(min-width:1024px){.split-top{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}
.split-top h2{font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1.2;letter-spacing:-.01em}
.split-top .prose p{font-size:1.125rem;line-height:1.7;color:rgba(31,60,78,.9)}
.split-top .prose p+p{margin-top:22px}
.split-top .prose strong{font-weight:600;color:var(--text)}
.canvas .split-top h2{color:var(--ink-light)}
.canvas .split-top .prose p{color:var(--ink-light-2)}
.canvas .split-top .prose strong{color:var(--ink-light)}

/* ============ platform ============ */
/* Hero: dezelfde vloot als op home, maar in de lagere sub-hero. Iets naar
   rechts uitgesneden, zodat de kop links niet op de grootste boot valt. */
.hero .hl{color:var(--primary-soft)}
.btn .arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}

/* Architectuur: twee lagen als balken over de volle breedte, daaronder de
   flow op één lijn met stippen, net als de route op home. Op smal loopt de
   lijn verticaal langs de linkerkant. Staat op de lichte grond, dus de
   kleuren zijn die van inkt op ivoor: donkere oker in plaats van lichte. */
.arch-badge{display:inline-block;margin-right:6px;padding:1px 10px;border:1px solid var(--primary);border-radius:999px;
  font-family:var(--font-mono);font-size:.75rem;color:var(--warm-deep);text-decoration:none;vertical-align:1px;transition:background-color .15s}
.arch-badge:hover{background:rgba(232,191,110,.12)}
/* De architectuur als één geheel: een omlijnd vlak met bovenin een balk die
   zegt welke boot je ziet. Daarbinnen de twee lagen en de flow, zodat het
   leest als één diagram in plaats van drie losse blokken die toevallig onder
   elkaar staan. Het vlak zelf heeft geen eigen grond: de ivoren pagina schijnt
   erdoor, zodat de witte lagen erin blijven opvallen. */
.arch{margin-top:56px;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.arch-bar{padding:12px 22px;background:var(--ivory-2);border-bottom:1px solid var(--rule)}
.arch-body{padding:22px}
@media(min-width:900px){.arch-body{padding:28px}}
.arch-layers{display:grid;gap:10px}
.arch-layer{display:grid;gap:4px;padding:18px 22px;background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:var(--radius)}
@media(min-width:900px){.arch-layer{grid-template-columns:13rem 16rem 1fr;gap:24px;align-items:baseline}}
.arch-layer-gold{background:rgba(201,138,31,.09);border-left-color:var(--primary)}
.arch-step{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.75rem;color:var(--warm-deep)}
.arch-tool{font-family:var(--font-display);font-size:1.25rem;line-height:1.25;color:var(--text)}
/* In de flow is een kolom maar een zesde breed. Op 1,25rem breken
   'DuckDB + DuckLake' en 'AI-agents · dashboards' over twee regels; een
   maat kleiner houdt elke toolregel op één regel. De lagen erboven staan
   in brede kolommen en houden hun volle maat. */
.arch-flow .arch-tool{font-size:1.05rem}
.arch-flow{position:relative;display:grid;gap:28px;margin-top:40px;padding-left:28px}
.arch-flow::before{content:'';position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:rgba(31,60,78,.25)}
.arch-flow::after{content:'';position:absolute;left:1px;bottom:6px;width:7px;height:7px;border-top:1px solid rgba(31,60,78,.45);border-right:1px solid rgba(31,60,78,.45);transform:rotate(135deg)}
.arch-node{position:relative;display:flex;flex-direction:column;gap:6px}
.arch-node::before{content:'';position:absolute;left:-28px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--primary)}
.arch-src::before{background:var(--ivory);border:1.5px solid rgba(31,60,78,.45)}
.arch-src .arch-step{color:var(--text-dim)}
.arch-out::before{left:-30px;top:2px;width:13px;height:13px;background:var(--warm-deep)}
@media(min-width:1024px){
  .arch-flow{grid-template-columns:repeat(6,1fr);gap:28px;padding-left:0;padding-top:34px}
  .arch-flow::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .arch-flow::after{left:auto;right:1px;top:-3px;bottom:auto;transform:rotate(45deg)}
  .arch-node::before{left:0;top:-38px}
  .arch-out::before{left:0;top:-40px}
}

/* De boten: twee kolommen met een verticale haarlijn, de Valk iets stiller. */
.boats{display:grid;gap:48px;margin-top:56px}
/* De scheidslijn stond op zeven twaalfde; dat drukte de Valk ver naar
   rechts in een smalle kolom. Nu precies in het midden: de twee boten
   krijgen evenveel ruimte. Het verschil tussen 'nu' en 'verwacht' staat
   al in het label en de gestippelde streep erboven. */
@media(min-width:1024px){.boats{grid-template-columns:1fr 1fr;gap:0}}
@media(min-width:1024px){.boat{padding-right:56px}.boat+.boat{padding-right:0;padding-left:56px;border-left:1px solid var(--rule-dark)}}
@media(max-width:1023px){.boat+.boat{padding-top:48px;border-top:1px solid var(--rule-dark)}}
/* 'Voor middelgrote organisaties.' telt 30 tekens. Twee dingen braken die
   kop: de max-width van 22ch sneed hem sowieso af, en op 2,3rem paste hij
   niet in de kolom. Een maat kleiner en een ruimere max-width houden
   beide koppen op één regel. */
.boat h3{font-size:clamp(1.5rem,2.3vw,1.95rem);line-height:1.2;letter-spacing:-.01em;color:var(--ink-light);max-width:30ch}
.boat>p{margin-top:20px;font-size:1.0625rem;line-height:1.7;color:var(--ink-light-2);max-width:60ch}
.boat-actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.boat-upcoming .kicker::before{background:none;border-top:2px dashed var(--primary-soft)}
.boat-upcoming h3{color:var(--ink-light-2)}

/* Vergelijking: haarlijntabel, de kolom van de Optimist wit uitgelicht. */
.cmp-scroll{margin-top:48px;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Gewone gegevenstabel, voor de verwerkingen op de privacyverklaring. Anders
   dan .cmp is dit geen vergelijking van twee kolommen, dus geen uitgelichte
   kolom en geen okeren lijn onder de kop. */
.cmp-table{width:100%;min-width:40rem;border-collapse:collapse;font-size:.9375rem;line-height:1.55}
.cmp-table thead th{padding:14px 18px 12px;border-bottom:1px solid var(--rule);text-align:left;
  vertical-align:bottom;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:500;color:var(--warm-deep)}
.cmp-table tbody tr+tr th,.cmp-table tbody tr+tr td{border-top:1px solid var(--rule)}
.cmp-table tbody th{width:28%;padding:13px 18px 13px 0;text-align:left;font-weight:500;
  color:var(--text);vertical-align:top}
.cmp-table tbody td{padding:13px 18px;color:rgba(31,60,78,.9);vertical-align:top}
.cmp{width:100%;min-width:44rem;border-collapse:collapse;font-size:.9375rem;line-height:1.5}
.cmp thead th,.cmp thead td{padding:18px 20px 16px;border-bottom:2px solid var(--primary);text-align:left;vertical-align:bottom}
.cmp thead th{font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1.2;color:var(--text)}
.cmp thead th span{display:block;margin-top:4px;font-family:var(--font-mono);font-size:.72rem;color:var(--warm-deep)}
.cmp tbody tr{border-bottom:1px solid var(--rule)}
.cmp tbody th{width:28%;padding:14px 20px 14px 0;text-align:left;font-weight:500;color:var(--text);vertical-align:top}
.cmp tbody td{padding:14px 20px;color:var(--text-muted);vertical-align:top}
.cmp thead th:nth-of-type(1),.cmp tbody td:nth-of-type(1){background:var(--white);color:var(--text)}
.cmp thead th:nth-of-type(1){color:var(--text)}
/* De vergelijking is een vinkjestabel: per regel of de Optimist en de Valk
   hem hebben. De twee kolommen zijn even breed en gecentreerd, het vinkje in
   petrol en het streepje gedempt. Wie de tabel niet ziet krijgt naast elk
   teken het woord ja of nee te horen; het teken zelf staat op aria-hidden,
   anders leest een schermlezer 'vinkje' of 'em-streepje' voor. */
.cmp-check tbody th{width:auto;padding-right:24px}
.cmp-check thead th,.cmp-check tbody td{width:21%;text-align:center}
.cmp-check tbody td{font-family:var(--font-mono);font-size:1.05rem}
.cmp-check .ja{color:var(--accent)}
.cmp-check .nee{color:var(--text-dim)}
/* Op een telefoon past de vinkjestabel gewoon: een kolom tekst en twee
   smalle kolommen met tekens. De minimumbreedte van .cmp zou de Optimist en
   de Valk buiten beeld schuiven, en dat die er nog staan zie je dan niet.
   Dus weg met die breedte, en koppen en marges wat kleiner. */
@media(max-width:639px){
  .cmp-check{min-width:0;font-size:.875rem}
  .cmp-check thead th,.cmp-check thead td{padding:12px 6px 10px}
  .cmp-check thead th{font-size:1.05rem}
  .cmp-check thead th span{font-size:.64rem}
  .cmp-check thead th,.cmp-check tbody td{width:24%}
  .cmp-check tbody th{padding:12px 12px 12px 0}
  .cmp-check tbody td{padding:12px 6px}
}
/* Alleen voor schermlezers. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* Afsluiter zonder bemanning: de knoppen rechts naast de vraag. */
.closer-end{margin-top:0}
@media(min-width:1024px){.closer-end{justify-content:flex-end}}

.block-link{color:var(--accent);font-weight:500;text-decoration:none}
.block-link::after{content:'\203A';margin-left:6px}
.block-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ============ Responsive ============ */
@media(max-width:1023px){
  .nav-links{display:none}
  .nav-right .btn{display:none}
  .mobile-toggle{display:flex}
  /* Zonder de titels blijven er twee kolommen over: logo links, knop rechts. */
  .nav-inner{grid-template-columns:1fr auto}
}
@media(max-width:640px){
  .section{padding:64px 0}
}

@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee-track{flex-wrap:wrap;width:auto;justify-content:center;gap:24px 40px}
  .card-media{transform:none}
}

/* ============ minimalistische home ============
   De home is teruggebracht tot beeld plus steekwoorden. De zinnen zijn eruit;
   wat overblijft zijn koppen, losse woorden en de beelden zelf.
   ========================================================= */

/* Steekwoorden: korte woorden op een regel, gescheiden door een okeren punt.
   Werkt op een <ul><li> en op een <span><span> (die laatste binnen een
   kaartlink, waar een lijst niet past). */
.keys{display:flex;flex-wrap:wrap;align-items:baseline;list-style:none;margin:0;padding:0;
  font-size:.9rem;line-height:1.55;color:var(--text-muted)}
.keys>*{display:inline-flex;align-items:baseline}
/* De punt hangt achter het woord en niet ervoor: breekt de regel af, dan blijft
   hij op de vorige regel staan in plaats van de nieuwe te openen. */
.keys>*:not(:last-child)::after{content:'·';padding:0 9px;color:var(--primary);font-weight:700}
.canvas .keys,.hero .keys{color:var(--ink-light-2)}
.canvas .keys>*:not(:last-child)::after,
.hero .keys>*:not(:last-child)::after{color:var(--primary-soft)}

/* Drie maten: groot in de hero, een maat kleiner bij de afsluiter, klein in de
   rest. En een gestapelde variant voor de smalle kolom in de footer. */
.keys-lg{font-size:clamp(1rem,1.7vw,1.25rem);color:rgba(238,244,247,.92)}
.keys-md{font-size:1.0625rem}

/* Plaatsing per sectie. */
.hero .keys-lg{margin-bottom:36px}
/* Zonder steekwoorden staan de knoppen direct onder de kop. De marge van de
   kop alleen is dan te krap; dit brengt de afstand terug op dezelfde 36px
   als met steekwoorden ertussen. In een grid tellen marges op in plaats
   van samen te vallen, dus 20 plus 16. */
.hero h1 + .hero-actions{margin-top:16px}
.step .keys{margin-top:8px;font-size:.875rem}
.promise .keys{margin-top:12px}
.closer .keys-md{margin-top:20px}
.card-text .keys{margin-top:8px;font-size:.82rem;color:rgba(238,244,247,.78)}

/* Productbeeld: het Kraaiennest groot in beeld, met een bijschrift van
   steekwoorden. Geen uitleg eronder, het scherm spreekt voor zich. */
.shot{margin-top:56px}
.shot-frame{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--rule);
  background:var(--deep-2);box-shadow:0 30px 70px -40px rgba(31,60,78,.55)}
.shot-frame video,.shot-frame img{width:100%;height:auto;display:block}
/* De lijst houdt de verhouding van de film zelf aan, 16:9. De poster is
   1200x644 en dus een tikje platter; object-fit snijdt dat verschil weg
   aan de rechterkant, waar alleen marge zit, zodat de zijbalk met het
   Optimist-merk links heel blijft. De grond van de lijst is wit in
   plaats van het donkerblauw van .shot-frame: piept er ergens een
   halve pixel doorheen, dan is dat geen zwarte streep meer. */
.shot-video{aspect-ratio:16/9;background:var(--white)}
.shot-video video{width:100%;height:100%;object-fit:cover;object-position:left center}
.shot-cap{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.shot-name{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.02em;color:var(--warm-deep)}
.shot-cap .keys{font-size:.82rem;color:var(--text-dim)}
/* Op donker: haarlijn en bijschrift om, en de slagschaduw eruit. Die schaduw
   is donkerblauw en doet op een donkerblauwe grond niets dan vervuilen. */
.canvas .shot-frame{border-color:var(--rule-dark);box-shadow:none}
.canvas .shot-name{color:var(--primary-soft)}
.canvas .shot-cap .keys{color:rgba(238,244,247,.65)}

/* De film in een donkerblauwe lijst met het merk erboven, zoals een
   productvideo: even breed als het architectuurblok erboven, speelt stil af
   met alleen pauze en opnieuw beginnen, en stopt aan het eind met een knop
   om opnieuw af te spelen. Geen poster; de lijst is het beeld. */
.promo{padding:24px 20px 18px;border-radius:24px;color:var(--ink-light);
  background:linear-gradient(180deg,var(--sea) 0,var(--deep) 16%,var(--deep) 84%,var(--sea) 100%);
  box-shadow:0 30px 70px -40px rgba(31,60,78,.55)}
@media(min-width:768px){.promo{padding:36px 48px 28px;border-radius:32px}}
.promo-head{text-align:center;margin-bottom:22px}
.promo-brand{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:clamp(1.35rem,3vw,1.8rem);letter-spacing:-.01em}
.promo-brand .logo-badge{width:1.4em;height:1.4em}
.promo-tag{margin:6px 0 0;color:var(--primary-soft);font-size:clamp(.95rem,1.6vw,1.1rem)}
.promo-screen{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--white)}
.promo-screen video{width:100%;height:100%;display:block;object-fit:cover;object-position:left center}
.promo-controls{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}
.promo-btn{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(238,244,247,.25);background:rgba(31,60,78,.6);color:var(--white);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s}
.promo-btn:hover{background:rgba(31,60,78,.85)}
.promo-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.promo-btn .i-play,.promo.is-paused .promo-btn .i-pause{display:none}
.promo.is-paused .promo-btn .i-play{display:block}
/* Aan het eind: het beeld iets gedimd en één knop in het midden. Het hele
   vlak is klikbaar; de kleine knoppen rechtsonder gaan zolang weg. */
.promo-replay{display:none;position:absolute;inset:0;width:100%;padding:0;border:0;cursor:pointer;
  place-items:center;background:rgba(31,60,78,.45);color:var(--white);font:inherit}
.promo-replay span{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;
  background:var(--primary);color:var(--deep);font-weight:600;font-size:.95rem;transition:background .15s}
.promo-replay:hover span{background:var(--primary-hover)}
.promo-replay:focus-visible span{outline:2px solid var(--white);outline-offset:3px}
.promo.is-ended .promo-replay{display:grid}
.promo.is-ended .promo-controls{display:none}
.promo-progress{margin-top:14px;height:3px;border-radius:2px;overflow:hidden;background:rgba(238,244,247,.18)}
.promo-progress span{display:block;width:0;height:100%;background:var(--primary);transition:width .25s linear}

/* Cijfertegels in vier kolommen: het getal is het beeld, het label een woord.
   Het pictogram staat erboven in plaats van ernaast. */
.kpis-4{grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:1024px){.kpis-4{grid-template-columns:repeat(4,1fr);gap:16px}}
.kpis-4 .kpi{padding:26px 24px 24px}
.kpi-icon{width:22px;height:22px;color:var(--accent);margin-bottom:16px}
.canvas .kpi-icon{color:var(--accent-soft)}
.kpis-4 .kpi-num{font-size:clamp(2rem,3.4vw,2.75rem);line-height:1}
.kpis-4 .kpi-label{margin-top:8px;font-size:.9rem}

/* ============ Donkere footer ============
   De footer draagt de klasse .canvas en krijgt daarmee dezelfde donkere grond
   en korrel als de secties erboven. De inkt moet dan om: de regels hieronder
   draaien alleen de kleuren die de lichte footer expliciet zet. Precies
   hetzelfde blauw als een donkere sectie, niet een tint dieper: op alle
   v5-pagina's volgt de footer op een lichte sectie, dus er valt niets te
   versmelten en de pagina houdt maar twee donkerblauwen.
   ========================================================= */
footer.canvas{background:var(--deep);border-top-color:var(--rule-dark)}
footer.canvas .footer-brand .nav-logo{color:var(--ink-light)}
footer.canvas .footer-col h3{color:var(--ink-light)}
footer.canvas .footer-col a{color:rgba(238,244,247,.7)}
footer.canvas .footer-col a:hover{color:var(--ink-light)}
footer.canvas .footer-bottom{border-top-color:var(--rule-dark);color:rgba(238,244,247,.55)}

/* ============ diensten en zelfbouw ============
   Deze twee pagina's stonden op styles.css. Wat ze nodig hadden en hier nog
   niet bestond staat hieronder, omgezet naar de tokens van v5: de tegels voor
   de diensten, de bouwstappen, de formulieren en de terminal.
   ========================================================= */

/* Twee kolommen, verticaal gecentreerd. Voor het aanmeldblok naast de
   terminal op zelfbouw. */
/* De twee kolommen beginnen bovenaan, niet in het midden. Met center werd
   de kortste kolom omlaag geduwd en begon de kop lager dan de terminal
   ernaast, en lager dan de koppen op de andere secties. */
.duo{display:grid;gap:40px;align-items:start}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr;gap:56px}}

/* Tegels: op diensten de dienst met zijn prijs, op zelfbouw de manieren om
   mee te doen. Zelfde vorm, andere inhoud. De knop staat altijd onderaan,
   ook als de ene tegel meer steekwoorden heeft dan de andere. */
.offers{display:grid;gap:16px;margin-top:48px}
@media(min-width:700px){.offers{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.offers{grid-template-columns:repeat(3,1fr)}}
/* Vier tegels blijven twee bij twee; drie kolommen laat er een alleen
   achter op de tweede rij. */
@media(min-width:1100px){.offers-2{grid-template-columns:1fr 1fr}}
.offer{display:flex;flex-direction:column;padding:28px 26px;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius)}
.offer-kicker{font-family:var(--font-mono);font-size:.75rem;color:var(--warm-deep)}
.offer-head{margin-top:10px;font-family:var(--font-display);font-size:1.4rem;line-height:1.25;color:var(--text)}
/* Het sterretje bij het pioniertarief verwijst naar de voetnoot eronder. */
.offer-head .star{color:var(--primary);font-weight:700}
.offer .keys{margin-top:14px}
.offer-foot{margin-top:auto;padding-top:24px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.offer-foot .btn{flex:1 1 auto}
/* De ingang van de pagina: de gratis demo draagt de okeren rand. */
.offer-lead{border-color:rgba(201,138,31,.5)}
/* Op de donkere grond, zoals de tegels op zelfbouw. */
.canvas .offer{background:rgba(238,244,247,.05);border-color:var(--rule-dark)}
.canvas .offer-kicker{color:var(--primary-soft)}
.canvas .offer-head{color:var(--ink-light)}
/* .canvas .offer overschrijft de rand van .offer-lead; op donker draagt
   die tegel de lichte oker, anders valt hij weg tussen de andere vier. */
.canvas .offer-lead{border-color:rgba(232,191,110,.5)}

/* De zeven bouwstappen: genummerde regels met een haarlijn ertussen, zoals de
   route op de home maar dan onder elkaar omdat het er zeven zijn. */
.buildsteps{margin-top:48px;border-top:1px solid var(--rule)}
.buildstep{display:grid;grid-template-columns:2.25rem 1fr;gap:6px 16px;
  padding:18px 0;border-bottom:1px solid var(--rule)}
@media(min-width:768px){.buildstep{grid-template-columns:2.25rem 20rem 1fr;gap:24px;align-items:baseline}}
.buildstep-n{font-family:var(--font-mono);font-size:.78rem;color:var(--warm-deep)}
.buildstep h3{font-family:var(--font-display);font-weight:400;font-size:1.2rem;line-height:1.3;color:var(--text)}
/* Op donker: de haarlijnen en de inkt om. De donkere oker van het nummer valt
   weg tegen het blauw, daar hoort de lichte variant. */
.canvas .buildsteps{border-top-color:var(--rule-dark)}
.canvas .buildstep{border-bottom-color:var(--rule-dark)}
.canvas .buildstep-n{color:var(--primary-soft)}
.canvas .buildstep h3{color:var(--ink-light)}
@media(max-width:767px){.buildstep h3,.buildstep .keys{grid-column:2}}

/* ---- Formulier op licht (het demoformulier) ---- */
.form-card{max-width:36rem;margin:40px auto 0;padding:36px;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius)}
.form-row{margin-bottom:20px}
.form-row label{display:block;font-size:.85rem;font-weight:500;color:var(--text);margin-bottom:6px}
.form-optional{color:var(--text-dim);font-weight:400}
.form-row input,.form-row textarea{width:100%;padding:11px 14px;border:1px solid var(--rule);
  border-radius:var(--radius);font-family:inherit;font-size:.93rem;color:var(--text);
  background:var(--white);transition:border-color .15s,box-shadow .15s}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--text-dim)}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(28,122,150,.15)}
.form-row textarea{resize:vertical;min-height:90px;line-height:1.5}
.form-submit{width:100%;height:48px;margin-top:8px;cursor:pointer;
  background:var(--primary);border:1px solid var(--primary);border-radius:var(--radius);
  font-family:var(--font-sans);font-size:.9375rem;font-weight:500;color:var(--deep);
  transition:background-color .15s,border-color .15s}
.form-submit:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.form-submit:disabled{opacity:.6;cursor:not-allowed}
.form-note{margin-top:14px;font-family:var(--font-mono);font-size:.75rem;color:var(--text-dim);text-align:center}

/* Toestemming voor de privacyverklaring. Het vakje is verplicht: een browser
   blokkeert het versturen dan zelf, nog voordat het submit-event afgaat, dus
   de fetch in main.js komt niet eens aan bod. De hele regel is het label, dus
   klikken op de tekst werkt ook. De link opent in een nieuw tabblad; anders
   raakt de bezoeker zijn ingevulde velden kwijt. */
.form-consent{display:flex;align-items:flex-start;gap:12px;margin-bottom:24px}
.form-consent input{flex-shrink:0;width:18px;height:18px;margin-top:1px;
  accent-color:var(--accent);cursor:pointer}
.form-consent label{font-size:.875rem;line-height:1.5;color:var(--text-muted);cursor:pointer}
.form-consent a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
/* Wordt door main.js op display:block gezet als het versturen lukt. */
.form-success{display:none;text-align:center;padding:32px 20px}
.form-success svg{width:44px;height:44px;color:var(--accent);margin:0 auto 16px;display:block}
.form-success h4{font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--text);margin-bottom:8px}
.form-success p{font-size:.92rem;color:var(--text-muted)}

/* ---- Mailveld (mis geen module) ---- */
/* Zoals overal: de basis staat op licht, .canvas draait hem naar donker. Het
   veld stond eerst alleen op donker, maar 'Aan de slag' is een lichte sectie
   geworden en het vinkje en de PyPI-link verdwenen daarmee in het wit. */
.mail-form{display:flex;flex-wrap:wrap;gap:10px;max-width:26rem;margin-top:26px}
.mail-form input[type="email"]{flex:1 1 13rem;padding:0 14px;height:48px;border-radius:var(--radius);
  border:1px solid var(--rule);background:var(--white);color:var(--text);
  font-family:inherit;font-size:.93rem}
.mail-form input[type="email"]::placeholder{color:var(--text-dim)}
.mail-form input[type="email"]:focus{outline:none;border-color:var(--accent)}
/* Het mailveld en de knop staan naast elkaar in een flexrij; het vinkje
   hoort daaronder over de volle breedte, niet ernaast. */
.mail-form .form-consent{flex:1 0 100%;margin:4px 0 0}
.canvas .mail-form .form-consent label{color:var(--ink-light-2)}
.canvas .mail-form .form-consent a{color:var(--primary-soft)}
/* Wordt door main.js op display:flex gezet. */
.mail-success{display:none;align-items:center;gap:10px;font-size:.94rem;color:var(--text)}
.mail-success svg{width:20px;height:20px;color:var(--accent);flex-shrink:0}

.canvas .mail-form input[type="email"]{border-color:var(--rule-dark);background:rgba(238,244,247,.08);color:var(--ink-light)}
.canvas .mail-form input[type="email"]::placeholder{color:rgba(238,244,247,.5)}
.canvas .mail-form input[type="email"]:focus{border-color:var(--primary-soft)}
.canvas .mail-success{color:var(--ink-light)}
.canvas .mail-success svg{color:var(--primary-soft)}

/* ---- Terminal: overgenomen uit styles.css, eigen zwartblauw dat los staat
        van de gronden van de pagina. ---- */
.terminal{background:#0F2028;border:1px solid #223842;border-radius:var(--radius);overflow:hidden;
  font-family:var(--font-mono);font-size:.85rem;line-height:1.75}
.terminal-head{padding:12px 16px;background:#0A1820;display:flex;align-items:center;gap:8px;border-bottom:1px solid #223842}
.terminal-head .dot{width:11px;height:11px;border-radius:50%;background:#2E4650}
.terminal-head .title{flex:1;text-align:center;color:#7593A0;font-size:.74rem}
.terminal-body{padding:22px;color:var(--ink-light-2)}
.terminal-body .line{margin-bottom:3px;white-space:pre-wrap}
.terminal-body .prompt{color:var(--accent-soft)}
.terminal-body .cmd{color:var(--white)}
.terminal-body .ok{color:var(--primary-soft)}
.terminal-body .warm-out{color:var(--primary)}
.terminal-body .comment{color:#7593A0;font-style:italic;font-size:.8rem}
.terminal :focus-visible{outline-color:var(--accent-soft)}
.code-chip{display:block;margin-top:14px;padding:10px 14px;background:#0F2028;border:1px solid #223842;
  border-radius:var(--radius);font-family:var(--font-mono);font-size:.84rem;color:var(--ink-light-2);
  white-space:nowrap;overflow-x:auto}
.code-chip::before{content:"$ ";color:var(--accent-soft);user-select:none}

/* De steekwoorden boven het demoformulier. */
.demo-keys{margin-top:20px}

/* De regel onder het mailveld, met de verwijzing naar PyPI. Dit is als enige
   .keys-item een hele zin met een link erin. .keys>* is inline-flex, voor de
   punt tussen de steekwoorden, en in een flexbox verdwijnt de spatie tussen de
   tekst en de <a>: 'op' en 'PyPI' plakken dan aan elkaar. Deze ene regel loopt
   dus als gewone tekst. */
.mail-foot>li{display:inline}
.mail-foot{margin-top:18px;font-size:.85rem}
.mail-foot a{color:var(--accent);text-decoration:none;font-weight:500}
.mail-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.canvas .mail-foot a{color:var(--primary-soft)}

/* ============ Ankerbalk onder de hero ============
   Op alle pagina's behalve de home staat in de band onder de hero de
   navigatie binnen de pagina, in plaats van de componentencarrousel. Even
   hoog als die carrousel, zodat de hero overal dezelfde maat houdt. */
.anchors{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;
  padding:0 var(--gutter);max-width:var(--maxw);margin:0 auto;width:100%}
.anchors::-webkit-scrollbar{display:none}
.anchors a{display:flex;align-items:center;gap:10px;padding:16px 0;margin-right:40px;
  white-space:nowrap;text-decoration:none;font-size:.9375rem;font-weight:500;
  color:rgba(238,244,247,.72);border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s}
.anchors a:hover{color:var(--ink-light);border-bottom-color:var(--primary)}
/* Op een telefoon past de balk vaak niet op één regel, en dat de rest er
   rechts nog achter zit zie je aan niets. Daar lopen de links dus door op
   een volgende regel: alles in beeld, niets om naar te zoeken. De band wordt
   dan iets hoger dan de carrousel op de home; dat is de prijs. */
@media(max-width:767px){
  .anchors{flex-wrap:wrap;overflow-x:visible;column-gap:24px;padding-top:6px;padding-bottom:6px}
  .anchors a{margin-right:0;padding:9px 0;font-size:.875rem}
}

/* ============ Kortere hero ============
   Elke pagina met deze klasse opent lager, zodat de sectie eronder al
   aanzet zodra je de pagina opent. Niet zo laag dat het beeld alleen nog
   lucht en zeilen toont: bij 61svh blijven de rompen en de bemanning in
   beeld, en dat is waar de foto het van moet hebben. De kop houdt zijn
   volle maat.
   ========================================================= */
.hero-compact{min-height:68svh}
@media(min-width:768px){.hero-compact{min-height:61svh}}
/* Laag uitgesneden. Bij deze vlakkere hero snijdt cover een deel van de
   hoogte weg; op 80% gaat dat er grotendeels aan de bovenkant af, in de
   lucht, met een strook zee eronder weg. Zo blijven de rompen en de
   bemanning in beeld en is er meer van de zeiltoppen te zien. */
.hero-compact .hero-media img{object-position:62% 80%}
/* En die rompen liggen laag, precies waar de scrim de foto naar de band toe
   dichtsmeert. Onderin dus minder zwart, en het beeld zelf een tik lichter.
   De kop blijft leesbaar: die staat links, waar de horizontale scrim werkt. */
.hero-compact .hero-media img{filter:brightness(.74) saturate(.82) contrast(1.04)}
.hero-compact .hero-scrim-y{background-image:linear-gradient(rgba(31,60,78,.3) 0%,rgba(31,60,78,0) 34%,rgba(31,60,78,.16) 64%,rgba(31,60,78,.72) 100%)}

/* ============ Label onder de kop, GitHub in de balk ============ */
/* Het sectielabel staat onder de kop in plaats van erboven: klein,
   in kleine letters en zonder het streepje ervoor. De oker blijft, dat is wat
   het label herkenbaar maakt. */
.kicker-under{margin-top:12px;margin-bottom:0}
.kicker-under::before{display:none}
/* Staat het label direct boven een rij steekwoorden in plaats van boven een
   sectieblok, dan is er geen marge van dat blok om op te leunen. */
.kicker-under + .keys{margin-top:14px}

/* GitHub naast de demoknop, rechtsboven. Alleen het merkteken: de balk is
   smal en het woord voegt daar niets toe. */
.nav-gh{display:flex;align-items:center;padding:0 10px;color:rgba(238,244,247,.7);transition:color .15s}
.nav-gh:hover{color:var(--ink-light)}
/* De taalwissel: een wereldbol met de taal waar hij heen gaat. Blijft ook
   op smal staan, anders dan het GitHub-merkteken: wie op de verkeerde taal
   binnenkomt heeft die knop juist het hardst nodig. */
.nav-lang{display:flex;align-items:center;gap:6px;padding:0 10px;text-decoration:none;
  color:rgba(238,244,247,.7);font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.04em;transition:color .15s}
.nav-lang:hover{color:var(--ink-light)}
.nav-lang svg{width:17px;height:17px;flex-shrink:0}
.nav-gh .gh-icon{width:20px;height:20px;margin-right:0}
@media(max-width:1023px){.nav-gh{display:none}}

/* De merkregel in de donkere footer. */
footer.canvas .footer-brand p{color:rgba(238,244,247,.7)}
/* Het vlaggetje en de privacylink staan op dezelfde regel als de herkomst. */
.footer-bottom .flag{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}

/* De beloften op een donkere grond. Hadden alleen inkt voor licht, waardoor de
   koppen in de exit-sectie van diensten in donkerblauw op donkerblauw
   stonden. Nu ook nodig voor de autonomie-sectie op de home. */
.canvas .promise{border-color:var(--rule-dark)}
.canvas .promise h3{color:var(--ink-light)}
.canvas .promise p{color:var(--ink-light-2)}
/* De cijferrij sluit die sectie af; de sectiepadding geeft al lucht genoeg. */
.canvas .kpis-4{margin-bottom:0}