/* ==========================================================================
   Leadbundel — Secties
   Elke sectie heeft bewust een eigen layoutlogica.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 72px));
  padding-bottom: clamp(48px, 6vw, 80px);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: saturate(0.55) contrast(1.06);
}
.hero__grid-lines {
  position: absolute;
  inset: -10% -2% 0;
  background-image:
    linear-gradient(to right, rgba(243,241,236,.055) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}
.hero__glow {
  position: absolute;
  width: 62vw; height: 62vw;
  max-width: 820px; max-height: 820px;
  right: -14vw; top: -18vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,68,255,.30) 0%, rgba(43,68,255,.07) 42%, transparent 70%);
  filter: blur(20px);
}
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,12,14,.94) 0%, rgba(11,12,14,.72) 46%, rgba(11,12,14,.35) 100%); }
.hero__scrim-b { position: absolute; inset: auto 0 0 0; height: 32%; background: var(--grad-fade-ink); }

.hero__inner { position: relative; width: 100%; }
.hero__layout { display: grid; gap: clamp(48px, 6vw, 72px); align-items: center; }
@media (min-width: 1024px) {
  .hero__layout { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(32px, 4vw, 64px); }
}

.hero__copy { display: grid; gap: var(--space-5); }
.hero__title { font-size: clamp(2.125rem, 4.9vw, 4.5rem); }
.hero__lead { font-size: clamp(1rem, 1.35vw, 1.1875rem); color: var(--text-muted-inv); max-width: 44ch; line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.hero__note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted-inv);
  margin-top: var(--space-2);
}

/* Zwevende interface-stapel */
.hero__stage {
  position: relative;
  perspective: 1600px;
  min-height: clamp(320px, 44vw, 620px);
}
.stack { position: absolute; inset: 0; transform-style: preserve-3d; }
.stack__pane {
  position: absolute;
  width: 82%;
  transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out);
}
.stack__pane--a { top: 0; left: 0; width: 78%; z-index: 3; }
.stack__pane--b { top: 25%; right: 0; width: 82%; z-index: 2; }
.stack__pane--c { bottom: 0; left: 6%; width: 68%; z-index: 1; }

@media (max-width: 1023px) {
  .hero { min-height: auto; }
  .hero__stage { min-height: 0; margin-top: var(--space-2); }
  .stack { position: static; display: grid; gap: var(--space-4); }
  .stack__pane { position: static; width: 100%; }
  .stack__pane--c { display: none; }
}
@media (max-width: 560px) {
  .stack__pane--b { display: none; }
}

.hero__foot {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-inv-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.hero__foot-items { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.hero__foot-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.8125rem;
  color: var(--text-muted-inv);
}
.scroll-cue {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted-inv);
}
.scroll-cue__line { position: relative; width: 1px; height: 34px; background: var(--border-inv); overflow: hidden; }
.scroll-cue__line::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 12px; background: var(--accent);
  animation: cue 2.2s var(--ease-in-out) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(340%); } }
@media (min-width: 1024px) { .scroll-cue { display: flex; } }

/* --------------------------------------------------------------------------
   Manifest — redactionele statement-sectie
   -------------------------------------------------------------------------- */

.manifest__statement {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.2vw, 3.75rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-width: 20ch;
  text-wrap: balance;
}
.manifest__layout { display: grid; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 1000px) {
  .manifest__layout { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(56px, 7vw, 120px); align-items: start; }
  .manifest__aside { position: sticky; top: calc(var(--header-h) + 48px); }
}
.manifest__aside { display: grid; gap: var(--space-5); }

/* --------------------------------------------------------------------------
   Gratis eerste ontwerp — 3-fasen transformatie
   -------------------------------------------------------------------------- */

.transform__layout { display: grid; gap: clamp(40px, 5vw, 64px); }
@media (min-width: 1060px) {
  .transform__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
}
.transform__copy { display: grid; gap: var(--space-5); }

.phases { display: grid; gap: 0; margin-top: var(--space-2); border-top: 1px solid var(--rule); }
.phase {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  width: 100%;
  color: var(--fg-muted);
  transition: color var(--dur-ui) var(--ease-out);
}
.phase:hover { color: var(--fg); }
.phase[aria-selected="true"] { color: var(--fg); }
.phase__num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .1em; padding-top: 4px; }
.phase[aria-selected="true"] .phase__num { color: var(--accent-text); }
.phase__title { display: block; font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.phase__text { display: block; font-size: var(--fs-small); line-height: 1.6; margin-top: 6px; }
.phase__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.phase[aria-selected="true"] .phase__bar { animation: phase-progress 7s linear both; }
@keyframes phase-progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .phase[aria-selected="true"] .phase__bar { animation: none; transform: scaleX(1); }
}

.transform__stage { position: relative; }
.transform__panel { display: none; }
.transform__panel.is-active { display: block; animation: panel-in 560ms var(--ease-out) both; }
.transform__tag {
  position: absolute;
  top: -14px; left: 18px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.transform__tag--muted { background: var(--fg); color: var(--bg); }

/* --------------------------------------------------------------------------
   Werkwijze — tijdlijn
   -------------------------------------------------------------------------- */

.timeline { position: relative; }
.timeline__line {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--rule);
  display: none;
}
.timeline__progress { position: absolute; inset: 0 auto auto 0; width: 1px; background: var(--accent);
  height: 100%; transform: scaleY(0); transform-origin: top; will-change: transform; }
@media (min-width: 900px) {
  .timeline__line { display: block; }
  .timeline { padding-left: 0; }
}
.timeline__item {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--rule);
}
.timeline__item:first-child { border-top: 1px solid var(--rule); }
@media (min-width: 900px) {
  .timeline__item {
    grid-template-columns: 96px minmax(0, .95fr) minmax(0, 1.05fr);
    gap: var(--space-6);
    padding: var(--space-7) 0 var(--space-7) var(--space-6);
    align-items: start;
  }
}
.timeline__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .1em; color: var(--accent-text); }
.timeline__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.015em; }
.timeline__text { font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.7; }
.timeline__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Pijnpunt → oplossing
   -------------------------------------------------------------------------- */

.diagnose { display: grid; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 1000px) {
  .diagnose { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(48px, 6vw, 104px); align-items: start; }
  .diagnose__aside { position: sticky; top: calc(var(--header-h) + 48px); display: grid; gap: var(--space-5); }
}
.symptoms { border-top: 1px solid var(--rule); }
.symptom {
  display: grid;
  gap: 10px;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .symptom { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: var(--space-5); align-items: center; }
}
.symptom__problem { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.55; }
.symptom__problem svg { flex: none; margin-top: 3px; opacity: .5; }
.symptom__arrow { display: none; color: var(--accent-text); }
@media (min-width: 720px) { .symptom__arrow { display: block; } }
.symptom__fix { font-size: var(--fs-small); font-weight: 500; color: var(--fg); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Capabilities — asymmetrisch raster
   -------------------------------------------------------------------------- */

.caps { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
@media (min-width: 760px) { .caps { grid-template-columns: repeat(6, 1fr); } }
.cap {
  background: var(--bg);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 208px;
  transition: background-color var(--dur-ui) var(--ease-out);
}
.cap:hover { background: color-mix(in srgb, var(--fg) 4%, var(--bg)); }
@media (min-width: 760px) {
  .cap--span-2 { grid-column: span 2; }
  .cap--span-3 { grid-column: span 3; }
  .cap--span-4 { grid-column: span 4; }
  /* De volle-breedte cel wordt horizontaal: anders staat er te veel lucht in. */
  .cap--span-6 {
    grid-column: span 6;
    flex-direction: row;
    align-items: center;
    gap: var(--space-5) var(--space-7);
    min-height: 0;
    padding-block: clamp(24px, 2.4vw, 32px);
  }
  .cap--span-6 .cap__icon { margin-bottom: 0; }
  .cap--span-6 .cap__title { flex: 0 0 clamp(160px, 18vw, 240px); }
  .cap--span-6 .cap__text { flex: 1; max-width: 62ch; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .cap--span-4 { grid-column: span 6; }
  .cap--span-2 { grid-column: span 3; }
  .cap--span-6 { flex-direction: column; align-items: flex-start; }
  .cap--span-6 .cap__title { flex: none; }
}
.cap__icon { color: var(--accent-text); margin-bottom: var(--space-2); }
.cap__title { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.01em; }
.cap__text { font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.65; max-width: 46ch; }

/* --------------------------------------------------------------------------
   Prijzen
   -------------------------------------------------------------------------- */

.plans { display: grid; gap: var(--space-5); align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; } }
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(28px, 3.2vw, 44px);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  position: relative;
}
@media (min-width: 900px) {
  .plan { border: 0; border-right: 1px solid var(--rule); border-radius: 0; }
  .plan:last-child { border-right: 0; }
}
.plan--featured {
  background: var(--ink);
  color: var(--text-inv);
  /* Volledige donkere context, anders valt een knop met --bg als tekstkleur weg. */
  --bg: var(--ink);
  --fg: var(--text-inv);
  --fg-muted: var(--text-muted-inv);
  --rule: var(--border-inv);
  --card: var(--ink-2);
  --accent-text: #6E82FF;
}
.plan__flag {
  position: absolute; top: 0; right: 0;
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.plan__name { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -.02em; }
.plan__for { font-size: 0.875rem; color: var(--fg-muted); line-height: 1.55; min-height: 2.6em; }
.plan__price { display: flex; align-items: baseline; gap: 8px; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.plan__price-from { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.plan__price-value { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -.02em; }
.plan__price-note { font-size: 0.75rem; color: var(--fg-muted); }
.plan__features { display: grid; gap: 11px; padding-top: var(--space-2); }
.plan__features li { display: flex; gap: 11px; font-size: 0.875rem; line-height: 1.5; color: var(--fg-muted); }
.plan__features svg { flex: none; margin-top: 3px; color: var(--accent-text); }
.plan__cta { margin-top: auto; padding-top: var(--space-4); }

.addons { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
@media (min-width: 700px) { .addons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .addons { grid-template-columns: repeat(4, 1fr); } }
.addon { background: var(--bg); padding: var(--space-6); display: grid; gap: 8px; align-content: start; }
.addon__name { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.01em; }
.addon__price { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .08em; color: var(--accent-text); }
.addon__text { font-size: 0.875rem; color: var(--fg-muted); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Paginakop (binnenpagina's)
   -------------------------------------------------------------------------- */

.pagehead {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(64px, 9vw, 128px));
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
}
.pagehead__glow {
  position: absolute;
  z-index: -1;
  width: 54vw; height: 54vw;
  max-width: 700px; max-height: 700px;
  right: -12vw; top: -22vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,68,255,.24) 0%, rgba(43,68,255,.05) 45%, transparent 70%);
}
.pagehead__lines {
  position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(to right, rgba(243,241,236,.05) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.pagehead__layout { display: grid; gap: var(--space-6); }
@media (min-width: 960px) {
  .pagehead__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(48px, 6vw, 96px); align-items: end; }
}
.pagehead__title { font-size: var(--fs-display-l); max-width: 16ch; }
.pagehead__lead { font-size: var(--fs-body-l); color: var(--text-muted-inv); max-width: 46ch; line-height: 1.6; }
.pagehead__foot {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-inv-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
}
.pagehead__fact { display: grid; gap: 4px; }
.pagehead__fact dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted-inv); }
.pagehead__fact dd { font-size: var(--fs-small); }

.breadcrumbs { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-inv); margin-bottom: var(--space-5); }
.breadcrumbs a { display: inline-block; padding-block: 5px; }
.breadcrumbs a:hover { color: var(--text-inv); }
.breadcrumbs span { opacity: .4; }

/* --------------------------------------------------------------------------
   Afsluitende CTA
   -------------------------------------------------------------------------- */

.endcta { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(88px, 11vw, 152px); }
.endcta__glow {
  position: absolute; z-index: -1;
  left: 50%; top: 50%;
  width: 90vw; height: 60vw;
  max-width: 1100px; max-height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(43,68,255,.22) 0%, rgba(43,68,255,.05) 40%, transparent 68%);
}
.endcta__inner { display: grid; gap: var(--space-6); justify-items: center; text-align: center; }
.endcta__title { font-size: clamp(2.25rem, 6vw, 5.25rem); max-width: 15ch; }
.endcta__lead { color: var(--text-muted-inv); max-width: 48ch; font-size: var(--fs-body-l); line-height: 1.6; }
.endcta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); }
.endcta__note { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-inv); margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--ink); color: var(--text-inv); padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(32px, 4vw, 48px); }
.footer__top { display: grid; gap: var(--space-7); padding-bottom: clamp(48px, 6vw, 72px); border-bottom: 1px solid var(--border-inv-soft); }
@media (min-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); }
}
.footer__brand { display: grid; gap: var(--space-4); align-content: start; max-width: 34ch; }
.footer__tagline { font-size: var(--fs-small); color: var(--text-muted-inv); line-height: 1.65; }
.footer__col-title { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted-inv); margin-bottom: var(--space-4); }
.footer__list { display: grid; gap: 12px; }
/* Minstens 24 px hoog: op een telefoon is 18 px te priegelig om te raken. */
.footer__list a { display: inline-block; padding-block: 4px; font-size: var(--fs-small); color: var(--text-inv); opacity: .78; transition: opacity var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.footer__list a:hover { opacity: 1; color: #fff; }
.footer__bottom {
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-muted-inv);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer__legal a { display: inline-block; padding-block: 4px; }
.footer__legal a:hover { color: var(--text-inv); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact__layout { display: grid; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 1000px) {
  .contact__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(48px, 6vw, 104px); align-items: start; }
  .contact__aside { position: sticky; top: calc(var(--header-h) + 48px); }
}
.contact__aside { display: grid; gap: var(--space-6); }
.contact__panel {
  padding: clamp(28px, 3vw, 44px);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.contact-methods { display: grid; gap: var(--space-4); }
.contact-method { display: grid; gap: 3px; }
.contact-method dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.contact-method dd { font-size: var(--fs-body); }
/* De mail- en telefoonlink zijn op mobiel een echte aanraakzone (>=24px hoog),
   niet alleen de hoogte van de regel zelf. */
.contact-method dd a { display: inline-flex; align-items: center; min-height: 28px; }
.contact-method a:hover { color: var(--accent-text); }

/* Formuliersucces */
.form-success {
  display: none;
  gap: var(--space-4);
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
}
.form-success.is-visible { display: grid; }
.form-success__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.015em; }
.form-success__text { font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.65; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.notfound {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: var(--header-h);
  /* De gloed steekt buiten het kader; zonder clip levert dat horizontale scroll op. */
  overflow: hidden;
  isolation: isolate;
}
.notfound__inner { display: grid; gap: var(--space-5); justify-items: center; }
.notfound__code { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .2em; color: var(--accent-text); }

/* --------------------------------------------------------------------------
   Prose (privacyverklaring en andere lopende tekst)
   -------------------------------------------------------------------------- */
.prose { display: grid; gap: clamp(36px, 4vw, 56px); max-width: 72ch; }
.prose__block { display: grid; gap: var(--space-3); }
.prose__block h2 { max-width: 34ch; }
.prose p { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.75; }
.prose p + p { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   Mobiele bijstellingen die niet uit het desktopontwerp volgen
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Twee knoppen naast elkaar worden op een telefoon ongelijk en te smal. */
  .hero__actions,
  .stage__actions,
  .analysis__form,
  .endcta__actions { display: grid; gap: var(--space-3); }
  .hero__actions .btn,
  .stage__actions .btn,
  .analysis__form .btn,
  .endcta__actions .btn { width: 100%; }

  /* Mono-labels: iets minder spatiëring, anders breken ze te snel. */
  .hero__note,
  .endcta__note { letter-spacing: .06em; }

}

/* --------------------------------------------------------------------------
   Paginakop met sfeerbeeld
   Het beeld veegt open, zoomt uit van ontkleurd naar vol en drijft daarna heel
   traag verder. Elke pagina beweegt vanuit een ander punt, zodat geen twee
   koppen hetzelfde aanvoelen.
   -------------------------------------------------------------------------- */

.pagehead--media {
  padding-top: calc(var(--header-h) + clamp(88px, 11vw, 168px));
  padding-bottom: clamp(72px, 9vw, 120px);
}

.pagehead__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: var(--ink);
  transform: translate3d(0, var(--ph-scroll, 0px), 0);
  animation: ph-reveal 1300ms var(--ease-out) both;
}
.pagehead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ph-focus, center 46%);
  opacity: .82;
  transform-origin: var(--ph-origin, 50% 50%);
  /* Alleen de intro-beweging, geen eindeloze drift meer. Dit beeld is
     schermvullend; het permanent op een eigen GPU-laag houden en blijven
     transformeren kostte op een machine met een zuinige videochip merkbaar
     veel, juist op de subpagina's waar het shaderveld tegelijk draait. De
     drift van 48 seconden was daarbij nauwelijks waarneembaar.
     will-change staat er daarom ook niet meer: dat hoort alleen bij iets dat
     werkelijk blijft bewegen. */
  animation: ph-settle 2200ms var(--ease-out) both;
}

@keyframes ph-reveal {
  from { clip-path: inset(0 0 46% 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes ph-settle {
  from { transform: scale(1.16); filter: saturate(.3) contrast(1.08); }
  to   { transform: scale(1); filter: saturate(1) contrast(1); }
}
@keyframes ph-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(var(--ph-x, -1%), var(--ph-y, -1%), 0); }
}

/* Links donker genoeg voor de kop, rechts blijft de scène zichtbaar. */
.pagehead__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    /* Links een gesloten band voor de typografie, rechts blijft de foto open. */
    linear-gradient(97deg, rgba(11,12,14,.95) 0%, rgba(11,12,14,.9) 26%, rgba(11,12,14,.6) 47%,
                    rgba(11,12,14,.12) 74%, rgba(11,12,14,.3) 100%),
    /* Onderin vrijwel dicht: daar staan de kleine labels, die moeten
       hun contrast houden ongeacht wat er op de foto gebeurt. */
    linear-gradient(180deg, rgba(11,12,14,.6) 0%, rgba(11,12,14,.08) 24%,
                    rgba(11,12,14,.72) 62%, rgba(11,12,14,.94) 82%, var(--ink) 96%);
}

/* Op smalle schermen loopt de tekst over de volle breedte: dan verticaal dekken. */
@media (max-width: 959px) {
  .pagehead__veil {
    background: linear-gradient(180deg, rgba(11,12,14,.8) 0%, rgba(11,12,14,.52) 30%,
                                rgba(11,12,14,.86) 68%, rgba(11,12,14,.96) 86%, var(--ink) 100%);
  }
}

/* Alle tekst in één kolom linksonder, zodat het beeld rechts ruimte houdt. */
@media (min-width: 960px) {
  .pagehead--media .pagehead__layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: min(62%, 720px);
    gap: var(--space-5);
    align-items: start;
  }
  .pagehead--media .pagehead__lead { max-width: 46ch; }
}

/* Met beeld erachter is het raster te veel; de gloed blijft, subtieler. */
.pagehead--media .pagehead__lines { display: none; }
.pagehead--media .pagehead__glow { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .pagehead__media,
  .pagehead__media img { animation: none; transform: none; clip-path: none; }
  .pagehead__media img { filter: none; }
}

/* Bedankpagina: direct contact meteen binnen bereik, niet pas in de footer. */
.thanks__direct {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
.thanks__direct .mono { color: var(--fg-muted); }
.thanks__direct a {
  font-size: var(--fs-body-l);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 2px;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.thanks__direct a:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); }

/* Introductieprijs: de oude prijs doorgehaald, ingehouden. Geen rode badges,
   geen percentages — de reden staat erboven, dat is genoeg. */
.plan__price-intro {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.plan__price-was,
.rate__was {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--fg-muted);
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--fg-muted) 70%, transparent);
}

/* Reden bij de introductieprijs. Eén regel, geen kader, geen kleur. */
.plans__note {
  margin-bottom: clamp(28px, 3.5vw, 44px);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   Ontwerpen uitgelicht (/websites/)
   Elk ontwerp groot, met de redenering en het palet ernaast. Om en om, zodat
   de pagina niet als een lijst leest.
   -------------------------------------------------------------------------- */

.designs { display: grid; gap: clamp(64px, 8vw, 128px); }
.design { display: grid; gap: clamp(24px, 3.5vw, 44px); align-items: center; }
@media (min-width: 1000px) {
  .design { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: clamp(40px, 5vw, 80px); }
  .design:nth-child(even) .design__frame { order: 2; }
}
.design__frame { min-width: 0; }
.design__meta { display: grid; gap: 6px; align-content: center; }
.design__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-top: 8px;
}
.design__sector {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.design__title {
  margin-top: var(--space-4);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -.01em;
}
.design__text { font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.7; max-width: 46ch; }
.design__palette {
  display: grid;
  gap: 8px;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}
.design__swatch {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--fg-muted);
}
.design__swatch i {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 3px;
  border: 1px solid var(--rule);
}