@font-face{font-family:Gilroy;src:url('/assets/fonts/gilroy-light-webfont.woff2') format('woff2');font-weight:300;font-display:swap}

:root{
  --coral:#E75D57;
  --cream:#FFF8ED;
  --text:#3D3343;
  --text-2:#5C5462;
  --white:#FFFFFF;
  --coral-shade:#C94E51;
  --tint-ink:#8A1C22;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--coral);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--coral);color:var(--white);font:300 16px/24px Gilroy,Arial,sans-serif}

/* Merkpalet: de home is één koraalvlak, het statement.
   De lead in crème haalt 3,26:1 op koraal en blijft minimaal 26px groot. Het logo in wit. */
.home{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:max(32px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));text-align:center}
/* Logohoogte en regelhoogte volgen het 8px-raster; de beeldverhouding blijft intact. */
.home-title{--home-logo-height:232px;width:calc(var(--home-logo-height) * 366 / 224);height:var(--home-logo-height);max-width:100%;margin:0 0 32px}
.home-title img{display:block;width:100%;height:100%;object-fit:contain}
.home-lead{color:var(--cream);max-width:16em;margin:0 0 48px;font-size:clamp(30px,3.4vw,40px);line-height:40px;line-height:round(1.2em,8px);letter-spacing:-.025em}
@media (min-width:1024px){.home-title{--home-logo-height:224px}.home-lead{margin-bottom:64px}}

/* De mailknop: toon op toon, een diep rood op 32% over het koraal, zonder rand, met een witte envelop.
   Wit haalt 4,7:1 op dat vlak; het adres staat enkel voor schermlezers. */
.home-contact{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--tint-ink) 32%,transparent);transition:background-color .3s}
.home-contact span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Een gesloten envelop oogt zwaarder dan een pijl: 24px breed met dezelfde lijn van 2px als de pijlen in de kleine cirkels */
.home-contact .go-dot{display:block;width:24px;height:19.2px;overflow:visible}
.home-contact .go-dot :is(path,rect){fill:none;stroke:var(--white);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.home-contact:hover{background:color-mix(in srgb,var(--tint-ink) 40%,transparent)}
.home-contact:focus-visible{outline:2px solid var(--white);outline-offset:4px}
@media (forced-colors:active){
  .home-contact{border:2px solid ButtonText}
  .home-contact .go-dot :is(path,rect){stroke:ButtonText}
  .home-contact:focus-visible{outline-color:Highlight}
}

/* A quiet frame of the original 01.40 illustrations; the brand stays central. */
.home-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:680px}
.home-art{--home-art-size:clamp(320px,34vw,540px);position:absolute;inset:0;pointer-events:none;user-select:none}
.art-defs{position:absolute}
.home-object{position:absolute;width:calc(var(--home-art-size) * var(--s))}
.home-device{--s:1;right:-140px;top:6%;transform:rotate(-9deg)}
.home-cone{--s:.26;right:clamp(150px,21vw,340px);top:calc(6% + 180px);transform:rotate(-12deg)}
.home-pill{--s:.26;left:-35px;bottom:14%;transform:rotate(48deg)}
@media (min-width:1280px){
  .home-device{right:clamp(-220px,calc(140px - 20vw),-140px)}
}
.home-bob{animation:home-drift 9s ease-in-out infinite alternate}
.home-cone .home-bob{animation-duration:7s;animation-delay:-3s}
.home-pill .home-bob{animation-duration:8s;animation-delay:-5s}
@keyframes home-drift{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@media (max-width:767px){
  .home{padding-top:max(152px,env(safe-area-inset-top));padding-bottom:max(104px,env(safe-area-inset-bottom))}
  .home-title{--home-logo-height:152px;margin-bottom:28px}
  .home-lead{max-width:12em;font-size:28px;margin-bottom:32px}
  .home-art{--home-art-size:250px}
  .home-device{right:-110px;top:-36px;transform:rotate(-12deg)}
  .home-cone{right:103px;top:85px;transform:rotate(-15deg)}
  .home-pill{--s:.42;left:-37px;bottom:28px}
}
@media (max-width:374px){
  .home-title{--home-logo-height:136px}
  .home-lead{font-size:26px}
  .home-art{--home-art-size:220px}
  .home-device{right:-105px;top:-40px}
  .home-cone{right:85px;top:64px}
}
@media (max-width:767px) and (max-height:680px){
  .home{padding-top:128px;padding-bottom:48px}
}
/* Tablet: de vormen schuiven naar de hoeken zodat logo, lead en knop vrij blijven */
@media (min-width:768px) and (max-width:1279px){
  .home-device{right:calc(var(--home-art-size) * -.32);top:calc(var(--home-art-size) * -.16)}
  .home-cone{right:calc(var(--home-art-size) * .04);top:calc(var(--home-art-size) * .32)}
  .home-pill{left:-40px;bottom:10%}
}
@media (min-width:768px) and (max-width:1023px) and (min-height:601px){
  .home-art{--home-art-size:320px}
}
@media (max-height:600px) and (min-width:768px){
  .home{padding-top:24px;padding-bottom:24px}
  .home-title{--home-logo-height:160px;margin-bottom:24px}
  .home-lead{font-size:30px;margin-bottom:28px;max-width:16em}
  .home-art{--home-art-size:300px}
  .home-pill{--s:.36}
  .home-device{right:-145px;top:-50px}
  .home-cone{right:110px;top:90px}
}
@media (prefers-reduced-motion:reduce){.home-bob{animation:none}}

/* Eén gezamenlijke schaal, zoals in 01.41: breedte = basis × --s en de SVG-lijn
   compenseert met 1 / --s. Zo is de zichtbare lijn voor elke vorm exact
   --art-line × basis, ook op mobiel. De schaduwband volgt dezelfde verhouding. */
.home-art{--art-ink:#3D3343;--art-line:.0048;--art-shade:.029}
.art{display:block;width:100%;height:auto;overflow:visible}
/* Getekend zoals in de presentaties: een inktlijn die meegroeit met de tekening, zodat elke vorm even dik omlijnd is;
   vlakke kleur met één harde schaduwband rechts, het licht komt van linksboven */
.art :is(path,ellipse,circle,rect,use){stroke:var(--art-ink);stroke-width:calc(var(--art-line) * var(--vb) / var(--s));stroke-linejoin:round}
/* Het toestel: elke lijn ligt aan de buitenkant van zijn vlak (een dubbele lijn met de vulling erover),
   zo vallen de omtrek van de rand en die van de bovenkant precies samen en blijft elke lijn even dik */
.art .tb-outline{fill:var(--coral-shade)}
.art :is(.tb-outline use,.tb-top){stroke-width:calc(2 * var(--art-line) * var(--vb) / var(--s))}
.art .tb-side{fill:var(--coral-shade)}
.art :is(.tb-side use,.tb-fill){stroke:none}
.art .tb-top{fill:#E86B6C}
.art .tb-btn{fill:none}
/* Eén licht, van linksboven: elke vorm krijgt dezelfde schaduw rechtsonder. De vorm zelf, iets naar linksboven geschoven,
   is het belichte deel; wat overblijft binnen de omtrek is schaduw. Zo volgt de schaduw de vorm en is hij overal even breed. */
.art :is(.sh,.lit){stroke:none}
.art .lit{--d:calc(var(--art-shade) * var(--vb) / var(--s) * -.7071px);transform:translate(var(--d),var(--d))}
.art .ln{fill:none}
.art :is(.ball-lit,.cyl-lit){fill:#FFFFFF}
.art :is(.ball-sh,.cyl-sh){fill:#ECEAEE}
.art .tb-screen{fill:var(--cream)}
.art .tb-fill{fill:#E86B6C}
.art .pill-lit{fill:#FDD29C}
.art .pill-sh{fill:#F6C383}
.art .cone-lit{fill:#E86B6C}
.art :is(.cone-sh,.cone-base){fill:var(--coral-shade)}
.art .cyl-end{fill:#E2DFE5}