/* zakelijk.html */
/* ── HERO ─────────────────────────────────────────────── */
    .zak-hero {
      background: #264653;
      padding-top: calc(80px + clamp(var(--space-16), 8vw, var(--space-32)));
      padding-bottom: clamp(var(--space-16), 8vw, var(--space-32));
      overflow: hidden;
      position: relative;
    }

    .zak-hero::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -10%;
      width: 60vw;
      height: 60vw;
      max-width: 800px;
      background: radial-gradient(circle, var(--teal-900) 0%, transparent 60%);
      pointer-events: none;
    }

    .zak-hero__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(var(--space-12), 6vw, var(--space-24));
      align-items: center;
    }

    .zak-hero__eyebrow {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--teal-400);
      margin-bottom: var(--space-5);
      display: block;
    }

    .zak-hero__title {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
      font-weight: var(--weight-medium);
      line-height: var(--leading-tight);
      letter-spacing: var(--tracking-tight);
      color: var(--neutral-0);
      margin-bottom: var(--space-6);
    }

    .zak-hero__title em {
      font-style: italic;
      background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 40%, #c8f5f2 47%, #f0fffe 50%, #c8f5f2 53%, var(--color-primary) 60%, var(--color-primary) 100%);
      background-size: 300% 100%;
      background-position: 100% 0%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: vsn-glow-sweep 10s ease-in-out infinite;
      padding-inline: 0.08em;
    }

    .zak-hero__intro {
      font-size: var(--text-md);
      font-weight: var(--weight-light);
      line-height: var(--leading-relaxed);
      color: var(--neutral-400);
      max-width: 46ch;
      margin-bottom: var(--space-10);
    }

    /* hero visual uses inline styles */

    /* ── WHY VITALSCAN ────────────────────────────────────── */
    .why {
      background: var(--color-surface);
    }

    .why__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
      margin-top: var(--space-12);
    }

    .why-card {
      padding: var(--space-8);
      border-radius: var(--radius-2xl);
      background: var(--color-surface-subtle);
      border: 1px solid var(--color-border);
    }

    .why-card__num {
      font-family: 'Montserrat', sans-serif;
      font-size: 5rem;
      font-weight: var(--weight-medium);
      color: var(--teal-100);
      line-height: 1;
      margin-bottom: var(--space-3);
    }

    .why-card__title {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-xl);
      font-weight: var(--weight-medium);
      color: var(--color-text-primary);
      margin-bottom: var(--space-3);
    }

    .why-card__body {
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--color-text-secondary);
      line-height: var(--leading-relaxed);
    }

    /* ── PROGRAMS ─────────────────────────────────────────── */
    .programs {
      background: var(--color-surface-subtle);
    }

    .programs__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-6);
      margin-top: var(--space-12);
    }

    .program-card {
      background: var(--color-surface);
      border-radius: var(--radius-2xl);
      border: 1px solid var(--color-border);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal);
    }

    .program-card:hover {
      box-shadow: var(--shadow-xl);
      transform: translateY(-4px);
    }

    .program-card__header {
      padding: var(--space-8) var(--space-8) var(--space-6);
      background: var(--teal-50);
      border-bottom: 1px solid var(--teal-100);
    }

    .program-card__tag {
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      letter-spacing: var(--tracking-widest);
      text-transform: uppercase;
      color: var(--teal-600);
      margin-bottom: var(--space-3);
    }

    .program-card__title {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-2xl);
      font-weight: var(--weight-medium);
      color: var(--color-text-primary);
      line-height: var(--leading-snug);
    }

    .program-card__body {
      padding: var(--space-6) var(--space-8) var(--space-8);
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
    }

    .program-card__desc {
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--color-text-secondary);
      line-height: var(--leading-relaxed);
    }

    .program-card__includes {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .program-card__include {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--color-text-secondary);
    }

    .program-card__include::before {
      content: '';
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--teal-100);
      border: 1.5px solid var(--teal-300);
      flex-shrink: 0;
      margin-top: 1px;
      background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='%2327857f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
    }

    /* ── PROCESS ──────────────────────────────────────────── */
    .process {
      background: var(--color-surface);
    }

    .process__steps {
      margin-top: var(--space-16);
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }

    .process__steps::before {
      content: '';
      position: absolute;
      left: 28px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--teal-200);
    }

    .process-step {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: var(--space-8);
      padding-bottom: var(--space-10);
      position: relative;
      z-index: 1;
    }

    .process-step:last-child { padding-bottom: 0; }

    .process-step__num-wrap {
      display: flex;
      justify-content: center;
    }

    .process-step__num {
      width: 56px;
      height: 56px;
      border-radius: var(--radius-full);
      background: var(--color-surface);
      border: 2px solid var(--teal-300);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-lg);
      font-weight: var(--weight-medium);
      color: var(--color-primary);
      flex-shrink: 0;
    }

    .process-step__content {
      padding-top: var(--space-3);
    }

    .process-step__title {
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-xl);
      font-weight: var(--weight-medium);
      color: var(--color-text-primary);
      margin-bottom: var(--space-3);
    }

    .process-step__body {
      font-size: var(--text-sm);
      font-weight: var(--weight-light);
      color: var(--color-text-secondary);
      line-height: var(--leading-relaxed);
      max-width: 52ch;
    }

    /* ── TESTIMONIAL BIG ──────────────────────────────────── */
    .big-testimonial {
      background: var(--teal-50);
      padding-block: clamp(var(--space-16), 8vw, var(--space-32));
    }

    .big-testimonial__inner {
      max-width: 700px;
      margin-inline: auto;
      text-align: center;
    }

    .big-testimonial__quote {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
      font-weight: var(--weight-regular);
      font-style: italic;
      line-height: var(--leading-snug);
      color: var(--color-text-primary);
      margin-bottom: var(--space-8);
      letter-spacing: var(--tracking-snug);
    }

    .big-testimonial__author {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
    }

    .big-testimonial__avatar {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-full);
      background: var(--teal-200);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Montserrat', sans-serif;
      font-size: var(--text-base);
      color: var(--teal-700);
      font-weight: var(--weight-medium);
    }

    .big-testimonial__name {
      font-weight: var(--weight-semibold);
      font-size: var(--text-sm);
      color: var(--color-text-primary);
    }

    .big-testimonial__role {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      font-weight: var(--weight-light);
    }

    /* ── CTA ──────────────────────────────────────────────── */
    /* styles are in shared.css as .vsn-cta / .vsn-cta__title / .vsn-cta__sub */

    @media (max-width: 900px) {
      .zak-hero__grid { grid-template-columns: 1fr; }
      .why__grid { grid-template-columns: 1fr; }
      .programs__grid { grid-template-columns: 1fr; }
      .zak-hero__stats { grid-template-columns: 1fr 1fr; }
    }