/*
  Gedeelde stijl van hypamoon.com buiten de homepage (6 oktober 2026).
  Dit bestand: de tokens, de gedeelde kop en de gedeelde voet. De lichte pagina's
  laden daarnaast /dag.css. Pagina's onder /product, /solutions, /for, /pricing, /examples, /trust en /connect
  staan in het lichte dag-palet dat de homepage al heeft in het contactblok
  (besluit Forge d38d2a9b). Dezelfde letters (Archivo, Geist, Geist Mono uit /fonts),
  rechte knoppen, haarlijnen in plaats van kaarten. De kop en de voet zijn gedeeld met
  Say this, Support, Privacy en Terms: daar draait de kop in de donkere variant (.nacht).
  De pagina's zelf komen uit scripts/paginas.mjs; niet met de hand bewerken.
*/
:root{
  --dag:#e9ecef; --dag-ink:#15191d; --dag-mist:#565c63; --dag-lijn:rgba(21,25,29,.16); --dag-lijn-sterk:rgba(21,25,29,.34);
  --wit:#fbfbfc; --dag-accent:#2b5f86;
  --ruimte:#060708; --paneel:#0e1012; --paneel-2:#15181b; --ink:#f4f4f2; --mist:#a3a8ae; --tekst-2:#c7cacf;
  --lijn:rgba(255,255,255,.13); --lijn-sterk:rgba(255,255,255,.26); --atmosfeer:#9cc4e4; --zand:#e6d8b8; --groen:#7fdcaa;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --tekst:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --gemak:cubic-bezier(.16,1,.3,1);
  --goot:clamp(16px,3.4vw,48px);
  --kop-hoogte:72px;
}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hm-wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--goot)}
.hm-kop .knop,.hm-blad .knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 .875rem/1.4 var(--tekst);letter-spacing:.01em;text-decoration:none;border:1px solid var(--k-lijn);background:transparent;cursor:pointer;transition:background .25s var(--gemak),color .25s var(--gemak),border-color .25s var(--gemak)}
/* ===== status: de schijngestalte van de maan, zoals op de homepage ===== */
.hm-status{display:inline-flex;align-items:center;gap:7px;font:500 .74rem/1 var(--mono);letter-spacing:.04em;color:var(--dag-mist);white-space:nowrap}
.hm-status svg{width:12px;height:12px;flex:none}
.hm-status .rand{fill:none;stroke:currentColor;stroke-width:1.3}
.hm-status .vol,.hm-status path{fill:currentColor}
.hm-status.live{color:#1f5f3f}
.hm-paneel .hm-status,.hm-blad .hm-status,.zeg .hm-status,.slot .hm-status,.hm-kop.nacht .hm-status{color:inherit;opacity:.8}

/* ===== kop ===== */
.hm-kop,.hm-blad{--k-bg:rgba(233,236,239,.9);--k-ink:var(--dag-ink);--k-mist:var(--dag-mist);--k-lijn:var(--dag-lijn);--k-paneel:var(--wit);--k-hoofd-bg:var(--dag-ink);--k-hoofd-ink:var(--dag)}
.hm-kop{
  position:sticky;top:0;z-index:60;background:var(--k-bg);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--k-lijn);color:var(--k-ink);font-family:var(--tekst);padding-top:env(safe-area-inset-top,0px)}
.hm-kop.nacht,.hm-blad.nacht{--k-bg:rgba(6,7,8,.86);--k-ink:var(--ink);--k-mist:var(--mist);--k-lijn:var(--lijn);--k-paneel:var(--paneel);--k-hoofd-bg:var(--ink);--k-hoofd-ink:var(--ruimte)}
.hm-kop-rij{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);height:var(--kop-hoogte)}
/* iPhone dwars: de kop en het blad blijven uit de inkeping */
.hm-kop .hm-wrap{padding-left:max(var(--goot),env(safe-area-inset-left,0px));padding-right:max(var(--goot),env(safe-area-inset-right,0px))}
.hm-merk{font:600 1rem/1 var(--display);font-stretch:125%;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:var(--k-ink);white-space:nowrap}
.hm-nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex:1 1 auto;font-size:.9rem}
.hm-nav>a,.hm-ingang{color:var(--k-mist);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:10px 0;font:inherit;background:none;border:0;cursor:pointer;transition:color .2s}
.hm-nav>a:hover,.hm-ingang:hover,.hm-nav>a[aria-current="page"],.hm-ingang.huidig,.hm-ingang[aria-expanded="true"]{color:var(--k-ink)}
.hm-nav>a[aria-current="page"],.hm-ingang.huidig{font-weight:600}
.hm-ingang .punt{width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--gemak)}
.hm-ingang[aria-expanded="true"] .punt{transform:translateY(2px) rotate(-135deg)}
.hm-kop :focus-visible{outline:2px solid var(--k-ink);outline-offset:3px}
.hm-rechts{display:flex;align-items:center;gap:10px;margin-left:auto}
.hm-kop .knop{min-height:40px;padding:9px 15px;font-size:.8rem;border-color:var(--k-lijn);color:var(--k-ink)}
.hm-kop .knop:hover{border-color:var(--k-ink)}
.hm-kop .knop.hoofd{background:var(--k-hoofd-bg);color:var(--k-hoofd-ink);border-color:var(--k-hoofd-bg)}
.hm-kop .knop.hoofd:hover{opacity:.88}
.hm-login{color:var(--k-mist);font-size:.84rem;text-decoration:none;padding:10px 4px;white-space:nowrap}
.hm-login:hover{color:var(--k-ink)}

/* uitklappanelen */
.hm-paneel{position:absolute;left:0;right:0;top:100%;background:var(--k-paneel);border-bottom:1px solid var(--k-lijn);box-shadow:0 24px 40px -24px rgba(6,7,8,.35)}
.hm-paneel[hidden]{display:none}
.hm-paneel-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:8px clamp(24px,4vw,64px);padding-block:28px 34px}
.hm-paneel-kolom h2{font:600 .78rem/1 var(--tekst);letter-spacing:.02em;color:var(--k-mist);margin:0 0 12px}
.hm-paneel-kolom ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hm-paneel-kolom.breed ul{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));column-gap:clamp(24px,4vw,64px)}
.hm-paneel a{display:block;padding:9px 0;text-decoration:none;color:var(--k-ink)}
.hm-paneel a b{display:flex;align-items:center;gap:8px;font:520 1.02rem/1.25 var(--display);letter-spacing:-.01em}
.hm-paneel a span{display:block;font-size:.84rem;color:var(--k-mist);line-height:1.45;margin-top:2px}
.hm-paneel a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hm-paneel .alles{margin-top:8px;font-size:.86rem;font-weight:600}
.hm-paneel .alles a{display:inline-block}

/* menuknop en blad op telefoons */
.hm-menuknop{display:none;position:relative;width:44px;height:44px;margin-left:auto;border:1px solid var(--k-lijn);background:transparent;cursor:pointer;color:var(--k-ink)}
.hm-menuknop i{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:transform .35s var(--gemak),top .35s var(--gemak)}
.hm-menuknop i:first-child{top:17px}.hm-menuknop i:last-child{top:25px}
.hm-menuknop[aria-expanded="true"] i:first-child{top:21px;transform:rotate(45deg)}
.hm-menuknop[aria-expanded="true"] i:last-child{top:21px;transform:rotate(-45deg)}
.hm-blad{--b-goot-l:max(var(--goot),env(safe-area-inset-left,0px));--b-goot-r:max(var(--goot),env(safe-area-inset-right,0px));position:fixed;inset:calc(var(--kop-hoogte) + env(safe-area-inset-top,0px)) 0 0;z-index:59;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--k-paneel);color:var(--k-ink);padding:8px var(--b-goot-r) 0 var(--b-goot-l);border-top:1px solid var(--k-lijn)}
.hm-blad[hidden]{display:none}
.hm-blad h2{font:600 .78rem/1 var(--tekst);color:var(--k-mist);margin:26px 0 6px}
.hm-blad ul{list-style:none;margin:0;padding:0}
.hm-blad li a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-height:46px;padding:12px 0;border-bottom:1px solid var(--k-lijn);text-decoration:none;color:var(--k-ink);font:500 1.08rem/1.3 var(--display);letter-spacing:-.01em}
/* de pagina waar je bent */
.hm-blad li a[aria-current]{font-weight:650;box-shadow:inset 2px 0 0 currentColor;padding-left:12px}
/* de hoofdknoppen en Log in staan onderin het blad altijd in beeld, ook voordat je scrolt */
.hm-blad .hm-blad-knoppen{position:sticky;bottom:0;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:24px calc(-1 * var(--b-goot-r)) 0 calc(-1 * var(--b-goot-l));padding:12px var(--b-goot-r) calc(4px + env(safe-area-inset-bottom,0px)) var(--b-goot-l);background:var(--k-paneel);border-top:1px solid var(--k-lijn)}
.hm-blad .knop{min-height:48px;width:100%;padding-inline:8px;text-align:center;white-space:nowrap;color:var(--k-ink)}
@media (max-width:359px){.hm-blad .hm-blad-knoppen{column-gap:8px}.hm-blad .knop{padding-inline:4px;font-size:.8rem;letter-spacing:0}}
.hm-blad .knop.hoofd{background:var(--k-hoofd-bg);color:var(--k-hoofd-ink);border-color:var(--k-hoofd-bg)}
.hm-blad :focus-visible{outline:2px solid var(--k-ink);outline-offset:3px}
.hm-blad{font-family:var(--tekst)}
.hm-blad .hm-login{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px}
@media (max-width:1040px){
  .hm-nav,.hm-rechts{display:none}
  .hm-menuknop{display:block}
  :root{--kop-hoogte:64px}
}
@media (min-width:1041px){.hm-blad{display:none!important}}
html.blad-open{overflow:hidden}

/* ===== voet: altijd donker, op elke pagina dezelfde ===== */
.hm-voet{background:var(--ruimte);color:var(--mist);font-family:var(--tekst);font-size:.88rem;line-height:1.6;border-top:1px solid var(--lijn)}
.hm-voet .hm-wrap{padding-block:clamp(48px,6vw,72px) 28px}
.hm-voet-raster{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:32px clamp(20px,3vw,48px)}
.hm-voet-merk p{margin:14px 0 0;max-width:34ch;color:var(--mist)}
.hm-voet-merk .hm-voet-kop{margin:0;max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em .45em}
.hm-merkzin{font:500 1rem/1 var(--display);color:var(--ink)}
.hm-merkzin>span{color:var(--mist);margin-right:.15em}
.hm-voet-merk .hm-merk{color:var(--ink)}
.hm-voet h2{margin:0 0 12px;font:600 .8rem/1 var(--tekst);color:var(--ink)}
.hm-voet ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.hm-voet a{color:var(--mist);text-decoration:none;display:inline-block;padding:4px 0}
.hm-voet a:hover{color:var(--ink)}
.hm-voet :focus-visible{outline:2px solid var(--atmosfeer);outline-offset:3px}
.hm-voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(36px,5vw,56px);padding-top:20px;border-top:1px solid var(--lijn);font-size:.8rem}
@media (max-width:980px){.hm-voet-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-voet-merk{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){.hm-kop *,.hm-blad *,.hm-voet *{transition:none!important}}