@font-face {
  font-family: 'BlackMango';
  src: url('/assets/fonts/BlackMango.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


:root {

  --purple: #a489fd;

  --yellow: #f8ff63;

  --black: #0a0a0a;

  --white: #ffffff;

  --gray: #f4f4f2;

  --gray-mid: #e8e8e4;

  --text-muted: #888;

  --error: #ef5c7a;

  --radius: 20px;

  --radius-sm: 12px;

}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body { font-family: 'DM Sans', sans-serif; background: var(--white); color: var(--black); overflow-x: hidden; cursor: none; }
html, body { max-width: 100%; overflow-x: hidden; }

/* CURSOR */

.cursor {

  width: 10px; height: 10px;

  background: var(--purple);

  border-radius: 50%;

  position: fixed; top: 0; left: 0;

  pointer-events: none; z-index: 9999;

  will-change: transform;

}

.cursor-follower {

  width: 32px; height: 32px;

  border: 1.5px solid var(--purple);

  border-radius: 50%;

  position: fixed; top: 0; left: 0;

  pointer-events: none; z-index: 9998;

  will-change: transform;

  opacity: 0.45;

  transition: transform 0.08s linear;

}

/* HEADER */

header {

  position: fixed; top: 0; left: 0; right: 0;

  z-index: 1000;

  padding: 20px 48px;

  display: flex; align-items: center; justify-content: space-between;

  transition: background 0.3s, backdrop-filter 0.3s, padding 0.3s;

}

header.scrolled {

  background: rgba(255,255,255,0.95);

  backdrop-filter: blur(20px);

  padding: 14px 48px;

  border-bottom: 1px solid rgba(0,0,0,0.06);

}

.logo { display: flex; align-items: center; cursor: none; }

.logo img { height: 64px; width: auto; }

nav { display: flex; gap: 36px; align-items: center; }

nav a {

  text-decoration: none;

  color: var(--white);

  font-family: 'BlackMango', 'Syne', sans-serif;

  font-weight: 600; font-size: 14px;

  letter-spacing: 0.02em; opacity: 0.85;

  transition: opacity 0.2s, color 0.3s, letter-spacing 0.3s;

  cursor: none; position: relative;

}

nav a::after {

  content: ''; position: absolute; bottom: -3px; left: 0; right: 100%;

  height: 2px; background: var(--yellow);

  transition: right 0.35s cubic-bezier(0.4,0,0.2,1);

}

nav a:hover { opacity: 1; letter-spacing: 0.05em; }

nav a:hover::after { right: 0; }

header.scrolled nav a { color: var(--black); }

.nav-cta {

  background: rgba(255,255,255,0.15);

  backdrop-filter: blur(10px);

  border: 1.5px solid rgba(255,255,255,0.35);

  color: var(--white) !important;

  padding: 10px 22px; border-radius: 100px;

  opacity: 1 !important;

  transition: background 0.2s, border-color 0.2s, transform 0.2s !important;

}

.nav-cta:hover { background: var(--purple) !important; border-color: var(--purple) !important; transform: translateY(-1px); }

.nav-cta::after { display: none !important; }

header.scrolled .nav-cta { background: var(--black) !important; border-color: var(--black) !important; color: var(--white) !important; }

header.scrolled .nav-cta:hover { background: var(--purple) !important; border-color: var(--purple) !important; }

/* MOBILE MENU */

.menu-toggle {

  display: none; flex-direction: column; gap: 5px;

  cursor: none; background: none; border: none; padding: 4px;

}

.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--white); transition: 0.3s; border-radius: 2px; }

header.scrolled .menu-toggle span { background: var(--black); }

.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {

  display: none; position: fixed; inset: 0;

  background: var(--black); z-index: 999;

  flex-direction: column; justify-content: center; align-items: center; gap: 32px;

}

.mobile-nav.open { display: flex; }

.mobile-nav a { font-family: 'BlackMango', 'Syne', sans-serif; font-size: 36px; font-weight: 800; color: var(--white); text-decoration: none; cursor: none; transition: color 0.2s; }

.mobile-nav a:hover { color: var(--yellow); }

.mobile-nav .close-btn { position: absolute; top: 24px; right: 36px; background: none; border: none; color: var(--white); font-size: 32px; cursor: none; font-family: sans-serif; }

/* PAGES */

.page { display: none; }

.page.active { display: block; }

/* SECTIONS */

section { padding: 100px 48px; }

.container { max-width: 1240px; margin: 0 auto; }

/* TYPOGRAPHY */

h1, h2, h3, h4 { font-family: 'BlackMango', 'Syne', sans-serif; }

/* BUTTONS */

.btn {

  display: inline-flex; align-items: center; gap: 8px;

  padding: 16px 32px; border-radius: 100px;

  font-family: 'BlackMango', 'Syne', sans-serif; font-weight: 700;

  font-size: 15px; letter-spacing: 0.02em;

  text-decoration: none; cursor: none;

  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease, background 0.3s ease, color 0.3s ease;

  border: none;

  position: relative; overflow: hidden;

}

.btn::after {

  content: ''; position: absolute; inset: 0; border-radius: 100px;

  background: rgba(255,255,255,0.12);

  transform: scaleX(0); transform-origin: left;

  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);

}

.btn:hover::after { transform: scaleX(1); }

.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.18); }

.btn:active { transform: translateY(-1px); transition-duration: 0.1s; }

.btn-primary { background: var(--black); color: var(--white); }

.btn-primary:hover { background: var(--purple); }

.btn-yellow { background: var(--yellow); color: var(--black); }

.btn-yellow:hover { background: #f0f740; box-shadow: 0 12px 32px rgba(248,255,99,0.35); }

.btn-outline { background: transparent; color: var(--black); border: 2px solid var(--black); }

.btn-outline:hover { background: var(--black); color: var(--white); }

.btn-white { background: var(--white); color: var(--black); }

/* SECTION LABEL */

.section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); margin-bottom: 20px; }

/* SCROLL ANIMATION */

.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1), transform 0.75s cubic-bezier(0.4,0,0.2,1); }

.reveal.visible { opacity: 1; transform: none; }

.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1), transform 0.75s cubic-bezier(0.4,0,0.2,1); }

.reveal-left.visible { opacity: 1; transform: none; }

.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1), transform 0.75s cubic-bezier(0.4,0,0.2,1); }

.reveal-right.visible { opacity: 1; transform: none; }

.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.34,1.56,0.64,1); }

.reveal-scale.visible { opacity: 1; transform: none; }

.reveal-delay-1 { transition-delay: 0.1s; }

.reveal-delay-2 { transition-delay: 0.2s; }

.reveal-delay-3 { transition-delay: 0.3s; }

.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; transition: none; }
}

/* ── HERO ── */

.hero {

  min-height: 100vh; display: flex; align-items: center;

  position: relative; overflow: hidden;

  background: var(--black); padding: 120px 48px 80px;

}

.hero-bg {

  position: absolute; inset: 0;

  background: radial-gradient(ellipse 80% 80% at 70% 50%, rgba(164,137,253,0.25) 0%, transparent 60%),

              radial-gradient(ellipse 40% 40% at 20% 80%, rgba(248,255,99,0.15) 0%, transparent 50%);

  animation: heroBg 8s ease-in-out infinite alternate;

}

@keyframes heroBg { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }

.hero-content { position: relative; z-index: 2; max-width: 900px; }

.hero-eyebrow {

  display: inline-flex; align-items: center; gap: 10px;

  color: var(--purple); font-size: 13px; font-weight: 600;

  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 28px;

}

.hero-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--purple); }

.hero h1 {

  font-size: clamp(52px, 8vw, 110px); font-weight: 800; line-height: 0.95;

  color: var(--white); letter-spacing: -0.03em; margin-bottom: 32px;

}

.hero h1 em { font-style: normal; color: var(--yellow); }

.hero-sub {

  font-size: clamp(16px, 2vw, 20px); color: rgba(255,255,255,0.6);

  max-width: 520px; line-height: 1.6; margin-bottom: 48px;

}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.hero-scroll {

  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);

  display: flex; flex-direction: column; align-items: center; gap: 8px;

  color: rgba(255,255,255,0.4); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;

  animation: scrollBounce 2s ease-in-out infinite; z-index: 2;

}

.hero-scroll::after { content: ''; width: 1px; height: 40px; background: rgba(255,255,255,0.25); }

@keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ── WAT WE DOEN ── */

.services-preview { background: var(--white); padding: 100px 48px; }

.services-preview h2 {

  font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1.05;

  letter-spacing: -0.02em; margin-bottom: 64px; max-width: 600px;

}

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.services-grid-4 { grid-template-columns: repeat(4, 1fr); }

.service-card {

  background: var(--gray); border-radius: var(--radius);

  padding: 44px 36px; position: relative; overflow: hidden;

  transition: transform 0.3s, box-shadow 0.3s; cursor: none;

}

.service-card::before {

  content: ''; position: absolute; inset: 0;

  background: linear-gradient(135deg, var(--purple) 0%, #7c5cfc 100%);

  opacity: 0; transition: opacity 0.3s;

}

.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.12); }

.service-card:hover::before { opacity: 1; }

.service-card:hover .service-icon svg,

.service-card:hover h3,

.service-card:hover p,

.service-card:hover .service-num { color: var(--white); }

.service-card:hover .service-icon svg { stroke: var(--white); }

.service-icon { font-size: 36px; margin-bottom: 28px; position: relative; z-index: 1; color: var(--black); }

.service-icon svg { stroke: var(--black); transition: stroke 0.3s; display: block; }

.service-num {

  position: absolute; top: 28px; right: 32px;

  font-family: 'BlackMango', 'Syne', sans-serif; font-size: 72px; font-weight: 800;

  opacity: 0.06; transition: color 0.3s; line-height: 1;

}

.service-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 14px; position: relative; z-index: 1; transition: color 0.3s; }

.service-card p { font-size: 15px; line-height: 1.65; color: #555; position: relative; z-index: 1; transition: color 0.3s; }

/* ── STATEMENT ── */

.statement { background: var(--black); padding: 120px 48px; text-align: center; }

.statement h2 {

  font-size: clamp(32px, 5.5vw, 72px); font-weight: 800; color: var(--white);

  line-height: 1.1; letter-spacing: -0.025em; max-width: 900px; margin: 0 auto 32px;

}

.statement h2 span { color: var(--yellow); }

.statement p { font-size: 18px; color: rgba(255,255,255,0.5); max-width: 560px; margin: 0 auto 48px; line-height: 1.65; }

/* ── WHY JAPI ── */

.why-japi { background: var(--gray); padding: 100px 48px; }

.why-japi h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; letter-spacing: -0.02em; max-width: 560px; margin-bottom: 0; }

.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }

.why-block {

  background: var(--white); border-radius: var(--radius);

  padding: 40px 36px; display: flex; gap: 24px; align-items: flex-start;

  transition: transform 0.3s; cursor: none;

}

.why-block:hover { transform: translateY(-4px); }

.why-icon {

  width: 52px; height: 52px; flex-shrink: 0;

  background: var(--black); border-radius: var(--radius-sm);

  display: flex; align-items: center; justify-content: center;

}

.why-block h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }

.why-block p { font-size: 14px; color: #666; line-height: 1.6; }

/* ── CASES ── */


/* ── CASES PAGINA ── */

.cases-hero { background: var(--black); padding: 160px 48px 100px; }
.cases-hero h1 { font-family: 'BlackMango','Syne',sans-serif; font-size: clamp(48px,7vw,96px); font-weight: 800; color: var(--white); letter-spacing: -0.03em; line-height: 1.0; margin: 16px 0 24px; }
.cases-hero p { font-size: 18px; color: rgba(255,255,255,0.5); max-width: 560px; line-height: 1.7; }

.case-full { padding: 100px 48px; background: var(--white); }
.case-full-alt { background: var(--gray); }
.case-full-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.case-full-img-wrap { border-radius: 20px; overflow: hidden; aspect-ratio: 16/9; }
.case-full-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.case-full-img-wrap:hover .case-full-img { transform: scale(1.03); }
.case-full-tag { display: inline-block; background: var(--black); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 16px; border-radius: 100px; margin-bottom: 20px; }
.case-full-client { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); margin-bottom: 16px; }
.case-full-title { font-family: 'BlackMango','Syne',sans-serif; font-size: clamp(24px,3vw,40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 20px; }
.case-full-desc { font-size: 16px; color: #555; line-height: 1.75; margin-bottom: 24px; }
.case-full-list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; }
.case-full-list li { font-size: 15px; color: var(--black); padding-left: 24px; position: relative; line-height: 1.5; }
.case-full-list li::before { content: '\2192'; position: absolute; left: 0; color: var(--purple); font-weight: 700; }
.case-full-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--black); color: var(--white); font-family: 'BlackMango','Syne',sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.05em; padding: 16px 32px; border-radius: 100px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.case-full-btn:hover { background: var(--purple); transform: translateY(-2px); }
.case-social-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.case-social-link { display: inline-flex; align-items: center; gap: 8px; color: var(--black); font-size: 13px; font-weight: 600; text-decoration: none; background: var(--white); border: 1.5px solid rgba(0,0,0,0.1); padding: 9px 16px; border-radius: 100px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.case-full-alt .case-social-link { background: var(--gray); }
.case-social-link:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.case-social-link svg { flex-shrink: 0; }


.clients-section { padding: 80px 48px; background: var(--white); }

.clients-section h3 { font-size: 13px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; margin-bottom: 48px; }

/* Statisch overzicht (geen slider/animatie): alle klantlogo's in één
   rustig grid, monochroom zwart, direct zichtbaar. */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 40px;
  row-gap: 48px;
  align-items: center;
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

/* De logo's zijn <span>-elementen die de klantlogo-afbeelding als CSS-mask
   gebruiken (alpha-kanaal van de monochrome PNG), met een achtergrondkleur
   erachter. Zo kunnen ze exact in de JAPI-huisstijlkleur (--purple) worden
   gekleurd zonder vorm, typografie of verhoudingen van de originele logo's
   aan te passen. */
.client-logo {
  display: inline-block;
  height: 72px; width: 100%; max-width: 150px;
  -webkit-mask-image: var(--logo-src);
  mask-image: var(--logo-src);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--purple);
  opacity: 1;
  transition: transform 0.2s;
}

.client-logo:hover { transform: scale(1.04); }

@media (min-width: 1025px) {
  /* Logo's op desktop/laptop iets prominenter: grid iets breder zodat de
     kolommen meeschalen (gridindeling van 6 kolommen blijft ongewijzigd). */
  .clients-grid { max-width: 1320px; }
  .client-logo { height: 96px; max-width: 200px; }
}

/* ── CTA BANNER ── */

.cta-banner { background: var(--yellow); padding: 100px 48px; text-align: center; }

.cta-banner h2 { font-size: clamp(40px, 6vw, 80px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 32px; line-height: 1; }

.cta-banner p { font-size: 18px; color: rgba(0,0,0,0.65); max-width: 480px; margin: 0 auto 40px; line-height: 1.6; }

/* ── ABOUT HERO ── */

.about-hero {

  min-height: 85vh; background: var(--black);

  display: flex; align-items: center;

  padding: 140px 48px 100px; position: relative; overflow: hidden;

}

.about-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 80% 40%, rgba(164,137,253,0.3) 0%, transparent 60%); }

.about-hero h1 { font-size: clamp(48px, 7vw, 100px); font-weight: 800; color: var(--white); letter-spacing: -0.03em; line-height: 0.95; margin-bottom: 32px; }

.about-hero h1 span { color: var(--yellow); }

.about-hero p { font-size: 20px; color: rgba(255,255,255,0.55); max-width: 560px; line-height: 1.65; }

.about-hero-content { position: relative; z-index: 2; }

/* ── ABOUT STORY ── */

.about-story { padding: 100px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }

.about-story img { width: 100%; border-radius: var(--radius); object-fit: cover; height: 600px; }

.about-story-text .label { color: var(--purple); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 20px; }

.about-story-text h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 24px; }

.about-story-text p { font-size: 16px; color: #555; line-height: 1.75; margin-bottom: 16px; }
.about-story-text p a { color: var(--black); text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: none; transition: color 0.2s; }
.about-story-text p a:hover { color: var(--purple); }

/* ── TEAM ── */

.team { background: var(--gray); padding: 100px 48px; }

.team h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0; }

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 56px; }

.team-card {

  background: var(--white); border-radius: var(--radius);

  overflow: hidden; cursor: none;

  transition: transform 0.3s, box-shadow 0.3s;

}

.team-card:hover { transform: translateY(-8px); box-shadow: 0 24px 64px rgba(0,0,0,0.12); }

.team-card-img {

  width: 100%; height: 480px;

  object-fit: cover;

  object-position: center top;

  transition: transform 0.5s ease;

  display: block;

}

.team-card:hover .team-card-img { transform: scale(1.03); }

.team-card-body { padding: 32px; }

.team-card-body h3 { font-size: 24px; font-weight: 800; margin-bottom: 4px; }

.team-card-body .role { font-size: 13px; color: var(--purple); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }

.team-card-body p { font-size: 15px; color: #666; line-height: 1.65; }

/* ── CULTURE ── */

.culture { padding: 100px 48px; }

.culture h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; letter-spacing: -0.02em; max-width: 500px; margin-bottom: 0; }

.culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }

.culture-block { border-radius: var(--radius); padding: 48px 36px; position: relative; overflow: hidden; }

.culture-block:nth-child(1) { background: var(--black); }

.culture-block:nth-child(2) { background: var(--purple); }

.culture-block:nth-child(3) { background: var(--yellow); }

.culture-num { font-family: 'BlackMango', 'Syne', sans-serif; font-size: 80px; font-weight: 800; line-height: 1; margin-bottom: 20px; opacity: 0.2; }

.culture-block:nth-child(1) .culture-num, .culture-block:nth-child(1) h3, .culture-block:nth-child(1) p { color: var(--white); }

.culture-block:nth-child(2) h3, .culture-block:nth-child(2) p { color: var(--white); }

.culture-block:nth-child(3) .culture-num { color: var(--black); }

.culture-block h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }

.culture-block p { font-size: 15px; line-height: 1.65; opacity: 0.75; }

/* ── DIENSTEN HERO ── */

.diensten-hero {

  min-height: 60vh; background: var(--black);

  display: flex; align-items: center;

  padding: 140px 48px 80px; position: relative; overflow: hidden;

}

.diensten-hero-bg {

  position: absolute; inset: 0;

  background: radial-gradient(ellipse 70% 70% at 30% 60%, rgba(248,255,99,0.1) 0%, transparent 55%),

              radial-gradient(ellipse 50% 50% at 80% 30%, rgba(164,137,253,0.25) 0%, transparent 50%);

}

.diensten-hero h1 { font-size: clamp(48px, 7vw, 90px); font-weight: 800; color: var(--white); letter-spacing: -0.03em; line-height: 0.95; position: relative; z-index: 2; max-width: 800px; }

.diensten-hero h1 em { font-style: normal; color: var(--yellow); }

.diensten-hero p { font-size: 18px; color: rgba(255,255,255,0.5); max-width: 540px; line-height: 1.65; margin-top: 28px; position: relative; z-index: 2; }

/* ── SERVICE SECTIONS ── */

.service-section { padding: 100px 48px; }

.service-section:nth-child(even) { background: var(--gray); }

.service-header { margin-bottom: 64px; }

.service-header h2 { font-size: clamp(36px, 4.5vw, 60px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 20px; }

.service-header p { font-size: 17px; color: #555; max-width: 600px; line-height: 1.7; }

/* ── PRICING ── */

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.pricing-grid-4 { grid-template-columns: repeat(4, 1fr); }

.pricing-card {

  border-radius: var(--radius); padding: 44px 36px;

  position: relative; cursor: none;

  transition: transform 0.3s, box-shadow 0.3s;

}

.pricing-card:hover { transform: translateY(-8px); box-shadow: 0 24px 64px rgba(0,0,0,0.12); }

.pricing-card.basic { background: var(--white); border: 2px solid var(--gray-mid); }

.pricing-card.popular { background: var(--black); }

.pricing-card.premium { background: var(--purple); }

.pricing-card.accent { background: var(--yellow); }

.pricing-badge { display: inline-block; padding: 5px 14px; border-radius: 100px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 28px; }

.basic .pricing-badge { background: var(--gray); color: #666; }

.popular .pricing-badge { background: var(--yellow); color: var(--black); }

.premium .pricing-badge { background: rgba(255,255,255,0.2); color: var(--white); }

.accent .pricing-badge { background: var(--black); color: var(--white); }

.pricing-card h3 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }

.basic h3, .accent h3 { color: var(--black); }

.popular h3, .premium h3 { color: var(--white); }

.pricing-sub { font-size: 14px; margin-bottom: 32px; }

.basic .pricing-sub { color: #888; }

.popular .pricing-sub, .premium .pricing-sub { color: rgba(255,255,255,0.6); }

.accent .pricing-sub { color: rgba(10,10,10,0.65); }

.pricing-features { list-style: none; margin-bottom: 36px; }

.pricing-features li { padding: 10px 0; font-size: 14px; border-bottom: 1px solid; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }

.pricing-features li::before { content: '✓'; font-weight: 700; flex-shrink: 0; margin-top: 1px; font-family: 'BlackMango', 'Syne', sans-serif; color: var(--purple); }

.basic .pricing-features li { border-color: var(--gray-mid); color: #555; }

.basic .pricing-features li::before { color: var(--purple); }

.popular .pricing-features li { border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75); }

.popular .pricing-features li::before { color: var(--yellow); }

.premium .pricing-features li { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); }

.premium .pricing-features li::before { color: var(--yellow); }

.accent .pricing-features li { border-color: rgba(10,10,10,0.15); color: rgba(10,10,10,0.8); }

.accent .pricing-features li::before { color: var(--black); }

/* ── ONZE PAKKETTEN / LOSSE DIENSTEN (variatie-componenten) ── */

.pricing-card-compact { padding: 32px 28px; }

.pricing-card-compact h3 { margin-bottom: 10px; }

.pricing-card-compact .pricing-sub { margin-bottom: 0; }

.loose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.loose-grid-2 { grid-template-columns: repeat(2, 1fr); }

.loose-card { background: var(--white); border: 2px solid var(--gray-mid); border-radius: var(--radius); padding: 28px 24px; transition: transform 0.3s, box-shadow 0.3s; }

.loose-grid-2 .loose-card { padding: 36px 32px; }

.loose-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,0.08); }

.loose-card h3 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }

.loose-grid-2 .loose-card h3 { font-size: 22px; }

.loose-card p { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 14px; }

.loose-grid-2 .loose-card p { font-size: 15px; margin-bottom: 24px; }

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

.tag-list span { background: var(--gray); border-radius: 100px; padding: 5px 12px; font-size: 12.5px; color: #555; font-weight: 600; }

.loose-card .loose-link { font-size: 14px; font-weight: 700; color: var(--purple); text-decoration: none; cursor: none; }

.loose-card .loose-link:hover { color: var(--black); }

/* ── CONTACT HERO ── */

.contact-hero {

  min-height: 50vh; background: var(--black);

  display: flex; align-items: center;

  padding: 140px 48px 80px; position: relative; overflow: hidden;

}

.contact-hero-bg {

  position: absolute; inset: 0;

  background: radial-gradient(ellipse 50% 60% at 60% 40%, rgba(248,255,99,0.12) 0%, transparent 55%),

              radial-gradient(ellipse 50% 50% at 20% 70%, rgba(164,137,253,0.2) 0%, transparent 50%);

}

.contact-hero h1 { font-size: clamp(40px, 6vw, 80px); font-weight: 800; color: var(--white); letter-spacing: -0.03em; line-height: 1.05; position: relative; z-index: 2; max-width: 700px; }

.contact-hero h1 span { color: var(--yellow); }

/* ── CONTACT SECTION ── */

.contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 100px 48px; align-items: start; }

.contact-info h2 { font-size: 36px; font-weight: 800; margin-bottom: 24px; }

.contact-info p { font-size: 16px; color: #666; line-height: 1.7; margin-bottom: 36px; }

.contact-details { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }

.contact-detail {

  display: flex; align-items: center; gap: 14px;

  text-decoration: none; color: var(--black);

  font-size: 15px; font-weight: 500;

  padding: 14px 20px; border-radius: var(--radius-sm);

  background: var(--gray); cursor: none;

  transition: background 0.2s, transform 0.2s, color 0.2s;

}

.contact-detail:hover { background: var(--black); color: var(--white); transform: translateX(4px); }

.contact-detail:hover svg { stroke: white; }

.contact-detail svg { flex-shrink: 0; transition: stroke 0.2s; }

.contact-socials { display: flex; gap: 12px; }

.social-btn {

  width: 44px; height: 44px; border-radius: var(--radius-sm);

  background: var(--black); color: var(--white);

  display: flex; align-items: center; justify-content: center;

  text-decoration: none; cursor: none;

  transition: background 0.2s, transform 0.2s;

}

.social-btn:hover { background: var(--purple); transform: translateY(-3px); }

.social-btn svg { stroke: white; }

/* ── FORM ── */

.contact-form { display: flex; flex-direction: column; gap: 20px; }

.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-group label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #666; }

.form-group input, .form-group textarea, .form-group select {

  padding: 16px 20px; border-radius: var(--radius-sm);

  border: 2px solid var(--gray-mid);

  font-family: 'DM Sans', sans-serif; font-size: 15px;

  background: var(--white); color: var(--black);

  transition: border-color 0.2s; outline: none; resize: none;

}

.form-group input:focus, .form-group textarea:focus { border-color: var(--purple); }

.form-group textarea { min-height: 140px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--error);
}

.form-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--error);
  color: var(--white);
  font-size: 11px;
  flex-shrink: 0;
}

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: var(--error);
  animation: formShake 0.35s;
}

.form-group.has-error .form-error { display: flex; }

@keyframes formShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* ── FOOTER ── */

footer { background: var(--black); color: var(--white); padding: 72px 48px 40px; }

.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 60px; }

.footer-brand p { font-size: 14px; color: rgba(255,255,255,0.45); max-width: 280px; line-height: 1.7; margin-top: 16px; }

.footer-col h4 { font-family: 'BlackMango', 'Syne', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; color: rgba(255,255,255,0.5); }

.footer-col a { display: block; font-size: 15px; color: rgba(255,255,255,0.75); text-decoration: none; margin-bottom: 10px; cursor: none; transition: color 0.2s; }

.footer-col a:hover { color: var(--yellow); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 32px; display: flex; justify-content: space-between; align-items: center; }

.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.35); }

.footer-logo { height: 40px; }

/* ── AV ── */

.av-page { padding: 140px 48px 100px; max-width: 800px; margin: 0 auto; }

.av-page h1 { font-size: 52px; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.02em; }

.av-page .subtitle { font-size: 18px; color: #888; margin-bottom: 56px; }

.av-article { margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--gray-mid); }

.av-article h2 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }

.av-article ol { padding-left: 20px; }

.av-article li { font-size: 15px; color: #555; line-height: 1.75; margin-bottom: 6px; }

/* ── RESPONSIVE ── */

@media (max-width: 1024px) {

  .services-grid, .pricing-grid, .culture-grid { grid-template-columns: 1fr; }

  .team-grid { grid-template-columns: 1fr; gap: 20px; }

  .why-grid { grid-template-columns: 1fr; gap: 12px; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }

  .about-story { grid-template-columns: 1fr; gap: 48px; }

  .about-story img { height: 400px; }

  .contact-section { grid-template-columns: 1fr; gap: 48px; }

  .loose-grid { grid-template-columns: 1fr 1fr; }

  .clients-grid { grid-template-columns: repeat(4, 1fr); column-gap: 32px; row-gap: 40px; }

}

@media (max-width: 768px) {

  body { cursor: auto; }

  .cursor, .cursor-follower { display: none; }

  /* Scroll-reveal animaties (translateY + opacity) uit op mobiel: tijdens
     snel scrollen kon een element nog mid-animatie staan (net iets lager
     dan zijn eindpositie) terwijl het volgende blok al zichtbaar was,
     wat af en toe voor een overlap zorgde (bv. de social-icons over het
     "Naam"-veld op de contactpagina). Op mobiel staat alles meteen op
     zijn eindpositie, geen animatie die kan overlappen. */
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }

  section { padding: 64px 20px; }

  header { padding: 16px 20px; }

  header.scrolled { padding: 12px 20px; }

  nav { display: none; }

  .menu-toggle { display: flex; }

  .hero { padding: 100px 20px 72px; }

  .hero h1 { font-size: clamp(40px, 11vw, 64px); }

  .hero-sub { font-size: 16px; }

  .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }

  .hero-actions .btn { width: 100%; justify-content: center; }

  .hero-scroll { display: none; }

  .services-preview { padding: 64px 20px; }

  .services-grid { grid-template-columns: 1fr; gap: 16px; }

  .service-card { padding: 32px 24px; }

  .statement { padding: 80px 20px; }

  .why-japi { padding: 64px 20px; }

  .why-block { padding: 28px 20px; gap: 16px; }

  .case-full { padding: 64px 20px; }
  .case-full-grid { grid-template-columns: 1fr; gap: 36px; }
  .case-full-alt .case-full-grid { direction: ltr; }
  .cases-hero { padding: 120px 20px 64px; }
  .case-full-title { font-size: clamp(22px,6vw,32px); }
  .clients-section { padding: 60px 0; }
  .clients-section h3 { padding: 0 24px; }
  .clients-grid { grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 32px; }
  .client-logo { height: 44px !important; max-width: 110px; }
  * { max-width: 100%; box-sizing: border-box; }
  /* Koppen nooit midden in woord afbreken op mobiel */
  h1, h2, h3 { word-break: keep-all; overflow-wrap: normal; hyphens: none; }

  /* Hero */
  .hero h1 { font-size: clamp(32px, 9vw, 52px) !important; }

  /* Diensten hero */
  .diensten-hero h1 { font-size: clamp(28px, 8vw, 46px) !important; }

  /* Service header (Social Media Management etc.) */
  .service-header h2 { font-size: clamp(26px, 7.5vw, 40px) !important; }

  /* Statement & why */
  .why-japi h2 { font-size: clamp(24px, 6.5vw, 42px); overflow-wrap: break-word; word-break: break-word; padding-right: 16px; }
  .statement h2 { font-size: clamp(24px, 7vw, 40px); }

  /* Over ons hero */
  .about-hero h1 { font-size: clamp(28px, 8vw, 46px) !important; }

  /* Contact hero */
  .contact-hero h1 { font-size: clamp(26px, 7.5vw, 42px) !important; }

  /* CTA banner */
  .cta-banner h2 { font-size: clamp(26px, 7.5vw, 42px) !important; }

  /* Foto sectie inline h2 */
  .foto-row h2 { font-size: clamp(24px, 7vw, 38px) !important; }

  .foto-row { grid-template-columns: 1fr !important; gap: 40px !important; }
  .foto-row > div:first-child { order: 2; }
  .foto-row > div:last-child { order: 1; }


  .cta-banner { padding: 72px 20px; }

  .about-hero { padding: 100px 20px 72px; min-height: 70vh; }

  .about-story { padding: 64px 20px; grid-template-columns: 1fr; gap: 36px; }

  .about-story img { height: 320px; }

  .team { padding: 64px 20px; }

  .team-card-img { height: 360px; object-position: center top; }

  .culture { padding: 64px 20px; }

  .culture-grid { grid-template-columns: 1fr; gap: 16px; }

  .culture-block { padding: 36px 28px; }

  .diensten-hero { padding: 100px 20px 64px; min-height: 50vh; }

  .service-section { padding: 64px 20px; }

  .pricing-grid { grid-template-columns: 1fr; gap: 16px; }

  .pricing-card { padding: 32px 24px; }

  .contact-hero { padding: 100px 20px 64px; min-height: 40vh; }

  .contact-section { padding: 64px 20px; grid-template-columns: 1fr; gap: 40px; }

  .form-row { grid-template-columns: 1fr; }

  footer { padding: 56px 20px 32px; }

  .footer-top { grid-template-columns: 1fr; gap: 32px; }

  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  .mobile-nav a { font-size: 28px; }

  .av-page { padding: 100px 20px 60px; }

  .av-page h1 { font-size: 36px; }

  /* Losse diensten componenten */
  .loose-grid { grid-template-columns: 1fr; }

}



.service-card::after { content: '→'; position: absolute; bottom: 28px; right: 28px; font-size: 18px; font-weight: 700; color: var(--purple); opacity: 0; transform: translateX(-8px); transition: opacity 0.25s ease, transform 0.25s ease; }

.service-card:hover::after { opacity: 1; transform: translateX(0); }

.service-card:hover .service-card::after { color: var(--white); }

/* ── MICRO-INTERACTIONS ── */

/* Service cards */
.service-card { transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s ease; }
.service-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 56px rgba(0,0,0,0.1); }

/* Why blocks */
.why-block { transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s ease; cursor: default; }
.why-block:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.08); }

/* Team cards enhanced */
.team-card { transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s ease; }
.team-card:hover { transform: translateY(-10px); box-shadow: 0 28px 72px rgba(0,0,0,0.14); }

/* Case social links */
.case-social-link { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.case-social-link:hover { transform: translateY(-2px); }

/* Footer links */
footer a { transition: color 0.2s ease, letter-spacing 0.25s ease; }
footer a:hover { letter-spacing: 0.04em; }

/* Pricing card */
.pricing-card { transition: transform 0.35s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.35s ease; }
.pricing-card:hover { transform: translateY(-8px); box-shadow: 0 24px 64px rgba(0,0,0,0.12); }
.pricing-card.featured:hover { transform: translateY(-10px) scale(1.02); }

/* Hero scroll indicator pulse */
.hero-scroll { animation: pulse-down 2s ease-in-out infinite; }
@keyframes pulse-down {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* Section label entrance */
.section-label { position: relative; display: inline-block; }

/* FOOTER: juridische links */
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-end; }
.footer-legal a, .footer-legal button { color: rgba(255,255,255,0.35); text-decoration: none; font-size: 13px; cursor: none; transition: color 0.2s; background: none; border: none; padding: 0; font-family: inherit; }
.footer-legal a:hover, .footer-legal button:hover { color: rgba(255,255,255,0.7); }

/* COOKIEBANNER + VOORKEUREN */
.cc-banner { position: fixed; left: 24px; bottom: 24px; z-index: 9000; width: min(440px, calc(100vw - 48px)); background: var(--white); color: var(--black); border: 1.5px solid rgba(10,10,10,0.08); border-radius: 24px; padding: 26px 26px 22px; box-shadow: 0 20px 56px rgba(10,10,10,0.18); overflow: hidden; animation: ccIn 0.5s cubic-bezier(0.34,1.2,0.64,1) both; }
.cc-banner::before { content: ''; position: absolute; right: -30px; top: -30px; width: 96px; height: 96px; border-radius: 50%; background: var(--yellow); }
.cc-title { position: relative; font-family: 'BlackMango','Syne',sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 10px; max-width: 300px; }
.cc-text { position: relative; font-size: 14px; line-height: 1.6; color: #555; margin-bottom: 18px; }
.cc-text a { color: var(--black); text-decoration: underline; text-decoration-color: var(--purple); text-underline-offset: 3px; cursor: none; }
.cc-actions { position: relative; display: flex; gap: 10px; }
.cc-actions .cc-btn { flex: 1; justify-content: center; padding: 13px 14px; font-size: 14px; white-space: nowrap; }
.cc-link { position: relative; display: inline-block; margin-top: 14px; background: none; border: none; padding: 0; font-family: 'DM Sans',sans-serif; font-size: 13px; font-weight: 600; color: var(--black); text-decoration: underline; text-decoration-color: var(--purple); text-underline-offset: 3px; cursor: none; }
.cc-link:hover { color: var(--purple); }
.cc-overlay { position: fixed; inset: 0; z-index: 9500; background: rgba(10,10,10,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; animation: ccFade 0.25s ease both; }
.cc-modal { position: relative; width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--white); border-radius: 24px; padding: 32px; box-shadow: 0 24px 64px rgba(10,10,10,0.3); }
.cc-modal .cc-title { max-width: none; padding-right: 40px; }
.cc-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--gray); color: var(--black); font-size: 22px; line-height: 1; cursor: none; transition: background 0.2s; }
.cc-close:hover { background: var(--yellow); }
.cc-cat { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 0; border-top: 1px solid var(--gray-mid); }
.cc-cat strong { display: block; font-family: 'BlackMango','Syne',sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.cc-desc { display: block; font-size: 13.5px; line-height: 1.55; color: #666; }
.cc-empty { font-size: 14px; line-height: 1.6; color: #555; padding: 18px 0; border-top: 1px solid var(--gray-mid); margin-bottom: 4px; }
.cc-modal .cc-actions { margin-top: 8px; }
.cc-actions-modal { flex-wrap: wrap; }
.cc-actions-modal .cc-btn { flex: 1 1 140px; }
.cc-switch { position: relative; flex-shrink: 0; width: 46px; height: 26px; margin-top: 2px; }
.cc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: none; z-index: 2; }
.cc-slider { position: absolute; inset: 0; border-radius: 100px; background: var(--gray-mid); transition: background 0.25s ease; }
.cc-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.25s cubic-bezier(0.34,1.4,0.64,1); }
.cc-switch input:checked + .cc-slider { background: var(--purple); }
.cc-switch input:checked + .cc-slider::after { transform: translateX(20px); }
.cc-switch input:disabled + .cc-slider { opacity: 0.55; }
.cc-switch input:focus-visible + .cc-slider { outline: 2px solid var(--black); outline-offset: 2px; }
@keyframes ccIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ccFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-banner, .cc-overlay { animation: none; } }
@media (max-width: 768px) {
  .footer-legal { justify-content: center; }
  .cc-banner { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 22px 20px 18px; border-radius: 20px; }
  .cc-modal { padding: 26px 20px; border-radius: 20px; }
}
@media (max-width: 400px) {
  .cc-actions { flex-direction: column; }
}

/* PRIVACYVERKLARING */
.privacy-wrap { max-width: 800px; margin: 0 auto; padding: 72px 48px 100px; }
.privacy-block { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--gray-mid); }
.privacy-block:last-child { border-bottom: none; margin-bottom: 0; }
.privacy-block h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 18px; }
.privacy-block h3 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; }
.privacy-block p, .privacy-block li { font-size: 15px; color: #555; line-height: 1.75; }
.privacy-block p { margin-bottom: 12px; }
.privacy-block ul { padding-left: 20px; margin-bottom: 12px; }
.privacy-block li { margin-bottom: 6px; }
.privacy-block strong { color: var(--black); font-weight: 600; }
.privacy-block a { color: var(--black); text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: none; transition: color 0.2s; }
.privacy-block a:hover { color: var(--purple); }
.privacy-contact { background: var(--gray); border-radius: 20px; padding: 22px 26px; margin: 16px 0; }
.privacy-contact p { margin-bottom: 4px; }
.privacy-contact p:last-child { margin-bottom: 0; }
@media (max-width: 768px) { .privacy-wrap { padding: 48px 20px 64px; } .privacy-block h2 { font-size: 23px; } }

/* CURSOR: nooit twee cursors tegelijk.
   Dit wordt NIET via CSS media-features (any-hover/any-pointer) geregeld: die
   worden door sommige browsers/apparaten opnieuw berekend bij stilstand of een
   klik, waardoor de systeemcursor even terugflikkert. In plaats daarvan zet
   assets/main.js de klasse "has-mouse" op <html> zodra er een echte
   muisbeweging is gedetecteerd, en die klasse blijft staan. Zolang die klasse
   er niet is (geen muis gedetecteerd, of smal scherm) blijft de gewone
   systeemcursor gewoon zichtbaar en is de paarse stip verborgen. */
.cursor, .cursor-follower { display: none; }
html.has-mouse .cursor, html.has-mouse .cursor-follower { display: block; }
html.has-mouse,
html.has-mouse *,
html.has-mouse *::before,
html.has-mouse *::after { cursor: none !important; }
/* Zolang JS geen echte muis heeft gedetecteerd (of op een smal scherm): altijd de
   normale systeemcursor, ook op elementen die hierboven in dit bestand hun eigen
   cursor:none hebben (logo, knoppen, links, formuliervelden, ...). */
html:not(.has-mouse) *,
html:not(.has-mouse) *::before,
html:not(.has-mouse) *::after { cursor: revert !important; }

/* Op vlakken met een paarse achtergrond (bv. premium pricing-cards) smelt de
   standaard paarse cursor samen met de achtergrond en wordt hij onzichtbaar.
   main.js zet daarom tijdelijk .cursor-invert op <html> zodra de muis over
   zo'n vlak gaat, zodat de cursor wit kleurt en zichtbaar blijft. */
html.cursor-invert .cursor { background: var(--white); }
html.cursor-invert .cursor-follower { border-color: var(--white); }