/* Lettertypes, zelf gehost (latin). Gegenereerd uit Google Fonts. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-39cad6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-10cf13.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-0d6f10.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-1ab1ad.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-1ab1ad.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-1ab1ad.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/inter-tight-6c70c7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-tight-6c70c7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-tight-6c70c7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-tight-6c70c7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/space-grotesk-a57c94.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/space-grotesk-a57c94.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Arcturian Studios v2. De pagina is een wit paneel in een kosmisch kleurverloop: dat verloop is het merk. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --panel:  #FFFFFF;
    --soft:   #F5F4F7;
    --ink:    #121016;
    --ink-2:  #55515E;
    --ink-3:  #6E6A78;
    --line:   #E8E6EC;
    --night:  #121016;
    --star:   #FF7A4D;
    --violet: #B47AFF;
    --aurora: #7AB8FF;
    --link:   #C24A1C;

    --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
    --sans:    'Inter', -apple-system, system-ui, sans-serif;

    --r-lg: 28px;
    --r:    22px;
    --r-sm: 14px;
    --wrap: 76rem;
    --read: 40rem;
    --gut:  clamp(1.25rem, 4vw, 3rem);
    --frame: clamp(8px, 1.2vw, 16px);
    --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

html {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    background-color: #B8A4F2;
    background-image: var(--noise),
        radial-gradient(60% 50% at 0% 0%, #F0A8DA 0%, transparent 70%),
        radial-gradient(55% 55% at 100% 10%, #8DB6FF 0%, transparent 70%),
        radial-gradient(60% 60% at 100% 100%, #9C6BFF 0%, transparent 70%),
        radial-gradient(55% 50% at 0% 100%, #FFAE85 0%, transparent 70%);
    background-attachment: fixed;
}
body {
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background:
        radial-gradient(50% 420px at 18% 0%, #C9DDF2 0%, transparent 100%),
        radial-gradient(45% 520px at 80% 8%, #DCD3F7 0%, transparent 100%),
        radial-gradient(40% 380px at 55% 560px, #FFE2D3 0%, transparent 100%),
        var(--panel);
    margin: var(--frame);
    border-radius: var(--r-lg);
    overflow: clip;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--star); color: var(--ink); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* Type */
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; }
h1 { font-size: clamp(2.75rem, 8vw, 6.75rem); font-weight: 400; letter-spacing: -0.05em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 400; letter-spacing: -0.045em; }
h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.dim { color: #B3AFBC; }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--ink-2); max-width: 36rem; line-height: 1.5; }
.muted { color: var(--ink-3); font-size: .9375rem; }
.label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--ink-3); }
.label svg { width: 16px; height: 16px; flex: none; }
.big-num { font-family: var(--display); font-weight: 300; letter-spacing: -0.05em; line-height: 1; }

/* Nav: zwarte pil */
.nav { position: sticky; top: 12px; z-index: 20; padding: 12px var(--gut) 0; }
.nav .wrap { max-width: calc(var(--wrap) - 2 * var(--gut) + 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; padding: 0 .75rem 0 1.5rem; background: rgba(18,16,22,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; border-radius: 20px; }
.mark { font-family: var(--display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.03em; text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.mark::before { content: '✦'; color: var(--star); font-size: .85em; }
.nav ul { list-style: none; display: flex; gap: 2rem; align-items: center; font-size: .9375rem; }
.nav ul a { text-decoration: none; color: #BDB8C7; transition: color .15s; }
.nav ul a:hover { color: #fff; }
.nav ul .btn { color: var(--ink); background: #fff; border-color: #fff; min-height: 2.5rem; }
.nav ul .btn:hover { color: var(--ink); background: var(--star); border-color: var(--star); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: 0 1.4rem; border-radius: 999px; font-size: .9375rem; font-weight: 500; text-decoration: none; border: 1px solid var(--ink); transition: background .15s, color .15s, border-color .15s; }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: var(--star); border-color: var(--star); color: var(--ink); }
.btn-ghost:hover { background: var(--soft); }

/* Secties */
section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 46rem; }
.head p { color: var(--ink-2); font-size: 1.125rem; }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.head-row .head { margin-bottom: 0; }

/* Kaarten */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.5rem, 2.5vw, 2rem); }
.card.soft { background: var(--soft); border-color: transparent; }
.card.dark { background: var(--night); color: #EEECF2; border-color: var(--night); }
.card.dark .muted, .card.dark .label { color: #8F8A99; }

/* Hero */
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 5.75rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; max-width: 17ch; }
.hero h1 .dim { color: #8A93A3; }
.hero-actions { margin-bottom: clamp(3rem, 6vw, 5rem); }
.btn-arrow { background: linear-gradient(180deg, #3A3744, var(--ink)); color: #fff; border-color: var(--ink); padding: 0 .35rem 0 1.4rem; box-shadow: 0 10px 24px -12px rgba(18,16,22,.6); }
.btn-arrow i { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 999px; background: #fff; color: var(--ink); transition: transform .2s, background .2s; }
.btn-arrow i svg { width: 16px; height: 16px; }
.btn-arrow:hover i { transform: translateX(3px); background: var(--star); }
.hero { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero h1 { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero-lead { max-width: 39rem; margin-bottom: 1.75rem; }
.hero-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.bento { display: grid; grid-template-columns: 1.75fr 1fr; gap: 1rem; }
.bento-side { display: grid; gap: 1rem; align-content: start; }

/* Kosmisch beeld met zoekresultaat */
.cosmos { position: relative; border-radius: var(--r); overflow: hidden; min-height: 30rem; background: #0B0812; isolation: isolate; display: grid; place-items: center; padding: 2rem; }
.cosmos::before { content: ''; position: absolute; inset: -20%; z-index: -2; filter: blur(40px) saturate(1.2);
    background:
        radial-gradient(35% 40% at 30% 35%, var(--violet), transparent 70%),
        radial-gradient(30% 35% at 70% 30%, var(--aurora), transparent 70%),
        radial-gradient(35% 35% at 62% 75%, var(--star), transparent 70%),
        radial-gradient(25% 30% at 25% 80%, #F0A8DA, transparent 70%); }
.cosmos::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--noise); opacity: .35; mix-blend-mode: overlay; }
.search-example { width: min(100%, 30rem); display: grid; }
.example-label { font-size: .6875rem; color: var(--ink-2); margin: 0 0 .75rem .25rem; }
.serp { width: 100%; background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 18px; padding: 1.25rem; box-shadow: 0 30px 60px -20px rgba(11,8,18,.55); }
.serp-bar { display: flex; align-items: center; gap: .6rem; background: var(--soft); border-radius: 999px; padding: .6rem 1rem; font-size: .9375rem; margin-bottom: 1rem; }
.serp-bar svg { width: 16px; height: 16px; color: var(--ink-3); }
.serp-hit { padding: .85rem .25rem; border-top: 1px solid var(--line); }
.serp-hit:first-of-type { border-top: 0; }
.serp-hit small { display: block; color: var(--ink-3); font-size: .75rem; }
.serp-hit b { display: block; color: #3A3FD8; font-weight: 500; font-size: 1.05rem; line-height: 1.3; }
.serp-hit span { font-size: .8125rem; color: var(--ink-2); }
.serp-hit.us { background: #FFF6F1; border-radius: 12px; padding: .85rem .9rem; border-top: 0; margin: 0 -.65rem; }
.serp-hit.faded { opacity: .45; }
.site-preview { position: relative; width: 88%; margin: -1rem 0 0 auto; border-radius: 14px; overflow: hidden; background: #F4F6EF; box-shadow: 0 20px 40px -15px rgba(11,8,18,.45); }
.site-preview-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; padding: .6rem 1rem; background: #fff; color: var(--ink-2); font-size: .625rem; }
.site-preview-bar span:last-child { color: var(--ink-3); }
.site-preview-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1.25rem; color: #263C32; }
.site-preview-body small { display: block; font-size: .625rem; margin-bottom: .4rem; }
.site-preview-body b { display: block; font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; }
.preview-cta { display: inline-flex; align-items: center; gap: .65rem; border-radius: 999px; margin-top: .9rem; padding: .45rem .7rem; background: #263C32; color: #fff; font-size: .625rem; }
.preview-art { min-height: 7rem; border-radius: 4rem 4rem .75rem .75rem; background: radial-gradient(ellipse at 60% 30%, #DDE8C7, transparent 65%), linear-gradient(135deg, #A7BC95, #547666); }
.speed { display: flex; align-items: center; gap: .65rem; background: var(--night); color: #fff; padding: .6rem 1rem; font-size: .75rem; }
.speed small { display: block; color: #BDB8C7; font-size: .625rem; }
.speed i { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #2BB673; font-style: normal; font-weight: 600; font-size: .8125rem; }

.stats { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.stats div { display: grid; gap: .15rem; }
.stats .big-num { font-size: clamp(2.25rem, 3.5vw, 3rem); }
.pricelist { list-style: none; display: grid; margin-top: 1rem; }
.pricelist li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.pricelist li:first-child { border-top: 0; }
.pricelist span:last-child { color: #8F8A99; }

/* Branches: grote rijen */
.branches { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 5rem); }
.branches li { border-top: 1px solid var(--line); }
.branches a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; text-decoration: none; }
.branches a span:first-child { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.03em; transition: transform .2s; }
.branches a span:last-child { font-size: .875rem; color: var(--ink-3); white-space: nowrap; display: flex; align-items: center; gap: .75rem; }
.branches a span:last-child::after { content: ''; width: 2rem; height: 2rem; border-radius: 50%; background: var(--soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121016' stroke-width='1.6'><path d='M7 17 17 7M8 7h9v9'/></svg>") center/14px no-repeat; transition: background-color .2s; }
.branches a:hover span:first-child { transform: translateX(6px); }
.branches a:hover span:last-child::after { background-color: var(--star); }

/* Werk: verspringende kaarten op een zachte lucht */
.work { position: relative; isolation: isolate; border-radius: var(--r-lg); margin: 0 var(--frame); overflow: hidden; background: #EAF1F8; }
.work::before { content: ''; position: absolute; inset: -10%; z-index: -1; filter: blur(60px);
    background:
        radial-gradient(45% 50% at 85% 25%, #5F7FB0 0%, transparent 70%),
        radial-gradient(40% 45% at 15% 15%, #CFE3F3 0%, transparent 70%),
        radial-gradient(35% 40% at 60% 80%, #B9A6F0 0%, transparent 70%),
        radial-gradient(30% 35% at 95% 90%, #FFB089 0%, transparent 70%); }
.work .head p { color: var(--ink-2); }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.shot { display: block; text-decoration: none; border-radius: var(--r); overflow: hidden; background: rgba(255,255,255,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 48px -28px rgba(30,40,70,.45); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.shot:nth-child(2) { margin-top: 4.5rem; }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot-body { padding: 1.5rem 1.6rem 1.75rem; display: grid; gap: .3rem; }
.shot h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.4rem; }
.shot h3 span { font-family: var(--sans); font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
.shot h3 span::after { content: ' \2197'; }
.shot small { font-size: 1rem; color: var(--ink-2); }
.shot p { font-size: .9375rem; color: var(--ink-3); line-height: 1.55; margin-top: .5rem; }
.shot:hover { transform: translateY(-4px); }
.shot:hover h3 span { color: var(--ink); }

/* In elke site: bento */
.specs-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.specs-bento .card { display: flex; flex-direction: column; gap: .5rem; min-height: 13rem; }
.specs-bento .card h3 { margin-top: auto; }
.specs-bento .card p { color: var(--ink-2); font-size: 1rem; }
.specs-bento .card.dark p { color: #A9A4B3; }
.specs-bento .wide { grid-column: span 2; }
.icon { width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--soft); display: grid; place-items: center; }
.icon svg { width: 20px; height: 20px; }
.card.dark .icon { background: rgba(255,255,255,.08); }
.specs-bento .card .speed-big { color: #fff; font-size: clamp(5rem, 10vw, 8.5rem); margin: auto 0 0; }
.speed-big sup { font-size: .3em; letter-spacing: 0; vertical-align: top; margin-left: .15em; color: #8F8A99; }

/* Simpele specs-lijst (subpagina's) */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.specs > div { background: var(--soft); border-radius: var(--r); padding: 1.75rem; }
.specs h3 { margin-bottom: .4rem; }
.specs p { color: var(--ink-2); font-size: 1rem; }

/* Pakketten */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.plan { border: 1px solid var(--line); border-radius: var(--r); padding: 2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.plan.main { background: var(--night); color: #fff; border-color: var(--night); position: relative; overflow: hidden; isolation: isolate; }
.plan.main::before { content: ''; position: absolute; width: 22rem; height: 22rem; right: -9rem; top: -11rem; z-index: -1; background: radial-gradient(circle, rgba(180,122,255,.55), rgba(255,122,77,.25) 45%, transparent 70%); filter: blur(10px); }
.plan.main .muted, .plan.main li { color: #B5B0BF; }
.plan h3 { display: flex; justify-content: space-between; align-items: center; }
.plan h3 em { font-style: normal; font-family: var(--sans); font-size: .75rem; font-weight: 500; letter-spacing: 0; padding: .3rem .7rem; border-radius: 999px; background: var(--star); color: var(--ink); }
.price { font-family: var(--display); font-size: clamp(2.75rem, 4vw, 3.5rem); font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.price small { font-family: var(--sans); font-size: .875rem; letter-spacing: 0; color: var(--ink-3); margin-right: .4rem; font-weight: 400; }
.plan ul { list-style: none; display: grid; gap: .55rem; font-size: .9375rem; color: var(--ink-2); padding-top: 1.1rem; border-top: 1px solid var(--line); margin-top: auto; }
.plan.main ul { border-top-color: rgba(255,255,255,.12); }
.plan li { display: flex; gap: .6rem; }
.plan li::before { content: '✦'; color: var(--star); font-size: .7em; line-height: 2.1; }
.note { margin-top: 1.5rem; }
.note a, .prose a { color: var(--link); text-underline-offset: 3px; }

/* Werkwijze */
.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.steps li { counter-increment: s; background: var(--soft); border-radius: var(--r); padding: 1.75rem; min-height: 15rem; display: flex; flex-direction: column; }
.steps li::before { content: '0' counter(s); font-family: var(--display); font-weight: 300; font-size: 3.5rem; letter-spacing: -0.05em; line-height: 1; color: #C4C0CC; margin-bottom: auto; padding-bottom: 2rem; }
.steps p { color: var(--ink-2); font-size: 1rem; margin-top: .4rem; }

/* Kennisbank-kaarten */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.post { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; transition: border-color .2s; }
.post:hover { border-color: var(--ink); }
.thumb { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: #0B0812; isolation: isolate; display: flex; align-items: end; padding: 1.25rem; color: #fff; }
.thumb::before { content: ''; position: absolute; inset: -25%; z-index: -2; filter: blur(30px);
    background: radial-gradient(40% 45% at var(--x, 30%) 40%, var(--a, var(--violet)), transparent 70%), radial-gradient(40% 45% at 75% 70%, var(--b, var(--star)), transparent 70%); }
.thumb::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--noise); opacity: .3; mix-blend-mode: overlay; }
.thumb span { font-family: var(--display); font-size: 2.5rem; font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.post-body { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: .6rem; }
.post-body h3 { font-size: 1.2rem; }

/* Lijst met artikelen (kennisbank-pagina) */
.posts { list-style: none; }
.posts li { border-top: 1px solid var(--line); }
.posts a { display: grid; grid-template-columns: 10rem 1fr auto; gap: 1.5rem; align-items: baseline; padding: 1.25rem 0; text-decoration: none; }
.posts a:hover h3 { color: var(--link); }
.posts .muted { white-space: nowrap; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq { max-width: var(--read); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.25rem 3rem 1.25rem 0; font-weight: 500; font-size: 1.0625rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 2rem; height: 2rem; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-weight: 400; transition: transform .2s, background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--star); }
.faq details p { padding: 0 0 1.4rem; color: var(--ink-2); }

/* Slot-CTA */
.night { background: var(--night); color: #EEECF2; position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); margin: 0 var(--frame) var(--frame); }
.night::before { content: ''; position: absolute; width: 60rem; height: 40rem; right: -20rem; bottom: -24rem; z-index: -1; filter: blur(50px);
    background: radial-gradient(40% 40% at 40% 50%, rgba(180,122,255,.6), transparent 70%), radial-gradient(35% 35% at 65% 45%, rgba(255,122,77,.5), transparent 70%), radial-gradient(30% 30% at 50% 30%, rgba(122,184,255,.45), transparent 70%); }
.night .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem; }
.night h2 { max-width: 16ch; font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.05em; }
.night p { color: #8F8A99; margin-top: 1.25rem; font-size: 1.125rem; }
.night .btn { background: #fff; color: var(--ink); border-color: #fff; min-height: 3.5rem; padding: 0 1.75rem; font-size: 1rem; }
.night .btn:hover { background: var(--star); border-color: var(--star); }

/* Footer */
footer { padding: clamp(3rem, 6vw, 5rem) 0 2.5rem; }
footer .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
footer .wrap > span { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; }
footer .wrap > span::before { content: '✦ '; color: var(--star); }
footer nav { display: grid; }
footer nav a { text-decoration: none; font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink-2); padding: .85rem 0; border-bottom: 1px solid var(--line); transition: color .15s; }
footer nav a:last-child { font-size: 1rem; font-family: var(--sans); border-bottom: 0; color: var(--ink-3); }
footer nav a:hover { color: var(--ink); }

/* Subpagina's */
.page-head { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(1rem, 3vw, 2rem); }
.page-head h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); max-width: 14ch; margin-bottom: 1.25rem; }
.rates { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--soft); border-radius: var(--r); overflow: hidden; }
.rates th, .rates td { text-align: left; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.rates th { font-weight: 500; color: var(--ink-3); font-size: .875rem; }
.rates td:first-child { font-family: var(--display); font-size: 1.3rem; letter-spacing: -0.03em; width: 30%; }
.rates th:last-child { text-align: right; }
.rates td:last-child { text-align: right; white-space: nowrap; font-family: var(--display); font-size: 1.2rem; letter-spacing: -0.02em; }
.rates tr:last-child td { border-bottom: 0; }
.block-title { margin: 4rem 0 1.25rem; font-size: clamp(1.6rem, 2.5vw, 2.25rem); }
.block-title:first-child { margin-top: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin-bottom: 3rem; }
.chips a { display: inline-block; padding: .5rem 1rem; border-radius: 999px; background: var(--soft); font-size: .9375rem; text-decoration: none; color: var(--ink-2); transition: background .15s, color .15s; }
.chips a:hover, .chips a[aria-current] { background: var(--ink); color: #fff; }
.group { scroll-margin-top: 6rem; margin-bottom: 3.5rem; }
.group h2 { font-size: 1.75rem; margin-bottom: .75rem; }
section.flush { padding-top: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.two .block-title { margin-top: 0; }
.mailcard { background: var(--night); color: #EEECF2; border-radius: var(--r); padding: 2.25rem; display: grid; gap: 1rem; position: relative; overflow: hidden; isolation: isolate; }
.mailcard::before { content: ''; position: absolute; width: 24rem; height: 24rem; right: -10rem; top: -12rem; z-index: -1; filter: blur(20px); background: radial-gradient(circle, rgba(180,122,255,.55), rgba(255,122,77,.3) 45%, transparent 70%); }
.mailcard .muted { color: #8F8A99; }
.mailcard a.big { font-family: var(--display); font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -0.03em; color: #fff; text-underline-offset: 5px; word-break: break-all; }
.mailcard ol { padding-left: 1.25rem; }
.mailcard ol li { margin-bottom: .35rem; }

/* Artikel */
.crumbs { font-size: .875rem; color: var(--ink-3); padding-top: 2.5rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.article-head { padding: 1.5rem 0 2.5rem; max-width: 52rem; }
.article-head h1 { letter-spacing: -0.04em; font-size: clamp(2.25rem, 5vw, 4rem); margin-bottom: 1.25rem; }
.meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .875rem; color: var(--ink-2); margin-top: 1.5rem; }
.meta span { background: var(--soft); border-radius: 999px; padding: .3rem .8rem; }
.article { display: grid; grid-template-columns: minmax(0, var(--read)) 18rem; gap: 4rem; justify-content: space-between; padding-bottom: 5rem; }
.answer { background: var(--night); color: #EEECF2; border-radius: var(--r); padding: 1.6rem 1.75rem; margin-bottom: 2.5rem; font-size: 1.125rem; line-height: 1.5; position: relative; overflow: hidden; isolation: isolate; }
.answer::before { content: ''; position: absolute; width: 18rem; height: 18rem; right: -8rem; top: -9rem; z-index: -1; filter: blur(16px); background: radial-gradient(circle, rgba(255,122,77,.5), rgba(180,122,255,.3) 45%, transparent 70%); }
.answer strong { display: block; font-size: .875rem; color: var(--star); font-weight: 500; margin-bottom: .5rem; }
.prose h2 { font-size: 2rem; margin: 3.25rem 0 1rem; scroll-margin-top: 6rem; }
.prose h3 { margin: 1.75rem 0 .5rem; }
.prose p, .prose ul, .prose ol, .prose table { margin-bottom: 1.1rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .35rem; }
.prose li::marker { color: var(--ink-3); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; background: var(--soft); border-radius: var(--r-sm); overflow: hidden; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 500; color: var(--ink-3); font-size: .875rem; }
.prose tr:last-child td { border-bottom: 0; }
.prose tr.us td { background: #FFEFE7; }
.check { list-style: none; padding-left: 0 !important; display: grid; gap: .5rem; }
.check li { padding: .8rem 1rem .8rem 2.9rem; position: relative; background: var(--soft); border-radius: var(--r-sm); margin: 0; }
.check li::before { content: ''; position: absolute; left: 1rem; top: 1.05rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='m6 12 4 4 8-8'/></svg>") center/11px no-repeat; }
.aside { position: sticky; top: 6.5rem; align-self: start; display: grid; gap: 1rem; font-size: .9375rem; }
.toc { background: var(--soft); border-radius: var(--r); padding: 1.5rem; }
.toc p { font-weight: 500; margin-bottom: .75rem; }
.toc ol { list-style: none; display: grid; gap: .5rem; }
.toc a { text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--link); }
.cta-box { background: var(--night); color: #EEECF2; border-radius: var(--r); padding: 1.5rem; display: grid; gap: .75rem; position: relative; overflow: hidden; isolation: isolate; }
.cta-box::before { content: ''; position: absolute; width: 16rem; height: 16rem; right: -7rem; bottom: -8rem; z-index: -1; filter: blur(14px); background: radial-gradient(circle, rgba(180,122,255,.6), rgba(255,122,77,.3) 45%, transparent 70%); }
.cta-box .price { font-size: 2.25rem; }
.cta-box p { color: #B5B0BF; }
.cta-box .btn { background: #fff; color: var(--ink); border-color: #fff; }
.author { display: flex; gap: 1rem; align-items: center; background: var(--soft); border-radius: var(--r); padding: 1.25rem 1.5rem; margin-top: 3rem; }
.author .avatar { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--night); color: var(--star); display: grid; place-items: center; flex: none; }
.author p { margin: 0; font-size: .9375rem; }
.more { padding: 3rem 0 5rem; }
.more h2 { font-size: 2rem; margin-bottom: 1.5rem; }

/* Mobiel */
@media (max-width: 960px) {
    .bento { grid-template-columns: 1fr; }
    .bento-side { grid-template-columns: 1fr 1fr; }
    .post-grid { grid-template-columns: 1fr 1fr; }
    .specs-bento { grid-template-columns: 1fr 1fr; }
    .steps { grid-template-columns: 1fr 1fr; }
    .faq-grid { grid-template-columns: 1fr; }
    .article { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .aside { position: static; order: -1; }
    .aside .cta-box { display: none; }
}
@media (max-width: 720px) {
    .nav ul li:not(:last-child) { display: none; }
    .nav .wrap { padding-left: 1.1rem; height: 3.5rem; }
    .cosmos { min-height: 24rem; padding: 1.5rem 1.25rem; }
    .site-preview { width: 94%; }
    .site-preview-body { padding: 1rem; gap: .75rem; }
    .serp-hit:last-child { display: none; }
    .bento-side, .shots, .post-grid, .specs-bento, .plans, .branches, footer .wrap { grid-template-columns: 1fr; }
    .specs-bento .wide { grid-column: auto; }
    .shot:nth-child(2) { margin-top: 0; }
    .steps { grid-template-columns: 1fr; }
    .steps li { min-height: 0; }
    .posts a { grid-template-columns: 1fr; gap: .25rem; }
    .two { grid-template-columns: 1fr; }
    .rates td:first-child { width: auto; }
    .rates th:nth-child(2), .rates td:nth-child(2) { display: none; }
    .rates th, .rates td { padding: 1rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Mobiel menu */
.menu-btn { display: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); cursor: pointer; place-content: center; gap: 5px; }
.menu-btn span { display: block; width: 16px; height: 1.5px; background: #fff; transition: transform .25s; }
.nav.open .menu-btn span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav.open .menu-btn span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
@media (max-width: 720px) {
    .nav .wrap { flex-wrap: wrap; height: auto; min-height: 3.5rem; padding: .5rem .5rem .5rem 1.1rem; }
    .menu-btn { display: grid; }
    .nav ul, .nav ul li:not(:last-child) { display: none; }
    .nav.open ul { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: .5rem .6rem .75rem 0; }
    .nav.open ul li { display: block !important; }
    .nav.open ul a:not(.btn) { display: block; padding: .85rem 0; font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.03em; color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); }
    .nav.open ul .btn { width: 100%; margin-top: 1rem; min-height: 3rem; }
}

/* Artikel: functies, goed en fout */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
.feature { background: var(--soft); border-radius: var(--r); padding: 1.4rem; display: flex; flex-direction: column; gap: .4rem; }
.feature-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.feature .icon { background: var(--panel); }
.feature .tag { font-size: .75rem; font-weight: 500; padding: .25rem .65rem; border-radius: 999px; background: var(--panel); color: var(--ink-2); }
.prose .feature h3 { margin: 0; font-size: 1.1rem; }
.prose .feature p { margin: 0; font-size: .9375rem; color: var(--ink-2); line-height: 1.5; }
.dos, .donts { list-style: none; padding-left: 0 !important; display: grid; gap: .5rem; }
.dos li, .donts li { position: relative; padding: 1rem 1.25rem 1rem 3.25rem; border-radius: var(--r-sm); margin: 0; color: var(--ink-2); font-size: 1rem; }
.dos li strong, .donts li strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: .15rem; }
.dos li { background: #EEF7F1; }
.donts li { background: #FFF1EA; }
.dos li::before, .donts li::before { content: ''; position: absolute; left: 1.1rem; top: 1.15rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 12px; }
.dos li::before { background-color: #2BB673; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='m6 12 4 4 8-8'/></svg>"); }
.donts li::before { background-color: var(--star); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M7 7l10 10M17 7 7 17'/></svg>"); }
@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }

/* WhatsApp en contact */
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-wa { background: #17794B !important; border-color: #17794B !important; color: #fff !important; }
.btn-wa:hover { background: #11603B !important; border-color: #11603B !important; }
.btn-wa-light svg { color: #17794B; }
.night .actions { gap: .75rem; }
.cta-box .btn-wa { min-height: 2.75rem; }
.wa-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 30; display: flex; align-items: center; gap: .5rem; height: 3.25rem; padding: 0 1.2rem 0 1rem; border-radius: 999px; background: #17794B; color: #fff; text-decoration: none; font-weight: 500; font-size: .9375rem; box-shadow: 0 12px 28px -10px rgba(18,16,22,.5); transition: transform .2s; }
.wa-float svg { width: 22px; height: 22px; }
.wa-float:hover { transform: translateY(-2px); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.contact-card { display: grid; gap: .35rem; padding: 2rem; border-radius: var(--r); background: var(--night); color: #EEECF2; text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: transform .2s; }
.contact-card::before { content: ''; position: absolute; width: 22rem; height: 22rem; right: -9rem; top: -11rem; z-index: -1; filter: blur(18px); background: radial-gradient(circle, rgba(180,122,255,.5), rgba(255,122,77,.25) 45%, transparent 70%); }
.contact-card.wa { background: #17794B; }
.contact-card.wa::before { background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%); }
.contact-card .icon { background: rgba(255,255,255,.12); margin-bottom: 1.5rem; }
.contact-card .muted { color: rgba(255,255,255,.7); }
.contact-card strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 3.2vw, 2.25rem); letter-spacing: -0.03em; word-break: break-word; }
.contact-card:hover { transform: translateY(-3px); }
.contact-tips p { margin-top: .75rem; color: var(--ink-2); font-size: 1rem; max-width: 42rem; }
.contact-tips ul { padding-left: 1.25rem; margin-top: .75rem; color: var(--ink-2); }
.contact-tips li + li { margin-top: .35rem; }
@media (max-width: 720px) {
    .contact-grid { grid-template-columns: 1fr; }
    .wa-float { right: 1rem; bottom: 1rem; width: 3.5rem; height: 3.5rem; padding: 0; justify-content: center; }
    .wa-float span { display: none; }
    .night .actions .btn { flex: 1 1 100%; }
}
@media (max-width: 720px) {
    .prose table { display: block; background: none; border-radius: 0; overflow: visible; }
    .prose thead { display: none; }
    .prose tbody { display: grid; gap: .5rem; }
    .prose tr { display: grid; gap: .3rem; background: var(--soft); border-radius: var(--r-sm); padding: 1rem 1.1rem; }
    .prose tr.us { background: #FFEFE7; }
    .prose tr.us td { background: none; }
    .prose td { display: flex; justify-content: space-between; gap: 1rem; padding: 0; border: 0; }
    .prose td:first-child { font-weight: 500; font-size: 1rem; margin-bottom: .2rem; }
    .prose td[data-label]::before { content: attr(data-label); color: var(--ink-3); flex: none; }
    .prose td[data-label] { text-align: right; }
}
.branch-note { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--soft); border-radius: var(--r-sm); color: var(--ink-2); font-size: 1rem; }
.branch-note span { color: var(--star); flex: none; }
.branch-note a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }

/* Illustraties bij de stappen */
.steps li { min-height: 0; padding: .75rem .75rem 1.5rem; }
.steps li::before { font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); margin: 0 .75rem .3rem; padding: 0; content: 'Stap ' counter(s); font-family: var(--sans); }
.steps li h3, .steps li p { margin-left: .75rem; margin-right: .75rem; }
.step-art { order: -1; margin-bottom: 1.25rem; }
.step-art svg { display: block; width: 100%; height: auto; border-radius: 16px; }

/* Gidsen: genummerde stappen */
.gsteps { list-style: none; counter-reset: g; padding-left: 0 !important; display: grid; gap: .5rem; }
.gsteps li { counter-increment: g; position: relative; padding: 1rem 1.25rem 1rem 3.5rem; background: var(--soft); border-radius: var(--r-sm); margin: 0; color: var(--ink-2); font-size: 1rem; }
.gsteps li::before { content: counter(g); position: absolute; left: 1.1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: .8125rem; font-weight: 500; display: grid; place-items: center; }
.gsteps li strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: .15rem; }
.prose td:first-child:empty { display: none; }

/* Case studies */
.case-head { padding: 1.5rem 0 2rem; }
.case-head h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 500; letter-spacing: -0.045em; max-width: 18ch; margin: 1rem 0 2rem; }
.case-label { display: inline-block; font-size: .8125rem; font-weight: 500; padding: .35rem .8rem; border-radius: 999px; background: var(--soft); color: var(--ink-2); }
.case-label.klant { background: #E6F4EC; color: #1F6B45; }
.case-label.eigen { background: #EDE6FF; color: #5B3BA6; }
.case-label.concept { background: #FFEFE7; color: #A8431B; }
.case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem 2rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.case-facts dt { font-size: .8125rem; color: var(--ink-3); }
.case-facts dd { font-size: 1rem; margin-top: .15rem; }
.case-facts a { color: var(--link); text-underline-offset: 3px; }
.case-hero { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 2rem; box-shadow: 0 30px 60px -35px rgba(18,16,22,.5); }
.case-hero img { width: 100%; height: auto; }
.case-note { display: flex; gap: .75rem; align-items: flex-start; background: #FFF4EE; border-radius: var(--r-sm); padding: 1rem 1.25rem; margin-bottom: 2.5rem; color: var(--ink-2); max-width: var(--read); }
.case-note span { color: var(--star); }
.shots-2 { grid-template-columns: 1fr 1fr; }
.shots-2 .shot:nth-child(2) { margin-top: 0; }
.shots-2 .shot:nth-child(even) { margin-top: 4.5rem; }
@media (max-width: 720px) { .shots-2 { grid-template-columns: 1fr; } .shots-2 .shot:nth-child(even) { margin-top: 0; } }

/* Diensten, prijzen en over */
footer .wrap > span small { display: block; font-family: var(--sans); font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); margin-top: .5rem; }
footer .wrap > span small::before { content: none; }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.svc-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; border-radius: var(--r); background: var(--soft); text-decoration: none; min-height: 15rem; transition: background .2s, transform .2s; }
.svc-card .tag { align-self: flex-start; font-size: .75rem; font-weight: 500; padding: .25rem .65rem; border-radius: 999px; background: var(--panel); color: var(--ink-2); margin-bottom: auto; }
.svc-card h3 { font-size: 1.35rem; margin-top: 2rem; }
.svc-card p { color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.svc-more { font-size: .875rem; font-weight: 500; margin-top: .5rem; }
.svc-more::after { content: ' \2197'; }
.svc-card:hover { background: #ECEAF2; transform: translateY(-2px); }
.plans-4 { grid-template-columns: repeat(4, 1fr); }
.plans-2 { grid-template-columns: 1fr 1fr; max-width: 52rem; }
.price small.per { margin: 0 0 0 .5rem; }
.svc-rows { display: grid; border-top: 1px solid var(--line); }
.svc-row { display: grid; grid-template-columns: 14rem 1fr auto auto; gap: 1.5rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.svc-name { font-family: var(--display); font-size: 1.3rem; letter-spacing: -0.03em; }
.svc-price { font-family: var(--display); font-size: 1.15rem; white-space: nowrap; }
.svc-link { font-size: .875rem; color: var(--ink-3); }
.svc-link::after { content: ' \2197'; }
.svc-row:hover .svc-name { color: var(--link); }
.svc-row:hover .svc-link { color: var(--ink); }
.compare th.us, .compare td.us { background: #FFEFE7; }
.compare { margin-bottom: 0; }
.portrait { margin: 0; }
.portrait img { width: 100%; max-width: 26rem; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 10px var(--soft), 0 30px 60px -30px rgba(18,16,22,.5); }
.over .prose p { font-size: 1.0625rem; color: var(--ink-2); margin-bottom: 1rem; }
.over .prose .lead { color: var(--ink); font-size: 1.3rem; }
.over .case-facts { margin-top: 2rem; }
img.avatar { object-fit: cover; padding: 0; }
.author a { color: inherit; }
@media (max-width: 1100px) { .plans-4, .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
    .plans-4, .plans-2, .svc-grid { grid-template-columns: 1fr; }
    .svc-card { min-height: 0; }
    .svc-card h3 { margin-top: 1rem; }
    .svc-row { grid-template-columns: 1fr auto; gap: .25rem 1rem; }
    .svc-row .muted { grid-column: 1 / -1; grid-row: 2; }
    .svc-link { display: none; }
    .portrait img { max-width: 16rem; margin: 0 auto; display: block; }
}
.portrait img { height: auto; }
.prose a.btn { text-decoration: none; }
.prose a.btn-ghost { color: var(--ink); }
.plans-4 .plan ul, .plans-2 .plan ul { margin-top: 0; }
#websites { padding-top: 1.5rem; }
.prose .compare { display: table; }
.quote { margin: 0 0 2.5rem; padding: 1.75rem; border-radius: var(--r); background: var(--soft); }
.quote blockquote { font-family: var(--display); font-size: 1.4rem; line-height: 1.35; letter-spacing: -0.02em; }
.quote blockquote::before { content: '“'; color: var(--star); }
.quote blockquote::after { content: '”'; color: var(--star); }
.quote figcaption { margin-top: 1rem; font-size: .9375rem; color: var(--ink-3); }
.quote figcaption strong { color: var(--ink); font-weight: 500; }
.contact-tips { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2rem 3rem; align-items: start; padding: clamp(1.75rem, 3vw, 2.5rem); }
.contact-tips h3 { font-size: 1.6rem; letter-spacing: -0.03em; margin-bottom: .75rem; }
.contact-tips .contact-tips-text p { margin-top: 0; margin-bottom: .75rem; }
.contact-tips .check { margin: 0; padding: 0; }
.contact-tips .check li { background: var(--panel); color: var(--ink); margin: 0; }
@media (max-width: 720px) { .contact-tips { grid-template-columns: 1fr; } }
.case-label.hobby { background: #E6F0FF; color: #2B5DA8; }

/* Hero: van zoekopdracht tot afspraak */
.flow { display: grid; grid-template-columns: auto minmax(0, 15rem); gap: 1.75rem; align-items: center; }
.phone { position: relative; width: 15.5rem; height: 30rem; border-radius: 2.4rem; background: #0B0812; padding: .6rem; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 40px 70px -30px rgba(0,0,0,.7); }
.phone-notch { position: absolute; top: 1rem; left: 50%; translate: -50% 0; width: 4.5rem; height: 1.1rem; border-radius: 999px; background: #0B0812; z-index: 3; }
.screen { position: absolute; inset: .6rem; border-radius: 1.9rem; background: #fff; padding: 2.8rem 1rem 1rem; overflow: hidden; opacity: 0; animation: flowShow 9s infinite both; font-size: .8125rem; color: var(--ink); }
.s2 { animation-delay: 3s; background: #F3F1EA; }
.s3 { animation-delay: 6s; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: 1rem; }
@keyframes flowShow { 0% { opacity: 0; transform: translateY(10px); } 4% { opacity: 1; transform: none; } 31% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translateY(-6px); } }
.ph-search { display: flex; align-items: center; gap: .45rem; background: var(--soft); border-radius: 999px; padding: .55rem .8rem; margin-bottom: .9rem; }
.ph-search svg { width: 13px; height: 13px; color: var(--ink-3); flex: none; }
.ph-hit { padding: .7rem .2rem; border-top: 1px solid var(--line); opacity: .45; }
.ph-hit.us { opacity: 1; background: #FFF3EC; border: 0; border-radius: 12px; padding: .75rem; margin: 0 -.3rem .2rem; }
.ph-hit small { display: block; color: var(--ink-3); font-size: .6875rem; }
.ph-hit b { display: block; color: #3A3FD8; font-weight: 500; line-height: 1.3; }
.ph-hit span { display: block; color: var(--ink-2); font-size: .75rem; margin-top: .2rem; }
.ph-brand { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: #2F4A3A; }
.ph-title { font-family: var(--display); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; margin: .4rem 0 .9rem; color: #1D2B22; }
.ph-sub { color: var(--ink-2); margin-bottom: .6rem; }
.ph-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: 1rem; }
.ph-slots span { padding: .55rem; border-radius: 10px; background: #fff; text-align: center; font-weight: 500; font-size: .75rem; }
.ph-slots .on { background: #1D2B22; color: #fff; }
.ph-btn { display: block; text-align: center; padding: .7rem; border-radius: 999px; background: var(--star); color: var(--ink); font-weight: 600; }
.ph-check { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #17794B; color: #fff; display: grid; place-items: center; margin-bottom: 1rem; }
.ph-check svg { width: 26px; height: 26px; }
.s3 .ph-title { font-size: 1.35rem; margin: 0 0 .35rem; }
.ph-note { margin-top: 1rem; font-size: .75rem; color: var(--ink-3); }
.flow-side { display: grid; gap: 1rem; }
.notif { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; align-items: center; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px; padding: .9rem 1rem; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); opacity: 0; animation: flowShow 9s infinite both; animation-delay: 6.3s; }
.notif-icon { grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--night); color: var(--star); display: grid; place-items: center; }
.notif-icon svg { width: 18px; height: 18px; }
.notif b { display: block; font-size: .9375rem; font-weight: 600; }
.notif span { font-size: .8125rem; color: var(--ink-2); }
.notif em { grid-column: 2; justify-self: start; font-style: normal; font-size: .6875rem; font-weight: 500; padding: .2rem .55rem; border-radius: 999px; background: #E6F4EC; color: #1F6B45; margin-top: .3rem; }
.flow-steps { list-style: none; display: grid; gap: .4rem; counter-reset: f; }
.flow-steps li { counter-increment: f; display: grid; grid-template-columns: 1.6rem 1fr; column-gap: .65rem; align-items: center; padding: .55rem .7rem; border-radius: 14px; color: rgba(255,255,255,.62); animation: flowStep 9s infinite both; }
.flow-steps li::before { content: counter(f); grid-row: span 2; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; font-size: .75rem; }
.flow-steps li:nth-child(2) { animation-delay: 3s; }
.flow-steps li:nth-child(3) { animation-delay: 6s; }
.flow-steps b { font-weight: 500; color: #fff; font-size: .9375rem; }
.flow-steps span { font-size: .8125rem; }
@keyframes flowStep { 0%, 35%, 100% { background: transparent; } 4%, 31% { background: rgba(255,255,255,.14); } }
@media (max-width: 720px) {
    .flow { grid-template-columns: 1fr; justify-items: center; gap: 1.25rem; }
    .flow-side { width: 100%; max-width: 20rem; }
    .phone { width: 14rem; height: 26rem; }
}
@media (prefers-reduced-motion: reduce) {
    .screen, .notif, .flow-steps li { animation: none; }
    .s2, .notif { opacity: 1; }
}

/* Dienstkaarten met illustratie */
.svc-card { min-height: 0; padding: .75rem .75rem 1.4rem; gap: .35rem; }
.svc-art { margin-bottom: .9rem; }
.svc-art svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.svc-card h3, .svc-card p, .svc-card .svc-more { margin-left: .75rem; margin-right: .75rem; }
.svc-card h3 { margin-top: 0; }

/* Eigen identiteit: raster van templates met één eigen site */
.identity { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.identity-text h2 { margin-bottom: 1.25rem; }
.identity-text > p { color: var(--ink-2); font-size: 1.0625rem; max-width: 34rem; }
.identity-text .check { margin: 1.5rem 0 1.75rem; padding: 0; }
.grid-scene { background: #EEECF3; padding: 2rem 1.5rem 1.5rem; display: grid; grid-template-rows: 1fr auto; gap: 1.5rem; place-items: center; min-height: 26rem; }
.grid-scene::before, .grid-scene::after { display: none; }
.tpl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; width: 100%; max-width: 34rem; }
.tpl { position: relative; aspect-ratio: 4 / 3; background: #fff; border-radius: 8px; padding: 7%; display: grid; grid-template-rows: auto 1fr auto; gap: 8%; opacity: .75; filter: grayscale(1); }
.t-bar { height: 6px; width: 60%; border-radius: 3px; background: #D9D6E0; }
.t-hero { border-radius: 4px; background: #E4E1EA; }
.t-row, .own-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; }
.t-row span, .own-row span { height: 8px; border-radius: 3px; background: #ECEAF0; }
.tpl.own { z-index: 2; padding: 6%; gap: 6%; box-shadow: 0 25px 50px -18px rgba(18,16,22,.55), 0 0 0 1px rgba(18,16,22,.06); }
.tpl.own > * { opacity: 0; }
.tpl-scene.play .tpl.own { animation: ownIn 1.2s cubic-bezier(.2,.8,.2,1) .3s both, ownLift 6s ease-in-out 1.7s infinite; }
.tpl-scene.play .tpl.own > * { animation: fadeIn .6s ease .7s both; }
@keyframes ownIn { from { transform: scale(1); filter: grayscale(1); opacity: .75; } to { transform: scale(1.9); filter: none; opacity: 1; } }
@keyframes ownLift { 0%, 100% { transform: scale(1.9); filter: none; opacity: 1; } 50% { transform: scale(1.9) translateY(-3px); filter: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.own-bar { display: flex; justify-content: space-between; align-items: center; font-size: .34rem; font-weight: 600; color: var(--ink); }
.own-bar i { width: 18%; height: 5px; border-radius: 999px; background: var(--star); }
.own-hero { border-radius: 5px; padding: 8% 7%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6%; color: #fff;
  background: radial-gradient(70% 90% at 20% 20%, #B47AFF, transparent 70%), radial-gradient(60% 80% at 85% 80%, #FF7A4D, transparent 70%), #2A1F45; }
.own-hero b { font-family: var(--display); font-weight: 500; font-size: .5rem; letter-spacing: -0.03em; line-height: 1; }
.own-hero em { align-self: flex-start; font-style: normal; font-size: .28rem; font-weight: 600; background: #fff; color: var(--ink); padding: .12rem .3rem; border-radius: 999px; }
.own-row span { background: #F1E9FF; }
.own-tag { position: absolute; left: 50%; bottom: -14%; translate: -50% 0; white-space: nowrap; font-size: .3rem; font-weight: 600; background: var(--ink); color: #fff; padding: .12rem .35rem; border-radius: 999px; }
.tpl-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; font-size: .875rem; color: var(--ink-2); opacity: 0; }
.tpl-scene.play .tpl-legend { animation: fadeIn .6s ease 1.3s both; }
.tpl-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.tpl-legend i { width: 14px; height: 11px; border-radius: 3px; }
.lg-grey { background: #DCD9E2; }
.lg-own { background: radial-gradient(circle at 30% 30%, #B47AFF, #FF7A4D); }
@media (max-width: 960px) { .identity { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .tpl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tpl:nth-child(n+17) { display: none; } .grid-scene { min-height: 20rem; } }
@media (prefers-reduced-motion: reduce) {
    .tpl.own, .tpl-scene.play .tpl.own { animation: none; transform: scale(1.9); filter: none; opacity: 1; }
    .tpl.own > *, .tpl-legend { opacity: 1; animation: none !important; }
}
.plans-2x2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .plans-2x2 { grid-template-columns: 1fr; } }

/* Hulpregel in artikelen */
.hook { margin: 3rem 0 0; padding: 1.5rem 1.6rem; border-radius: var(--r); background: linear-gradient(135deg, #F3EEFF, #FFF1EA); }
.hook p { margin: 0 0 1rem; color: var(--ink-2); }
.hook strong { color: var(--ink); font-weight: 600; }
.hook .actions { gap: .6rem; }
.prose .hook a.btn-solid { color: #fff; }
.page-head h1 .face { display: inline-block; width: .82em; height: .82em; border-radius: 50%; object-fit: cover; vertical-align: -0.06em; margin-left: .12em; box-shadow: 0 0 0 4px var(--soft); }
.over-text { max-width: 44rem; }


/* Hero: foto wordt website, vier wisselende demo's */

.demo-scene { padding: 0; background: #F1EFF5; min-height: 32rem; }
.demo-scene::before, .demo-scene::after { display: none; }
.demos, .demo { position: absolute; inset: 0; }
.demo { opacity: 0; transition: opacity .6s ease; }
.demo.on { opacity: 1; }
.d-photo { position: absolute; inset: 16% 27% 30% 27%; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(18,16,22,.6); transition: inset 1s cubic-bezier(.65,0,.25,1), border-radius 1s cubic-bezier(.65,0,.25,1); }
.d-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 6s ease-out; }
.demo.grow .d-photo { inset: 0; border-radius: 0; }
.demo.grow .d-photo img { transform: scale(1); }
.d-caption { position: absolute; left: 0; right: 0; bottom: 17%; text-align: center; transition: opacity .4s ease, transform .4s ease; }
.d-caption b { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.d-caption span { font-size: .875rem; color: var(--ink-3); }
.demo.grow .d-caption { opacity: 0; transform: translateY(8px); }
.d-site { position: absolute; inset: 0; padding: 1.1rem; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.d-site::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,8,14,.72) 0%, rgba(10,8,14,.35) 45%, rgba(10,8,14,0) 75%); opacity: 0; transition: opacity .8s ease; }
.demo.build .d-site::before { opacity: 1; }
.d-nav { position: relative; display: flex; align-items: center; gap: 1.2rem; background: var(--d-bar, rgba(255,255,255,.95)); color: var(--d-ink, var(--ink)); border-radius: 12px; padding: .55rem .6rem .55rem 1rem; font-size: .75rem; opacity: 0; transform: translateY(-14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.d-logo { font-family: var(--d-font, var(--display)); font-size: .95rem; font-weight: 600; letter-spacing: -0.02em; margin-right: auto; }
.d-nav em { font-style: normal; font-weight: 600; background: var(--d-accent); color: var(--d-on, #fff); border-radius: 8px; padding: .4rem .75rem; }
.d-hero { position: relative; max-width: 24rem; padding: 0 .9rem 1.4rem; color: #fff; }
.d-hero h4 { font-family: var(--d-font, var(--display)); font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; margin-bottom: .7rem; }
.d-hero p { font-size: .9375rem; line-height: 1.45; color: rgba(255,255,255,.85); margin-bottom: 1rem; }
.d-cta { display: inline-block; background: var(--d-accent); color: var(--d-on, #fff); font-weight: 600; font-size: .875rem; padding: .65rem 1.1rem; border-radius: 999px; }
.d-hero h4, .d-hero p, .d-cta { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.demo.build .d-nav { opacity: 1; transform: none; transition-delay: .1s; }
.demo.build .d-hero h4 { opacity: 1; transform: none; transition-delay: .45s; }
.demo.build .d-hero p { opacity: 1; transform: none; transition-delay: .7s; }
.demo.build .d-cta { opacity: 1; transform: none; transition-delay: .95s; }
.d-kapper { --d-accent: #D9B88F; --d-on: #1B1612; --d-font: Georgia, 'Times New Roman', serif; --d-bar: rgba(27,22,18,.92); --d-ink: #F3EBE0; }
.d-hovenier { --d-accent: #3E7B47; --d-bar: rgba(255,255,255,.95); }
.d-fysio { --d-accent: #2B7FB8; --d-bar: rgba(255,255,255,.95); }
.d-label { position: absolute; right: 1rem; bottom: 1rem; font-size: .75rem; font-weight: 500; color: #fff; background: rgba(18,16,22,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: .3rem .7rem; border-radius: 999px; z-index: 3; }
.d-dots { position: absolute; left: 50%; bottom: 1.1rem; translate: -50% 0; display: flex; gap: .4rem; z-index: 3; }
.d-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); transition: width .3s, background .3s; }
.d-dots i.on { width: 18px; border-radius: 3px; background: #fff; }
@media (max-width: 720px) { .d-nav span { display: none; } .demo-scene { min-height: 26rem; } .d-photo { inset: 14% 14% 30% 14%; } }


/* Kapper: chic, redactioneel */
.d-kapper .d-site::before { background: linear-gradient(180deg, rgba(20,15,10,.55) 0%, rgba(20,15,10,.15) 40%, rgba(20,15,10,.75) 100%); }
.d-kapper .d-nav { background: none; color: #F3EBE0; border-radius: 0; border-bottom: 1px solid rgba(243,235,224,.3); padding: .4rem .2rem .8rem; justify-content: center; gap: 1.6rem; }
.d-kapper .d-logo { margin: 0 1rem; font-size: 1.25rem; font-style: italic; font-weight: 400; }
.d-kapper .d-nav em { background: none; border: 1px solid #D9B88F; color: #F3EBE0; border-radius: 999px; }
.d-kapper .d-hero { align-self: center; text-align: center; max-width: none; }
.d-kapper .d-hero small { display: block; font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: #D9B88F; margin-bottom: .6rem; opacity: 0; transition: opacity .6s ease .35s; }
.d-kapper.build .d-hero small { opacity: 1; }
.d-kapper .d-hero h4 { font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.8rem); }
.d-kapper .d-cta { background: none; border: 1px solid #D9B88F; color: #F3EBE0; }
/* Hovenier: vriendelijk, kaart op foto */
.d-hovenier .d-site::before { background: linear-gradient(0deg, rgba(10,20,12,.35), rgba(10,20,12,0) 50%); }
.d-hovenier .d-nav { align-self: center; border-radius: 999px; padding: .45rem .5rem .45rem 1.1rem; gap: 1.1rem; }
.d-hovenier .d-logo { margin-right: .8rem; color: #2F5D3A; font-weight: 700; }
.d-hovenier .d-nav em { border-radius: 999px; }
.d-hovenier .d-hero { background: #FBFAF5; color: #1F3A24; border-radius: 18px; padding: 1.2rem 1.3rem 1.3rem; max-width: 19rem; margin: 0 0 .2rem .2rem; box-shadow: 0 25px 50px -25px rgba(0,0,0,.6); opacity: 0; transform: translateY(20px); transition: opacity .6s ease .3s, transform .7s cubic-bezier(.2,.8,.2,1) .3s; }
.d-hovenier.build .d-hero { opacity: 1; transform: none; }
.d-hovenier .d-hero small { display: inline-block; font-size: .7rem; font-weight: 600; background: #E3F0DF; color: #2F5D3A; padding: .2rem .55rem; border-radius: 999px; margin-bottom: .6rem; }
.d-hovenier .d-hero h4 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); color: #1F3A24; }
.d-hovenier .d-hero p { color: #4D5B4F; font-size: .875rem; }
/* Fysio: gesplitst scherm */
.d-fysio.build .d-photo { inset: 0 0 0 46%; }
.d-fysio .d-site::before { display: none; }
.d-panel { position: absolute; inset: 0 54% 0 0; background: #F7FAFC; transform: translateX(-100%); transition: transform .8s cubic-bezier(.65,0,.25,1); }
.d-fysio.build .d-panel { transform: none; }
.d-fysio .d-nav { background: none; border-radius: 0; width: 46%; padding: .3rem .4rem; gap: .9rem; color: #0F2A3D; }
.d-fysio .d-logo i { font-style: normal; color: #2B7FB8; }
.d-fysio .d-nav em { display: none; }
.d-fysio .d-hero { width: 46%; color: #0F2A3D; padding: 0 1.2rem 1.6rem .4rem; }
.d-fysio .d-hero h4 { color: #0F2A3D; font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.d-fysio .d-hero ul { list-style: none; display: grid; gap: .4rem; margin-bottom: 1.1rem; font-size: .875rem; color: #3D5566; opacity: 0; transition: opacity .6s ease .7s; }
.d-fysio.build .d-hero ul { opacity: 1; }
.d-fysio .d-hero li::before { content: '✓'; color: #2B7FB8; font-weight: 700; margin-right: .5rem; }
.d-slot { position: absolute; right: 1.2rem; top: 1.2rem; background: #fff; border-radius: 14px; padding: .7rem .9rem; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); opacity: 0; transform: translateY(-10px); transition: opacity .5s ease 1.2s, transform .6s cubic-bezier(.2,.8,.2,1) 1.2s; }
.d-fysio.build .d-slot { opacity: 1; transform: none; }
.d-slot small { display: block; font-size: .7rem; color: #6B7F8C; }
.d-slot b { font-size: .9375rem; color: #0F2A3D; }
@media (max-width: 720px) { .d-fysio.build .d-photo { inset: 45% 0 0 0; } .d-panel { inset: 0 0 55% 0; } .d-fysio .d-nav, .d-fysio .d-hero { width: 100%; } .d-fysio .d-hero { padding-bottom: 0; } .d-fysio .d-site { justify-content: flex-start; gap: 1rem; } .d-slot { top: auto; bottom: 1.2rem; } .d-kapper .d-nav span { display: none; } }


.d-kapper .d-hero { align-self: stretch; text-align: left; padding: 0; }
.d-kapper .d-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding: 0 .4rem .4rem; }
.d-kapper .d-hero h4 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0; }
.d-kapper .d-cta { flex: none; }
.d-word { overflow: hidden; line-height: .78; margin: 0 -.2rem -.9rem; }
.d-word span { display: block; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(7rem, 17vw, 13rem); letter-spacing: -0.04em; color: rgba(243,235,224,.92); text-align: center; transform: translateY(100%); transition: transform 1.1s cubic-bezier(.2,.8,.2,1) .2s; }
.d-kapper.build .d-word span { transform: none; }


/* pagina die doorscrolt */
.d-page { position: absolute; inset: 0; transition: transform 1.3s cubic-bezier(.65,0,.25,1); }
.demo.scroll .d-page { transform: translateY(-100%); }
.d-page .d-site { position: absolute; inset: 0; }
.d-navspace { height: 2.6rem; }
.demo > .d-nav { position: absolute; top: 1.1rem; left: 1.1rem; right: 1.1rem; z-index: 4; }
.d-hovenier > .d-nav { left: 50%; right: auto; translate: -50% 0; }
.d-fysio > .d-nav { right: auto; width: calc(46% - 1.1rem); }
.d-sec { position: absolute; left: 0; right: 0; top: 100%; height: 100%; padding: 4.2rem 1.6rem 1.6rem; }
/* kapper tweede sectie */
.d-kapper .d-sec { background: #17120E; color: #F3EBE0; display: flex; flex-direction: column; justify-content: center; }
.k-intro { font-family: Georgia, serif; font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: 1.4rem; color: #D9B88F; }
.k-menu { list-style: none; display: grid; gap: .85rem; max-width: 30rem; }
.k-menu li { display: flex; align-items: baseline; gap: .6rem; font-size: 1rem; }
.k-menu i { flex: 1; border-bottom: 1px dotted rgba(243,235,224,.35); }
.k-menu b { font-family: Georgia, serif; font-weight: 400; }
.d-kapper.scroll > .d-nav { border-bottom-color: rgba(243,235,224,.15); }
/* hovenier tweede sectie */
.d-hovenier .d-sec { background: #F4F1E8; color: #1F3A24; }
.h-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.h-head h5 { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; letter-spacing: -0.03em; }
.h-head span { font-size: .8125rem; font-weight: 600; color: #3E7B47; }
.h-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: .7rem; height: calc(100% - 3.2rem); }
.h-grid figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; }
.h-grid img { width: 100%; height: 100%; object-fit: cover; }
.h-grid figcaption { position: absolute; left: .6rem; bottom: .6rem; background: #FBFAF5; border-radius: 10px; padding: .35rem .6rem; font-size: .75rem; color: #4D5B4F; }
.h-grid figcaption b { display: block; color: #1F3A24; font-size: .8125rem; }
/* fysio tweede sectie */
.d-fysio .d-sec { background: #F7FAFC; color: #0F2A3D; }
.d-fysio .d-sec h5 { font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.03em; margin-bottom: 1.1rem; }
.f-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: .9rem; }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.f-grid span { background: #fff; border: 1px solid #E1EAF0; border-radius: 14px; padding: 1rem; font-weight: 500; font-size: .9375rem; }
.f-grid span::before { content: ''; display: block; width: 26px; height: 26px; border-radius: 8px; background: #E3F0F9; margin-bottom: 1.4rem; }
.f-book { background: #0F2A3D; color: #fff; border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.f-book small { font-size: .75rem; color: #9FB6C6; }
.f-book div { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.f-book i { font-style: normal; font-size: .75rem; text-align: center; padding: .5rem; border-radius: 8px; background: rgba(255,255,255,.08); }
.f-book i.on { background: #2B7FB8; }
.f-book em { margin-top: auto; font-style: normal; font-size: .8125rem; font-weight: 600; text-align: center; background: #fff; color: #0F2A3D; border-radius: 999px; padding: .55rem; }
@media (max-width: 720px) { .h-grid { grid-template-columns: 1fr 1fr; } .h-grid figure:last-child { display: none; } .f-wrap { grid-template-columns: 1fr; } .f-book { display: none; } .d-fysio > .d-nav { width: auto; right: 1.1rem; } }

.demo > .d-nav { white-space: nowrap; } .d-hovenier .d-sec { padding-top: 5.2rem; }

/* eigen letters per demo */
.d-kapper { --d-font: 'Cormorant Garamond', Georgia, serif; }
.d-kapper .d-word span, .d-kapper .k-intro, .d-kapper .k-menu b, .d-kapper .d-logo { font-family: 'Cormorant Garamond', Georgia, serif; }
.d-kapper .d-hero h4 { font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.d-hovenier { --d-font: 'Fraunces', Georgia, serif; --d-accent: #4C7A3A; }
.d-hovenier > .d-nav { background: #FBF7EC; }
.d-hovenier .d-logo { font-family: 'Fraunces', serif; }
.d-hovenier .d-hero { background: #FBF7EC; border-radius: 26px 26px 26px 6px; }
.d-hovenier .d-hero h4, .d-hovenier .h-head h5 { font-family: 'Fraunces', serif; font-weight: 600; letter-spacing: -0.02em; }
.d-hovenier .d-sec { background: #EFE8D6; }
.d-hovenier .h-grid figure { border-radius: 22px 22px 22px 6px; }
/* Noor: twee kolommen met boogfoto */
.k-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.6rem; align-items: center; height: 100%; }
.k-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid rgba(243,235,224,.15); font-size: .8125rem; color: rgba(243,235,224,.7); }
.k-foot em { font-style: normal; border: 1px solid #D9B88F; color: #F3EBE0; padding: .45rem .9rem; border-radius: 999px; }
.k-arch { margin: 0; position: relative; height: 82%; border-radius: 999px 999px 10px 10px; overflow: hidden; border: 1px solid rgba(217,184,143,.4); padding: 6px; }
.k-arch img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 6px 6px; }
.k-arch figcaption { position: absolute; bottom: 1rem; left: 50%; translate: -50% 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; color: #F3EBE0; }
/* Fysio: meer detail */
.f-grid span { display: block; font-size: .75rem; color: #5B7182; line-height: 1.35; }
.f-grid span b { display: block; font-size: .9375rem; color: #0F2A3D; margin-bottom: .2rem; }
.f-grid span::before { margin-bottom: 1rem; background: #E3F0F9 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B7FB8' stroke-width='2' stroke-linecap='round'><path d='M12 4v16M4 12h16'/></svg>") center/14px no-repeat; }
.f-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1rem; font-size: .8125rem; color: #3D5566; }
.f-trust span::before { content: '✓'; color: #2B7FB8; font-weight: 700; margin-right: .4rem; }
/* Techniek: industrieel */
.d-techniek { --d-accent: #FFD400; --d-on: #14171C; --d-font: 'Space Grotesk', sans-serif; }
.d-techniek .d-site::before { background: linear-gradient(90deg, rgba(14,16,20,.88) 0%, rgba(14,16,20,.55) 50%, rgba(14,16,20,.1) 85%); }
.d-techniek > .d-nav { background: #14171C; color: #E8EAED; border-radius: 6px; border-bottom: 2px solid #FFD400; }
.d-techniek .d-logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: .02em; font-size: .85rem; }
.d-techniek .d-logo i { font-style: normal; color: #FFD400; margin: 0 .15rem; }
.d-techniek .d-nav em { border-radius: 4px; }
.d-techniek .d-hero { max-width: 27rem; }
.d-techniek .d-hero h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.t-stats { display: flex; gap: 1.4rem; margin: .2rem 0 1.1rem; opacity: 0; transition: opacity .6s ease .7s; }
.d-techniek.build .t-stats { opacity: 1; }
.t-stats span { font-size: .75rem; color: rgba(255,255,255,.7); border-left: 2px solid #FFD400; padding-left: .6rem; }
.t-stats b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.25rem; color: #fff; }
.t-ctas { display: flex; gap: .6rem; align-items: center; }
.d-techniek .d-cta { border-radius: 4px; }
.t-ghost { font-size: .875rem; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,.5); padding: .6rem 1rem; border-radius: 4px; opacity: 0; transition: opacity .6s ease 1s; }
.d-techniek.build .t-ghost { opacity: 1; }
.d-techniek .d-sec { background: #F2F3F5; color: #14171C; }
.t-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; }
.d-techniek .d-sec h5 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.8rem); text-transform: uppercase; margin-bottom: .8rem; }
.t-chips { display: flex; gap: .4rem; margin-bottom: .8rem; }
.t-chips i { font-style: normal; font-size: .75rem; padding: .3rem .7rem; border: 1px solid #D5D8DD; border-radius: 4px; }
.t-chips i.on { background: #14171C; color: #fff; border-color: #14171C; }
.t-jobs { list-style: none; display: grid; gap: .5rem; }
.t-jobs li { display: flex; align-items: center; gap: .9rem; background: #fff; border-left: 3px solid #FFD400; border-radius: 4px; padding: .75rem .9rem; font-size: .8125rem; color: #5A616B; }
.t-jobs b { color: #14171C; margin-right: auto; font-size: .9375rem; }
.t-jobs em { font-style: normal; font-size: .6875rem; font-weight: 700; background: #FFD400; color: #14171C; padding: .15rem .45rem; border-radius: 3px; }
.t-card { background: #14171C; color: #fff; border-radius: 6px; padding: 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.t-card small { font-size: .75rem; color: #FFD400; }
.t-card b { font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; line-height: 1.2; }
.t-card em { margin-top: auto; font-style: normal; font-weight: 700; font-size: .8125rem; background: #FFD400; color: #14171C; text-align: center; padding: .6rem; border-radius: 4px; }
@media (max-width: 720px) { .k-cols, .t-cols { grid-template-columns: 1fr; } .k-arch, .t-card { display: none; } .t-jobs li span { display: none; } }

.d-techniek .d-sec { padding-top: 5rem; }

.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; }

/* Demo's op mobiel: schaal en ruimte */
@media (max-width: 720px) {
    .demo-scene { min-height: 31rem; }
    .d-photo { inset: 9% 15% 33% 15%; }
    .d-caption { bottom: 13%; }
    .d-caption b { font-size: 1.2rem; }
    .demo > .d-nav { top: .75rem; left: .75rem; right: .75rem; font-size: .75rem; }
    .d-site { padding: .75rem; }
    .d-sec { padding: 4rem 1.1rem 1.2rem; }
    .d-hero h4 { font-size: 1.75rem; }
    /* kapper */
    .d-kapper .d-row { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 0 .2rem .6rem; }
    .d-kapper .d-hero h4 { font-size: 1.5rem; }
    .d-kapper .d-cta { padding: .5rem .9rem; font-size: .8125rem; }
    .d-word { margin-bottom: -.4rem; }
    .d-word span { font-size: 5.6rem; }
    .k-intro { font-size: 1.3rem; margin-bottom: 1rem; }
    .k-menu { gap: .65rem; }
    .k-menu li { font-size: .9375rem; }
    /* hovenier */
    .d-hovenier .d-hero { max-width: none; padding: 1rem 1.1rem 1.1rem; margin: 0; }
    .d-hovenier .d-hero h4 { font-size: 1.45rem; margin-bottom: .45rem; }
    .d-hovenier .d-hero p { font-size: .8125rem; margin-bottom: .75rem; }
    .d-hovenier .d-sec { padding-top: 4.4rem; }
    .h-grid { height: calc(100% - 3rem); }
    /* fysio */
    .d-fysio .d-hero h4 { font-size: 1.7rem; }
    .d-fysio .d-hero ul { margin-bottom: .8rem; }
    .d-slot { right: .75rem; bottom: .75rem; padding: .55rem .75rem; }
    .d-fysio .d-sec h5 { font-size: 1.35rem; margin-bottom: .8rem; }
    .f-grid { gap: .45rem; }
    .f-grid span { padding: .7rem; font-size: .6875rem; }
    .f-grid span b { font-size: .8125rem; }
    .f-grid span::before { width: 20px; height: 20px; margin-bottom: .5rem; background-size: 11px; }
    .f-trust { display: none; }
    /* techniek */
    .d-techniek .d-hero h4 { font-size: 1.55rem; }
    .t-stats { gap: .8rem; margin-bottom: .9rem; }
    .t-stats b { font-size: 1.05rem; }
    .t-stats span { font-size: .6875rem; }
    .t-ghost { display: none; }
    .d-techniek .d-sec { padding-top: 4.4rem; }
    .d-techniek .d-sec h5 { font-size: 1.2rem; }
    .t-chips { flex-wrap: wrap; }
    .t-chips i:nth-child(n+4) { display: none; }
    .t-jobs li { gap: .5rem; }
    .t-jobs b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
    .t-jobs em { flex: none; }
}
@media (max-width: 720px) {
    .d-hovenier > .d-nav { left: .75rem; right: .75rem; translate: none; justify-content: space-between; }
}
@media (max-width: 720px) { .d-dots { bottom: .45rem; } }
@media (max-width: 720px) {
    .tpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 20rem; }
    .tpl:nth-child(n+13) { display: none; }
    .tpl:nth-child(-n+12) { display: grid; }
}

/* Minder ruimte tussen icoon en titel in de kaarten op mobiel */
@media (max-width: 720px) {
    .specs-bento .card { min-height: 0; gap: .35rem; }
    .specs-bento .card h3 { margin-top: .75rem; }
    .specs-bento .card.dark .speed-big { margin-top: .5rem; }
}
/* Meer ruimte tussen 'vanaf' en het bedrag */
.price small.pre { margin-right: .7rem; }
@media (max-width: 720px) {
    .feature-top { margin-bottom: .75rem; }
    .contact-card .icon { margin-bottom: .9rem; }
    .contact-card { padding: 1.5rem; }
    .svc-art { margin-bottom: .7rem; }
    .steps li::before { margin-bottom: .2rem; }
    .step-art { margin-bottom: .8rem; }
}
.specs-art > div { padding: .75rem .75rem 1.5rem; }
.specs-art h3, .specs-art p { margin-left: .75rem; margin-right: .75rem; }
.spec-art { margin-bottom: 1.25rem; }
.spec-art svg { display: block; width: 100%; height: auto; border-radius: 16px; }
@media (min-width: 721px) { .hero h1 { max-width: none; } .hero h1 .dim { display: block; } }