/* ==========================================================================
   MyDev — style.css
   Mobile-first. Tokens → basis → componenten → secties → desktop.
   Merkkleuren komen rechtstreeks uit het logo (cyaan + diepblauw).
   ========================================================================== */

/* ---------- 0. Fonts (zelf gehost, latin-subset, variabel) ----------
   Bewust GEEN Google Fonts CDN: sneller (geen extra verbinding, geen
   render-blocking stylesheet van een derde) en AVG-proof (geen bezoekers-IP
   naar Google zonder toestemming). Vervangen? Download de woff2 opnieuw en
   hou de unicode-range zoals ze is. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/space-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------- */
:root {
  --ink:      #08080A;
  --ink-2:    #0C0C10;
  --graphite: #131318;
  --line:     #23232B;
  --line-2:   #2E2E38;
  --paper:    #F5F6F8;
  --grey:     #9A9AA6;
  --grey-2:   #6E6E7A;

  --cyan:     #11B5D5;
  --cyan-hi:  #37D2EE;
  --blue:     #1A3F83;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --pad:     clamp(72px, 11vw, 148px);
  --gutter:  clamp(20px, 5vw, 48px);
  --max:     1200px;
  --radius:  16px;

  --ease: cubic-bezier(.2, .8, .25, 1);
}

/* ---------- 2. Reset & basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--grey);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); color: var(--paper); line-height: 1.1; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
a { color: var(--cyan); text-decoration: none; }
strong { color: var(--paper); font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--cyan); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--cyan-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Fijne, donkere scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* Subtiele filmkorrel over de hele pagina — geeft diepte aan het zwart */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 60; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cyan); color: var(--ink);
  padding: 12px 20px; font-weight: 600; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

/* Nog in te vullen gegevens — bewust zichtbaar zodat ze niet mee live gaan */
.todo {
  color: #FF9A2E;
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: .85em;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

/* ---------- 3. Knoppen ---------- */
.btn {
  --btn-bg: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 13px 24px;
  border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--btn-bg);
  font-family: var(--font-body); font-size: .95rem; font-weight: 600;
  color: var(--paper); text-align: center; cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s, background .25s, box-shadow .25s;
  overflow: hidden;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--cyan);
  color: #04252C; border-color: transparent;
  box-shadow: 0 6px 24px -10px rgba(17,181,213,.9);
}
.btn--primary:hover { --btn-bg: var(--cyan-hi); box-shadow: 0 12px 34px -12px rgba(17,181,213,1); }

.btn--ghost { border-color: var(--line-2); color: var(--paper); }
.btn--ghost:hover { border-color: var(--cyan); background: rgba(17,181,213,.07); }

/* Lichtvlek die de cursor volgt (js zet --mx/--my) */
.btn--glow::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.45), transparent 65%);
  opacity: 0; transition: opacity .3s;
}
.btn--glow:hover::after { opacity: 1; }

/* ---------- 4. Navigatie ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(8,8,10,.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__logo {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--paper); letter-spacing: -.02em;
}
.nav__logo img { width: 28px; height: 28px; }
.nav__logo b { color: var(--cyan); font-weight: 700; }
/* Het paneel is een kind van .nav (z-index 50 = eigen stapelcontext), dus zonder
   deze regel schuift het over zijn eigen sluitknop en het logo heen. */
.nav__logo, .nav__burger { position: relative; z-index: 50; }

.nav__burger {
  display: grid; place-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.nav__burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--paper);
  transition: transform .3s var(--ease), opacity .2s;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Het paneel: schermvullend, met de knop onderaan waar de duim zit. */
.nav__menu {
  position: fixed; inset: 0; z-index: 49;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 22px;
  padding: 96px var(--gutter) calc(34px + env(safe-area-inset-bottom));
  background: var(--ink);
  visibility: hidden; transform: translateY(-14px); opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__menu.is-open { visibility: visible; transform: none; opacity: 1; }

.nav__links { display: flex; flex-direction: column; }
.nav__links a {
  position: relative; display: flex; align-items: center; min-height: 56px;
  padding: 4px 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 500;
  color: var(--paper); letter-spacing: -.02em; transition: color .25s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--cyan); transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--cyan); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { width: 100%; }

/* Achtergrond niet laten meescrollen, en één zwevend element tegelijk. */
body.nav-open { overflow: hidden; }
body.nav-open .pill { opacity: 0; pointer-events: none; }

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  padding: 116px var(--gutter) 64px;
  overflow: hidden;
  isolation: isolate;
}
/* zachte cyaan gloed achter de titel */
.hero::before {
  content: ""; position: absolute; z-index: -2;
  width: 70vw; height: 70vw; max-width: 700px; max-height: 700px;
  top: -18%; left: -22%;
  background: radial-gradient(circle, rgba(17,181,213,.16), transparent 68%);
  pointer-events: none;
}
.hero__inner { max-width: var(--max); margin: 0 auto; }

/* Mobiel: staande uitsnede, kaartje ligt ook hier in zijn hand */
.hero__visual { position: relative; margin-top: 30px; }
.hero__visual picture { display: block; }
.hero__photo {
  width: 100%; height: auto;
  aspect-ratio: 1107 / 1476;
  /* De uitsnede snijdt links/rechts door het pak — randen zacht uitvagen */
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 99%),
                      linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, #000 74%, transparent 99%),
                      linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-composite: intersect;
}

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px; margin: 0 0 22px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(19,19,24,.6);
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .03em;
  color: var(--grey);
}
.badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #3BD68B;
  box-shadow: 0 0 0 0 rgba(59,214,139,.6); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 8px rgba(59,214,139,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,214,139,0); }
}

.hero__title {
  font-size: clamp(2.7rem, 12.5vw, 5.6rem);
  letter-spacing: -.035em; font-weight: 700;
  margin: 0 0 22px;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; transform: translateY(100%); }
.hero__title .accent { color: var(--cyan); }

.hero__sub { font-size: clamp(1rem, 3.6vw, 1.16rem); max-width: 40ch; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .btn { flex: 1 1 auto; min-width: 160px; }

.hero__points {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 26px;
  font-size: .84rem; color: var(--grey-2);
}
.hero__points li { display: flex; align-items: center; gap: 7px; }
.hero__points li::before { content: "✓"; color: var(--cyan); font-weight: 700; }

.hero__cue { display: none; }

/* --- Hero-intro in CSS, bewust niet in GSAP ---
   De titel, de tekst en de knoppen moeten er staan zodra de HTML er is. Hingen ze
   aan GSAP (115 kB over twee bestanden), dan blijft het eerste scherm leeg tot die
   binnen zijn — en dat is precies je LCP. CSS-animaties draaien op de compositor,
   starten meteen en hebben geen JavaScript nodig.
   De tijden hieronder zijn 1-op-1 overgenomen van de vroegere GSAP-timeline. */
@keyframes heroLine { from { transform: translateY(100%); } to { transform: none; } }
@keyframes heroIn   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes heroCard { from { opacity: 0; transform: translateY(34px) rotateX(22deg); } to { opacity: 1; transform: none; } }

.hero__title .line > span { animation: heroLine 1.1s var(--ease) .15s both; }
.hero__title .line:nth-child(2) > span { animation-delay: .27s; }

.hero .badge, .hero__copy .reveal { animation: heroIn .8s var(--ease) both; }
.hero .badge    { animation-delay: .60s; }
.hero__sub      { animation-delay: .69s; }
.hero__actions  { animation-delay: .78s; }
.hero__points   { animation-delay: .87s; }

/* "backwards" en niet "both": na de intro laat de kaart haar eigen stijlen weer los,
   zodat de ademende GSAP-tween op mobiel er nog bij kan. */
#cardScene { animation: heroCard 1.1s var(--ease) .82s backwards; }

/* --- Het visitekaartje (3D) --- */
/* Exact op het blanco kaartje in de mobiele uitsnede (1107x1476).
   Kaart in de bron: x 897-1470, y 566-936. */
.card-scene {
  position: absolute; z-index: 2;
  left: 6.05%; top: 34.28%;
  width: 51.76%;
  aspect-ratio: 1.549;
  perspective: 900px;
}
.card {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease);
  cursor: pointer;
  border-radius: 12px;
}
.card.is-flipped { transform: rotateY(180deg); }

.card__face {
  position: absolute; inset: 0;
  container-type: inline-size;   /* cqw-units voor de tekst; niet op .card zelf (breekt 3D) */
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(12px, 4.5%, 22px);
  border-radius: 12px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 26px 50px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08);
}
.card__front {
  background:
    radial-gradient(120% 140% at 12% 8%, #FFFFFF 0%, #EFF1F4 55%, #DFE3E9 100%);
  color: #0B0B0F;
}
.card__back {
  background: linear-gradient(150deg, #14141A 0%, #0B0B10 100%);
  color: var(--paper);
  transform: rotateY(180deg);
  border: 1px solid rgba(255,255,255,.09);
  justify-content: center; gap: 1px;
}
.card__mark { width: 13%; min-width: 22px; height: auto; margin-bottom: 6%; }
.card__logo {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.62rem, 11cqw, 1.7rem);
  letter-spacing: -.03em; line-height: 1;
}
.card__front .card__logo b { color: var(--blue); }
.card__tag {
  font-family: var(--font-mono); font-size: clamp(.3rem, 3.2cqw, .7rem);
  color: #5A6070; margin-top: 4%; letter-spacing: .01em; white-space: nowrap;
}
/* Affordance onder de kaart: op desktop is de kaart te klein voor tekst erin */
.card-hint {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  width: max-content; padding: 5px 12px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(8,8,10,.72); backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: .66rem;
  color: var(--grey); letter-spacing: .08em; text-transform: uppercase;
}
.card__name { font-family: var(--font-display); font-size: clamp(.55rem, 8cqw, 1.35rem); font-weight: 700; }
.card__role {
  font-family: var(--font-mono); font-size: clamp(.34rem, 4.2cqw, .68rem);
  color: var(--cyan); margin-bottom: 8px; letter-spacing: .02em;
}
.card__line, .card__web {
  display: block;
  font-size: clamp(.4rem, 5cqw, .8rem);
  color: var(--grey); line-height: 1.7;
}
.card__line { color: var(--paper); }
.card__web { color: var(--grey-2); margin-top: 6px; font-family: var(--font-mono); }
.card__glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  background: radial-gradient(230px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.55), transparent 62%);
  mix-blend-mode: soft-light;
}

/* ---------- 6. Marquee ---------- */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden; padding: 16px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 26px; width: max-content;
  animation: slide 34s linear infinite;
}
.marquee span {
  font-family: var(--font-display); font-size: clamp(.95rem, 3vw, 1.2rem);
  font-weight: 500; color: var(--grey-2); white-space: nowrap; letter-spacing: -.01em;
}
.marquee i { color: var(--cyan); font-size: .6rem; font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 7. Secties ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: var(--pad) var(--gutter); }
.eyebrow {
  font-family: var(--font-mono); font-size: .76rem; color: var(--cyan);
  letter-spacing: .05em; margin: 0 0 14px;
}
.section__title {
  font-size: clamp(1.85rem, 6.6vw, 3rem);
  letter-spacing: -.032em; max-width: 20ch;
}
.section__lead { max-width: 58ch; font-size: clamp(.98rem, 3.3vw, 1.08rem); margin-bottom: 0; }

.grid { display: grid; gap: 16px; margin-top: 42px; }

/* ---------- 8. Diensten ---------- */
.service {
  position: relative;
  padding: 30px 26px 28px;
  background: linear-gradient(170deg, var(--graphite), var(--ink-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .3s, transform .3s var(--ease);
}
.service::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0; transition: opacity .35s;
}
.service:hover { border-color: var(--line-2); transform: translateY(-4px); }
.service:hover::before { opacity: .9; }
.service__num {
  display: block; font-family: var(--font-mono); font-size: .78rem;
  color: var(--cyan); margin-bottom: 16px; letter-spacing: .06em;
}
.service h3 { font-size: 1.24rem; letter-spacing: -.02em; }
.service p { font-size: .96rem; }
.service ul { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.service li {
  position: relative; padding-left: 20px; font-size: .89rem;
  color: var(--grey-2); margin-bottom: 7px;
}
.service li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan); opacity: .65;
}
.service--cta {
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(150deg, rgba(26,63,131,.35), rgba(17,181,213,.08));
  border-color: rgba(17,181,213,.28);
}
.service--cta .btn { align-self: flex-start; margin-top: 8px; }

/* ---------- 9. Cijfers & waarom ---------- */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: 40px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: var(--ink-2); padding: 26px 20px; text-align: center; }
.stat__num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.9rem); color: var(--paper); line-height: 1;
  letter-spacing: -.03em;
}
.stat__label { display: block; margin-top: 9px; font-size: .8rem; color: var(--grey-2); line-height: 1.4; }

.why { margin-top: 16px; }
.why__item { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); }
.why__item h3 { font-size: 1.08rem; letter-spacing: -.02em; }
.why__item h3::before { content: "// "; color: var(--cyan); font-family: var(--font-mono); font-size: .8em; }
.why__item p { font-size: .92rem; margin: 0; }

/* ---------- 10. Aanpak ---------- */
.process { position: relative; margin-top: 42px; }
.process__line {
  position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.process__line span { display: block; width: 100%; height: 0; background: linear-gradient(180deg, var(--cyan), var(--blue)); }
.process__steps { display: grid; gap: 30px; }
.step { position: relative; padding-left: 48px; }
.step__num {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--graphite); border: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: .68rem; color: var(--cyan);
}
.step h3 { font-size: 1.15rem; letter-spacing: -.02em; margin-bottom: .4em; }
.step p { font-size: .94rem; margin: 0; }

/* ---------- 11. Werk ---------- */
.project {
  display: block; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-2); overflow: hidden;
  transition: border-color .3s, transform .35s var(--ease);
}
a.project:hover { border-color: rgba(17,181,213,.45); }
.project__ext {
  display: inline-block; margin-left: .4em;
  color: var(--cyan); font-size: .8em;
  transition: transform .3s var(--ease);
}
a.project:hover .project__ext,
a.project:focus-visible .project__ext { transform: translate(3px, -3px); }
.project:hover { border-color: var(--line-2); transform: translateY(-4px); }
.project__img { overflow: hidden; background: var(--graphite); }
.project__img img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top center;
  transition: transform .7s var(--ease), filter .5s;
  filter: saturate(.85) brightness(.92);
}
.project:hover .project__img img { transform: scale(1.05); filter: none; }
.project__meta { padding: 18px 20px 20px; }
.project__meta h3 { font-size: 1.02rem; margin-bottom: .25em; letter-spacing: -.02em; }
.project__meta p { font-size: .84rem; color: var(--grey-2); margin: 0; }
.project--next {
  display: flex; flex-direction: column; justify-content: center;
  padding: 30px 26px;
  background: linear-gradient(150deg, rgba(26,63,131,.35), rgba(17,181,213,.08));
  border-color: rgba(17,181,213,.28); border-style: dashed;
}
.project--next h3 { font-size: 1.15rem; }
.project--next p { font-size: .92rem; }
.project--next .btn { align-self: flex-start; }

/* ---------- 12. FAQ ---------- */
.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 2px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1rem, 3.6vw, 1.12rem);
  font-weight: 500; color: var(--paper); letter-spacing: -.015em;
  transition: color .25s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none;
  font-family: var(--font-mono); font-size: 1.4rem; font-weight: 400; color: var(--cyan);
  transition: transform .3s var(--ease);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--cyan); }
.faq__body { padding: 0 2px 22px; max-width: 68ch; }

/* Prijzen in de FAQ */
.prices { margin: 4px 0 18px; border-top: 1px solid var(--line); }
.prices li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.prices__wat { font-size: .92rem; color: var(--grey); }
.prices__prijs {
  flex: none;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--paper); letter-spacing: -.02em; white-space: nowrap;
}
.prices__prijs small { font-family: var(--font-body); font-size: .68rem; font-weight: 500; color: var(--grey-2); }
/* alleen het "vanaf"-voorvoegsel krijgt de labelbehandeling, niet "/ maand" */
.prices__vanaf { text-transform: uppercase; letter-spacing: .06em; margin-right: .15em; }
.prices li:last-child .prices__prijs { font-size: .95rem; color: var(--cyan); }
.prices__note { font-size: .9rem; margin: 0; }
.faq__body p { font-size: .95rem; }
.faq__body p:last-child { margin-bottom: 0; }

/* ---------- 12b. Over mij ---------- */
.about__wrap { display: grid; gap: 26px; margin-top: 40px; }
.about__card {
  display: grid; place-content: center; justify-items: center; gap: 18px;
  margin: 0; padding: 34px 24px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(170deg, var(--graphite), var(--ink-2));
}
.about__card img { width: clamp(72px, 22vw, 104px); height: auto; }
.about__card figcaption { display: grid; gap: 4px; }
.about__card strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--paper); letter-spacing: -.02em; }
.about__card span { font-family: var(--font-mono); font-size: .76rem; color: var(--cyan); letter-spacing: .02em; }
.about__text p { font-size: 1rem; }
.about__sign { margin: 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--paper); }

/* ---------- 12c. Werkgebied ---------- */
.regions { display: grid; gap: 16px; margin-top: 40px; }
.region { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); }
.region h3 { font-size: 1.05rem; letter-spacing: -.02em; }
.region h3::before { content: "// "; color: var(--cyan); font-family: var(--font-mono); font-size: .8em; }
.region p { margin: 0; font-size: .9rem; }

/* ---------- 13. Contact ---------- */
.contact__wrap { display: grid; gap: 40px; }
.contact__sub { max-width: 46ch; }
.contact__direct { margin-top: 26px; border-top: 1px solid var(--line); }
.contact__direct li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: .95rem; color: var(--paper);
}
.contact__direct a { display: inline-block; padding: 10px 0; }
.contact__direct a[target="_blank"]:hover .project__ext { transform: translate(3px, -3px); }
.contact__direct li > span:first-child {
  flex: none; width: 86px;
  font-family: var(--font-mono); font-size: .74rem; color: var(--grey-2);
  text-transform: uppercase; letter-spacing: .06em;
}

.form {
  display: grid; gap: 14px;
  padding: 26px 22px;
  background: linear-gradient(170deg, var(--graphite), var(--ink-2));
  border: 1px solid var(--line); border-radius: var(--radius);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.form label {
  font-size: .82rem; font-weight: 500; color: var(--grey);
  font-family: var(--font-mono); letter-spacing: .02em;
}
.form .req { color: var(--cyan); }
.form input, .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--line-2); border-radius: 10px;
  font-family: var(--font-body); font-size: .95rem;
  transition: border-color .25s, box-shadow .25s;
}
.form textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(17,181,213,.16);
}
.form input::placeholder, .form textarea::placeholder { color: var(--grey-2); }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(135deg, var(--grey) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; }
.form__status { margin: 0; font-size: .9rem; min-height: 1.2em; }
.form__status.ok { color: #3BD68B; }
.form__status.err { color: #FF6B6B; }
.form__note { margin: 0; font-size: .78rem; color: var(--grey-2); }
.cf-turnstile { min-height: 0; }

/* ---------- 14. Footer & pill ---------- */
.footer {
  display: grid; gap: 16px; align-items: center;
  /* extra ruimte onderaan zodat de zwevende pill-balk niets afdekt */
  padding: 38px var(--gutter) calc(96px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  font-size: .84rem; color: var(--grey-2);
}
.footer__brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; color: var(--paper); }
.footer__brand b { color: var(--cyan); }
.footer__legal { margin: 0; }
.footer__legal p { margin: 0 0 5px; }
.footer__legal p:last-child { margin-bottom: 0; }
.footer__legal a { color: var(--grey); }
.footer__legal a:hover { color: var(--cyan); }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin: -11px 0; }
.footer__links a { display: inline-block; padding: 11px 0; color: var(--grey-2); transition: color .25s; }
.footer__links a:hover { color: var(--cyan); }

.pill {
  position: fixed; z-index: 55;
  left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; gap: 4px; padding: 5px;
  max-width: calc(100vw - 20px);
  background: rgba(12,12,16,.82);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line-2); border-radius: 999px;
  box-shadow: 0 14px 34px -14px #000;
}
.pill__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(5px, 1.8vw, 8px);
  min-height: 44px; padding: 0 clamp(11px, 3.4vw, 20px); border-radius: 999px;
  font-size: clamp(.76rem, 3.3vw, .88rem); font-weight: 600;
  color: var(--paper); white-space: nowrap;
}
.pill__btn--primary { background: var(--cyan); color: #04252C; }
.pill__ico { flex: none; width: 1em; height: 1em; }
svg.pill__ico { width: 1.05em; height: 1.05em; }

/* ---------- 14b. Juridische pagina's ---------- */
.legal { max-width: 68ch; padding-top: 130px; }
.legal h1 { font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -.03em; }
.legal h2 {
  font-size: clamp(1.1rem, 4vw, 1.3rem); letter-spacing: -.02em;
  margin: 2.2em 0 .5em;
}
.legal h2::before { content: "// "; color: var(--cyan); font-family: var(--font-mono); font-size: .8em; }
.legal p, .legal li { font-size: .97rem; }
.legal ul { margin: 0 0 1em; }
.legal li { position: relative; padding-left: 20px; margin-bottom: 7px; }
.legal li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); opacity: .65;
}
.legal__intro { color: var(--paper); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.legal__date {
  margin-top: 3em; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .78rem; color: var(--grey-2);
}

/* ---------- 15. Scroll-reveal startposities ----------
   Alleen verstoppen wanneer er JavaScript is om ze weer te tonen. Zonder JS (of in
   een browser van vóór 2023, die deze query niet kent) staat alles er gewoon —
   GSAP zet de startwaarden bij het animeren toch zelf via fromTo. */
@media (scripting: enabled) {
  .reveal, .reveal-card { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal-card { opacity: 1 !important; }
  .hero__title .line > span { transform: none !important; }
  .marquee__track { animation: none; }
}

/* ==========================================================================
   16. Tablet
   ========================================================================== */
@media (min-width: 620px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .form { grid-template-columns: 1fr 1fr; padding: 32px 30px; }
  .footer { grid-template-columns: auto 1fr auto; gap: 24px; }
  .footer__legal { text-align: center; }
}

/* ==========================================================================
   17. Desktop — hier komt de kaart écht in zijn hand te liggen
   ========================================================================== */
@media (min-width: 900px) {
  .nav { padding: 18px var(--gutter); }
  .nav__burger { display: none; }
  /* display:contents → logo, links en knop liggen weer rechtstreeks in de header-flex */
  .nav__menu {
    display: contents;
    visibility: visible; opacity: 1; transform: none;
  }
  .nav__links { flex-direction: row; gap: 30px; }
  .nav__links a {
    min-height: 0; padding: 6px 0; border-bottom: 0;
    font-family: var(--font-body); font-size: .92rem; color: var(--grey);
  }
  .nav__links a::after { bottom: 0; }
  .nav__links a:hover { color: var(--paper); }
  .nav__cta { width: auto; padding: 10px 18px; min-height: 42px; font-size: .88rem; }

  .pill { display: none; }
  .footer { padding-bottom: 38px; }

  .hero { padding: 150px var(--gutter) 90px; min-height: 100svh; display: flex; align-items: center; }
  .hero__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center; gap: clamp(24px, 4vw, 56px); width: 100%;
  }
  .hero__visual { margin-top: 0; }
  .hero__photo {
    aspect-ratio: 2752 / 1536;
    -webkit-mask-image: radial-gradient(78% 78% at 52% 46%, #000 58%, transparent 100%);
            mask-image: radial-gradient(78% 78% at 52% 46%, #000 58%, transparent 100%);
  }
  /* Exact op het blanco kaartje in de foto.
     Gemeten op de bron (2752×1536): x 897–1470, y 566–936.
     Verschuift de foto ooit? Enkel deze vier getallen aanpassen. */
  .card-scene {
    left: 32.6%; top: 36.85%;
    width: 20.82%;
    perspective: 620px;   /* schaalt mee met de veel kleinere kaart */
  }
  .card__face, .card, .card__glare { border-radius: 6px; }

  .hero__title { font-size: clamp(3.4rem, 5.6vw, 5.4rem); }
  .hero__actions .btn { flex: 0 0 auto; }

  .hero__cue {
    display: block; position: absolute; left: 50%; bottom: 26px;
    width: 22px; height: 34px; border: 1px solid var(--line-2); border-radius: 12px;
    transform: translateX(-50%);
  }
  .hero__cue span {
    display: block; width: 3px; height: 7px; border-radius: 3px; background: var(--cyan);
    margin: 6px auto 0; animation: cue 1.9s var(--ease) infinite;
  }
  @keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

  .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .grid { margin-top: 52px; }

  .process { padding-left: 0; }
  .process__line { left: 0; right: 0; top: 13px; bottom: auto; width: auto; height: 2px; }
  .process__line span { width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
  .process__steps { grid-template-columns: repeat(4, 1fr); gap: 26px; }
  .step { padding-left: 0; padding-top: 46px; }
  .step__num { top: 0; left: 0; }

  .about__wrap { grid-template-columns: .8fr 1.2fr; gap: 46px; align-items: start; }
  .regions { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .contact__wrap { grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
  .contact .section__title { max-width: 14ch; }
}

@media (min-width: 1100px) {
  .why { grid-template-columns: repeat(3, 1fr); }
}