:root{--ink:#0e2a23;--paper:#f4f4ec;--card:#fbfbf6;--soft:#51615a;--line:#dde0d6;--amber:#f0a23a;--amber-d:#b86c12;--teal:#16927a;--teal-l:#7cc9b3;--space:#04070e;}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:'Hanken Grotesk',sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,.brand{font-family:'Archivo',sans-serif;letter-spacing:-.02em;line-height:1.02;}
.wrap{max-width:1140px;margin:0 auto;padding:0 30px;}
header{position:absolute;top:0;left:0;right:0;z-index:30;}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;}
.brand{font-size:24px;font-weight:800;color:#fff;}
.brand .d{color:var(--amber);}
/* Taalkeuze als NL | EN. De scheidingsstreepjes en de onderstreping werken via
   + selectors, dus een derde taal toevoegen vraagt geen extra CSS.
   --lp is de horizontale ruimte per taal. De onderstreping volgt die waarde,
   zodat het streepje onder de letters valt en niet onder de tussenruimte. */
.lang{--lp:11px;display:flex;align-items:center;}
.lang-btn{position:relative;display:inline-flex;align-items:center;background:transparent;border:none;cursor:pointer;text-decoration:none;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;line-height:1.25;letter-spacing:.06em;
  color:rgba(255,255,255,.55);padding:7px var(--lp);transition:color .15s;}
.lang-btn:hover{color:rgba(255,255,255,.9);}
.lang-btn + .lang-btn::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:12px;background:rgba(255,255,255,.25);}
.lang-btn.active{color:#fff;}
.lang-btn.active::after{content:"";position:absolute;left:var(--lp);right:var(--lp);bottom:1px;height:2px;background:var(--amber);}
/* Zwart, geen halo. Afgestemd op bol.html: de bol moet het hebben van een dunne
   warme rand, niet van een blauwe waas eromheen. Die waas oogde goedkoop. */
.hero{position:relative;min-height:100vh;background:#000;overflow:hidden;display:flex;align-items:center;}
/* Zachte buitengloed rond de blauwe ring. globe.js zet positie en maat, zodat hij
   op elke vensterverhouding precies op de bol gecentreerd blijft. */
.hero::before{content:"";position:absolute;z-index:0;left:var(--bol-x,74%);top:var(--bol-y,50%);width:var(--bol-d,118vh);height:var(--bol-d,118vh);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle closest-side, rgba(41,105,175,.30) 0%, rgba(20,73,140,.15) 62%, rgba(0,0,0,0) 100%);}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 62%);z-index:2;pointer-events:none;}
@media(max-width:820px){
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.78) 58%,rgba(0,0,0,.95) 100%);}
}
#globe{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.hero-in{position:relative;z-index:3;width:100%;}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:'Archivo',sans-serif;font-size:15px;font-weight:600;color:var(--amber);margin-bottom:20px;}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--amber);}
.aud{display:inline-flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:40px;padding:4px;gap:2px;margin-bottom:24px;}
.aud-btn{background:transparent;color:rgba(255,255,255,.72);border:none;font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;padding:9px 20px;border-radius:30px;cursor:pointer;transition:all .15s;}
.aud-btn.active{background:var(--amber);color:#06121a;}
.hero h1{font-size:clamp(42px,7.4vw,86px);font-weight:900;color:#fff;margin-bottom:22px;letter-spacing:-.03em;max-width:15ch;}
.hero p{font-size:clamp(17px,2.2vw,21px);color:rgba(255,255,255,.82);max-width:32em;margin-bottom:34px;}
.btns{display:flex;gap:14px;flex-wrap:wrap;}
.btn{display:inline-block;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;padding:15px 30px;border-radius:3px;cursor:pointer;border:2px solid transparent;transition:all .18s;}
.btn.fill{background:var(--amber);color:#06121a;}
.btn.fill:hover{background:#fff;}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn.dark:hover{background:#0b3a30;}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.5);font-size:13px;font-family:'Archivo',sans-serif;text-align:center;}
.scrollcue .cue-bar{display:block;width:1px;height:30px;background:rgba(255,255,255,.3);margin:8px auto 0;animation:cue 1.8s ease-in-out infinite;transform-origin:top;}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;}50%{transform:scaleY(1);opacity:1;}}
.how{padding:104px 0 96px;background:radial-gradient(120% 90% at 78% 0%, #fcfcf6 0%, var(--paper) 62%);}
.how .lead{margin-bottom:58px;}
.rail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;padding-top:56px;}
.rail::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,rgba(240,162,58,0),rgba(240,162,58,.75) 10%,rgba(240,162,58,.75) 90%,rgba(240,162,58,0));}
.stop{position:relative;padding-right:24px;}
.stop::before{content:"";position:absolute;top:-56px;left:0;margin-top:-5px;width:11px;height:11px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px var(--paper);}
/* Groot vaag cijfer achter de tekst in plaats van een labeltje erboven. Dat labeltje
   maakte er een standaard drie-koloms rijtje van. */
.ghost{position:absolute;top:-34px;left:-6px;font-family:'Archivo',sans-serif;font-weight:900;font-size:104px;line-height:1;color:rgba(14,42,35,.07);pointer-events:none;user-select:none;}
.stop h3{position:relative;font-size:23px;font-weight:800;margin-bottom:11px;}
.stop p{position:relative;color:var(--soft);font-size:16px;max-width:27em;}
@media(max-width:820px){
  .how{padding:76px 0 68px;}
  .rail{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:30px;}
  .rail::before{top:7px;bottom:40px;left:4px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,rgba(240,162,58,.75) 0%,rgba(240,162,58,.75) 88%,rgba(240,162,58,0) 100%);}
  .stop{padding:0 0 38px;}
  .stop::before{top:7px;left:-30px;margin-top:0;}
  .stop:last-child{padding-bottom:0;}
  .ghost{font-size:72px;top:-18px;left:auto;right:0;}
}
.bridge{padding:96px 0 104px;border-top:1px solid var(--line);}
.bridge .lead{margin-bottom:64px;}
.org{--gut:78px;display:grid;grid-template-columns:1fr var(--gut) 160px var(--gut) 1fr;row-gap:22px;align-items:center;max-width:900px;margin:0 auto;}
.org-cap{font-family:'Archivo',sans-serif;font-size:15px;font-weight:700;color:var(--soft);padding-bottom:14px;grid-row:1;}
.org-cap.left{grid-column:1;text-align:right;}
.org-cap.right{grid-column:5;}
.node{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:3px;padding:13px 17px;font-size:15px;font-weight:600;}
.node.left{grid-column:1;text-align:right;}
.node.right{grid-column:5;}
.node.r1,.node.l1{grid-row:2;} .node.r2,.node.l2{grid-row:3;} .node.r3,.node.l3{grid-row:4;}
.node::after{content:"";position:absolute;top:50%;width:calc(var(--gut)/2);height:1.5px;background:var(--line);}
.node.left::after{left:100%;} .node.right::after{right:100%;}
.gut{position:relative;align-self:stretch;grid-row:2 / span 3;}
.gut.left{grid-column:2;} .gut.right{grid-column:4;}
.gut::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1.5px;background:var(--line);transform:translateX(-50%);}
.gut::after{content:"";position:absolute;top:50%;height:1.5px;background:var(--teal);}
.gut.left::after{left:50%;right:0;} .gut.right::after{right:50%;left:0;}
.hub{grid-column:3;grid-row:2 / span 3;display:flex;justify-content:center;}
.hub-circle{position:relative;width:138px;height:138px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em;box-shadow:0 18px 44px rgba(14,42,35,.18);}
.hub-circle .d{color:var(--amber);}
.hub-circle::before{content:"";position:absolute;inset:-11px;border-radius:50%;border:1.5px solid var(--amber);}
.hub-cap{grid-column:3;grid-row:5;text-align:center;white-space:nowrap;padding-top:18px;font-size:14px;color:var(--soft);}
@media(max-width:820px){
  .bridge{padding:0 0 76px;}
  .bridge .lead{margin-bottom:44px;}
  .org{display:flex;flex-direction:column;align-items:stretch;max-width:330px;}
  .org .org-cap{text-align:center;padding:0 0 14px;}
  .org .node{text-align:center;margin-bottom:10px;}
  .org .node::after{display:none;}
  .org .gut{align-self:center;width:1.5px;height:42px;}
  .org .gut::after{display:none;}
  .org .hub{padding:4px 0;}
  .org .hub-cap{padding-top:16px;}
}
.contact{padding:88px 0;border-top:1px solid var(--line);}
.kept{display:inline-flex;align-items:center;gap:11px;font-family:'Archivo',sans-serif;font-size:15px;font-weight:600;color:var(--teal);margin-bottom:14px;}
.kept::before{content:"";width:28px;height:1px;background:var(--teal);}
h2{font-size:clamp(30px,4.6vw,46px);font-weight:800;margin-bottom:16px;}
.lead{color:var(--soft);max-width:38em;font-size:18px;margin-bottom:40px;}
.lead a{color:var(--amber-d);border-bottom:1px solid var(--amber);}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;max-width:720px;}
.field{display:flex;flex-direction:column;}
.field.full{grid-column:1 / -1;}
.field.actions{align-items:flex-start;}
.field label{font-size:13px;font-weight:600;color:var(--soft);margin-bottom:6px;}
.field input,.field textarea{background:var(--card);border:1.5px solid var(--line);border-radius:7px;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--teal);}
.field textarea{min-height:130px;resize:vertical;}
#send{margin-top:20px;}
.okmsg{display:none;margin-top:16px;font-weight:600;color:var(--teal);max-width:44em;}
footer{padding:40px 0;border-top:1px solid var(--line);}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center;color:var(--soft);font-size:14px;}
.foot .brand{font-size:19px;color:var(--ink);}
.foot .brand .d{color:var(--amber-d);}
@media(max-width:600px){.form{grid-template-columns:1fr;}}

/* Aanraakvlakken op minstens 44 pixels, de richtlijn van Apple. Visueel verandert
   er nauwelijks iets: de knoppen krijgen alleen meer lucht rondom. */
@media(hover:none),(max-width:820px){
  .lang{--lp:12px;}
  .lang-btn{min-height:44px;}
  /* Met drie talen wordt de kop op de subpagina's te breed voor een telefoon.
     De taalkeuze zakt dan naar een eigen regel, rechts uitgelijnd. Op de
     landingspagina staat geen menu, dus daar verandert er niets. */
  .nav{height:auto;min-height:78px;}
  .nav-links{flex-wrap:wrap;justify-content:flex-end;gap:12px;}
  .aud-btn{min-height:44px;padding:12px 20px;}
  .more{min-height:44px;align-items:center;}
  .contact .lead a{display:inline-block;padding:9px 0;}
  .nav-link{min-height:44px;display:inline-flex;align-items:center;}
  a.brand{min-height:44px;display:inline-flex;align-items:center;}
}

/* Doorverwijzing vanuit de landingspagina naar de verdiepende pagina. */
.more{display:inline-flex;align-items:baseline;gap:11px;margin-top:54px;font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;color:var(--ink);border-bottom:2px solid var(--amber);padding-bottom:3px;}
.more::after{content:"\2192";color:var(--amber-d);transition:transform .18s;}
.more:hover::after{transform:translateX(4px);}
.bridge .more{margin-top:64px;}

/* ---- Vereenvoudigd Chinees ----
   Archivo en Hanken Grotesk bevatten geen Chinese tekens, dus zonder deze stapel
   valt de browser terug op een willekeurig systeemlettertype. De negatieve
   letterafstand van de koppen is op Latijns schrift afgestemd en drukt Chinese
   tekens tegen elkaar aan; die zetten we daarom op nul. */
html[lang="zh-CN"] body{font-family:'Hanken Grotesk','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2,html[lang="zh-CN"] h3,html[lang="zh-CN"] .brand{
  font-family:'Archivo','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;letter-spacing:0;}
html[lang="zh-CN"] .hero h1{max-width:11em;line-height:1.16;}
html[lang="zh-CN"] .phead h1{max-width:13em;line-height:1.2;}
html[lang="zh-CN"] .stop p,html[lang="zh-CN"] .lead{max-width:24em;}
html[lang="zh-CN"] .eyebrow,html[lang="zh-CN"] .kept,html[lang="zh-CN"] .btn,
html[lang="zh-CN"] .aud-btn,html[lang="zh-CN"] .nav-link{letter-spacing:0;}
/* Het merk blijft Latijns, dus daar hoort de oorspronkelijke afstand bij. */
html[lang="zh-CN"] .brand{letter-spacing:-.02em;}
.lang-btn[lang="zh-CN"]{letter-spacing:0;font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Archivo',sans-serif;}

/* ---- Vervolgpagina ---- */
/* Donkere kop zonder 3D. De draaiende wereldbol blijft het handelsmerk van de landingspagina. */
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-link{font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;color:rgba(255,255,255,.78);}
.nav-link:hover{color:#fff;}
.phead{position:relative;background:radial-gradient(120% 140% at 78% 26%, #0a1424 0%, #04070e 62%);padding:152px 0 76px;overflow:hidden;}
.phead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(240,162,58,0),rgba(240,162,58,.65) 28%,rgba(22,146,122,.65) 72%,rgba(22,146,122,0));}
.phead h1{font-size:clamp(35px,5.6vw,62px);font-weight:900;color:#fff;letter-spacing:-.03em;max-width:17ch;margin-bottom:20px;}
.phead p{color:rgba(255,255,255,.78);font-size:clamp(16px,2vw,20px);max-width:34em;}

.pillar{padding:84px 0;border-bottom:1px solid var(--line);}
.pillar-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:22px 64px;align-items:start;}
.pillar-kop{position:relative;}
.pillar-num{position:absolute;top:-42px;left:-8px;font-family:'Archivo',sans-serif;font-weight:900;font-size:104px;line-height:1;color:rgba(14,42,35,.07);pointer-events:none;user-select:none;}
.pillar h2{position:relative;font-size:clamp(26px,3.6vw,40px);}
.pillar-body p{color:var(--soft);font-size:17px;margin-bottom:18px;}
.pillar-body p:last-child{margin-bottom:0;}
.pillar-body strong{color:var(--ink);font-weight:600;}

/* Contractschema: alle lijnen recht, dus geen SVG nodig en volledig meeschalend. */
.ct{--half:75px;max-width:720px;margin:46px auto 0;}
.ct-top{display:flex;align-items:center;padding-top:26px;}
.ct-party{min-width:150px;text-align:center;background:var(--card);border:1.5px solid var(--line);border-radius:3px;padding:14px 16px;font-weight:600;font-size:16px;}
/* min-width:0 houdt het label buiten de breedteberekening, anders duwt het de rij
   op smalle schermen breder dan de container. Vandaar ook het label boven de lijn. */
.ct-wire{flex:1;min-width:0;position:relative;height:2px;background:var(--amber);}
.ct-wire span{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;color:var(--amber-d);font-weight:600;}
.ct-mid{position:relative;height:58px;}
.ct-mid::before{content:"";position:absolute;bottom:0;left:var(--half);right:var(--half);border-top:2px dashed var(--teal);}
.ct-drop{position:absolute;top:0;bottom:0;border-left:2px dashed var(--teal);}
.ct-drop.left{left:calc(var(--half) - 1px);}
.ct-drop.right{right:calc(var(--half) - 1px);}
.ct-bot{position:relative;padding-top:32px;display:flex;justify-content:center;}
.ct-bot::before{content:"";position:absolute;top:0;left:50%;height:32px;border-left:2px dashed var(--teal);}
.ct-hub{background:var(--ink);color:#fff;border-radius:3px;padding:13px 22px;font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;}
.ct-hub .d{color:var(--amber);}

.pcta{padding:82px 0 98px;}
.pcta h2{margin-bottom:16px;}
.pcta .lead{margin-bottom:32px;}

@media(max-width:820px){
  .phead{padding:120px 0 56px;}
  .pillar{padding:54px 0;}
  .pillar-in{grid-template-columns:1fr;gap:20px;}
  .pillar-num{font-size:72px;top:-26px;left:auto;right:0;}
  .pcta{padding:56px 0 68px;}
  .nav-links{gap:16px;}
  .nav-link{font-size:14px;}
}
@media(max-width:700px){
  .ct{--half:52px;}
  .ct-party{min-width:104px;padding:11px 9px;font-size:14px;}
  .ct-wire span{font-size:11px;bottom:8px;}
  .ct-hub{font-size:15px;padding:11px 17px;}
}