/* Gedeelde stijl voor antonwubben.nl: rustig, veel wit, systeemletter, in de geest van apple.com. */

:root {
  color-scheme: light dark;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --link: #0066cc;
  --green: #34c759;
  --purple: #7d6fcf;
  --radius: 22px;
  --nav-bg: rgba(255, 255, 255, 0.72);
  --nav-panel-bg: rgba(255, 255, 255, 0.94);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --line: #3a3a3c;
    --link: #2997ff;
    --nav-bg: rgba(22, 22, 23, 0.72);
    --nav-panel-bg: rgba(22, 22, 23, 0.94);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Navigatiebalk: dun, doorschijnend, blijft bovenaan staan. */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(20px, calc((100% - 980px) / 2));
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  font-size: 14px;
}
.nav a { color: var(--text); opacity: 0.85; }
.nav a:hover { opacity: 1; text-decoration: none; }
.nav .brand { font-weight: 600; margin-right: auto; }
.nav-links { list-style: none; display: flex; align-items: stretch; gap: 28px; margin: 0; padding: 0; height: 48px; }
/* Elk menu-item is een even hoog vak met de inhoud in het midden, zodat links en taalkeuze op één lijn staan. */
.nav-links li { display: flex; align-items: center; }
.nav-tools { display: none; align-items: center; height: 48px; margin-left: 20px; }

/* Menuknop met twee streepjes: alleen zichtbaar op smalle schermen. De checkbox zelf blijft onzichtbaar. */
.menu-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.menu-button {
  display: none;
  position: relative;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.menu-button span {
  position: absolute;
  left: 2px;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-button span:first-child { top: 7px; }
.menu-button span:last-child { top: 13px; }
/* Open: de twee streepjes draaien naar een kruisje. */
.menu-toggle:checked ~ .nav-tools .menu-button span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle:checked ~ .nav-tools .menu-button span:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 600px) {
  .nav-tools { display: flex; }
  .menu-button { display: block; }
  /* De links komen in een paneel onder de balk te hangen, in dezelfde doorschijnende stijl. */
  .nav-links {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    margin: 0;
    padding: 8px 20px 16px;
    background: var(--nav-panel-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line);
    font-size: 17px;
  }
  .menu-toggle:checked ~ .nav-links { display: flex; }
  .nav-links li { height: 44px; border-bottom: 1px solid var(--line); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a { display: block; width: 100%; }
  /* In het paneel krijgt de taalkeuze dezelfde lettergrootte als de links. */
  .nav-links .lang-switch { font-size: 17px; }
  .nav-links .lang-switch svg { width: 18px; height: 18px; }
}

/* Taalkeuze: wereldbolletje met een kale keuzelijst, in de navigatiebalk of los rechtsboven op de voorpagina. */
.lang-switch {
  position: relative;
  display: flex;
  margin: 0;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1;
  color: var(--text);
  opacity: 0.85;
  cursor: pointer;
}
.lang-switch span { display: block; line-height: 1; }
.lang-switch:hover { opacity: 1; }
.lang-switch svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* Zichtbare taalnaam met pijltje: gewone tekst, dus exact op de lijn van de menulinks. */
.lang-switch span {
  padding-right: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat right center / 12px 12px;
}
/* De echte keuzelijst ligt onzichtbaar over de tekst, zodat een klik het systeemmenu opent. */
.lang-switch select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font: inherit;
}
.lang-switch:focus-within { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 4px; }
.lang-switch.floating { position: absolute; top: 0; right: max(20px, calc((100% - 980px) / 2)); height: 48px; }
body.home { position: relative; }

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* Hero: grote titel, korte ondertitel, gecentreerd. */
.hero {
  text-align: center;
  padding: 72px 0 40px;
}
.hero h1 {
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 12px;
}
.hero p {
  font-size: clamp(19px, 2.6vw, 24px);
  color: var(--muted);
  margin: 0 auto;
  max-width: 34em;
}
.hero .app-icon {
  width: 128px;
  height: 128px;
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  margin-bottom: 24px;
}

/* Knoppen: pilvorm, zwart/wit in licht, wit/zwart in donker, net als bij Apple. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 32px;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.button:hover { text-decoration: none; transform: translateY(-1px); }
.button.primary { background: var(--text); color: var(--bg); }
.button.secondary { color: var(--link); border-color: var(--link); }
.button svg { width: 18px; height: 18px; fill: currentColor; }
/* LinkedIn-knop: gewone knopgrootte in het LinkedIn-blauw, alleen het logo anderhalf keer zo groot. */
.button.linkedin { background: #0a66c2; color: #fff; }
.button.linkedin svg { width: 27px; height: 27px; }

/* Knop zonder link (bijvoorbeeld "Binnenkort in de App Store"): ziet eruit als een knop, reageert niet. */
.button.static { cursor: default; user-select: none; }
.button.static:hover { transform: none; }

/* Tegels op de hoofdpagina: twee kaarten met een afgerond vierkant icoon. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.tile {
  display: block;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 40px 28px 32px;
  text-align: center;
  color: var(--text);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tile:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.tile .icon {
  width: 120px;
  height: 120px;
  border-radius: 27px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.tile .icon img { width: 100%; height: 100%; border-radius: inherit; display: block; object-fit: cover; }
.tile h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.tile p { margin: 0; color: var(--muted); font-size: 17px; }
.tile .more { display: block; margin-top: 14px; color: var(--link); font-size: 17px; }

/* Kenmerken op de app-pagina: drie kolommen met symbool, kop en tekst. */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 56px;
}
.feature {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.feature .symbol {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  /* Zelfde frisse groene verloop als het app-icoon: licht bovenaan, dieper onderaan. */
  background: linear-gradient(180deg, #5bf672 0%, #0dbe34 100%);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(13, 190, 52, 0.25);
}
.feature .symbol svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-size: 20px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; }
.feature p { margin: 0; color: var(--muted); }

/* Tekstpagina's zoals het privacybeleid en "Wie is Anton?". */
.article {
  max-width: 680px;
  margin: 0 auto;
  padding-top: 56px;
}
.article h1 { font-size: clamp(32px, 5vw, 44px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 8px; }
.article h2 { font-size: 22px; font-weight: 600; margin-top: 2em; letter-spacing: -0.01em; }
.article .meta { color: var(--muted); font-size: 15px; margin-bottom: 2em; }
.portrait { width: 160px; height: 160px; border-radius: 36px; object-fit: cover; display: block; margin-bottom: 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
/* Portret in de kop van "Wie is Anton?": gecentreerd, net als het app-icoon op de Glutencheck-pagina. */
.hero .portrait { margin: 0 auto 24px; }
.hero + .article { padding-top: 8px; }
.article .lang { margin-top: 4em; padding-top: 3em; border-top: 1px solid var(--line); }
.article ul { padding-left: 1.2em; }
.article li { margin-bottom: 0.4em; }

/* Loopbaan en opleiding: jaartal links, omschrijving rechts, zonder opsommingstekens. */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline .when { color: var(--muted); font-size: 15px; padding-top: 2px; }
.timeline .what { line-height: 1.4; }
@media (max-width: 480px) {
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
}

/* Knoppen links uitgelijnd in een tekstpagina. */
.actions.start { justify-content: flex-start; margin-top: 40px; }

/* Contactformulier. */
.sent { padding: 12px 16px; border-radius: 12px; background: rgba(52, 199, 89, 0.15); color: var(--text); font-weight: 500; }
form { display: grid; gap: 6px; max-width: 32em; }
form label { font-size: 15px; color: var(--muted); margin-top: 10px; }
input[type="email"], textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
}
input:focus, textarea:focus { outline: 2px solid var(--link); outline-offset: 1px; border-color: transparent; }
button[type="submit"] {
  justify-self: start;
  font: inherit;
  font-weight: 500;
  margin-top: 14px;
  padding: 11px 22px;
  border: 0;
  border-radius: 980px;
  background: var(--link);
  color: #fff;
  cursor: pointer;
}

/* Iconen draaien bij het laden om hun verticale as van opzij naar voren, met een lichte veer,
   net als FlipInOnAppear in de app (spring, bounce 0,35, vertraging 0,1 s). De veer in de app heeft
   een "duur" van 1,4 s maar komt pas veel later tot rust; daarom hier 4,2 s, drie keer zo lang. */
@keyframes flip-in {
  0%   { transform: perspective(600px) rotateY(90deg); opacity: 0.3; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  55%  { transform: perspective(600px) rotateY(-14deg); opacity: 1; animation-timing-function: ease-in-out; }
  78%  { transform: perspective(600px) rotateY(6deg); animation-timing-function: ease-in-out; }
  92%  { transform: perspective(600px) rotateY(-2deg); animation-timing-function: ease-in-out; }
  100% { transform: perspective(600px) rotateY(0deg); opacity: 1; }
}
.tile .icon,
.hero .app-icon,
.portrait,
.feature .symbol {
  animation: flip-in 4.2s both;
  animation-delay: 0.1s;
  backface-visibility: hidden;
}
/* De tweede tegel volgt iets later, zodat ze niet precies tegelijk draaien. */
.tile:nth-child(2) .icon { animation-delay: 0.4s; }
/* De drie kleine symbolen op de app-pagina draaien na elkaar, na het grote icoon. */
.feature:nth-child(1) .symbol { animation-delay: 0.4s; }
.feature:nth-child(2) .symbol { animation-delay: 0.7s; }
.feature:nth-child(3) .symbol { animation-delay: 1.0s; }

/* Bij "Verminder beweging" verschijnen de iconen meteen rechtop, zoals in de app. */
@media (prefers-reduced-motion: reduce) {
  .tile .icon,
  .hero .app-icon,
  .portrait,
  .feature .symbol { animation: none; }
  .tile, .button { transition: none; }
}

footer {
  border-top: 1px solid var(--line);
  padding: 20px max(20px, calc((100% - 980px) / 2));
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
}
footer a { color: var(--muted); }
footer ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }

/* Voorpagina: geen navigatiebalk, dus meer lucht boven de titel; tegels gecentreerd en smaller;
   voettekst alleen een regel in het midden. */
.home .hero { padding-top: 120px; }
.home .tiles { max-width: 640px; margin: 32px auto 0; }
.home .tile { padding: 44px 28px 36px; }
.home .tile h2 { margin-bottom: 8px; }
footer.minimal { border-top: 0; justify-content: center; }