/* ============================================================
   components.css — Navbar, buttons, badges, hero, cards, forms,
   marquee, counters, footer, cursor, tilt, tooltips, etc.
   ============================================================ */

/* ===========================================================
   Custom cursor
   =========================================================== */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-2);
  box-shadow: 0 0 12px var(--glow);
}
.cursor-ring {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--accent-2);
  transition: width 0.28s var(--ease), height 0.28s var(--ease),
              background-color 0.28s var(--ease), opacity 0.3s ease, border-color 0.28s var(--ease);
}
.has-custom-cursor .cursor-dot,
.has-custom-cursor .cursor-ring { opacity: 1; }
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor input,
.has-custom-cursor textarea,
.has-custom-cursor .tilt,
.has-custom-cursor [data-magnetic] { cursor: none; }
.has-custom-cursor { cursor: none; }

.cursor-ring.is-hover {
  width: 62px;
  height: 62px;
  background: var(--halo);
  border-color: transparent;
}
.cursor-dot.is-hover { width: 5px; height: 5px; }

/* ===========================================================
   Navbar
   =========================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease), box-shadow 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: var(--nav-bg-scrolled);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.06);
  backdrop-filter: blur(24px) saturate(180%) brightness(1.06);
  border-bottom-color: var(--nav-border);
  box-shadow: var(--shadow-sm);
}
.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Wordmark */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.0rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.wordmark__logo {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  transition: transform 0.4s var(--ease);
}
.wordmark__img { display: block; width: 100%; height: 100%; }
/* Witte M op donker, zwarte M op licht */
.wordmark__img--on-light { display: none; }
[data-theme="light"] .wordmark__img--on-dark { display: none; }
[data-theme="light"] .wordmark__img--on-light { display: block; }
/* "Going up": het logo stijgt een tikje bij hover */
.wordmark:hover .wordmark__logo { transform: translateY(-3px); }
.footer__brand .wordmark__logo { width: 36px; height: 36px; }
/* Smalle telefoons: logo + naam iets compacter, zodat de navigatie past */
@media (max-width: 420px) {
  .nav .wordmark { gap: 8px; }
  .nav .wordmark__logo { width: 24px; height: 24px; }
  .nav .wordmark__name { font-size: 0.9rem; }
}
/* Heel smal (bv. 360 px): alleen het logo; de link heeft een aria-label */
@media (max-width: 380px) {
  .nav .wordmark__name { display: none; }
}

/* Desktop nav links */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.4vw, 22px);
}
.nav__link {
  position: relative;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 2px;
  transition: color 0.25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Nav controls cluster */
.nav__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon button (theme/lang/social) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-soft);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: 0 0 0 4px var(--glow-soft);
  transform: translateY(-2px);
}
.icon-btn svg { width: 18px; height: 18px; }

/* Theme toggle */
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
[data-theme="light"] .theme-toggle .sun { display: block; }
[data-theme="light"] .theme-toggle .moon { display: none; }
.theme-toggle svg { transition: transform 0.5s var(--ease); }
.theme-toggle:active svg { transform: rotate(40deg) scale(0.9); }

/* Language toggle */
.lang-toggle {
  width: auto;
  padding-inline: 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  gap: 5px;
}
.lang-toggle .sep { opacity: 0.4; }
.lang-toggle .is-active { color: var(--accent-3); }

/* Hamburger */
.hamburger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--glass-bg);
  position: relative;
}
.hamburger span {
  position: absolute;
  left: 11px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.35s var(--ease), opacity 0.2s ease, top 0.35s var(--ease);
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 27px; }
body.menu-open .hamburger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Mobile overlay menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--pad);
  background: var(--nav-bg-scrolled);
  -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(0.92);
  backdrop-filter: blur(40px) saturate(200%) brightness(0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu__link {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2rem, 9vw, 3.2rem);
  color: var(--text);
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), color 0.3s ease;
}
.mobile-menu__link:hover { color: var(--accent-3); }
body.menu-open .mobile-menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.12s + var(--i, 0) * 0.07s);
}
.mobile-menu__meta {
  margin-top: var(--sp-5);
  display: flex;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.5s;
}
body.menu-open .mobile-menu__meta { opacity: 1; }

/* ===========================================================
   Buttons
   =========================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }

.btn--primary {
  color: var(--accent-ink);
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 10px 30px -10px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px -8px rgba(50, 205, 50, 0.65), 0 0 0 1px rgba(70, 217, 70, 0.4);
  background: linear-gradient(135deg, #32CD32, #46D946);
}
.btn--ghost {
  color: var(--text);
  background: var(--glass-bg);
  border: 1px solid var(--border-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover,
.btn--outline:hover {
  transform: translateY(-3px);
  background: var(--surface-3);
  border-color: var(--accent-2);
  box-shadow: 0 8px 28px -8px rgba(50, 205, 50, 0.35);
}
.btn:active {
  transform: translateY(-1px);
  transition-duration: 0.1s;
}
.btn--block { width: 100%; }
.btn--lg { border-radius: 14px; padding: 16px 32px; font-size: 1rem; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--accent-3);
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.link-arrow:hover { gap: 14px; color: var(--text); }

/* ===========================================================
   Badges
   =========================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-soft);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: pulseGreen 2s ease-out infinite;
}
.badge--accent { color: var(--accent-3); border-color: var(--border-strong); }
.badge--accent .dot { background: var(--accent-2); animation-name: pulseDot; }

/* ===========================================================
   Hero
   =========================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--hero-overlay);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 980px;
}
.hero h1 {
  font-size: var(--fs-hero);
  margin-block: var(--sp-2) var(--sp-3);
}
.hero__name { display: block; }
.hero__type {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.6vw, 1.8rem);
  color: var(--text-soft);
  min-height: 1.4em;
}
.hero__type .tw-cursor {
  display: inline-block;
  width: 3px;
  height: 1.05em;
  margin-left: 4px;
  border-radius: 2px;
  background: var(--accent-2);
  vertical-align: -0.12em;
  box-shadow: 0 0 10px var(--glow);
  animation: blink 1s steps(1) infinite;
}
.hero__body {
  max-width: 600px;
  margin-top: var(--sp-3);
  font-size: var(--fs-lead);
  color: var(--text-muted);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.hero__social {
  display: flex;
  gap: 10px;
  margin-top: var(--sp-4);
}

/* ===========================================================
   Hero background layer — floating glassmorphism cards
   Sits between the canvas (z-index 0) and the hero text
   (z-index 2): decorative, behind the copy, never blocking it.
   Each .hero-card is positioned/parallaxed by hero-cards.js;
   .hero-card__inner carries the glass look (same recipe as the
   generic .card) plus an idle float and hover glow; the empty
   .hero-card__icon is where a future logo (data-icon="…") goes.
   =========================================================== */
.hero__cards {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-card {
  position: absolute;
  pointer-events: auto;
  will-change: transform;
}
.hero-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
  animation-name: heroCardFloat;
  animation-timing-function: var(--ease-in-out);
  animation-iteration-count: infinite;
}
/* A faint blue tint so the card reads as an object even where the hero
   behind it is mostly flat dark space with little for the blur to catch. */
.hero-card__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, var(--glow-soft), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.hero-card:hover .hero-card__inner {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-glow), 0 0 28px var(--glow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: scale(1.06);
}
.hero-card__icon {
  width: 44%;
  height: 44%;
  color: var(--accent-3);
  opacity: 0.9;
}
.hero-card__icon svg,
.hero-card__icon img { width: 100%; height: 100%; }

@keyframes heroCardFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* Positions + sizes — 6 left / 5 right, single near-edge band per
   side (4-8% off the viewport edge). .hero__inner is a fixed
   980px column: it only has real side margin once the viewport is
   comfortably wide (~1400px+ — see the hide breakpoint below), so
   at those widths this band sits well clear of it. Durations/
   negative delays stop the float from looking synchronized. */
.hero-card--1  { top: 15%; left: 5%;  width: 64px; height: 64px; }
.hero-card--3  { top: 31%; left: 7%;  width: 72px; height: 72px; }
.hero-card--5  { top: 47%; left: 4%;  width: 52px; height: 52px; }
.hero-card--7  { top: 63%; left: 8%;  width: 90px; height: 90px; }
.hero-card--9  { top: 79%; left: 5%;  width: 58px; height: 58px; }
.hero-card--11 { top: 92%; left: 7%;  width: 56px; height: 56px; }

.hero-card--2  { top: 15%; right: 6%; width: 96px; height: 96px; }
.hero-card--4  { top: 34%; right: 4%; width: 80px; height: 80px; }
.hero-card--6  { top: 53%; right: 7%; width: 68px; height: 68px; }
.hero-card--8  { top: 72%; right: 5%; width: 48px; height: 48px; }
.hero-card--10 { top: 90%; right: 8%; width: 64px; height: 64px; }

.hero-card--1  .hero-card__inner { animation-duration: 7.5s; animation-delay: -1.2s; }
.hero-card--2  .hero-card__inner { animation-duration: 8.6s; animation-delay: -3.4s; }
.hero-card--3  .hero-card__inner { animation-duration: 6.8s; animation-delay: -0.6s; }
.hero-card--4  .hero-card__inner { animation-duration: 9.2s; animation-delay: -5.1s; }
.hero-card--5  .hero-card__inner { animation-duration: 7.1s; animation-delay: -2.3s; }
.hero-card--6  .hero-card__inner { animation-duration: 8.0s; animation-delay: -4.0s; }
.hero-card--7  .hero-card__inner { animation-duration: 9.8s; animation-delay: -1.8s; }
.hero-card--8  .hero-card__inner { animation-duration: 7.8s; animation-delay: -0.3s; }
.hero-card--9  .hero-card__inner { animation-duration: 8.9s; animation-delay: -2.9s; }
.hero-card--10 .hero-card__inner { animation-duration: 6.5s; animation-delay: -4.6s; }
.hero-card--11 .hero-card__inner { animation-duration: 9.4s; animation-delay: -1.1s; }

@media (prefers-reduced-motion: reduce) {
  .hero-card__inner { animation: none; }
}
/* Decorative-only: off below 1400px. Below that width .hero__inner's
   980px column eats nearly the full viewport (little to no real side
   margin — see the .hero-card position comment above), so there's no
   safe band left for the cards to live in; hiding them here also
   covers narrow/touch screens where there's no cursor to parallax
   against anyway. */
@media (max-width: 1400px) {
  .hero__cards { display: none; }
}

/* tooltip on social icons */
.tip { position: relative; }
.tip::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.tip:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===========================================================
   Generic glass card
   =========================================================== */
.card {
  position: relative;
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--border-strong), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-glow); }

/* Feature (What I Do) card */
.feature-card { text-align: left; }
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--radius);
  font-size: 1.7rem;
  background: radial-gradient(circle at 30% 30%, var(--halo), transparent 70%), var(--surface-3);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-3);
  box-shadow: inset 0 0 20px var(--glow-soft);
}
.feature-card h3 { margin-bottom: var(--sp-1); }
.feature-card p { color: var(--text-muted); font-size: 0.98rem; }

/* ===========================================================
   Tilt + glare (data-tilt)
   =========================================================== */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease);
  will-change: transform;
}
.tilt__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.22), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  z-index: 4;
}
.tilt.is-tilting .tilt__glare { opacity: 1; }

/* ===========================================================
   Project cards
   =========================================================== */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-3);
  align-items: stretch;
}
/* Wrapper carries reveal + filtering so its transform never
   collides with the tilt transform on the inner card. */
.reveal-wrap { display: flex; min-width: 0; align-items: stretch; }
.reveal-wrap.is-leaving {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}
.project-card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.project-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-glow); }
.project-card__media {
  position: relative;
  /* Iets breder dan de breedste screenshot (≈2.04:1): elke afbeelding vult zo
     altijd de volle breedte en wordt alleen onderaan bijgesneden, nooit opzij */
  aspect-ratio: 41 / 20;
  overflow: hidden;
  background: var(--card-img-bg);
}
.project-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s var(--ease);
}
.project-card:hover .project-card__media img { transform: scale(1.06); }

/* Videokaarten zijn div[role=button] — klikbaar en focusbaar */
.project-card[data-video-src] { cursor: pointer; }
.project-card[data-video-src]:focus-visible {
  outline: 2px solid var(--accent, #32CD32);
  outline-offset: 2px;
}

/* Motion pieces without a screenshot: icon + play badge on a soft gradient */
.project-card__media--reel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface) 100%);
}
.project-card__reel-icon {
  width: 56px;
  height: 56px;
  color: var(--accent-3);
  opacity: 0.85;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.project-card__reel-icon svg { width: 100%; height: 100%; }
.project-card:hover .project-card__reel-icon { transform: scale(1.08); opacity: 1; }
.project-card__reel-play {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--glass-bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
}
.project-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-3);
  /* Donkere scrim met groene tekst: wit op #32CD32 haalt het contrast niet */
  background: linear-gradient(0deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.35) 38%, rgba(10, 10, 10, 0) 65%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.project-card:hover .project-card__overlay { opacity: 1; }
.project-card__overlay span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  color: #7BE07B;
  transform: translateY(10px);
  transition: transform 0.4s var(--ease);
}
.project-card:hover .project-card__overlay span { transform: none; }
.project-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
}
.project-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.project-card__cat {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-3);
}
.project-card__year::before { content: "·"; margin-right: 10px; color: var(--text-faint); }
.project-card__body h3 { font-size: 1.3rem; }
.project-card__body p { font-size: 0.95rem; color: var(--text-muted); }
.project-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* ---------- Uitklappanelen met projectbeschrijving (project-details.js) ----------
   Desktop: het paneel ligt absoluut naast de kaart, even hoog, en schuift via
   clip-path vanachter de kaart uit over de buurkaart. De grid zelf verschuift
   nooit. Richting (data-dir) en verschuiving (.is-shifted) zet de JS bij elke
   opening op basis van de werkelijke kolompositie. Touch of één kolom:
   .is-details-accordion op de grid, het paneel klapt dan onder de kaart open. */
.reveal-wrap.has-details {
  position: relative;
  flex-direction: column;
  --details-gap: 24px;
  --details-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --details-dur: 0.35s;
}
.reveal-wrap.has-details.is-details-open,
.reveal-wrap.has-details.is-details-closing { z-index: 20; }
.project-unit {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  /* Volgorde bij sluiten (paneel in, dan kaart terug) regelt de JS */
  transition: transform var(--details-dur) var(--details-ease);
}
.project-unit > .project-card { z-index: 1; }
.is-shifted .project-unit {
  transform: translateX(calc(-100% - var(--details-gap)));
}

/* Dicht en zonder richting ligt het paneel precies achter de kaart, zodat
   het nooit buiten de grid of de viewport uitsteekt (geen horizontale scroll).
   Open begint het paneel --details-overlap onder de kaart: zo lopen kaart en
   paneel naadloos in elkaar over als één verbrede kaart. Het is minstens even
   hoog als de kaart en groeit mee als de tekst langer is, zodat alles leesbaar
   blijft zonder te scrollen. --details-span (1 of 2 kaarten) zet de JS. */
.project-details {
  --details-overlap: 14px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  min-height: 100%;
  display: flex;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  visibility: hidden;
  clip-path: inset(0 100% 0 0 round 14px);
  transition:
    clip-path var(--details-dur) var(--details-ease),
    visibility 0s linear var(--details-dur);
}
.project-details[data-dir] {
  width: calc(var(--details-span, 1) * (100% + var(--details-gap)) + var(--details-overlap));
}
.project-details[data-dir="right"] {
  left: calc(100% - var(--details-overlap));
  padding-left: var(--details-overlap);
}
.project-details[data-dir="left"] {
  left: auto;
  right: calc(100% - var(--details-overlap));
  padding-right: var(--details-overlap);
  clip-path: inset(0 0 0 100% round 14px);
}
.is-details-open .project-details,
.is-details-open .project-details[data-dir="left"] {
  visibility: visible;
  clip-path: inset(0 0 0 0 round 14px);
  transition:
    clip-path var(--details-dur) var(--details-ease),
    visibility 0s linear 0s;
}
/* Middelste kolom: eerst schuift de kaart, daarna klapt het paneel uit */
.is-details-open.is-shifted .project-details { transition-delay: var(--details-dur), 0s; }

/* Kaart en paneel lezen samen als één verbrede kaart */
.is-details-open .project-card,
.is-details-closing .project-card { border-color: var(--border-strong); box-shadow: var(--shadow); }

.project-details__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.project-details__body {
  flex: 1 1 auto;
  margin: 0;
  padding: 20px var(--sp-3) 6px;
}
.project-details__item { break-inside: avoid; margin-bottom: 14px; }
/* Twee kaarten breed: tekst in twee kolommen, zodat regels leesbaar kort blijven */
.project-details[data-span="2"] .project-details__body {
  columns: 2;
  column-gap: 32px;
}
.project-details__item dt {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 4px;
}
.project-details__item dd {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.48;
  color: var(--text-soft);
}
.project-details__foot {
  flex: 0 0 auto;
  padding: 14px var(--sp-3) 18px;
  border-top: 1px solid var(--border-soft);
}
.project-details__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent-3);
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.project-details__link:hover { gap: 12px; color: var(--text); }
.project-details__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* "Lees meer"-knop: alleen in accordeonmodus (touch of één kolom) */
.project-details__toggle {
  margin-top: 10px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.project-details__toggle:hover { border-color: var(--border-strong); color: var(--text); }
.project-details__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.is-details-accordion .project-unit { flex: 0 0 auto; flex-direction: column; transform: none; transition: none; }
.is-details-accordion .project-details {
  position: static;
  flex: none; /* nooit laten krimpen: de hele tekst moet zichtbaar zijn */
  width: auto;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: 0fr;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
  visibility: hidden;
  transition:
    grid-template-rows var(--details-dur) var(--details-ease),
    visibility 0s linear var(--details-dur);
}
.is-details-accordion .is-expanded .project-details {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--details-dur) var(--details-ease),
    visibility 0s linear 0s;
}
.is-details-accordion .project-details__inner { overflow: hidden; }
.is-details-accordion .project-details__body,
.is-details-accordion .project-details__foot {
  background: var(--surface);
  border: 1px solid var(--border);
}
.is-details-accordion .project-details__body {
  margin-top: 10px;
  overflow: visible;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.is-details-accordion .project-details__foot { border-top: 0; border-radius: 0 0 14px 14px; }

/* Geen transities tijdens direct sluiten (filter, resize) */
.no-details-anim .project-unit,
.no-details-anim .project-details { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  /* Er schuift niets: het paneel verschijnt alleen met een korte fade */
  .project-unit { transition: none; }
  .project-details,
  .project-details[data-dir="left"],
  .is-details-open .project-details,
  .is-details-open .project-details[data-dir="left"] {
    clip-path: none;
    opacity: 0;
    transition: opacity 0.15s linear, visibility 0s linear 0.15s;
  }
  .is-details-open .project-details,
  .is-details-open .project-details[data-dir="left"] {
    opacity: 1;
    transition: opacity 0.15s linear, visibility 0s linear 0s;
  }
  .is-details-open.is-shifted .project-details { transition-delay: 0s; }
  .is-shifted .project-unit { transform: none; }
  .is-details-accordion .project-details,
  .is-details-accordion .is-expanded .project-details { opacity: 1; transition: none; }
}
.tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  color: var(--text-soft);
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
}

/* Tilt card must fill its reveal wrapper for equal-height cards. */
.project-card.tilt { height: 100%; }

/* Motion cards with no external link open a video lightbox instead —
   they're a <button>, so undo the browser's default button chrome. */
button.project-card {
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(5, 6, 12, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-lightbox.is-open { display: flex; }
.video-lightbox__panel {
  position: relative;
  width: min(900px, 100%);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-glow);
  overflow: hidden;
}
.video-lightbox__video {
  display: block;
  width: 100%;
  max-height: 80vh;
  background: #000;
}
.video-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--glass-bg);
  border: 1px solid var(--border-strong);
  color: var(--text);
  cursor: pointer;
  z-index: 1;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.video-lightbox__close:hover { transform: scale(1.08); }

/* ===========================================================
   Filter tabs
   =========================================================== */
.filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.filter-btn {
  padding: 9px 20px;
  border-radius: var(--radius-full);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.filter-btn:hover { color: var(--text); }
.filter-btn.is-active {
  color: var(--accent-ink);
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 22px -8px var(--glow);
}

/* ===========================================================
   Skills marquee items
   =========================================================== */
.skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-soft);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.skill-pill .ico { color: var(--accent-3); display: inline-flex; }
.skill-pill .ico svg { width: 18px; height: 18px; }
.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ===========================================================
   Counters
   =========================================================== */
.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  text-align: center;
}
.counter__num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  line-height: 1;
  background: linear-gradient(120deg, var(--accent-3), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.counter__label {
  margin-top: var(--sp-1);
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ===========================================================
   CTA banner
   =========================================================== */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 7vw, 80px);
  text-align: center;
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-3) 50%, rgba(50, 205, 50, 0.08) 100%);
  border: 1px solid var(--border-strong);
  box-shadow: 0 0 60px -20px rgba(50, 205, 50, 0.25);
  isolation: isolate;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 20%, var(--glow-soft), transparent 42%),
    radial-gradient(circle at 85% 80%, var(--halo), transparent 48%);
}
.cta-banner h2 { color: var(--text); max-width: 640px; margin-inline: auto; }
.cta-banner p { color: var(--text-muted); max-width: 520px; margin: var(--sp-2) auto 0; }
.cta-banner .btn--ghost {
  margin-top: var(--sp-4);
  color: var(--accent-ink);
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border-color: transparent;
  box-shadow: 0 10px 30px -10px var(--glow);
}
.cta-banner .btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px var(--glow);
}

/* ===========================================================
   Footer
   =========================================================== */
.footer {
  position: relative;
  z-index: var(--z-content);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding-block: var(--sp-8) var(--sp-4);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--sp-5);
}
.footer__brand .wordmark { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.footer__brand p { color: var(--text-muted); max-width: 320px; font-size: 0.95rem; }
.footer h3 {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-2);
}
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a { color: var(--text-muted); font-size: 0.95rem; transition: color 0.25s var(--ease); width: fit-content; }
.footer__links a:hover { color: var(--accent-3); }
.footer__social { display: flex; gap: 10px; margin-top: var(--sp-1); }
.footer__bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  justify-content: space-between;
  align-items: center;
  color: var(--text-faint);
  font-size: 0.85rem;
}
.footer__bottom .heart { color: var(--accent-2); }
.footer__legal { flex-basis: 100%; font-size: 0.8rem; margin-bottom: var(--sp-2); }

/* ===========================================================
   Page hero (inner pages) + breadcrumb
   =========================================================== */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(48px, 9vw, 110px));
  padding-bottom: clamp(20px, 4vw, 40px);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.9; pointer-events: none; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.breadcrumb a:hover { color: var(--accent-3); }
.breadcrumb .sep { color: var(--text-faint); }
.page-title {
  font-size: var(--fs-h1);
  position: relative;
  display: inline-block;
}
.page-title::after {
  content: "-";
  display: inline-block;
  margin-left: 0.12em;
  font-weight: 800;
  transform: scaleX(1.5);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.page-hero p.lead { max-width: 620px; margin-top: var(--sp-3); font-size: var(--fs-lead); color: var(--text-muted); }

/* ===========================================================
   About: bio + skills + tools
   =========================================================== */
.bio {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.bio__media { position: relative; display: flex; justify-content: center; }
.bio__photo-wrap {
  position: relative;
  width: min(360px, 80%);
  aspect-ratio: 1;
  border-radius: 50%;
}
.bio__photo-wrap::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-3), var(--accent-2), var(--accent));
  filter: blur(14px);
  opacity: 0.55;
  z-index: -1;
  animation: haloPulse 5s var(--ease-in-out) infinite;
}
.bio__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
}
.bio__accent-canvas {
  position: absolute;
  right: -6%;
  bottom: -6%;
  width: 150px;
  height: 150px;
  pointer-events: none;
}
.bio__text h2 { margin-bottom: var(--sp-3); }
.bio__text p { color: var(--text-soft); }
.bio__text p + p { margin-top: var(--sp-2); }
.bio__signature { margin-top: var(--sp-3); display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  color: var(--text-soft);
  background: var(--surface-3);
  border: 1px solid var(--border);
}

/* Skills grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--sp-3);
}
.skill-card__top { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-2); }
.skill-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: var(--accent-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.skill-card__icon svg { width: 22px; height: 22px; }
.skill-card h3 { font-size: 1.18rem; }
.skill-card__sub { color: var(--text-muted); font-size: 0.88rem; margin-bottom: var(--sp-3); }
/* Crisper skill card (progress bars removed in v3 — tag chips instead) */
.skill-card {
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.skill-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-glow);
}
.skill-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* Opleiding (over-pagina): vakken per studiejaar */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
  align-items: start;
}
.edu-card {
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.edu-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-glow);
  transform: translateY(-3px);
}
.edu-card.is-current { border-color: var(--border-strong); }
.edu-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.edu-card__top h3 { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.edu-card__count {
  margin: 4px 0 var(--sp-2);
  color: var(--text-muted);
  font-size: 0.88rem;
}
.edu-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.edu-card__list li {
  position: relative;
  padding-left: 18px;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.4;
}
.edu-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-3);
  opacity: 0.8;
}
.edu-card__next {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 0.88rem;
}
@media (prefers-reduced-motion: reduce) {
  .edu-card:hover { transform: none; }
}

/* Tools grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: var(--sp-2);
}
.tool {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tool:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-glow); }
.tool::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: translateX(-130%) skewX(-18deg);
}
.tool:hover::after { animation: shimmer 0.9s var(--ease); }
.tool__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--accent-3);
}
.tool__icon svg { width: 30px; height: 30px; }
.tool span { font-size: 0.82rem; font-weight: 600; color: var(--text-soft); text-align: center; }

/* ===========================================================
   Contact: info cards + form
   =========================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.info-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.info-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.info-card:hover { transform: translateX(5px); border-color: var(--border-strong); box-shadow: var(--shadow-glow); }
.info-card__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--accent-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.info-card__icon svg { width: 22px; height: 22px; }
.info-card__label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
.info-card__value { color: var(--text); font-weight: 500; word-break: break-word; }
.info-card a.info-card__value:hover { color: var(--accent-3); }

/* Form */
.form {
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.field { position: relative; margin-bottom: var(--sp-3); }
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.field input,
.field textarea {
  width: 100%;
  padding: 14px 44px 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--glow-soft);
}
.field__icon {
  position: absolute;
  right: 14px;
  top: 41px;
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.field.is-valid input,
.field.is-valid textarea { border-color: var(--success); }
.field.is-valid .field__icon.check { opacity: 1; transform: scale(1); color: var(--success); }
.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--error); }
.field.is-invalid .field__icon.cross { opacity: 1; transform: scale(1); color: var(--error); }
.field textarea ~ .field__icon { top: 41px; }
.field__error {
  font-size: 0.76rem;
  color: var(--error);
  margin-top: 6px;
  min-height: 1em;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.field.is-invalid .field__error { opacity: 1; }

/* Submit button states */
.form__submit { margin-top: var(--sp-1); }
.btn .label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn .spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor;
  animation: spin 0.7s linear infinite;
  display: none;
}
.btn.is-loading .label,
.btn.is-loading .check-ico { display: none; }
.btn.is-loading .spinner { display: inline-block; }
.btn .check-ico { display: none; }
.btn.is-success { background: linear-gradient(120deg, var(--success), #15803d); }
.btn.is-success .label,
.btn.is-success .spinner { display: none; }
.btn.is-success .check-ico { display: inline-block; animation: popCheck 0.5s var(--ease); }

.form__status {
  margin-top: var(--sp-2);
  font-size: 0.9rem;
  color: var(--success);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.form__status.show { opacity: 1; }
.form__status.error { color: var(--error); }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .bio { grid-template-columns: 1fr; text-align: center; }
  .bio__signature { justify-content: center; }
  .bio__accent-canvas { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav__links { display: none; }
  .nav__controls .nav__desktop-only { display: none; }
  .hamburger { display: inline-flex; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
}

@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
  .filters { width: 100%; justify-content: center; }
  .cta-banner { padding: 36px 22px; }
}

/* ===========================================================
   v3 additions
   =========================================================== */

/* Hero name gradient — richer multi-stop, gently shifting */
.text-gradient {
  background: linear-gradient(135deg, #7BE07B 0%, #32CD32 35%, #1FA51F 65%, #46D946 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

/* Numbered mobile-menu items */
.mobile-menu__link::before {
  content: attr(data-idx);
  display: block;
  font-size: 0.68rem;
  font-family: var(--font-head);
  letter-spacing: 0.18em;
  color: var(--accent-3);
  margin-bottom: 4px;
  opacity: 0.7;
}

/* Diagonal accent bar */
.diag-bar {
  display: block;
  width: 32px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  border-radius: 2px;
  margin-bottom: var(--sp-2);
}
.diag-bar.sm { width: 20px; height: 2px; }

/* ---------- Contact info panel (cinfo-panel) ---------- */
.cinfo-panel { position: sticky; top: calc(var(--nav-h) + 24px); }

.avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: rgba(50, 205, 50, 0.08);
  border: 1px solid rgba(50, 205, 50, 0.28);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-3);
  margin-bottom: var(--sp-3);
}
.avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulseGreen 2s ease-out infinite;
  flex-shrink: 0;
}
.cinfo-statement {
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-4);
}
.creasons { display: flex; flex-direction: column; gap: 18px; }
.creason { display: flex; gap: 14px; align-items: flex-start; }
.creason-ic {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--accent-3);
}
.creason-ic svg { width: 16px; height: 16px; }
.creason-t { font-weight: 600; font-size: 0.9rem; color: var(--text); margin-bottom: 3px; }
.creason-d { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }

.cinfo-details { display: flex; flex-direction: column; gap: 4px; }
.cinfo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
a.cinfo-row:hover { background: var(--surface-2); transform: translateX(4px); }
.cinfo-row__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--accent-3);
}
.cinfo-row__icon svg { width: 15px; height: 15px; }
.cinfo-row__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: 2px;
}
.cinfo-row__value {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-soft);
  word-break: break-word;
}

/* ---------- Submit button overflow fix ---------- */
.form__submit,
.form__submit .btn,
.form__submit .btn--primary {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.form { overflow: hidden; }
.contact-grid > :last-child { min-width: 0; overflow: hidden; }

/* ---------- Scroll-to-top button with ring progress ---------- */
.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: var(--z-nav);
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.scroll-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.scroll-top:hover { border-color: var(--border-strong); box-shadow: var(--shadow-glow); }
.scroll-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.scroll-top__arrow { width: 16px; height: 16px; color: var(--text); }
.ring-track {
  fill: none;
  stroke: var(--border-soft);
  stroke-width: 2.5;
  stroke-dasharray: 152;
  stroke-dashoffset: 0;
}
.ring-fill {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 2.5;
  stroke-dasharray: 152;
  stroke-dashoffset: 152;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}

@media (max-width: 900px) {
  .cinfo-panel { position: static; }
}
@media (max-width: 600px) {
  .scroll-top { bottom: 18px; right: 18px; }
}

/* ===========================================================
   v4 additions
   =========================================================== */

/* ============================================================
   ANIMATION 1 — Cinematic intro (monopo saigon editorial style)
   ============================================================ */
.mk-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: all;
}
.mk-intro__stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0A0A0A;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mk-intro__canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.45;
}
.mk-intro__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(10, 10, 10, 0.7) 100%);
  pointer-events: none;
}
.mk-intro__copy {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: clamp(24px, 6vw, 80px);
}
.mk-intro__logo {
  display: block;
  width: clamp(56px, 7vw, 84px);
  height: auto;
  margin: 0 auto clamp(18px, 2.6vw, 30px);
  animation: introLogoUp 0.9s var(--ease) 0.1s both;
}
@keyframes introLogoUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-intro__logo { animation: none; }
}
.mk-intro__label {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(0.65rem, 1.2vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: clamp(16px, 2.5vw, 28px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.mk-intro__name {
  font-family: var(--font-head);
  font-size: clamp(4rem, 14vw, 11rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--text);
  margin: 0;
  overflow: hidden;
}
.mk-intro__line {
  display: block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.mk-intro__line[data-line="1"] {
  background: linear-gradient(135deg, #7BE07B 0%, #32CD32 40%, #1FA51F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition-delay: 0.12s;
}
.mk-intro__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(50, 205, 50, 0.12);
  z-index: 3;
}
.mk-intro__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 12px var(--glow);
  transition: width 0.12s ease;
}
.mk-intro__enter {
  position: absolute;
  bottom: clamp(28px, 5vh, 56px);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.mk-intro__enter.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.mk-intro__enter-text {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mk-intro__enter svg {
  width: 20px;
  height: 20px;
  color: var(--accent-3);
  animation: bounceArrow 2s var(--ease-in-out) infinite;
}
.mk-intro.is-leaving {
  pointer-events: none;
  animation: introLeave 0.85s var(--ease) forwards;
}
@keyframes introLeave {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6vh) scale(1.03); }
}

/* CTA banner inner stagger */
.cta-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}
.cta-banner[data-reveal="rise-up"].is-revealed .hero-stagger > * {
  animation: fadeInUp 0.7s var(--ease) forwards;
}
.cta-banner[data-reveal="rise-up"].is-revealed .hero-stagger > *:nth-child(1) { animation-delay: 0.18s; }
.cta-banner[data-reveal="rise-up"].is-revealed .hero-stagger > *:nth-child(2) { animation-delay: 0.28s; }
.cta-banner[data-reveal="rise-up"].is-revealed .hero-stagger > *:nth-child(3) { animation-delay: 0.40s; }
.cta-banner[data-reveal="rise-up"]:not(.is-revealed) .hero-stagger > * { opacity: 0; }

/* Capped tools grid — grouped by category, max 5 columns */
.tools-grid--capped { display: flex; flex-direction: column; gap: var(--sp-4); }
.tool-group__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--sp-2);
}
.tool-group__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
}
@media (max-width: 640px) {
  .tool-group__row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .tool-group__row { grid-template-columns: repeat(2, 1fr); }
}

/* Project card shimmer sweep on hover */
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
  transform: translateX(-100%);
  z-index: 2;
  pointer-events: none;
  transition: transform 0s;
}
.project-card:hover::before {
  transform: translateX(100%);
  transition: transform 0.65s var(--ease);
}

/* Section heading — dash accent at the end instead of an underline */
.section-head .eyebrow { display: flex; } /* own line, so the inline-block h2 below never shares it */
.section-head h2 { position: relative; display: inline-block; }
.section-head h2::after {
  content: "-";
  display: inline-block;
  margin-left: 0.12em;
  font-weight: 800;
  transform: scaleX(1.5);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Nav link underline — glowing */
.nav__link::after {
  height: 2px;
  background: linear-gradient(90deg, var(--accent-3), var(--accent));
  box-shadow: 0 0 8px var(--glow), 0 0 16px rgba(123, 224, 123, 0.4);
  border-radius: 2px;
}

/* Hero name split letters keep the brand gradient per glyph */
.hero-split span {
  display: inline-block;
  background: linear-gradient(135deg, #7BE07B 0%, #32CD32 45%, #1FA51F 75%, #46D946 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-theme="light"] .text-gradient,
[data-theme="light"] .hero-split span {
  background-image: linear-gradient(135deg, #1E7B1E 0%, #239F23 45%, #1A6E1A 100%);
}
/* Woordgroep zelf krijgt geen verloop (dat zit op de letters) */
.hero-split span.hero-split__word {
  display: inline-block;
  white-space: nowrap;
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ============================================================
   STARFIELD — about page background
   ============================================================ */
.stars-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;          /* boven bg-mesh, achter de inhoud */
  pointer-events: none;
  width: 100vw !important;
  height: 100vh !important;
}

/* ============================================================
   S-STORY (v6.2) — constrained width, container-based,
   echte GLB MacBook + sterren.
   ============================================================ */
.s-story {
  position: relative;
  overflow: visible;
}
.s-story .container {
  position: relative;
}

/* ---- MacBook-podium: gecentreerd, sticky ---- */
.s-laptop-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  overflow: visible !important;   /* anders knipt de sticky-context de hoek af */
  /* Geen negatieve margin-bottom hier: die maakt de marge-box 0 hoog,
     waardoor de sticky-klem nooit aangrijpt en de laptop eeuwig blijft
     plakken. De beats worden in plaats daarvan met een negatieve
     margin-top omhooggetrokken (zelfde layout), zodat de browser de
     sticky vloeiend loslaat zodra de container eindigt. */
}
.s-laptop-canvas {
  /* +40px render-ruimte aan elke kant, met -20px marge gecompenseerd
     zodat het visueel gecentreerd blijft maar niets afgeknipt wordt */
  width: calc(min(680px, 90vw) + 40px) !important;
  height: calc(min(520px, 67vw) + 40px) !important;
  display: block;
  overflow: visible;
  margin: -20px;
  filter: drop-shadow(0 40px 80px rgba(50, 205, 50, 0.35));
}
.s-laptop-halo {
  position: absolute;
  width: 600px;
  height: 300px;
  max-width: 90vw;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(50, 205, 50, 0.18) 0%, rgba(70, 217, 70, 0.08) 45%, transparent 70%);
  filter: blur(50px);
  animation: haloPulse 5s ease-in-out infinite;
  pointer-events: none;
}

/* ---- SVG-pad ---- */
.s-path-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.s-path-svg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--maxw);
  height: 100%;
  overflow: visible;
}

/* ---- Beats ---- */
.s-beats-wrap {
  position: relative;
  z-index: 3;
  margin-top: -100vh;   /* trekt de beats omhoog achter de sticky stage */
  padding-block: 14vh 10vh;
  display: flex;
  flex-direction: column;
  gap: 18vh;
}
.s-beat {
  display: flex;
  align-items: center;
  width: 42%;
  max-width: 380px;
}
.s-beat--left  { align-self: flex-start; flex-direction: row; }
.s-beat--right { align-self: flex-end;   flex-direction: row-reverse; }

.s-beat__line {
  flex-shrink: 0;
  width: 56px;
  height: 1.5px;
  position: relative;
}
.s-beat--left  .s-beat__line { background: linear-gradient(90deg, var(--accent-3), rgba(123,224,123,0.2)); }
.s-beat--right .s-beat__line { background: linear-gradient(270deg, var(--accent-3), rgba(123,224,123,0.2)); }
.s-beat__line::before {
  content: "";
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: 0 0 12px var(--glow), 0 0 24px rgba(123,224,123,0.35);
}
.s-beat--left  .s-beat__line::before { right: 0; }
.s-beat--right .s-beat__line::before { left: 0; }

/* ---- Kaart ---- */
.s-beat__card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  transition:
    opacity 0.75s var(--ease),
    transform 0.75s var(--ease),
    border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.s-beat__card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.s-beat--left  .s-beat__card { transform-origin: left center; }
.s-beat--right .s-beat__card { transform-origin: right center; }
.s-beat--left  .s-beat__card:not(.is-visible) { transform: translateX(-32px) scale(0.97); }
.s-beat--right .s-beat__card:not(.is-visible) { transform: translateX(32px) scale(0.97); }
.s-beat__card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-glow), 0 0 0 1px var(--border);
  transform: translateY(-4px) scale(1.012) !important;
}
.s-beat__card.is-visible > * {
  animation: fadeInUp 0.6s var(--ease) both;
}
.s-beat__card.is-visible > *:nth-child(1) { animation-delay: 0.08s; }
.s-beat__card.is-visible > *:nth-child(2) { animation-delay: 0.15s; }
.s-beat__card.is-visible > *:nth-child(3) { animation-delay: 0.22s; }
.s-beat__card.is-visible > *:nth-child(4) { animation-delay: 0.30s; }
.s-beat__card.is-visible > *:nth-child(5) { animation-delay: 0.38s; }

.s-beat__num {
  display: block;
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--accent-3);
  margin-bottom: 4px;
}
.s-beat__card h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-block: var(--sp-1) var(--sp-2);
}
.s-beat__card p {
  font-size: clamp(0.83rem, 1.1vw, 0.92rem);
  line-height: 1.65;
  color: var(--text-soft);
  margin: 0;
}

/* Foto-beat */
.s-beat__photo-ring {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 0 48px -12px rgba(50,205,50,0.55);
  margin-bottom: var(--sp-2);
  position: relative;
}
.s-beat__photo-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 30px -8px rgba(50,205,50,0.25);
  pointer-events: none;
}
.s-beat__photo-ring picture {
  display: block;
  width: 100%; height: 100%;
}
.s-beat__photo {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.s-beat__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chip--green {
  background: rgba(50, 205, 50, 0.1);
  border-color: rgba(50, 205, 50, 0.28);
  color: var(--accent-3);
}

/* Statistiek-rij (beat 1) */
.s-beat__stat-row {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
}
.s-beat__stat-n {
  display: block;
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-3);
}
.s-beat__stat-l {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Tools-rij */
.s-beat__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-3);
}
.s-beat__tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-soft);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease),
    background 0.2s,
    border-color 0.2s;
  transition-delay: calc(0.3s + var(--i, 0) * 0.08s);
}
.s-beat__card.is-visible .s-beat__tool {
  opacity: 1;
  transform: translateY(0);
}
.s-beat__tool svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
  color: var(--accent-3);
}
.s-beat__tool:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

/* CTA-kaart */
.s-beat__card--cta .btn {
  margin-top: var(--sp-3);
  width: 100%;
  justify-content: center;
}

/* Mobiel */
@media (max-width: 680px) {
  .s-beat { width: 47%; max-width: none; }
  .s-beat__line { width: 24px; }
  .s-beat__card { padding: 16px; }
  .s-beat__card h2 { font-size: 1.35rem; }
  .s-beat__tools { gap: 5px; }
  .s-beat__tool { font-size: 0.7rem; padding: 4px 8px; }
  .s-laptop-canvas {
    width: min(440px, 95vw) !important;
    height: min(340px, 73vw) !important;
  }
}
@media (max-width: 420px) {
  .s-beat { width: 46%; }
}

/* ============================================================
   PAGE-HERO — about-variant (Maarten de Klerk · over/about)
   ============================================================ */
.page-hero--about {
  padding-block: clamp(80px, 12vw, 140px) clamp(48px, 7vw, 80px);
  text-align: center;
}
.page-hero__name {
  font-family: var(--font-head);
  font-size: clamp(3.5rem, 11vw, 8rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-bottom: var(--sp-3);
}
.page-hero__role {
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-5);
}
.page-hero__stats {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  margin-bottom: var(--sp-5);
}
.page-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.page-hero__stat-n {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--accent-3), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-hero__stat-l {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.page-hero__stat-div {
  width: 1px;
  height: 36px;
  background: var(--border-soft);
}
.page-hero__scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: var(--sp-2);
}
.page-hero__scroll-hint svg {
  width: 20px;
  height: 20px;
  animation: bounceArrow 2s var(--ease-in-out) infinite;
}
@media (max-width: 480px) {
  .page-hero__stats {
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  .page-hero__stat-div { display: none; }
}