/* ═══════════════════════════════════════════════
     TOKENS & RESET
  ═══════════════════════════════════════════════ */
  :root {
    --black:      #000000;
    --black-s:    #080808;
    --black-m:    #111111;
    --black-c:    #161616;
    --black-e:    #1c1c1c;
    --gold:       #C9A84C;
    --gold-l:     #F0C060;
    --gold-d:     #8a6e2a;
    --gold-5:     rgba(201,168,76,.05);
    --gold-10:    rgba(201,168,76,.10);
    --gold-15:    rgba(201,168,76,.15);
    --gold-25:    rgba(201,168,76,.25);
    --white:      #ffffff;
    --grey:       #cccccc;
    --grey-d:     #888888;
    --grey-dd:    #444444;
    --fh:         'Cormorant Garamond', Georgia, serif;
    --fb:         'Inter', sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html  { scroll-behavior: smooth; }
  body  {
    background: var(--black);
    color: var(--grey);
    font-family: var(--fb);
    font-weight: 300;
    line-height: 1.75;
    overflow-x: hidden;
  }
  img   { display: block; max-width: 100%; }
  a     { color: inherit; text-decoration: none; }
  ::selection { background: var(--gold-25); color: var(--white); }

  /* ═══════════════════════════════════════════════
     GOLDEN CURSOR (mouse / trackpad only)
  ═══════════════════════════════════════════════ */
  @media (pointer: fine) {
    * {
      cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='17'%3E%3Cpath d='M1 1 L1 13 L4.5 9.5 L7 16 L9 15 L6.5 8.5 L11 8.5 Z' fill='%23C9A84C' stroke='%230a0a0a' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 1 1, auto;
    }
  }

  /* ═══════════════════════════════════════════════
     PRELOADER
  ═══════════════════════════════════════════════ */
  #preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .pl-preloader-inner { text-align: center; }
  .pl-logo-anim {
    font-family: var(--fh);
    font-size: clamp(6rem, 18vw, 14rem);
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: .05em;
  }
  .pl-p { display: inline-block; color: var(--white); }
  .pl-l { display: inline-block; color: var(--gold); }
  .pl-progress-bar {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin: 1.8rem auto 0;
    display: block;
  }
  .pl-sub {
    font-size: .65rem;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: var(--grey-d);
    opacity: 0;
    margin-top: 1rem;
  }

  /* ═══════════════════════════════════════════════
     SHIMMER — goud op section headings
  ═══════════════════════════════════════════════ */
  @keyframes shimmer-anim {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
  }
  .shimmer-gold {
    background: linear-gradient(
      90deg,
      var(--gold-d) 0%,
      var(--gold)   25%,
      var(--gold-l) 45%,
      #fff5cc       50%,
      var(--gold-l) 55%,
      var(--gold)   75%,
      var(--gold-d) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer-anim 3.5s linear infinite;
  }



  /* ═══════════════════════════════════════════════
     UTILITIES
  ═══════════════════════════════════════════════ */
  .g  { color: var(--gold); }
  .gl { color: var(--gold-l); }
  .w  { color: var(--white); }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .eyebrow::before {
    content: '';
    display: block;
    width: 36px; height: 1px;
    background: var(--gold);
    flex-shrink: 0;
  }

  .section-title {
    font-family: var(--fh);
    font-size: clamp(2.6rem, 5vw, 5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.0;
    color: var(--white);
  }

  .body-text {
    font-size: clamp(.88rem, 1.5vw, 1rem);
    color: var(--grey);
    line-height: 1.85;
  }

  .gold-line {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-25), transparent);
  }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .95rem 2.4rem;
    font-family: var(--fb);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    transition: color .35s;
  }
  .btn-primary {
    background: var(--gold);
    color: var(--black);
  }
  .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--white);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
  }
  .btn-primary:hover::after { transform: scaleX(1); }
  .btn-primary:hover  { color: var(--black); }
  .btn-primary span   { position: relative; z-index: 1; }

  .btn-ghost {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold-25);
    transition: border-color .3s, background .3s, color .3s;
  }
  .btn-ghost:hover {
    border-color: var(--gold);
    background: var(--gold-10);
    color: var(--gold-l);
  }

  .btn-group { display: flex; flex-wrap: wrap; gap: 1rem; }

  /* ═══════════════════════════════════════════════
     NAV
  ═══════════════════════════════════════════════ */
  #nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 5vw;
    transition: padding .4s, background .4s, border-color .4s;
    border-bottom: 1px solid transparent;
  }
  #nav.solid {
    padding: 1rem 5vw;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(16px) saturate(1.4);
    border-bottom-color: var(--gold-25);
    box-shadow:
      0 8px 60px rgba(201,168,76,.07),
      0 1px 0 rgba(201,168,76,.12) inset;
  }

  .nav-logo {
    font-family: var(--fh);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--white);
  }
  .nav-logo b { color: var(--gold); font-weight: 700; }

  .nav-links {
    display: flex;
    gap: 2.8rem;
    list-style: none;
  }
  .nav-links a {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--grey-d);
    transition: color .3s;
    position: relative;
    padding: 14px 8px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -.25rem;
    left: 0; right: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform .3s;
  }
  .nav-links a:hover { color: var(--gold-l); }
  .nav-links a:hover::after { transform: scaleX(1); }

  .nav-cta { display: none; }

  /* Hamburger */
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    min-width: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
  }
  .hamburger span {
    display: block;
    width: 22px; height: 1px;
    background: var(--gold);
    transition: all .3s;
  }

  /* Mobile menu */
  .mob-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 800;
    background: var(--black-s);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;
  }
  .mob-menu.open { display: flex; }
  .mob-menu a {
    font-family: var(--fh);
    font-size: clamp(2rem, 7vw, 3.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--white);
    transition: color .3s;
  }
  .mob-menu a:hover { color: var(--gold); }
  .mob-close {
    position: absolute;
    top: 1.5rem; right: 5vw;
    background: none; border: none;
    color: var(--gold);
    font-size: 1.8rem;
    cursor: pointer;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ═══════════════════════════════════════════════
     HERO
  ═══════════════════════════════════════════════ */
  #hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
      radial-gradient(ellipse 110% 85% at 60% 30%,
        rgba(201,168,76,.20) 0%,
        rgba(201,168,76,.05) 40%,
        transparent 62%),
      radial-gradient(ellipse 55% 65% at 10% 75%,
        rgba(201,168,76,.07) 0%, transparent 55%),
      linear-gradient(160deg, #110d01 0%, #060503 42%, #030303 100%);
  }

  /* Canvas (particles/shader) — vult volledige hero sectie */
  #hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    pointer-events: none;
  }

  /* Subtiele vignette onderaan — GEEN donkere deken */
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,168,76,.05) 0%, transparent 65%),
      linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.30) 100%);
    pointer-events: none;
  }

  /* Tekst container — centered over de particles */
  .hero-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 5vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-eyebrow::before, .hero-eyebrow::after { display: none; }
  .hero-eyebrow {
    margin-bottom: 2.2rem;
    opacity: 0;
    justify-content: center;
  }

  /* Grote centered hoofdtitel */
  .hero-headline {
    font-family: var(--fh);
    font-size: clamp(2.6rem, 8vw, 8rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.0;
    color: var(--white);
    margin-bottom: 0;
    width: 100%;
  }
  .hero-headline .hero-line  { display: block; overflow: hidden; padding-bottom: .08em; }
  .hero-headline .word       { display: inline-block; }
  .hero-headline .accent     { color: var(--gold); }

  /* CTA knop onder de titel */
  .hero-actions {
    opacity: 0;
    margin-top: 3.4rem;
    display: flex;
    justify-content: center;
  }
  .hero-cta {
    padding: 1.15rem 3.4rem !important;
    font-size: .78rem !important;
    letter-spacing: .22em !important;
  }

  /* Hero letter-chars */
  .hchar {
    display: inline-block;
    will-change: transform, opacity;
  }

  /* Stats bar */
  #stats-bar {
    background: var(--black-c);
    border-top: 1px solid var(--gold-25);
    border-bottom: 1px solid var(--gold-25);
  }
  .stats-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .stat-cell {
    padding: 2.2rem 1rem;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.05);
  }
  .stat-cell:last-child { border-right: none; }
  .stat-figure { display: block; }
  .stat-figure .stat-num { display: inline; }
  .stat-plus {
    font-family: var(--fh);
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
  }
  .stat-num {
    font-family: var(--fh);
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    display: block;
  }
  .stat-lbl {
    font-size: .65rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--grey-d);
    margin-top: .4rem;
  }

  /* ═══════════════════════════════════════════════
     OVER ONS
  ═══════════════════════════════════════════════ */
  #over-ons {
    padding: 11rem 5vw;
    position: relative;
    overflow: hidden;
  }
  #over-ons::before {
    content: 'PL';
    position: absolute;
    right: 3vw; top: 4rem;
    font-family: var(--fh);
    font-size: clamp(10rem, 22vw, 22rem);
    font-weight: 700;
    color: rgba(201,168,76,.025);
    pointer-events: none;
    line-height: 1;
    user-select: none;
  }

  .over-ons-grid {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 7rem;
    align-items: center;
    max-width: 1200px;
  }

  /* Photo side */
  .oo-photo-wrap {
    position: relative;
  }
  .oo-photo-wrap::after {
    content: '';
    position: absolute;
    top: 2rem; right: -2rem;
    bottom: -2rem; left: 2rem;
    border: 1px solid var(--gold-25);
    pointer-events: none;
    z-index: 0;
  }
  .oo-photo-frame {
    position: relative;
    z-index: 1;
  }
  .oo-photo-frame img {
    width: 100%; height: auto;
    display: block;
    transition: transform .6s ease;
  }
  .oo-photo-frame img:hover {
    transform: scale(1.03);
  }

  /* Text side */
  .oo-eyebrow  { margin-bottom: 1.4rem; }
  .oo-title    { margin-bottom: 1.8rem; }
  .oo-body     { margin-bottom: 1.4rem; }
  .oo-cta      { margin-top: 2.6rem; }

  .oo-values {
    margin-top: 3.5rem;
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem;
  }
  .oo-val-n {
    font-family: var(--fh);
    font-size: clamp(2.2rem,4vw,3.2rem);
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    display: block;
  }
  .oo-val-l {
    font-size: .63rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--grey-d);
    margin-top: .4rem;
    display: block;
  }

  /* ═══════════════════════════════════════════════
     DIENSTEN
  ═══════════════════════════════════════════════ */
  #diensten {
    padding: 11rem 5vw;
    background: var(--black-s);
    position: relative;
    overflow: hidden;
  }
  #diensten::before,
  #diensten::after { content: ''; display: block; }
  #diensten::before {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(201,168,76,.04) 0%, transparent 70%),
      radial-gradient(ellipse 40% 40% at 20% 80%, rgba(201,168,76,.03) 0%, transparent 70%);
    pointer-events: none;
  }

  .diensten-head {
    max-width: 700px;
    margin: 0 auto 5.5rem;
    text-align: center;
  }
  .diensten-head .eyebrow  { margin-bottom: 1.2rem; justify-content: center; }
  .diensten-head .eyebrow::before { display: none; }
  .diensten-head .section-title { margin-bottom: 1.2rem; }
  .diensten-head p { color: var(--grey-d); }

  /* Pricing grid — 4 pakketten */
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    max-width: 1440px;
    margin: 0 auto 2rem;
    align-items: flex-start;
  }

  .pc {
    background: var(--black-c);
    border: 1px solid rgba(255,255,255,.07);
    padding: 2.4rem 1.8rem;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: border-color .4s, transform .4s;
  }
  .pc::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 80% at var(--mx,50%) var(--my,50%),
      rgba(201,168,76,.09) 0%, transparent 65%);
    opacity: 0;
    transition: opacity .4s;
  }
  .pc::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s ease;
  }
  .pc:hover { border-color: var(--gold-25); transform: translateY(-8px); }
  .pc:hover::before { opacity: 1; }
  .pc:hover::after  { transform: scaleX(1); }

  /* featured */
  .pc.feat {
    border-color: var(--gold-25);
    background: linear-gradient(135deg, #110d00 0%, var(--black-c) 60%);
  }
  .pc.feat::after { transform: scaleX(1); }

  /* Elite — cinematisch maatwerk */
  .pc.elite {
    border-color: rgba(201,168,76,.4);
    background: linear-gradient(135deg, #1c1000 0%, #0e0c04 50%, var(--black-c) 100%);
    animation: eliteGlow 3.5s ease-in-out infinite;
  }
  .pc.elite::after { transform: scaleX(1); }
  @keyframes eliteGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,.08), 0 0 50px rgba(201,168,76,.04); }
    50%       { box-shadow: 0 0 50px rgba(201,168,76,.22), 0 0 100px rgba(201,168,76,.08); }
  }
  .pc.elite .pc-badge {
    background: linear-gradient(90deg, var(--gold-d), var(--gold), var(--gold-l));
    color: var(--black);
  }
  .pc.elite .pc-tier { color: var(--gold-l); }
  .pc.elite .pc-price { color: var(--gold-l); }
  .pc-availability {
    font-size: .72rem;
    color: var(--grey-d);
    font-style: italic;
    margin-top: -.8rem;
    margin-bottom: 1.8rem;
    line-height: 1.5;
  }

  .pc-badge {
    position: absolute;
    top: 1.4rem; right: 1.4rem;
    background: var(--gold);
    color: var(--black);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: .28rem .7rem;
  }

  .pc-tier {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.6rem;
  }

  .pc-price {
    font-family: var(--fh);
    font-size: clamp(3rem, 5vw, 4.2rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1;
  }
  .pc-price sup {
    font-family: var(--fb);
    font-size: 1rem;
    font-weight: 400;
    color: var(--grey-d);
    vertical-align: super;
    margin-right: .15rem;
  }
  .pc-period {
    font-size: .72rem;
    color: var(--grey-d);
    margin: .4rem 0 2rem;
  }

  .pc-divider {
    height: 1px;
    background: rgba(255,255,255,.06);
    margin-bottom: 2rem;
  }

  .pc-features {
    list-style: none;
    margin-bottom: 2.8rem;
  }
  .pc-features li {
    font-size: .83rem;
    color: var(--grey);
    padding: .6rem 0;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
  }
  .pc-features li::before {
    content: '✦';
    color: var(--gold);
    font-size: .5rem;
    margin-top: .38rem;
    flex-shrink: 0;
  }
  .pc .btn { width: 100%; justify-content: center; }

  /* Shimmer sweep — 21st.dev-stijl interactief hover effect */
  .pc-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 30%,
      rgba(201,168,76,.055) 48%,
      rgba(240,192,96,.04) 52%,
      transparent 70%
    );
    transform: translateX(-120%) skewX(-8deg);
    transition: transform .0s;
    z-index: 0;
  }
  .pc:hover .pc-shimmer {
    transform: translateX(220%) skewX(-8deg);
    transition: transform .75s ease;
  }
  .pc:hover {
    box-shadow:
      0 20px 80px rgba(201,168,76,.09),
      0 0 0 1px rgba(201,168,76,.14);
  }
  .pc.feat:hover {
    box-shadow:
      0 24px 100px rgba(201,168,76,.14),
      0 0 0 1px rgba(201,168,76,.3);
  }
  .pc.elite:hover {
    box-shadow:
      0 24px 100px rgba(201,168,76,.18),
      0 0 60px rgba(201,168,76,.08),
      0 0 0 1px rgba(201,168,76,.35);
  }

  /* Cursor pointer op interactieve kaarten */
  .pc, .pf-slide, .rev-card, .ww-step { cursor: default; }
  .pc .btn, .pf-slide .btn { cursor: pointer; }

  /* Review cards — premium inner glow hover */
  .rev-card:hover {
    border-color: rgba(201,168,76,.2) !important;
    box-shadow: 0 0 0 1px rgba(201,168,76,.12), 0 20px 60px rgba(201,168,76,.06);
  }

  /* Werkwijze steps — ww-num ring glow */
  .ww-step:hover .ww-num {
    box-shadow:
      0 0 0 6px rgba(201,168,76,.07),
      0 0 0 14px rgba(201,168,76,.03);
  }

  /* Contact icons — subtiele goud-pulse op hover */
  .ct-icon {
    transition: background .3s, border-color .3s, box-shadow .3s;
  }
  .ct-icon:hover {
    background: var(--gold-10) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 20px rgba(201,168,76,.15);
  }

  /* Footer brand — subtiele goud underline */
  .ft-brand {
    position: relative;
    display: inline-block;
  }
  .ft-brand::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 1px;
    background: var(--gold);
    transition: width .4s ease;
  }
  .ft-brand:hover::after { width: 100%; }

  /* SVG icon base — vervangt emoji */
  .ww-icon-svg {
    width: 1.6rem; height: 1.6rem;
    margin-bottom: 1rem;
    display: block;
    color: var(--gold);
    opacity: .75;
  }

  /* Onderhoud strip */
  .onderhoud {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--black-c);
    border: 1px solid var(--gold-25);
    padding: 2.8rem 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
  }
  .onderhoud::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }
  .onderhoud-price {
    font-family: var(--fh);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
  }
  .onderhoud-price sub {
    font-family: var(--fb);
    font-size: .9rem;
    color: var(--grey-d);
  }
  .onderhoud-feats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2.5rem;
  }
  .onderhoud-feat {
    font-size: .8rem;
    color: var(--grey);
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .onderhoud-feat::before { content: '✦'; color: var(--gold); font-size: .5rem; }

  /* ═══════════════════════════════════════════════
     PORTFOLIO
  ═══════════════════════════════════════════════ */
  #portfolio {
    padding: 11rem 0;
    overflow: hidden;
  }

  .pf-head {
    padding: 0 5vw;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 4rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Portfolio kaart ──────────────────────────── */
  .pf-slide {
    background: var(--black-c);
    border: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
    transition: border-color .4s;
    transform-origin: center center;
    will-change: transform, opacity;
  }
  .pf-slide:hover { border-color: var(--gold-25); }

  /* ── 3D Carrousel ─────────────────────────────── */
  .pf-3d-scene {
    position: relative;
    height: 490px;
    overflow: visible;
    margin-bottom: 0.5rem;
  }
  .pf-3d-stage {
    position: absolute;
    inset: 0;
  }
  .pf-3d-item {
    position: absolute;
    top: 0;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    will-change: transform, opacity;
    transform-origin: center center;
    cursor: pointer;
  }
  /* Vaste hoogte voor het mock-venster in 3D context */
  .pf-3d-item .pf-mock { height: 300px; }

  /* ── Navigatie footer ─────────────────────────── */
  .pf-3d-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
  /* Navigatie pijlen (nu in flex-footer, niet absoluut) */
  .pf-nav {
    position: static;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,.35);
    background: rgba(0,0,0,.65);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
  }
  .pf-nav:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
    box-shadow: 0 0 24px rgba(201,168,76,.35);
  }
  .pf-nav:active { transform: scale(.93); }

  /* ── Stipjes ──────────────────────────────────── */
  .pf-3d-dots {
    display: flex;
    gap: .65rem;
    align-items: center;
  }
  .pf-3d-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--grey-dd);
    cursor: pointer;
    transition: background .3s, transform .3s;
  }
  .pf-3d-dot.active {
    background: var(--gold);
    transform: scale(1.5);
  }

  /* ── Responsive ───────────────────────────────── */
  @media (max-width: 900px) {
    .pf-3d-scene { height: 420px; }
    .pf-3d-item  { width: 380px; margin-left: -190px; }
    .pf-3d-item .pf-mock { height: 230px; }
  }
  @media (max-width: 600px) {
    .pf-3d-scene { height: 370px; }
    .pf-3d-item  { width: 300px; margin-left: -150px; }
    .pf-3d-item .pf-mock { height: 180px; }
    .pf-nav { width: 44px; height: 44px; }
  }
  .pf-3d-footer { position: relative; z-index: 30; }

  .pf-mock {
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
  }

  /* browser chrome */
  .mock-chrome {
    background: #111;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 .9rem;
    gap: .35rem;
    flex-shrink: 0;
  }
  .mc-dot { width: 8px; height: 8px; border-radius: 50%; }
  .mc-dot:nth-child(1) { background:#ff5f57; }
  .mc-dot:nth-child(2) { background:#febc2e; }
  .mc-dot:nth-child(3) { background:#28c840; }
  .mc-url { flex: 1; height: 16px; background: #0a0a0a; border-radius: 3px; margin-left: .6rem; }

  .mock-screen { flex: 1; position: relative; }

  /* Mock screens */
  .ms-restaurant {
    background: linear-gradient(135deg,#1a0a00,#080400);
    display:flex; flex-direction:column; height:100%;
    padding: 1.2rem 1.2rem .6rem;
  }
  .ms-restaurant .mst { font-size:.42rem; color:var(--gold); letter-spacing:.2em; text-transform:uppercase; margin-bottom:.35rem; }
  .ms-restaurant .msh { font-family:var(--fh); font-size:1.4rem; font-weight:700; color:#fff; text-transform:uppercase; line-height:.95; margin-bottom:.35rem; }
  .ms-restaurant .msb { font-size:.38rem; color:#777; margin-bottom:.6rem; }
  .ms-restaurant .msbt { display:inline-block; padding:.2rem .7rem; background:var(--gold); font-size:.36rem; letter-spacing:.15em; color:#000; margin-bottom:.8rem; }
  .ms-restaurant .msi { display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem; }
  .ms-restaurant .msc { aspect-ratio:1; border-radius:2px; }
  .ms-restaurant .msc:nth-child(1){background:linear-gradient(135deg,#2a1500,#180c00);}
  .ms-restaurant .msc:nth-child(2){background:linear-gradient(135deg,#200f00,#120800);}
  .ms-restaurant .msc:nth-child(3){background:linear-gradient(135deg,#1a0b00,#0e0600);}

  .ms-kapper {
    background:#090909; height:100%;
    display:flex; flex-direction:column;
  }
  .ms-kapper .msnav { background:#111; height:24px; display:flex; align-items:center; justify-content:space-between; padding:0 1rem; flex-shrink:0; }
  .ms-kapper .msnav-logo { font-family:var(--fh); font-size:.65rem; font-weight:700; color:#fff; letter-spacing:.1em; }
  .ms-kapper .msnav-dots { display:flex; gap:.4rem; }
  .ms-kapper .msnav-dot  { width:16px; height:2px; background:#2a2a2a; border-radius:1px; }
  .ms-kapper .msbody { flex:1; background:linear-gradient(100deg,rgba(201,168,76,.08),transparent); padding:1rem; }
  .ms-kapper .mst { font-size:.38rem; color:var(--gold); letter-spacing:.22em; text-transform:uppercase; margin-bottom:.3rem; }
  .ms-kapper .msh { font-family:var(--fh); font-size:1.2rem; font-weight:700; color:#fff; text-transform:uppercase; line-height:.95; margin-bottom:.7rem; }
  .ms-kapper .msgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:.3rem; }
  .ms-kapper .mscard { background:#161616; padding:.5rem; border:1px solid #1e1e1e; }
  .ms-kapper .mscard-n { font-size:.38rem; font-weight:600; color:#fff; margin-bottom:.1rem; }
  .ms-kapper .mscard-p { font-size:.35rem; color:var(--gold); }

  .ms-fitness {
    background:linear-gradient(160deg,#070710,#030308); height:100%;
    display:flex; flex-direction:column; padding:1rem;
    text-align:center;
  }
  .ms-fitness .mst { font-size:.36rem; color:#7777ff; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.3rem; }
  .ms-fitness .msh { font-family:var(--fh); font-size:1.15rem; font-weight:700; color:#fff; text-transform:uppercase; line-height:.95; margin-bottom:.5rem; }
  .ms-fitness .mspills { display:flex; gap:.25rem; justify-content:center; margin-bottom:.7rem; }
  .ms-fitness .mspill { padding:.15rem .45rem; background:rgba(100,100,255,.12); border:1px solid rgba(100,100,255,.25); font-size:.3rem; color:#aaf; border-radius:1px; }
  .ms-fitness .msstats { display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; }
  .ms-fitness .msst { background:rgba(255,255,255,.04); padding:.45rem; }
  .ms-fitness .msst-n { font-family:var(--fh); font-size:.85rem; font-weight:700; color:#fff; }
  .ms-fitness .msst-l { font-size:.3rem; color:#555; }

  .ms-advocaat {
    background:#07070500; height:100%;
    display:grid; grid-template-columns:1fr 1fr;
  }
  .ms-left { background:#09090700; padding:1rem; display:flex; flex-direction:column; justify-content:center; }
  .ms-right { background:linear-gradient(135deg,#1a1400,#0e0e00); display:flex; align-items:center; justify-content:center; }
  .ms-advocaat .mst { font-size:.36rem; color:var(--gold); letter-spacing:.2em; text-transform:uppercase; margin-bottom:.4rem; }
  .ms-advocaat .msh { font-family:var(--fh); font-size:.95rem; font-weight:700; color:#fff; text-transform:uppercase; line-height:1.1; margin-bottom:.4rem; }
  .ms-advocaat .msb { font-size:.33rem; color:#666; line-height:1.6; margin-bottom:.6rem; }
  .ms-advocaat .mscta { display:inline-block; padding:.2rem .55rem; background:var(--gold); font-size:.3rem; color:#000; letter-spacing:.12em; }

  .ms-bloemen {
    background:linear-gradient(135deg,#040904,#020502); height:100%;
    display:flex; flex-direction:column; padding:1rem;
  }
  .ms-bloemen .mst { font-size:.36rem; color:#6abf6a; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.3rem; }
  .ms-bloemen .msh { font-family:var(--fh); font-size:1.1rem; font-weight:700; color:#fff; text-transform:uppercase; line-height:.95; margin-bottom:.7rem; }
  .ms-bloemen .msitems { display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; }
  .ms-bloemen .msitem { background:rgba(255,255,255,.04); overflow:hidden; }
  .ms-bloemen .msitem-img { height:44px; background:linear-gradient(135deg,#0a170a,#061006); }
  .ms-bloemen .msitem-lbl { padding:.25rem; font-size:.3rem; color:#ccc; }
  .ms-bloemen .msitem-p   { padding:0 .25rem; font-size:.3rem; color:#6abf6a; }

  .pf-info {
    padding: 1.6rem 1.8rem;
  }
  .pf-tag {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .4rem;
  }
  .pf-name {
    font-family: var(--fh);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--white);
    margin-bottom: .25rem;
  }
  .pf-desc { font-size: .78rem; color: var(--grey-d); }

  /* Live preview iframe */
  .pf-mock-live { overflow: hidden; }
  .pf-iframe-outer {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #050300;
    min-height: 0; /* nodig voor flex-shrink in sommige browsers */
  }
  .pf-iframe-scaler {
    position: absolute;
    top: 0; left: 0;
    width: 1440px;
    transform-origin: top left;
    pointer-events: none;
  }
  .pf-iframe-scaler iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
  }
  .pf-iframe-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
  }
  .pf-bekijk-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.1rem;
    padding: .75rem 1.3rem;
    min-height: 48px;
    background: transparent;
    border: 1px solid var(--gold-25);
    color: var(--gold);
    font-family: var(--fb);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .25s, border-color .25s, color .25s;
    cursor: pointer;
  }
  .pf-bekijk-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
  }
  .pf-bekijk-btn svg { transition: transform .25s; }
  .pf-bekijk-btn:hover svg { transform: translate(2px, -2px); }

  /* Placeholder kaarten */
  .pf-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0c0a04, #080600);
    border-top: 1px solid rgba(201,168,76,.06);
    min-height: 0;
  }
  .pf-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    opacity: .45;
  }
  .pf-placeholder-icon { color: var(--gold); }
  .pf-placeholder-txt {
    font-family: var(--fb);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
  }

  /* ═══════════════════════════════════════════════
     WERKWIJZE
  ═══════════════════════════════════════════════ */
  #werkwijze {
    padding: 11rem 5vw;
    position: relative;
    overflow: hidden;
  }
  #werkwijze::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(201,168,76,.04) 0%, transparent 70%);
    pointer-events: none;
  }

  .ww-head {
    max-width: 600px;
    margin-bottom: 4rem;
  }
  .ww-head .eyebrow { margin-bottom: 1.2rem; }

  /* Werkwijze teaser steps */
  .ww-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 1rem;
  }
  .ww-step {
    background: rgba(201,168,76,.04);
    border: 1px solid rgba(201,168,76,.12);
    padding: 2.5rem 2rem;
    position: relative;
  }
  .ww-step-num {
    font-family: var(--fh);
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 700;
    color: rgba(201,168,76,.18);
    line-height: 1;
    margin-bottom: 1rem;
  }
  .ww-step-title {
    font-family: var(--fh);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
    color: var(--white);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .8rem;
  }
  .ww-step-body {
    font-size: .92rem;
    color: #aaa;
    line-height: 1.7;
  }

  /* ═══════════════════════════════════════════════
     MACBOOK LAPTOP ANIMATIE — Werkwijze (Silver)
  ═══════════════════════════════════════════════ */

  @keyframes mac-glow-pulse {
    0%, 100% { box-shadow: 0 0 35px rgba(201,168,76,.07), 0 0 70px rgba(0,0,0,.5); }
       50%   { box-shadow: 0 0 55px rgba(201,168,76,.15), 0 0 100px rgba(0,0,0,.35); }
  }
  @keyframes tb-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  /* ── Wrapper ───────────────────────────────── */
  #werkwijze-mac { padding-top: 11rem; }

  .ww-mac-wrap {
    width: min(85vw, 1060px);
    margin: 0 auto 5rem;
    opacity: 0;
    will-change: transform, opacity;
  }

  /* ── Lid (zilver aluminium) ─────────────────── */
  .ww-mac-lid {
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    position: relative;
  }
  .ww-mac-lid-outer {
    background: linear-gradient(180deg,
      #3A3A3C 0%, #2C2C2E 45%, #242426 100%);
    border: 1px solid #1A1A1C;
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    padding: 10px 10px 0;
    box-shadow:
      0 -1px 0 #4A4A4C,
      inset 0 1px 0 rgba(255,255,255,.08),
      0 -14px 40px rgba(0,0,0,.4);
    position: relative;
  }
  /* Camera */
  .ww-mac-camera {
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #1A1A1C;
    border: 1px solid #2a2a2c;
  }
  .ww-mac-camera::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 2.5px; height: 2.5px;
    border-radius: 50%;
    background: rgba(34,100,180,.5);
  }
  /* Schermrand (dunne zwarte bezel) */
  .ww-mac-bezel {
    background: #0C0C0E;
    border-radius: 7px 7px 0 0;
    padding: 20px 9px 0;
    overflow: hidden;
  }
  /* Scherm */
  .ww-mac-display {
    background: #050505;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    aspect-ratio: 16/10;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: mac-glow-pulse 4s ease-in-out infinite;
    animation-play-state: paused;
  }
  .ww-mac-display.glow-active { animation-play-state: running; }
  .ww-screen-reflection {
    position: absolute; inset: 0; z-index: 10;
    background: linear-gradient(130deg,
      rgba(255,255,255,.03) 0%, transparent 55%, rgba(0,0,0,.04) 100%);
    pointer-events: none;
    border-radius: 3px;
  }

  /* ── Status bar ─────────────────────────────── */
  .ww-mac-statusbar {
    height: clamp(16px, 2vw, 22px);
    background: rgba(10,10,12,.96);
    display: flex;
    align-items: center;
    padding: 0 clamp(8px, 1.2%, 14px);
    gap: clamp(8px, 1.5%, 18px);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    position: relative;
    z-index: 5;
  }
  .ww-mac-logo {
    font-family: var(--fh);
    font-size: clamp(.55rem, .9vw, .78rem);
    font-weight: 700;
    color: var(--gold);
    letter-spacing: .06em;
    flex-shrink: 0;
  }
  .ww-mac-status-items {
    display: flex;
    gap: clamp(8px, 1.2%, 16px);
    flex: 1;
  }
  .ww-mac-status-items span {
    font-size: clamp(.4rem, .7vw, .56rem);
    color: rgba(255,255,255,.65);
    letter-spacing: .02em;
    white-space: nowrap;
  }
  .ww-mac-clock {
    font-size: clamp(.4rem, .65vw, .52rem);
    color: rgba(255,255,255,.6);
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* ── Scherminhoud: 4 stappen ────────────────── */
  .ww-mac-screen-content {
    flex: 1;
    background: linear-gradient(155deg, #070608, #050505, #070608);
    padding: clamp(10px, 1.8%, 22px) clamp(10px, 2%, 24px) clamp(8px, 1.4%, 18px);
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1%, 14px);
    position: relative;
    overflow: hidden;
  }
  .ww-mac-screen-content::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 55%; height: 40%;
    background: radial-gradient(ellipse, rgba(201,168,76,.055) 0%, transparent 65%);
    pointer-events: none;
  }
  /* Scherm-header balk */
  .ww-mac-scr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding-bottom: clamp(5px, .9%, 11px);
    border-bottom: 1px solid rgba(201,168,76,.14);
  }
  .ww-mac-scr-eyebrow {
    font-size: clamp(.38rem, .85vw, .6rem);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
  }
  .ww-mac-scr-title {
    font-family: var(--fh);
    font-size: clamp(.6rem, 1.4vw, 1rem);
    font-weight: 700;
    color: var(--white);
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  /* 4-koloms stap-grid */
  .ww-mac-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    flex: 2;
    min-height: 0;
    position: relative;
  }
  /* Verbindingslijn ONDER de stap-nummers (loopt van ring tot ring) */
  .ww-mac-steps-grid::before {
    content: '';
    position: absolute;
    top: clamp(28px, 4.5vw, 55px);
    left: clamp(14px, 2.25vw, 27px);
    right: clamp(14px, 2.25vw, 27px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-25) 10%, var(--gold-25) 90%, transparent);
    z-index: 0;
  }
  .ww-mac-step-card {
    padding: 0 clamp(8px, 1.5%, 18px) 0 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    opacity: 0;
  }
  .ww-mac-step-card:last-child { padding-right: 0; }
  /* Nummer-ring (zelfde als .ww-num) */
  .ww-ms-num-wrap { margin-bottom: clamp(.6rem, 1.2vw, 1.4rem); }
  .ww-ms-num-ring {
    width: clamp(28px, 4.5vw, 55px);
    height: clamp(28px, 4.5vw, 55px);
    border: 1px solid rgba(201,168,76,.3);
    background: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background .4s, border-color .4s;
  }
  .ww-mac-step-card.card-lit .ww-ms-num-ring {
    background: rgba(201,168,76,.08);
    border-color: var(--gold);
  }
  .ww-ms-num {
    font-family: var(--fh);
    font-size: clamp(.7rem, 1.45vw, 1.4rem);
    font-weight: 700;
    color: var(--gold);
    letter-spacing: .02em;
    line-height: 1;
  }
  /* Icoon */
  .ww-ms-icon {
    width: clamp(16px, 2.2vw, 28px);
    height: clamp(16px, 2.2vw, 28px);
    color: var(--gold);
    margin-bottom: clamp(.5rem, .9vw, 1rem);
    flex-shrink: 0;
  }
  /* Titel */
  .ww-ms-title {
    font-family: var(--fh);
    font-size: clamp(.85rem, 1.4vw, 1.25rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--white);
    margin-bottom: clamp(.25rem, .5vw, .55rem);
    line-height: 1.2;
    min-height: 1em;
  }
  /* Beschrijving */
  .ww-ms-body {
    font-size: clamp(.6rem, .95vw, .875rem);
    color: var(--grey-d);
    line-height: 1.65;
    flex: 1;
  }

  /* ── Terminal onderaan scherm ──────────────── */
  .ww-mac-terminal {
    flex: 1;
    min-height: 0;
    background: #040405;
    border: 1px solid rgba(201,168,76,.15);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity .4s;
  }
  .ww-mac-terminal.term-visible { opacity: 1; }
  .ww-term-header {
    background: #0E0E10;
    padding: clamp(3px, .35vw, 5px) clamp(6px, .8vw, 10px);
    display: flex;
    align-items: center;
    gap: clamp(5px, .6vw, 8px);
    border-bottom: 1px solid rgba(255,255,255,.05);
    flex-shrink: 0;
  }
  .ww-term-dots { display: flex; gap: clamp(3px, .35vw, 5px); flex-shrink: 0; }
  .ww-term-dot {
    width: clamp(5px, .65vw, 8px);
    height: clamp(5px, .65vw, 8px);
    border-radius: 50%;
  }
  .ww-td-r { background: #FF5F57; }
  .ww-td-y { background: #FEBC2E; }
  .ww-td-g { background: #28C840; }
  .ww-term-title {
    flex: 1;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: clamp(.35rem, .55vw, .48rem);
    color: rgba(255,255,255,.3);
    letter-spacing: .08em;
  }
  .ww-term-body {
    flex: 1;
    padding: clamp(5px, .7vw, 9px) clamp(8px, 1vw, 13px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(3px, .4vw, 5px);
    overflow: hidden;
  }
  .ww-term-line {
    font-family: 'Courier New', monospace;
    font-size: clamp(.5rem, .78vw, .68rem);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    color: rgba(255,255,255,.45);
  }
  .ww-term-line.ww-tl-cmd  { color: rgba(201,168,76,.85); }
  .ww-term-line.ww-tl-ok   { color: #4ADE80; }
  .ww-term-line.ww-tl-done { color: var(--gold); font-weight: 700; }

  /* ── Scharnier (antraciet) ──────────────────── */
  .ww-mac-hinge {
    height: 5px;
    background: linear-gradient(180deg, #222224, #1C1C1E);
    border-left: 1px solid #141416;
    border-right: 1px solid #141416;
    position: relative;
  }
  .ww-mac-hinge::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
      transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  }

  /* ── Base (antraciet/space gray) ────────────── */
  .ww-mac-base {
    background: linear-gradient(180deg,
      #2C2C2E 0%, #242426 40%, #1C1C1E 100%);
    border: 1px solid #1A1A1C;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 7px 20px 12px;
    box-shadow:
      0 22px 60px rgba(0,0,0,.65),
      0 8px 22px rgba(0,0,0,.4),
      inset 0 -1px 0 rgba(0,0,0,.3);
  }
  /* Touch bar */
  .ww-mac-touchbar {
    height: clamp(6px, .9vw, 9px);
    background: #1A1A1C;
    border-radius: 3px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    gap: 4px;
    overflow: hidden;
  }
  .ww-tb-esc { width: 18px; height: 4px; background: #2A2A2C; border-radius: 2px; flex-shrink: 0; }
  .ww-tb-strip {
    flex: 1; height: 4px;
    background: #222224;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  .ww-tb-strip::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
      transparent 0%, rgba(201,168,76,.25) 45%,
      rgba(201,168,76,.4) 55%, transparent 100%);
    transform: translateX(-100%);
    animation: tb-shimmer 3.5s ease-in-out infinite 2.5s;
  }
  .ww-tb-touch { width: 16px; height: 5px; background: #2a2a2c; border-radius: 2px; flex-shrink: 0; }
  /* Keyboard: donkere toetsen op zilveren basis */
  .ww-mac-keyboard {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 7px;
  }
  .ww-mac-kb-row {
    height: clamp(7px, 1.3vw, 14px);
    border-radius: 2px;
    background: repeating-linear-gradient(
      90deg,
      #1C1C1E 0px, #1C1C1E calc(6.2% - 2px),
      #2C2C2E calc(6.2% - 2px), #2C2C2E 6.2%
    );
  }
  .ww-mac-kb-row.ww-kb-fn {
    height: clamp(5px, .85vw, 9px);
    background: repeating-linear-gradient(
      90deg,
      #1A1A1C 0px, #1A1A1C calc(3.5% - 1.5px),
      #2C2C2E calc(3.5% - 1.5px), #2C2C2E 3.5%
    );
  }
  .ww-mac-kb-row.ww-kb-bottom {
    display: flex; gap: 2px;
    background: none;
    height: clamp(7px, 1.3vw, 14px);
  }
  .ww-kb-bottom-key { height: 100%; background: #1C1C1E; border-radius: 2px; }
  .ww-kb-bottom-key.ww-kb-space { flex: 3; }
  .ww-kb-bottom-key.ww-kb-sm { flex: 1; }
  /* Trackpad: antraciet glas */
  .ww-mac-trackpad {
    width: 30%;
    height: clamp(16px, 2.6vw, 28px);
    background: linear-gradient(135deg, #333335, #262628);
    border: 1px solid #141416;
    border-radius: 5px;
    margin: 0 auto;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.04);
  }

  /* ── Responsive ─────────────────────────────── */
  @media (max-width: 768px) {
    .ww-mac-wrap { width: min(96vw, 720px); }
  }
  @media (max-width: 640px) {
    /* Terminal verbergen — te weinig ruimte op mobiel */
    .ww-mac-terminal { display: none !important; }

    /* Laptop schaalt mee met het scherm */
    .ww-mac-wrap { width: 96vw !important; }
    /* Hoogte niet meer vastgepind aan 16/10 — laat groeien voor 2×2 grid */
    .ww-mac-display { aspect-ratio: unset !important; }
    .ww-mac-screen-content { overflow: visible !important; }
    /* Schermtitel-balk verbergen voor ruimte */
    .ww-mac-scr-header { display: none !important; }

    /* 2×2 stappenraster */
    .ww-mac-steps-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0.4rem !important;
    }
    .ww-mac-steps-grid::before { display: none; }

    .ww-mac-step-card { padding: 0.5rem 0.4rem !important; }
    .ww-ms-num-wrap { margin-bottom: 0.3rem !important; }
    .ww-ms-num-ring {
      width: clamp(20px, 6vw, 28px) !important;
      height: clamp(20px, 6vw, 28px) !important;
    }
    .ww-ms-num { font-size: clamp(.5rem, 2.5vw, .8rem) !important; }
    .ww-ms-icon {
      width: clamp(12px, 3.5vw, 18px) !important;
      height: clamp(12px, 3.5vw, 18px) !important;
      margin-bottom: 0.2rem !important;
    }
    .ww-ms-title {
      font-size: clamp(.7rem, 3vw, .95rem) !important;
      margin-bottom: 0.15rem !important;
    }
    .ww-ms-body {
      font-size: clamp(.55rem, 2.2vw, .72rem) !important;
      line-height: 1.4 !important;
    }
  }

  .ww-steps {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    max-width: 1200px;
    position: relative;
  }
  /* Connecting line */
  .ww-steps::before {
    content: '';
    position: absolute;
    top: 2.5rem; left: 2.5rem; right: 2.5rem;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-25), var(--gold-25));
    z-index: 0;
  }

  .ww-step {
    padding: 0 2.2rem 0 0;
    position: relative;
    z-index: 1;
  }
  .ww-step:last-child { padding-right: 0; }

  .ww-num-wrap {
    margin-bottom: 2rem;
  }
  .ww-num {
    width: 5rem; height: 5rem;
    border: 1px solid var(--gold-25);
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fh);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold);
    transition: background .4s, border-color .4s, transform .4s;
    position: relative;
  }
  .ww-step:hover .ww-num {
    background: var(--gold-10);
    border-color: var(--gold);
    transform: scale(1.08);
  }
  .ww-num::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid var(--gold-10);
    transition: opacity .4s;
    opacity: 0;
  }
  .ww-step:hover .ww-num::after { opacity: 1; }

  .ww-icon { font-size: 1.4rem; margin-bottom: 1rem; display: block; }
  .ww-title {
    font-family: var(--fh);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--white);
    margin-bottom: .7rem;
    line-height: 1.2;
  }
  .ww-body { font-size: .82rem; color: var(--grey-d); line-height: 1.75; }

  /* ═══════════════════════════════════════════════
     REVIEWS
  ═══════════════════════════════════════════════ */
  #reviews {
    padding: 11rem 5vw;
    background: var(--black-s);
    position: relative;
    overflow: hidden;
  }
  #reviews::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-25), transparent);
  }
  #reviews::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-25), transparent);
  }

  .rev-head {
    max-width: 700px;
    margin: 0 auto 5rem;
    text-align: center;
  }
  .rev-head .eyebrow { justify-content: center; margin-bottom: 1.2rem; }
  .rev-head .eyebrow::before { display: none; }

  .rev-card {
    background: var(--black-c);
    border: 1px solid rgba(255,255,255,.07);
    padding: 2.8rem 2.5rem;
    height: 100%;
    transition: border-color .4s;
  }
  .rev-slide {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
  }
  .rev-slide .rev-card {
    height: 100%;
    box-sizing: border-box;
  }
  .rev-card:hover { border-color: var(--gold-25); }

  .rev-stars {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.4rem;
  }
  .rev-star { color: var(--gold); font-size: .9rem; }

  .rev-quote {
    font-family: var(--fh);
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    font-weight: 400;
    font-style: italic;
    color: var(--white);
    line-height: 1.65;
    margin-bottom: 2rem;
  }
  .rev-quote::before {
    content: '\201C';
    font-size: 3rem;
    color: var(--gold);
    line-height: 0;
    vertical-align: -1.1rem;
    font-family: var(--fh);
    margin-right: .15rem;
  }

  .rev-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .rev-av {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--gold-25);
    background: var(--gold-10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fh);
    font-weight: 700;
    font-size: 1rem;
    color: var(--gold);
    flex-shrink: 0;
  }
  .rev-name { font-size: .84rem; font-weight: 600; color: var(--white); }
  .rev-role { font-size: .7rem; color: var(--grey-d); }

  /* ═══════════════════════════════════════════════
     CONTACT
  ═══════════════════════════════════════════════ */
  #contact {
    padding: 11rem 5vw;
    position: relative;
    overflow: hidden;
  }
  #contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 110%, rgba(201,168,76,.07) 0%, transparent 70%);
    pointer-events: none;
  }

  .ct-grid {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 8rem;
    max-width: 1200px;
    align-items: flex-start;
  }

  .ct-info .eyebrow  { margin-bottom: 1.4rem; }
  .ct-info .section-title { margin-bottom: 1.4rem; }
  .ct-info .body-text { margin-bottom: 3rem; }

  .ct-details { display: flex; flex-direction: column; gap: 1.4rem; }

  .ct-item {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
  }
  .ct-icon {
    width: 44px; height: 44px;
    border: 1px solid var(--gold-25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    color: var(--gold);
    transition: background .3s, border-color .3s;
  }
  .ct-icon:hover { background: var(--gold-10); border-color: var(--gold); }
  .ct-item-lbl {
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--grey-d);
    margin-bottom: .2rem;
  }
  .ct-item-val { font-size: .92rem; color: var(--white); }

  /* Form */
  .ct-form { display: flex; flex-direction: column; gap: 1.1rem; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  .fg { display: flex; flex-direction: column; gap: .45rem; }
  .fl {
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--grey-d);
  }
  .fi, .fta, .fsel {
    background: var(--black-c);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--white);
    font-family: var(--fb);
    font-size: .9rem;
    padding: 1rem 1.2rem;
    width: 100%;
    outline: none;
    transition: border-color .3s, background .3s;
    -webkit-appearance: none;
    border-radius: 0;
  }
  .fi::placeholder, .fta::placeholder { color: var(--grey-dd); }
  .fi:focus, .fta:focus, .fsel:focus  { border-color: var(--gold); background: var(--black-e); }
  .fsel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 5 5-5' stroke='%23C9A84C' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    cursor: pointer;
  }
  .fsel option { background: var(--black-m); }
  .fta { min-height: 140px; resize: vertical; }
  .form-submit { margin-top: .4rem; }

  /* ═══════════════════════════════════════════════
     FOOTER
  ═══════════════════════════════════════════════ */
  footer {
    background: var(--black-s);
    border-top: 1px solid var(--gold-25);
    padding: 5rem 5vw 2.5rem;
  }
  .ft-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto 4rem;
  }
  .ft-brand {
    font-family: var(--fh);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 1rem;
  }
  .ft-brand span { color: var(--gold); }
  .ft-tagline { font-size: .82rem; color: var(--grey-d); max-width: 280px; line-height: 1.7; }

  .ft-head {
    font-size: .62rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
  }
  .ft-links { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
  .ft-links a { font-size: .83rem; color: var(--grey-d); transition: color .3s; padding: 6px 0; display: inline-block; min-height: 44px; line-height: 32px; }
  .ft-links a:hover { color: var(--gold); }

  .ft-bottom {
    border-top: 1px solid rgba(255,255,255,.05);
    padding-top: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .ft-copy { font-size: .7rem; color: var(--grey-d); }
  .ft-copy span { color: var(--gold); }
  .ft-legal { display: flex; gap: 2rem; }
  .ft-legal a { font-size: .7rem; color: var(--grey-d); transition: color .3s; }
  .ft-legal a:hover { color: var(--gold); }
  .ft-reg { font-size: .67rem; color: rgba(255,255,255,.25); letter-spacing: .04em; width: 100%; margin: 0; }

  /* ═══════════════════════════════════════════════
     CHAR SPLIT ANIMATION
  ═══════════════════════════════════════════════ */
  .char {
    display: inline-block;
    will-change: transform, opacity;
  }
  .char-space { display: inline-block; width: .35em; }

  /* ═══════════════════════════════════════════════
     PARALLAX WRAPPERS
  ═══════════════════════════════════════════════ */
  .parallax-slow   { will-change: transform; }
  .parallax-medium { will-change: transform; }

  /* ═══════════════════════════════════════════════
     3D TILT — portfolio kaarten
  ═══════════════════════════════════════════════ */
  .pf-slide {
    transform-style: preserve-3d;
    will-change: transform;
  }
  .pf-slide .pf-mock { transform: translateZ(6px); }
  .pf-slide .pf-info { transform: translateZ(10px); }

  /* ═══════════════════════════════════════════════
     REVIEWS CAROUSEL
  ═══════════════════════════════════════════════ */
  .rev-carousel { position: relative; }
  #reviews { overflow: hidden; }

  .rev-track {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1rem 5vw 2.5rem;
    scroll-padding-inline: 5vw;
  }
  .rev-track::-webkit-scrollbar { display: none; }

  .rev-slide {
    flex: 0 0 min(90%, 480px);
    scroll-snap-align: start;
  }
  @media (min-width: 600px)  { .rev-slide { flex: 0 0 min(72%, 520px); } }
  @media (min-width: 900px)  { .rev-slide { flex: 0 0 min(44%, 540px); } }
  @media (min-width: 1200px) { .rev-slide { flex: 0 0 min(35%, 560px); } }

  .rev-card {
    transform-origin: center center;
    transition: border-color .4s, box-shadow .4s;
  }
  .rev-card:hover { box-shadow: 0 0 40px rgba(201,168,76,.08); }
  .rev-card.is-active { border-color: rgba(201,168,76,.2) !important; }

  .rev-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding-bottom: 1rem;
  }
  .rev-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,.35);
    background: rgba(0,0,0,.65);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
    flex-shrink: 0;
  }
  .rev-btn:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #000;
    box-shadow: 0 0 24px rgba(201,168,76,.35);
  }
  .rev-btn:active { transform: scale(.93); }

  .rev-dots { display: flex; gap: .65rem; align-items: center; }
  .rev-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--grey-dd);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .3s, transform .3s;
  }
  .rev-dot.active { background: var(--gold); transform: scale(1.5); }

  /* ═══════════════════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════════════════ */
  @media (max-width: 1200px) {
    .pricing-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 1100px) {
    .ww-steps { grid-template-columns: 1fr 1fr; }
    .ww-steps::before { display: none; }
  }
  @media (max-width: 900px) {
    .over-ons-grid,
    .ct-grid { grid-template-columns: 1fr; gap: 4rem; }
    .oo-photo-wrap { max-width: 400px; margin: 0 auto; }
    .oo-photo-wrap::after { right: -1.2rem; bottom: -1.2rem; top: 1.2rem; left: 1.2rem; }
.ft-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 768px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }

    .stats-inner { grid-template-columns: repeat(3, 1fr); }

    .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
    .pricing-grid > .pc,
    .cb-grid > .pc { margin-top: 0 !important; }
    .ww-steps { grid-template-columns: 1fr; gap: 2.8rem; }
    .form-row { grid-template-columns: 1fr; }
    .onderhoud { flex-direction: column; align-items: flex-start; }

    .pf-head { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 520px) {
    .ft-grid { grid-template-columns: 1fr; }
    .stats-inner { grid-template-columns: repeat(3, 1fr); }
  }

  /* ═══════════════════════════════════════════════
     CHATBOT PRICING SECTIE
  ═══════════════════════════════════════════════ */
  #chatbot-pricing {
    padding: 11rem 5vw;
    background: var(--black-s);   /* #080808 — zichtbaar donker maar niet puur zwart */
    position: relative;
    overflow: hidden;
  }
  #chatbot-pricing::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;                   /* blijft achter de content */
    background:
      radial-gradient(ellipse 55% 45% at 15% 30%, rgba(201,168,76,.04) 0%, transparent 70%),
      radial-gradient(ellipse 45% 50% at 85% 75%, rgba(201,168,76,.03) 0%, transparent 70%);
    pointer-events: none;
  }
  /* Zorg dat alle content boven de ::before pseudo-layer ligt */
  #chatbot-pricing > * {
    position: relative;
    z-index: 1;
  }

  /* Billing toggle */
  .cb-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 4.5rem;
  }
  .cb-toggle-label {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grey-d);
    transition: color .3s;
  }
  .cb-toggle-label.active { color: var(--white); }

  .cb-discount {
    display: inline-block;
    background: var(--gold);
    color: var(--black);
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    margin-left: .5rem;
    vertical-align: middle;
  }

  .cb-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--black-e);
    border: 1px solid var(--grey-dd);
    border-radius: 99px;
    cursor: pointer;
    padding: 0;
    transition: border-color .3s, background .3s;
    flex-shrink: 0;
  }
  .cb-toggle[aria-pressed="true"] {
    border-color: var(--gold-25);
    background: rgba(201,168,76,.08);
  }
  .cb-toggle-knob {
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--grey-d);
    transition: transform .3s var(--ease), background .3s;
  }
  .cb-toggle[aria-pressed="true"] .cb-toggle-knob {
    transform: translateX(20px);
    background: var(--gold);
  }

  /* 3-column card grid */
  .cb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    max-width: 1100px;
    margin: 0 auto 1.8rem;
    align-items: start;
  }

  /* Trap-effect: kaarten lopen van links naar rechts omlaag via oplopende margin-top */
  .pricing-grid > .pc:nth-child(1) { margin-top: 0px;  padding-bottom: 1.8rem; }
  .pricing-grid > .pc:nth-child(2) { margin-top: 20px; padding-bottom: 2.8rem; }
  .pricing-grid > .pc:nth-child(3) { margin-top: 40px; padding-bottom: 3.8rem; }
  .pricing-grid > .pc:nth-child(4) { margin-top: 60px; padding-bottom: 4.8rem; }

  /* Chatbot pakketten (3 kaarten) */
  .cb-grid > .pc:nth-child(1) { margin-top: 0px;  padding-bottom: 2.0rem; }
  .cb-grid > .pc:nth-child(2) { margin-top: 20px; padding-bottom: 2.7rem; }
  .cb-grid > .pc:nth-child(3) { margin-top: 40px; padding-bottom: 3.4rem; }

  /* Check / cross feature items */
  .cb-features {
    list-style: none;
    margin-bottom: 2.8rem;
  }
  .cb-features li {
    font-size: .83rem;
    padding: .6rem 0;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    line-height: 1.5;
  }
  .cb-features li.included { color: var(--grey); }
  .cb-features li.excluded { color: var(--grey-d); }

  .cb-check,
  .cb-cross {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: .1rem;
  }
  .cb-check { color: var(--gold); }
  .cb-cross  { color: var(--grey-dd); }

  /* Jaarlijks-prijs animatie */
  .cb-price-yearly { display: none; }
  .yearly-mode .cb-price-monthly { display: none; }
  .yearly-mode .cb-price-yearly  { display: block; }

  /* Voetnoot */
  .cb-footnote {
    text-align: center;
    font-size: .7rem;
    color: var(--grey-d);
    letter-spacing: .06em;
    max-width: 700px;
    margin: 4rem auto 0;
  }
  .cb-footnote::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--grey-dd), transparent);
    margin-bottom: 1.2rem;
  }
  .pricing-btw-note {
    text-align: center;
    font-size: .7rem;
    color: var(--grey-d);
    letter-spacing: .06em;
    margin: 2rem auto 0;
    opacity: .7;
  }

  /* Responsive chatbot grid */
  @media (max-width: 900px) {
    .cb-grid { grid-template-columns: 1fr 1fr; max-width: 700px; }
  }
  @media (max-width: 600px) {
    .cb-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  }



/* ═══════════════════════════════════════════════
   CONTACT KNOPPEN (WhatsApp + Bel)
═══════════════════════════════════════════════ */

#pl-contact-btns{position:fixed;bottom:28px;right:28px;z-index:8000;display:flex;flex-direction:column;gap:.6rem;align-items:flex-end}
#pl-wa-btn,#pl-call-btn{display:flex;align-items:center;gap:.55rem;padding:.7rem 1.2rem;border-radius:50px;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:transform .2s,box-shadow .2s}
#pl-wa-btn{background:#C9A84C;color:#000;animation:pl-float 3s ease-in-out infinite,pl-glow-gold 3s ease-in-out infinite}
#pl-call-btn{background:rgba(5,4,3,.9);color:#C9A84C;border:1px solid rgba(201,168,76,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:pl-float 3s ease-in-out infinite .4s,pl-glow-dark 3s ease-in-out infinite .4s}
#pl-wa-btn:hover,#pl-call-btn:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 10px 36px rgba(201,168,76,.55);animation:none}
#pl-wa-btn svg,#pl-call-btn svg{flex-shrink:0}
@keyframes pl-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes pl-glow-gold{
  0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 0 rgba(201,168,76,0)}
  50%{box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 22px rgba(201,168,76,.55)}
}
@keyframes pl-glow-dark{
  0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 0 rgba(201,168,76,0)}
  50%{box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 18px rgba(201,168,76,.35)}
}
@media(max-width:480px){
  .hero-headline { font-size: clamp(1.6rem, 7.5vw, 8rem); }
  .hero-headline .word { white-space: nowrap; }
  #pl-contact-btns{bottom:16px;right:16px}
  #pl-wa-btn span,#pl-call-btn span{display:none}
  #pl-wa-btn,#pl-call-btn{padding:.85rem;border-radius:50%}
}

/* ═══════════════ MULTI-PAGE STYLES ═══════════════ */

/* Page hero (sub-pages) */
.page-hero {
  padding: 10rem 5vw 6rem;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,168,76,.09) 0%, transparent 65%),
    var(--black);
  position: relative;
  text-align: center;
  border-bottom: 1px solid rgba(201,168,76,.08);
}
.page-hero-inner { max-width: 800px; margin: 0 auto; }
.page-hero-eyebrow { margin-bottom: 1.2rem; }
.page-hero-title {
  font-family: var(--fh);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.4rem;
}
.page-hero-sub {
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  color: #aaa;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Nav active link */
nav .nav-active { color: var(--gold) !important; }

/* Generic page sections */
.page-section {
  padding: 7rem 5vw;
  position: relative;
}
.page-section.bg-alt {
  background: rgba(201,168,76,.02);
  border-top: 1px solid rgba(201,168,76,.06);
  border-bottom: 1px solid rgba(201,168,76,.06);
}
.page-section-inner { max-width: 1200px; margin: 0 auto; }

/* Features grid (diensten.html) */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
  text-align: left;
}
.feat-item {
  padding: 2rem 1.5rem;
  border: 1px solid rgba(201,168,76,.1);
  background: rgba(201,168,76,.03);
}
.feat-icon { font-size: 2rem; margin-bottom: .8rem; }
.feat-title {
  font-family: var(--fh);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .6rem;
}
.feat-body { font-size: .88rem; color: #999; line-height: 1.65; }

/* Portfolio grid (portfolio.html) */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-top: 1rem;
}
.pf-grid-card {
  padding: 2.5rem 2rem;
  border: 1px solid rgba(201,168,76,.12);
  background: rgba(201,168,76,.03);
  position: relative;
  transition: border-color .3s;
}
.pf-grid-card:hover { border-color: rgba(201,168,76,.35); }
.pf-grid-tag {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .8rem;
}
.pf-grid-name {
  font-family: var(--fh);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: .8rem;
}
.pf-grid-desc { font-size: .88rem; color: #999; line-height: 1.65; margin-bottom: .6rem; }
.pf-grid-meta { font-size: .75rem; color: rgba(201,168,76,.6); letter-spacing: .08em; text-transform: uppercase; }

/* Werkwijze detail steps (werkwijze.html) */
.ww-detail-steps { display: flex; flex-direction: column; gap: 4rem; }
.ww-detail-step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 3rem;
  align-items: start;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ww-detail-step:last-child { border-bottom: none; padding-bottom: 0; }
.ww-ds-num {
  font-family: var(--fh);
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 700;
  color: rgba(201,168,76,.15);
  line-height: 1;
}
.ww-ds-title {
  font-family: var(--fh);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 1rem;
}
.ww-ds-body { font-size: .95rem; color: #aaa; line-height: 1.75; margin-bottom: 1.2rem; }
.ww-ds-list { list-style: none; padding: 0; margin: 0; }
.ww-ds-list li {
  font-size: .85rem;
  color: rgba(201,168,76,.8);
  padding: .3rem 0 .3rem 1.2rem;
  position: relative;
}
.ww-ds-list li::before { content: '→'; position: absolute; left: 0; color: var(--gold); }

/* Reviews page (reviews.html) — redesigned */

/* Centered rating hero */
.rv-hero {
  text-align: center;
  padding: 1.5rem 0 3.5rem;
}
.rv-hero-score {
  font-family: var(--fh);
  font-size: clamp(5rem, 12vw, 8rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: .5rem;
}
.rv-hero-stars {
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: .2em;
  margin-bottom: .85rem;
}
.rv-hero-count {
  font-size: .74rem;
  color: #888;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Keep for homepage carousel */
.rev-summary { text-align: center; padding: 3rem 0 4rem; }
.rev-sum-score { font-family: var(--fh); font-size: clamp(4rem,10vw,7rem); font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: .4rem; }
.rev-sum-stars { font-size: 1.8rem; color: var(--gold); margin-bottom: .6rem; }
.rev-sum-count { font-size: .85rem; color: #888; letter-spacing: .06em; }

/* 3-column reviews grid */
.rv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.rv-card {
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.07);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: border-color .3s, background .3s, transform .3s;
}
.rv-card:hover {
  border-color: rgba(201,168,76,.35);
  background: rgba(201,168,76,.04);
  transform: translateY(-3px);
}
.rv-stars {
  font-size: .88rem;
  color: var(--gold);
  letter-spacing: .1em;
}
.rv-quote {
  font-size: .88rem;
  color: #ccc;
  line-height: 1.65;
  font-style: normal;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
  margin: 0;
}
.rv-author {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: auto;
}
.rv-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: .63rem; font-weight: 700; color: var(--gold); flex-shrink: 0;
  letter-spacing: .04em;
}
.rv-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
}
.rv-role {
  font-size: .74rem;
  color: #777;
  margin-top: .15rem;
}

/* Page CTA section */
.page-cta-section {
  padding: 8rem 5vw;
  text-align: center;
  background:
    radial-gradient(ellipse 55% 50% at 50% 50%, rgba(201,168,76,.06) 0%, transparent 70%),
    var(--black);
}
.page-cta-inner { max-width: 700px; margin: 0 auto; }

/* Responsive: multi-page */
@media (max-width: 900px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
  .pf-grid { grid-template-columns: 1fr; }
  .rv-grid { grid-template-columns: 1fr 1fr; }
  .ww-detail-step { grid-template-columns: 80px 1fr; gap: 1.5rem; }
  .ww-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .features-grid { grid-template-columns: 1fr; }
  .rv-grid { grid-template-columns: 1fr; }
  .ww-detail-step { grid-template-columns: 1fr; gap: .8rem; }
  .ww-ds-num { font-size: 3rem; }
  .ww-steps { grid-template-columns: 1fr; }
}

/* ═══════════════ AI AGENTS ═══════════════ */

  /* 4-column grid for agent cards */
  .agent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.8rem;
    margin-top: 3.5rem;
  }

  .agent-card { display: flex; flex-direction: column; }
  .agent-card .btn { margin-top: auto; }

  /* Icon at top of card */
  .agent-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(201,168,76,.1);
    border: 1px solid rgba(201,168,76,.2);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.1rem;
  }
  .agent-icon svg {
    width: 22px; height: 22px;
    stroke: var(--gold);
  }

  /* Dual-row pricing inside card */
  .agent-pricing {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin: .4rem 0 .2rem;
  }
  .agent-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
  }
  .agent-price-label {
    font-size: .68rem;
    color: #888;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .agent-price-val {
    font-family: var(--fh);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1;
  }
  .agent-price-val sup {
    font-size: .55em;
    vertical-align: super;
    color: var(--gold);
  }
  .agent-price-mo { color: var(--gold); font-size: clamp(1.1rem, 2vw, 1.4rem); }

  .agent-desc {
    font-size: .85rem;
    color: #999;
    line-height: 1.7;
    margin: .8rem 0 1.4rem;
    flex-grow: 1;
  }

  /* Bundle highlight */
  .agent-bundle {
    position: relative;
    overflow: hidden;
    margin-top: 3.5rem;
    border: 1px solid rgba(201,168,76,.35);
    background: linear-gradient(135deg, rgba(201,168,76,.06) 0%, rgba(0,0,0,0) 60%);
    padding: 3rem 3.5rem;
  }
  .agent-bundle-shimmer {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 70% at 80% 50%, rgba(201,168,76,.07) 0%, transparent 70%);
    pointer-events: none;
  }
  .agent-bundle-badge {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #000;
    background: var(--gold);
    padding: .3rem .85rem;
    margin-bottom: 1.8rem;
  }
  .agent-bundle-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
  }
  .agent-bundle-left { flex: 1 1 320px; }
  .agent-bundle-title {
    font-family: var(--fh);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--white);
    margin-bottom: .8rem;
  }
  .agent-bundle-sub { font-size: .9rem; color: #aaa; line-height: 1.65; }
  .agent-bundle-right { flex: 0 1 auto; text-align: center; }
  .agent-bundle-pricing {
    display: flex;
    gap: 2.5rem;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: .6rem;
  }
  .agent-bundle-price-row { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
  .agent-bundle-label {
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #888;
  }
  .agent-bundle-val {
    font-family: var(--fh);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
  }
  .agent-bundle-val sup { font-size: .5em; vertical-align: super; }
  .agent-bundle-saving {
    font-size: .72rem;
    color: rgba(201,168,76,.7);
    letter-spacing: .06em;
    margin-top: .2rem;
  }

  /* Responsive */
  @media (max-width: 1100px) {
    .agent-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .agent-grid { grid-template-columns: 1fr; }
    .agent-bundle { padding: 2rem 1.5rem; }
    .agent-bundle-content { flex-direction: column; gap: 2rem; }
    .agent-bundle-pricing { gap: 1.5rem; }
  }

/* ═══════════════ MARKETING / GROEIDIENSTEN ═══════════════ */
/* Hergebruikt de bestaande .pc kaart; alleen layout-grid + kleine helpers. */
  .svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    max-width: 1200px;
    margin: 0 auto 1.8rem;
    align-items: stretch;
  }
  .svc-grid .pc { display: flex; flex-direction: column; }
  .svc-grid .pc .btn { margin-top: auto; }

  /* Korte pay-off onder de prijs */
  .svc-tagline {
    font-size: .85rem;
    color: #999;
    line-height: 1.65;
    margin: .2rem 0 1.6rem;
  }

  /* "i.p.v." doorgestreepte vanafprijs bij groeipakketten */
  .svc-was {
    font-size: .78rem;
    color: var(--grey-d);
    letter-spacing: .04em;
    margin: .3rem 0 1.6rem;
  }
  .svc-was s { color: var(--grey-dd); margin-left: .25rem; }

  @media (max-width: 900px) {
    .svc-grid { grid-template-columns: 1fr 1fr; max-width: 700px; }
  }
  @media (max-width: 600px) {
    .svc-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  }

  /* ═══════════════════════════════════════════════
     CONVERSIE — TOGGLE · ROI · CONTENT-HIGHLIGHT · INSTAP
  ═══════════════════════════════════════════════ */

  /* Segmented toggle: Eenmalig / Maandelijks */
  .svc-toggle-wrap { text-align: center; margin-bottom: 3.5rem; }
  .svc-toggle {
    display: inline-flex;
    gap: .3rem;
    padding: .35rem;
    border: 1px solid var(--gold-15);
    border-radius: 999px;
    background: var(--black-s);
  }
  .svc-toggle-btn {
    font-family: var(--fb);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--grey-d);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: .8rem 1.7rem;
    border-radius: 999px;
    transition: color .3s, background .3s;
  }
  .svc-toggle-btn:hover { color: var(--grey); }
  .svc-toggle-btn.is-active {
    color: var(--black);
    background: linear-gradient(90deg, var(--gold-d), var(--gold), var(--gold-l));
  }

  /* Panels */
  .svc-panel { display: none; }
  .svc-panel.is-active { display: block; }

  /* In de "Maandelijks"-stand de grote paginatitel verbergen,
     zodat je direct op de diensten uitkomt (minder scrollen). */
  #diensten.hide-hero-head #diensten-hero-head { display: none; }
  #diensten.hide-hero-head .svc-toggle-wrap { margin-top: 0; }

  /* Risk-reversal pill: maandelijks opzegbaar */
  .svc-reassure {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.6rem;
    padding: .55rem 1.3rem;
    border: 1px solid var(--gold-15);
    border-radius: 999px;
    background: var(--gold-5);
    font-family: var(--fb);
    font-size: .72rem;
    letter-spacing: .08em;
    color: var(--gold-l);
  }
  .svc-reassure::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold);
  }

  /* ROI / per-dag framing onder de prijs */
  .svc-roi {
    font-family: var(--fb);
    font-size: .76rem;
    line-height: 1.5;
    color: var(--grey-d);
    margin: -.4rem 0 1.5rem;
  }
  .svc-roi strong { color: var(--gold-l); font-weight: 600; }

  /* Content & Visuals — uitgelicht blok met waarde-vergelijking */
  .content-highlight {
    max-width: 1100px;
    margin: 2.6rem auto 0;
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    border: 1px solid var(--gold-25);
    background: linear-gradient(135deg, #110d00 0%, var(--black-c) 60%);
    overflow: hidden;
    position: relative;
  }
  .content-highlight::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }
  .content-highlight-main { padding: 2.8rem 2.6rem; }
  .content-highlight-aside {
    padding: 2.8rem 2.6rem;
    background: rgba(0,0,0,.35);
    border-left: 1px solid var(--gold-15);
  }
  .content-highlight .pc-badge { position: static; display: inline-block; margin-bottom: 1.3rem; }
  .content-highlight h3 {
    font-family: var(--fh);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 1rem;
  }
  .content-highlight p { color: var(--grey-d); line-height: 1.7; font-size: .9rem; margin-bottom: 1.6rem; }
  .content-tiers { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.9rem; }
  .content-tier {
    font-family: var(--fb); font-size: .72rem; letter-spacing: .03em;
    color: var(--grey); border: 1px solid rgba(255,255,255,.1);
    padding: .5rem .9rem;
  }
  .content-tier b { color: var(--gold-l); font-weight: 600; }
  .content-compare-label {
    font-family: var(--fb);
    font-size: .6rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 1.3rem;
  }
  .content-compare-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .95rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
    font-family: var(--fb); font-size: .82rem; color: var(--grey-d); line-height: 1.5;
  }
  .content-compare-row:last-child { border-bottom: none; }
  .content-compare-row b { font-family: var(--fh); font-size: 1.2rem; color: var(--white); white-space: nowrap; }
  .content-compare-row.is-gold b { color: var(--gold-l); }

  /* Laagdrempelige instap */
  .svc-instap {
    max-width: 760px;
    margin: 3rem auto 0;
    text-align: center;
    border: 1px dashed var(--gold-25);
    background: var(--gold-5);
    padding: 1.8rem 2rem;
  }
  .svc-instap p { color: var(--grey); font-family: var(--fb); font-size: .9rem; line-height: 1.7; margin: 0; }
  .svc-instap b { color: var(--gold-l); font-weight: 600; }

  @media (max-width: 820px) {
    .content-highlight { grid-template-columns: 1fr; }
    .content-highlight-aside { border-left: none; border-top: 1px solid var(--gold-15); }
  }
  @media (max-width: 600px) {
    .svc-toggle-btn { padding: .7rem 1.05rem; font-size: .6rem; letter-spacing: .08em; }
    .content-highlight-main, .content-highlight-aside { padding: 2rem 1.5rem; }
  }