{"id":3704,"date":"2024-10-21T09:25:24","date_gmt":"2024-10-21T09:25:24","guid":{"rendered":"https:\/\/simple-simon.com\/home-v2\/"},"modified":"2026-10-27T07:16:48","modified_gmt":"2026-10-27T07:16:48","slug":"home-v2","status":"publish","type":"page","link":"https:\/\/simple-simon.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\n<!-- =====================================================================\n     Simple-Simon | hero of the current homepage, English version\n     Paste this whole file into ONE Custom HTML block.\n     All styling sits inside .ssh-hero, so it cannot affect anything else\n     on your page. No JavaScript.\n\n     The copy is taken literally from your own English homepage.\n\n     All images, links and copy come from your own site.\n     ===================================================================== -->\n\n<style>\n.ssh-hero{\n  --ssh-vlak:#0f4054;\n  --ssh-cyan:#4ec0e7;\n  --ssh-wit:#ffffff;\n  --ssh-zacht:#cfe4ec;\n\n  background:var(--ssh-vlak);\n  color:var(--ssh-wit);\n  font-family:\"Montserrat\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\n  -webkit-font-smoothing:antialiased;\n  padding:64px 0 56px;\n}\n.ssh-hero,.ssh-hero *{box-sizing:border-box}\n.ssh-hero p{margin:0}\n.ssh-hero a{text-decoration:none;color:inherit}\n.ssh-hero :focus-visible{outline:3px solid #ff6a00;outline-offset:3px;border-radius:4px}\n\n.ssh-wrap{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;gap:40px;align-items:center}\n@media (min-width:980px){ .ssh-wrap{grid-template-columns:1fr 1fr;gap:48px} }\n\n.ssh-hero h1{\n  margin:0 0 20px;\n  font-size:clamp(32px,4.4vw,48px);\n  line-height:1.12;\n  letter-spacing:-0.015em;\n  font-weight:800;\n  color:var(--ssh-wit);\n}\n.ssh-sub{font-size:clamp(18px,2.1vw,22px);line-height:1.45;margin-bottom:22px !important}\n.ssh-met{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-0.01em;margin-bottom:14px !important}\n.ssh-claim{font-style:italic;font-weight:700;color:var(--ssh-cyan);font-size:17px;margin-bottom:26px !important}\n\n.ssh-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:470px;margin-bottom:30px}\n@media (max-width:520px){ .ssh-knoppen{grid-template-columns:1fr} }\n.ssh-knop{\n  display:flex;align-items:center;justify-content:center;text-align:center;\n  padding:14px 18px;border-radius:6px;font-weight:700;font-size:16px;color:#fff;\n  background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);\n  background-origin:border-box;\n  transition:filter .15s ease,transform .15s ease;\n}\n.ssh-knop:hover{filter:brightness(1.06);transform:translateY(-1px)}\n\n.ssh-visual img{width:100%;height:auto;display:block}\n\n.ssh-onder{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px}\n.ssh-badge img{height:46px;width:auto;display:block}\n.ssh-rating{\n  display:inline-flex;align-items:center;gap:9px;\n  background:#fff;color:#04313c;border-radius:6px;padding:8px 14px;\n  font-size:14.5px;font-weight:600;\n}\n.ssh-sterren{display:flex;gap:2px}\n\n@media (max-width:979px){\n  .ssh-hero{padding:48px 0 40px}\n  .ssh-onder{justify-content:flex-start}\n}\n@media (prefers-reduced-motion: reduce){\n  .ssh-knop{transition:none}\n}\n<\/style>\n\n<section class=\"ssh-hero\">\n  <div class=\"ssh-wrap\">\n\n    <div>\n      <h1>Instant grip on your field service.<\/h1>\n\n      <p class=\"ssh-sub\">\n        Never lose a job sheet again.<br>\n        Never miss out on revenue again.\n      <\/p>\n\n      <p class=\"ssh-met\">With Simple-Simon<\/p>\n\n      <p class=\"ssh-claim\">No contract, on the road in no time<\/p>\n\n      <div class=\"ssh-knoppen\">\n        <a class=\"ssh-knop\" href=\"https:\/\/simple-simon.com\/en\/features\/job-sheet-app\/\">Job sheet App<\/a>\n        <a class=\"ssh-knop\" href=\"https:\/\/simple-simon.com\/en\/features\/digital-planboard\/\">Digital Planboard<\/a>\n        <a class=\"ssh-knop\" href=\"https:\/\/simple-simon.com\/en\/hour-registration-pro\/\">Hour registration<\/a>\n        <a class=\"ssh-knop\" href=\"https:\/\/simple-simon.com\/en\/asset-management-pro\/\">Asset Management<\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"ssh-visual\">\n      <img decoding=\"async\" src=\"https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/08\/Customer-Case-Announcement-1-NL-e1787227719900.webp\"\n           alt=\"Simple-Simon job sheet app on desktop, tablet and smartphone\"\n           loading=\"lazy\">\n\n      <div class=\"ssh-onder\">\n        <a class=\"ssh-badge\" href=\"https:\/\/apps.apple.com\/nl\/app\/simple-simon\/id897884395\">\n          <img decoding=\"async\" src=\"https:\/\/simple-simon.com\/wp-content\/uploads\/2024\/04\/appstore.png.webp\" alt=\"Download on the App Store\" loading=\"lazy\">\n        <\/a>\n        <a class=\"ssh-badge\" href=\"https:\/\/play.google.com\/store\/apps\/details?id=net.simplesimon.simon\">\n          <img decoding=\"async\" src=\"https:\/\/simple-simon.com\/wp-content\/uploads\/2024\/04\/playstore.png.webp\" alt=\"Get it on Google Play\" loading=\"lazy\">\n        <\/a>\n\n        <span class=\"ssh-rating\">\n          <span class=\"ssh-sterren\" aria-hidden=\"true\">\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\"><path d=\"M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z\" fill=\"#f97617\"\/><\/svg>\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\"><path d=\"M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z\" fill=\"#f97617\"\/><\/svg>\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\"><path d=\"M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z\" fill=\"#f97617\"\/><\/svg>\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\"><path d=\"M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z\" fill=\"#f97617\"\/><\/svg>\n            <svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\"><path d=\"M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L1.5 7.7l5.9-.9z\" fill=\"#f97617\"\/><\/svg>\n          <\/span>\n          4.8\/5 rated\n        <\/span>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | block: Simple-Simon is perfect for...\r\n     Paste this entire file into ONE Custom HTML block on your page.\r\n     There is no <html>, <head> or <body>: your page already has those.\r\n     This block is separate from the other six and has no shared base block.\r\n     ===================================================================== -->\r\n\r\n<style>\r\n\/* =====================================================================\r\n   Simple-Simon | block: Simple-Simon is perfect for...\r\n   Light by default, so it matches the other blocks.\r\n   Everything is scoped within .ss-sectoren, so this CSS does not affect\r\n   anything else on your page. No JavaScript required.\r\n   ===================================================================== *\/\r\n.ss-sectoren{\r\n  \/* swap this line with #ffffff if the block is placed next to a light blue block *\/\r\n  --ss-vlak:#e5f5fa;\r\n  --ss-kaart:#ffffff;\r\n  --ss-tekst:#04313c;\r\n  --ss-tekst-zacht:#2a5468;\r\n  --ss-lijn:#c3dfeb;\r\n  --ss-icoon:#2a9fc0;\r\n  --ss-accent:#42a8cf;\r\n  --ss-schaduw:0 8px 24px rgba(4,49,60,.10);\r\n\r\n  background:var(--ss-vlak);\r\n  color:var(--ss-tekst);\r\n  font-family:\"Montserrat\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  padding:56px 0;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\n\r\n\/* dark mode from the theme *\/\r\nbody.theme-dark .ss-sectoren{\r\n  --ss-vlak:#0f4054;\r\n  --ss-kaart:#14566a;\r\n  --ss-tekst:#eef8fb;\r\n  --ss-tekst-zacht:#bcdbe7;\r\n  --ss-lijn:rgba(174,214,230,.26);\r\n  --ss-icoon:#00cdef;\r\n  --ss-accent:#4ec0e7;\r\n  --ss-schaduw:0 8px 24px rgba(0,0,0,.38);\r\n}\r\n\r\n.ss-sectoren,.ss-sectoren *{box-sizing:border-box}\r\n.ss-sectoren h2{margin:0 0 10px;font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.015em;font-weight:800;color:var(--ss-tekst)}\r\n.ss-sectoren p{margin:0}\r\n.ss-sectoren a{text-decoration:none;color:inherit}\r\n.ss-sectoren :focus-visible{outline:3px solid #ff6a00;outline-offset:3px;border-radius:4px}\r\n\r\n.ss-sectoren .ss-wrap{max-width:1100px;margin:0 auto;padding:0 24px}\r\n.ss-sectoren .ss-lead{color:var(--ss-tekst-zacht);max-width:58ch}\r\n\r\n.ss-vakken{margin-top:32px;display:grid;gap:12px}\r\n@media (min-width:600px){ .ss-vakken{grid-template-columns:1fr 1fr} }\r\n@media (min-width:980px){ .ss-vakken{grid-template-columns:repeat(4,1fr)} }\r\n\r\n.ss-vak{\r\n  display:flex;flex-direction:column;gap:10px;\r\n  background:var(--ss-kaart);border:1px solid var(--ss-lijn);border-radius:12px;\r\n  padding:18px;min-height:112px;\r\n  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;\r\n}\r\n.ss-vak:hover{border-color:var(--ss-accent);box-shadow:var(--ss-schaduw);transform:translateY(-3px)}\r\n.ss-vak svg{color:var(--ss-icoon);flex:none}\r\n.ss-vak b{font-size:15.5px;font-weight:700;line-height:1.3;color:var(--ss-tekst)}\r\n\r\n\/* the eighth tile: the alternative, same size but clearly different *\/\r\n.ss-ander{background:transparent;border-style:dashed}\r\n.ss-ander:hover{background:var(--ss-kaart)}\r\n.ss-ander b{color:var(--ss-tekst-zacht);font-weight:600}\r\n.ss-ander:hover b{color:var(--ss-tekst)}\r\n.ss-mee{font-size:13.5px;color:var(--ss-accent);font-weight:700;margin-top:auto}\r\n\r\n@media (max-width:599px){\r\n  .ss-sectoren{padding:44px 0}\r\n  .ss-vak{min-height:0;padding:16px}\r\n}\r\n@media (prefers-reduced-motion: reduce){\r\n  .ss-vak{transition:none}\r\n}\r\n<\/style>\r\n\r\n<section class=\"ss-sectoren\" id=\"ss-sectoren\">\r\n  <div class=\"ss-wrap\">\r\n    <h2>Simple-Simon is perfect for\u2026<\/h2>\r\n    <p class=\"ss-lead\">Seven industries where we serve the most companies. Do you work in a different industry? You still belong here.<\/p>\r\n\r\n    <div class=\"ss-vakken\" id=\"ss-vakken\">\r\n      <a class=\"ss-vak\" data-i=\"0\" href=\"https:\/\/simple-simon.com\/en\/industries\/installation\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"12\" rx=\"2.5\"><\/rect><path d=\"M8 8v12M12 8v12M16 8v12\"><\/path><path d=\"M8 5c0-1.2 1.5-1.2 1.5-2.4\"><\/path><path d=\"M14.5 5c0-1.2 1.5-1.2 1.5-2.4\"><\/path><\/svg>\r\n        <b>Installation and climate technology<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"1\" href=\"https:\/\/simple-simon.com\/en\/industries\/security\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2.8l7.5 3v5.4c0 4.7-3.2 8.4-7.5 10-4.3-1.6-7.5-5.3-7.5-10V5.8z\"><\/path><path d=\"M12.8 7.6L9.8 12.4h2.9l-.5 3.9 3.2-4.9h-2.9z\"><\/path><\/svg>\r\n        <b>Security and electrical engineering<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"2\" href=\"https:\/\/simple-simon.com\/sectoren\/deur-poorttechniek\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3.2\" y=\"3.5\" width=\"17.6\" height=\"17\" rx=\"2\"><\/rect><path d=\"M3.2 8.2h17.6M3.2 12.5h17.6M3.2 16.8h17.6\"><\/path><path d=\"M14.5 18.6h3\"><\/path><\/svg>\r\n        <b>Door and gate technology<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"3\" href=\"https:\/\/simple-simon.com\/en\/industries\/machine\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"3.4\"><\/circle><path d=\"M12 2.6v2.8M12 18.6v2.8M2.6 12h2.8M18.6 12h2.8M5.3 5.3l2 2M16.7 16.7l2 2M18.7 5.3l-2 2M7.3 16.7l-2 2\"><\/path><\/svg>\r\n        <b>Machine maintenance<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"4\" href=\"https:\/\/simple-simon.com\/en\/industries\/coffee\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 10.5h12V16a4 4 0 01-4 4H8a4 4 0 01-4-4z\"><\/path><path d=\"M16 12h1.8a2.6 2.6 0 010 5.2H16\"><\/path><path d=\"M7.5 3.2v3M11 3.2v3\"><\/path><\/svg>\r\n        <b>Coffee machines and commercial kitchen equipment<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"5\" href=\"https:\/\/simple-simon.com\/en\/industries\/sewer-technology\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 3v8\"><\/path><path d=\"M8 8l4 4 4-4\"><\/path><path d=\"M3.5 15c1.5-1.3 3-1.3 4.5 0s3 1.3 4.5 0 3-1.3 4.5 0 3 1.3 4.5 0\"><\/path><path d=\"M3.5 19c1.5-1.3 3-1.3 4.5 0s3 1.3 4.5 0 3-1.3 4.5 0 3 1.3 4.5 0\"><\/path><\/svg>\r\n        <b>Sewer services<\/b><\/a>\r\n\r\n      <a class=\"ss-vak\" data-i=\"6\" href=\"https:\/\/simple-simon.com\/en\/industries\/fire-safety\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"5\" y=\"4\" width=\"14\" height=\"17\" rx=\"2\"><\/rect><path d=\"M9 3.5h6a1 1 0 011 1v1H8v-1a1 1 0 011-1z\"><\/path><path d=\"M8.5 12.5l2 2 4-4.5\"><\/path><path d=\"M8 17h6\"><\/path><\/svg>\r\n        <b>Inspections and testing<\/b><\/a>\r\n\r\n      <a class=\"ss-vak ss-ander\" href=\"https:\/\/simple-simon.com\/en\/industries\/other-sectors\/\">\r\n        <svg width=\"24\" height=\"24\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3.4\" y=\"3.4\" width=\"7.2\" height=\"7.2\" rx=\"1.8\"><\/rect><rect x=\"13.4\" y=\"3.4\" width=\"7.2\" height=\"7.2\" rx=\"1.8\"><\/rect><rect x=\"3.4\" y=\"13.4\" width=\"7.2\" height=\"7.2\" rx=\"1.8\"><\/rect><path d=\"M17 13.9v6.2M13.9 17h6.2\"><\/path><\/svg>\r\n        <b>Is your industry not listed?<\/b>\r\n        <span class=\"ss-mee\">View other industries<\/span>\r\n      <\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\n\n\n\n\n\t<section class=\"theme-section  theme-video-banner__wrapper  theme-p-sm-t theme-p-b mb-5 mb-md-0\">\n\t\t<div class=\"container\">\n\n\t\t\t<div class=\"row justify-content-center\">\n\t\t\t\t\t\t\t\t\t<div class=\"col-md-8\">\n\t\t\t\t\t\t<div class=\"theme-video-banner__title\">\n\t\t\t\t\t\t\t<p><iframe loading=\"lazy\" title=\"Simple-Simon | EN\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Io6TFTnVX9E?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t<\/section>\n\n\n<!-- =====================================================================\r\n     Simple-Simon | block: Recognise this?\r\n     Paste this entire file into ONE Custom HTML block on your page.\r\n     There is no <html>, <head> or <body>: your page already has those.\r\n     All styling is scoped within .ss-herken, so this block does not affect\r\n     anything else on your page.\r\n     ===================================================================== -->\r\n\r\n<style>\r\n.ss-herken{\r\n  \/* swap with #ffffff if the block is placed next to a light blue block *\/\r\n  --ss-vlak:#e5f5fa;\r\n  --ss-nu:#ffffff;\r\n  --ss-straks:#04313c;\r\n  --ss-tekst:#04313c;\r\n  --ss-tekst-zacht:#2a5468;\r\n  --ss-lijn:#c3dfeb;\r\n  --ss-lijn-donker:rgba(174,214,230,.20);\r\n  --ss-kop-straks:#9fcddc;\r\n  --ss-vink:#4ec0e7;\r\n\r\n  background:var(--ss-vlak);\r\n  color:var(--ss-tekst);\r\n  font-family:\"Montserrat\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  padding:64px 0;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\n\r\n\/* dark mode from the theme *\/\r\nbody.theme-dark .ss-herken{\r\n  --ss-vlak:#0f4054;\r\n  --ss-nu:#06323c;\r\n  --ss-straks:#15718a;\r\n  --ss-tekst:#eef8fb;\r\n  --ss-tekst-zacht:#bcdbe7;\r\n  --ss-lijn:rgba(174,214,230,.26);\r\n  --ss-lijn-donker:rgba(255,255,255,.18);\r\n  --ss-kop-straks:#d6ecf3;\r\n}\r\n\r\n.ss-herken,.ss-herken *{box-sizing:border-box}\r\n.ss-herken h2{margin:0 0 28px;font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.015em;font-weight:800;color:var(--ss-tekst)}\r\n.ss-herken .ss-wrap{max-width:1100px;margin:0 auto;padding:0 24px}\r\n\r\n\/* ---------- the table ---------- *\/\r\n\/* table-layout fixed + 50% per column keeps both halves exactly the same width,\r\n   regardless of how long the sentences are *\/\r\n.ss-tabel{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:4px 0;text-align:left}\r\n.ss-tabel th{width:50%}\r\n.ss-tabel caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\r\n\r\n.ss-tabel th{\r\n  font-size:18.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;\r\n  padding:24px 26px 16px;vertical-align:bottom;\r\n}\r\n.ss-tabel td{\r\n  font-size:16px;line-height:1.45;font-weight:400;\r\n  padding:18px 26px;vertical-align:middle;\r\n}\r\n.ss-tabel th:first-child,.ss-tabel td:first-child{background:var(--ss-nu);color:var(--ss-tekst-zacht)}\r\n.ss-tabel th:last-child,.ss-tabel td:last-child{background:var(--ss-straks);color:#fff;font-weight:600}\r\n.ss-tabel th:first-child{color:var(--ss-tekst-zacht);border-bottom:1px solid var(--ss-lijn)}\r\n.ss-tabel th:last-child{color:var(--ss-kop-straks);border-bottom:1px solid var(--ss-lijn-donker)}\r\n.ss-tabel tbody tr:not(:last-child) td:first-child{border-bottom:1px solid var(--ss-lijn)}\r\n.ss-tabel tbody tr:not(:last-child) td:last-child{border-bottom:1px solid var(--ss-lijn-donker)}\r\n\r\n.ss-tabel thead th:first-child{border-radius:24px 0 0 0}\r\n.ss-tabel thead th:last-child{border-radius:0 24px 0 0}\r\n.ss-tabel tbody tr:last-child td:first-child{border-radius:0 0 0 24px}\r\n.ss-tabel tbody tr:last-child td:last-child{border-radius:0 0 24px 0}\r\n\r\n.ss-tabel td:last-child{position:relative;padding-left:52px}\r\n.ss-tabel td:last-child::before{\r\n  content:\"\";position:absolute;left:24px;top:50%;width:16px;height:12px;margin-top:-7px;\r\n  background:var(--ss-vink);\r\n  -webkit-mask:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 20 16'><path d='M2 8.5l5 5 11-12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'\/>\") center\/contain no-repeat;\r\n  mask:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 20 16'><path d='M2 8.5l5 5 11-12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'\/>\") center\/contain no-repeat;\r\n}\r\n\r\n\/* ---------- below 820px: show each problem with its solution underneath ---------- *\/\r\n@media (max-width:819px){\r\n  .ss-herken{padding:48px 0}\r\n  .ss-tabel,.ss-tabel tbody,.ss-tabel tr,.ss-tabel td{display:block;width:100%}\r\n  .ss-tabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}\r\n  .ss-tabel tr{margin-bottom:12px}\r\n  .ss-tabel td{padding:16px 20px;border-bottom:0 !important}\r\n  .ss-tabel td:first-child{border-radius:14px 14px 0 0 !important}\r\n  .ss-tabel td:last-child{border-radius:0 0 14px 14px !important;padding-left:46px}\r\n  .ss-tabel td:last-child::before{left:20px}\r\n  .ss-tabel td::after{\r\n    display:block;margin-top:8px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7;\r\n  }\r\n  .ss-tabel td:first-child::after{content:\"How it works now\"}\r\n  .ss-tabel td:last-child::after{content:\"With Simple-Simon\"}\r\n}\r\n\r\n\/* ---------- animation only when JavaScript is running ----------\r\n   Without this condition, the text would remain at opacity:0 for\r\n   anyone who reads the page without scrolling, including crawlers\r\n   that render the page but never scroll. *\/\r\n.ss-herken.ss-js .ss-tabel tbody tr{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}\r\n.ss-herken.ss-js.ss-go .ss-tabel tbody tr{opacity:1;transform:none}\r\n.ss-herken.ss-js.ss-go .ss-tabel tbody tr:nth-child(2){transition-delay:.1s}\r\n.ss-herken.ss-js.ss-go .ss-tabel tbody tr:nth-child(3){transition-delay:.2s}\r\n.ss-herken.ss-js.ss-go .ss-tabel tbody tr:nth-child(4){transition-delay:.3s}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .ss-herken.ss-js .ss-tabel tbody tr{opacity:1 !important;transform:none !important;transition:none !important}\r\n}\r\n<\/style>\r\n\r\n<section class=\"ss-herken\" id=\"ss-herken\">\r\n  <div class=\"ss-wrap\">\r\n    <h2>Recognise this?<\/h2>\r\n\r\n    <table class=\"ss-tabel\">\r\n      <caption>How things work now at installation and service companies, and how they work with Simple-Simon<\/caption>\r\n      <thead>\r\n        <tr>\r\n          <th scope=\"col\">How it works now<\/th>\r\n          <th scope=\"col\">With Simple-Simon<\/th>\r\n        <\/tr>\r\n      <\/thead>\r\n      <tbody>\r\n        <tr>\r\n          <td>We enter everything twice, first on the job sheet and then again in the system.<\/td>\r\n          <td>The job sheet is completed once and appears in your accounting software straight away.<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>My technicians call me all day for information they should be able to see on their phones.<\/td>\r\n          <td>Address details, history and appointments are all in the app. No need to call anymore.<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Job sheets come in too late, or sometimes not at all. That delays invoicing.<\/td>\r\n          <td>Signed and complete on the same day the job is carried out.<\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>The planning is complete chaos and nobody knows exactly who is doing what.<\/td>\r\n          <td>One planning board where everyone sees the same up-to-date schedule.<\/td>\r\n        <\/tr>\r\n      <\/tbody>\r\n    <\/table>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var sec = document.getElementById(\"ss-herken\");\r\n  if(!sec) return;\r\n  \/* only now may the content start hidden: JavaScript is running *\/\r\n  sec.classList.add(\"ss-js\");\r\n  var io = new IntersectionObserver(function(es){\r\n    es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add(\"ss-go\"); io.unobserve(e.target); } });\r\n  }, {threshold:0, rootMargin:\"0px 0px -18% 0px\"});\r\n  io.observe(sec);\r\n})();\r\n<\/script>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | block: From job to invoice\r\n     Paste this entire file into ONE Custom HTML block on your page.\r\n     There is no <html>, <head> or <body>: your page already has those.\r\n     ===================================================================== -->\r\n\r\n<meta charset=\"utf-8\"\/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\"\/>\r\n<title>Simple-Simon | block: From job to invoice<\/title>\r\n\r\n<style>\r\n:root{\r\n  --vlak-a:#e5f5fa;\r\n  --vlak-b:#ffffff;\r\n  --vlak-accent:#04313c;\r\n  --hero-bg:#04313c;\r\n  --surface:#ffffff;\r\n  --surface-tint:#e5f5fa;\r\n  --brand-blue-soft:#aae1f4;\r\n  --brand-blue:#4ec0e7;\r\n  --brand-blue-deep:#42a8cf;\r\n  --brand-orange:#f97617;\r\n  --brand-orange-hover:#e06509;\r\n  --ink:#04313c;\r\n  --ink-muted:#2a5468;\r\n  --ink-deep:#022730;\r\n  --on-dark:#ffffff;\r\n  --on-dark-muted:#a9cbd8;\r\n  --line:#c3dfeb;\r\n  --line-dark:rgba(174,214,230,.22);\r\n\r\n  --space-1:4px;\r\n  --space-2:8px;\r\n  --space-3:12px;\r\n  --space-4:16px;\r\n  --space-5:24px;\r\n  --space-6:32px;\r\n  --space-8:48px;\r\n  --space-10:64px;\r\n\r\n  --radius-sm:6px;\r\n  --radius-md:12px;\r\n  --radius-lg:24px;\r\n  --radius-pill:999px;\r\n\r\n  --shadow-sm:0 2px 8px rgba(4,49,60,.08);\r\n  --shadow-card:0 8px 24px rgba(4,49,60,.10);\r\n  --shadow-float:0 24px 60px rgba(2,39,48,.35);\r\n\r\n  --font-body:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  --font-display:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n\r\n  --maxw:1160px;\r\n\r\n  box-sizing:border-box;\r\n  padding-top:env(safe-area-inset-top,0px);\r\n  padding-bottom:env(safe-area-inset-bottom,0px);\r\n}\r\n\r\nbody.theme-dark{\r\n  --vlak-a:#06323c;\r\n  --vlak-b:#0f4054;\r\n  --vlak-accent:#15718a;\r\n  --hero-bg:#04272f;\r\n  --surface:#14566a;\r\n  --surface-tint:#0f4054;\r\n  --ink:#eef8fb;\r\n  --ink-muted:#bcdbe7;\r\n  --on-dark-muted:#c3dfe9;\r\n  --line:rgba(174,214,230,.26);\r\n  --shadow-sm:0 2px 8px rgba(0,0,0,.30);\r\n  --shadow-card:0 8px 24px rgba(0,0,0,.38);\r\n}\r\n\r\nbody.theme-dark .ss-nskol.ss-nu{background:#06323c}\r\nbody.theme-dark .ss-nskol.ss-straks{background:var(--vlak-accent)}\r\n\r\n*,*::before,*::after{box-sizing:inherit}\r\n\r\nhtml{\r\n  scroll-behavior:smooth;\r\n  -webkit-text-size-adjust:100%;\r\n}\r\n\r\nbody{\r\n  margin:0;\r\n  background:var(--vlak-a);\r\n  color:var(--ink);\r\n  font-family:var(--font-body);\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\n\r\nimg{max-width:100%;display:block}\r\n\r\nh1,h2,h3{\r\n  font-family:var(--font-display);\r\n  margin:0;\r\n  letter-spacing:-.015em;\r\n  line-height:1.1;\r\n}\r\n\r\np{margin:0}\r\na{color:inherit}\r\n\r\n:focus-visible{\r\n  outline:3px solid var(--brand-orange);\r\n  outline-offset:3px;\r\n  border-radius:4px;\r\n}\r\n\r\n.ss-wrap{\r\n  max-width:var(--maxw);\r\n  margin:0 auto;\r\n  padding:0 var(--space-5);\r\n}\r\n\r\n.ss-section{\r\n  padding:var(--space-10) 0;\r\n  background:var(--vlak-a);\r\n}\r\n\r\n@media (min-width:900px){\r\n  .ss-section{padding:88px 0}\r\n}\r\n\r\n.ss-btn{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:8px;\r\n  font-family:var(--font-display);\r\n  font-weight:700;\r\n  font-size:16px;\r\n  text-decoration:none;\r\n  border-radius:var(--radius-pill);\r\n  padding:14px 26px;\r\n  border:2px solid transparent;\r\n  cursor:pointer;\r\n  transition:\r\n    background-color .15s ease,\r\n    border-color .15s ease,\r\n    color .15s ease,\r\n    transform .15s ease;\r\n}\r\n\r\n.ss-btn:active{transform:translateY(1px)}\r\n\r\n.ss-btn-primary{\r\n  background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);\r\n  color:#fff;\r\n  border-color:transparent;\r\n}\r\n\r\n.ss-btn-primary:hover{\r\n  filter:brightness(1.06);\r\n  border-color:transparent;\r\n}\r\n\r\n.ss-btn-ghost-dark{\r\n  background:transparent;\r\n  color:#fff;\r\n  border-color:rgba(255,255,255,.45);\r\n}\r\n\r\n.ss-btn-ghost-dark:hover{\r\n  border-color:#fff;\r\n  background:rgba(255,255,255,.08);\r\n}\r\n\r\n.ss-btn-ghost{\r\n  background:var(--surface);\r\n  color:var(--ink);\r\n  border-color:var(--brand-blue-deep);\r\n}\r\n\r\n.ss-btn-ghost:hover{\r\n  border-color:var(--ink);\r\n  background:var(--surface-tint);\r\n}\r\n\r\n.ss-btn-sm{\r\n  padding:10px 18px;\r\n  font-size:15px;\r\n}\r\n\r\n.ss-btn-lg{\r\n  padding:17px 32px;\r\n  font-size:17px;\r\n}\r\n\r\n@media (max-width:520px){\r\n  .ss-hero-cta{gap:10px}\r\n  .ss-hero-cta .ss-btn{flex:1 1 100%}\r\n}\r\n\r\n@media (max-width:520px){\r\n  .ss-pkaart .ss-btn{align-self:stretch}\r\n}\r\n\r\n.ss-tint{background:var(--vlak-b)}\r\n\r\n.ss-eyebrow-h2{\r\n  font-size:clamp(26px,3.4vw,38px);\r\n  font-weight:800;\r\n  text-wrap:balance;\r\n  margin-bottom:var(--space-4);\r\n}\r\n\r\n.ss-lead{\r\n  font-size:18px;\r\n  color:var(--ink-muted);\r\n  max-width:60ch;\r\n}\r\n\r\n.ss-section-head{\r\n  margin-bottom:var(--space-8);\r\n}\r\n\r\n\/* =====================================================================\r\n   ONLY FOR THIS BLOCK: From job to invoice\r\n   ===================================================================== *\/\r\n\r\n.ss-speler{\r\n  display:grid;\r\n  gap:28px;\r\n  grid-template-columns:minmax(0,1fr);\r\n}\r\n\r\n.ss-stappen,\r\n.ss-scherm{\r\n  min-width:0;\r\n}\r\n\r\n@media (min-width:900px){\r\n  .ss-speler{\r\n    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);\r\n    gap:48px;\r\n    align-items:center;\r\n  }\r\n}\r\n\r\n.ss-stappen{\r\n  display:grid;\r\n  gap:4px;\r\n}\r\n\r\n.ss-stap{\r\n  display:grid;\r\n  grid-template-columns:auto 1fr;\r\n  gap:16px;\r\n  align-items:start;\r\n  padding:16px;\r\n  border-radius:var(--radius-md);\r\n  background:transparent;\r\n  border:0;\r\n  text-align:left;\r\n  font-family:var(--font-body);\r\n  cursor:pointer;\r\n  color:var(--ink);\r\n  transition:background-color .2s ease;\r\n}\r\n\r\n.ss-stap:hover{\r\n  background:rgba(78,192,231,.12);\r\n}\r\n\r\n.ss-stap .ss-k{\r\n  width:28px;\r\n  height:28px;\r\n  border-radius:50%;\r\n  background:var(--line);\r\n  color:var(--ink-muted);\r\n  display:grid;\r\n  place-items:center;\r\n  font-size:13px;\r\n  font-weight:700;\r\n  font-family:var(--font-display);\r\n  transition:background-color .25s ease,color .25s ease;\r\n}\r\n\r\n.ss-stap[aria-current=\"true\"]{\r\n  background:var(--surface);\r\n  box-shadow:var(--shadow-sm);\r\n}\r\n\r\n.ss-stap[aria-current=\"true\"] .ss-k{\r\n  background:var(--brand-blue);\r\n  color:#04313c;\r\n}\r\n\r\n.ss-stap h3{\r\n  font-size:17.5px;\r\n  margin-bottom:4px;\r\n}\r\n\r\n.ss-stap p{\r\n  font-size:15px;\r\n  color:var(--ink-muted);\r\n  max-height:0;\r\n  overflow:hidden;\r\n  opacity:0;\r\n  transition:max-height .35s ease,opacity .25s ease;\r\n}\r\n\r\n.ss-stap[aria-current=\"true\"] p{\r\n  max-height:160px;\r\n  opacity:1;\r\n}\r\n\r\n.ss-prog{\r\n  display:none;\r\n  height:3px;\r\n  background:var(--line);\r\n  border-radius:2px;\r\n  margin-top:10px;\r\n  overflow:hidden;\r\n}\r\n\r\n.ss-stap[aria-current=\"true\"] .ss-prog{\r\n  display:block;\r\n}\r\n\r\n.ss-prog i{\r\n  display:block;\r\n  height:100%;\r\n  width:0;\r\n  background:var(--brand-blue-deep);\r\n}\r\n\r\n.ss-stap[aria-current=\"true\"] .ss-prog i{\r\n  animation:vullen 5s linear forwards;\r\n}\r\n\r\n.ss-speler.ss-pauze .ss-prog i{\r\n  animation-play-state:paused;\r\n}\r\n\r\n@keyframes vullen{\r\n  from{width:0}\r\n  to{width:100%}\r\n}\r\n\r\n.ss-scherm{\r\n  background:#fff;\r\n  color:#04313c;\r\n  border-radius:var(--radius-lg);\r\n  box-shadow:var(--shadow-card);\r\n  padding:22px;\r\n  min-height:330px;\r\n}\r\n\r\n.ss-scr[hidden]{\r\n  display:none;\r\n}\r\n\r\n.ss-scr{\r\n  animation:zacht .4s ease;\r\n}\r\n\r\n@keyframes zacht{\r\n  from{\r\n    opacity:0;\r\n    transform:translateY(6px)\r\n  }\r\n  to{\r\n    opacity:1;\r\n    transform:none\r\n  }\r\n}\r\n\r\n.ss-scr-kop{\r\n  font-size:13px;\r\n  color:#33617d;\r\n  padding-bottom:12px;\r\n  border-bottom:1px solid #e3eff4;\r\n  margin-bottom:14px;\r\n}\r\n\r\n.ss-mboard{\r\n  display:grid;\r\n  grid-template-columns:54px repeat(4,minmax(0,1fr));\r\n  gap:5px;\r\n  font-size:11px;\r\n  min-width:0;\r\n}\r\n\r\n.ss-mboard>*{\r\n  min-width:0;\r\n}\r\n\r\n.ss-mboard .ss-jb b,\r\n.ss-mboard .ss-jb span{\r\n  display:block;\r\n  overflow:hidden;\r\n  text-overflow:ellipsis;\r\n  white-space:nowrap;\r\n}\r\n\r\n.ss-mboard .ss-hd{\r\n  color:#33617d;\r\n  font-weight:700;\r\n  font-size:11px;\r\n}\r\n\r\n.ss-mboard .ss-nm{\r\n  font-weight:700;\r\n  font-size:12px;\r\n  display:flex;\r\n  align-items:center;\r\n}\r\n\r\n.ss-mboard .ss-sl{\r\n  height:38px;\r\n  border-radius:var(--radius-sm);\r\n  background:#f2f8fb;\r\n  border:1px solid #e6f1f6;\r\n}\r\n\r\n.ss-mboard .ss-jb{\r\n  height:38px;\r\n  border-radius:var(--radius-sm);\r\n  background:#aae1f4;\r\n  border:1px solid #7fcfe9;\r\n  padding:5px 6px;\r\n  line-height:1.2;\r\n}\r\n\r\n.ss-mboard .ss-jb b{\r\n  display:block;\r\n  font-size:11px;\r\n}\r\n\r\n.ss-mboard .ss-jb span{\r\n  font-size:10px;\r\n  color:#2b5d76;\r\n}\r\n\r\n.ss-mboard .ss-val{\r\n  opacity:0;\r\n  transform:translate(-26px,-26px);\r\n}\r\n\r\n.ss-scr.ss-aan .ss-mboard .ss-val{\r\n  animation:valin .7s cubic-bezier(.3,1.3,.5,1) .3s forwards;\r\n}\r\n\r\n@keyframes valin{\r\n  to{\r\n    opacity:1;\r\n    transform:none;\r\n  }\r\n}\r\n\r\n.ss-ping{\r\n  margin-top:16px;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  font-size:13px;\r\n  background:#e5f5fa;\r\n  border-radius:var(--radius-md);\r\n  padding:10px 14px;\r\n  opacity:0;\r\n}\r\n\r\n.ss-scr.ss-aan .ss-ping{\r\n  animation:omhoog .45s ease 1.1s forwards;\r\n}\r\n\r\n@keyframes omhoog{\r\n  from{\r\n    opacity:0;\r\n    transform:translateY(6px);\r\n  }\r\n  to{\r\n    opacity:1;\r\n    transform:none;\r\n  }\r\n}\r\n\r\n.ss-mrij{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  padding:10px 0;\r\n  border-bottom:1px solid #eef5f8;\r\n  font-size:14.5px;\r\n  opacity:0;\r\n}\r\n\r\n.ss-scr.ss-aan .ss-mrij{\r\n  animation:omhoog .4s ease forwards;\r\n}\r\n\r\n.ss-scr.ss-aan .ss-mrij:nth-of-type(1){\r\n  animation-delay:.2s;\r\n}\r\n\r\n.ss-scr.ss-aan .ss-mrij:nth-of-type(2){\r\n  animation-delay:.6s;\r\n}\r\n\r\n.ss-scr.ss-aan .ss-mrij:nth-of-type(3){\r\n  animation-delay:1s;\r\n}\r\n\r\n.ss-mrij .ss-k{\r\n  color:#33617d;\r\n}\r\n\r\n.ss-mrij .ss-v{\r\n  font-weight:700;\r\n}\r\n\r\n.ss-msig{\r\n  margin-top:14px;\r\n  border:1px dashed #bcdbe7;\r\n  border-radius:var(--radius-md);\r\n  padding:12px 14px;\r\n  background:#f7fcfe;\r\n}\r\n\r\n.ss-msig div{\r\n  font-size:12px;\r\n  color:#33617d;\r\n  margin-bottom:4px;\r\n}\r\n\r\n.ss-msig path{\r\n  stroke:#04313c;\r\n  stroke-width:2.4;\r\n  fill:none;\r\n  stroke-linecap:round;\r\n  stroke-dasharray:240;\r\n  stroke-dashoffset:240;\r\n}\r\n\r\n.ss-scr.ss-aan .ss-msig path{\r\n  animation:tekenen 1.1s ease 1.4s forwards;\r\n}\r\n\r\n@keyframes tekenen{\r\n  to{\r\n    stroke-dashoffset:0;\r\n  }\r\n}\r\n\r\n.ss-minv{\r\n  border:1px solid #e3eff4;\r\n  border-radius:var(--radius-md);\r\n  overflow:hidden;\r\n}\r\n\r\n.ss-minv .ss-h{\r\n  display:grid;\r\n  grid-template-columns:minmax(0,1fr) 56px 76px;\r\n  gap:10px;\r\n  background:#f2f8fb;\r\n  padding:10px 14px;\r\n  font-size:12px;\r\n  color:#33617d;\r\n  font-weight:700;\r\n}\r\n\r\n.ss-minv .ss-r{\r\n  display:grid;\r\n  grid-template-columns:minmax(0,1fr) 56px 76px;\r\n  gap:10px;\r\n  padding:12px 14px;\r\n  border-top:1px solid #eef5f8;\r\n  font-size:14px;\r\n  opacity:0;\r\n}\r\n\r\n.ss-scr.ss-aan .ss-minv .ss-r{\r\n  animation:inschuiven .5s ease forwards;\r\n}\r\n\r\n.ss-scr.ss-aan .ss-minv .ss-r:nth-of-type(1){\r\n  animation-delay:.3s;\r\n}\r\n\r\n.ss-scr.ss-aan .ss-minv .ss-r:nth-of-type(2){\r\n  animation-delay:.7s;\r\n}\r\n\r\n@keyframes inschuiven{\r\n  from{\r\n    opacity:0;\r\n    transform:translateX(-14px);\r\n  }\r\n  to{\r\n    opacity:1;\r\n    transform:none;\r\n  }\r\n}\r\n\r\n.ss-okbalk{\r\n  margin-top:16px;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  background:#04313c;\r\n  color:#fff;\r\n  border-radius:var(--radius-md);\r\n  padding:12px 14px;\r\n  font-size:14px;\r\n  opacity:0;\r\n}\r\n\r\n.ss-scr.ss-aan .ss-okbalk{\r\n  animation:omhoog .45s ease 1.2s forwards;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .ss-mboard .ss-val,\r\n  .ss-ping,\r\n  .ss-mrij,\r\n  .ss-minv .ss-r,\r\n  .ss-okbalk{\r\n    opacity:1 !important;\r\n    transform:none !important;\r\n    animation:none !important;\r\n  }\r\n\r\n  .ss-msig path{\r\n    stroke-dashoffset:0;\r\n    animation:none;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"ss-section\" id=\"hoe\" data-anim=\"\">\r\n  <div class=\"ss-wrap\">\r\n    <div class=\"ss-section-head\">\r\n      <h2 class=\"ss-eyebrow-h2\">From job to invoice, without extra steps<\/h2>\r\n      <p class=\"ss-lead\">Schedule your jobs, complete job sheets and invoice. Without doing the work twice.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ss-speler\">\r\n      <div class=\"ss-stappen\" role=\"tablist\" aria-label=\"Steps\">\r\n\r\n        <button class=\"ss-stap\" role=\"tab\" aria-current=\"true\" data-i=\"0\">\r\n          <span class=\"ss-k\">1<\/span>\r\n          <span>\r\n            <h3>You schedule the job<\/h3>\r\n            <p>Add the job to the planning board with the address, description and the right technician. They see it in the app straight away, including any changes made that morning.<\/p>\r\n            <span class=\"ss-prog\"><i><\/i><\/span>\r\n          <\/span>\r\n        <\/button>\r\n\r\n        <button class=\"ss-stap\" role=\"tab\" aria-current=\"false\" data-i=\"1\">\r\n          <span class=\"ss-k\">2<\/span>\r\n          <span>\r\n            <h3>The technician completes the job sheet<\/h3>\r\n            <p>On-site: hours, materials, photos, checklist and the customer\u2019s signature. It also works without a signal and synchronises as soon as the technician is back online.<\/p>\r\n            <span class=\"ss-prog\"><i><\/i><\/span>\r\n          <\/span>\r\n        <\/button>\r\n\r\n        <button class=\"ss-stap\" role=\"tab\" aria-current=\"false\" data-i=\"2\">\r\n          <span class=\"ss-k\">3<\/span>\r\n          <span>\r\n            <h3>The job sheet is in your accounting software<\/h3>\r\n            <p>Complete and signed, ready to invoice. All you need to do is check and send it.<\/p>\r\n            <span class=\"ss-prog\"><i><\/i><\/span>\r\n          <\/span>\r\n        <\/button>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"ss-scherm\">\r\n\r\n        <div class=\"ss-scr\" data-s=\"0\">\r\n          <div class=\"ss-scr-kop\">Planning board, Wednesday 24 September<\/div>\r\n\r\n          <div class=\"ss-mboard\">\r\n            <div class=\"ss-hd\"><\/div>\r\n            <div class=\"ss-hd\">Mon<\/div>\r\n            <div class=\"ss-hd\">Tue<\/div>\r\n            <div class=\"ss-hd\">Wed<\/div>\r\n            <div class=\"ss-hd\">Thu<\/div>\r\n\r\n            <div class=\"ss-nm\">Rick<\/div>\r\n            <div class=\"ss-jb\"><b>Verheij<\/b><span>Maintenance<\/span><\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n            <div class=\"ss-jb ss-val\"><b>De Groot<\/b><span>Breakdown<\/span><\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n\r\n            <div class=\"ss-nm\">Joost<\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n            <div class=\"ss-jb\"><b>Jansen<\/b><span>Installation<\/span><\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n            <div class=\"ss-jb\"><b>Meijer<\/b><span>Maintenance<\/span><\/div>\r\n\r\n            <div class=\"ss-nm\">Karin<\/div>\r\n            <div class=\"ss-jb\"><b>Dekker<\/b><span>Breakdown<\/span><\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n            <div class=\"ss-sl\"><\/div>\r\n            <div class=\"ss-jb\"><b>Van Loon<\/b><span>Inspection<\/span><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"ss-ping\">\r\n            <svg width=\"16\" height=\"16\" viewbox=\"0 0 20 20\" aria-hidden=\"true\">\r\n              <path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <\/svg>\r\n            Rick has the job on his phone\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ss-scr\" data-s=\"1\" hidden=\"\">\r\n          <div class=\"ss-scr-kop\">Job sheet 24-1187, De Groot in Tilburg<\/div>\r\n\r\n          <div class=\"ss-mrij\">\r\n            <span class=\"ss-k\">Hours<\/span>\r\n            <span class=\"ss-v\">2.5 hours<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"ss-mrij\">\r\n            <span class=\"ss-k\">Material<\/span>\r\n            <span class=\"ss-v\">Remeha filter<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"ss-mrij\">\r\n            <span class=\"ss-k\">Photos<\/span>\r\n            <span class=\"ss-v\">3 added<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"ss-msig\">\r\n            <div>Customer signature<\/div>\r\n            <svg viewbox=\"0 0 132 34\" height=\"34\" width=\"132\" aria-hidden=\"true\">\r\n              <path d=\"M4 26c8-16 13-19 16-9s6 12 11 2 8-13 12-4 6 13 11 5 9-11 13-3 8 9 14 3 10-8 14-5 8 6 12 4\"><\/path>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ss-scr\" data-s=\"2\" hidden=\"\">\r\n          <div class=\"ss-scr-kop\">Your accounting software, still to be invoiced<\/div>\r\n\r\n          <div class=\"ss-minv\">\r\n            <div class=\"ss-h\">\r\n              <span>Customer<\/span>\r\n              <span>Hours<\/span>\r\n              <span>Amount<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"ss-r\">\r\n              <span>De Groot<\/span>\r\n              <span>2.5<\/span>\r\n              <b>\u20ac237.50<\/b>\r\n            <\/div>\r\n\r\n            <div class=\"ss-r\">\r\n              <span>Verheij<\/span>\r\n              <span>1.5<\/span>\r\n              <b>\u20ac142.50<\/b>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"ss-okbalk\">\r\n            <svg width=\"16\" height=\"16\" viewbox=\"0 0 20 20\" aria-hidden=\"true\">\r\n              <path d=\"M4 10.5l4 4 8-9\" stroke=\"#4ec0e7\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <\/svg>\r\n            Nothing has been re-entered manually\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var io = new IntersectionObserver(function(es){\r\n    es.forEach(function(e){\r\n      if(e.isIntersecting){\r\n        e.target.classList.add(\"go\");\r\n        klaar(e.target);\r\n        io.unobserve(e.target);\r\n      }\r\n    });\r\n  }, {\r\n    threshold:0,\r\n    rootMargin:\"0px 0px -18% 0px\"\r\n  });\r\n\r\n  document.querySelectorAll(\"[data-anim]\").forEach(function(el){\r\n    io.observe(el);\r\n  });\r\n\r\n  function klaar(el){\r\n    if(el.id === \"hoe\"){\r\n      startSpeler();\r\n    }\r\n  }\r\n\r\n  function startSpeler(){\r\n    var sec = document.getElementById(\"hoe\");\r\n    if(!sec || sec.dataset.gestart) return;\r\n\r\n    sec.dataset.gestart = \"1\";\r\n\r\n    var speler = sec.querySelector(\".ss-speler\");\r\n    var knoppen = Array.prototype.slice.call(sec.querySelectorAll(\".ss-stap\"));\r\n    var schermen = Array.prototype.slice.call(sec.querySelectorAll(\".ss-scr\"));\r\n    var rustig = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n    var DUUR = 5000;\r\n    var i = 0;\r\n    var timer = null;\r\n    var inBeeld = false;\r\n    var zweeft = false;\r\n    var handmatig = false;\r\n\r\n    function teken(n){\r\n      i = n;\r\n\r\n      knoppen.forEach(function(k,x){\r\n        k.setAttribute(\"aria-current\", x === n ? \"true\" : \"false\");\r\n      });\r\n\r\n      schermen.forEach(function(sc,x){\r\n        sc.hidden = x !== n;\r\n        sc.classList.toggle(\"ss-aan\", x === n);\r\n      });\r\n    }\r\n\r\n    function stop(){\r\n      clearTimeout(timer);\r\n      timer = null;\r\n\r\n      if(speler){\r\n        speler.classList.add(\"ss-pauze\");\r\n      }\r\n    }\r\n\r\n    function tik(){\r\n      clearTimeout(timer);\r\n      timer = null;\r\n\r\n      if(rustig || handmatig || !inBeeld || zweeft){\r\n        if(speler){\r\n          speler.classList.add(\"ss-pauze\");\r\n        }\r\n        return;\r\n      }\r\n\r\n      if(speler){\r\n        speler.classList.remove(\"ss-pauze\");\r\n      }\r\n\r\n      timer = setTimeout(function(){\r\n        teken((i + 1) % schermen.length);\r\n        tik();\r\n      }, DUUR);\r\n    }\r\n\r\n    knoppen.forEach(function(k){\r\n      k.addEventListener(\"click\", function(){\r\n        handmatig = true;\r\n        stop();\r\n        teken(parseInt(k.dataset.i,10));\r\n      });\r\n    });\r\n\r\n    var kijker = new IntersectionObserver(function(es){\r\n      es.forEach(function(e){\r\n        inBeeld = e.isIntersecting;\r\n\r\n        if(inBeeld){\r\n          tik();\r\n        } else {\r\n          stop();\r\n        }\r\n      });\r\n    }, {\r\n      threshold:.35\r\n    });\r\n\r\n    kijker.observe(sec);\r\n\r\n    if(speler){\r\n      speler.addEventListener(\"mouseenter\", function(){\r\n        zweeft = true;\r\n        stop();\r\n      });\r\n\r\n      speler.addEventListener(\"mouseleave\", function(){\r\n        zweeft = false;\r\n        tik();\r\n      });\r\n    }\r\n\r\n    teken(0);\r\n    tik();\r\n  }\r\n})();\r\n<\/script>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | block: What you get control over (English)\r\n     Paste this whole file into ONE Custom HTML block on your page.\r\n     There is no <html>, <head> or <body> in here: your page has that.\r\n\r\n     Same markup, styling and script as the Dutch block; only the copy\r\n     and the four links differ. Wording follows your English homepage.\r\n\r\n     Running more Simple-Simon blocks on the same page? Cut out the part\r\n     between GEDEELD BASISBLOK and ALLEEN VOOR DIT BLOK below.\r\n     ===================================================================== -->\r\n\r\n<style>\r\n\/* =====================================================================\r\n   GEDEELD BASISBLOK\r\n   Staat in alle zes de blokbestanden en is overal hetzelfde.\r\n   Hierin zitten de kleuren voor licht en donker. Zet je meerdere blokken\r\n   op dezelfde pagina, plak dit dan EEN keer.\r\n\r\n   Donkere modus hangt aan body.theme-dark, de klasse die het thema zelf\r\n   op <body> zet als de bezoeker de schakelaar in de header gebruikt.\r\n   Wil je dit bestand los bekijken, zet dan class=\"theme-dark\" op <body>.\r\n   ===================================================================== *\/\r\n\/* ============================================================\r\n   Simple-Simon landingspagina\r\n   Kleuren, spacing, radius en shadows komen 1-op-1 uit het\r\n   Simple-Simon design system (tokens.json).\r\n   Mark Pro Regular is ingesloten; kopteksten staan in Figtree\r\n   omdat er nog geen Mark Pro Bold\/Heavy in het design system zit.\r\n   ============================================================ *\/\r\n\r\n\/* Lettertype komt van de site zelf, niet uit dit bestand.\r\n   De site draait op Montserrat; dat staat hieronder vooraan in de stack. *\/\r\n\r\n:root{\r\n  \/* --- kleur tokens --- *\/\r\n  \/* vlak-a en vlak-b wisselen elkaar af als sectie-achtergrond *\/\r\n  --vlak-a:#e5f5fa;\r\n  --vlak-b:#ffffff;\r\n  --vlak-accent:#04313c;       \/* donkere kolom in 'Herken je dit' *\/\r\n  --hero-bg:#04313c;           \/* hero *\/\r\n  --surface:#ffffff;           \/* kaarten en panelen bovenop een vlak *\/\r\n  --surface-tint:#e5f5fa;\r\n  --brand-blue-soft:#aae1f4;\r\n  --brand-blue:#4ec0e7;\r\n  --brand-blue-deep:#42a8cf;\r\n  --brand-orange:#f97617;\r\n  --brand-orange-hover:#e06509;\r\n  --ink:#04313c;\r\n  --ink-muted:#2a5468;\r\n  --ink-deep:#022730;          \/* donkerder vlak, afgeleid van ink *\/\r\n  --on-dark:#ffffff;\r\n  --on-dark-muted:#a9cbd8;\r\n  --line:#c3dfeb;\r\n  --line-dark:rgba(174,214,230,.22);\r\n\r\n  \/* --- spacing --- *\/\r\n  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;\r\n  --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px;\r\n\r\n  \/* --- radius --- *\/\r\n  --radius-sm:6px; --radius-md:12px; --radius-lg:24px; --radius-pill:999px;\r\n\r\n  \/* --- shadow --- *\/\r\n  --shadow-sm:0 2px 8px rgba(4,49,60,.08);\r\n  --shadow-card:0 8px 24px rgba(4,49,60,.10);\r\n  --shadow-float:0 24px 60px rgba(2,39,48,.35);\r\n\r\n  --font-body:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  --font-display:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n\r\n  --maxw:1160px;\r\n\r\n  box-sizing:border-box;\r\n  padding-top:env(safe-area-inset-top,0px);\r\n  padding-bottom:env(safe-area-inset-bottom,0px);\r\n}\r\n\r\n\/* ---------- donkere modus ----------\r\n   De site schakelt donker via de klasse theme-dark op <body> (thema fluidify,\r\n   knop in de header). Daarom hangen de donkere waarden aan body.theme-dark en\r\n   NIET aan prefers-color-scheme: anders zou een bezoeker met een donker\r\n   systeem deze blokken donker zien terwijl de rest van de pagina licht blijft. *\/\r\nbody.theme-dark{\r\n  --vlak-a:#06323c;\r\n  --vlak-b:#0f4054;\r\n  --vlak-accent:#15718a;\r\n  --hero-bg:#04272f;\r\n  --surface:#14566a;\r\n  --surface-tint:#0f4054;\r\n  --ink:#eef8fb;\r\n  --ink-muted:#bcdbe7;\r\n  --on-dark-muted:#c3dfe9;\r\n  --line:rgba(174,214,230,.26);\r\n  --shadow-sm:0 2px 8px rgba(0,0,0,.30);\r\n  --shadow-card:0 8px 24px rgba(0,0,0,.38);\r\n}\r\n\/* de twee kolommen van 'Herken je dit' moeten ook in donker uit elkaar blijven *\/\r\nbody.theme-dark .ss-nskol.ss-nu{background:#06323c}\r\nbody.theme-dark .ss-nskol.ss-straks{background:var(--vlak-accent)}\r\n\r\n*,*::before,*::after{box-sizing:inherit}\r\nhtml{scroll-behavior:smooth;-webkit-text-size-adjust:100%}\r\nbody{\r\n  margin:0;\r\n  background:var(--vlak-a);\r\n  color:var(--ink);\r\n  font-family:var(--font-body);\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\nimg{max-width:100%;display:block}\r\nh1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.015em;line-height:1.1}\r\np{margin:0}\r\na{color:inherit}\r\n:focus-visible{outline:3px solid var(--brand-orange);outline-offset:3px;border-radius:4px}\r\n\r\n.ss-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-5)}\r\n.ss-section{padding:var(--space-10) 0;background:var(--vlak-a)}\r\n@media (min-width:900px){ .ss-section{padding:88px 0} }\r\n\r\n\/* ---------- knoppen ---------- *\/\r\n.ss-btn{\r\n  display:inline-flex;align-items:center;justify-content:center;gap:8px;\r\n  font-family:var(--font-display);font-weight:700;font-size:16px;\r\n  text-decoration:none;border-radius:var(--radius-pill);\r\n  padding:14px 26px;border:2px solid transparent;cursor:pointer;\r\n  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;\r\n}\r\n.ss-btn:active{transform:translateY(1px)}\r\n\/* background-origin op border-box, anders wordt het verloop berekend binnen de\r\n   rand en herhaalt het zich in de buitenste 2px: links zie je dan de eindkleur\r\n   en rechts de beginkleur *\/\r\n.ss-btn-primary{background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);background-origin:border-box;color:#fff;border-color:transparent}\r\n.ss-btn-primary:hover{filter:brightness(1.06);border-color:transparent}\r\n.ss-btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}\r\n.ss-btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}\r\n.ss-btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--brand-blue-deep)}\r\n.ss-btn-ghost:hover{border-color:var(--ink);background:var(--surface-tint)}\r\n.ss-btn-sm{padding:10px 18px;font-size:15px}\r\n.ss-btn-lg{padding:17px 32px;font-size:17px}\r\n@media (max-width:520px){ .ss-hero-cta{gap:10px} .ss-hero-cta .ss-btn{flex:1 1 100%} }\r\n\/* .ss-btn-block is vervallen: knoppen staan links in de kaart, niet over de volle breedte *\/\r\n@media (max-width:520px){ .ss-pkaart .ss-btn{align-self:stretch} }\r\n\r\n\/* ---------- algemene secties ---------- *\/\r\n.ss-tint{background:var(--vlak-b)}\r\n.ss-eyebrow-h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;text-wrap:balance;margin-bottom:var(--space-4)}\r\n.ss-lead{font-size:18px;color:var(--ink-muted);max-width:60ch}\r\n.ss-section-head{margin-bottom:var(--space-8)}\r\n\r\n\r\n\/* =====================================================================\r\n   ALLEEN VOOR DIT BLOK: Waar je grip op krijgt\r\n   ===================================================================== *\/\r\n\/* ========== MINDMAP ========== *\/\r\n.ss-mindmap{position:relative;max-width:860px;margin:0 auto;min-height:460px}\r\n.ss-mlijnen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}\r\n.ss-mlijnen .ss-ln{fill:none;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320}\r\n.ss-go .ss-mlijnen .ss-ln{animation:lijn .75s ease forwards}\r\n.ss-go .ss-mlijnen .ss-ln:nth-of-type(1){animation-delay:.05s}\r\n.ss-go .ss-mlijnen .ss-ln:nth-of-type(2){animation-delay:.2s}\r\n.ss-go .ss-mlijnen .ss-ln:nth-of-type(3){animation-delay:.35s}\r\n.ss-go .ss-mlijnen .ss-ln:nth-of-type(4){animation-delay:.5s}\r\n@keyframes lijn{to{stroke-dashoffset:0}}\r\n.ss-mhub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:156px;height:156px;border-radius:50%;\r\n  background:var(--brand-blue-soft);display:grid;place-items:center;z-index:3;box-shadow:0 0 0 12px rgba(170,225,244,.3);opacity:0}\r\n.ss-go .ss-mhub{animation:plop .55s cubic-bezier(.3,1.4,.5,1) forwards}\r\n.ss-mhub img{width:92px;height:auto}\r\n@keyframes plop{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}\r\n.ss-mnode{position:absolute;width:252px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);\r\n  padding:18px;box-shadow:var(--shadow-sm);z-index:2;opacity:0;transform:translateY(10px) scale(.97);\r\n  transition:border-color .18s ease,box-shadow .18s ease}\r\n.ss-go .ss-mnode{animation:knoopin .45s cubic-bezier(.3,1.2,.5,1) forwards}\r\n.ss-go .ss-m1{animation-delay:.5s} .ss-go .ss-m2{animation-delay:.68s}\r\n.ss-go .ss-m3{animation-delay:.86s} .ss-go .ss-m4{animation-delay:1.04s}\r\n@keyframes knoopin{to{opacity:1;transform:none}}\r\n.ss-mnode:hover{border-color:var(--brand-blue);box-shadow:var(--shadow-card)}\r\n.ss-mnode h3{font-size:17px;margin-bottom:6px}\r\n.ss-mnode p{font-size:14.5px;color:var(--ink-muted);line-height:1.45}\r\n.ss-m1{left:0;top:14px} .ss-m2{right:0;top:14px}\r\n.ss-m3{left:0;bottom:14px} .ss-m4{right:0;bottom:14px}\r\n.ss-mbtn{display:inline-block;margin-top:13px;text-decoration:none;font-family:var(--font-display);font-weight:700;\r\n  font-size:13.5px;color:#fff;padding:8px 15px;border-radius:8px;\r\n  background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);transition:filter .15s ease,transform .15s ease}\r\n.ss-mbtn:hover{filter:brightness(1.06);transform:translateY(-1px)}\r\n\/* ---------- onder 900px: geen mindmap meer, maar een stapel ---------- *\/\r\n@media (max-width:899px){\r\n  .ss-mindmap{min-height:0;display:grid;gap:12px}\r\n\r\n  \/* de lijnen en de mascotte dragen de betekenis van een mindmap.\r\n     Zonder lijnen is de mascotte alleen nog een plaatje dat ruimte kost,\r\n     dus die blijft op mobiel weg. *\/\r\n  .ss-mlijnen{display:none}\r\n  .ss-mhub{display:none}\r\n\r\n  .ss-mnode{position:static;width:auto;padding:16px 18px}\r\n  .ss-mnode h3{font-size:16.5px;margin-bottom:5px}\r\n  .ss-mnode p{font-size:14.5px}\r\n  .ss-mbtn{margin-top:12px;padding:9px 16px}\r\n\r\n  \/* de opbouw hoeft niet meer op de lijnen te wachten *\/\r\n  .ss-go .ss-m1{animation-delay:.04s}\r\n  .ss-go .ss-m2{animation-delay:.12s}\r\n  .ss-go .ss-m3{animation-delay:.20s}\r\n  .ss-go .ss-m4{animation-delay:.28s}\r\n}\r\n\r\n\/* tussen tablet en desktop passen er twee naast elkaar *\/\r\n@media (min-width:700px) and (max-width:899px){\r\n  .ss-mindmap{grid-template-columns:1fr 1fr;gap:14px}\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .ss-mnode,.ss-mhub{opacity:1 !important;transform:none !important;animation:none !important}\r\n  .ss-mlijnen .ss-ln{stroke-dashoffset:0;animation:none}\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n<section class=\"ss-section ss-tint\" id=\"sectoren\" data-anim=\"\">\r\n  <div class=\"ss-wrap\">\r\n    <div class=\"ss-section-head\">\r\n      <h2 class=\"ss-eyebrow-h2\">What you get control over<\/h2>\r\n      <p class=\"ss-lead\">Four powerful features, one simple system. More overview, less admin.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ss-mindmap\" id=\"mindmap\">\r\n      <svg class=\"ss-mlijnen\" id=\"mlijnen\" viewbox=\"0 0 860 460\" preserveaspectratio=\"none\" aria-hidden=\"true\"><\/svg>\r\n      <div class=\"ss-mhub\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/simple-simon.com\/wp-content\/uploads\/2024\/07\/SS-logo.png\" alt=\"Simple-Simon\" width=\"246\" height=\"299\"\/><\/div>\r\n\r\n      <div class=\"ss-mnode ss-m1\">\r\n        <h3>Job sheet App<\/h3>\r\n        <p>Digital job sheets with hours, materials, photos and a signature. Works offline.<\/p>\r\n        <a class=\"ss-mbtn\" href=\"https:\/\/simple-simon.com\/en\/features\/job-sheet-app\/\">Job sheet App<\/a>\r\n      <\/div>\r\n      <div class=\"ss-mnode ss-m2\">\r\n        <h3>Digital Planboard<\/h3>\r\n        <p>All jobs and engineers in one overview. Move a job and everyone knows.<\/p>\r\n        <a class=\"ss-mbtn\" href=\"https:\/\/simple-simon.com\/en\/features\/digital-planboard\/\">Digital Planboard<\/a>\r\n      <\/div>\r\n      <div class=\"ss-mnode ss-m3\">\r\n        <h3>Hour registration<\/h3>\r\n        <p>Hours logged on the job itself, not guessed from memory afterwards.<\/p>\r\n        <a class=\"ss-mbtn\" href=\"https:\/\/simple-simon.com\/en\/hour-registration-pro\/\">Hour registration<\/a>\r\n      <\/div>\r\n      <div class=\"ss-mnode ss-m4\">\r\n        <h3>Asset Management<\/h3>\r\n        <p>Every boiler or installation with its own history, contract and next service.<\/p>\r\n        <a class=\"ss-mbtn\" href=\"https:\/\/simple-simon.com\/en\/asset-management-pro\/\">Asset Management<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  var io = new IntersectionObserver(function(es){\r\n    es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add(\"ss-go\"); klaar(e.target); io.unobserve(e.target); } });\r\n  }, {threshold:0, rootMargin:\"0px 0px -18% 0px\"});\r\n  document.querySelectorAll(\"[data-anim]\").forEach(function(el){ io.observe(el); });\r\n\r\n  function klaar(el){ if(el.id === 'sectoren') bouwLijnen(); }\r\n\r\nvar RAILS = [\r\n  \"M368,186 C312,186 312,100 256,100\",\r\n  \"M492,186 C548,186 548,100 604,100\",\r\n  \"M368,274 C312,274 312,360 256,360\",\r\n  \"M492,274 C548,274 548,360 604,360\"\r\n];\r\nfunction bouwLijnen(){\r\n  var svg = document.getElementById(\"mlijnen\");\r\n  if(!svg) return;\r\n  var rustig = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n\r\n  svg.innerHTML =\r\n    RAILS.map(function(d){ return '<path class=\"ss-ln\" d=\"'+d+'\" stroke=\"#42a8cf\" stroke-width=\"2.5\"\/>'; }).join(\"\") +\r\n    (rustig ? \"\" : RAILS.map(function(){ return '<circle class=\"ss-stip\" r=\"4.5\" fill=\"#f97617\" opacity=\"0\"\/>'; }).join(\"\"));\r\n\r\n  if(rustig) return;\r\n\r\n  \/* De stippen worden met requestAnimationFrame over de lijn bewogen.\r\n     Eerder gebeurde dat met SMIL (animateMotion), maar die rekent zijn\r\n     starttijd vanaf het laden van de pagina en dat liep mis zodra iemand\r\n     pas later naar dit blok scrolde. *\/\r\n  var paden   = svg.querySelectorAll(\"path\");\r\n  var stippen = svg.querySelectorAll(\"circle\");\r\n  var lengtes = Array.prototype.map.call(paden, function(p){ return p.getTotalLength(); });\r\n\r\n  var CYCLUS = 2000;   \/* milliseconden per ronde *\/\r\n  var LOOP   = 0.65;   \/* dit deel van de ronde is de stip onderweg *\/\r\n  var VERSCHUIF = 0.09;\/* onderlinge vertraging tussen de vier stippen *\/\r\n  var start = null;\r\n\r\n  function teken(t){\r\n    if(start === null) start = t;\r\n    var ms = t - start;\r\n    for(var i = 0; i < stippen.length; i++){\r\n      var fase = ((((ms \/ CYCLUS) - i * VERSCHUIF) % 1) + 1) % 1;\r\n      if(fase > LOOP){ stippen[i].setAttribute(\"opacity\", 0); continue; }\r\n      var punt = paden[i].getPointAtLength(lengtes[i] * (fase \/ LOOP));\r\n      stippen[i].setAttribute(\"cx\", punt.x);\r\n      stippen[i].setAttribute(\"cy\", punt.y);\r\n      var o = fase < 0.06 ? fase \/ 0.06\r\n            : (fase > LOOP - 0.06 ? (LOOP - fase) \/ 0.06 : 1);\r\n      stippen[i].setAttribute(\"opacity\", o);\r\n    }\r\n    requestAnimationFrame(teken);\r\n  }\r\n  \/* even wachten tot de lijnen getekend zijn *\/\r\n  setTimeout(function(){ requestAnimationFrame(teken); }, 800);\r\n}\r\n})();\r\n<\/script>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | block: Your own systems remain leading (English)\r\n     Paste this whole file into ONE Custom HTML block on your page.\r\n     There is no <html>, <head> or <body> in here: your page has that.\r\n\r\n     Same markup, styling and script as the Dutch block. The copy follows\r\n     your own English homepage. The links point to \/en\/integrations\/.\r\n\r\n     The 36 packages come from your own English integration overview,\r\n     read page by page. This list is not the same as the Dutch one.\r\n     ===================================================================== -->\r\n\r\n<style>\r\n\/* =====================================================================\r\n   GEDEELD BASISBLOK\r\n   Staat in alle zes de blokbestanden en is overal hetzelfde.\r\n   Hierin zitten de kleuren voor licht en donker. Zet je meerdere blokken\r\n   op dezelfde pagina, plak dit dan EEN keer.\r\n\r\n   Donkere modus hangt aan body.theme-dark, de klasse die het thema zelf\r\n   op <body> zet als de bezoeker de schakelaar in de header gebruikt.\r\n   Wil je dit bestand los bekijken, zet dan class=\"theme-dark\" op <body>.\r\n   ===================================================================== *\/\r\n\/* ============================================================\r\n   Simple-Simon landingspagina\r\n   Kleuren, spacing, radius en shadows komen 1-op-1 uit het\r\n   Simple-Simon design system (tokens.json).\r\n   Mark Pro Regular is ingesloten; kopteksten staan in Figtree\r\n   omdat er nog geen Mark Pro Bold\/Heavy in het design system zit.\r\n   ============================================================ *\/\r\n\r\n\/* Lettertype komt van de site zelf, niet uit dit bestand.\r\n   De site draait op Montserrat; dat staat hieronder vooraan in de stack. *\/\r\n\r\n:root{\r\n  \/* --- kleur tokens --- *\/\r\n  \/* vlak-a en vlak-b wisselen elkaar af als sectie-achtergrond *\/\r\n  --vlak-a:#e5f5fa;\r\n  --vlak-b:#ffffff;\r\n  --vlak-accent:#04313c;       \/* donkere kolom in 'Herken je dit' *\/\r\n  --hero-bg:#04313c;           \/* hero *\/\r\n  --surface:#ffffff;           \/* kaarten en panelen bovenop een vlak *\/\r\n  --surface-tint:#e5f5fa;\r\n  --brand-blue-soft:#aae1f4;\r\n  --brand-blue:#4ec0e7;\r\n  --brand-blue-deep:#42a8cf;\r\n  --brand-orange:#f97617;\r\n  --brand-orange-hover:#e06509;\r\n  --ink:#04313c;\r\n  --ink-muted:#2a5468;\r\n  --ink-deep:#022730;          \/* donkerder vlak, afgeleid van ink *\/\r\n  --on-dark:#ffffff;\r\n  --on-dark-muted:#a9cbd8;\r\n  --line:#c3dfeb;\r\n  --ss-zoek-zacht:#4d7488;   \/* plaatshouder en loepje in het zoekveld *\/\r\n  --line-dark:rgba(174,214,230,.22);\r\n\r\n  \/* --- spacing --- *\/\r\n  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;\r\n  --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px;\r\n\r\n  \/* --- radius --- *\/\r\n  --radius-sm:6px; --radius-md:12px; --radius-lg:24px; --radius-pill:999px;\r\n\r\n  \/* --- shadow --- *\/\r\n  --shadow-sm:0 2px 8px rgba(4,49,60,.08);\r\n  --shadow-card:0 8px 24px rgba(4,49,60,.10);\r\n  --shadow-float:0 24px 60px rgba(2,39,48,.35);\r\n\r\n  --font-body:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  --font-display:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n\r\n  --maxw:1160px;\r\n\r\n  box-sizing:border-box;\r\n  padding-top:env(safe-area-inset-top,0px);\r\n  padding-bottom:env(safe-area-inset-bottom,0px);\r\n}\r\n\r\n\/* ---------- donkere modus ----------\r\n   De site schakelt donker via de klasse theme-dark op <body> (thema fluidify,\r\n   knop in de header). Daarom hangen de donkere waarden aan body.theme-dark en\r\n   NIET aan prefers-color-scheme: anders zou een bezoeker met een donker\r\n   systeem deze blokken donker zien terwijl de rest van de pagina licht blijft. *\/\r\nbody.theme-dark{\r\n  --vlak-a:#06323c;\r\n  --vlak-b:#0f4054;\r\n  --vlak-accent:#15718a;\r\n  --hero-bg:#04272f;\r\n  --surface:#14566a;\r\n  --surface-tint:#0f4054;\r\n  --ink:#eef8fb;\r\n  --ink-muted:#bcdbe7;\r\n  --on-dark-muted:#c3dfe9;\r\n  --line:rgba(174,214,230,.26);\r\n  --ss-zoek-zacht:#aed3e0;\r\n  --shadow-sm:0 2px 8px rgba(0,0,0,.30);\r\n  --shadow-card:0 8px 24px rgba(0,0,0,.38);\r\n}\r\n\/* de twee kolommen van 'Herken je dit' moeten ook in donker uit elkaar blijven *\/\r\nbody.theme-dark .ss-nskol.ss-nu{background:#06323c}\r\nbody.theme-dark .ss-nskol.ss-straks{background:var(--vlak-accent)}\r\n\r\n*,*::before,*::after{box-sizing:inherit}\r\nhtml{scroll-behavior:smooth;-webkit-text-size-adjust:100%}\r\nbody{\r\n  margin:0;\r\n  background:var(--vlak-a);\r\n  color:var(--ink);\r\n  font-family:var(--font-body);\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\nimg{max-width:100%;display:block}\r\nh1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.015em;line-height:1.1}\r\np{margin:0}\r\na{color:inherit}\r\n:focus-visible{outline:3px solid var(--brand-orange);outline-offset:3px;border-radius:4px}\r\n\r\n.ss-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-5)}\r\n.ss-section{padding:var(--space-10) 0;background:var(--vlak-a)}\r\n@media (min-width:900px){ .ss-section{padding:88px 0} }\r\n\r\n\/* ---------- knoppen ---------- *\/\r\n.ss-btn{\r\n  display:inline-flex;align-items:center;justify-content:center;gap:8px;\r\n  font-family:var(--font-display);font-weight:700;font-size:16px;\r\n  text-decoration:none;border-radius:var(--radius-pill);\r\n  padding:14px 26px;border:2px solid transparent;cursor:pointer;\r\n  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;\r\n}\r\n.ss-btn:active{transform:translateY(1px)}\r\n\/* background-origin op border-box, anders wordt het verloop berekend binnen de\r\n   rand en herhaalt het zich in de buitenste 2px: links zie je dan de eindkleur\r\n   en rechts de beginkleur *\/\r\n.ss-btn-primary{background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);background-origin:border-box;color:#fff;border-color:transparent}\r\n.ss-btn-primary:hover{filter:brightness(1.06);border-color:transparent}\r\n.ss-btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}\r\n.ss-btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}\r\n.ss-btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--brand-blue-deep)}\r\n.ss-btn-ghost:hover{border-color:var(--ink);background:var(--surface-tint)}\r\n.ss-btn-sm{padding:10px 18px;font-size:15px}\r\n.ss-btn-lg{padding:17px 32px;font-size:17px}\r\n@media (max-width:520px){ .ss-hero-cta{gap:10px} .ss-hero-cta .ss-btn{flex:1 1 100%} }\r\n\/* .ss-btn-block is vervallen: knoppen staan links in de kaart, niet over de volle breedte *\/\r\n@media (max-width:520px){ .ss-pkaart .ss-btn{align-self:stretch} }\r\n\r\n\/* ---------- algemene secties ---------- *\/\r\n.ss-tint{background:var(--vlak-b)}\r\n.ss-eyebrow-h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;text-wrap:balance;margin-bottom:var(--space-4)}\r\n.ss-lead{font-size:18px;color:var(--ink-muted);max-width:60ch}\r\n.ss-section-head{margin-bottom:var(--space-8)}\r\n\r\n\r\n\/* =====================================================================\r\n   ALLEEN VOOR DIT BLOK: Koppelingen\r\n   ===================================================================== *\/\r\n\/* ========== KOPPELINGEN ========== *\/\r\n\/* het zoekveld heeft javascript nodig; zonder script blijft het verborgen\r\n   en houd je gewoon de bladerbare lijst over *\/\r\n.ss-zoekveld,.ss-zoekuit{display:none}\r\n.ss-js .ss-zoekveld{display:block}\r\n.ss-js .ss-zoekuit{display:block}\r\n.ss-zoekveld{max-width:520px;position:relative}\r\n.ss-zoekveld input{width:100%;font-family:var(--font-body);font-size:17px;color:var(--ink);background:var(--surface);\r\n  border:2px solid var(--line);border-radius:var(--radius-pill);padding:15px 20px 15px 50px;outline:none}\r\n.ss-zoekveld input:focus{border-color:var(--brand-blue)}\r\n\/* tekst, cursor, plaatshouder en het loepje volgen allemaal de modus *\/\r\n.ss-zoekveld input{caret-color:var(--brand-blue-deep)}\r\n.ss-zoekveld input::placeholder{color:var(--ss-zoek-zacht);opacity:1}\r\n.ss-zoekveld input::-webkit-input-placeholder{color:var(--ss-zoek-zacht);opacity:1}\r\n.ss-loep{position:absolute;left:19px;top:16px;pointer-events:none;color:var(--ss-zoek-zacht)}\r\n@media (max-width:599px){ .ss-zoekveld input{font-size:15.5px;padding:14px 16px 14px 46px} .ss-loep{left:17px;top:15px} }\r\n.ss-zoekuit{margin-top:14px;min-height:28px}\r\n.ss-treffers{display:flex;flex-wrap:wrap;gap:10px}\r\n.ss-kchip{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);\r\n  border-radius:var(--radius-pill);padding:9px 17px;font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);\r\n  white-space:nowrap;transition:color .15s ease,border-color .15s ease,transform .15s ease}\r\n.ss-kchip:hover,.ss-kchip:focus-visible{background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);background-origin:border-box;border-color:transparent;color:#fff;transform:translateY(-1px)}\r\n.ss-kchip:hover svg,.ss-kchip:focus-visible svg{color:#fff}\r\n.ss-kchip svg{color:var(--brand-blue-deep)}\r\n.ss-zmeta{margin-top:16px;font-size:15px;color:var(--ink-muted)}\r\n.ss-zgeen{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand-orange);\r\n  border-radius:var(--radius-md);padding:16px 20px;font-size:16px;max-width:600px}\r\n.ss-band{margin:22px auto 0;max-width:calc(var(--maxw) - 2 * var(--space-5));overflow:hidden;transition:opacity .25s ease;\r\n  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);\r\n  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}\r\n.ss-baan{display:flex;gap:12px;width:max-content;animation:schuif 34s linear infinite}\r\n.ss-baan.ss-terug{animation-direction:reverse;animation-duration:42s;margin-top:12px}\r\n.ss-band:hover .ss-baan{animation-play-state:paused}\r\n@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}\r\n#koppelingen-en.ss-zoekt .ss-band{opacity:.35}\r\n#koppelingen-en.ss-zoekt .ss-baan{animation-play-state:paused}\r\n\/* padding in plaats van margin: een margin kan door het thema worden\r\n   teruggezet of samenvallen met een andere marge, padding vrijwel nooit *\/\r\n.ss-bandvoet{margin-top:0 !important;padding-top:56px !important}\r\n.ss-bandvoet p{margin:0}\r\n.ss-bandvoet p{font-size:16px;color:var(--ink-muted)}\r\n\r\n@media (prefers-reduced-motion: reduce){ .ss-baan{animation:none !important;transform:none} }\r\n\r\n<\/style>\r\n\r\n<section class=\"ss-section\" id=\"koppelingen-en\">\r\n  <div class=\"ss-wrap\">\r\n    <div class=\"ss-section-head\">\r\n      <h2 class=\"ss-eyebrow-h2\">Your own systems remain leading<\/h2>\r\n      <p class=\"ss-lead\">Simple-Simon integrates with 40+ accounting, ERP and CRM systems. This keeps all your systems connected without entering the same information twice.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ss-zoekveld\">\r\n      <svg class=\"ss-loep\" width=\"20\" height=\"20\" viewbox=\"0 0 20 20\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><\/circle><path d=\"M13.5 13.5L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><\/path><\/svg>\r\n      <input type=\"search\" id=\"zoek-en\" placeholder=\"Search your ERP\/CRM\/accounting package\" aria-label=\"Search your ERP\/CRM\/accounting package\"\/>\r\n    <\/div>\r\n    <div class=\"ss-zoekuit\" id=\"zoekuit-en\" aria-live=\"polite\"><p class=\"ss-zmeta\">Or browse the list below.<\/p><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ss-band\" id=\"band-en\">\r\n    <!-- De chips staan hier gewoon in de HTML, zodat de carrousel ook werkt\r\n         als het script door je pagina wordt weggefilterd. Elke rij staat\r\n         twee keer in de code; dat is nodig voor de naadloze lus. -->\r\n    <div class=\"ss-baan\" id=\"baan1-en\"><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/exact\/\">Exact<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/afas-software\/\">AFAS Software<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/teamleader\/\">Teamleader<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/wefact\/\">WeFact<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/visma\/\">Visma<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/visma-yuki\/\">Visma Yuki<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/visma-bouwsoft\/\">Visma Bouwsoft<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/microsoft-business-central\/\">Microsoft Business Central<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/microsoft-bookings\/\">Microsoft Bookings<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/hubspot\/\">HubSpot<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/gripp\/\">Gripp<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/paragonerp\/\">ParagonERP<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/unit4\/\">Unit4<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/bjorn-lunden\/\">Bjorn Lunden<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/billit\/\">Billit<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/breex\/\">Breex<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/reeleezee\/\">Reeleezee<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/topdesk\/\">Topdesk<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/exact\/\">Exact<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/afas-software\/\">AFAS Software<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/teamleader\/\">Teamleader<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/wefact\/\">WeFact<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/visma\/\">Visma<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/visma-yuki\/\">Visma Yuki<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/visma-bouwsoft\/\">Visma Bouwsoft<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/microsoft-business-central\/\">Microsoft Business Central<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/microsoft-bookings\/\">Microsoft Bookings<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/hubspot\/\">HubSpot<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/gripp\/\">Gripp<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/paragonerp\/\">ParagonERP<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/unit4\/\">Unit4<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/bjorn-lunden\/\">Bjorn Lunden<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/billit\/\">Billit<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/breex\/\">Breex<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/reeleezee\/\">Reeleezee<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/topdesk\/\">Topdesk<\/a><\/div>\r\n    <div class=\"ss-baan ss-terug\" id=\"baan2-en\"><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/silvasoft\/\">Silvasoft<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/moneybird\/\">Moneybird<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/informer\/\">Informer<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/asperion\/\">Asperion<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/testo\/\">Testo<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/octopus\/\">Octopus<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/iris-kashflow\/\">Iris Kashflow<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/reckon\/\">Reckon<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/invoiceberry\/\">InvoiceBerry<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/keap\/\">Keap<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/intuit-quickbooks\/\">Intuit QuickBooks<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/sage-tech-partner\/\">Sage<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/xero\/\">Xero<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/sap-business-one\/\">SAP Business One<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/onfact\/\">Onfact<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/apple-calendar\/\">Apple Calendar<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/outlook-agenda\/\">Outlook Calendar<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/google-calendar\/\">Google Calendar<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/silvasoft\/\">Silvasoft<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/moneybird\/\">Moneybird<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/informer\/\">Informer<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/asperion\/\">Asperion<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/testo\/\">Testo<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/octopus\/\">Octopus<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/iris-kashflow\/\">Iris Kashflow<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/reckon\/\">Reckon<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/invoiceberry\/\">InvoiceBerry<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/keap\/\">Keap<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/intuit-quickbooks\/\">Intuit QuickBooks<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/sage-tech-partner\/\">Sage<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/xero\/\">Xero<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/sap-business-one\/\">SAP Business One<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/onfact\/\">Onfact<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/apple-calendar\/\">Apple Calendar<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/outlook-agenda\/\">Outlook Calendar<\/a><a class=\"ss-kchip\" href=\"https:\/\/simple-simon.com\/en\/integrations\/google-calendar\/\">Google Calendar<\/a><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ss-wrap ss-bandvoet\">\r\n    <p>Is your package missing? Just ask, we add new integrations regularly.<\/p>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n\r\n\/* ---------- koppelingen: zoeken en de twee banen ---------- *\/\r\n(function(){\r\n  var PAKKETTEN = [\r\n  [\"Exact\",\"exact\"],\r\n  [\"AFAS Software\",\"afas-software\"],\r\n  [\"Teamleader\",\"teamleader\"],\r\n  [\"WeFact\",\"wefact\"],\r\n  [\"Visma\",\"visma\"],\r\n  [\"Visma Yuki\",\"visma-yuki\"],\r\n  [\"Visma Bouwsoft\",\"visma-bouwsoft\"],\r\n  [\"Microsoft Business Central\",\"microsoft-business-central\"],\r\n  [\"Microsoft Bookings\",\"microsoft-bookings\"],\r\n  [\"HubSpot\",\"hubspot\"],\r\n  [\"Gripp\",\"gripp\"],\r\n  [\"ParagonERP\",\"paragonerp\"],\r\n  [\"Unit4\",\"unit4\"],\r\n  [\"Bjorn Lunden\",\"bjorn-lunden\"],\r\n  [\"Billit\",\"billit\"],\r\n  [\"Breex\",\"breex\"],\r\n  [\"Reeleezee\",\"reeleezee\"],\r\n  [\"Topdesk\",\"topdesk\"],\r\n  [\"Silvasoft\",\"silvasoft\"],\r\n  [\"Moneybird\",\"moneybird\"],\r\n  [\"Informer\",\"informer\"],\r\n  [\"Asperion\",\"asperion\"],\r\n  [\"Testo\",\"testo\"],\r\n  [\"Octopus\",\"octopus\"],\r\n  [\"Iris Kashflow\",\"iris-kashflow\"],\r\n  [\"Reckon\",\"reckon\"],\r\n  [\"InvoiceBerry\",\"invoiceberry\"],\r\n  [\"Keap\",\"keap\"],\r\n  [\"Intuit QuickBooks\",\"intuit-quickbooks\"],\r\n  [\"Sage\",\"sage-tech-partner\"],\r\n  [\"Xero\",\"xero\"],\r\n  [\"SAP Business One\",\"sap-business-one\"],\r\n  [\"Onfact\",\"onfact\"],\r\n  [\"Apple Calendar\",\"apple-calendar\"],\r\n  [\"Outlook Calendar\",\"outlook-agenda\"],\r\n  [\"Google Calendar\",\"google-calendar\"]\r\n  ];\r\n  var BASIS = \"https:\/\/simple-simon.com\/en\/integrations\/\";\r\n  function kchip(item, vink){\r\n    var v = vink ? '<svg width=\"15\" height=\"15\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M4 10.5l4 4 8-9\" stroke=\"currentColor\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>' : '';\r\n    return '<a class=\"ss-kchip\" href=\"'+BASIS+item[1]+'\/\">'+v+item[0]+'';\r\n  }\r\n\r\n  var sec = document.getElementById(\"koppelingen-en\");\r\n  var inp = document.getElementById(\"zoek-en\");\r\n  var uit = document.getElementById(\"zoekuit-en\");\r\n  if(!inp || !uit || !sec) return;\r\n  sec.classList.add(\"ss-js\");   \/* pas nu mag het zoekveld zichtbaar worden *\/\r\n\r\n  function toon(){\r\n    var q = inp.value.trim().toLowerCase();\r\n    sec.classList.toggle(\"ss-zoekt\", q.length > 0);\r\n    if(!q){ uit.innerHTML = '<p class=\"ss-zmeta\">Or browse the list below.'; return; }\r\n    var hits = PAKKETTEN.filter(function(it){ return it[0].toLowerCase().indexOf(q) > -1; });\r\n    if(hits.length){\r\n      uit.innerHTML = '<div class=\"ss-treffers\">'+hits.map(function(it){ return kchip(it,true); }).join(\"\")+'<\/script>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | block: Happy customers, great results\r\n     Only change compared with your own version: the heading and subtitle\r\n     are now above the row of sector buttons instead of below it.\r\n     The CSS, margins and script are unchanged.\r\n     ===================================================================== -->\r\n\r\n<meta charset=\"UTF-8\"\/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\r\n<title>Happy customers, great results<\/title>\r\n\r\n<style>\r\n  :root {\r\n    --sb-dark: #06323C;\r\n    --sb-cyan: #08C8EA;\r\n    --sb-orange-1: #FF9F00;\r\n    --sb-orange-2: #FF4D00;\r\n    --sb-card: #FFFFFF;\r\n    --sb-ink: #06323C;\r\n    --sb-ink-soft: #5C7176;\r\n    --sb-line: #E3E7E6;\r\n    --sb-divider: #4A6A70;\r\n    --sb-badge-bg: #FFFFFF;\r\n    --sb-badge-shadow: 0 1px 4px rgba(6,50,60,0.12);\r\n    --sb-heading: #04313C;\r\n    --sb-badge-selected-bg: var(--sb-dark);\r\n    --sb-badge-selected-text: #fff;\r\n    --sb-badge-selected-sub: #9FB0B3;\r\n    --sb-gradient-rgb: 6,50,60;\r\n    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);\r\n  }\r\n\r\n  body.theme-dark {\r\n    --sb-card: #0E4450;\r\n    --sb-ink: #F2F6F6;\r\n    --sb-ink-soft: #A9C0C3;\r\n    --sb-line: rgba(255,255,255,0.18);\r\n    --sb-divider: rgba(255,255,255,0.28);\r\n    --sb-badge-bg: rgba(255,255,255,0.08);\r\n    --sb-badge-shadow: none;\r\n    --sb-heading: #F2F6F6;\r\n    --sb-badge-selected-bg: var(--sb-cyan);\r\n    --sb-badge-selected-text: #06323C;\r\n    --sb-badge-selected-sub: #0E3A42;\r\n    --sb-gradient-rgb: 2,10,12;\r\n  }\r\n\r\n  * { box-sizing: border-box; }\r\n\r\n  section.cases {\r\n    font-family: \"Montserrat\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    -webkit-font-smoothing: antialiased;\r\n    max-width: 1180px;\r\n    margin: 0 auto;\r\n    padding: 88px 32px 96px;\r\n  }\r\n\r\n  .cases-head {\r\n    margin: 0 0 56px;\r\n    text-align: left;\r\n  }\r\n\r\n  .cases-head h2 {\r\n    font-size: clamp(26px, 3.4vw, 38px);\r\n    line-height: 1.15;\r\n    letter-spacing: -0.015em;\r\n    margin: 0 0 14px;\r\n    font-weight: 800;\r\n    color: var(--sb-heading);\r\n  }\r\n\r\n  .cases-head p {\r\n    margin: 0;\r\n    max-width: 640px;\r\n    font-size: 17px;\r\n    line-height: 1.5;\r\n    color: var(--sb-ink-soft);\r\n  }\r\n\r\n  \/* Sector badges *\/\r\n  .logobar {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 12px;\r\n    padding: 28px 24px;\r\n    margin-bottom: 64px;\r\n    border-top: 1px solid var(--sb-divider);\r\n    border-bottom: 1px solid var(--sb-divider);\r\n  }\r\n\r\n  .sector-badge {\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    gap: 1px;\r\n    padding: 8px 18px;\r\n    border-radius: 100px;\r\n    background: var(--sb-badge-bg);\r\n    box-shadow: var(--sb-badge-shadow);\r\n    white-space: nowrap;\r\n    border: none;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    text-align: left;\r\n    text-decoration: none;\r\n    color: inherit;\r\n    transition: background 0.15s ease, transform 140ms var(--ease-out);\r\n  }\r\n\r\n  .sector-badge:active { transform: scale(0.97); }\r\n  .sector-badge.is-selected { background: var(--sb-badge-selected-bg); }\r\n  .sector-badge.is-selected .sector { color: var(--sb-badge-selected-text); }\r\n  .sector-badge.is-selected .company { color: var(--sb-badge-selected-sub); }\r\n  .sector-badge .sector { font-size: 13px; font-weight: 700; color: var(--sb-heading); }\r\n  .sector-badge .company { font-size: 11.5px; color: var(--sb-ink-soft); }\r\n\r\n  \/* Single-case stage *\/\r\n  .stage-wrap {\r\n    max-width: 920px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n  }\r\n\r\n  .stage-arrow {\r\n    flex-shrink: 0;\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    border: 1px solid var(--sb-line);\r\n    background: var(--sb-card);\r\n    color: var(--sb-heading);\r\n    font-size: 18px;\r\n    line-height: 1;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: transform 150ms var(--ease-out), border-color 0.15s ease;\r\n  }\r\n\r\n  .stage-arrow:active { transform: scale(0.93); }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\r\n    .stage-arrow:hover { border-color: var(--sb-cyan); }\r\n  }\r\n\r\n  .stage { position: relative; flex-grow: 1; min-width: 0; }\r\n\r\n  \/* Full-bleed photo card with text overlay *\/\r\n  .case-card {\r\n    display: none;\r\n    position: relative;\r\n    border-radius: 16px;\r\n    overflow: hidden;\r\n    aspect-ratio: 16 \/ 9;\r\n    background-size: cover;\r\n    background-position: center;\r\n    opacity: 1;\r\n    transition: opacity 200ms var(--ease-out);\r\n  }\r\n\r\n  .case-card.is-active { display: flex; align-items: flex-end; }\r\n  .case-card.is-leaving { opacity: 0; }\r\n\r\n  .case-card::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(180deg, rgba(var(--sb-gradient-rgb),0) 22%, rgba(var(--sb-gradient-rgb),0.42) 52%, rgba(var(--sb-gradient-rgb),0.93) 100%);\r\n    pointer-events: none;\r\n  }\r\n\r\n  .case-content {\r\n    position: relative;\r\n    z-index: 1;\r\n    width: 100%;\r\n    padding: 36px 40px 34px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 14px;\r\n  }\r\n\r\n  .result {\r\n    font-size: 28px;\r\n    line-height: 1.2;\r\n    font-weight: 700;\r\n    color: #fff;\r\n    letter-spacing: -0.01em;\r\n    text-shadow: 0 1px 12px rgba(0,0,0,0.15);\r\n  }\r\n\r\n  .result .accent { color: #5FD3EA; }\r\n\r\n  .quote {\r\n    font-size: 15.5px;\r\n    line-height: 1.55;\r\n    color: #E3ECEE;\r\n    margin: 0;\r\n    max-width: 46em;\r\n  }\r\n\r\n  .person {\r\n    display: flex;\r\n    align-items: center;\r\n    padding-top: 16px;\r\n    border-top: 1px solid rgba(255,255,255,0.25);\r\n  }\r\n\r\n  .person-name { font-size: 13.5px; line-height: 1.4; }\r\n  .person-name strong { display: block; font-weight: 700; color: #fff; }\r\n  .person-name span { color: #B9C9CB; }\r\n\r\n  \/* Dots *\/\r\n  .dots {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    margin-top: 28px;\r\n  }\r\n\r\n  .dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 100px;\r\n    background: var(--sb-line);\r\n    border: none;\r\n    padding: 0;\r\n    cursor: pointer;\r\n    transition: width 220ms var(--ease-out), background 0.15s ease, transform 140ms var(--ease-out);\r\n  }\r\n\r\n  .dot:active { transform: scale(0.9); }\r\n  .dot.is-active { width: 24px; background: var(--sb-cyan); }\r\n\r\n  \/* CTA row *\/\r\n  .cta-row {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 14px;\r\n    margin-top: 56px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .btn {\r\n    display: inline-block;\r\n    padding: 13px 26px;\r\n    border-radius: 8px;\r\n    font-size: 15px;\r\n    font-weight: 700;\r\n    text-decoration: none;\r\n    border: none;\r\n    cursor: pointer;\r\n    transition: transform 150ms var(--ease-out);\r\n  }\r\n\r\n  .btn:active { transform: scale(0.97); }\r\n\r\n  @media (hover: hover) and (pointer: fine) {\r\n    .btn:hover { transform: scale(1.02); }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .btn, .btn:hover, .btn:active,\r\n    .stage-arrow, .stage-arrow:active,\r\n    .dot, .dot:active,\r\n    .case-card { transform: none !important; transition: none !important; }\r\n  }\r\n\r\n  .btn-primary {\r\n    background: linear-gradient(90deg, var(--sb-orange-1), var(--sb-orange-2));\r\n    color: #fff;\r\n  }\r\n\r\n  .btn-secondary {\r\n    background: transparent;\r\n    color: var(--sb-heading);\r\n    border: 1.5px solid var(--sb-line);\r\n  }\r\n\r\n  @media (max-width: 700px) {\r\n    section.cases { padding: 56px 20px 64px; }\r\n    .logobar { gap: 8px; }\r\n    .stage-wrap { gap: 8px; }\r\n    .case-content { padding: 26px 24px 24px; }\r\n    .result { font-size: 22px; }\r\n    .quote { font-size: 14px; }\r\n    .stage-arrow { width: 34px; height: 34px; font-size: 16px; }\r\n  }\r\n<\/style>\r\n\r\n<section class=\"cases\">\r\n\r\n  <div class=\"cases-head\">\r\n    <h2>Happy customers, great results<\/h2>\r\n    <p>Six companies, five industries, one clear pattern: less hassle and more control once the job sheet goes digital.<\/p>\r\n  <\/div>\r\n\r\n  <div class=\"logobar\">\r\n    <button class=\"sector-badge\" data-case=\"cor\"><span class=\"sector\">Sewer services<\/span><span class=\"company\">COR<\/span><\/button>\r\n    <button class=\"sector-badge\" data-case=\"savona\"><span class=\"sector\">Installation<\/span><span class=\"company\">Savona<\/span><\/button>\r\n    <button class=\"sector-badge\" data-case=\"okhygiene\"><span class=\"sector\">Cleaning &#038; hygiene<\/span><span class=\"company\">OK Hygi\u00ebne<\/span><\/button>\r\n    <button class=\"sector-badge\" data-case=\"pmt\"><span class=\"sector\">Security<\/span><span class=\"company\">PMT Smartpoint<\/span><\/button>\r\n    <button class=\"sector-badge\" data-case=\"campenaar\"><span class=\"sector\">Coffee machines<\/span><span class=\"company\">Campenaar<\/span><\/button>\r\n    <button class=\"sector-badge\" data-case=\"filax\"><span class=\"sector\">Other industries<\/span><span class=\"company\">Filax<\/span><\/button>\r\n  <\/div>\r\n\r\n  <div class=\"stage-wrap\">\r\n    <button class=\"stage-arrow\" id=\"prevBtn\" aria-label=\"Previous case\">\u2039<\/button>\r\n\r\n    <div class=\"stage\">\r\n\r\n      <div class=\"case-card is-active\" data-case=\"campenaar\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/Coffee-Campenaar.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\">From 3.5 hours to <span class=\"accent\">30 minutes<\/span> per day<\/div>\r\n          <p class=\"quote\">&#8220;What we used to do took around 3.5 hours a day just to process job sheets. Now we are finished within half an hour.&#8221;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>Geert-Jan Snoeier<\/strong>\r\n              <span>Operations Manager, Campenaar Koffie<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"case-card\" data-case=\"okhygiene\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/OK-hygien.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\"><span class=\"accent\">8 to 10 hours<\/span> saved per week<\/div>\r\n          <p class=\"quote\">&#8220;Since we started using Simple-Simon, we save at least 8 to 10 hours a week, and far fewer mistakes are made.&#8221;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>OK Hygi\u00ebne<\/strong>\r\n              <span>Family business, operating nationwide<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"case-card\" data-case=\"pmt\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/PMT-uitzoom.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\">\u00b1900 job sheets\/week, invoicing <span class=\"accent\">2 days<\/span> faster<\/div>\r\n          <p class=\"quote\">&#8220;We create around 900 job sheets a week. Thanks to the Exact integration, we now finish invoicing at least two days earlier each week.&#8221;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>Milan Navis<\/strong>\r\n              <span>Operations Manager, PMT Smartpoint<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"case-card\" data-case=\"savona\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/Savona.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\"><span class=\"accent\">10 minutes<\/span> saved per job sheet<\/div>\r\n          <p class=\"quote\">&#8220;It quickly saves around 10 minutes per job sheet, and over the course of a week that really adds up.&#8221;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>Thomas Verwoerd van Wanroy<\/strong>\r\n              <span>Service &#038; Planning, Savona<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"case-card\" data-case=\"cor\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/COR-Riooltechniek.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\">Number of <span class=\"accent\">phone calls<\/span> cut in half<\/div>\r\n          <p class=\"quote\">&#8220;Job sheets are scheduled or moved without all the back-and-forth calling, which has cut the number of phone calls in half.&#8221;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>Ronald van Buuren<\/strong>\r\n              <span>Coppelmans Drain Unblocking and Cleaning<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"case-card\" data-case=\"filax\" style=\"background-image:url('https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/09\/Filax.png')\">\r\n        <div class=\"case-content\">\r\n          <div class=\"result\">One portal, <span class=\"accent\">complete overview<\/span><\/div>\r\n          <p class=\"quote\">&#8220;Efficiency comes first for us, and having everything clearly organised in one portal makes a huge difference.&#8221;<\/p>\r\n          <div class=\"person\">\r\n            <div class=\"person-name\">\r\n              <strong>Filax<\/strong>\r\n              <span>Part of Bruns, exhibition &#038; museum technology<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <button class=\"stage-arrow\" id=\"nextBtn\" aria-label=\"Next case\">\u203a<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"dots\" id=\"dots\">\r\n    <button class=\"dot is-active\" data-case=\"campenaar\" aria-label=\"Campenaar Koffie\"><\/button>\r\n    <button class=\"dot\" data-case=\"okhygiene\" aria-label=\"OK Hygi\u00ebne\"><\/button>\r\n    <button class=\"dot\" data-case=\"pmt\" aria-label=\"PMT Smartpoint\"><\/button>\r\n    <button class=\"dot\" data-case=\"savona\" aria-label=\"Savona\"><\/button>\r\n    <button class=\"dot\" data-case=\"cor\" aria-label=\"COR\"><\/button>\r\n    <button class=\"dot\" data-case=\"filax\" aria-label=\"Filax\"><\/button>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n  (function () {\r\n    var order = ['campenaar', 'okhygiene', 'pmt', 'savona', 'cor', 'filax'];\r\n    var current = 'campenaar';\r\n    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n    var stage = document.querySelector('.stage');\r\n    var badges = document.querySelectorAll('.sector-badge');\r\n    var dots = document.querySelectorAll('.dot');\r\n\r\n    function syncControls(key) {\r\n      badges.forEach(function (b) {\r\n        b.classList.toggle('is-selected', b.getAttribute('data-case') === key);\r\n      });\r\n\r\n      dots.forEach(function (d) {\r\n        d.classList.toggle('is-active', d.getAttribute('data-case') === key);\r\n      });\r\n    }\r\n\r\n    function activate(key) {\r\n      if (key === current) return;\r\n\r\n      var currentCard = stage.querySelector('.case-card.is-active');\r\n      var nextCard = stage.querySelector('.case-card[data-case=\"' + key + '\"]');\r\n\r\n      if (!nextCard) return;\r\n\r\n      current = key;\r\n      syncControls(key);\r\n\r\n      if (reduceMotion || !currentCard) {\r\n        if (currentCard) currentCard.classList.remove('is-active');\r\n        nextCard.classList.add('is-active');\r\n        return;\r\n      }\r\n\r\n      currentCard.classList.add('is-leaving');\r\n\r\n      setTimeout(function () {\r\n        currentCard.classList.remove('is-active', 'is-leaving');\r\n        nextCard.style.opacity = '0';\r\n        nextCard.classList.add('is-active');\r\n\r\n        requestAnimationFrame(function () {\r\n          requestAnimationFrame(function () {\r\n            nextCard.style.opacity = '';\r\n          });\r\n        });\r\n      }, 180);\r\n    }\r\n\r\n    function step(delta) {\r\n      var idx = order.indexOf(current);\r\n      var nextIdx = (idx + delta + order.length) % order.length;\r\n      activate(order[nextIdx]);\r\n    }\r\n\r\n    badges.forEach(function (b) {\r\n      b.addEventListener('click', function () {\r\n        activate(b.getAttribute('data-case'));\r\n      });\r\n    });\r\n\r\n    dots.forEach(function (d) {\r\n      d.addEventListener('click', function () {\r\n        activate(d.getAttribute('data-case'));\r\n      });\r\n    });\r\n\r\n    document.getElementById('prevBtn').addEventListener('click', function () {\r\n      step(-1);\r\n    });\r\n\r\n    document.getElementById('nextBtn').addEventListener('click', function () {\r\n      step(1);\r\n    });\r\n  })();\r\n<\/script>\n\n\n\n<!-- =====================================================================\r\n     Simple-Simon | block: Two ways to get started\r\n     Paste this entire file into ONE Custom HTML block on your page.\r\n     There is no <html>, <head> or <body>: your page already has those.\r\n\r\n     Are there multiple Simple-Simon blocks on the same page? Then remove\r\n     the section between SHARED BASE BLOCK and ONLY FOR THIS BLOCK below.\r\n     ===================================================================== -->\r\n\r\n<style>\r\n\/* =====================================================================\r\n   SHARED BASE BLOCK\r\n   Used in all six block files and identical everywhere.\r\n   Contains the colours for light and dark mode. If you use multiple blocks\r\n   on the same page, paste this only ONCE.\r\n\r\n   Dark mode is linked to body.theme-dark, the class the theme itself\r\n   adds to <body> when the visitor uses the switch in the header.\r\n   If you want to view this file separately, add class=\"theme-dark\" to <body>.\r\n   ===================================================================== *\/\r\n\r\n\/* ============================================================\r\n   Simple-Simon landing page\r\n   Colours, spacing, radius and shadows come directly from the\r\n   Simple-Simon design system (tokens.json).\r\n   Mark Pro Regular is embedded; headings use Figtree\r\n   because Mark Pro Bold\/Heavy is not yet available in the design system.\r\n   ============================================================ *\/\r\n\r\n\/* The font comes from the website itself, not from this file.\r\n   The website uses Montserrat; it is placed first in the stack below. *\/\r\n\r\n:root{\r\n  \/* --- colour tokens --- *\/\r\n  \/* vlak-a and vlak-b alternate as section backgrounds *\/\r\n  --vlak-a:#e5f5fa;\r\n  --vlak-b:#ffffff;\r\n  --vlak-accent:#04313c;       \/* dark column in 'Recognise this?' *\/\r\n  --hero-bg:#04313c;           \/* hero *\/\r\n  --surface:#ffffff;           \/* cards and panels on top of a section *\/\r\n  --surface-tint:#e5f5fa;\r\n  --brand-blue-soft:#aae1f4;\r\n  --brand-blue:#4ec0e7;\r\n  --brand-blue-deep:#42a8cf;\r\n  --brand-orange:#f97617;\r\n  --brand-orange-hover:#e06509;\r\n  --ink:#04313c;\r\n  --ink-muted:#2a5468;\r\n  --ink-deep:#022730;          \/* darker area, derived from ink *\/\r\n  --on-dark:#ffffff;\r\n  --on-dark-muted:#a9cbd8;\r\n  --line:#c3dfeb;\r\n  --line-dark:rgba(174,214,230,.22);\r\n\r\n  \/* --- spacing --- *\/\r\n  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;\r\n  --space-5:24px; --space-6:32px; --space-8:48px; --space-10:64px;\r\n\r\n  \/* --- radius --- *\/\r\n  --radius-sm:6px; --radius-md:12px; --radius-lg:24px; --radius-pill:999px;\r\n\r\n  \/* --- shadow --- *\/\r\n  --shadow-sm:0 2px 8px rgba(4,49,60,.08);\r\n  --shadow-card:0 8px 24px rgba(4,49,60,.10);\r\n  --shadow-float:0 24px 60px rgba(2,39,48,.35);\r\n\r\n  --font-body:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n  --font-display:\"Montserrat\",\"Mark Pro\",system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n\r\n  --maxw:1160px;\r\n\r\n  box-sizing:border-box;\r\n  padding-top:env(safe-area-inset-top,0px);\r\n  padding-bottom:env(safe-area-inset-bottom,0px);\r\n}\r\n\r\n\/* ---------- dark mode ----------\r\n   The website switches to dark mode using the theme-dark class on <body>\r\n   (Fluidify theme, button in the header). The dark values therefore use\r\n   body.theme-dark and NOT prefers-color-scheme, otherwise visitors with a\r\n   dark system theme could see these blocks in dark mode while the rest of\r\n   the page remains light. *\/\r\nbody.theme-dark{\r\n  --vlak-a:#06323c;\r\n  --vlak-b:#0f4054;\r\n  --vlak-accent:#15718a;\r\n  --hero-bg:#04272f;\r\n  --surface:#14566a;\r\n  --surface-tint:#0f4054;\r\n  --ink:#eef8fb;\r\n  --ink-muted:#bcdbe7;\r\n  --on-dark-muted:#c3dfe9;\r\n  --line:rgba(174,214,230,.26);\r\n  --shadow-sm:0 2px 8px rgba(0,0,0,.30);\r\n  --shadow-card:0 8px 24px rgba(0,0,0,.38);\r\n}\r\n\r\n\/* the two columns of 'Recognise this?' must also remain visually separate in dark mode *\/\r\nbody.theme-dark .ss-nskol.ss-nu{background:#06323c}\r\nbody.theme-dark .ss-nskol.ss-straks{background:var(--vlak-accent)}\r\n\r\n*,*::before,*::after{box-sizing:inherit}\r\nhtml{scroll-behavior:smooth;-webkit-text-size-adjust:100%}\r\n\r\nbody{\r\n  margin:0;\r\n  background:var(--vlak-a);\r\n  color:var(--ink);\r\n  font-family:var(--font-body);\r\n  font-size:17px;\r\n  line-height:1.6;\r\n  -webkit-font-smoothing:antialiased;\r\n}\r\n\r\nimg{max-width:100%;display:block}\r\n\r\nh1,h2,h3{\r\n  font-family:var(--font-display);\r\n  margin:0;\r\n  letter-spacing:-.015em;\r\n  line-height:1.1;\r\n}\r\n\r\np{margin:0}\r\na{color:inherit}\r\n\r\n:focus-visible{\r\n  outline:3px solid var(--brand-orange);\r\n  outline-offset:3px;\r\n  border-radius:4px;\r\n}\r\n\r\n.ss-wrap{\r\n  max-width:var(--maxw);\r\n  margin:0 auto;\r\n  padding:0 var(--space-5);\r\n}\r\n\r\n.ss-section{\r\n  padding:var(--space-10) 0;\r\n  background:var(--vlak-a);\r\n}\r\n\r\n@media (min-width:900px){\r\n  .ss-section{padding:88px 0}\r\n}\r\n\r\n\/* ---------- buttons ---------- *\/\r\n.ss-btn{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:8px;\r\n  font-family:var(--font-display);\r\n  font-weight:700;\r\n  font-size:16px;\r\n  text-decoration:none;\r\n  border-radius:var(--radius-pill);\r\n  padding:14px 26px;\r\n  border:2px solid transparent;\r\n  cursor:pointer;\r\n  transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;\r\n}\r\n\r\n.ss-btn:active{\r\n  transform:translateY(1px);\r\n}\r\n\r\n\/* background-origin on border-box, otherwise the gradient is calculated inside\r\n   the border and repeats in the outer 2px *\/\r\n.ss-btn-primary{\r\n  background:linear-gradient(90deg,#ffa000 0%,#ff4800 100%);\r\n  background-origin:border-box;\r\n  color:#fff;\r\n  border-color:transparent;\r\n}\r\n\r\n.ss-btn-primary:hover{\r\n  filter:brightness(1.06);\r\n  border-color:transparent;\r\n}\r\n\r\n.ss-btn-ghost-dark{\r\n  background:transparent;\r\n  color:#fff;\r\n  border-color:rgba(255,255,255,.45);\r\n}\r\n\r\n.ss-btn-ghost-dark:hover{\r\n  border-color:#fff;\r\n  background:rgba(255,255,255,.08);\r\n}\r\n\r\n.ss-btn-ghost{\r\n  background:var(--surface);\r\n  color:var(--ink);\r\n  border-color:var(--brand-blue-deep);\r\n}\r\n\r\n.ss-btn-ghost:hover{\r\n  border-color:var(--ink);\r\n  background:var(--surface-tint);\r\n}\r\n\r\n.ss-btn-sm{\r\n  padding:10px 18px;\r\n  font-size:15px;\r\n}\r\n\r\n.ss-btn-lg{\r\n  padding:17px 32px;\r\n  font-size:17px;\r\n}\r\n\r\n@media (max-width:520px){\r\n  .ss-hero-cta{gap:10px}\r\n  .ss-hero-cta .ss-btn{flex:1 1 100%}\r\n}\r\n\r\n\/* .ss-btn-block is no longer used: buttons are aligned left in the card, not full width *\/\r\n@media (max-width:520px){\r\n  .ss-pkaart .ss-btn{align-self:stretch}\r\n}\r\n\r\n\/* ---------- general sections ---------- *\/\r\n.ss-tint{\r\n  background:var(--vlak-b);\r\n}\r\n\r\n.ss-eyebrow-h2{\r\n  font-size:clamp(26px,3.4vw,38px);\r\n  font-weight:800;\r\n  text-wrap:balance;\r\n  margin-bottom:var(--space-4);\r\n}\r\n\r\n.ss-lead{\r\n  font-size:18px;\r\n  color:var(--ink-muted);\r\n  max-width:60ch;\r\n}\r\n\r\n.ss-section-head{\r\n  margin-bottom:var(--space-8);\r\n}\r\n\r\n\r\n\/* =====================================================================\r\n   ONLY FOR THIS BLOCK: Two ways to get started\r\n   ===================================================================== *\/\r\n\r\n\/* ========== TWO PATHS ========== *\/\r\n.ss-paren{\r\n  display:grid;\r\n  gap:20px;\r\n}\r\n\r\n@media (min-width:820px){\r\n  .ss-paren{\r\n    grid-template-columns:1fr 1fr;\r\n    gap:24px;\r\n  }\r\n}\r\n\r\n.ss-pkaart{\r\n  background:var(--surface);\r\n  border:1px solid var(--line);\r\n  border-radius:var(--radius-lg);\r\n  padding:30px;\r\n  display:flex;\r\n  flex-direction:column;\r\n  opacity:0;\r\n  transform:translateY(16px);\r\n  transition:opacity .55s ease,transform .3s cubic-bezier(.3,1.1,.5,1),box-shadow .3s ease,border-color .3s ease;\r\n}\r\n\r\n.ss-go .ss-pkaart{\r\n  opacity:1;\r\n  transform:none;\r\n}\r\n\r\n.ss-go .ss-pkaart:nth-child(2){\r\n  transition-delay:.14s,.14s,0s,0s;\r\n}\r\n\r\n.ss-pkaart:hover{\r\n  transform:translateY(-5px);\r\n  box-shadow:0 18px 40px rgba(4,49,60,.16);\r\n  border-color:var(--brand-blue);\r\n}\r\n\r\n.ss-pkaart h3{\r\n  font-size:23px;\r\n  margin-bottom:18px;\r\n}\r\n\r\n.ss-plijst{\r\n  display:grid;\r\n  gap:13px;\r\n  margin-bottom:26px;\r\n}\r\n\r\n.ss-pkaart .ss-btn{\r\n  margin-top:auto;\r\n  align-self:flex-start;\r\n}\r\n\r\n.ss-vk{\r\n  display:flex;\r\n  gap:11px;\r\n  align-items:flex-start;\r\n  font-size:15.5px;\r\n  line-height:1.45;\r\n}\r\n\r\n.ss-vk svg{\r\n  flex:none;\r\n  margin-top:4px;\r\n}\r\n\r\n.ss-vk svg path{\r\n  stroke-dasharray:22;\r\n  stroke-dashoffset:22;\r\n}\r\n\r\n.ss-go .ss-vk svg path{\r\n  animation:tik .4s ease forwards;\r\n}\r\n\r\n@keyframes tik{\r\n  to{stroke-dashoffset:0}\r\n}\r\n\r\n.ss-go .ss-pkaart:nth-child(1) .ss-vk:nth-child(1) svg path{animation-delay:.5s}\r\n.ss-go .ss-pkaart:nth-child(1) .ss-vk:nth-child(2) svg path{animation-delay:.68s}\r\n.ss-go .ss-pkaart:nth-child(1) .ss-vk:nth-child(3) svg path{animation-delay:.86s}\r\n.ss-go .ss-pkaart:nth-child(2) .ss-vk:nth-child(1) svg path{animation-delay:.64s}\r\n.ss-go .ss-pkaart:nth-child(2) .ss-vk:nth-child(2) svg path{animation-delay:.82s}\r\n.ss-go .ss-pkaart:nth-child(2) .ss-vk:nth-child(3) svg path{animation-delay:1s}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .ss-pkaart{\r\n    opacity:1 !important;\r\n    transform:none !important;\r\n    animation:none !important;\r\n  }\r\n\r\n  .ss-vk svg path{\r\n    stroke-dashoffset:0;\r\n    animation:none;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"ss-section ss-tint\" id=\"prijzen\" data-anim=\"\">\r\n  <div class=\"ss-wrap\">\r\n\r\n    <div class=\"ss-section-head\">\r\n      <h2 class=\"ss-eyebrow-h2\">Two ways to get started<\/h2>\r\n      <p class=\"ss-lead\">Which one suits your business?<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ss-paren\">\r\n\r\n      <div class=\"ss-pkaart\" id=\"demo\">\r\n        <h3>Walk through it together<\/h3>\r\n\r\n        <div class=\"ss-plijst\">\r\n\r\n          <span class=\"ss-vk\">\r\n            <svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\">\r\n              <path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <\/svg>\r\n            We walk through your workflow, not a standard presentation\r\n          <\/span>\r\n\r\n          <span class=\"ss-vk\">\r\n            <svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\">\r\n              <path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <\/svg>\r\n            See straight away how the integration with your software works\r\n          <\/span>\r\n\r\n          <span class=\"ss-vk\">\r\n            <svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\">\r\n              <path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <\/svg>\r\n            See what switching will cost you in time, not just money\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n        <a class=\"ss-btn ss-btn-primary\" href=\"https:\/\/simple-simon.com\/en\/schedule-a-live-demo\/\">Book a demo<\/a>\r\n      <\/div>\r\n\r\n      <div class=\"ss-pkaart\" id=\"trial\">\r\n        <h3>Try it yourself<\/h3>\r\n\r\n        <div class=\"ss-plijst\">\r\n\r\n          <span class=\"ss-vk\">\r\n            <svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\">\r\n              <path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <\/svg>\r\n            Start today and add your first job sheets to the planning board straight away\r\n          <\/span>\r\n\r\n          <span class=\"ss-vk\">\r\n            <svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\">\r\n              <path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <\/svg>\r\n            No credit card required, just try it free for 14 days\r\n          <\/span>\r\n\r\n          <span class=\"ss-vk\">\r\n            <svg width=\"19\" height=\"19\" viewbox=\"0 0 20 20\" aria-hidden=\"true\">\r\n              <path d=\"M4 10.5l4 4 8-9\" stroke=\"#42a8cf\" stroke-width=\"2.6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <\/svg>\r\n            Need help setting things up? Give us a call or book a free demo\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n        <a class=\"ss-btn ss-btn-ghost\" href=\"https:\/\/app.simple-simon.net\/Login\/Signup\/Trial.aspx?lang=nl\">Try it for free<\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n\r\n  var io = new IntersectionObserver(function(es){\r\n    es.forEach(function(e){\r\n      if(e.isIntersecting){\r\n        e.target.classList.add(\"ss-go\");\r\n        klaar(e.target);\r\n        io.unobserve(e.target);\r\n      }\r\n    });\r\n  }, {\r\n    threshold:0,\r\n    rootMargin:\"0px 0px -18% 0px\"\r\n  });\r\n\r\n  document.querySelectorAll(\"[data-anim]\").forEach(function(el){\r\n    io.observe(el);\r\n  });\r\n\r\n  function klaar(el){}\r\n\r\n})();\r\n<\/script>\n\n\n\n\n\n<section class=\"theme-faq__wrapper  theme-m-sm\">\n\n\t<div class=\"container\">\n\t\t<div class=\"row justify-content-center\">\n\t\t\t<div class=\"col-md-9 text-center\">\n\t\t\t\t<div class=\"theme-faq__branding\">\n\n\t\t\t\t<\/div>\n\t\t\t\t<h2>Frequently asked questions. <span style=\"color: #00ccff\">Simple answer.<\/span><\/h2>\n\n\n\n\t\t\t\t<form action=\"\/\" method=\"GET\" autocomplete=\"off\" class=\"theme-faq__form\">\n\n\t\t\t\t\t<input type=\"text\" name=\"s\" placeholder=\"Ask your question\">\n\t\t\t\t\t<button class=\"theme-btn theme-btn__blue\" type=\"submit\">Search\t\t\t\t\t<\/button>\n\n\t\t\t\t<\/form>\n\n\n\n\t\t\t\t<div class=\"theme-faq__row\" itemscope itemtype=\"https:\/\/schema.org\/FAQPage\"><div class=\"theme-faq__question\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"theme-faq__question-title\" itemprop=\"name\">Scrolling through the weekly planning in Google Chrome is extremely slow. How can I resolve this?<\/div><div class=\"theme-faq__question-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" >\r\n\t\t\t\t\t<div itemprop=\"text\">Due to an update to Google Chrome, scrolling in the weekly planner may be extremely slow.\r\nTo resolve this, please follow these steps:\r\n\r\n1. Open Google Chrome and type chrome:\/\/flags in the URL bar.\r\n2. At the top of this page, search for Smooth Scrolling.\r\n3. Set this to Disabled.\r\n4. Close all tabs and restart Google Chrome.<\/div><\/div><\/div><div class=\"theme-faq__question\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"theme-faq__question-title\" itemprop=\"name\">How do I order new licences?<\/div><div class=\"theme-faq__question-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" >\r\n\t\t\t\t\t<div itemprop=\"text\">Go to \u201cLicence\u201d -&gt; \u201cPurchase licences\u201d -&gt; Indicate how many licences you want to purchase (your details have already been filled in for you) -&gt; \u201cSave\u201d. You can also set up direct debit here under \u201cActivate direct debit\u201d.<\/div><\/div><\/div><div class=\"theme-faq__question\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"theme-faq__question-title\" itemprop=\"name\">Minimum app requirements<\/div><div class=\"theme-faq__question-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" >\r\n\t\t\t\t\t<div itemprop=\"text\">The Simon app is designed for devices running the latest technologies, so it is recommended that you install the Simon App on devices that meet a number of requirements. View the minimum requirements for a device (Android &amp; iOS) <a href=\"https:\/\/simple-simon.com\/minimale-vereisten-simon-app\/\">here.<\/a><\/div><\/div><\/div><div class=\"theme-faq__question\" itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"theme-faq__question-title\" itemprop=\"name\">Does Simple-Simon also work without the internet?<\/div><div class=\"theme-faq__question-answer\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" >\r\n\t\t\t\t\t<div itemprop=\"text\">Absolutely. Field technicians do not always have a stable connection. That is why the Simple-Simon app also works offline. As soon as there is an internet connection again, the app automatically synchronises all data.<\/div><\/div><\/div><\/div>\n\n\t\t\t\t<p><a class=\"theme-btn theme-btn__blue-gradient mx-auto\" href=\"https:\/\/simple-simon.com\/en\/frequently-asked-questions\/\">All frequently asked questions<\/a><\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n\n<!-- Simple-Simon webinar: plaats dit \u00e9\u00e9n keer, alleen op de homepage. -->\r\n<style>\r\n#ssw261029{all:initial;display:block;position:fixed;right:24px;bottom:24px;z-index:99990;width:400px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);overflow:auto;border:1px solid #d2e4e9;border-radius:20px;background:#fff;color:#073440;box-shadow:0 14px 52px #07344033;font:16px\/1.5 Arial,sans-serif;isolation:isolate}\r\n#ssw261029[hidden]{display:none!important}\r\n#ssw261029,#ssw261029 *{box-sizing:border-box}\r\n#ssw261029 .ssw-head{display:flex;align-items:center;gap:18px;padding:16px 60px 16px 20px;background:#e6f6fa}\r\n#ssw261029 .ssw-img{display:block;width:112px;height:112px;object-fit:contain;border-radius:10px;flex-shrink:0}\r\n#ssw261029 .ssw-label{margin:0 0 6px;color:#385e68;font:700 12px\/1.4 Arial,sans-serif;letter-spacing:.06em}\r\n#ssw261029 .ssw-brand{font:700 21px\/1.2 Arial,sans-serif}\r\n#ssw261029 .ssw-close{all:unset;box-sizing:border-box;position:absolute;right:10px;top:10px;display:grid;place-items:center;width:44px;height:44px;border:1px solid #c4dce3;border-radius:50%;background:#fff;color:#073440;cursor:pointer;font:26px\/1 Arial,sans-serif}\r\n#ssw261029 .ssw-body{padding:22px 24px 20px}\r\n#ssw261029 .ssw-title{margin:0 0 12px;font:700 28px\/1.12 Arial,sans-serif;color:#073440;letter-spacing:-.5px}\r\n#ssw261029 .ssw-copy{margin:0 0 16px;font:16px\/1.5 Arial,sans-serif;color:#385e68}\r\n#ssw261029 .ssw-date{margin:0 0 18px;font:700 15px\/1.5 Arial,sans-serif;color:#073440}\r\n#ssw261029 .ssw-cta{display:flex;justify-content:center;align-items:center;gap:12px;min-height:50px;padding:13px 14px;border-radius:10px;background:linear-gradient(90deg,#ffa500 0%,#ff4500 100%);color:#fff;text-decoration:none;font:700 17px\/1.4 Arial,sans-serif;transition:filter 160ms ease-out}\r\n#ssw261029 .ssw-foot{margin:12px 0 0;font:12px\/1.5 Arial,sans-serif;color:#49656f}\r\n#ssw261029 :is(a,button):focus-visible{outline:3px solid #073440;outline-offset:3px}\r\n#ssw261029.ssw-enter{animation:ssw261029-in 200ms ease-out}\r\n@keyframes ssw261029-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}\r\n@media(hover:hover){#ssw261029 .ssw-cta:hover{filter:brightness(.94)}}\r\n@media(max-width:600px){#ssw261029{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:360px;max-height:calc(100dvh - 32px - env(safe-area-inset-bottom))}#ssw261029 .ssw-img{width:88px;height:88px}#ssw261029 .ssw-title{font-size:25px}#ssw261029 .ssw-body{padding:18px 20px}}\r\n@media(prefers-reduced-motion:reduce){#ssw261029.ssw-enter{animation:none}#ssw261029 .ssw-cta{transition:none}}\r\n<\/style>\r\n<aside id=\"ssw261029\" role=\"region\" aria-labelledby=\"ssw261029-title\" hidden=\"\">\r\n  <button class=\"ssw-close\" type=\"button\" aria-label=\"Webinaruitnodiging sluiten\">\u00d7<\/button>\r\n  <div class=\"ssw-head\">\r\n    <img class=\"ssw-img\" width=\"112\" height=\"112\" alt=\"\" decoding=\"async\"\/>\r\n    <div><p class=\"ssw-label\">GRATIS WEBINAR<\/p><span class=\"ssw-brand\">Route Optimalisatie met Simon <span style=\"color:#f97617\">PRO<\/span><\/span><\/div>\r\n  <\/div>\r\n  <div class=\"ssw-body\">\r\n    <h2 class=\"ssw-title\" id=\"ssw261029-title\">Minder reistijd,<br\/>meer werkbonnen?<\/h2>\r\n    <p class=\"ssw-copy\">Ontdek slimme route optimalisatie tijdens ons gratis webinar.<\/p>\r\n    <p class=\"ssw-date\"><time datetime=\"2026-10-29T10:00:00+01:00\">Do 29 oktober 2026 \u00b7 10:00 uur<\/time><br\/><span style=\"font-weight:400\">Nederlandse tijd<\/span><\/p>\r\n    <a class=\"ssw-cta\" href=\"https:\/\/simple-simon.webinargeek.com\/simon-pro-minder-reistijd-meer-werkbonnen-met-slimme-routeoptimalisatie\">Schrijf je gratis in <span aria-hidden=\"true\">\u2192<\/span><\/a>\r\n    <p class=\"ssw-foot\">Webinar Route optimalisatie met Simon PRO<\/p>\r\n  <\/div>\r\n<\/aside>\r\n<script>\r\n(() => {\r\n  'use strict';\r\n  const cfg = {\r\n    enabled: true,\r\n    \/\/ VERVANG door de bestands-URL uit WordPress > Media:\r\n    imageUrl: 'https:\/\/simple-simon.com\/wp-content\/uploads\/2026\/10\/Werkbon-NL-16-1.png',\r\n    \/\/ Optioneel: URL van de 720px-versie voor scherpe schermen.\r\n    image2xUrl: '',\r\n    trigger: 'delay', \/\/ 'delay' OF 'scroll'; test apart, niet tegelijk.\r\n    delayMs: 3000,\r\n    scrollFraction: 0.40,\r\n    \/\/ 29 oktober is wintertijd: Europe\/Amsterdam = UTC+01:00.\r\n    \/\/ Eindtijd onbekend: uit voorzorg verbergen vanaf de start.\r\n    stopAt: '2026-10-29T10:00:00+01:00',\r\n    storageKey: 'ss-webinar-route-20261029',\r\n    \/\/ 'off', 'gtag' of 'gtm'. Kies \u00e9\u00e9n route, voorkom dubbeltelling.\r\n    analytics: 'off'\r\n  };\r\n  const root = document.getElementById('ssw261029');\r\n  if (!root || root.dataset.initialized) return;\r\n  root.dataset.initialized = 'true';\r\n  \/\/ Buiten de theme-container plaatsen voorkomt afknippen door overflow\/transform.\r\n  document.body.appendChild(root);\r\n  const stop = Date.parse(cfg.stopAt);\r\n  if (!cfg.enabled || !Number.isFinite(stop) || Date.now() >= stop) { root.remove(); return; }\r\n  let shown = false, disposed = false, timer, expiry;\r\n  const img = root.querySelector('img');\r\n  const cta = root.querySelector('.ssw-cta');\r\n  const closeButton = root.querySelector('button');\r\n  const absoluteImage = value => {try {return new URL(value).protocol === 'https:';} catch {return false;}};\r\n  \/\/ Tekst en CTA blijven bruikbaar als de afbeelding ontbreekt.\r\n  img.addEventListener('error', () => { img.hidden = true; img.style.display = 'none'; });\r\n  function suppressed() {\r\n    for (const storageName of ['localStorage','sessionStorage']) {\r\n      try {if (window[storageName].getItem(cfg.storageKey)) return true;} catch {}\r\n    }\r\n    return false;\r\n  }\r\n  function remember(reason) {\r\n    for (const storageName of ['localStorage','sessionStorage']) {\r\n      try {window[storageName].setItem(cfg.storageKey, reason);} catch {}\r\n    }\r\n  }\r\n  \/\/ Alleen gebruiken met bestaande GA4\/CMP-inrichting die consent afhandelt.\r\n  function track(action, reason) {\r\n    const params = {webinar_id:'route_20261029',popup_concept:'slide_in',trigger:cfg.trigger};\r\n    if (reason) params.reason = reason;\r\n    try {\r\n      if (cfg.analytics === 'gtag' && typeof window.gtag === 'function') {\r\n        window.gtag('event', 'webinar_popup_' + action, params);\r\n      } else if (cfg.analytics === 'gtm') {\r\n        window.dataLayer = window.dataLayer || [];\r\n        window.dataLayer.push({event:'webinar_popup_' + action,...params});\r\n      }\r\n    } catch {} \/\/ Tracking mag de CTA nooit blokkeren.\r\n  }\r\n  function clearTriggers() {\r\n    clearTimeout(timer);\r\n    window.removeEventListener('scroll', onScroll);\r\n    document.removeEventListener('visibilitychange', onVisibility);\r\n    document.removeEventListener('focusout', retry);\r\n  }\r\n  function dispose(reason, persist = false) {\r\n    if (disposed) return;\r\n    if (persist) remember(reason);\r\n    if (shown && reason !== 'expired' && reason !== 'other_tab') track('close', reason);\r\n    \/\/ Focus alleen herstellen wanneer deze zich in de slide-in bevindt.\r\n    if (root.contains(document.activeElement)) {\r\n      const target = document.querySelector('main h1, h1, main');\r\n      if (target) {\r\n        const old = target.getAttribute('tabindex');\r\n        target.setAttribute('tabindex','-1');target.focus({preventScroll:true});\r\n        if (old === null) target.removeAttribute('tabindex');else target.setAttribute('tabindex',old);\r\n      }\r\n    }\r\n    disposed = true;root.hidden = true;clearTriggers();clearTimeout(expiry);\r\n    document.removeEventListener('keydown', onKey);\r\n    window.removeEventListener('storage', onStorage);\r\n    document.removeEventListener('visibilitychange', checkExpiry);\r\n    root.remove();\r\n  }\r\n  function show() {\r\n    if (disposed || shown) return;\r\n    if (Date.now() >= stop) {dispose('expired');return;}\r\n    if (suppressed()) {dispose('other_tab');return;}\r\n    if (document.hidden) return;\r\n    \/\/ Niet verschijnen tijdens typen of terwijl een dialoog open staat.\r\n    const active = document.activeElement;\r\n    if ((active && active.matches('input,textarea,select,[contenteditable=\"true\"]')) ||\r\n        document.querySelector('dialog[open], [aria-modal=\"true\"]')) {timer = setTimeout(show,1000);return;}\r\n    if (absoluteImage(cfg.imageUrl)) {\r\n      img.src = cfg.imageUrl;\r\n      if (absoluteImage(cfg.image2xUrl)) img.srcset = cfg.imageUrl + ' 1x, ' + cfg.image2xUrl + ' 2x';\r\n    } else {img.hidden = true;img.style.display = 'none';}\r\n    root.hidden = false;root.classList.add('ssw-enter');shown = true;\r\n    \/\/ Geen focus overnemen en geen focus trap: dit is een niet-modale regio.\r\n    remember('shown');track('view');clearTriggers();\r\n  }\r\n  function onScroll() {\r\n    const available = document.documentElement.scrollHeight - innerHeight;\r\n    if (available > 0 && scrollY \/ available >= cfg.scrollFraction) show();\r\n  }\r\n  function retry() { if (cfg.trigger === 'scroll') onScroll(); }\r\n  function onVisibility() {\r\n    if (document.hidden) return;\r\n    if (cfg.trigger === 'scroll') onScroll();else show();\r\n  }\r\n  function checkExpiry() {if(Date.now() >= stop) dispose('expired');}\r\n  function onKey(event) {if(event.key === 'Escape' && root.contains(document.activeElement)) dispose('escape',true);}\r\n  function onStorage(event) {if(event.key === cfg.storageKey && event.newValue) dispose('other_tab');}\r\n  closeButton.addEventListener('click', () => dispose('button',true));\r\n  cta.addEventListener('click', event => {\r\n    if (Date.now() >= stop) {event.preventDefault();dispose('expired');return;}\r\n    remember('clicked');track('click'); \/\/ Klik is nog geen voltooide inschrijving.\r\n  });\r\n  document.addEventListener('keydown',onKey);\r\n  window.addEventListener('storage',onStorage);\r\n  document.addEventListener('visibilitychange',checkExpiry);\r\n  if (suppressed()) {dispose('other_tab');return;}\r\n  function scheduleExpiry() {\r\n    const remaining = stop - Date.now();\r\n    if (remaining <= 0) {dispose('expired');return;}\r\n    expiry = setTimeout(scheduleExpiry, Math.min(remaining,2147483647));\r\n  }\r\n  scheduleExpiry();\r\n  \/\/ visibilitychange pas activeren wanneer de vertraging verstreken is.\r\n  if (cfg.trigger === 'scroll') {\r\n    window.addEventListener('scroll',onScroll,{passive:true});\r\n    document.addEventListener('visibilitychange',onVisibility);\r\n    document.addEventListener('focusout',retry);onScroll();\r\n  } else {\r\n    timer = setTimeout(() => {\r\n      document.addEventListener('visibilitychange',onVisibility);show();\r\n    },cfg.delayMs);\r\n  }\r\n})();\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"Instant grip on your field service. Never lose a job sheet again. Never miss out on revenue again. With Simple-Simon No contract, on the road in no time Job sheet App Digital Planboard Hour registration Asset Management 4.8\/5 rated Simple-Simon is perfect for\u2026 Seven industries where we serve the most companies. Do you work in [&hellip;]","protected":false},"author":12,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"tags":[],"class_list":["post-3704","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/simple-simon.com\/en\/wp-json\/wp\/v2\/pages\/3704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simple-simon.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/simple-simon.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/simple-simon.com\/en\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/simple-simon.com\/en\/wp-json\/wp\/v2\/comments?post=3704"}],"version-history":[{"count":124,"href":"https:\/\/simple-simon.com\/en\/wp-json\/wp\/v2\/pages\/3704\/revisions"}],"predecessor-version":[{"id":20811,"href":"https:\/\/simple-simon.com\/en\/wp-json\/wp\/v2\/pages\/3704\/revisions\/20811"}],"wp:attachment":[{"href":"https:\/\/simple-simon.com\/en\/wp-json\/wp\/v2\/media?parent=3704"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simple-simon.com\/en\/wp-json\/wp\/v2\/tags?post=3704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}