{"id":2495,"date":"2025-09-15T11:23:49","date_gmt":"2025-09-15T11:23:49","guid":{"rendered":"https:\/\/webontwerpers.be\/website-laten-maken\/"},"modified":"2026-02-17T15:02:12","modified_gmt":"2026-02-17T15:02:12","slug":"website-laten-maken","status":"publish","type":"page","link":"https:\/\/webontwerpers.be\/fr\/website-laten-maken\/","title":{"rendered":"Website Laten Maken"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2495\" class=\"elementor elementor-2495 elementor-893\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1aaa157 e-con-full e-flex e-con e-parent\" data-id=\"1aaa157\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-61ee008 elementor-widget elementor-widget-html\" data-id=\"61ee008\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- WEBONTWERPERS \u2013 WEBSITE PAKKETTEN SECTION (4 PACKS SIDE-BY-SIDE DESKTOP)\n     Paste EVERYTHING into one Elementor HTML widget.\n-->\n<section class=\"wo-packs\" id=\"wo-packs\">\n  <style>\n    :root{\n      --wo-blue:#015af2;\n      --wo-purple:#a154d0;\n\n      --wo-bgA:#070A12;\n      --wo-bgB:#0a0f1f;\n\n      --wo-shadow: 0 22px 70px rgba(0,0,0,.30);\n      --wo-shadow2: 0 28px 95px rgba(0,0,0,.40);\n\n      --wo-radius:28px;\n      --wo-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;\n    }\n\n    .wo-packs{\n      width:100vw;\n      position:relative;\n      left:50%;\n      margin-left:-50vw;\n      padding: 96px 0;\n      background:\n        radial-gradient(1100px 520px at 14% 18%, rgba(1,90,242,.22), transparent 60%),\n        radial-gradient(1100px 520px at 86% 22%, rgba(161,84,208,.22), transparent 60%),\n        radial-gradient(900px 560px at 50% 110%, rgba(34,197,94,.10), transparent 60%),\n        linear-gradient(180deg, var(--wo-bgA), var(--wo-bgB));\n      font-family: var(--wo-font);\n      color: rgba(255,255,255,.92);\n      overflow:hidden;\n      isolation:isolate;\n    }\n\n    .wo-packs::before{\n      content:\"\";\n      position:absolute; inset:-2px;\n      background:\n        linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),\n        linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);\n      background-size: 72px 72px;\n      opacity:.10;\n      pointer-events:none;\n      mix-blend-mode:soft-light;\n      z-index:0;\n    }\n    .wo-packs::after{\n      content:\"\";\n      position:absolute; inset:-35%;\n      background: conic-gradient(from 0deg,\n        rgba(1,90,242,.22),\n        rgba(161,84,208,.22),\n        rgba(1,90,242,.22)\n      );\n      opacity:.10;\n      filter: blur(20px);\n      animation: woPacksSpin 22s linear infinite;\n      pointer-events:none;\n      z-index:0;\n    }\n    @keyframes woPacksSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }\n\n    .wo-packs__wrap{\n      max-width: 1480px;\n      margin: 0 auto;\n      padding: 0 18px;\n      position:relative;\n      z-index:1;\n    }\n\n    .wo-packs__kicker{\n      display:inline-flex;\n      align-items:center;\n      gap:10px;\n      font-weight: 900;\n      font-size: 12px;\n      letter-spacing:.42px;\n      text-transform:uppercase;\n      color: rgba(255,255,255,.86);\n      margin-bottom: 10px;\n    }\n    .wo-packs__dot{\n      width:10px;height:10px;border-radius:999px;\n      background: linear-gradient(135deg, var(--wo-blue), var(--wo-purple));\n      box-shadow: 0 0 0 6px rgba(1,90,242,.16);\n    }\n    .wo-packs__title{\n      margin:0 0 8px;\n      font-size: clamp(30px, 3.4vw, 48px);\n      line-height:1.04;\n      letter-spacing:-0.9px;\n    }\n    .wo-packs__title span{\n      background: linear-gradient(90deg, rgba(1,90,242,1), rgba(161,84,208,1));\n      -webkit-background-clip:text;\n      background-clip:text;\n      color: transparent;\n    }\n    .wo-packs__sub{\n      margin:0 0 22px;\n      color: rgba(255,255,255,.70);\n      font-size: 15.6px;\n      line-height: 1.75;\n      max-width: 70ch;\n    }\n\n    .wo-packs__grid{\n      display:grid;\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n      gap: 14px;\n      align-items: stretch;\n    }\n\n    .wo-pack{\n      position:relative;\n      border-radius: var(--wo-radius);\n      padding: 18px;\n      background: rgba(255,255,255,.06);\n      border: 1px solid rgba(255,255,255,.14);\n      box-shadow: var(--wo-shadow);\n      overflow:hidden;\n      transform: translateZ(0);\n      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, filter .22s ease;\n      display:flex;\n      flex-direction:column;\n      min-height: 100%;\n    }\n    .wo-pack::before{\n      content:\"\";\n      position:absolute;\n      inset:-2px;\n      border-radius: calc(var(--wo-radius) + 2px);\n      padding: 2px;\n      background: linear-gradient(135deg, rgba(1,90,242,.55), rgba(161,84,208,.55), rgba(1,90,242,.22));\n      -webkit-mask:\n        linear-gradient(#000 0 0) content-box,\n        linear-gradient(#000 0 0);\n      -webkit-mask-composite: xor;\n      mask-composite: exclude;\n      opacity:.18;\n      pointer-events:none;\n    }\n    .wo-pack::after{\n      content:\"\";\n      position:absolute;\n      top:-40%;\n      left:-60%;\n      width: 60%;\n      height: 180%;\n      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));\n      transform: rotate(18deg);\n      opacity: 0;\n      pointer-events:none;\n    }\n    .wo-pack:hover{\n      transform: translateY(-4px);\n      box-shadow: var(--wo-shadow2);\n      border-color: rgba(255,255,255,.22);\n      background: rgba(255,255,255,.075);\n      filter: saturate(1.05);\n    }\n    .wo-pack:hover::after{\n      opacity:.85;\n      animation: woPackShimmer 1.15s ease;\n    }\n    @keyframes woPackShimmer{ 0%{ left:-60%; } 100%{ left:140%; } }\n\n    .wo-packTop{\n      display:flex;\n      align-items:flex-start;\n      justify-content:space-between;\n      gap: 12px;\n      margin-bottom: 10px;\n    }\n\n    .wo-cap{\n      display:inline-flex;\n      align-items:center;\n      gap:8px;\n      padding: 8px 10px;\n      border-radius: 999px;\n      background: rgba(255,255,255,.08);\n      border: 1px solid rgba(255,255,255,.14);\n      color: rgba(255,255,255,.86);\n      font-weight: 900;\n      font-size: 12px;\n      letter-spacing:.2px;\n      white-space:nowrap;\n    }\n    .wo-cap i{\n      width:8px;height:8px;border-radius:999px;\n      background: linear-gradient(135deg, var(--wo-blue), var(--wo-purple));\n      display:inline-block;\n      box-shadow: 0 0 0 6px rgba(1,90,242,.14);\n    }\n\n    .wo-badge{\n      padding: 8px 10px;\n      border-radius: 999px;\n      background: linear-gradient(135deg, rgba(1,90,242,.18), rgba(161,84,208,.16));\n      border: 1px solid rgba(1,90,242,.28);\n      color: rgba(255,255,255,.92);\n      font-weight: 950;\n      font-size: 12px;\n      letter-spacing:.2px;\n      white-space:nowrap;\n    }\n\n    .wo-packName{\n      margin: 2px 0 6px;\n      font-size: 18px;\n      font-weight: 980;\n      letter-spacing: -0.35px;\n      color: rgba(255,255,255,.95);\n    }\n\n    .wo-outcome{\n      margin: 0 0 10px;\n      color: rgba(255,255,255,.74);\n      font-size: 13.2px;\n      line-height: 1.45;\n    }\n    .wo-outcome b{ color: rgba(255,255,255,.92); font-weight: 950; }\n    .wo-outcome em{ font-style: normal; color: rgba(1,90,242,.95); font-weight: 950; }\n\n    .wo-priceRow{\n      display:flex;\n      align-items:baseline;\n      gap: 10px;\n      margin: 8px 0 12px;\n      flex-wrap:wrap;\n    }\n    .wo-price{\n      font-size: 34px;\n      font-weight: 1000;\n      letter-spacing: -0.8px;\n      line-height:1;\n      background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.82));\n      -webkit-background-clip:text;\n      background-clip:text;\n      color: transparent;\n    }\n    .wo-vat{\n      color: rgba(255,255,255,.68);\n      font-weight: 900;\n      font-size: 13px;\n    }\n\n    .wo-listTitle{\n      margin: 10px 0 8px;\n      font-size: 13px;\n      letter-spacing:.2px;\n      color: rgba(255,255,255,.78);\n      font-weight: 900;\n    }\n\n    .wo-list{\n      margin:0;\n      padding:0;\n      list-style:none;\n      display:grid;\n      gap: 8px;\n    }\n\n    .wo-li{\n      display:flex;\n      gap: 10px;\n      align-items:flex-start;\n      color: rgba(255,255,255,.74);\n      font-size: 13.5px;\n      line-height: 1.55;\n      position:relative;\n      padding-right: 30px;\n    }\n    .wo-li svg{ flex:0 0 auto; margin-top:2px; opacity:.95; }\n    .wo-liMain{ min-width:0; }\n\n    .wo-q{\n      position:absolute;\n      right: 0;\n      top: 1px;\n      width: 22px;\n      height: 22px;\n      border-radius: 999px;\n      display:grid;\n      place-items:center;\n      border: 1px solid rgba(255,255,255,.18);\n      background: rgba(255,255,255,.06);\n      color: rgba(255,255,255,.88);\n      cursor: pointer;\n      user-select:none;\n      transition: transform .18s ease, background .18s ease, border-color .18s ease;\n      line-height: 1;\n      padding:0;\n    }\n    .wo-q:hover{\n      transform: translateY(-1px);\n      background: rgba(1,90,242,.14);\n      border-color: rgba(1,90,242,.30);\n    }\n    .wo-q:focus{\n      outline: none;\n      box-shadow: 0 0 0 3px rgba(1,90,242,.25);\n    }\n\n    .wo-tip{\n      position:absolute;\n      right: 0;\n      top: 28px;\n      width: min(320px, 72vw);\n      background: rgba(10, 15, 31, .92);\n      border: 1px solid rgba(255,255,255,.16);\n      border-radius: 16px;\n      padding: 10px 12px;\n      color: rgba(255,255,255,.88);\n      box-shadow: 0 18px 60px rgba(0,0,0,.55);\n      backdrop-filter: blur(10px) saturate(160%);\n      -webkit-backdrop-filter: blur(10px) saturate(160%);\n      z-index: 40;\n      opacity: 0;\n      transform: translateY(6px);\n      pointer-events:none;\n      transition: opacity .16s ease, transform .16s ease;\n    }\n    .wo-tip b{ color: rgba(255,255,255,.95); font-weight: 950; }\n    .wo-tip:before{\n      content:\"\";\n      position:absolute;\n      right: 12px;\n      top: -7px;\n      width: 12px;\n      height: 12px;\n      transform: rotate(45deg);\n      background: rgba(10, 15, 31, .92);\n      border-left: 1px solid rgba(255,255,255,.16);\n      border-top: 1px solid rgba(255,255,255,.16);\n    }\n\n    .wo-q[data-open=\"1\"] + .wo-tip{\n      opacity: 1;\n      transform: translateY(0);\n      pointer-events:auto;\n    }\n\n    .wo-packFooter{\n      margin-top: auto;\n      padding-top: 14px;\n      display:flex;\n      align-items:center;\n      justify-content:space-between;\n      gap: 12px;\n      flex-wrap:wrap;\n    }\n\n    .wo-btnGlass{\n      position: relative;\n      background: rgba(255, 255, 255, 0.15);\n      border: 1px solid rgba(255, 255, 255, 0.30);\n      border-radius: 16px;\n      color: #fff;\n      font-size: 14.5px;\n      font-weight: 900;\n      padding: 12px 14px;\n      cursor: pointer;\n      backdrop-filter: blur(10px) saturate(180%);\n      -webkit-backdrop-filter: blur(10px) saturate(180%);\n      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);\n      overflow: hidden;\n      transition: all 0.35s ease;\n      display:inline-flex;\n      align-items:center;\n      gap:10px;\n      text-decoration:none !important;\n      user-select:none;\n      white-space:nowrap;\n    }\n    .wo-btnGlass:hover{\n      background: rgba(255, 255, 255, 0.25);\n      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);\n      transform: translateY(-1px) scale(1.02);\n      color:#fff;\n    }\n    .wo-btnGlass::before{\n      content:\"\";\n      position:absolute;\n      top:-50%;\n      left:-50%;\n      width:200%;\n      height:200%;\n      background: radial-gradient(circle, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 60%);\n      transform: rotate(45deg);\n      pointer-events:none;\n      animation: woBtnShine 3s infinite linear;\n      border-radius: inherit;\n    }\n    @keyframes woBtnShine{\n      0%{ transform: translate(-100%, -100%) rotate(45deg); opacity: .30; }\n      50%{ transform: translate(100%, 100%) rotate(45deg); opacity: .60; }\n      100%{ transform: translate(-100%, -100%) rotate(45deg); opacity: .30; }\n    }\n\n    .wo-arrow{\n      width: 26px; height: 26px;\n      border-radius: 999px;\n      display:grid; place-items:center;\n      background: rgba(255,255,255,.08);\n      border: 1px solid rgba(255,255,255,.14);\n      transition: transform .22s ease;\n    }\n    .wo-btnGlass:hover .wo-arrow{ transform: translateX(3px); }\n    .wo-arrow svg{ width: 16px; height:16px; }\n\n    .wo-choose{\n      margin-top: 18px;\n      display:flex;\n      align-items:center;\n      justify-content:space-between;\n      gap: 12px;\n      flex-wrap:wrap;\n      padding: 14px 16px;\n      border-radius: 18px;\n      background: rgba(255,255,255,.045);\n      border: 1px solid rgba(255,255,255,.12);\n    }\n    .wo-choose__txt{\n      margin:0;\n      color: rgba(255,255,255,.72);\n      font-size: 13.5px;\n      line-height: 1.5;\n      max-width: 78ch;\n    }\n    .wo-choose__txt b{ color: rgba(255,255,255,.92); font-weight: 950; }\n    .wo-choose__a{\n      color: rgba(255,255,255,.92);\n      font-weight: 950;\n      text-decoration: none;\n      display:inline-flex;\n      align-items:center;\n      gap:8px;\n      padding: 10px 12px;\n      border-radius: 14px;\n      border: 1px solid rgba(255,255,255,.16);\n      background: rgba(1,90,242,.12);\n      white-space:nowrap;\n      transition: transform .2s ease, background .2s ease, border-color .2s ease;\n    }\n    .wo-choose__a:hover{\n      transform: translateY(-1px);\n      background: rgba(1,90,242,.18);\n      border-color: rgba(1,90,242,.32);\n      color:#fff;\n    }\n\n    @media(max-width: 1100px){\n      .wo-packs__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }\n    }\n    @media(max-width: 740px){\n      .wo-packs{ padding: 78px 0; }\n      .wo-packs__grid{ grid-template-columns: 1fr; }\n      .wo-tip{ width: min(340px, 78vw); }\n    }\n\n    @media (prefers-reduced-motion: reduce){\n      .wo-packs::after, .wo-pack::after, .wo-btnGlass::before{ animation:none !important; }\n      .wo-pack, .wo-btnGlass, .wo-tip{ transition:none !important; }\n    }\n\n    \/* NEW: APPLY MODAL *\/\n    .wo-applyOverlay{\n      position: fixed;\n      inset: 0;\n      background: rgba(0,0,0,.62);\n      backdrop-filter: blur(8px) saturate(140%);\n      -webkit-backdrop-filter: blur(8px) saturate(140%);\n      z-index: 999999;\n      display:none;\n      align-items:center;\n      justify-content:center;\n      padding: 18px;\n    }\n    .wo-applyOverlay[data-open=\"1\"]{ display:flex; }\n\n    \/* \u2705 FIX: modal must be scroll-safe on small screens *\/\n    .wo-applyModal{\n      width: min(720px, 100%);\n      border-radius: 22px;\n      background:\n        radial-gradient(900px 500px at 15% 10%, rgba(1,90,242,.22), transparent 60%),\n        radial-gradient(900px 500px at 85% 0%, rgba(161,84,208,.14), transparent 62%),\n        rgba(10,15,31,.92);\n      border: 1px solid rgba(255,255,255,.16);\n      box-shadow: 0 28px 120px rgba(0,0,0,.70);\n      overflow:hidden;\n      position:relative;\n\n      \/* \u2705 makes internal scrolling possible *\/\n      display:flex;\n      flex-direction:column;\n\n      \/* \u2705 never exceed viewport *\/\n      max-height: calc(100dvh - 36px);\n    }\n\n    .wo-applyHead{\n      padding: 16px 16px 12px;\n      display:flex;\n      align-items:flex-start;\n      justify-content:space-between;\n      gap: 12px;\n      border-bottom: 1px solid rgba(255,255,255,.10);\n      flex: 0 0 auto;\n    }\n    .wo-applyTitle{\n      margin:0;\n      font-size: 16px;\n      font-weight: 980;\n      letter-spacing: -0.25px;\n      color: rgba(255,255,255,.95);\n    }\n    .wo-applySub{\n      margin: 4px 0 0;\n      color: rgba(255,255,255,.70);\n      font-size: 13px;\n      line-height: 1.45;\n      max-width: 64ch;\n    }\n    .wo-applyPackPill{\n      display:inline-flex;\n      align-items:center;\n      gap:8px;\n      margin-top: 8px;\n      padding: 8px 10px;\n      border-radius: 999px;\n      background: rgba(255,255,255,.06);\n      border: 1px solid rgba(255,255,255,.14);\n      color: rgba(255,255,255,.92);\n      font-size: 12px;\n      font-weight: 950;\n      white-space:nowrap;\n    }\n    .wo-applyPackPill i{\n      width:8px;height:8px;border-radius:999px;\n      background: linear-gradient(135deg, var(--wo-blue), var(--wo-purple));\n      display:inline-block;\n      box-shadow: 0 0 0 6px rgba(1,90,242,.14);\n    }\n    .wo-applyClose{\n      width: 38px;\n      height: 38px;\n      border-radius: 14px;\n      border: 1px solid rgba(255,255,255,.14);\n      background: rgba(255,255,255,.06);\n      color: rgba(255,255,255,.92);\n      cursor:pointer;\n      display:grid;\n      place-items:center;\n      transition: transform .18s ease, background .18s ease, border-color .18s ease;\n      flex: 0 0 auto;\n    }\n    .wo-applyClose:hover{\n      transform: translateY(-1px);\n      background: rgba(1,90,242,.14);\n      border-color: rgba(1,90,242,.28);\n    }\n\n    \/* \u2705 FIX: body scroll inside modal *\/\n    .wo-applyBody{\n      padding: 14px 16px 16px;\n      display:grid;\n      gap: 12px;\n\n      flex: 1 1 auto;\n      min-height: 0;                 \/* critical for flex overflow *\/\n      overflow: auto;                \/* enable scroll *\/\n      -webkit-overflow-scrolling: touch;\n      overscroll-behavior: contain;  \/* prevent background \u201crubber band\u201d *\/\n    }\n\n    .wo-applyWins{\n      display:grid;\n      gap: 8px;\n      padding: 12px 12px;\n      border-radius: 18px;\n      background: rgba(255,255,255,.045);\n      border: 1px solid rgba(255,255,255,.12);\n    }\n    .wo-applyWins h4{\n      margin:0;\n      font-size: 12px;\n      letter-spacing:.25px;\n      text-transform: uppercase;\n      color: rgba(255,255,255,.78);\n      font-weight: 950;\n    }\n    .wo-applyWin{\n      display:flex;\n      gap: 10px;\n      align-items:flex-start;\n      color: rgba(255,255,255,.78);\n      font-size: 13.5px;\n      line-height: 1.5;\n    }\n    .wo-applyWin svg{ flex: 0 0 auto; margin-top:2px; opacity:.95; }\n\n    .wo-applyForm{\n      display:grid;\n      gap: 10px;\n    }\n    .wo-fRow{\n      display:grid;\n      gap: 10px;\n      grid-template-columns: 1fr 1fr;\n    }\n    .wo-field{ display:grid; gap: 6px; }\n    .wo-label{\n      font-size: 12px;\n      color: rgba(255,255,255,.72);\n      font-weight: 900;\n      letter-spacing:.15px;\n    }\n    .wo-input, .wo-select, .wo-textarea{\n      width:100%;\n      border-radius: 14px;\n      border: 1px solid rgba(255,255,255,.14);\n      background: rgba(255,255,255,.06);\n      color: rgba(255,255,255,.92);\n      padding: 12px 12px;\n      font-size: 14px;\n      outline: none;\n      transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;\n    }\n    .wo-textarea{ min-height: 92px; resize: vertical; }\n    .wo-input:focus, .wo-select:focus, .wo-textarea:focus{\n      border-color: rgba(1,90,242,.45);\n      box-shadow: 0 0 0 3px rgba(1,90,242,.18);\n      background: rgba(255,255,255,.075);\n    }\n\n    .wo-applyFoot{\n      display:flex;\n      align-items:center;\n      justify-content:space-between;\n      gap: 10px;\n      flex-wrap:wrap;\n      padding-top: 4px;\n    }\n    .wo-applyNote{\n      margin:0;\n      color: rgba(255,255,255,.62);\n      font-size: 12.5px;\n      line-height: 1.4;\n      max-width: 58ch;\n    }\n    .wo-applyBtn{\n      border: 0;\n      cursor: pointer;\n      background: linear-gradient(135deg, rgba(1,90,242,1), rgba(1,90,242,.85));\n      color: #fff;\n      font-weight: 950;\n      border-radius: 16px;\n      padding: 12px 14px;\n      display:inline-flex;\n      align-items:center;\n      gap: 10px;\n      box-shadow: 0 18px 44px rgba(1,90,242,.22);\n      transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;\n      white-space:nowrap;\n    }\n    .wo-applyBtn:hover{\n      transform: translateY(-1px);\n      filter: saturate(1.05);\n      box-shadow: 0 22px 56px rgba(1,90,242,.28);\n    }\n    .wo-applyBtn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }\n\n    .wo-applyStatus{\n      display:none;\n      padding: 10px 12px;\n      border-radius: 14px;\n      border: 1px solid rgba(255,255,255,.14);\n      background: rgba(255,255,255,.05);\n      color: rgba(255,255,255,.82);\n      font-size: 13px;\n      line-height: 1.45;\n    }\n    .wo-applyStatus[data-show=\"1\"]{ display:block; }\n    .wo-applyStatus.ok{ border-color: rgba(34,197,94,.28); }\n    .wo-applyStatus.err{ border-color: rgba(239,68,68,.28); }\n\n    .wo-hpWrap{\n      position:absolute !important;\n      left:-9999px !important;\n      top:-9999px !important;\n      width:1px !important;\n      height:1px !important;\n      overflow:hidden !important;\n      opacity:0 !important;\n      pointer-events:none !important;\n    }\n\n    @media(max-width: 720px){\n      .wo-fRow{ grid-template-columns: 1fr; }\n\n      \/* \u2705 nicer on small screens: keep modal slightly top-biased *\/\n      .wo-applyOverlay{ align-items:flex-start; padding: 12px; }\n      .wo-applyModal{ max-height: calc(100dvh - 24px); }\n    }\n  <\/style>\n\n  <div class=\"wo-packs__wrap\">\n    <div class=\"wo-packs__kicker\"><span class=\"wo-packs__dot\"><\/span> Websitepakketten<\/div>\n    <h2 class=\"wo-packs__title\">U kiest uw doel, <span>wij zorgen voor een website<\/span> die presteert.<\/h2>\n    <p class=\"wo-packs__sub\">Korte, scherpe bullets. Extra uitleg? Tik op het <b>?<\/b> icoon.<\/p>\n\n    <div class=\"wo-packs__grid\">\n\n      <!-- Kickstart -->\n      <article class=\"wo-pack\" aria-label=\"Kickstart pakket\">\n        <div class=\"wo-packTop\">\n          <span class=\"wo-cap\"><i><\/i> Tot 5 pagina\u2019s<\/span>\n          <span class=\"wo-badge\">Start<\/span>\n        <\/div>\n        <h3 class=\"wo-packName\">Kickstart<\/h3>\n        <p class=\"wo-outcome\"><b>Doel:<\/b> <em>professioneel overkomen<\/em> en snel eerste leads genereren<\/p>\n        <div class=\"wo-priceRow\"><div class=\"wo-price\">\u20ac999<\/div><div class=\"wo-vat\">\/+BTW<\/div><\/div>\n\n        <div class=\"wo-listTitle\">Van twijfel naar vertrouwen:<\/div>\n        <ul class=\"wo-list\">\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">U oogt te klein of onprofessioneel online<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Moderne layout en duidelijke visuele hi\u00ebrarchie voor een sterke eerste\nindruk.<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">Bezoekers nemen geen actie<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">E\u00e9n heldere kernboodschap met strategisch geplaatste CTA\u2019s (bellen,\nWhatsApp, formulier).<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">U wordt slecht gevonden in Google<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Basis SEO: correcte structuur, titels en snelle laadtijden voor relevante\nzoektermen.<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">Twijfel bij potenti\u00eble klanten<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Vertrouwenselementen zoals reviews, werkwijze en FAQ\u2019s \u2014 zonder\nverkooppraatjes.<\/span>\n          <\/li>\n        <\/ul>\n\n        <div class=\"wo-packFooter\">\n          <a class=\"wo-btnGlass wo-applyBtnOpen\" data-pack=\"Kickstart\" href=\"https:\/\/webontwerpers.be\/website-laten-maken\/\">\n            Bekijk wat u krijgt\n            <span class=\"wo-arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n          <\/a>\n        <\/div>\n      <\/article>\n\n      <!-- Groei voor KMO\u2019s -->\n      <article class=\"wo-pack\" aria-label=\"Groei voor KMO\u2019s\">\n        <div class=\"wo-packTop\">\n          <span class=\"wo-cap\"><i><\/i> Tot 10 pagina\u2019s<\/span>\n          <span class=\"wo-badge\">Meest gekozen<\/span>\n        <\/div>\n        <h3 class=\"wo-packName\">Groei voor KMO\u2019s<\/h3>\n        <p class=\"wo-outcome\"><b>Doel:<\/b> <em>meer aanvragen<\/em> en meetbaar verbeteren<\/p>\n        <div class=\"wo-priceRow\"><div class=\"wo-price\">\u20ac1349<\/div><div class=\"wo-vat\">\/+BTW<\/div><\/div>\n\n        <div class=\"wo-listTitle\">Van aanwezigheid naar resultaat<\/div>\n        <ul class=\"wo-list\">\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">U heeft een website, maar weinig of geen aanvragen<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Heldere structuur, overtuigend bewijs en duidelijke CTA\u2019s die bezoekers\nrichting contact sturen.<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">U trekt de verkeerde bezoekers aan<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Gerichte zoekwoorden die de juiste klant aantrekt (en irrelevante\nbezoekers afremt).<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">U weet niet wat werkt en wat niet<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Metingen via analytics en doelen, zodat u stopt met gokken en gericht kunt\noptimaliseren.<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">Trage website kost u aanvragen<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Technische optimalisaties voor snelheid en gebruiksgemak, zodat\nbezoekers niet afhaken.<\/span>\n          <\/li>\n        <\/ul>\n\n        <div class=\"wo-packFooter\">\n          <a class=\"wo-btnGlass wo-applyBtnOpen\" data-pack=\"Groei voor KMO\u2019s\" href=\"https:\/\/webontwerpers.be\/website-laten-maken\/\">\n            Bekijk wat u krijgt\n            <span class=\"wo-arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n          <\/a>\n        <\/div>\n      <\/article>\n\n      <!-- Autoriteit -->\n      <article class=\"wo-pack\" aria-label=\"Autoriteit pakket\">\n        <div class=\"wo-packTop\">\n          <span class=\"wo-cap\"><i><\/i> Tot 20 pagina\u2019s<\/span>\n          <span class=\"wo-badge\">Pro<\/span>\n        <\/div>\n        <h3 class=\"wo-packName\">Premium<\/h3>\n        <p class=\"wo-outcome\"><b>Doel:<\/b> <em>premium imago<\/em> en betere leads<\/p>\n        <div class=\"wo-priceRow\"><div class=\"wo-price\">\u20ac1699<\/div><div class=\"wo-vat\">\/+BTW<\/div><\/div>\n\n        <div class=\"wo-listTitle\">Van twijfel naar premium vertrouwen<\/div>\n        <ul class=\"wo-list\">\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">U oogt niet premium genoeg<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Strakke UI, stijlvolle typografie en overtuigende proof-layers die uw prijs\ngeloofwaardig maken.<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">Te veel prijsvragen in plaats van gekwalificeerde leads<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Slimme kwalificatieflow en formulieren die ruis weghalen en alleen\nserieuze prospects doorlaten.<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">U wilt structureel groeien in Google<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Geavanceerde SEO en contentstrategie voor duurzame vindbaarheid en\ngroei zonder toeval.<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">B2B-beslissers twijfelen te lang<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Strategische content, trust-elementen en duidelijke call-to-actions die\nbesluitvorming versnellen.<\/span>\n          <\/li>\n        <\/ul>\n\n        <div class=\"wo-packFooter\">\n          <a class=\"wo-btnGlass wo-applyBtnOpen\" data-pack=\"Autoriteit\" href=\"https:\/\/webontwerpers.be\/website-laten-maken\/\">\n            Bekijk wat u krijgt\n            <span class=\"wo-arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n          <\/a>\n        <\/div>\n      <\/article>\n\n      <!-- E-commerce Verkoop -->\n      <article class=\"wo-pack\" aria-label=\"E-commerce pakket\">\n        <div class=\"wo-packTop\">\n          <span class=\"wo-cap\"><i><\/i> 50 producten ingeladen<\/span>\n          <span class=\"wo-badge\">Shop<\/span>\n        <\/div>\n        <h3 class=\"wo-packName\">E-commerce Verkoop <\/h3>\n        <p class=\"wo-outcome\"><b>Doel:<\/b> <em>meer orders<\/em> en minder afhakers<\/p>\n        <div class=\"wo-priceRow\"><div class=\"wo-price\">\u20ac1999<\/div><div class=\"wo-vat\">\/+BTW<\/div><\/div>\n\n        <div class=\"wo-listTitle\">Van browse naar aankoop<\/div>\n        <ul class=\"wo-list\">\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">Producten online zetten kost te veel tijd<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Wij laden de eerste 50 producten voor u in. Daarna kunt u zelf verder\naanvullen of dit door ons laten doen..<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">Bezoekers vinden niet wat ze zoeken<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Slimme categorie\u00ebn en filters maken keuzes makkelijker en verhogen het\naantal \u201cadd to cart\u201d.<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">Winkelmandjes verdwijnen bij checkout<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Optimalisatie van betaalmethoden en frictie in de checkout voor minder\nafhakers.<\/span>\n          <\/li>\n          <li class=\"wo-li\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n            <span class=\"wo-liMain\">U wilt organische webshopgroei<\/span>\n            <button class=\"wo-q\" type=\"button\" aria-label=\"Meer info\" aria-expanded=\"false\">?<\/button>\n            <span class=\"wo-tip\" role=\"tooltip\">Product- en categorie-SEO voor duurzame vindbaarheid en minder\nafhankelijkheid van advertenties.<\/span>\n          <\/li>\n        <\/ul>\n\n        <div class=\"wo-packFooter\">\n          <a class=\"wo-btnGlass wo-applyBtnOpen\" data-pack=\"E-commerce Verkoop\" href=\"https:\/\/webontwerpers.be\/website-laten-maken\/\">\n            Bekijk wat u krijgt\n            <span class=\"wo-arrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18l6-6-6-6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n          <\/a>\n        <\/div>\n      <\/article>\n\n    <\/div>\n\n    \n\n  <!-- APPLY MODAL -->\n  <div class=\"wo-applyOverlay\" id=\"woApplyOverlay\" aria-hidden=\"true\">\n    <div class=\"wo-applyModal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"woApplyTitle\">\n      <div class=\"wo-applyHead\">\n        <div>\n          <h3 class=\"wo-applyTitle\" id=\"woApplyTitle\">Aanvraag in 60 seconden<\/h3>\n          <p class=\"wo-applySub\">U vraagt het pakket aan \u2014 wij reageren binnen 24u met de snelste route naar resultaat.<\/p>\n          <div class=\"wo-applyPackPill\"><i aria-hidden=\"true\"><\/i> <span id=\"woApplyPackName\">\u2014<\/span><\/div>\n        <\/div>\n        <button class=\"wo-applyClose\" type=\"button\" id=\"woApplyClose\" aria-label=\"Sluiten\">\u2715<\/button>\n      <\/div>\n\n      <div class=\"wo-applyBody\">\n        <div class=\"wo-applyWins\" aria-label=\"Wat u krijgt\">\n          <h4>Wat u krijgt met dit pakket<\/h4>\n          <div class=\"wo-applyWin\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span id=\"woWin1\">\u2014<\/span><\/div>\n          <div class=\"wo-applyWin\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span id=\"woWin2\">\u2014<\/span><\/div>\n          <div class=\"wo-applyWin\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-9 10-4-4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span id=\"woWin3\">\u2014<\/span><\/div>\n        <\/div>\n\n        <form class=\"wo-applyForm\" id=\"woApplyForm\" method=\"post\" novalidate>\n          <input type=\"hidden\" name=\"selected_package\" id=\"woSelectedPackage\" value=\"\">\n          <input type=\"hidden\" name=\"wo_ts\" id=\"woTs\" value=\"\">\n          <div class=\"wo-hpWrap\" aria-hidden=\"true\">\n            <label>Leave this field empty<\/label>\n            <input type=\"text\" name=\"wo_hp\" tabindex=\"-1\" autocomplete=\"off\">\n          <\/div>\n\n          <div class=\"wo-fRow\">\n            <div class=\"wo-field\">\n              <div class=\"wo-label\">Website (optioneel)<\/div>\n              <input class=\"wo-input\" type=\"url\" name=\"website\" placeholder=\"https:\/\/uwbedrijf.be\" autocomplete=\"url\">\n            <\/div>\n            <div class=\"wo-field\">\n              <div class=\"wo-label\">Doel<\/div>\n              <select class=\"wo-select\" name=\"goal\" required>\n                <option value=\"\" selected disabled>Kies een doel\u2026<\/option>\n                <option>Meer aanvragen \/ leads<\/option>\n                <option>Meer webshop-verkopen<\/option>\n                <option>Premium uitstraling \/ vertrouwen<\/option>\n                <option>Groei via Google (SEO)<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n\n          <div class=\"wo-fRow\">\n            <div class=\"wo-field\">\n              <div class=\"wo-label\">Naam<\/div>\n              <input class=\"wo-input\" type=\"text\" name=\"name\" placeholder=\"Uw naam\" required autocomplete=\"name\">\n            <\/div>\n            <div class=\"wo-field\">\n              <div class=\"wo-label\">E-mail<\/div>\n              <input class=\"wo-input\" type=\"email\" name=\"email\" placeholder=\"naam@bedrijf.be\" required autocomplete=\"email\">\n            <\/div>\n          <\/div>\n\n          <div class=\"wo-fRow\">\n            <div class=\"wo-field\">\n              <div class=\"wo-label\">Telefoon<\/div>\n              <input class=\"wo-input\" type=\"tel\" name=\"phone\" placeholder=\"+32 \u2026\" required autocomplete=\"tel\">\n            <\/div>\n            <div class=\"wo-field\">\n              <div class=\"wo-label\">Deadline<\/div>\n              <select class=\"wo-select\" name=\"deadline\" required>\n                <option value=\"\" selected disabled>Kies\u2026<\/option>\n                <option>Zo snel mogelijk<\/option>\n                <option>Binnen 2 weken<\/option>\n                <option>Binnen 1 maand<\/option>\n                <option>Geen haast (maar w\u00e9l goed)<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n\n          <div class=\"wo-field\">\n            <div class=\"wo-label\">Korte context (optioneel)<\/div>\n            <textarea class=\"wo-textarea\" name=\"message\" placeholder=\"Wat verkoopt u? Waar loopt u vast?\" autocomplete=\"off\"><\/textarea>\n          <\/div>\n\n          <div class=\"wo-applyStatus\" id=\"woApplyStatus\" data-show=\"0\"><\/div>\n\n          <div class=\"wo-applyFoot\">\n            <p class=\"wo-applyNote\">Geen spam. Geen verkooppraat. Alleen een eerlijk voorstel dat past bij uw doel.<\/p>\n            <button class=\"wo-applyBtn\" type=\"submit\" id=\"woApplySubmit\">\n              Verstuur aanvraag\n            <\/button>\n          <\/div>\n        <\/form>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <script>\n    (function(){\n      const root = document.querySelector('#wo-packs');\n      if(!root) return;\n\n      \/* TOOLTIP LOGIC (UNCHANGED) *\/\n      const buttons = Array.from(root.querySelectorAll('.wo-q'));\n      const canHover = window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;\n\n      function closeAll(exceptBtn){\n        buttons.forEach(btn=>{\n          if(exceptBtn && btn === exceptBtn) return;\n          btn.dataset.open = \"0\";\n          btn.setAttribute('aria-expanded','false');\n        });\n      }\n\n      buttons.forEach(btn=>{\n        btn.dataset.open = \"0\";\n\n        btn.addEventListener('click', (e)=>{\n          e.preventDefault();\n          e.stopPropagation();\n          const isOpen = btn.dataset.open === \"1\";\n          closeAll(btn);\n          btn.dataset.open = isOpen ? \"0\" : \"1\";\n          btn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');\n        });\n\n        if(canHover){\n          btn.addEventListener('mouseenter', ()=>{\n            closeAll(btn);\n            btn.dataset.open = \"1\";\n            btn.setAttribute('aria-expanded','true');\n          });\n\n          const tip = btn.nextElementSibling;\n          if(tip && tip.classList && tip.classList.contains('wo-tip')){\n            tip.addEventListener('mouseenter', ()=>{\n              btn.dataset.open = \"1\";\n              btn.setAttribute('aria-expanded','true');\n            });\n            tip.addEventListener('mouseleave', ()=>{\n              btn.dataset.open = \"0\";\n              btn.setAttribute('aria-expanded','false');\n            });\n          }\n\n          btn.addEventListener('mouseleave', ()=>{\n            setTimeout(()=>{\n              const tip = btn.nextElementSibling;\n              const isHoveringTip = tip && tip.matches(':hover');\n              if(!isHoveringTip){\n                btn.dataset.open = \"0\";\n                btn.setAttribute('aria-expanded','false');\n              }\n            }, 20);\n          });\n        }\n      });\n\n      document.addEventListener('click', ()=> closeAll());\n      document.addEventListener('keydown', (e)=>{ if(e.key === 'Escape') closeAll(); });\n\n      const a = root.querySelector('.wo-choose__a');\n      if(a){\n        a.addEventListener('click', function(e){\n          const href = a.getAttribute('href') || '';\n          if(!href.startsWith('#')) return;\n          const el = document.querySelector(href);\n          if(!el) return;\n          e.preventDefault();\n          closeAll();\n          el.scrollIntoView({behavior:'smooth', block:'start'});\n        });\n      }\n\n      \/* APPLY MODAL + REAL AJAX SEND *\/\n      const overlay = document.getElementById('woApplyOverlay');\n      const closeBtn = document.getElementById('woApplyClose');\n      const packNameEl = document.getElementById('woApplyPackName');\n      const win1 = document.getElementById('woWin1');\n      const win2 = document.getElementById('woWin2');\n      const win3 = document.getElementById('woWin3');\n      const hiddenPack = document.getElementById('woSelectedPackage');\n      const form = document.getElementById('woApplyForm');\n      const statusEl = document.getElementById('woApplyStatus');\n      const submitBtn = document.getElementById('woApplySubmit');\n      const tsEl = document.getElementById('woTs');\n\n      \/* \u2705 FIX: move overlay to BODY so fixed positioning is true viewport\n         (Elementor wrappers sometimes create transformed parents -> fixed breaks) *\/\n      if(overlay && overlay.parentElement !== document.body){\n        document.body.appendChild(overlay);\n      }\n\n      \/* \u2705 FIX: hard scroll lock (desktop + iOS) *\/\n      let __woScrollY = 0;\n      function lockScroll(){\n        __woScrollY = window.scrollY || window.pageYOffset || 0;\n        document.body.style.position = 'fixed';\n        document.body.style.top = (-__woScrollY) + 'px';\n        document.body.style.left = '0';\n        document.body.style.right = '0';\n        document.body.style.width = '100%';\n      }\n      function unlockScroll(){\n        const y = __woScrollY || 0;\n        document.body.style.position = '';\n        document.body.style.top = '';\n        document.body.style.left = '';\n        document.body.style.right = '';\n        document.body.style.width = '';\n        window.scrollTo(0, y);\n      }\n\n      const winsByPack = {\n        \"Kickstart\": [\n          \"Professionele uitstraling die vertrouwen wint\",\n          \"Duidelijke CTA\u2019s \u2192 meer contactaanvragen\",\n          \"Basis SEO zodat u gevonden wordt\"\n        ],\n        \"Groei voor KMO\u2019s\": [\n          \"Meer aanvragen door betere structuur + bewijs\",\n          \"Meetbaar verbeteren (doelen\/analytics)\",\n          \"Sneller laden \u2192 minder afhakers\"\n        ],\n        \"Autoriteit\": [\n          \"Premium positionering die uw prijs rechtvaardigt\",\n          \"Kwalificatie: minder ruis, betere leads\",\n          \"SEO + contentbasis voor structurele groei\"\n        ],\n        \"E-commerce Verkoop\": [\n          \"Wij laden de eerste 50 producten voor u in\",\n          \"Filters + categorie\u00ebn \u2192 sneller naar aankoop\",\n          \"Checkout frictie omlaag \u2192 minder verlaten mandjes\"\n        ]\n      };\n\n      function showStatus(type, msg){\n        if(!statusEl) return;\n        statusEl.classList.remove('ok','err');\n        statusEl.classList.add(type === 'ok' ? 'ok' : 'err');\n        statusEl.textContent = msg;\n        statusEl.dataset.show = \"1\";\n      }\n      function clearStatus(){\n        if(!statusEl) return;\n        statusEl.textContent = \"\";\n        statusEl.dataset.show = \"0\";\n        statusEl.classList.remove('ok','err');\n      }\n\n      function openModal(pack){\n        clearStatus();\n        packNameEl.textContent = pack || \"\u2014\";\n        hiddenPack.value = pack || \"\";\n\n        const w = winsByPack[pack] || [\"\u2014\",\"\u2014\",\"\u2014\"];\n        win1.textContent = w[0] || \"\u2014\";\n        win2.textContent = w[1] || \"\u2014\";\n        win3.textContent = w[2] || \"\u2014\";\n\n        if(tsEl) tsEl.value = String(Math.floor(Date.now()\/1000));\n\n        overlay.dataset.open = \"1\";\n        overlay.setAttribute('aria-hidden','false');\n\n        lockScroll();\n      }\n\n      function closeModal(){\n        overlay.dataset.open = \"0\";\n        overlay.setAttribute('aria-hidden','true');\n        unlockScroll();\n      }\n\n      const openers = Array.from(root.querySelectorAll('.wo-applyBtnOpen'));\n      openers.forEach(btn=>{\n        btn.addEventListener('click', (e)=>{\n          e.preventDefault();\n          e.stopPropagation();\n          openModal(btn.getAttribute('data-pack') || '');\n        });\n      });\n\n      if(closeBtn) closeBtn.addEventListener('click', closeModal);\n      if(overlay){\n        overlay.addEventListener('click', (e)=>{\n          if(e.target === overlay) closeModal();\n        });\n      }\n      document.addEventListener('keydown', (e)=>{\n        if(e.key === 'Escape' && overlay && overlay.dataset.open === \"1\") closeModal();\n      });\n\n      function getAjaxUrl(){\n        return new URL('\/wp-admin\/admin-ajax.php', window.location.origin).toString();\n      }\n\n      if(form){\n        form.addEventListener('submit', async (e)=>{\n          e.preventDefault();\n          clearStatus();\n          submitBtn.disabled = true;\n\n          try{\n            const data = new FormData(form);\n            data.append('action', 'wo_pack_apply');\n\n            const res = await fetch(getAjaxUrl(), {\n              method: 'POST',\n              body: data,\n              credentials: 'same-origin',\n              headers: { 'Accept': 'application\/json' }\n            });\n\n            const text = await res.text();\n            let json = null;\n            try { json = JSON.parse(text); } catch(_) {}\n\n            if(!json){\n              showStatus('err', 'Server antwoordde niet correct (geen JSON). Controleer de AJAX handler.');\n              submitBtn.disabled = false;\n              return;\n            }\n\n            if(res.ok && json.success){\n              showStatus('ok', (json.data && json.data.message) ? json.data.message : 'Aanvraag ontvangen.');\n              form.reset();\n              hiddenPack.value = packNameEl.textContent || '';\n              if(tsEl) tsEl.value = String(Math.floor(Date.now()\/1000));\n              setTimeout(closeModal, 900);\n            }else{\n              const msg = (json.data && json.data.message) ? json.data.message : ('Er ging iets mis. Probeer opnieuw. (' + res.status + ')');\n              showStatus('err', msg);\n            }\n          }catch(err){\n            showStatus('err', 'Netwerkfout. Probeer opnieuw.');\n          }finally{\n            submitBtn.disabled = false;\n          }\n        });\n      }\n    })();\n  <\/script>\n<\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-19637f1 e-con-full e-flex e-con e-parent\" data-id=\"19637f1\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_top&quot;:&quot;triangle&quot;}\">\n\t\t\t\t<div class=\"elementor-shape elementor-shape-top\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M500,98.9L0,6.1V0h1000v6.1L500,98.9z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9ccedf elementor-widget elementor-widget-html\" data-id=\"c9ccedf\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Webontwerpers AI Recommender (DARK) - Branched logic + AI transitions + Mobile CTA fix + SHOP priority -->\n<div id=\"woAiRecommender\" class=\"woai woai--dark\">\n  <button class=\"woai-cta\" type=\"button\" aria-haspopup=\"dialog\" aria-controls=\"woaiModal\">\n    <span class=\"woai-cta__glow\" aria-hidden=\"true\"><\/span>\n    <span class=\"woai-cta__icon\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M12 2l2.2 4.7L19 8l-3.5 3.4.9 5-4.4-2.4-4.4 2.4.9-5L5 8l4.8-1.3L12 2z\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n        <path d=\"M7.5 21.5c2.8-1.5 6.2-1.5 9 0\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n      <\/svg>\n    <\/span>\n    <span class=\"woai-cta__text\">\n      <span class=\"woai-cta__title\">AI-assistent analyseert jouw situatie<\/span>\n      <span class=\"woai-cta__sub\">en adviseert het beste websitepakket<\/span>\n    <\/span>\n    <span class=\"woai-cta__chip\" aria-hidden=\"true\">Start analyse<\/span>\n  <\/button>\n\n  <div class=\"woai-modal\" id=\"woaiModal\" role=\"dialog\" aria-modal=\"true\" aria-hidden=\"true\">\n    <div class=\"woai-backdrop\" data-woai-close><\/div>\n\n    <div class=\"woai-panel\" role=\"document\" aria-label=\"AI pakket analyse\">\n      <canvas class=\"woai-particles\" aria-hidden=\"true\"><\/canvas>\n\n      <div class=\"woai-head\">\n        <div class=\"woai-brand\">\n          <div class=\"woai-orb\" aria-hidden=\"true\"><\/div>\n          <div class=\"woai-brand__txt\">\n            <div class=\"woai-brand__title\">Webontwerpers AI<\/div>\n            <div class=\"woai-brand__sub\">Pakketselectie \u2022 Slimme analyse<\/div>\n          <\/div>\n        <\/div>\n        <button class=\"woai-x\" type=\"button\" aria-label=\"Sluiten\" data-woai-close>\u2715<\/button>\n      <\/div>\n\n      <div class=\"woai-progress\">\n        <div class=\"woai-progress__bar\"><span class=\"woai-progress__fill\"><\/span><\/div>\n        <div class=\"woai-progress__meta\">\n          <span class=\"woai-stepLabel\">Stap 1\/?<\/span>\n          <span class=\"woai-status\" aria-live=\"polite\">Analyse klaar om te starten<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"woai-body\">\n        <div class=\"woai-wizard\">\n          <div class=\"woai-scanline\" aria-hidden=\"true\"><\/div>\n\n          <div class=\"woai-qwrap\">\n            <div class=\"woai-qtop\">\n              <div class=\"woai-qbadge\">\n                <span class=\"woai-qbadge__dot\" aria-hidden=\"true\"><\/span>\n                <span class=\"woai-qbadge__txt\">AI VRAAG<\/span>\n              <\/div>\n              <button class=\"woai-manualToggle\" type=\"button\" aria-expanded=\"false\" title=\"Manueel invullen\">\n                <span aria-hidden=\"true\">\u270e<\/span> Manueel\n              <\/button>\n            <\/div>\n\n            <h3 class=\"woai-question\">\u2014<\/h3>\n            <p class=\"woai-help\">\u2014<\/p>\n\n            <div class=\"woai-options\" role=\"list\"><\/div>\n\n            <div class=\"woai-manual\" hidden>\n              <label class=\"woai-label\" for=\"woaiManual\">Manuele toelichting (optioneel)<\/label>\n              <textarea id=\"woaiManual\" class=\"woai-textarea\" rows=\"3\" placeholder=\"Bijv. \u2018Ik wil vooral leads in Antwerpen en een premium uitstraling\u2026\u2019\"><\/textarea>\n            <\/div>\n\n            <div class=\"woai-nav\">\n              <button class=\"woai-btn woai-btn--ghost\" type=\"button\" data-woai-prev disabled>\u2190 Vorige<\/button>\n              <div class=\"woai-nav__right\">\n                <button class=\"woai-btn woai-btn--ghost\" type=\"button\" data-woai-reset>Reset<\/button>\n                <button class=\"woai-btn woai-btn--primary\" type=\"button\" data-woai-next disabled>Volgende \u2192<\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"woai-result\" hidden>\n            <div class=\"woai-result__hero\">\n              <div class=\"woai-result__aiMark\" aria-hidden=\"true\">\n                <div class=\"woai-ring\"><\/div>\n                <div class=\"woai-core\"><\/div>\n                <div class=\"woai-ring woai-ring--2\"><\/div>\n              <\/div>\n              <div class=\"woai-result__txt\">\n                <div class=\"woai-result__kicker\">AI ADVIES<\/div>\n                <h3 class=\"woai-result__title\">Jouw beste match: <span class=\"woai-result__pack\">\u2014<\/span><\/h3>\n                <p class=\"woai-result__why\">\u2014<\/p>\n              <\/div>\n              <div class=\"woai-result__badge\" aria-hidden=\"true\">\n                <div class=\"woai-result__badgeTop\">MATCH<\/div>\n                <div class=\"woai-result__badgeVal\"><span class=\"woai-badgePct\">\u2014<\/span>%<\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"woai-packCard woai-packCard--main\">\n              <div class=\"woai-packGlow\" aria-hidden=\"true\"><\/div>\n              <div class=\"woai-packCard__top\">\n                <div class=\"woai-packCard__name\">\u2014<\/div>\n                <div class=\"woai-packCard__price\">\u2014<\/div>\n              <\/div>\n              <div class=\"woai-packCard__meta\">\u2014<\/div>\n              <ul class=\"woai-packCard__list\"><\/ul>\n\n              <div class=\"woai-packCard__actions\">\n                <a class=\"woai-btn woai-btn--primary woai-packLink\" href=\"#\" target=\"_self\" rel=\"noopener\" data-woai-scroll=\"1\">Bekijk pakket<\/a>\n                <a class=\"woai-btn woai-btn--ghost woai-offerteLink\" href=\"#\" target=\"_self\" rel=\"noopener\" data-woai-scroll=\"1\">Offerte aanvragen<\/a>\n              <\/div>\n            <\/div>\n\n            <div class=\"woai-alts\">\n              <div class=\"woai-alts__title\">Alternatieven<\/div>\n              <div class=\"woai-alts__grid\" id=\"woaiAltGrid\"><\/div>\n            <\/div>\n\n            <div class=\"woai-result__footer\">\n              <button class=\"woai-btn woai-btn--ghost\" type=\"button\" data-woai-back>\u2190 Terug naar vragen<\/button>\n              <button class=\"woai-btn woai-btn--ghost\" type=\"button\" data-woai-close>Sluiten<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"woai-console\" aria-hidden=\"true\">\n          <div class=\"woai-console__card\">\n            <div class=\"woai-console__title\">Realtime analyse<\/div>\n            <div class=\"woai-console__lines\" id=\"woaiConsoleLines\"><\/div>\n            <div class=\"woai-console__footer\"><span class=\"woai-pulseDot\"><\/span> Neural scoring actief<\/div>\n          <\/div>\n          <div class=\"woai-console__mini\">\n            <div class=\"woai-mini__label\">Confidence<\/div>\n            <div class=\"woai-mini__bar\"><span class=\"woai-mini__fill\"><\/span><\/div>\n            <div class=\"woai-mini__val\">\u2014<\/div>\n          <\/div>\n          <div class=\"woai-console__hint\">Tip: \u201cManueel\u201d kan altijd extra nuance toevoegen.<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* =========================\n   MOBILE POPUP OVERFLOW FIX\n   (Google Ads AI widget)\n   ========================= *\/\n@media (max-width: 860px){\n\n  \/* 1) Popup i\u00e7inde YATAY ta\u015fmay\u0131 tamamen kapat *\/\n  .woai-panel,\n  .woai-body,\n  .woai-wizard,\n  .woai-qwrap,\n  .woai-result,\n  .woai-options,\n  .woai-packCard,\n  .woai-alts,\n  .woai-alts__grid{\n    overflow-x: hidden !important;\n  }\n\n  \/* 2) Flex\/grid elemanlar\u0131nda klasik ta\u015fma sebebi: min-width:auto\n        -> min-width:0 yap\u0131yoruz (en kritik fix) *\/\n  .woai-cta__text,\n  .woai-brand__txt,\n  .woai-result__txt,\n  .woai-packCard__top,\n  .woai-result__hero,\n  .woai-nav,\n  .woai-nav__right{\n    min-width: 0 !important;\n  }\n\n  \/* 3) Uzun metinleri g\u00fcvenli k\u0131r (ba\u015fl\u0131klar\/alt metinler\/rozetler) *\/\n  .woai-cta__title,\n  .woai-cta__sub,\n  .woai-brand__title,\n  .woai-brand__sub,\n  .woai-question,\n  .woai-help,\n  .woai-opt__t,\n  .woai-opt__d,\n  .woai-result__title,\n  .woai-result__why,\n  .woai-packCard__name,\n  .woai-packCard__meta,\n  .woai-alt__t,\n  .woai-alt__m{\n    overflow-wrap: anywhere !important;\n    word-break: break-word !important;\n  }\n\n  \/* 4) Buton\/aksiyonlar mobilde ta\u015fmas\u0131n *\/\n  .woai-packCard__actions{\n    display: grid !important;\n    grid-template-columns: 1fr !important;\n    gap: 10px !important;\n  }\n  .woai-packCard__actions .woai-btn{\n    width: 100% !important;\n  }\n\n  \/* 5) Sonu\u00e7 hero badge mobilde sa\u011fa ta\u015fmas\u0131n *\/\n  .woai-result__hero{\n    flex-wrap: wrap !important;\n  }\n  .woai-result__badge{\n    margin-left: 0 !important;\n    width: 100% !important;\n    text-align: left !important;\n    min-width: 0 !important;\n  }\n\n  \/* 6) Modal panel geni\u015fli\u011fi\/marginleri mobilde daha g\u00fcvenli *\/\n  .woai-panel{\n    width: calc(100% - 12px) !important;\n    margin: 6px auto !important;\n  }\n}\n\n\/* MOBILE: Force popup always on top *\/\n@media (max-width: 860px){\n  .woai-modal{\n    position: fixed !important;\n    inset: 0 !important;\n    z-index: 2147483647 !important; \/* max *\/\n    isolation: isolate !important;  \/* kendi stacking context *\/\n    transform: translateZ(0) !important;\n  }\n  .woai-backdrop{\n    position: fixed !important;\n    inset: 0 !important;\n    z-index: 0 !important;\n  }\n  .woai-panel{\n    position: relative !important;\n    z-index: 1 !important;\n    transform: translateZ(0) !important;\n  }\n}\n\n  .woai{\n    --accent1:#00E5FF; --accent2:#B700FF; --accent3:#00FF85;\n    --txt:#EEF3FF; --muted:rgba(238,243,255,.70); --line:rgba(238,243,255,.14);\n    --panelBg: linear-gradient(180deg, rgba(10,14,30,.92), rgba(7,9,20,.92));\n    --shadow: 0 30px 90px rgba(0,0,0,.60);\n    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;\n    color:var(--txt);\n  }\n  .woai, .woai *{ box-sizing:border-box; }\n  .woai a{ text-decoration:none; color:inherit; }\n\n  \/* CTA (dark) *\/\n  .woai-cta{\n    width:100%;\n    display:flex; align-items:center; gap:14px;\n    padding:14px 16px;\n    border-radius:16px;\n    border:1px solid var(--line);\n    position:relative; overflow:hidden;\n    cursor:pointer;\n    box-shadow: 0 18px 60px rgba(0,0,0,.35);\n    background: rgba(12,16,34,.70);\n    backdrop-filter: blur(12px);\n  }\n  .woai-cta:before{\n    content:\"\"; position:absolute; inset:-2px;\n    background: conic-gradient(from 0deg, var(--accent1), var(--accent2), var(--accent3), var(--accent1));\n    filter: blur(12px); opacity:.55;\n    animation: woaiSpin 3.6s linear infinite;\n  }\n  .woai-cta:after{\n    content:\"\"; position:absolute; inset:2px;\n    background:\n      radial-gradient(120% 120% at 20% 0%, rgba(0,229,255,.18), transparent 60%),\n      radial-gradient(120% 120% at 90% 60%, rgba(183,0,255,.16), transparent 55%),\n      linear-gradient(180deg, rgba(12,16,34,.92), rgba(8,10,22,.92));\n    border-radius:14px;\n    border:1px solid rgba(255,255,255,.10);\n  }\n  .woai-cta > *{ position:relative; z-index:1; }\n  .woai-cta__glow{ position:absolute; inset:0; z-index:0; opacity:.95;\n    background:\n      radial-gradient(60% 70% at 20% 0%, rgba(0,229,255,.22), transparent 60%),\n      radial-gradient(70% 70% at 85% 30%, rgba(183,0,255,.18), transparent 60%);\n  }\n  .woai-cta__icon{\n    width:42px; height:42px; flex:0 0 42px;\n    border-radius:14px;\n    display:grid; place-items:center;\n    background: rgba(255,255,255,.06);\n    border:1px solid rgba(255,255,255,.12);\n    box-shadow: 0 12px 30px rgba(0,0,0,.35);\n    color: var(--txt);\n  }\n  .woai-cta__icon svg{ width:22px; height:22px; color: rgba(238,243,255,.92); }\n  .woai-cta__text{ flex:1; min-width:0; }\n  .woai-cta__title{ display:block; font-weight:950; letter-spacing:.2px; color: var(--txt); }\n  .woai-cta__sub{ display:block; margin-top:2px; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }\n  .woai-cta__chip{\n    padding:8px 10px; border-radius:999px;\n    border:1px solid rgba(255,255,255,.14);\n    background: linear-gradient(90deg, rgba(0,229,255,.12), rgba(183,0,255,.12));\n    font-weight:950; font-size:12px; color: var(--txt);\n  }\n  .woai-cta:hover{ transform: translateY(-1px); transition: transform .15s ease; }\n  .woai-cta:active{ transform: translateY(0px) scale(.99); }\n\n  \/* MOBILE CTA FIX *\/\n  @media (max-width: 520px){\n    .woai-cta{ padding:10px 12px; gap:10px; border-radius:14px; }\n    .woai-cta__icon{ width:36px; height:36px; flex:0 0 36px; border-radius:12px; }\n    .woai-cta__title{ font-size:14px; }\n    .woai-cta__sub{ font-size:12px; }\n    .woai-cta__chip{ display:none; }\n  }\n  @media (max-width: 380px){\n    .woai-cta__sub{ display:none; }\n  }\n\n  \/* Modal *\/\n  .woai-modal{ position:fixed; inset:0; z-index:999999; display:none; }\n  .woai-modal[aria-hidden=\"false\"]{ display:block; }\n  .woai-backdrop{\n    position:absolute; inset:0;\n    background:\n      radial-gradient(120% 120% at 30% 10%, rgba(0,229,255,.16), transparent 52%),\n      radial-gradient(120% 120% at 80% 30%, rgba(183,0,255,.14), transparent 58%),\n      rgba(0,0,0,.66);\n    backdrop-filter: blur(10px);\n  }\n  .woai-panel{\n    position:relative;\n    width:min(980px, calc(100% - 24px));\n    margin: 12px auto;\n    border-radius: 18px;\n    overflow:hidden;\n    background: var(--panelBg);\n    border:1px solid rgba(255,255,255,.14);\n    box-shadow: var(--shadow);\n    max-height: calc(100dvh - 24px);\n    transform-origin: 50% 18%;\n  }\n  \/* AI opening animation *\/\n  .woai-modal[aria-hidden=\"false\"] .woai-panel{\n    animation: woaiPopIn .50s cubic-bezier(.2,.9,.25,1) both;\n  }\n  @keyframes woaiPopIn{\n    0%{ opacity:0; transform: translateY(18px) scale(.94); filter: blur(10px); }\n    55%{ opacity:1; transform: translateY(0) scale(1.02); filter: blur(0); }\n    100%{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }\n  }\n\n  .woai-particles{ position:absolute; inset:0; width:100%; height:100%; opacity:.45; pointer-events:none; }\n\n  .woai-head{\n    display:flex; align-items:center; justify-content:space-between;\n    padding:14px 14px 10px 14px;\n    border-bottom:1px solid rgba(255,255,255,.10);\n    background: linear-gradient(90deg, rgba(0,229,255,.08), rgba(183,0,255,.08));\n  }\n  .woai-brand{ display:flex; align-items:center; gap:12px; }\n  .woai-orb{\n    width:36px; height:36px; border-radius:50%;\n    background:\n      radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%),\n      conic-gradient(from 0deg, var(--accent1), var(--accent2), var(--accent3), var(--accent1));\n    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 20px 50px rgba(0,0,0,.45);\n    animation: woaiSpin 4.8s linear infinite;\n  }\n  .woai-brand__title{ font-weight:990; letter-spacing:.3px; color:var(--txt); }\n  .woai-brand__sub{ font-size:12px; margin-top:1px; color:var(--muted); }\n  .woai-x{\n    width:40px; height:40px; border-radius:12px;\n    border:1px solid rgba(255,255,255,.14);\n    background: rgba(255,255,255,.06);\n    color: var(--txt);\n    cursor:pointer;\n  }\n  .woai-x:hover{ background: rgba(255,255,255,.10); }\n\n  .woai-progress{ padding:10px 14px 12px; border-bottom:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }\n  .woai-progress__bar{ height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); overflow:hidden; }\n  .woai-progress__fill{ display:block; height:100%; width:0%;\n    background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3));\n    box-shadow: 0 0 30px rgba(0,229,255,.22);\n    transition: width .35s ease;\n  }\n  .woai-progress__meta{ display:flex; justify-content:space-between; gap:10px; margin-top:8px; font-size:12px; color:var(--muted); }\n\n  .woai-body{\n    display:grid;\n    grid-template-columns: 1.25fr .75fr;\n    gap:14px;\n    padding:14px;\n    overflow:auto;\n    max-height: calc(100dvh - 140px);\n  }\n\n  .woai-wizard{\n    border-radius:16px;\n    border:1px solid rgba(255,255,255,.12);\n    background: rgba(255,255,255,.04);\n    overflow:hidden;\n    position:relative;\n    backdrop-filter: blur(12px);\n  }\n  .woai-scanline{\n    position:absolute; left:-30%; top:0; width:60%; height:100%;\n    background: linear-gradient(90deg, transparent, rgba(0,229,255,.16), transparent);\n    transform: skewX(-15deg);\n    animation: woaiScan 3.8s ease-in-out infinite;\n    pointer-events:none;\n  }\n  @keyframes woaiScan{\n    0%{ transform: translateX(-40%) skewX(-15deg); opacity:0; }\n    15%{ opacity:.9; }\n    50%{ opacity:.25; }\n    100%{ transform: translateX(220%) skewX(-15deg); opacity:0; }\n  }\n\n  .woai-qwrap{ padding:16px; }\n  .woai-qwrap.woai-transition{ animation: woaiQSwap .36s cubic-bezier(.2,.9,.25,1) both; }\n  @keyframes woaiQSwap{\n    0%{ opacity:0; transform: translateY(10px); filter: blur(8px); }\n    60%{ opacity:1; transform: translateY(0); filter: blur(0); }\n    100%{ opacity:1; transform: translateY(0); }\n  }\n\n  .woai-qtop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }\n  .woai-qbadge{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); font-size:12px; font-weight:950; letter-spacing:.5px; color:var(--txt); }\n  .woai-qbadge__dot{ width:8px; height:8px; border-radius:50%; background: linear-gradient(90deg, var(--accent1), var(--accent2)); box-shadow: 0 0 12px rgba(0,229,255,.25); animation: woaiPulse 1.5s ease-in-out infinite; }\n  @keyframes woaiPulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.25); opacity:.65 } }\n\n  .woai-manualToggle{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); cursor:pointer; font-weight:900; font-size:12px; color:var(--txt); }\n  .woai-manualToggle:hover{ background: rgba(255,255,255,.10); }\n\n  .woai-question{ margin:12px 0 6px; font-size:18px; font-weight:990; letter-spacing:.2px; color:var(--txt); }\n  .woai-help{ margin:0 0 12px; font-size:13px; color:var(--muted); }\n\n  .woai-options{ display:grid; gap:10px; }\n  .woai-opt{\n    display:flex; gap:10px; align-items:flex-start;\n    padding:12px;\n    border-radius:14px;\n    border:1px solid rgba(255,255,255,.12);\n    background: rgba(255,255,255,.06);\n    cursor:pointer;\n    transition: transform .12s ease, background .12s ease, border-color .12s ease;\n    color: var(--txt);\n  }\n  .woai-opt:hover{ transform: translateY(-1px); border-color: rgba(0,229,255,.35); background: rgba(0,229,255,.08); }\n  .woai-opt[aria-selected=\"true\"]{ border-color: rgba(183,0,255,.35); background: linear-gradient(90deg, rgba(0,229,255,.10), rgba(183,0,255,.10)); box-shadow: 0 0 0 1px rgba(183,0,255,.10) inset; }\n  .woai-opt__ic{ width:34px; height:34px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); flex:0 0 34px; }\n  .woai-opt__t{ font-weight:950; color:var(--txt); }\n  .woai-opt__d{ margin-top:2px; font-size:12px; color:var(--muted); }\n\n  .woai-manual{ margin-top:10px; }\n  .woai-label{ display:block; margin:10px 0 6px; font-weight:900; font-size:12px; color:var(--txt); }\n  .woai-textarea{ width:100%; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--txt); padding:10px 12px; outline:none; }\n  .woai-textarea:focus{ border-color: rgba(0,229,255,.45); box-shadow: 0 0 0 3px rgba(0,229,255,.12); }\n\n  .woai-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.10); }\n  .woai-nav__right{ display:flex; gap:10px; align-items:center; }\n  .woai-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:14px; padding:10px 12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--txt); cursor:pointer; font-weight:950; font-size:13px; user-select:none; }\n  .woai-btn:disabled{ opacity:.45; cursor:not-allowed; }\n  .woai-btn--ghost:hover{ background: rgba(255,255,255,.10); }\n  .woai-btn--primary{ border:1px solid rgba(255,255,255,.14); background: linear-gradient(90deg, rgba(0,229,255,.14), rgba(183,0,255,.14), rgba(0,255,133,.10)); position:relative; overflow:hidden; }\n  .woai-btn--primary:before{ content:\"\"; position:absolute; inset:-2px; background: conic-gradient(from 0deg, var(--accent1), var(--accent2), var(--accent3), var(--accent1)); filter: blur(12px); opacity:.45; animation: woaiSpin 2.9s linear infinite; }\n  .woai-btn--primary > *{ position:relative; z-index:1; }\n\n  .woai-result{ padding:16px; }\n  .woai-result__hero{ display:flex; gap:14px; align-items:center; padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background: linear-gradient(90deg, rgba(0,229,255,.10), rgba(183,0,255,.10)); }\n  .woai-result__aiMark{ width:76px; height:76px; position:relative; flex:0 0 76px; }\n  .woai-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.12); background: conic-gradient(from 0deg, rgba(0,229,255,0), rgba(0,229,255,.35), rgba(183,0,255,.35), rgba(0,255,133,.30), rgba(0,229,255,0)); animation: woaiSpin 2.6s linear infinite; }\n  .woai-ring--2{ inset:10px; opacity:.75; animation-duration:3.6s; }\n  .woai-core{ position:absolute; inset:22px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(0,229,255,.14), rgba(183,0,255,.12), transparent 65%); box-shadow: 0 0 30px rgba(0,229,255,.20); }\n\n  .woai-result__kicker{ font-weight:950; font-size:12px; letter-spacing:.9px; color: rgba(238,243,255,.85); }\n  .woai-result__title{ margin:4px 0 6px; font-size:18px; font-weight:990; color:var(--txt); }\n  .woai-result__why{ margin:0; font-size:13px; color:var(--muted); }\n\n  .woai-result__badge{ margin-left:auto; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); text-align:right; min-width:110px; }\n  .woai-result__badgeTop{ font-weight:990; letter-spacing:.8px; font-size:11px; color: rgba(238,243,255,.72); }\n  .woai-result__badgeVal{ font-weight:990; font-size:22px; line-height:1.1; background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3)); -webkit-background-clip:text; background-clip:text; color: transparent; }\n\n  .woai-packCard{ margin-top:12px; padding:16px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); position:relative; overflow:hidden; backdrop-filter: blur(12px); }\n  .woai-packGlow{ position:absolute; inset:-60px; background:\n      radial-gradient(60% 45% at 15% 0%, rgba(0,229,255,.16), transparent 60%),\n      radial-gradient(55% 40% at 90% 55%, rgba(183,0,255,.14), transparent 60%),\n      radial-gradient(45% 35% at 50% 90%, rgba(0,255,133,.10), transparent 60%);\n    filter: blur(10px); opacity:.95; pointer-events:none; animation: woaiGlow 3.2s ease-in-out infinite;\n  }\n  @keyframes woaiGlow{ 0%,100%{ transform: scale(1) translateY(0); opacity:.85 } 50%{ transform: scale(1.04) translateY(-6px); opacity:1 } }\n\n  .woai-packCard__top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }\n  .woai-packCard__name{ font-weight:990; font-size:18px; color:var(--txt); }\n  .woai-packCard__price{ font-weight:990; font-size:16px; color:var(--txt); }\n  .woai-packCard__meta{ margin-top:6px; font-size:13px; color:var(--muted); }\n  .woai-packCard__list{ margin:12px 0 0; padding:0; list-style:none; display:grid; gap:9px; }\n  .woai-packCard__list li{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color: rgba(238,243,255,.86); }\n  .woai-packCard__list li:before{ content:\"\"; width:10px; height:10px; border-radius:50%; margin-top:4px; flex:0 0 10px; background: linear-gradient(90deg, var(--accent1), var(--accent2)); box-shadow: 0 0 14px rgba(0,229,255,.22); }\n  .woai-packCard__actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }\n\n  .woai-alts{ margin-top:12px; padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }\n  .woai-alts__title{ font-weight:950; font-size:12px; letter-spacing:.6px; margin-bottom:10px; color: rgba(238,243,255,.85); }\n  .woai-alts__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }\n  .woai-alt{ border-radius:16px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); padding:12px; }\n  .woai-alt__t{ font-weight:950; font-size:13px; color:var(--txt); }\n  .woai-alt__m{ margin-top:4px; font-size:12px; color:var(--muted); }\n  .woai-alt__s{ margin-top:8px; font-weight:990; background: linear-gradient(90deg, var(--accent1), var(--accent2)); -webkit-background-clip:text; background-clip:text; color: transparent; }\n\n  .woai-result__footer{ margin-top:12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }\n\n  .woai-console{ display:flex; flex-direction:column; gap:12px; }\n  .woai-console__card{ border-radius:16px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); padding:14px; }\n  .woai-console__title{ font-weight:990; margin-bottom:10px; color:var(--txt); }\n  .woai-console__lines{ display:grid; gap:8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\"; font-size:12px; color: rgba(238,243,255,.86); }\n  .woai-line{ display:flex; gap:8px; align-items:center; }\n  .woai-line b{ color: rgba(0,229,255,.95); }\n  .woai-console__footer{ margin-top:10px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }\n  .woai-pulseDot{ width:8px; height:8px; border-radius:50%; background: rgba(0,255,133,.9); box-shadow: 0 0 12px rgba(0,255,133,.22); animation: woaiPulse 1.2s ease-in-out infinite; }\n\n  .woai-console__mini{ border-radius:16px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); padding:12px 14px; }\n  .woai-mini__label{ font-size:12px; font-weight:950; letter-spacing:.4px; color:var(--txt); }\n  .woai-mini__bar{ margin-top:8px; height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); overflow:hidden; }\n  .woai-mini__fill{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3)); transition: width .45s ease; }\n  .woai-mini__val{ margin-top:8px; font-weight:990; color:var(--txt); }\n\n  .woai-console__hint{ font-size:12px; padding:10px 12px; border-radius:16px; border:1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.03); color:var(--muted); }\n\n  @media (max-width: 860px){\n    .woai-body{ grid-template-columns:1fr; }\n    .woai-console{ display:none; }\n    .woai-alts__grid{ grid-template-columns:1fr; }\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .woai-cta:before,.woai-orb,.woai-scanline,.woai-ring,.woai-packGlow{ animation:none !important; }\n    .woai-modal[aria-hidden=\"false\"] .woai-panel,\n    .woai-qwrap.woai-transition{ animation:none !important; }\n  }\n\n  @keyframes woaiSpin{ to{ transform: rotate(360deg); } }\n<\/style>\n\n<script>\n(function(){\n  const root = document.getElementById('woAiRecommender');\n  if(!root) return;\n\n  const modal = root.querySelector('#woaiModal');\n  const panel = root.querySelector('.woai-panel');\n  const openBtn = root.querySelector('.woai-cta');\n  const closeEls = root.querySelectorAll('[data-woai-close]');\n  const prevBtn = root.querySelector('[data-woai-prev]');\n  const nextBtn = root.querySelector('[data-woai-next]');\n  const resetBtn = root.querySelector('[data-woai-reset]');\n  const backBtn = root.querySelector('[data-woai-back]');\n  const manualToggle = root.querySelector('.woai-manualToggle');\n  const manualWrap = root.querySelector('.woai-manual');\n  const manualText = root.querySelector('#woaiManual');\n\n  const qWrap = root.querySelector('.woai-qwrap');\n  const resultWrap = root.querySelector('.woai-result');\n\n  const qEl = root.querySelector('.woai-question');\n  const helpEl = root.querySelector('.woai-help');\n  const optionsEl = root.querySelector('.woai-options');\n\n  const stepLabel = root.querySelector('.woai-stepLabel');\n  const statusEl = root.querySelector('.woai-status');\n  const fillEl = root.querySelector('.woai-progress__fill');\n\n  const consoleLines = root.querySelector('#woaiConsoleLines');\n  const confFill = root.querySelector('.woai-mini__fill');\n  const confVal = root.querySelector('.woai-mini__val');\n  const badgePct = root.querySelector('.woai-badgePct');\n\n  const resultPack = root.querySelector('.woai-result__pack');\n  const resultWhy = root.querySelector('.woai-result__why');\n  const packName = root.querySelector('.woai-packCard__name');\n  const packPrice = root.querySelector('.woai-packCard__price');\n  const packMeta = root.querySelector('.woai-packCard__meta');\n  const packList = root.querySelector('.woai-packCard__list');\n  const packLink = root.querySelector('.woai-packLink');\n  const offerteLink = root.querySelector('.woai-offerteLink');\n  const altGrid = root.querySelector('#woaiAltGrid');\n\n  const LINKS = { offerteAnchorFull: \"https:\/\/webontwerpers.be\/website-laten-maken\/#offerte\" };\n\n  const PACKAGES = {\n    starters:{ key:\"starters\", title:\"Starters pakket\", badge:\"Tot 5 pagina\u2019s\", price:\"\u20ac999 +BTW\",\n      bullets:[\"Moderne en responsive website (tot 5 pagina\u2019s)\",\"Basis SEO-optimalisatie\",\"Professioneel contactformulier\",\"Integratie van sociale media\",\"Google Maps & WhatsApp-koppeling\",\"1 maand gratis technische ondersteuning\"] },\n    kmo:{ key:\"kmo\", title:\"Voor Kmo\u2019s (Meest gekozen)\", badge:\"Tot 10 pagina\u2019s\", price:\"\u20ac1349 +BTW\",\n      bullets:[\"Website tot 10 pagina\u2019s met maatwerkdesign\",\"SEO-optimalisatie + zoekwoordanalyse\",\"Basis Google Analytics integratie\",\"Foto- en tekstoptimalisatie\",\"Snelle laadtijdoptimalisatie\",\"1 maand onderhoud inbegrepen\",\"Kleine aanpassingen inbegrepen\"] },\n    pro:{ key:\"pro\", title:\"Pro (Professionals)\", badge:\"Tot 20 pagina\u2019s\", price:\"\u20ac1699 +BTW\",\n      bullets:[\"Tot 20 professioneel ontworpen pagina\u2019s\",\"Geavanceerde SEO-optimalisatie\",\"Conversiegericht ontwerp (CTA\u2019s en leadformulieren)\",\"Blogsectie met eenvoudig beheer\",\"Meertalige functionaliteit (NL\/FR\/EN)\",\"Google Business-profiel optimalisatie\",\"3 maanden premium ondersteuning\"] },\n    shop:{ key:\"shop\", title:\"Shop (E-commerce)\", badge:\"WooCommerce tot 50 producten\", price:\"\u20ac1999 +BTW\",\n      bullets:[\"WooCommerce webshop met tot 50 producten\",\"Productcategorie\u00ebn & filtersysteem\",\"Betaalmethoden (Bancontact, PayPal, enz.)\",\"Voorraadbeheer en ordertracking\",\"SEO voor producten en categorie\u00ebn\",\"Koppeling met Google Shopping\",\"6 maanden premium support\"] }\n  };\n\n  const QB = {\n    goal:{ id:\"goal\", title:\"Waarvoor heb je een website nodig?\", help:\"Kies wat het best past bij jouw doel.\",\n      options:[\n        { t:\"Nieuwe klanten (leads)\", d:\"Focus op conversie en contactaanvragen.\", ic:\"\ud83c\udfaf\", score:{ starters:2, kmo:4, pro:5, shop:0 }, flags:{ path:\"leads\" } },\n        { t:\"Professionele uitstraling\", d:\"Sterke branding en vertrouwen.\", ic:\"\u2728\", score:{ starters:3, kmo:4, pro:4, shop:0 }, flags:{ path:\"branding\" } },\n        { t:\"E-commerce \/ online verkopen\", d:\"Producten, betalingen en orderbeheer.\", ic:\"\ud83d\uded2\", score:{ starters:-5, kmo:-3, pro:-2, shop:12 }, flags:{ path:\"shop\", ecommerce:true } },\n        { t:\"Campagne \/ landing page\", d:\"Snel live met \u00e9\u00e9n duidelijke actie.\", ic:\"\u26a1\", score:{ starters:6, kmo:2, pro:0, shop:-2 }, flags:{ path:\"landing\" } }\n      ]},\n    pages:{ id:\"pages\", title:\"Hoeveel pagina\u2019s verwacht je ongeveer?\", help:\"Dit bepaalt de scope van het project.\",\n      options:[\n        { t:\"1\u20135 pagina\u2019s\", d:\"Compact en effectief.\", ic:\"\ud83d\udcc4\", score:{ starters:7, kmo:2, pro:0, shop:0 } },\n        { t:\"6\u201310 pagina\u2019s\", d:\"Ideaal voor KMO\u2019s.\", ic:\"\ud83d\udcda\", score:{ starters:0, kmo:8, pro:2, shop:0 } },\n        { t:\"11\u201320 pagina\u2019s\", d:\"Professionele opbouw.\", ic:\"\ud83c\udfe2\", score:{ starters:-2, kmo:2, pro:9, shop:0 } },\n        { t:\"20+ pagina\u2019s\", d:\"Groter project.\", ic:\"\ud83e\udde0\", score:{ starters:-4, kmo:0, pro:10, shop:1 } }\n      ]},\n    volume:{ id:\"volume\", title:\"Hoeveel producten of diensten heb je?\", help:\"Belangrijk voor structuur \u2014 en of webshop logischer is.\",\n      options:[\n        { t:\"1\u201310\", d:\"Overzichtelijk aanbod.\", ic:\"\ud83d\udd39\", score:{ starters:4, kmo:4, pro:1, shop:0 } },\n        { t:\"11\u201350\", d:\"Duidelijke secties nodig.\", ic:\"\ud83d\udd37\", score:{ starters:1, kmo:7, pro:4, shop:2 } },\n        { t:\"51\u2013200\", d:\"Catalogus-achtig, SEO belangrijk.\", ic:\"\ud83e\udde9\", score:{ starters:-2, kmo:4, pro:8, shop:4 }, flags:{ catalog:true } },\n        { t:\"200+\", d:\"Zeer groot aanbod.\", ic:\"\ud83d\uddc2\ufe0f\", score:{ starters:-4, kmo:2, pro:7, shop:7 }, flags:{ catalog:true } }\n      ]},\n    seo:{ id:\"seo\", title:\"Wat is jouw SEO-doel?\", help:\"Hoe hoger de ambitie, hoe meer optimalisatie nodig is.\",\n      options:[\n        { t:\"Basis SEO is genoeg\", d:\"Technische basis + vindbaarheid.\", ic:\"\u2705\", score:{ starters:6, kmo:4, pro:2, shop:3 } },\n        { t:\"Ik wil groeien in Google\", d:\"Zoekwoorden + optimalisatie.\", ic:\"\ud83d\udcc8\", score:{ starters:1, kmo:8, pro:7, shop:4 } },\n        { t:\"Ik wil domineren in mijn regio\", d:\"Geavanceerde SEO + business profiel.\", ic:\"\ud83d\udc51\", score:{ starters:-1, kmo:4, pro:10, shop:4 } }\n      ]},\n    langs:{ id:\"langs\", title:\"Hoeveel talen heb je nodig?\", help:\"Meertaligheid be\u00efnvloedt SEO, beheer en structuur.\",\n      options:[\n        { t:\"1 taal\", d:\"NL of EN\", ic:\"\ud83c\uddf3\ud83c\uddf1\", score:{ starters:3, kmo:3, pro:1, shop:1 } },\n        { t:\"2 talen\", d:\"NL\/FR of NL\/EN\", ic:\"\ud83c\udf0d\", score:{ starters:0, kmo:3, pro:7, shop:2 } },\n        { t:\"3 talen (NL\/FR\/EN)\", d:\"Volledig meertalig\", ic:\"\ud83d\uddfa\ufe0f\", score:{ starters:-2, kmo:1, pro:10, shop:3 } }\n      ]},\n    lead_channels:{ id:\"lead_channels\", title:\"Waar komen jouw klanten meestal vandaan?\", help:\"Zo stemmen we de structuur en call-to-actions af.\",\n      options:[\n        { t:\"Google (SEO)\", d:\"Focus op content + vindbaarheid.\", ic:\"\ud83d\udd0e\", score:{ starters:1, kmo:5, pro:6, shop:1 }, flags:{ seoSignal:true } },\n        { t:\"Google Ads\", d:\"Landing pages + conversie.\", ic:\"\ud83d\udce3\", score:{ starters:1, kmo:6, pro:7, shop:1 } },\n        { t:\"Social media\", d:\"Snelle CTA\u2019s + vertrouwen.\", ic:\"\ud83d\udcf1\", score:{ starters:2, kmo:4, pro:4, shop:1 } },\n        { t:\"Bestaand netwerk\", d:\"Professionele uitstraling.\", ic:\"\ud83e\udd1d\", score:{ starters:3, kmo:4, pro:3, shop:0 } }\n      ]},\n    lead_conv:{ id:\"lead_conv\", title:\"Hoe belangrijk is conversie (contactaanvragen)?\", help:\"Dit bepaalt of we CTA\u2019s en leadflows zwaarder inzetten.\",\n      options:[\n        { t:\"Basis contactformulier is genoeg\", d:\"Simpel en snel.\", ic:\"\ud83d\udce8\", score:{ starters:6, kmo:3, pro:1, shop:0 } },\n        { t:\"Ik wil duidelijke CTA\u2019s en meerdere formulieren\", d:\"Conversiegericht.\", ic:\"\ud83e\uddf2\", score:{ starters:1, kmo:7, pro:10, shop:1 } }\n      ]},\n    brand_level:{ id:\"brand_level\", title:\"Welke uitstraling wil je?\", help:\"Dit be\u00efnvloedt designniveau en maatwerk.\",\n      options:[\n        { t:\"Strak & simpel\", d:\"Modern, maar effici\u00ebnt.\", ic:\"\ud83e\uddfc\", score:{ starters:6, kmo:3, pro:1, shop:0 } },\n        { t:\"Premium & uniek\", d:\"Maatwerk design + impact.\", ic:\"\ud83d\udc8e\", score:{ starters:0, kmo:6, pro:9, shop:1 } }\n      ]},\n    brand_assets:{ id:\"brand_assets\", title:\"Heb je al branding materiaal?\", help:\"Logo, kleuren, teksten, foto\u2019s\u2026\",\n      options:[\n        { t:\"Ja, alles is klaar\", d:\"Sneller en consistenter.\", ic:\"\u2705\", score:{ starters:2, kmo:3, pro:3, shop:1 } },\n        { t:\"Deels \/ ik heb hulp nodig\", d:\"Optimalisatie van tekst & foto\u2019s.\", ic:\"\ud83e\udde0\", score:{ starters:1, kmo:6, pro:6, shop:1 } }\n      ]},\n    landing_goal:{ id:\"landing_goal\", title:\"Wat is de belangrijkste actie op de pagina?\", help:\"AI optimaliseert op \u00e9\u00e9n duidelijke conversie.\",\n      options:[\n        { t:\"Offerte\/Contact aanvragen\", d:\"Formulieren & CTA\u2019s.\", ic:\"\ud83e\uddfe\", score:{ starters:6, kmo:4, pro:3, shop:0 } },\n        { t:\"Bellen\/WhatsApp\", d:\"Directe contactknoppen.\", ic:\"\ud83d\udcde\", score:{ starters:6, kmo:3, pro:2, shop:0 } },\n        { t:\"Inschrijven\/Download\", d:\"Lead magnet flow.\", ic:\"\u2b07\ufe0f\", score:{ starters:4, kmo:5, pro:6, shop:0 } }\n      ]},\n    shop_products:{ id:\"shop_products\", title:\"Hoeveel producten wil je online verkopen?\", help:\"Shop pakket ondersteunt tot 50 producten (basis).\",\n      options:[\n        { t:\"1\u201310 producten\", d:\"Kleine start-shop.\", ic:\"\ud83e\uddfa\", score:{ starters:-3, kmo:-2, pro:-2, shop:10 }, flags:{ ecommerce:true } },\n        { t:\"11\u201350 producten\", d:\"Perfect binnen het Shop pakket.\", ic:\"\ud83d\udecd\ufe0f\", score:{ starters:-4, kmo:-3, pro:-2, shop:12 }, flags:{ ecommerce:true } },\n        { t:\"50+ producten\", d:\"Schaalbaar (mogelijk extra traject).\", ic:\"\ud83c\udfec\", score:{ starters:-6, kmo:-4, pro:-2, shop:14 }, flags:{ ecommerce:true, bigShop:true } }\n      ]},\n    shop_payments:{ id:\"shop_payments\", title:\"Welke webshop-functies heb je nodig?\", help:\"Zorgt voor de juiste setup (betaalmethoden, tracking, filters).\",\n      options:[\n        { t:\"Standaard betalingen + tracking\", d:\"Bancontact\/PayPal + orderbeheer.\", ic:\"\ud83d\udcb3\", score:{ starters:-4, kmo:-2, pro:0, shop:10 }, flags:{ ecommerce:true } },\n        { t:\"Filters & categorie\u00ebn zijn heel belangrijk\", d:\"Voor goede UX bij veel producten.\", ic:\"\ud83e\udde0\", score:{ starters:-4, kmo:-2, pro:1, shop:12 }, flags:{ ecommerce:true } },\n        { t:\"Google Shopping koppeling\", d:\"Voor productadvertenties.\", ic:\"\ud83d\uded2\", score:{ starters:-4, kmo:-2, pro:1, shop:12 }, flags:{ ecommerce:true } }\n      ]}\n  };\n\n  const FLOWS = {\n    leads:   [\"goal\",\"volume\",\"pages\",\"lead_channels\",\"lead_conv\",\"seo\",\"langs\"],\n    branding:[\"goal\",\"brand_level\",\"brand_assets\",\"pages\",\"seo\",\"langs\",\"volume\"],\n    landing: [\"goal\",\"landing_goal\",\"pages\",\"seo\",\"volume\"],\n    shop:    [\"goal\",\"shop_products\",\"shop_payments\",\"seo\",\"langs\"]\n  };\n\n  let flow = FLOWS.leads.slice();\n  let step = 0;\n  const answers = {};\n\n  openBtn.addEventListener('click', openModal);\n  closeEls.forEach(el => el.addEventListener('click', closeModal));\n  window.addEventListener('keydown', (e)=>{ if(modal.getAttribute('aria-hidden')==='false' && e.key==='Escape') closeModal(); });\n\n  manualToggle.addEventListener('click', ()=>{\n    const isOpen = manualToggle.getAttribute('aria-expanded') === 'true';\n    manualToggle.setAttribute('aria-expanded', String(!isOpen));\n    manualWrap.hidden = isOpen ? true : false;\n  });\n\n  prevBtn.addEventListener('click', ()=>{ if(step>0){ step--; renderStep(); } });\n  nextBtn.addEventListener('click', ()=>{\n    const qid = flow[step];\n    if(!answers[qid]) return;\n    if(step < flow.length-1){ step++; renderStep(); } else { showResult(); }\n  });\n  resetBtn.addEventListener('click', ()=>{\n    step=0; flow=FLOWS.leads.slice();\n    for(const k in answers) delete answers[k];\n    manualText.value=\"\"; manualWrap.hidden=true; manualToggle.setAttribute('aria-expanded','false');\n    pushConsole(\"Reset uitgevoerd\", \"OK\");\n    renderStep(true);\n  });\n  backBtn.addEventListener('click', ()=>{\n    resultWrap.hidden = true;\n    qWrap.hidden = false;\n    renderStep(true);\n  });\n\n  root.addEventListener(\"click\", (e)=>{\n    const a = e.target.closest('a[data-woai-scroll=\"1\"]');\n    if(!a) return;\n    closeModal();\n    \/\/ same-page smooth scroll if possible\n    const href = a.getAttribute(\"href\") || \"\";\n    try{\n      const u = new URL(href, window.location.href);\n      if(u.origin === window.location.origin){\n        const hash = u.hash || \"\";\n        if(hash && u.pathname === window.location.pathname){\n          e.preventDefault();\n          history.pushState(null, \"\", hash);\n          setTimeout(()=>{\n            const target = document.querySelector(hash);\n            if(target) target.scrollIntoView({behavior:\"smooth\", block:\"start\"});\n            else window.location.href = href;\n          }, 60);\n        }\n      }\n    }catch(err){}\n  });\n\n  function openModal(){\n    modal.setAttribute('aria-hidden','false');\n    document.body.style.overflow = 'hidden';\n    qWrap.hidden = false; resultWrap.hidden = true;\n\n    step=0; flow=FLOWS.leads.slice();\n    for(const k in answers) delete answers[k];\n    manualText.value=\"\"; manualWrap.hidden=true; manualToggle.setAttribute('aria-expanded','false');\n\n    renderStep(true);\n    startParticles();\n    pushConsole(\"Systeem gestart\u2026\", \"OK\");\n    setTimeout(()=>pushConsole(\"Neural scoring: actief\", \"RUN\"), 180);\n  }\n  function closeModal(){\n    modal.setAttribute('aria-hidden','true');\n    document.body.style.overflow = '';\n    stopParticles();\n  }\n\n  function renderStep(){\n    qWrap.classList.remove(\"woai-transition\");\n    void qWrap.offsetWidth;\n    qWrap.classList.add(\"woai-transition\");\n\n    const qid = flow[step];\n    const q = QB[qid];\n\n    const total = flow.length;\n    stepLabel.textContent = `Stap ${step+1}\/${total}`;\n    fillEl.style.width = `${Math.round((step\/Math.max(1,total))*100)}%`;\n\n    prevBtn.disabled = step === 0;\n    nextBtn.disabled = !answers[qid];\n\n    qEl.textContent = q.title;\n    helpEl.textContent = q.help;\n\n    manualText.value = (answers[qid]?.manual || \"\");\n    manualWrap.hidden = !(manualToggle.getAttribute('aria-expanded') === 'true');\n\n    optionsEl.innerHTML = \"\";\n    q.options.forEach((opt, idx)=>{\n      const btn = document.createElement('button');\n      btn.type=\"button\";\n      btn.className=\"woai-opt\";\n      btn.setAttribute('role','listitem');\n      btn.setAttribute('aria-selected', answers[qid]?.idx === idx ? \"true\" : \"false\");\n      btn.innerHTML = `\n        <div class=\"woai-opt__ic\"><span>${opt.ic}<\/span><\/div>\n        <div class=\"woai-opt__txt\">\n          <div class=\"woai-opt__t\">${escapeHtml(opt.t)}<\/div>\n          <div class=\"woai-opt__d\">${escapeHtml(opt.d)}<\/div>\n        <\/div>\n      `;\n      btn.addEventListener('click', ()=>{\n        answers[qid] = { idx, manual: manualText.value || \"\", flags: (opt.flags || {}) };\n\n        if(qid === \"goal\"){\n          const path = opt.flags?.path || \"leads\";\n          flow = (FLOWS[path] || FLOWS.leads).slice();\n          for(const key of Object.keys(answers)){\n            if(!flow.includes(key)) delete answers[key];\n          }\n          step = 0;\n          pushConsole(`Path selected: ${path}`, \"OK\");\n        }\n\n        [...optionsEl.querySelectorAll('.woai-opt')].forEach(n=>n.setAttribute('aria-selected','false'));\n        btn.setAttribute('aria-selected','true');\n        nextBtn.disabled = false;\n\n        pushConsole(`${qid}: ${opt.t}`, \"OK\");\n        statusEl.textContent = \"Keuze geregistreerd\";\n        updateConfidence();\n        nextBtn.animate([{transform:\"scale(1)\"},{transform:\"scale(1.03)\"},{transform:\"scale(1)\"}], {duration:260, easing:\"cubic-bezier(.2,.9,.25,1)\"});\n      });\n      optionsEl.appendChild(btn);\n    });\n\n    manualText.oninput = ()=>{\n      if(answers[qid]){\n        answers[qid].manual = manualText.value;\n        pushConsole(`manual(${qid}): bijgewerkt`, \"NOTE\");\n      }\n    };\n\n    statusEl.textContent = \"Wacht op keuze\u2026\";\n    updateConfidence();\n  }\n\n  function isEcommerceSignal(){\n    for(const a of Object.values(answers)){\n      if(a?.flags?.ecommerce) return true;\n    }\n    const g = answers.goal ? QB.goal.options[answers.goal.idx]?.flags : null;\n    if(g?.path === \"shop\") return true;\n    return false;\n  }\n\n  function computeScores(){\n    const scores = { starters:0, kmo:0, pro:0, shop:0 };\n\n    for(const qid of flow){\n      const a = answers[qid];\n      if(!a) continue;\n      const q = QB[qid];\n      const opt = q.options[a.idx];\n      if(!opt || !opt.score) continue;\n      for(const k of Object.keys(scores)){\n        scores[k] += (opt.score[k] || 0);\n      }\n    }\n\n    const manualAll = Object.values(answers).map(x=>x.manual||\"\").join(\" \").toLowerCase();\n    const has = (w)=> manualAll.includes(w);\n\n    if(has(\"webshop\") || has(\"woocommerce\") || has(\"betaal\") || has(\"shopping\") || has(\"producten\")){\n      scores.shop += 6; scores.pro -= 1;\n    }\n    if(has(\"meertalig\") || has(\"fr\") || has(\"eng\") || has(\"en\")) scores.pro += 3;\n    if(has(\"seo\") || has(\"google\") || has(\"zoekwoord\")) { scores.kmo += 2; scores.pro += 2; }\n    if(has(\"snel\") || has(\"simpel\") || has(\"basis\")) scores.starters += 2;\n\n    if(isEcommerceSignal()){\n      scores.shop += 30; scores.starters -= 10; scores.kmo -= 6; scores.pro -= 4;\n    }\n\n    const volFlags = answers.volume ? QB.volume.options[answers.volume.idx]?.flags : null;\n    if(volFlags?.catalog && !isEcommerceSignal()){\n      scores.pro += 4; scores.kmo += 1;\n    }\n\n    return scores;\n  }\n\n  function pickWinner(scores){\n    const entries = Object.entries(scores).sort((a,b)=> b[1]-a[1]);\n    let bestKey = entries[0][0];\n    if(isEcommerceSignal()) bestKey = \"shop\";\n\n    const forced = bestKey;\n    const ranking = entries.filter(([k])=>k!==forced).sort((a,b)=>b[1]-a[1]);\n    ranking.unshift([forced, scores[forced]]);\n\n    const bestVal = ranking[0][1];\n    const secondVal = ranking[1] ? ranking[1][1] : bestVal-1;\n    const diff = bestVal - secondVal;\n    const confidence = Math.max(60, Math.min(96, 70 + diff*4));\n    return { bestKey: forced, confidence, ranking };\n  }\n\n  function buildWhy(bestKey){\n    const bits = [];\n    const gOpt = answers.goal ? QB.goal.options[answers.goal.idx]?.t : null; if(gOpt) bits.push(`Doel: ${gOpt}`);\n    const pOpt = answers.pages ? QB.pages.options[answers.pages.idx]?.t : null; if(pOpt) bits.push(`Pagina\u2019s: ${pOpt}`);\n    const vOpt = answers.volume ? QB.volume.options[answers.volume.idx]?.t : null; if(vOpt) bits.push(`Aanbod: ${vOpt}`);\n    const sOpt = answers.seo ? QB.seo.options[answers.seo.idx]?.t : null; if(sOpt) bits.push(`SEO: ${sOpt}`);\n    const lOpt = answers.langs ? QB.langs.options[answers.langs.idx]?.t : null; if(lOpt) bits.push(`Talen: ${lOpt}`);\n\n    const base = bits.slice(0,3).join(\" \u2022 \");\n    if(bestKey===\"shop\"){\n      const extra = isEcommerceSignal() ? \"E-commerce signal gedetecteerd \u2192 webshop aanpak is het meest logisch.\" : \"Webshopstructuur is aanbevolen voor jouw aanbod.\";\n      return `${base}. ${extra}`;\n    }\n    if(bestKey===\"pro\") return `${base}. Dit vraagt om premium opbouw + geavanceerde SEO\/conversie.`;\n    if(bestKey===\"kmo\") return `${base}. Sterke balans tussen maatwerkdesign en groei in Google.`;\n    return `${base}. Perfect om snel professioneel online te staan met een sterke basis.`;\n  }\n\n  function renderAlternatives(ranking){\n    altGrid.innerHTML = \"\";\n    ranking.slice(1,3).forEach(([key, score])=>{\n      const pkg = PACKAGES[key];\n      const el = document.createElement(\"div\");\n      el.className = \"woai-alt\";\n      el.innerHTML = `\n        <div class=\"woai-alt__t\">${escapeHtml(pkg.title)}<\/div>\n        <div class=\"woai-alt__m\">${escapeHtml(pkg.badge)} \u2022 ${escapeHtml(pkg.price)}<\/div>\n        <div class=\"woai-alt__s\">AI-score: ${Math.round(score)}<\/div>\n      `;\n      altGrid.appendChild(el);\n    });\n  }\n\n  function showResult(){\n    fillEl.style.width = \"100%\";\n    statusEl.textContent = \"Analyse afronden\u2026\";\n\n    pushConsole(\"Analyse: gestart\", \"RUN\");\n    setTimeout(()=>pushConsole(\"Feature extraction\u2026\", \"RUN\"), 200);\n    setTimeout(()=>pushConsole(\"Scoring modellen\u2026\", \"RUN\"), 430);\n    setTimeout(()=>pushConsole(\"Best match: berekenen\u2026\", \"RUN\"), 680);\n\n    const scores = computeScores();\n    const res = pickWinner(scores);\n    const pkg = PACKAGES[res.bestKey];\n\n    setTimeout(()=>{\n      qWrap.hidden = true;\n      resultWrap.hidden = false;\n\n      const why = buildWhy(res.bestKey);\n\n      resultPack.textContent = pkg.title;\n      resultWhy.textContent = why;\n\n      packName.textContent = pkg.title;\n      packPrice.textContent = pkg.price;\n      packMeta.textContent = `${pkg.badge} \u2022 Aanbevolen door AI-score`;\n      packList.innerHTML = pkg.bullets.map(x=>`<li>${escapeHtml(x)}<\/li>`).join(\"\");\n\n      packLink.href = LINKS.offerteAnchorFull;\n      offerteLink.href = LINKS.offerteAnchorFull;\n\n      confFill.style.width = `${res.confidence}%`;\n      confVal.textContent = `${res.confidence}%`;\n      badgePct.textContent = `${res.confidence}`;\n\n      renderAlternatives(res.ranking);\n\n      pushConsole(`Resultaat: ${pkg.title}`, \"OK\");\n      pushConsole(`Confidence: ${res.confidence}%`, \"OK\");\n      statusEl.textContent = \"Advies klaar \u2705\";\n    }, 880);\n  }\n\n  function updateConfidence(){\n    const answered = flow.filter(id=>answers[id]).length;\n    const total = flow.length;\n    const scores = computeScores();\n    const res = pickWinner(scores);\n\n    const base = 40 + Math.round((answered\/Math.max(1,total))*40);\n    const conf = Math.max(base, Math.min(95, res.confidence - (total-answered)*2));\n\n    confFill.style.width = `${conf}%`;\n    confVal.textContent = answered ? `${conf}%` : \"\u2014\";\n  }\n\n  function pushConsole(text, tag){\n    if(!consoleLines) return;\n    const row = document.createElement(\"div\");\n    row.className = \"woai-line\";\n    row.innerHTML = `<b>[${tag||\"OK\"}]<\/b> <span>${escapeHtml(text)}<\/span>`;\n    consoleLines.prepend(row);\n    while(consoleLines.children.length>10) consoleLines.removeChild(consoleLines.lastChild);\n  }\n  function escapeHtml(s){\n    return String(s).replace(\/[&<>\"']\/g, m=>({ \"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",'\"':\"&quot;\",\"'\":\"&#039;\" }[m]));\n  }\n\n  \/\/ Particles (dark)\n  const canvas = root.querySelector(\".woai-particles\");\n  const ctx = canvas.getContext(\"2d\");\n  let raf=null, particles=[], lastT=0;\n\n  function resizeCanvas(){\n    const rect = panel.getBoundingClientRect();\n    canvas.width = Math.max(300, Math.floor(rect.width));\n    canvas.height = Math.max(300, Math.floor(rect.height));\n  }\n  function initParticles(){\n    resizeCanvas();\n    const count = Math.min(95, Math.round((canvas.width*canvas.height)\/17000));\n    particles = [];\n    for(let i=0;i<count;i++){\n      particles.push({\n        x:Math.random()*canvas.width,\n        y:Math.random()*canvas.height,\n        vx:(Math.random()-.5)*0.45,\n        vy:(Math.random()-.5)*0.45,\n        r:1+Math.random()*1.8,\n        a:0.12+Math.random()*0.24\n      });\n    }\n  }\n  function draw(t){\n    const dt = Math.min(32, t-lastT); lastT=t;\n    ctx.clearRect(0,0,canvas.width,canvas.height);\n\n    const g = ctx.createRadialGradient(canvas.width*0.25, canvas.height*0.15, 0, canvas.width*0.25, canvas.height*0.15, canvas.width*0.9);\n    g.addColorStop(0, \"rgba(0,229,255,0.12)\");\n    g.addColorStop(0.45, \"rgba(183,0,255,0.10)\");\n    g.addColorStop(1, \"rgba(0,0,0,0)\");\n    ctx.fillStyle = g;\n    ctx.fillRect(0,0,canvas.width,canvas.height);\n\n    for(const p of particles){\n      p.x += p.vx*dt; p.y += p.vy*dt;\n      if(p.x<-20) p.x=canvas.width+20;\n      if(p.x>canvas.width+20) p.x=-20;\n      if(p.y<-20) p.y=canvas.height+20;\n      if(p.y>canvas.height+20) p.y=-20;\n\n      ctx.beginPath();\n      ctx.arc(p.x,p.y,p.r,0,Math.PI*2);\n      ctx.fillStyle = `rgba(240,245,255,${p.a})`;\n      ctx.fill();\n    }\n\n    for(let i=0;i<particles.length;i++){\n      for(let j=i+1;j<particles.length;j++){\n        const a=particles[i], b=particles[j];\n        const dx=a.x-b.x, dy=a.y-b.y;\n        const d=Math.sqrt(dx*dx+dy*dy);\n        if(d<120){\n          const alpha=(1-d\/120)*0.18;\n          ctx.strokeStyle = `rgba(0,229,255,${alpha})`;\n          ctx.lineWidth=1;\n          ctx.beginPath();\n          ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y);\n          ctx.stroke();\n        }\n      }\n    }\n    raf=requestAnimationFrame(draw);\n  }\n  function startParticles(){\n    initParticles();\n    window.addEventListener(\"resize\", onResize, {passive:true});\n    raf=requestAnimationFrame((t)=>{ lastT=t; draw(t); });\n  }\n  function stopParticles(){\n    window.removeEventListener(\"resize\", onResize);\n    if(raf) cancelAnimationFrame(raf);\n    raf=null;\n  }\n  function onResize(){ resizeCanvas(); initParticles(); }\n\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Websitepakketten U kiest uw doel, wij zorgen voor een website die presteert. Korte, scherpe bullets. Extra uitleg? Tik op het ? icoon. Tot 5 pagina\u2019s Start Kickstart Doel: professioneel overkomen en snel eerste leads genereren \u20ac999\/+BTW Van twijfel naar vertrouwen: U oogt te klein of onprofessioneel online ? Moderne layout en duidelijke visuele hi\u00ebrarchie voor [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2495","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/pages\/2495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/comments?post=2495"}],"version-history":[{"count":24,"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/pages\/2495\/revisions"}],"predecessor-version":[{"id":2807,"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/pages\/2495\/revisions\/2807"}],"wp:attachment":[{"href":"https:\/\/webontwerpers.be\/fr\/wp-json\/wp\/v2\/media?parent=2495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}