:root{--forest:#0a2620;--forest2:#0f3b32;--ink:#14302a;--muted:#5f7a72;--line:#e4ede9;
    --mint:#6ee7b7;--emerald:#10b981;--emerald-d:#0f7a5c;--teal:#0d9488;--teal-d:#0f766e;
    --soft:#f3f9f6;--red:#d4564d;--red-bg:#fdeceb;--red-ink:#9a342d;--amber:#d9962a;--amber-bg:#fdf3e2;--amber-ink:#8a6d1a;}
  *{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
  body{font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;color:var(--ink);line-height:1.6;background:#fff}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1120px;margin:0 auto;padding:0 22px}
  .btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-weight:700;font-size:14px;padding:12px 20px;border-radius:12px;color:#fff;background:linear-gradient(120deg,var(--emerald),var(--teal));box-shadow:0 12px 28px -12px rgba(13,148,136,.6);transition:.15s}
  .btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
  .btn.ghost{background:transparent;color:#eafaf4;border:1px solid rgba(255,255,255,.28);box-shadow:none}
  .btn.gold{background:linear-gradient(120deg,#f0c560,#d9962a);color:#3a2c08;box-shadow:0 12px 28px -12px rgba(217,150,42,.6)}
  .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:21px;color:var(--teal-d);letter-spacing:-.02em}
  .logo svg{width:30px;height:30px;flex:none}
  .eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--emerald-d);font-weight:800;text-align:center}
  h2.sec{font-size:30px;font-weight:800;color:var(--ink);text-align:center;margin:8px auto 8px;letter-spacing:-.02em;max-width:18ch}
  .lead{text-align:center;color:var(--muted);max-width:62ch;margin:0 auto;font-size:16px}
  section.s{padding:64px 0}.alt{background:var(--soft)}

  /* NAV */
  nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
  .navlinks{display:flex;gap:20px;font-size:14px;font-weight:600;color:var(--muted)}
  .navlinks a{cursor:pointer}.navlinks a:hover{color:var(--ink)}
  @media(max-width:920px){.navlinks{display:none}}

  /* WATERMARK */
  .wm{background:#fff7e6;color:#8a6d1a;font-size:12px;text-align:center;padding:8px;font-weight:600;border-bottom:1px solid #f0dca6}

  /* HERO */
  .hero{position:relative;background:radial-gradient(120% 110% at 12% -10%, #18483c 0%, var(--forest2) 46%, var(--forest) 100%);color:#eafaf4;overflow:hidden}
  .hero .grid{position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.9))}
  .hero .wrap{position:relative;padding:74px 22px 70px;text-align:center}
  .kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);font-weight:800}
  .hero h1{font-size:46px;line-height:1.08;font-weight:800;margin:16px auto 14px;letter-spacing:-.025em;max-width:17ch}
  .hero p.sub{font-size:18px;color:#bfe0d4;max-width:58ch;margin:0 auto;font-weight:400}
  .hero .cta{display:flex;gap:12px;margin-top:28px;justify-content:center;flex-wrap:wrap}
  .trust{margin-top:24px;font-size:13px;color:#9fc2b5}
  .trust .badge{background:rgba(16,185,129,.16);color:var(--mint);border:1px solid rgba(16,185,129,.4);padding:3px 10px;border-radius:999px;font-weight:800;font-size:11px}
  @media(max-width:760px){.hero h1{font-size:33px}}

  /* TICKER */
  .tickerband{background:var(--forest);color:#9fc2b5;overflow:hidden;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.06)}
  .ticker{display:inline-block;padding:10px 0;animation:scrollx 40s linear infinite}
  .ticker span{margin:0 26px;font-size:12.5px;font-weight:600}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-100%)}}

  /* TILES */
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
  .tile{border:1px solid var(--line);border-radius:16px;padding:24px;background:#fff;box-shadow:0 18px 44px -34px rgba(10,38,32,.4)}
  .tile .ic{font-size:26px}.tile .big{font-size:20px;font-weight:800;color:var(--ink);margin:8px 0 4px}
  .tile p{font-size:13.5px;color:var(--muted)}
  @media(max-width:820px){.tiles{grid-template-columns:1fr}}

  /* SCORE / KPI cards */
  .score{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
  .sc{background:var(--forest);color:#fff;border-radius:16px;padding:22px;text-align:center}
  .sc .big{font-size:30px;font-weight:800;color:var(--mint);line-height:1;font-variant-numeric:tabular-nums}
  .sc .big.warn{color:#ffd591}.sc p{font-size:12px;color:#a7c6bb;margin-top:8px}
  @media(max-width:760px){.score{grid-template-columns:1fr 1fr}}

  /* ENGINE steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
  .step{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff;position:relative}
  .step .n{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald-d)}
  .step h4{font-size:16px;color:var(--ink);margin:6px 0 6px}.step p{font-size:13px;color:var(--muted)}
  @media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}

  /* AGENT demo card */
  .agentwrap{max-width:660px;margin:34px auto 0}
  .agent{border:1px solid #bfe9d6;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 22px 54px -30px rgba(13,148,136,.6)}
  .ah{background:linear-gradient(90deg,var(--teal-d),var(--emerald));color:#fff;padding:12px 18px;font-weight:800;font-size:13.5px;display:flex;justify-content:space-between;align-items:center;gap:8px}
  .ah .live{font-size:11px;font-weight:800;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);padding:4px 10px;border-radius:999px}
  .abody{padding:18px}
  .clientline{font-size:13px;color:var(--muted);margin-bottom:12px}.clientline b{color:var(--ink)}
  .draft{border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:0 11px 11px 0;background:var(--soft);padding:13px 15px;font-size:14px;color:var(--ink);line-height:1.6}
  .blk{margin-top:13px}.blk .lbl{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--emerald-d);margin-bottom:4px}
  .reason{background:#f6faf8;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13px;color:var(--muted)}
  .suggest{background:#fff;border:1px dashed #bfe9d6;border-radius:10px;padding:11px 13px;font-size:13.5px}
  .gatebtns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
  .gb{font-weight:700;font-size:13px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
  .gb.ok{background:var(--emerald);color:#fff;border-color:var(--emerald)}.gb.ed{background:var(--amber-bg);color:var(--amber-ink);border-color:#f0dca6}

  /* DEMO embed */
  .demoframe{max-width:980px;margin:30px auto 0;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(10,38,32,.5)}
  .demoframe .bar{background:var(--forest);padding:11px 16px;display:flex;align-items:center;gap:8px}
  .demoframe .bar .d{width:11px;height:11px;border-radius:50%;background:#2c5247}.demoframe .bar .u{margin-left:12px;font-size:12px;color:#9fc2b5;font-family:ui-monospace,monospace}
  .demoframe img{display:block;width:100%}
  .demonote{text-align:center;margin-top:18px}
  .shots{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px;align-items:start}
  @media(max-width:760px){.shots{grid-template-columns:1fr;gap:34px}}
  .shot{margin:0}
  .shot img{display:block;width:100%;border:1px solid var(--line);border-radius:16px;box-shadow:0 26px 56px -34px rgba(10,38,32,.45)}
  .shot figcaption{font-size:14.5px;color:var(--muted);margin-top:15px;line-height:1.55}
  .shot figcaption b{color:var(--ink)}
  .podcard{max-width:760px;margin:28px auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:0 26px 56px -36px rgba(10,38,32,.4)}
  .podmeta{display:flex;align-items:center;gap:14px}
  .podlogo{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--mint),var(--teal));display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}
  .podtitle{font-weight:800;font-size:16px;color:var(--ink);line-height:1.3}
  .podsub{font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:600}
  .podcard audio{width:100%;margin-top:16px}
  .podchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
  .podchips span{font-size:11.5px;font-weight:700;color:var(--teal);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px 11px}

  /* INTEGRATIONS */
  .ints{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
  .int{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff;transition:.15s}
  .int:hover{border-color:var(--mint);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(16,185,129,.5)}
  .int .ic{font-size:24px}.int h4{font-size:15px;color:var(--ink);margin:8px 0 4px}.int p{font-size:12.5px;color:var(--muted)}
  .st{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;display:inline-block;margin-top:10px}
  .st.live{background:#e8f8f1;color:var(--emerald-d)}.st.road{background:var(--amber-bg);color:var(--amber-ink)}
  @media(max-width:820px){.ints{grid-template-columns:1fr 1fr}}

  /* COMPARISON TABLE */
  .cmpwrap{overflow-x:auto;margin-top:30px}
  .cmp{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
  .cmp th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line);padding:11px 12px}
  .cmp th.us{color:var(--emerald-d)}
  .cmp td{padding:11px 12px;border-bottom:1px solid var(--line)}.cmp td.dim{font-weight:700;color:var(--ink)}
  .cmp .y{color:var(--emerald-d);font-weight:800}.cmp .n{color:#b9a0a0;font-weight:800}.cmp .m{color:var(--amber-ink);font-weight:800}
  .cmp .uscol{background:#f3f9f6;text-align:center}.cmp td.mk{text-align:center}

  /* PLANS */
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
  .plan{border:1px solid var(--line);border-radius:18px;padding:26px;background:#fff;position:relative}
  .plan.pop{border-color:var(--emerald);box-shadow:0 20px 46px -26px rgba(16,185,129,.5)}
  .badge2{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(120deg,var(--emerald),var(--teal));color:#fff;font-size:11px;font-weight:800;padding:3px 13px;border-radius:999px}
  .pn{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--emerald-d)}
  .pp{font-size:32px;font-weight:800;color:var(--ink);margin:6px 0 14px}.pp span{font-size:13px;font-weight:500;color:var(--muted)}
  .plan ul{list-style:none}.plan li{font-size:13.5px;color:var(--ink);padding:8px 0 8px 24px;position:relative;border-top:1px solid var(--line)}
  .plan li:before{content:"✓";position:absolute;left:0;color:var(--emerald);font-weight:800}
  @media(max-width:820px){.plans{grid-template-columns:1fr}}

  /* TRUST cards */
  .trustgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
  .tc{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff}
  .tc .ic{font-size:22px}.tc h4{font-size:15px;color:var(--ink);margin:8px 0 5px}.tc p{font-size:13.5px;color:var(--muted)}
  @media(max-width:760px){.trustgrid{grid-template-columns:1fr}}

  /* TEAM */
  .team{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
  .mem{border:1px solid var(--line);border-radius:16px;padding:22px;background:#fff;text-align:center}
  .mem .av{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;font-size:24px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--mint),var(--teal))}
  .mem h4{font-size:16px;color:var(--ink)}.mem .role{font-size:12px;color:var(--emerald-d);font-weight:700;margin:2px 0 8px}.mem p{font-size:12.5px;color:var(--muted)}
  @media(max-width:760px){.team{grid-template-columns:1fr}}

  /* ROADMAP */
  .road{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:30px}
  .rstep{border:1px solid var(--line);border-radius:13px;padding:16px;background:#fff;text-align:center}
  .rstep .ph{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--emerald-d)}
  .rstep .t{font-size:13px;color:var(--ink);font-weight:700;margin:5px 0}.rstep .c{font-size:11px;color:var(--muted)}
  .rstep.now{background:linear-gradient(160deg,#fff,#eafaf4);border-color:#bfe9d6}
  @media(max-width:820px){.road{grid-template-columns:1fr 1fr}}

  /* CTA + FOOTER */
  .ctaband{background:radial-gradient(120% 160% at 50% -40%, var(--forest2), var(--forest));color:#eafaf4;text-align:center;padding:64px 0}
  .ctaband h2{font-size:32px;font-weight:800;color:#fff;letter-spacing:-.02em}.ctaband p{color:#9fc2b5;max-width:50ch;margin:10px auto 24px}
  footer{background:#06160f;color:#7e9a8d;font-size:12.5px;padding:30px 0}
  footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

  /* ---- multi-page toevoegingen ---- */
  a.logo{text-decoration:none}
  .navlinks a.on{color:var(--ink);font-weight:800}
  .pagehero{background:radial-gradient(120% 130% at 12% -20%, #18483c 0%, var(--forest2) 55%, var(--forest) 100%);color:#eafaf4;text-align:center;padding:58px 22px 54px;position:relative;overflow:hidden}
  .pagehero .grid{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.85))}
  .pagehero .wrap{position:relative}
  .pagehero .kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);font-weight:800}
  .pagehero h1{font-size:36px;font-weight:800;letter-spacing:-.025em;margin:13px auto 10px;max-width:21ch;line-height:1.12}
  .pagehero p{color:#bfe0d4;max-width:58ch;margin:0 auto;font-size:16.5px}
  @media(max-width:760px){.pagehero h1{font-size:28px}}
  .tile.link{transition:.15s;display:block}
  .tile.link:hover{border-color:var(--mint);transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(16,185,129,.45)}
  .tile .arrow{color:var(--teal-d);font-weight:800;font-size:13px;margin-top:12px;display:inline-block}
  footer a{color:#bfe0d4}

  .tiles.duo{grid-template-columns:1fr 1fr;max-width:880px;margin-left:auto;margin-right:auto}
  @media(max-width:760px){.tiles.duo{grid-template-columns:1fr}}