:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --paper: oklch(0.968 0.008 85);
  --card: oklch(0.99 0.004 85);
  --ink: oklch(0.24 0.06 265);
  --navy: oklch(0.36 0.1 265);
  --mist: oklch(0.94 0.012 265);
  --amber: oklch(0.8 0.16 72);
  --amber-deep: oklch(0.5 0.12 65);
}

html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(40px); filter: blur(8px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* Kaart (enkelvoudig, geen nesting) */
.bezel { border-radius: 2rem; background: var(--card); box-shadow: 0 0 0 1px oklch(0.24 0.06 265 / .07), 0 28px 40px -28px oklch(0.24 0.06 265 / .22); transition: transform .7s var(--ease); }
.bezel > .core { height: 100%; }
.bezel:hover { transform: translateY(-4px); }
.bezel.dark { background: var(--ink); box-shadow: 0 0 0 1px oklch(1 0 0 / .1); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .75rem; padding: .5rem .5rem .5rem 1.5rem; border-radius: 9999px; font-weight: 600; font-size: .95rem; cursor: pointer; transition: transform .5s var(--ease), background .5s var(--ease); }
.btn:active { transform: scale(.98); }
.btn .dot { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; transition: transform .5s var(--ease); }
.btn:hover .dot { transform: translate(3px, -1px) scale(1.06); }
.btn-amber { background: var(--amber); color: var(--ink); }
.btn-amber .dot { background: rgba(15, 29, 63, .12); }
.btn-amber:hover { background: oklch(0.84 0.16 75); }
.btn-ghost { background: rgba(255, 255, 255, .1); color: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.btn-ghost .dot { background: rgba(255, 255, 255, .15); }
.btn-ghost:hover { background: rgba(255, 255, 255, .18); }
.btn-ink { background: var(--ink); color: var(--card); }
.btn-ink .dot { background: rgba(255, 255, 255, .14); }

.eyebrow { display: inline-block; padding: .35rem .8rem; border-radius: 9999px; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; background: rgba(15, 29, 63, .06); color: var(--navy); }
.eyebrow.light { background: rgba(255, 255, 255, .1); color: var(--card); }

/* Hero */
.hero-bg { background-color: var(--ink); background-image:
  linear-gradient(90deg, oklch(0.24 0.06 265 / .94) 0%, oklch(0.24 0.06 265 / .6) 55%, oklch(0.24 0.06 265 / .25) 100%),
  url('../assets/hero-kantoor.webp'),
  radial-gradient(ellipse 60% 70% at 85% 20%, oklch(0.42 0.12 265) 0%, transparent 60%),
  radial-gradient(ellipse 50% 60% at 70% 90%, oklch(0.8 0.16 72 / .22) 0%, transparent 60%);
  background-size: cover; background-position: center; }
.beam { position: absolute; top: -20%; width: 18vw; height: 140%; background: linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 70%); transform: rotate(18deg); animation: drift 14s var(--ease) infinite alternate; pointer-events: none; }
@keyframes drift { to { transform: rotate(18deg) translateX(6vw); opacity: .5; } }

/* Nav */
.nav-link { position: relative; padding: .4rem .2rem; font-size: .9rem; color: rgba(255, 255, 255, .8); transition: color .4s var(--ease); }
.nav-link:hover { color: var(--card); }
.burger span { display: block; width: 18px; height: 2px; background: var(--card); border-radius: 2px; transition: transform .6s var(--ease), opacity .4s; }
.burger span + span { margin-top: 5px; }
.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { opacity: 0; }
.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#overlay { opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.menu-open #overlay { opacity: 1; pointer-events: auto; }
#overlay a { opacity: 0; transform: translateY(48px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.menu-open #overlay a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms + 120ms); }

/* AI chat */
.chip { padding: .55rem 1rem; border-radius: 9999px; font-size: .85rem; font-weight: 500; background: rgba(255, 255, 255, .08); color: var(--card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); cursor: pointer; transition: background .4s var(--ease), transform .4s var(--ease); }
.chip:hover { background: var(--amber); color: var(--ink); }
.chip:active { transform: scale(.96); }
.msg { animation: msgIn .7s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(14px); } }
.typing i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 9999px; background: rgba(255, 255, 255, .6); animation: bounce 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 50% { transform: translateY(-4px); opacity: .4; } }
.pulse-dot { animation: pulse 2.2s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .msg, #overlay a { transition: none; animation: none; opacity: 1; transform: none; filter: none; }
  .beam, .pulse-dot, .typing i { animation: none; }
  html { scroll-behavior: auto; }
}

/* Dropdown en actieve navigatie */
.dropdown-menu { opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s; }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-link[aria-current="page"] { color: var(--card); box-shadow: 0 2px 0 var(--amber); }

h1, h2, h3 { word-spacing: .08em; }

/* Paginakop met foto (afbeelding staat inline op de sectie) */
.page-hero { background-color: var(--ink); background-size: cover; background-position: center; }

/* Paginaovergangen */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .45s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-in .8s var(--ease) both; }
  header.fixed { view-transition-name: site-nav; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* Zachte scroll (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Parallax-achtergrond in koppen */
.hero-media { background-size: cover; background-position: center; will-change: translate; }

/* Foto's die onthuld worden */
.img-reveal { overflow: hidden; border-radius: 2rem; clip-path: inset(10% 7% 10% 7% round 2rem); transition: clip-path 1.5s var(--ease); }
.img-reveal.in { clip-path: inset(0 0 0 0 round 2rem); }
.img-reveal img { scale: 1.3; transition: scale 2s var(--ease); will-change: translate; }
.img-reveal.in img { scale: 1.12; }
@media (prefers-reduced-motion: reduce) {
  .img-reveal { clip-path: none; }
  .img-reveal img { scale: 1.05; transition: none; }
}

/* Serif-accent in koppen */
.accent { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: -.01em; word-spacing: 0; }
.bg-ink .accent { color: var(--amber); }

h1, h2, h3 { overflow-wrap: anywhere; hyphens: manual; }
p, li, dt, dd, figcaption { overflow-wrap: break-word; hyphens: auto; }