/* Projectanker — zakelijk productdesign zonder decoratieve SaaS-template-esthetiek.
   Systeem: wit en koelgrijs, kobalt als functioneel accent, compacte systeemtypografie. */

:root {
  --paper:      #FFFFFF;
  --paper-hi:   #FFFFFF;
  --surface:    #F5F7FA;
  --ink:        #111827;
  --ink-muted:  #5B6472;
  --line:       #D9DEE7;
  --accent:     #2A49C8;
  --accent-ink: #1D34A0;
  --night:      #111827;
  --night-text: #F3F4F6;
  --radius:     6px;
  --shadow-shot: 0 18px 42px -28px rgb(17 24 39 / .35);
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--paper); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── Typografie ── */
h1, h2 { font-family: var(--sans); font-weight: 750; letter-spacing: -0.035em; margin: 0; }
h1 { font-size: clamp(2.35rem, 5vw, 3.85rem); line-height: 1.03; max-width: 18ch; }
h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.12; }
.kicker {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 20px;
}
p { margin: 0; }
.muted { color: var(--ink-muted); }
.num { font-feature-settings: "tnum"; }

a.textlink { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 120ms ease-out; }
a.textlink:hover { color: var(--accent-ink); }

/* ── Knoppen ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 14px 26px; border-radius: var(--radius);
  text-decoration: none; transition: background 120ms ease-out;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-ink); }
.btn--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--ondark { background: var(--paper); color: var(--night); }
.btn--ondark:hover { background: #fff; }

/* ── Header ── */
.site-header { border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .96); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: var(--radius); background: var(--accent); display: grid; place-items: center; }
.site-nav { display: flex; align-items: center; gap: 26px; font-size: 14px; }
.site-nav a { text-decoration: none; color: var(--ink-muted); transition: color 120ms ease-out; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.btn { padding: 9px 18px; font-size: 14px; color: #fff; }
.site-nav a.btn:hover { color: #fff; }
@media (max-width: 720px) {
  .site-nav { gap: 14px; }
  .hide-m { display: none; }
  .site-header .wrap { gap: 16px; }
}

/* ── Mobiel: vaste CTA onderin (alleen op smalle schermen; schuift in beeld
   zodra de hero-knop is weggescrold — zie het script onderaan index.html) ── */
#mobile-cta { display: none; }
@media (max-width: 720px) {
  #mobile-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform 200ms ease-out;
  }
  #mobile-cta.show { transform: translateY(0); }
  #mobile-cta .btn { width: 100%; justify-content: center; }
}

/* ── Hero ──
   Foto (avondlicht op zee, zeilboot) + donkerblauwe gradient eroverheen zodat
   de tekst leesbaar blijft — bewust géén losse overlay-laag/pseudo-element:
   de gradient zit als eerste laag IN dezelfde background-image-stack als de
   foto, dus hij ligt altijd achter de gewone content zonder z-index-gedoe.
   Bron: pixabay.com/photos/boat-8846578 (ValterM), Pixabay Content License. */
.hero {
  padding: 80px 0 0;
  overflow: hidden;
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(8,16,32,.92) 0%, rgba(8,16,32,.78) 30%, rgba(8,16,32,.55) 58%, rgba(8,16,32,.32) 100%),
    url('/images/sea-hero.webp');
  background-size: cover;
  background-position: center 66%;
  background-repeat: no-repeat;
}
.hero-inner { max-width: 720px; }
.hero-inner h1 { color: #fff; }
.hero p.sub { font-size: clamp(1.02rem, 1.8vw, 1.18rem); color: rgba(255,255,255,.86); max-width: 38em; margin: 24px 0 32px; }
.hero .fine { font-size: 13.5px; color: rgba(255,255,255,.66); margin-top: 18px; }
.hero .fine a.textlink { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.hero .fine a.textlink:hover { color: rgba(255,255,255,.8); }
.hero-shot {
  margin-top: 56px;
  margin-left: max(0px, calc((100vw - 1120px) / 2 + 96px));
  padding-left: 24px;
  position: relative; z-index: 1;
}
.hero-shot .frame {
  border: 1px solid var(--line);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  box-shadow: 0 24px 56px -20px rgb(4 8 20 / .55);
  background: var(--paper-hi);
  overflow: hidden;
}
.hero-shot figcaption { font-size: 13px; color: var(--ink-muted); padding: 14px 24px 0 0; }
/* Golf: de foto "breekt" onderin de hero over in de witte pagina — de
   bestaande margin-bottom:104px op .captions geeft precies de ruimte die de
   golf nodig heeft, zonder over de bijschrift-tekst heen te vallen. */
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 80px; display: block; z-index: 1; pointer-events: none; }

/* ── Demo-video ── */
.demo-frame {
  margin-top: 48px;
  max-width: 880px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-shot);
  background: var(--paper-hi);
  overflow: hidden;
}
.demo-frame video { display: block; width: 100%; height: auto; }
.demo-caption { font-size: 13.5px; color: var(--ink-muted); margin-top: 20px; max-width: 62ch; }

/* ── Secties ── */
section.block { padding: 80px 0; }
section.block + section.block { border-top: 1px solid var(--line); }
@media (min-width: 900px) { section.block { padding: 96px 0; } }

/* Functie-index 01–05 */
.index-list { margin-top: 44px; border-top: 1px solid var(--line); max-width: 880px; }
.index-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 24px;
  padding: 30px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.index-row .no { font-family: var(--sans); font-weight: 700; font-size: 1.35rem; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.index-row h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.index-row p { font-size: 15px; color: var(--ink-muted); max-width: 56ch; }
@media (max-width: 620px) { .index-row { grid-template-columns: 56px 1fr; } .index-row .no { font-size: 1.4rem; } }

/* Donkere capaciteitssectie — zelfde zeefoto als de hero, ditmaal zwaar
   afgedekt (het is de rustige, "alles onder controle"-tegenhanger van de
   dramatische hero-opname), zodat het motief terugkeert zonder de tekst te
   overschreeuwen. */
.night {
  background-image:
    linear-gradient(160deg, rgba(10,17,33,.93) 0%, rgba(10,17,33,.90) 55%, rgba(10,17,33,.86) 100%),
    url('/images/sea-hero.webp');
  background-size: cover;
  background-position: center 40%;
  color: var(--night-text);
  overflow: hidden;
  position: relative;
}
.night .kicker { color: color-mix(in srgb, var(--night-text) 60%, transparent); }
.night h2 { color: #fff; }
.night .cols { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .night .cols { grid-template-columns: 5fr 6fr; } }
.night p.lead { color: color-mix(in srgb, var(--night-text) 85%, transparent); font-size: 1.05rem; max-width: 46ch; }
.night ul.signals { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; font-size: 14.5px; }
.night ul.signals li { display: flex; gap: 10px; align-items: baseline; }
.night .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; transform: translateY(-1px); }
.night .shot { border: 1px solid rgb(255 255 255 / .14); border-radius: var(--radius); overflow: hidden; }
/* Golfranden boven/onder de nachtsectie — dezelfde vorm als de hero-golf,
   gespiegeld/ondersteboven waar nodig, zodat het overgangsmotief doorloopt. */
.night-wave-top, .night-wave-bottom { position: absolute; left: 0; right: 0; width: 100%; height: 80px; display: block; pointer-events: none; z-index: 1; }
.night-wave-top { top: -1px; transform: scaleY(-1); }
.night-wave-bottom { bottom: -1px; }
/* section.block + section.block geeft standaard een grijs lijntje tussen
   secties — hier ongewenst, de golf zelf is al de overgang. !important nodig
   omdat die combinator-regel specifieker is dan een kale klasseselector. */
.night { border-top: none !important; }
.night + section.block { border-top: none; }

/* Anker-watermerk in de prijssectie — hier verwijst de copy zelf al naar
   "een anker voor je begroting", dus dit is de plek waar het motief
   letterlijk bij de tekst hoort, in plaats van decoratie zonder aanleiding. */
#prijzen { position: relative; overflow: hidden; }
.anchor-wm-large {
  position: absolute; top: 50%; right: -70px; width: 420px; height: 420px;
  transform: translateY(-50%);
  color: var(--accent); opacity: .07;
  pointer-events: none;
}
@media (max-width: 900px) { .anchor-wm-large { display: none; } }
@media (min-width: 900px) { .night .shot { margin-right: -120px; } }

/* Prijsladder */
.ladder { margin-top: 56px; border: 1px solid var(--line); background: var(--paper-hi); }
.tier {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 32px;
  padding: 30px 32px; border-bottom: 1px solid var(--line); align-items: center;
}
.tier:last-of-type { border-bottom: none; }
.tier--accent { border-top: 2px solid var(--accent); }
.tier .name { font-family: var(--sans); font-weight: 600; font-size: 16px; }
.tier .desc { font-size: 14px; color: var(--ink-muted); max-width: 52ch; margin-top: 2px; }
.tier .price { font-family: var(--sans); font-weight: 750; font-size: 1.75rem; letter-spacing: -0.025em; text-align: right; white-space: nowrap; }
.tier .price small { font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink-muted); display: block; }
.tier .act { grid-column: 2; text-align: right; }
.tier .act .btn { padding: 10px 20px; font-size: 14px; }
.ladder-foot { font-size: 12.5px; color: var(--ink-muted); padding: 16px 32px; border-top: 1px solid var(--line); background: var(--surface); }
@media (max-width: 640px) {
  .tier { grid-template-columns: 1fr; }
  .tier .price { text-align: left; }
  .tier .act { grid-column: 1; text-align: left; }
}

/* FAQ + maker */
.faq-grid { display: grid; gap: 64px; margin-top: 56px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 2fr 1fr; } }
dl.faq { margin: 0; }
dl.faq > div { padding: 26px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
dl.faq dt { font-weight: 600; font-size: 15.5px; }
dl.faq dd { margin: 0; font-size: 14.5px; color: var(--ink-muted); max-width: 62ch; }
.maker { border-top: 1px solid var(--line); padding-top: 26px; font-size: 14.5px; color: var(--ink-muted); }
.maker h3 { font-family: var(--sans); font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
.maker p { margin-bottom: 12px; }

/* Slot-CTA */
.finale { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.finale h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 36px 0 44px; font-size: 12.5px; color: var(--ink-muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.site-footer a { text-decoration: none; color: var(--ink-muted); margin-right: 22px; transition: color 120ms ease-out; }
.site-footer a:hover { color: var(--ink); }

/* Demo-sectie bijschriften */
/* .captions leeft uitsluitend in de hero (op de foto) — vandaar lichte tekst i.p.v. var(--ink-muted). */
.captions { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 720px) { .captions { grid-template-columns: repeat(3, 1fr); } }
.captions div { border-top: 1px solid rgba(255,255,255,.22); padding-top: 14px; font-size: 14px; color: rgba(255,255,255,.7); }
.captions strong { display: block; color: #fff; font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.demo-shot { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-hi); box-shadow: var(--shadow-shot); margin-top: 56px; }

/* ── Subpagina's (handleiding, privacy, voorwaarden) ─────────────────────────
   Redactionele artikelstijl op dezelfde tokens; semantische HTML, geen utility-classes. */
.prose { max-width: 760px; margin: 0 auto; padding: 72px 24px 104px; }
.prose h1 { margin-bottom: 12px; font-size: clamp(2.2rem, 4.6vw, 3.2rem); }
.prose .intro { font-size: 1.1rem; color: var(--ink-muted); max-width: 40em; margin-bottom: 48px; }
.prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 64px 0 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.prose h3 { font-family: var(--sans); font-size: 16.5px; font-weight: 600; margin: 28px 0 8px; }
.prose p, .prose li { font-size: 15.5px; color: #2A3342; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent-ink); }
.prose strong { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 0 14px; }
/* Smalle schermen: een brede (vergelijkings)tabel scrolt binnen zijn eigen
   kader — nooit de hele pagina horizontaal (Ed zag een scrollbalk op mobiel). */
@media (max-width: 720px) {
  .prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* Lange Nederlandse samenstellingen ("Capaciteitsplanning") passen op smalle
   schermen niet in één regel — afbreken i.p.v. de pagina breed duwen. */
.prose h1, .prose h2, .hero-inner h1 { overflow-wrap: break-word; hyphens: auto; }

/* Minischermen (≤380px): header-nav en knoppen pasten niet (site-nav liep
   67px buiten beeld op een iPhone SE) — compacter, en knoppen mogen wrappen. */
@media (max-width: 380px) {
  .site-nav { gap: 8px; }
  .site-nav a { font-size: 13px; }
  .site-nav a.btn { padding: 8px 12px; font-size: 13px; }
  .btn { white-space: normal; text-align: center; }
}
.prose th, .prose td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); }
.prose kbd { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: var(--paper-hi); border: 1px solid var(--line); border-radius: var(--radius); padding: 1px 6px; }
.prose .toc { border: 1px solid var(--line); background: var(--paper-hi); padding: 20px 24px; margin-bottom: 24px; }
.prose .toc p { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 10px; }
.prose .toc ul { list-style: none; padding: 0; margin: 0; columns: 2; gap: 32px; }
.prose .toc a { text-decoration: none; color: var(--ink); font-size: 14.5px; }
.prose .toc a:hover { color: var(--accent); }
@media (max-width: 620px) { .prose .toc ul { columns: 1; } }
.prose details { border-top: 1px solid var(--line); padding: 14px 0; }
.prose summary { font-weight: 600; font-size: 15.5px; cursor: pointer; }
.prose details p { margin-top: 10px; }

/* Telefoons: de hero-kop was drie regels van 40px+ en duwde de knop onder de
   vouw (72% van de advertentieklikken in de testweek van augustus kwam van een
   telefoon). Compacter, zodat kop + één zin + knop samen in het eerste scherm
   passen. */
@media (max-width: 720px) {
  .hero { padding-top: 56px; }
  /* hyphens: manual — 'projectplan-ning' met afbreekstreepje oogt slordig;
     liever één regel extra met 'projectplanning.' heel. */
  .hero-inner h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); line-height: 1.12; hyphens: manual; }
  .hero p.sub { font-size: 1rem; margin: 16px 0 22px; }
  .hero .fine { font-size: 13px; margin-top: 14px; }
}