/* ============================================
   Zetti Webdesign — design system
   ============================================ */
:root{
  --paper:#f7f7f4;
  --white:#ffffff;
  --ink:#0c0d10;
  --ink-2:#1a1c22;
  --muted:#5b6068;
  --muted-2:#9aa0a8;
  --accent:#2b4bff;
  --accent-hover:#1f3ae0;
  --accent-soft:#e9edff;
  --line:#e4e4df;
  --line-dark:#26282f;
  --radius:16px;
  --radius-sm:10px;
  --max:1160px;
  --shadow:0 16px 48px rgba(12,13,16,.09);
  --font-head:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.7;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
section{padding:110px 0}
section.tight{padding:72px 0}

h1,h2,h3,h4{font-family:var(--font-head);line-height:1.08;letter-spacing:-0.025em;font-weight:700}
h1{font-size:clamp(2.6rem,5.5vw,4.3rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:18px}
h3{font-size:1.25rem}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.kicker::before{content:"";width:22px;height:2px;background:var(--accent)}
.lead{color:var(--muted);font-size:1.14rem;max-width:640px}
.center{text-align:center}
.center .lead{margin:0 auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;font-weight:600;font-size:.97rem;
  padding:15px 30px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(12,13,16,.22);background:var(--ink-2)}
.btn.accent{background:var(--accent)}
.btn.accent:hover{background:var(--accent-hover);box-shadow:0 12px 28px rgba(43,75,255,.32)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--ink);box-shadow:none}
.btn .arr{transition:transform .22s ease}
.btn:hover .arr{transform:translateX(4px)}
.dark .btn.ghost{color:#fff;border-color:var(--line-dark)}
.dark .btn.ghost:hover{border-color:#fff}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(247,247,244,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{font-family:var(--font-head);font-weight:700;font-size:1.35rem;letter-spacing:-0.04em}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links>a{font-size:.94rem;font-weight:500;color:var(--muted);transition:color .2s}
.nav-links>a:hover,.nav-links>a.active{color:var(--ink)}
.nav-links .btn{padding:11px 24px;font-size:.9rem}
.nav-toggle{display:none;background:none;border:0;font-size:1.7rem;cursor:pointer;color:var(--ink)}

/* ---------- Hero ---------- */
.hero{padding:140px 0 120px;position:relative;overflow:hidden}
.hero h1{max-width:900px;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{margin-bottom:40px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:8px 18px;
  font-size:.85rem;font-weight:500;color:var(--muted);margin-bottom:30px;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Page hero (subpages) */
.page-hero{padding:90px 0 70px}
.page-hero h1{font-size:clamp(2.2rem,4.5vw,3.4rem);max-width:820px;margin-bottom:20px}
.breadcrumbs{font-size:.85rem;color:var(--muted-2);margin-bottom:26px}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--ink)}
.breadcrumbs .sep{margin:0 8px}

/* ---------- Stats ---------- */
.stats{display:flex;gap:64px;flex-wrap:wrap;margin-top:76px;padding-top:44px;border-top:1px solid var(--line)}
.stats div strong{font-family:var(--font-head);display:block;font-size:2.2rem;letter-spacing:-0.03em}
.stats div span{color:var(--muted);font-size:.9rem}

/* ---------- Cards & grids ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px;transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .icon{
  width:50px;height:50px;border-radius:14px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:22px;
}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.96rem}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:600;font-size:.92rem;color:var(--accent)}
.card .more:hover{gap:10px}
a.card{display:block}

/* ---------- Dark sections ---------- */
.dark{background:var(--ink);color:#fff}
.dark .lead,.dark p{color:#a6aab2}
.dark .card{background:var(--ink-2);border-color:var(--line-dark)}
.dark .card p{color:#a6aab2}
.dark .stats{border-color:var(--line-dark)}
.dark .stats div span{color:#a6aab2}

/* ---------- Werkwijze / steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px;counter-reset:step}
.step{position:relative;padding-top:18px}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--font-head);font-size:2.6rem;font-weight:700;color:transparent;
  -webkit-text-stroke:1.5px var(--accent);display:block;margin-bottom:14px;letter-spacing:-0.03em;
}
.step h3{font-size:1.08rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.93rem}
.dark .step p{color:#a6aab2}

/* ---------- Portfolio ---------- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.work{
  border-radius:var(--radius);overflow:hidden;background:var(--white);
  border:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease;display:block;
}
.work:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.thumb{
  aspect-ratio:4/3;display:flex;align-items:flex-end;padding:28px;
  font-family:var(--font-head);font-weight:700;font-size:1.6rem;color:#fff;letter-spacing:-0.03em;
}
.t1{background:linear-gradient(140deg,#2b4bff 0%,#8fa4ff 100%)}
.t2{background:linear-gradient(140deg,#0c0d10 0%,#3d434f 100%)}
.t3{background:linear-gradient(140deg,#0f766e 0%,#5eead4 100%)}
.work .meta{padding:22px 28px}
.work .meta h3{font-size:1.08rem;margin-bottom:4px}
.work .meta p{color:var(--muted);font-size:.88rem}
.work .result{
  display:inline-block;margin-top:12px;font-size:.8rem;font-weight:600;
  background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:4px 12px;
}

/* ---------- Checklist ---------- */
ul.check{list-style:none;margin-top:26px}
ul.check li{padding-left:34px;position:relative;margin-bottom:15px;color:var(--muted)}
ul.check li::before{
  content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;margin-top:4px;
}
ul.check li strong{color:var(--ink)}
.dark ul.check li strong{color:#fff}

/* ---------- Split layout ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:44px;display:flex;flex-direction:column;gap:20px;
}
.panel blockquote{font-size:1.08rem;line-height:1.65;font-weight:500}
.panel cite{color:var(--muted);font-size:.88rem;font-style:normal}
.dark .panel{background:var(--ink-2);border-color:var(--line-dark)}

/* ---------- Prose (blog / tekstpagina's) ---------- */
.prose{max-width:720px}
.prose h2{font-size:1.7rem;margin:48px 0 16px}
.prose h3{font-size:1.2rem;margin:34px 0 12px}
.prose p{margin-bottom:20px;color:#33363d}
.prose ul,.prose ol{margin:0 0 20px 22px;color:#33363d}
.prose li{margin-bottom:8px}
.prose a{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.93rem}
.prose th,.prose td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.prose th{background:var(--white);font-family:var(--font-head)}
.prose .note{
  background:var(--accent-soft);border-radius:var(--radius-sm);padding:20px 24px;
  font-size:.95rem;margin:24px 0;
}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin-top:44px}
.faq details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:22px 26px;margin-bottom:12px;
}
.faq summary{
  font-family:var(--font-head);font-weight:600;font-size:1.02rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin-top:14px;font-size:.96rem}

/* ---------- Pricing hint ---------- */
.price-box{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--white);border:1.5px solid var(--ink);border-radius:var(--radius);
  padding:34px 40px;margin-top:52px;
}
.price-box .amount{font-family:var(--font-head);font-size:2rem;font-weight:700;letter-spacing:-0.03em}
.price-box .amount small{font-size:.55em;color:var(--muted);font-weight:500}
.price-box p{color:var(--muted);font-size:.93rem;max-width:420px}

/* ---------- CTA band ---------- */
.cta-band{background:var(--accent);color:#fff;border-radius:var(--radius);padding:64px;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#d6ddff;max-width:520px;margin:0 auto 32px}
.cta-band .btn{background:#fff;color:var(--ink)}
.cta-band .btn:hover{background:var(--paper)}

/* ---------- Forms ---------- */
form{display:flex;flex-direction:column;gap:18px}
label{font-size:.88rem;font-weight:600;font-family:var(--font-head)}
input,textarea,select{
  width:100%;padding:14px 18px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:.95rem;background:var(--white);transition:border-color .2s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
.form-note{font-size:.82rem;color:var(--muted-2)}

/* ---------- Logos strip ---------- */
.logos{display:flex;gap:48px;flex-wrap:wrap;align-items:center;justify-content:center;opacity:.55;margin-top:40px}
.logos span{font-family:var(--font-head);font-weight:700;font-size:1.1rem;letter-spacing:-0.02em}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#a6aab2;padding:80px 0 40px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.foot-grid h4{color:#fff;font-size:.95rem;margin-bottom:18px}
.foot-grid a{display:block;margin-bottom:10px;color:#a6aab2;transition:color .2s}
.foot-grid a:hover{color:#fff}
.foot-grid .logo{color:#fff;margin-bottom:14px;display:inline-block}
.foot-bottom{border-top:1px solid var(--line-dark);padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.84rem;color:#6d727b}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .grid3,.work-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:44px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  section{padding:72px 0}
  .hero{padding:96px 0 80px}
  .grid2,.grid3,.work-grid,.steps{grid-template-columns:1fr}
  .stats{gap:36px}
  .cta-band{padding:48px 28px}
  .nav-links{
    display:none;position:absolute;top:74px;left:0;right:0;background:var(--paper);
    flex-direction:column;align-items:flex-start;padding:28px;gap:22px;
    border-bottom:1px solid var(--line);
  }
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
}

/* ============================================
   Visual enrichment — kleur & achtergronden
   ============================================ */
:root{
  --violet:#6d28d9;
  --teal:#0ea5a4;
  --amber:#f59e0b;
}

/* Zachte kleurgloed over de hele pagina */
body{
  background:
    radial-gradient(1100px 550px at 90% -120px, rgba(43,75,255,.08), transparent 60%),
    radial-gradient(900px 500px at -150px 400px, rgba(109,40,217,.06), transparent 60%),
    var(--paper);
}

/* Hero: kleurgloed + subtiel raster */
.hero{position:relative}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 420px at 18% -5%, rgba(43,75,255,.14), transparent 65%),
    radial-gradient(620px 420px at 85% 25%, rgba(109,40,217,.12), transparent 62%),
    radial-gradient(520px 360px at 55% 105%, rgba(14,165,164,.10), transparent 60%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(12,13,16,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,13,16,.04) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(760px 520px at 50% 0%, #000 25%, transparent 75%);
  mask-image:radial-gradient(760px 520px at 50% 0%, #000 25%, transparent 75%);
}
.hero .wrap{position:relative;z-index:1}
.hero h1 em{
  background:linear-gradient(100deg, var(--accent), var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Subpagina-hero's: lichte gloed */
.page-hero{position:relative}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 360px at 12% 0%, rgba(43,75,255,.10), transparent 62%),
    radial-gradient(520px 340px at 90% 40%, rgba(109,40,217,.08), transparent 60%);
}
.page-hero .wrap{position:relative;z-index:1}

/* Kickers als kleurchips */
.kicker{
  background:var(--accent-soft);padding:7px 16px;border-radius:999px;margin-bottom:22px;
}
.kicker::before{display:none}
.dark .kicker{background:rgba(43,75,255,.22);color:#9db1ff}

/* Gekleurde kaart-iconen (afwisselend) */
.card .icon{background:linear-gradient(135deg,#e3e9ff,#eee6ff)}
.grid3 .card:nth-child(3n+2) .icon{background:linear-gradient(135deg,#dff5f4,#e3fbf4)}
.grid3 .card:nth-child(3n) .icon{background:linear-gradient(135deg,#fdf1dc,#ffe9ec)}
.card:hover{border-color:rgba(43,75,255,.35)}

/* Gradient-knoppen */
.btn.accent{background:linear-gradient(120deg,var(--accent) 0%, #5b3df5 100%)}
.btn.accent:hover{background:linear-gradient(120deg,var(--accent-hover) 0%, #4c30d9 100%)}

/* Statistieken in kleur */
.stats div strong{
  background:linear-gradient(95deg,var(--accent),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dark .stats div strong{background:linear-gradient(95deg,#8fa4ff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Donkere secties: diepblauw met gloed */
.dark{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0b0d14 0%, #12152a 55%, #0b0d14 100%);
}
.dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 420px at 85% -10%, rgba(43,75,255,.22), transparent 60%),
    radial-gradient(600px 400px at 5% 110%, rgba(109,40,217,.18), transparent 60%);
}
.dark .wrap{position:relative;z-index:1}
.dark .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09);backdrop-filter:blur(4px)}

/* CTA-band: rijkere gradient + vormen */
.cta-band{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,#2b4bff 0%, #5b3df5 55%, #6d28d9 100%);
}
.cta-band::before{
  content:"";position:absolute;width:380px;height:380px;border-radius:50%;
  background:rgba(255,255,255,.09);top:-180px;right:-90px;
}
.cta-band::after{
  content:"";position:absolute;width:240px;height:240px;border-radius:50%;
  border:2px solid rgba(255,255,255,.15);bottom:-110px;left:-60px;
}
.cta-band>*{position:relative;z-index:1}

/* Panels: gekleurde bovenrand */
.panel{position:relative;overflow:hidden}
.panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--violet),var(--teal));
}

/* Prijsblok: zachte tint */
.price-box{
  background:linear-gradient(120deg,#ffffff 0%, #eef1ff 100%);
  border-color:var(--accent);
}

/* Portfolio-tegels: glans + patroon */
.thumb{position:relative;overflow:hidden}
.thumb::before{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;
  background:rgba(255,255,255,.16);top:-110px;right:-70px;
}
.thumb::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:28px 28px;
}
.thumb>*{position:relative;z-index:1}
.t1{background:linear-gradient(140deg,#2b4bff 0%,#7c9bff 60%,#a5b8ff 100%)}
.t2{background:linear-gradient(140deg,#3b1d8f 0%,#6d28d9 60%,#a78bfa 100%)}
.t3{background:linear-gradient(140deg,#0b5e5d 0%,#0ea5a4 60%,#5eead4 100%)}

/* FAQ & formulieren: accentkleur bij interactie */
.faq details[open]{border-color:var(--accent);box-shadow:0 6px 20px rgba(43,75,255,.08)}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px rgba(43,75,255,.12)}

/* Footer: diepblauwe gradient */
footer{background:linear-gradient(160deg,#0b0d14 0%, #131735 100%)}

/* Checklist-vinkjes in kleur */
ul.check li:nth-child(3n+2)::before{background:#e0f5f4;color:var(--teal)}
ul.check li:nth-child(3n)::before{background:#f3e8ff;color:var(--violet)}

/* Logo-strip iets kleurrijker bij hover */
.logos span{transition:color .2s}
.logos span:hover{color:var(--accent)}

/* ============================================
   Extra kleur — duidelijk zichtbaar
   ============================================ */

/* Header: gradient-lijn onderaan */
header{border-bottom:none}
header::after{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--violet),var(--teal),var(--amber));
}

/* Hero: duidelijke blauwe wash */
.hero{
  background:linear-gradient(180deg,#e8edff 0%,#f2ecff 45%,var(--paper) 100%);
}
.hero::before{
  background:
    radial-gradient(700px 420px at 15% -5%, rgba(43,75,255,.22), transparent 65%),
    radial-gradient(620px 420px at 88% 20%, rgba(109,40,217,.20), transparent 62%),
    radial-gradient(520px 360px at 55% 108%, rgba(14,165,164,.16), transparent 60%);
}
.hero-badge{border-color:rgba(43,75,255,.35);background:#fff}

/* Subpagina-hero's: zelfde wash */
.page-hero{background:linear-gradient(180deg,#e8edff 0%,#f4f0ff 60%,var(--paper) 100%)}

/* Kleurbanden per sectietype */
section:has(.grid3):not(.dark){background:linear-gradient(180deg,#eef2ff 0%,var(--paper) 100%)}
section:has(.work-grid):not(.dark){background:linear-gradient(180deg,#e9f7f6 0%,var(--paper) 100%)}
section:has(.faq):not(.dark){background:linear-gradient(180deg,#f4edff 0%,var(--paper) 100%)}
section:has(.split):not(.dark){background:linear-gradient(180deg,#fff7ea 0%,var(--paper) 100%)}
section:has(.prose):not(.dark){background:var(--paper)}

/* Kaarten: gekleurde bovenrand, afwisselend */
.grid3 .card,.grid2 .card{border-top:4px solid var(--accent)}
.grid3 .card:nth-child(3n+2){border-top-color:var(--teal)}
.grid3 .card:nth-child(3n){border-top-color:var(--amber)}
.grid2 .card:nth-child(2n){border-top-color:var(--violet)}

/* Iconen: verzadigde gradients */
.card .icon{background:linear-gradient(135deg,#c7d4ff,#dcd0ff);box-shadow:inset 0 0 0 1px rgba(43,75,255,.15)}
.grid3 .card:nth-child(3n+2) .icon{background:linear-gradient(135deg,#b8ebe9,#c9f5e6);box-shadow:inset 0 0 0 1px rgba(14,165,164,.2)}
.grid3 .card:nth-child(3n) .icon{background:linear-gradient(135deg,#ffe3b3,#ffd6dd);box-shadow:inset 0 0 0 1px rgba(245,158,11,.25)}

/* Stappen: genummerd in kleur */
.step:nth-child(2)::before{-webkit-text-stroke-color:var(--teal)}
.step:nth-child(3)::before{-webkit-text-stroke-color:var(--amber)}
.step:nth-child(4)::before{-webkit-text-stroke-color:#c4b5fd}

/* Resultaat-chips in portfolio: kleurvarianten */
.work:nth-child(3n+2) .result{background:#dff5f4;color:var(--teal)}
.work:nth-child(3n) .result{background:#fdf1dc;color:#b45309}

/* Logos-strip: kleurchips */
.logos{opacity:1;gap:16px}
.logos span{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 22px;font-size:.95rem;color:var(--muted);
  transition:transform .2s,border-color .2s,color .2s;
}
.logos span:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent)}

/* Blockquotes: groot kleurig aanhalingsteken */
.panel blockquote{position:relative;padding-top:18px}
.panel blockquote::before{
  content:"\201C";position:absolute;top:-14px;left:-6px;font-family:var(--font-head);
  font-size:4rem;line-height:1;
  background:linear-gradient(120deg,var(--accent),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============================================
   Screenshot-thumbnails & case-pagina's
   ============================================ */
.thumb.shot{padding:0;background:linear-gradient(140deg,#dbe3ff,#efe9ff)}
.thumb.shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.case-shot{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:#fff;
}
.case-shot img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;object-position:top}

/* Logo */
.logo-img{height:38px;display:block;width:auto}
footer .logo-img{height:42px;margin-bottom:14px}
@media (max-width:680px){.logo-img{height:32px}}

/* Logo groter + leesbare header-knop */
.logo-img{height:48px}
footer .logo-img{height:50px}
@media (max-width:680px){.logo-img{height:40px}}
.nav-links a.btn,.nav-links a.btn:hover{color:#fff}

/* Klanten-marquee */
.clients h2{margin-bottom:0}
.marquee{
  overflow:hidden;position:relative;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;gap:14px;width:max-content;animation:m-scroll 38s linear infinite;padding-right:14px}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes m-scroll{to{transform:translateX(-50%)}}
.m-chip{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:13px 26px;font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--ink);
}
.m-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot-a{background:var(--accent)}
.dot-t{background:var(--teal)}
.dot-v{background:var(--violet)}
.dot-m{background:var(--amber)}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .marquee{mask-image:none;-webkit-mask-image:none}
}

/* Google reviews */
.g-score{display:inline-flex;align-items:center;gap:12px;margin-top:22px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:12px 26px}
.g-score strong{font-family:var(--font-head);font-size:1.5rem}
.stars{color:#fbbc05;letter-spacing:2px;font-size:1rem}
.stars.big{font-size:1.25rem}
.g-count{color:var(--muted);font-size:.92rem}
.rev-card .stars{display:block;margin-bottom:14px}
.rev-card p{color:#33363d;font-size:.98rem;line-height:1.65}
.rev-card cite{display:block;margin-top:16px;font-style:normal;font-weight:600;font-family:var(--font-head)}
.rev-card cite span{color:var(--muted-2);font-weight:400;font-family:var(--font-body);font-size:.85rem}

/* Hero met visual */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero-visual{position:relative;min-height:460px}
.b-card{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 30px 70px rgba(12,13,16,.20);
}
.b-card .bar{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:#f6f6f9}
.b-card .bar i{width:10px;height:10px;border-radius:50%;display:block}
.b-card img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top}
.b1{width:76%;top:8px;left:0;transform:rotate(-3deg);animation:h-float 7s ease-in-out infinite}
.b2{width:62%;bottom:8px;right:0;transform:rotate(2.5deg);animation:h-float 8.5s ease-in-out infinite reverse}
.hero-chip{
  position:absolute;top:46%;right:2%;z-index:2;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:12px 22px;
  font-weight:600;box-shadow:var(--shadow);color:#b45309;
  animation:h-float 6s ease-in-out infinite;
}
.hero-chip strong{color:var(--ink);font-family:var(--font-head);font-size:1.1rem;margin:0 2px}
@keyframes h-float{50%{margin-top:-14px}}
.hero .stats{margin-top:64px}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-visual{min-height:340px;max-width:520px}
}
@media (prefers-reduced-motion:reduce){.b1,.b2,.hero-chip{animation:none}}

/* Klikbare chips & gerelateerde projecten */
a.m-chip{transition:border-color .2s,transform .2s}
a.m-chip:hover{border-color:var(--accent);transform:translateY(-2px)}
.rel-chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* Fix: hoogte-attribuut mag responsieve verhouding niet overschrijven */
.b-card img,.case-shot img{height:auto}


/* WhatsApp */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:200;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.45);
  transition:transform .2s,box-shadow .2s;
}
.wa-float:hover{transform:scale(1.08);box-shadow:0 12px 30px rgba(37,211,102,.55)}
@media (max-width:680px){.wa-float{right:16px;bottom:16px;width:54px;height:54px}}
.wa-btn{background:#25D366 !important;color:#fff !important;gap:10px}
.wa-btn:hover{background:#1fb658 !important;box-shadow:0 8px 24px rgba(37,211,102,.4) !important}


/* Semantiek: footer-kopjes en verborgen h2's */
.foot-grid .foot-h{color:#fff;font-size:.95rem;margin-bottom:18px;font-weight:600;font-family:var(--font-head)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}