:root{
    --bg: oklch(0.98 0.01 260);
    --surface: #fff;
    --ink: oklch(0.2 0.02 260);
    --ink-soft: oklch(0.45 0.01 260);
    --line: oklch(0.92 0.01 260);
    --accent: oklch(0.55 0.14 250);
    --accent-ink: #fff;
    --radius: 12px;
    --green: oklch(0.65 0.16 145);
    --green-hover: oklch(0.48 0.14 145);
    --orange: oklch(0.65 0.17 50);
    --pink: oklch(0.55 0.18 320);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:var(--accent);text-decoration:none}

  /* Header (identiek aan banners) */
  header.site{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:50}
  header.site .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.35rem;background:none;border:none;padding:8px 0;cursor:pointer;color:inherit;font-family:inherit;text-decoration:none}
  header.site .brand .dot{width:30px;height:30px;border-radius:8px;background:var(--accent);position:relative;overflow:hidden}
  header.site .brand .dot::after{content:'LK';position:absolute;top:50%;left:50%;color:#fff;font-size:14px;font-weight:800;letter-spacing:-0.5px;white-space:nowrap;font-family:inherit;animation:dotLkSlide 7s linear infinite}
  @keyframes dotLkSlide{
    0% { transform:translate(-220%, -50%); }
    42.857% { transform:translate(170%, -50%); }
    42.867%, 100% { transform:translate(-220%, -50%); }
  }
  header.site nav{display:flex;gap:6px;align-items:center}
  header.site nav button, header.site nav a.nav-link{background:none;border:none;padding:8px 14px;border-radius:8px;color:var(--ink-soft);font-weight:500;text-decoration:none;font-family:inherit;font-size:inherit;cursor:pointer;display:inline-block}
  header.site nav a.nav-link[aria-current="page"]{background:oklch(0.95 0.01 260);color:var(--ink)}
  header.site nav .nav-dropdown{position:relative}
  header.site nav .nav-dropdown > button{background:oklch(0.95 0.01 260);color:var(--ink)}
  header.site nav .nav-dropdown-menu{position:absolute;top:100%;left:0;min-width:170px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px;box-shadow:0 8px 24px -8px oklch(0 0 0 / 0.2);display:flex;z-index:100;flex-direction:column;gap:2px;margin-top:4px;opacity:0;visibility:hidden;transition:opacity .18s ease, visibility 0s linear .3s}
  /* Onzichtbare bufferzone van 10px rondom het menu: overbrugt het gat met de
     knop en vergeeft kleine muisuitstapjes naast het menu. */
  header.site nav .nav-dropdown-menu::before{content:'';position:absolute;inset:-10px;z-index:-1}
  header.site nav .nav-dropdown:hover .nav-dropdown-menu,
  header.site nav .nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transition-delay:0s,0s}
  header.site nav .nav-dropdown-menu a{text-align:left;padding:8px 12px;border-radius:6px;color:var(--ink);font-weight:500;white-space:nowrap;width:100%;text-decoration:none;display:block;font-family:inherit;font-size:inherit;cursor:pointer}
  header.site nav .nav-dropdown-menu a:hover{background:oklch(0.95 0.01 260);color:var(--ink)}
  header.site nav .lang-switch{display:inline-flex;align-items:center;margin-left:10px;gap:2px}
  header.site nav .lang-switch button{padding:6px 6px;border:none;background:none;color:oklch(0.72 0.01 260);cursor:pointer;font-family:inherit;font-size:0.82rem;font-weight:500;letter-spacing:0.04em}
  header.site nav .lang-switch button[aria-pressed="true"]{color:var(--ink);font-weight:700}
  header.site nav .lang-switch .sep{display:inline-block;width:1px;height:0.85em;background:var(--line);margin:0 4px;vertical-align:middle}
  header.site nav .nav-main{display:flex;gap:6px;align-items:center}
  header.site nav .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0;border:none;background:none;cursor:pointer;border-radius:8px}
  header.site nav .hamburger:hover{background:oklch(0.95 0.01 260)}
  header.site nav .hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:1px;margin:0 auto;transition:transform .2s,opacity .2s}
  header.site nav .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.site nav .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
  header.site nav .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media (max-width:760px){
    header.site{padding:14px 18px;position:relative}
    header.site nav{gap:4px}
    header.site nav .hamburger{display:flex}
    header.site nav .nav-main{display:none;position:absolute;top:100%;right:18px;flex-direction:column;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:0 10px 30px -10px oklch(0 0 0 / 0.25);z-index:200;min-width:200px;gap:4px;margin-top:6px}
    header.site nav .nav-main.open{display:flex}
    header.site nav .nav-main .nav-dropdown{position:static}
    header.site nav .nav-main .nav-dropdown > button{width:100%;text-align:left;padding:10px 12px}
    header.site nav .nav-main .nav-dropdown-menu{position:static;display:flex;box-shadow:none;border:none;padding:0 0 0 12px;margin-top:2px;min-width:0;background:none;opacity:1;visibility:visible;transition:none}
    header.site nav .nav-main .nav-dropdown-menu::before{display:none}
    header.site nav .nav-main a.nav-link{padding:10px 12px;width:100%;text-align:left}
  }

  /* Page wrap */
  main{max-width:1100px;margin:0 auto;padding:0 32px}

  /*  Hero (edge-to-edge band met grijze achtergrond, zoals banner-preview)  */
  .hero-band{background:oklch(0.93 0.018 240);border-bottom:1px solid var(--line);padding:80px 32px 70px}
  .hero{max-width:1100px;margin:0 auto;text-align:center}
  .hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;letter-spacing:-0.025em;margin-bottom:22px;font-weight:800}
  .hero h1 .accent{color:var(--accent)}
  .hero .sub{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-soft);max-width:680px;margin:0 auto 32px;text-wrap:pretty}
  .hero .cta-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
  .hero-preview{margin:56px auto 0;max-width:900px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 20px 60px -30px oklch(0 0 0 / 0.25)}
  .hero-preview .frame-inner{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--surface)}
  .hero-preview iframe{width:100%;height:100%;border:0;display:block}
  .btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:10px;font-weight:600;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:inherit;font-size:1rem;cursor:pointer}
  .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
  .btn.primary:hover{background:var(--green-hover);border-color:var(--green-hover);color:#fff;filter:none}
  .btn:hover{border-color:var(--accent);color:var(--accent)}

  /* Section heading shared  */
  section.block{padding:60px 0;border-top:1px solid var(--line)}
  section.block:first-of-type{border-top:none}
  /* full-bleed shaded band binnen max-width container */
  section.block.shaded{background:oklch(0.94 0.003 260);box-shadow:0 0 0 100vmax oklch(0.94 0.003 260);clip-path:inset(0 -100vmax);border-top:none}
  section.block.shaded + section.block{border-top:none}
  /* full-bleed donkerblauwe band - gebruikt --accent kleur */
  section.block.darkblue{background:var(--accent);box-shadow:0 0 0 100vmax var(--accent);clip-path:inset(0 -100vmax);border-top:none}
  section.block.darkblue + section.block{border-top:none}
  section.block.darkblue .block-head h2{color:#fff}
  section.block.darkblue .block-head p{color:oklch(0.95 0.03 250)}
  .block-head{text-align:center;margin-bottom:40px}
  .block-head h2{font-size:clamp(1.7rem,2.8vw,2.3rem);letter-spacing:-0.015em;margin-bottom:8px;color:var(--accent)}
  .block-head p{color:var(--ink-soft);max-width:580px;margin:0 auto;text-wrap:pretty}

  /*  Hoe het werkt - 3 stappen*/
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
  .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:10px}
  .step-num{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:6px}
  .step h3{font-size:1.15rem;letter-spacing:-0.01em}
  .step p{color:var(--ink-soft);font-size:0.95rem}

  /* Waarom Looperkit - 4 kernwaarden in een 2x2 grid  */
  .values{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  @media (max-width:680px){.values{grid-template-columns:1fr}}
  .value{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:10px}
  .value .strip{height:6px;border-radius:3px;width:48px}
  .value:nth-child(1) .strip{background:var(--green)}
  .value:nth-child(2) .strip{background:var(--accent)}
  .value:nth-child(3) .strip{background:var(--orange)}
  .value:nth-child(4) .strip{background:var(--pink)}
  .value h3{font-size:1.15rem;letter-spacing:-0.01em}
  .value p{color:var(--ink-soft);font-size:0.95rem}

  /*  Vijf varianten  */
  .variants{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  @media (max-width:980px){.variants{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:680px){.variants{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:480px){.variants{grid-template-columns:1fr}}
  .variant{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;display:flex;flex-direction:column;gap:10px;transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease}
  .variant .strip{height:6px;border-radius:3px;width:44px}
  .variant.v-free .strip{background:var(--green)}
  .variant.v-logo .strip{background:var(--accent)}
  .variant.v-foto .strip{background:var(--orange)}
  .variant.v-text .strip{background:var(--pink)}
  .variant.v-super .strip{background:linear-gradient(90deg,var(--green),var(--accent),var(--pink))}
  .variant h3{font-size:1.1rem;letter-spacing:-0.01em}
  .variant > p{color:var(--ink-soft);font-size:0.9rem;flex:1}
  .variant .price{font-weight:700;color:var(--accent);font-size:1.05rem;margin-top:2px}
  .variant .btn-sm{display:block;background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;font-size:0.88rem;font-weight:600;text-decoration:none;border:1px solid var(--accent);font-family:inherit;width:100%;text-align:center;box-sizing:border-box;transition:background .2s ease, border-color .2s ease}
  .variant .btn-sm:hover{background:var(--green-hover);border-color:var(--green-hover)}
  /* hover op de Probeer-knop laat het hele card-kader oplichten */
  .variant:has(.btn-sm:hover){border-color:#fff;box-shadow:0 0 0 3px oklch(1 0 0 / 0.35), 0 24px 52px -8px oklch(0 0 0 / 0.7);transform:translateY(-6px)}

  /* Voor wie / use-cases - 4 blokjes naast elkaar */
  .usecases{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  @media (max-width:880px){.usecases{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:560px){.usecases{grid-template-columns:1fr}}
  .usecase{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
  .usecase h3{font-size:1.05rem;margin-bottom:6px;letter-spacing:-0.01em}
  .usecase p{color:var(--ink-soft);font-size:0.93rem}

  /* Anti-bezwaren  */
  .faqs{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
  .faq{padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);font-size:0.98rem;display:flex;gap:12px;align-items:flex-start}
  .faq::before{content:'✓';color:var(--green);font-weight:800;flex-shrink:0;line-height:1.4}

  /*  Final CTA  */
  .final{background:var(--accent);color:#fff;text-align:center;padding:64px 32px;border-radius:var(--radius);margin:60px auto 80px;max-width:780px;transition:background .25s ease}
  .final h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-bottom:12px;letter-spacing:-0.015em}
  .final p{color:oklch(0.95 0.03 250);max-width:540px;margin:0 auto 26px;transition:color .25s ease}
  .final .btn.primary{background:#fff;color:var(--accent);border-color:#fff;transition:color .25s ease}
  /* hover op de Begin gratis-knop kleurt het hele vlak groen */
  .final:has(.btn.primary:hover){background:var(--green-hover)}
  .final:has(.btn.primary:hover) .btn.primary{color:var(--green-hover)}

  /*  Footer */
  footer.site{padding:30px 32px;border-top:1px solid var(--line);text-align:center;color:var(--ink-soft);font-size:0.85rem;background:var(--surface)}

  @media (max-width:680px){
    .hero{padding:48px 0 40px}
    section.block{padding:44px 0}
  }