{"id":5,"date":"2026-05-17T16:09:38","date_gmt":"2026-05-17T16:09:38","guid":{"rendered":"https:\/\/vraagjewebsiteconceptaan.progrezzagency.nl\/?page_id=5"},"modified":"2026-05-17T16:10:50","modified_gmt":"2026-05-17T16:10:50","slug":"elementor-5","status":"publish","type":"page","link":"https:\/\/vraagjewebsiteconceptaan.progrezzagency.nl\/","title":{"rendered":"Website"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Gratis Website Concept | Progrezz AI<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --clr-bg: #07070f;\r\n --clr-surface: #0e0e1a;\r\n --clr-border: #1c1c2e;\r\n --clr-border-focus: #6366f1;\r\n --clr-primary: #6366f1;\r\n --clr-primary-h: #4f52d8;\r\n --clr-accent: #8b5cf6;\r\n --clr-text: #f1f1f8;\r\n --clr-muted: #7878a0;\r\n --clr-label: #c0c0d8;\r\n --clr-error: #f87171;\r\n --clr-success: #34d399;\r\n --clr-card: #0f0f1c;\r\n --radius-sm: 10px;\r\n --radius-md: 14px;\r\n --radius-lg: 22px;\r\n --font: 'Plus Jakarta Sans', sans-serif;\r\n --ease: cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n body {\r\n font-family: var(--font);\r\n background: var(--clr-bg);\r\n color: var(--clr-text);\r\n min-height: 100vh;\r\n padding: 52px 16px 72px;\r\n line-height: 1.6;\r\n }\r\n\r\n body::before {\r\n content: '';\r\n position: fixed; inset: 0;\r\n background-image:\r\n linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px);\r\n background-size: 48px 48px;\r\n pointer-events: none; z-index: 0;\r\n }\r\n\r\n .form-wrapper { max-width: 680px; margin: 0 auto; position: relative; z-index: 1; }\r\n\r\n \/* \u2500\u2500 HEADER \u2500\u2500 *\/\r\n .form-header { text-align: center; margin-bottom: 44px; }\r\n\r\n .form-badge {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: rgba(99,102,241,0.1);\r\n border: 1px solid rgba(99,102,241,0.28);\r\n color: #a5a8f8;\r\n font-size: 11.5px; font-weight: 700;\r\n letter-spacing: 0.09em; text-transform: uppercase;\r\n padding: 7px 16px; border-radius: 100px; margin-bottom: 22px;\r\n }\r\n .badge-dot {\r\n width: 7px; height: 7px; background: #6366f1; border-radius: 50%;\r\n animation: blink 1.8s ease-in-out infinite; flex-shrink: 0;\r\n }\r\n @keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.75)} }\r\n\r\n .form-title {\r\n font-size: clamp(26px, 5.5vw, 40px); font-weight: 800; line-height: 1.18;\r\n margin-bottom: 14px;\r\n background: linear-gradient(135deg, #ffffff 0%, #a5a8f8 55%, #c084fc 100%);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\r\n }\r\n .form-subtitle { font-size: 15.5px; color: var(--clr-muted); max-width: 500px; margin: 0 auto 20px; }\r\n\r\n .proof-strip { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }\r\n .proof-item { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--clr-muted); }\r\n .proof-icon { flex-shrink: 0; }\r\n\r\n \/* \u2500\u2500 URGENCY BANNER \u2500\u2500 *\/\r\n .urgency-banner {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n background: rgba(15, 15, 26, 0.9);\r\n border: 1px solid rgba(248, 113, 113, 0.2);\r\n color: #c4c4d4;\r\n font-size: 11.5px; font-weight: 600;\r\n letter-spacing: 0.04em;\r\n padding: 6px 14px 6px 10px;\r\n border-radius: 6px;\r\n margin-bottom: 24px;\r\n }\r\n .urgency-banner-dot {\r\n width: 6px; height: 6px; border-radius: 50%;\r\n background: #f87171; flex-shrink: 0;\r\n animation: dotBlink 2s ease-in-out infinite;\r\n }\r\n @keyframes dotBlink {\r\n 0%,100%{ opacity: 1; }\r\n 50% { opacity: 0.3; }\r\n }\r\n .urgency-banner strong { color: #f1f1f8; font-weight: 700; }\r\n\r\n \/* \u2500\u2500 LOSS STAT \u2500\u2500 *\/\r\n .loss-stat {\r\n display: flex; align-items: center; gap: 20px;\r\n background: transparent;\r\n border: 1px solid rgba(248,113,113,0.12);\r\n border-radius: var(--radius-sm);\r\n padding: 16px 20px; margin: 20px 0;\r\n text-align: left;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .loss-stat::before {\r\n content: '';\r\n position: absolute; left: 0; top: 0; bottom: 0;\r\n width: 2px;\r\n background: linear-gradient(180deg, transparent, #f87171 40%, #f87171 60%, transparent);\r\n }\r\n .loss-number {\r\n font-size: 32px; font-weight: 800; line-height: 1;\r\n color: #f1f1f8; flex-shrink: 0;\r\n letter-spacing: -0.02em;\r\n }\r\n .loss-divider {\r\n width: 1px; height: 32px; background: rgba(248,113,113,0.15); flex-shrink: 0;\r\n }\r\n .loss-text {\r\n font-size: 12.5px; color: var(--clr-muted); line-height: 1.55;\r\n }\r\n\r\n \/* \u2500\u2500 PROGRESS \u2500\u2500 *\/\r\n .progress-bar-wrap { margin-bottom: 28px; }\r\n .progress-steps { display: flex; align-items: flex-start; justify-content: center; }\r\n\r\n .step-item { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; flex: 1; }\r\n .step-item:not(:last-child)::after {\r\n content: ''; position: absolute;\r\n top: 14px; left: calc(50% + 15px); width: calc(100% - 30px); height: 2px;\r\n background: var(--clr-border); transition: background 0.4s var(--ease);\r\n }\r\n .step-item.completed:not(:last-child)::after { background: var(--clr-primary); }\r\n\r\n .step-dot {\r\n width: 30px; height: 30px; border-radius: 50%;\r\n border: 2px solid var(--clr-border); background: var(--clr-surface);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 11px; font-weight: 700; color: var(--clr-muted);\r\n transition: all 0.3s var(--ease); position: relative; z-index: 1;\r\n }\r\n .step-item.active .step-dot { border-color:var(--clr-primary); background:rgba(99,102,241,0.15); color:#a5a8f8; box-shadow:0 0 0 4px rgba(99,102,241,0.12); }\r\n .step-item.completed .step-dot { border-color:var(--clr-primary); background:var(--clr-primary); color:#fff; }\r\n\r\n .step-label { font-size:10px; font-weight:600; color:var(--clr-muted); text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; }\r\n .step-item.active .step-label { color:#a5a8f8; }\r\n .step-item.completed .step-label { color:var(--clr-primary); }\r\n\r\n \/* \u2500\u2500 CARD \u2500\u2500 *\/\r\n .form-card { background:var(--clr-card); border:1px solid var(--clr-border); border-radius:var(--radius-lg); padding:40px; margin-bottom:16px; }\r\n\r\n .step-panel { display:none; }\r\n .step-panel.active { display:block; animation:fadeUp 0.35s var(--ease); }\r\n @keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }\r\n\r\n .step-heading { font-size:19px; font-weight:800; color:var(--clr-text); margin-bottom:4px; }\r\n .step-desc { font-size:13px; color:var(--clr-muted); margin-bottom:28px; }\r\n\r\n \/* \u2500\u2500 FIELDS \u2500\u2500 *\/\r\n .field-group { display:flex; flex-direction:column; gap:20px; }\r\n .field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }\r\n .field { display:flex; flex-direction:column; gap:6px; }\r\n\r\n label { font-size:13px; font-weight:600; color:var(--clr-label); }\r\n label .req { color:var(--clr-primary); margin-left:2px; }\r\n label .opt { color:var(--clr-muted); font-weight:400; font-size:11px; margin-left:4px; }\r\n\r\n input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], input[type=\"url\"], select, textarea {\r\n width:100%; background:var(--clr-surface); border:1.5px solid var(--clr-border);\r\n border-radius:var(--radius-sm); color:var(--clr-text); font-family:var(--font);\r\n font-size:14px; padding:12px 14px; outline:none;\r\n transition:all 0.2s var(--ease); appearance:none; -webkit-appearance:none;\r\n }\r\n input::placeholder, textarea::placeholder { color:var(--clr-muted); opacity:0.65; }\r\n input:focus, select:focus, textarea:focus { border-color:var(--clr-border-focus); background:#14142a; box-shadow:0 0 0 3px rgba(99,102,241,0.12); }\r\n input.error, select.error, textarea.error { border-color:var(--clr-error); }\r\n\r\n .field-error { font-size:11px; color:var(--clr-error); display:none; }\r\n .field-error.visible { display:block; }\r\n\r\n textarea { resize:vertical; min-height:90px; }\r\n\r\n .select-wrap { position:relative; }\r\n .select-wrap::after {\r\n content:''; position:absolute; right:14px; top:50%; transform:translateY(-50%);\r\n width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;\r\n border-top:5px solid var(--clr-muted); pointer-events:none;\r\n }\r\n select { cursor:pointer; padding-right:36px; }\r\n select option { background:#1a1a30; color:var(--clr-text); }\r\n\r\n \/* \u2500\u2500 OPTION CARDS \u2500\u2500 *\/\r\n .option-grid { display:grid; gap:10px; }\r\n .option-grid.cols-2 { grid-template-columns:1fr 1fr; }\r\n .option-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }\r\n\r\n .option-card { position:relative; }\r\n .option-card input[type=\"radio\"], .option-card input[type=\"checkbox\"] { position:absolute; opacity:0; width:0; height:0; }\r\n\r\n .option-label {\r\n display:flex; align-items:center; gap:10px;\r\n padding:11px 14px; border:1.5px solid var(--clr-border); border-radius:var(--radius-sm);\r\n cursor:pointer; font-size:13px; font-weight:500; color:var(--clr-muted);\r\n transition:all 0.2s var(--ease); background:var(--clr-surface); user-select:none;\r\n }\r\n .option-label:hover { border-color:rgba(99,102,241,0.4); color:var(--clr-text); background:rgba(99,102,241,0.04); }\r\n .option-card input:checked + .option-label { border-color:var(--clr-primary); background:rgba(99,102,241,0.1); color:#a5a8f8; }\r\n\r\n .option-icon { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:22px; height:22px; }\r\n\r\n \/* \u2500\u2500 FILE DROP \u2500\u2500 *\/\r\n .file-drop {\r\n border:2px dashed var(--clr-border); border-radius:var(--radius-md);\r\n padding:28px 20px; text-align:center; cursor:pointer;\r\n transition:all 0.2s var(--ease); position:relative;\r\n }\r\n .file-drop:hover, .file-drop.drag-over { border-color:var(--clr-primary); background:rgba(99,102,241,0.04); }\r\n .file-drop input[type=\"file\"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }\r\n .file-text { font-size:13px; color:var(--clr-muted); margin-top:8px; }\r\n .file-text strong { color:#a5a8f8; }\r\n .file-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; justify-content:center; }\r\n .file-tag {\r\n display:inline-flex; align-items:center; gap:6px;\r\n background:rgba(99,102,241,0.12); border:1px solid rgba(99,102,241,0.25);\r\n border-radius:100px; padding:4px 10px; font-size:11px; color:#a5a8f8;\r\n }\r\n .file-tag button { background:none; border:none; color:var(--clr-muted); cursor:pointer; padding:0; font-size:14px; line-height:1; }\r\n\r\n \/* \u2500\u2500 URL LIST \u2500\u2500 *\/\r\n .url-list { display:flex; flex-direction:column; gap:8px; }\r\n .url-row { display:flex; gap:8px; align-items:center; }\r\n .url-row input { flex:1; }\r\n .url-num {\r\n width:26px; height:26px; border-radius:50%;\r\n background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.2);\r\n display:flex; align-items:center; justify-content:center;\r\n font-size:11px; font-weight:700; color:#a5a8f8; flex-shrink:0;\r\n }\r\n\r\n \/* \u2500\u2500 TOGGLE \u2500\u2500 *\/\r\n .toggle-field {\r\n display:flex; align-items:center; justify-content:space-between; gap:12px;\r\n padding:14px 16px; background:var(--clr-surface); border:1.5px solid var(--clr-border); border-radius:var(--radius-sm);\r\n }\r\n .toggle-info { flex:1; }\r\n .toggle-title { font-size:13px; font-weight:600; color:var(--clr-label); }\r\n .toggle-sub { font-size:11px; color:var(--clr-muted); margin-top:2px; }\r\n\r\n .toggle-switch { position:relative; width:44px; height:24px; flex-shrink:0; }\r\n .toggle-switch input { opacity:0; width:0; height:0; position:absolute; }\r\n .toggle-track { position:absolute; inset:0; background:var(--clr-border); border-radius:100px; cursor:pointer; transition:background 0.25s var(--ease); }\r\n .toggle-track::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:white; border-radius:50%; transition:transform 0.25s var(--ease); }\r\n .toggle-switch input:checked + .toggle-track { background:var(--clr-primary); }\r\n .toggle-switch input:checked + .toggle-track::after { transform:translateX(20px); }\r\n\r\n .conditional { display:none; }\r\n .conditional.visible { display:block; margin-top:12px; }\r\n\r\n \/* \u2500\u2500 INFO TIP \u2500\u2500 *\/\r\n .info-tip {\r\n display:flex; gap:10px; align-items:flex-start;\r\n background:rgba(99,102,241,0.06); border:1px solid rgba(99,102,241,0.14);\r\n border-radius:var(--radius-sm); padding:12px 14px;\r\n font-size:12px; color:var(--clr-muted);\r\n }\r\n .tip-icon { flex-shrink:0; width:18px; height:18px; }\r\n\r\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n .form-nav { display:flex; align-items:center; gap:12px; margin-top:8px; }\r\n\r\n .btn {\r\n display:inline-flex; align-items:center; gap:8px;\r\n padding:14px 24px; border-radius:var(--radius-sm);\r\n font-family:var(--font); font-size:14px; font-weight:700;\r\n cursor:pointer; border:none; transition:all 0.2s var(--ease);\r\n }\r\n .btn-ghost { background:transparent; color:var(--clr-muted); border:1.5px solid var(--clr-border); }\r\n .btn-ghost:hover { color:var(--clr-text); border-color:rgba(99,102,241,0.4); }\r\n .btn-primary { background:var(--clr-primary); color:white; flex:1; justify-content:center; }\r\n .btn-primary:hover { background:var(--clr-primary-h); transform:translateY(-1px); box-shadow:0 10px 28px rgba(99,102,241,0.35); }\r\n .btn-primary:active { transform:translateY(0); }\r\n .btn svg { width:16px; height:16px; }\r\n\r\n \/* \u2500\u2500 SUCCESS \u2500\u2500 *\/\r\n .success-screen { display:none; text-align:center; padding:64px 20px; }\r\n .success-screen.active { display:block; animation:fadeUp 0.4s var(--ease); }\r\n .success-ring {\r\n width:80px; height:80px; border-radius:50%;\r\n background:rgba(52,211,153,0.08); border:2px solid rgba(52,211,153,0.25);\r\n display:flex; align-items:center; justify-content:center; margin:0 auto 24px;\r\n }\r\n .success-title { font-size:26px; font-weight:800; margin-bottom:10px; background:linear-gradient(135deg,#f1f1f8 0%,#34d399 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }\r\n .success-sub { font-size:14px; color:var(--clr-muted); max-width:380px; margin:0 auto; }\r\n .success-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(52,211,153,0.08); border:1px solid rgba(52,211,153,0.2); border-radius:100px; padding:8px 20px; font-size:13px; font-weight:600; color:#34d399; margin-top:24px; }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ANIMATED SVG ICONS\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n \/* Phone \u2014 shakes like ringing *\/\r\n .icon-phone { animation: phoneRing 1.6s ease-in-out infinite; transform-origin: 50% 90%; }\r\n @keyframes phoneRing {\r\n 0%,100% { transform: rotate(0deg); }\r\n 8% { transform: rotate(-20deg); }\r\n 16% { transform: rotate(20deg); }\r\n 24% { transform: rotate(-15deg); }\r\n 32% { transform: rotate(15deg); }\r\n 40% { transform: rotate(-8deg); }\r\n 48% { transform: rotate(8deg); }\r\n 56% { transform: rotate(0deg); }\r\n }\r\n\r\n \/* Mail \u2014 flap opens, letter peeks out *\/\r\n .icon-mail-flap {\r\n transform-origin: 50% 0%;\r\n animation: flapOpen 2.4s ease-in-out infinite;\r\n }\r\n @keyframes flapOpen {\r\n 0%,40%,100% { transform: rotateX(0deg); }\r\n 55%,88% { transform: rotateX(-165deg); }\r\n }\r\n .icon-mail-letter {\r\n animation: letterRise 2.4s ease-in-out infinite;\r\n }\r\n @keyframes letterRise {\r\n 0%,40% { transform: translateY(0); opacity: 0; }\r\n 60% { transform: translateY(-7px); opacity: 1; }\r\n 88%,100% { transform: translateY(0); opacity: 0; }\r\n }\r\n\r\n \/* Clipboard \u2014 checkmark draws itself *\/\r\n .icon-check-path {\r\n stroke-dasharray: 22; stroke-dashoffset: 22;\r\n animation: drawCheck 2s ease-in-out infinite;\r\n }\r\n @keyframes drawCheck {\r\n 0%,25% { stroke-dashoffset: 22; }\r\n 65%,100% { stroke-dashoffset: 0; }\r\n }\r\n\r\n \/* WhatsApp \u2014 bubble bounces and dots pulse *\/\r\n .icon-chat-bubble { animation: chatBounce 1.8s ease-in-out infinite; transform-origin: 20% 90%; }\r\n @keyframes chatBounce {\r\n 0%,100% { transform: scale(1) translateY(0); }\r\n 35% { transform: scale(1.12) translateY(-3px); }\r\n 55% { transform: scale(0.96) translateY(1px); }\r\n }\r\n .icon-dot1 { animation: dotPulse 1.4s 0s ease-in-out infinite; }\r\n .icon-dot2 { animation: dotPulse 1.4s 0.2s ease-in-out infinite; }\r\n .icon-dot3 { animation: dotPulse 1.4s 0.4s ease-in-out infinite; }\r\n @keyframes dotPulse { 0%,100%{opacity:0.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-2px)} }\r\n\r\n \/* House \u2014 door swings open *\/\r\n .icon-door { animation: doorOpen 2.8s ease-in-out infinite; transform-origin: 9px 17.5px; }\r\n @keyframes doorOpen {\r\n 0%,35%,100% { transform: scaleX(1); }\r\n 55%,82% { transform: scaleX(0.25); }\r\n }\r\n \/* Roof raises slightly on door open *\/\r\n .icon-roof { animation: roofFloat 2.8s ease-in-out infinite; }\r\n @keyframes roofFloat {\r\n 0%,35%,100% { transform: translateY(0); }\r\n 55%,82% { transform: translateY(-1px); }\r\n }\r\n\r\n \/* Building \u2014 windows light up in sequence *\/\r\n .icon-win1 { animation: winLight 2.4s 0s ease-in-out infinite; }\r\n .icon-win2 { animation: winLight 2.4s 0.35s ease-in-out infinite; }\r\n .icon-win3 { animation: winLight 2.4s 0.7s ease-in-out infinite; }\r\n .icon-win4 { animation: winLight 2.4s 1.05s ease-in-out infinite; }\r\n @keyframes winLight { 0%,100%{opacity:0.2} 50%{opacity:1} }\r\n\r\n \/* Lightning \u2014 flickers realistically *\/\r\n .icon-bolt { animation: boltFlash 1.6s ease-in-out infinite; }\r\n @keyframes boltFlash {\r\n 0%,100% { opacity:1; filter:drop-shadow(0 0 0px #facc15); }\r\n 42% { opacity:0.2; }\r\n 44% { opacity:1; filter:drop-shadow(0 0 8px #facc15); }\r\n 80% { opacity:1; filter:drop-shadow(0 0 3px #facc15); }\r\n 82% { opacity:0.4; }\r\n 84% { opacity:1; }\r\n }\r\n\r\n \/* Robot \u2014 eyes blink naturally *\/\r\n .icon-eye-l { animation: robotBlink 3.2s ease-in-out infinite; transform-origin: 9px 13.5px; }\r\n .icon-eye-r { animation: robotBlink 3.2s 0.07s ease-in-out infinite; transform-origin: 15px 13.5px; }\r\n @keyframes robotBlink {\r\n 0%,88%,100% { transform: scaleY(1); }\r\n 93% { transform: scaleY(0.06); }\r\n }\r\n \/* Antenna blinks *\/\r\n .icon-antenna { animation: antennaBeep 1.8s ease-in-out infinite; }\r\n @keyframes antennaBeep { 0%,100%{opacity:1} 50%{opacity:0.2} }\r\n\r\n \/* Camera\/Photo \u2014 lens focus pulse *\/\r\n .icon-photo-group { animation: photoFloat 2.2s ease-in-out infinite; }\r\n @keyframes photoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }\r\n .icon-lens-outer { animation: lensFocus 2s ease-in-out infinite; transform-origin: 12px 13.5px; }\r\n @keyframes lensFocus { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }\r\n\r\n \/* Globe \u2014 smooth rotation *\/\r\n .icon-globe-group { animation: globeSpin 5s linear infinite; transform-origin: 12px 12px; }\r\n @keyframes globeSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }\r\n\r\n \/* Stars \u2014 individual twinkle *\/\r\n .icon-star1 { animation: twinkle 2s 0s ease-in-out infinite; transform-origin: 12px 12px; }\r\n .icon-star2 { animation: twinkle 2s 0.65s ease-in-out infinite; transform-origin: 5px 5px; }\r\n .icon-star3 { animation: twinkle 2s 1.3s ease-in-out infinite; transform-origin: 19px 5px; }\r\n @keyframes twinkle { 0%,100%{opacity:0.25;transform:scale(0.75)} 50%{opacity:1;transform:scale(1.15)} }\r\n\r\n \/* Upload arrow \u2014 bounces up rhythmically *\/\r\n .icon-upload-arrow { animation: uploadBounce 1.5s ease-in-out infinite; }\r\n @keyframes uploadBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }\r\n\r\n \/* Lock \u2014 shackle lifts and drops (unlocking then locking) *\/\r\n .icon-shackle { animation: shackleLift 2.6s ease-in-out infinite; transform-origin: 12px 11px; }\r\n @keyframes shackleLift {\r\n 0%,45%,100% { transform: translateY(0); }\r\n 18% { transform: translateY(-4px); }\r\n 32% { transform: translateY(0); }\r\n }\r\n .icon-keyhole { animation: keyholeGlow 2.6s ease-in-out infinite; }\r\n @keyframes keyholeGlow { 0%,45%,100%{opacity:0.6} 18%{opacity:1;filter:drop-shadow(0 0 3px #34d399)} 32%{opacity:0.6} }\r\n\r\n \/* Clock \u2014 sec hand spins, min hand crawls *\/\r\n .icon-sec-hand { animation: secSpin 1s linear infinite; transform-origin: 12px 12px; }\r\n .icon-min-hand { animation: minSpin 60s linear infinite; transform-origin: 12px 12px; }\r\n @keyframes secSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }\r\n @keyframes minSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }\r\n\r\n \/* Success check \u2014 draws in on mount *\/\r\n .icon-success-check {\r\n stroke-dasharray: 52; stroke-dashoffset: 52;\r\n animation: successDraw 0.65s 0.25s var(--ease) forwards;\r\n }\r\n @keyframes successDraw { to{stroke-dashoffset:0} }\r\n\r\n \/* \u2500\u2500 CONSENT \u2500\u2500 *\/\r\n .consent-wrap {\r\n background: var(--clr-surface);\r\n border: 1.5px solid var(--clr-border);\r\n border-radius: var(--radius-sm);\r\n padding: 14px 16px;\r\n }\r\n .consent-label {\r\n display: flex; align-items: flex-start; gap: 12px;\r\n cursor: pointer; font-size: 13px; font-weight: 400;\r\n color: var(--clr-muted); line-height: 1.5;\r\n }\r\n .consent-label input[type=\"checkbox\"] { position: absolute; opacity: 0; width: 0; height: 0; }\r\n .consent-box {\r\n width: 18px; height: 18px; min-width: 18px;\r\n border: 1.5px solid var(--clr-border); border-radius: 4px;\r\n background: var(--clr-bg);\r\n display: flex; align-items: center; justify-content: center;\r\n margin-top: 1px; transition: all 0.2s var(--ease);\r\n }\r\n .consent-label input:checked + .consent-box {\r\n background: var(--clr-primary); border-color: var(--clr-primary);\r\n }\r\n .consent-label input:checked + .consent-box::after {\r\n content: ''; width: 10px; height: 6px;\r\n border-left: 2px solid white; border-bottom: 2px solid white;\r\n transform: rotate(-45deg) translateY(-1px); display: block;\r\n }\r\n .consent-text a { color: #a5a8f8; text-decoration: underline; text-underline-offset: 2px; }\r\n .consent-text a:hover { color: var(--clr-text); }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 768px) {\r\n body { padding: 32px 16px 60px; }\r\n .form-card { padding: 28px 22px; }\r\n .field-row { grid-template-columns: 1fr; }\r\n .option-grid.cols-3 { grid-template-columns: 1fr 1fr; }\r\n .step-label { display: none; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n body { padding: 20px 12px 48px; }\r\n .form-card { padding: 20px 14px; border-radius: var(--radius-md); }\r\n .form-title { font-size: 23px; }\r\n .option-grid.cols-2, .option-grid.cols-3 { grid-template-columns: 1fr; }\r\n .btn { padding: 13px 16px; font-size: 13px; }\r\n .step-dot { width: 26px; height: 26px; font-size: 10px; }\r\n .proof-strip { gap: 12px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SVG DEFS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<svg width=\"0\" height=\"0\" style=\"position:absolute;overflow:hidden\" aria-hidden=\"true\">\r\n<defs>\r\n\r\n <!-- PHONE \u2014 rocks like ringing -->\r\n <symbol id=\"ico-phone\" viewBox=\"0 0 24 24\">\r\n <g class=\"icon-phone\">\r\n <path fill=\"#a5a8f8\" d=\"M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.58.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.24 1.01L6.6 10.8z\"\/>\r\n <!-- ripple 1 -->\r\n <path fill=\"none\" stroke=\"#6366f1\" stroke-width=\"1.4\" stroke-linecap=\"round\" d=\"M15.5 4a5.5 5.5 0 0 1 4 4\">\r\n <animate attributeName=\"opacity\" values=\"0;1;0\" dur=\"1.6s\" begin=\"0.1s\" repeatCount=\"indefinite\"\/>\r\n <\/path>\r\n <!-- ripple 2 -->\r\n <path fill=\"none\" stroke=\"#6366f1\" stroke-width=\"1.1\" stroke-linecap=\"round\" d=\"M17 2a8 8 0 0 1 5.5 5.5\">\r\n <animate attributeName=\"opacity\" values=\"0;0.7;0\" dur=\"1.6s\" begin=\"0.45s\" repeatCount=\"indefinite\"\/>\r\n <\/path>\r\n <\/g>\r\n <\/symbol>\r\n\r\n <!-- MAIL \u2014 flap opens, letter rises -->\r\n <symbol id=\"ico-mail\" viewBox=\"0 0 24 24\">\r\n <rect x=\"2\" y=\"8\" width=\"20\" height=\"13\" rx=\"2\" fill=\"#a5a8f8\" opacity=\"0.88\"\/>\r\n <!-- folded base lines -->\r\n <line x1=\"2\" y1=\"21\" x2=\"9\" y2=\"15\" stroke=\"#7c7fff\" stroke-width=\"1.1\" opacity=\"0.4\"\/>\r\n <line x1=\"22\" y1=\"21\" x2=\"15\" y2=\"15\" stroke=\"#7c7fff\" stroke-width=\"1.1\" opacity=\"0.4\"\/>\r\n <!-- rising letter -->\r\n <g class=\"icon-mail-letter\">\r\n <rect x=\"8\" y=\"5\" width=\"8\" height=\"7\" rx=\"1\" fill=\"#6366f1\"\/>\r\n <line x1=\"10\" y1=\"7.2\" x2=\"14\" y2=\"7.2\" stroke=\"white\" stroke-width=\"1\" stroke-linecap=\"round\"\/>\r\n <line x1=\"10\" y1=\"9\" x2=\"14\" y2=\"9\" stroke=\"white\" stroke-width=\"1\" stroke-linecap=\"round\"\/>\r\n <\/g>\r\n <!-- flap triangle -->\r\n <path class=\"icon-mail-flap\" d=\"M2 8 L12 15.5 L22 8\" fill=\"#6366f1\" opacity=\"0.9\"\/>\r\n <\/symbol>\r\n\r\n <!-- CLIPBOARD CHECK -->\r\n <symbol id=\"ico-clipboard\" viewBox=\"0 0 24 24\">\r\n <rect x=\"5\" y=\"3\" width=\"14\" height=\"18\" rx=\"2\" fill=\"#a5a8f8\" opacity=\"0.88\"\/>\r\n <rect x=\"9\" y=\"1\" width=\"6\" height=\"4\" rx=\"1\" fill=\"#6366f1\"\/>\r\n <line x1=\"8\" y1=\"8.5\" x2=\"16\" y2=\"8.5\" stroke=\"#0f0f1c\" stroke-width=\"1.2\" stroke-linecap=\"round\" opacity=\"0.35\"\/>\r\n <polyline class=\"icon-check-path\" points=\"8,12.5 11,15.5 16,10\" fill=\"none\" stroke=\"#0f0f1c\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/symbol>\r\n\r\n <!-- WHATSAPP \u2014 bubble bounces, dots type -->\r\n <symbol id=\"ico-whatsapp\" viewBox=\"0 0 24 24\">\r\n <g class=\"icon-chat-bubble\">\r\n <path fill=\"#25d366\" d=\"M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.38 5.07L2 22l5.07-1.36A9.93 9.93 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2z\"\/>\r\n <\/g>\r\n <circle class=\"icon-dot1\" cx=\"8.5\" cy=\"12\" r=\"1.2\" fill=\"white\"\/>\r\n <circle class=\"icon-dot2\" cx=\"12\" cy=\"12\" r=\"1.2\" fill=\"white\"\/>\r\n <circle class=\"icon-dot3\" cx=\"15.5\" cy=\"12\" r=\"1.2\" fill=\"white\"\/>\r\n <\/symbol>\r\n\r\n <!-- HOUSE \u2014 door swings open -->\r\n <symbol id=\"ico-house\" viewBox=\"0 0 24 24\">\r\n <g class=\"icon-roof\">\r\n <polygon points=\"12,3 22,11 20,11 20,21 4,21 4,11 2,11\" fill=\"#a5a8f8\" opacity=\"0.88\"\/>\r\n <\/g>\r\n <!-- door frame -->\r\n <rect x=\"8.5\" y=\"13.5\" width=\"7\" height=\"7.5\" rx=\"0.5\" fill=\"#6366f1\" opacity=\"0.7\"\/>\r\n <!-- swinging door half -->\r\n <rect class=\"icon-door\" x=\"8.5\" y=\"13.5\" width=\"3.5\" height=\"7.5\" rx=\"0.5\" fill=\"#4f52d8\"\/>\r\n <!-- knob -->\r\n <circle cx=\"14\" cy=\"17.5\" r=\"0.7\" fill=\"#a5a8f8\"\/>\r\n <\/symbol>\r\n\r\n <!-- BUILDING \u2014 windows light up -->\r\n <symbol id=\"ico-building\" viewBox=\"0 0 24 24\">\r\n <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"1.5\" fill=\"#a5a8f8\" opacity=\"0.82\"\/>\r\n <rect x=\"2\" y=\"20\" width=\"20\" height=\"2\" rx=\"0.5\" fill=\"#6366f1\"\/>\r\n <rect class=\"icon-win1\" x=\"7\" y=\"5\" width=\"3.5\" height=\"3\" rx=\"0.5\" fill=\"#6366f1\"\/>\r\n <rect class=\"icon-win2\" x=\"13.5\" y=\"5\" width=\"3.5\" height=\"3\" rx=\"0.5\" fill=\"#6366f1\"\/>\r\n <rect class=\"icon-win3\" x=\"7\" y=\"11\" width=\"3.5\" height=\"3\" rx=\"0.5\" fill=\"#6366f1\"\/>\r\n <rect class=\"icon-win4\" x=\"13.5\" y=\"11\" width=\"3.5\" height=\"3\" rx=\"0.5\" fill=\"#6366f1\"\/>\r\n <rect x=\"9.5\" y=\"16\" width=\"5\" height=\"4\" rx=\"0.5\" fill=\"#6366f1\" opacity=\"0.55\"\/>\r\n <\/symbol>\r\n\r\n <!-- LIGHTNING BOLT -->\r\n <symbol id=\"ico-bolt\" viewBox=\"0 0 24 24\">\r\n <path class=\"icon-bolt\" fill=\"#facc15\" d=\"M13 2L4.5 13.5H11L10 22L20.5 10H14L13 2Z\"\/>\r\n <\/symbol>\r\n\r\n <!-- ROBOT \u2014 eyes blink, antenna beeps -->\r\n <symbol id=\"ico-robot\" viewBox=\"0 0 24 24\">\r\n <!-- antenna -->\r\n <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\" stroke=\"#6366f1\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <circle class=\"icon-antenna\" cx=\"12\" cy=\"2\" r=\"1.5\" fill=\"#6366f1\"\/>\r\n <!-- body -->\r\n <rect x=\"4\" y=\"7\" width=\"16\" height=\"13\" rx=\"3\" fill=\"#a5a8f8\" opacity=\"0.88\"\/>\r\n <!-- arms -->\r\n <rect x=\"1.5\" y=\"11\" width=\"2.5\" height=\"5\" rx=\"1\" fill=\"#7878a0\"\/>\r\n <rect x=\"20\" y=\"11\" width=\"2.5\" height=\"5\" rx=\"1\" fill=\"#7878a0\"\/>\r\n <!-- eyes -->\r\n <ellipse class=\"icon-eye-l\" cx=\"9.5\" cy=\"13\" rx=\"2.2\" ry=\"2.2\" fill=\"#6366f1\"\/>\r\n <ellipse class=\"icon-eye-r\" cx=\"14.5\" cy=\"13\" rx=\"2.2\" ry=\"2.2\" fill=\"#6366f1\"\/>\r\n <ellipse cx=\"9.5\" cy=\"13\" rx=\"0.9\" ry=\"0.9\" fill=\"white\"\/>\r\n <ellipse cx=\"14.5\" cy=\"13\" rx=\"0.9\" ry=\"0.9\" fill=\"white\"\/>\r\n <!-- smile -->\r\n <path d=\"M9 17.5 Q12 19.8 15 17.5\" fill=\"none\" stroke=\"#6366f1\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <\/symbol>\r\n\r\n <!-- CAMERA \/ PHOTO -->\r\n <symbol id=\"ico-photo\" viewBox=\"0 0 24 24\">\r\n <g class=\"icon-photo-group\">\r\n <rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\" fill=\"#a5a8f8\" opacity=\"0.85\"\/>\r\n <path d=\"M9 7 L10.5 4 H13.5 L15 7\" fill=\"#6366f1\"\/>\r\n <circle class=\"icon-lens-outer\" cx=\"12\" cy=\"13.5\" r=\"3.8\" fill=\"none\" stroke=\"#6366f1\" stroke-width=\"2\"\/>\r\n <circle cx=\"12\" cy=\"13.5\" r=\"1.8\" fill=\"#6366f1\"\/>\r\n <circle cx=\"18\" cy=\"10\" r=\"1\" fill=\"#6366f1\"\/>\r\n <\/g>\r\n <\/symbol>\r\n\r\n <!-- GLOBE -->\r\n <symbol id=\"ico-globe\" viewBox=\"0 0 24 24\">\r\n <g class=\"icon-globe-group\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"#a5a8f8\" stroke-width=\"1.5\"\/>\r\n <ellipse cx=\"12\" cy=\"12\" rx=\"4\" ry=\"9\" fill=\"none\" stroke=\"#6366f1\" stroke-width=\"1.2\"\/>\r\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" stroke=\"#a5a8f8\" stroke-width=\"1.2\" opacity=\"0.5\"\/>\r\n <line x1=\"4.5\" y1=\"7\" x2=\"19.5\" y2=\"7\" stroke=\"#a5a8f8\" stroke-width=\"1\" opacity=\"0.3\"\/>\r\n <line x1=\"4.5\" y1=\"17\" x2=\"19.5\" y2=\"17\" stroke=\"#a5a8f8\" stroke-width=\"1\" opacity=\"0.3\"\/>\r\n <\/g>\r\n <\/symbol>\r\n\r\n <!-- STARS -->\r\n <symbol id=\"ico-stars\" viewBox=\"0 0 24 24\">\r\n <polygon class=\"icon-star1\" points=\"12,3 13.5,8.5 19,8.5 14.5,12 16,17.5 12,14 8,17.5 9.5,12 5,8.5 10.5,8.5\" fill=\"#facc15\"\/>\r\n <polygon class=\"icon-star2\" points=\"5,2 5.7,4.3 8.5,4.3 6.2,5.9 7,8.2 5,6.7 3,8.2 3.8,5.9 1.5,4.3 4.3,4.3\" fill=\"#facc15\" opacity=\"0.7\"\/>\r\n <polygon class=\"icon-star3\" points=\"19,2 19.7,4.3 22.5,4.3 20.2,5.9 21,8.2 19,6.7 17,8.2 17.8,5.9 15.5,4.3 18.3,4.3\" fill=\"#facc15\" opacity=\"0.7\"\/>\r\n <\/symbol>\r\n\r\n <!-- UPLOAD ARROW -->\r\n <symbol id=\"ico-upload\" viewBox=\"0 0 24 24\">\r\n <rect x=\"4\" y=\"17\" width=\"16\" height=\"2\" rx=\"1\" fill=\"#a5a8f8\" opacity=\"0.45\"\/>\r\n <rect x=\"4\" y=\"20\" width=\"16\" height=\"1.5\" rx=\"0.75\" fill=\"#a5a8f8\" opacity=\"0.25\"\/>\r\n <g class=\"icon-upload-arrow\">\r\n <rect x=\"11\" y=\"5\" width=\"2\" height=\"10\" rx=\"1\" fill=\"#a5a8f8\"\/>\r\n <polyline points=\"7,10 12,5 17,10\" fill=\"none\" stroke=\"#a5a8f8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/g>\r\n <\/symbol>\r\n\r\n <!-- LOCK -->\r\n <symbol id=\"ico-lock\" viewBox=\"0 0 24 24\">\r\n <rect x=\"5\" y=\"11\" width=\"14\" height=\"10\" rx=\"2\" fill=\"#34d399\" opacity=\"0.88\"\/>\r\n <g class=\"icon-shackle\">\r\n <path d=\"M8 11V8a4 4 0 1 1 8 0v3\" fill=\"none\" stroke=\"#34d399\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/>\r\n <\/g>\r\n <circle class=\"icon-keyhole\" cx=\"12\" cy=\"16\" r=\"1.8\" fill=\"white\" opacity=\"0.6\"\/>\r\n <\/symbol>\r\n\r\n <!-- CLOCK -->\r\n <symbol id=\"ico-clock\" viewBox=\"0 0 24 24\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"none\" stroke=\"#34d399\" stroke-width=\"1.5\" opacity=\"0.7\"\/>\r\n <line class=\"icon-min-hand\" x1=\"12\" y1=\"12\" x2=\"12\" y2=\"6.5\" stroke=\"#34d399\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <line class=\"icon-sec-hand\" x1=\"12\" y1=\"12\" x2=\"16\" y2=\"12\" stroke=\"#a5a8f8\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"12\" r=\"1.3\" fill=\"#34d399\"\/>\r\n <\/symbol>\r\n\r\n <!-- SUCCESS CHECK -->\r\n <symbol id=\"ico-success\" viewBox=\"0 0 24 24\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"rgba(52,211,153,0.12)\" stroke=\"#34d399\" stroke-width=\"1.5\"\/>\r\n <polyline class=\"icon-success-check\" points=\"7,12 10.5,15.5 17,9\" fill=\"none\" stroke=\"#34d399\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/symbol>\r\n\r\n<\/defs>\r\n<\/svg>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CONTENT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"form-wrapper\">\r\n\r\n <div class=\"form-header\">\r\n <div class=\"urgency-banner\">\r\n <span class=\"urgency-banner-dot\"><\/span>\r\n Nog <strong id=\"spotsLeft\">4<\/strong> gratis concepten beschikbaar deze week\r\n <\/div>\r\n\r\n <h1 class=\"form-title\">Jouw concurrent pakt<br>jouw klanten op Google<\/h1>\r\n <p class=\"form-subtitle\">Elke dag dat jij online onzichtbaar bent, verdient een ander jouw opdracht. Wij bouwen in 48 uur gratis een gepersonaliseerd concept voor jou. Geen verplichtingen, geen kosten.<\/p>\r\n\r\n <div class=\"loss-stat\">\r\n <div class=\"loss-number\">73%<\/div>\r\n <div class=\"loss-divider\"><\/div>\r\n <div class=\"loss-text\">van vakbedrijven verliest wekelijks aanvragen omdat hun website niet vindbaar of niet overtuigend genoeg is<\/div>\r\n <\/div>\r\n\r\n <div class=\"proof-strip\">\r\n <div class=\"proof-item\">\r\n <svg class=\"proof-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><use href=\"#ico-bolt\"\/><\/svg>\r\n Concept binnen 48 uur\r\n <\/div>\r\n <div class=\"proof-item\">\r\n <svg class=\"proof-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><use href=\"#ico-lock\"\/><\/svg>\r\n 100% gratis, nul verplichtingen\r\n <\/div>\r\n <div class=\"proof-item\">\r\n <svg class=\"proof-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\"><use href=\"#ico-stars\"\/><\/svg>\r\n Elk concept persoonlijk gebouwd\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"progress-bar-wrap\">\r\n <div class=\"progress-steps\" id=\"progressSteps\">\r\n <div class=\"step-item active\" data-step=\"1\"><div class=\"step-dot\">1<\/div><span class=\"step-label\">Bedrijf<\/span><\/div>\r\n <div class=\"step-item\" data-step=\"2\"><div class=\"step-dot\">2<\/div><span class=\"step-label\">Diensten<\/span><\/div>\r\n <div class=\"step-item\" data-step=\"3\"><div class=\"step-dot\">3<\/div><span class=\"step-label\">Stijl<\/span><\/div>\r\n <div class=\"step-item\" data-step=\"4\"><div class=\"step-dot\">4<\/div><span class=\"step-label\">Afronden<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-card\" id=\"formCard\">\r\n\r\n <!-- STAP 1 -->\r\n <div class=\"step-panel active\" id=\"step1\">\r\n <div class=\"step-heading\">Stap 1: Wie loopt er omzet mis?<\/div>\r\n <div class=\"step-desc\">Vul in wie je bent. Wij gaan direct aan de slag zodat jij stopt met klanten weggeven aan je concurrent.<\/div>\r\n <div class=\"field-group\">\r\n <div class=\"field-row\">\r\n <div class=\"field\">\r\n <label>Bedrijfsnaam <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" id=\"bedrijfsnaam\" placeholder=\"Bijv. De Vries Installatie BV\"\/>\r\n <span class=\"field-error\" id=\"err-bedrijfsnaam\">Vul je bedrijfsnaam in<\/span>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Wat voor bedrijf? <span class=\"req\">*<\/span><\/label>\r\n <div class=\"select-wrap\">\r\n <select id=\"bedrijfstype\">\r\n <option value=\"\">Selecteer type...<\/option>\r\n <option>Installatiebedrijf (airco \/ warmtepomp)<\/option>\r\n <option>Solar \/ zonnepanelen<\/option>\r\n <option>Aannemersbedrijf \/ bouw<\/option>\r\n <option>Horren \/ zonwering<\/option>\r\n <option>Maatwerk kasten \/ interieur<\/option>\r\n <option>Schildersbedrijf<\/option>\r\n <option>Loodgieter \/ sanitair<\/option>\r\n <option>Dakdekker<\/option>\r\n <option>Elektricien<\/option>\r\n <option>Anders<\/option>\r\n <\/select>\r\n <\/div>\r\n <span class=\"field-error\" id=\"err-bedrijfstype\">Selecteer een type<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field-row\">\r\n <div class=\"field\">\r\n <label>Werkgebied <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" id=\"werkgebied\" placeholder=\"Bijv. Utrecht en omgeving\"\/>\r\n <span class=\"field-error\" id=\"err-werkgebied\">Vul je werkgebied in<\/span>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Jaren actief<\/label>\r\n <div class=\"select-wrap\">\r\n <select id=\"jarenActief\">\r\n <option value=\"\">Selecteer...<\/option>\r\n <option>Minder dan 1 jaar<\/option>\r\n <option>1 \u2013 3 jaar<\/option>\r\n <option>3 \u2013 5 jaar<\/option>\r\n <option>5 \u2013 10 jaar<\/option>\r\n <option>Meer dan 10 jaar<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field\">\r\n <div class=\"toggle-field\">\r\n <div class=\"toggle-info\">\r\n <div class=\"toggle-title\">Heb je al een website?<\/div>\r\n <div class=\"toggle-sub\">Wij checken waarom hij nu geen klanten oplevert<\/div>\r\n <\/div>\r\n <label class=\"toggle-switch\">\r\n <input type=\"checkbox\" id=\"heeftWebsite\" onchange=\"toggleConditional('heeftWebsite','websiteUrl')\"\/>\r\n <span class=\"toggle-track\"><\/span>\r\n <\/label>\r\n <\/div>\r\n <div class=\"conditional\" id=\"websiteUrl\">\r\n <input type=\"url\" id=\"huidigeWebsite\" placeholder=\"https:\/\/jouwwebsite.nl\"\/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- STAP 2 -->\r\n <div class=\"step-panel\" id=\"step2\">\r\n <div class=\"step-heading\">Stap 2: Wat verdient jij aan elke klant?<\/div>\r\n <div class=\"step-desc\">Hoe concreter jij nu bent, hoe meer aanvragen jouw nieuwe website straks genereert. Dit is jouw kans.<\/div>\r\n <div class=\"field-group\">\r\n <div class=\"field\">\r\n <label>Jouw belangrijkste diensten <span class=\"req\">*<\/span><\/label>\r\n <textarea id=\"diensten\" placeholder=\"Bijv. Airco installatie, warmtepomp plaatsen, jaarlijks onderhoud, storingen verhelpen binnen 24u...\"><\/textarea>\r\n <span class=\"field-error\" id=\"err-diensten\">Beschrijf je diensten, dit is de kern van je website<\/span>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Wie zijn je klanten? <span class=\"req\">*<\/span><\/label>\r\n <div class=\"option-grid cols-3\">\r\n <div class=\"option-card\">\r\n <input type=\"radio\" name=\"klanttype\" id=\"kt1\" value=\"particulieren\"\/>\r\n <label class=\"option-label\" for=\"kt1\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-house\"\/><\/svg><\/span>Particulieren\r\n <\/label>\r\n <\/div>\r\n <div class=\"option-card\">\r\n <input type=\"radio\" name=\"klanttype\" id=\"kt2\" value=\"bedrijven\"\/>\r\n <label class=\"option-label\" for=\"kt2\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-building\"\/><\/svg><\/span>Bedrijven\r\n <\/label>\r\n <\/div>\r\n <div class=\"option-card\">\r\n <input type=\"radio\" name=\"klanttype\" id=\"kt3\" value=\"beide\"\/>\r\n <label class=\"option-label\" for=\"kt3\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-bolt\"\/><\/svg><\/span>Beide\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <span class=\"field-error\" id=\"err-klanttype\">Selecteer je doelgroep<\/span>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Waarom kiezen klanten voor jou en niet je concurrent? <span class=\"req\">*<\/span><\/label>\r\n <textarea id=\"onderscheidend\" placeholder=\"Bijv. Altijd vaste prijs, geen verrassingen achteraf. Binnen 24u ter plaatse. Al 12 jaar de specialist in de regio...\"><\/textarea>\r\n <span class=\"field-error\" id=\"err-onderscheidend\">Dit is je goudmijn. Zonder dit verlies je klanten aan goedkopere concurrenten<\/span>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Slogan of tagline <span class=\"opt\">(optioneel, maar dit is wat mensen onthouden)<\/span><\/label>\r\n <input type=\"text\" id=\"slogan\" placeholder=\"Bijv. Snel. Vakkundig. Altijd raak.\"\/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- STAP 3 -->\r\n <div class=\"step-panel\" id=\"step3\">\r\n <div class=\"step-heading\">Stap 3: Zo zorg jij dat ze blijven en niet wegklikken<\/div>\r\n <div class=\"step-desc\">Bedrijven met een professionele uitstraling krijgen gemiddeld 3x meer aanvragen. Geef ons wat we nodig hebben.<\/div>\r\n <div class=\"field-group\">\r\n <div class=\"field\">\r\n <label>Logo <span class=\"opt\">(optioneel, geen logo? Wij denken mee)<\/span><\/label>\r\n <div class=\"file-drop\" id=\"logoDrop\">\r\n <input type=\"file\" id=\"logoFile\" accept=\"image\/*,.svg,.pdf\" onchange=\"handleFile('logoFile','logoPreview')\"\/>\r\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\"><use href=\"#ico-upload\"\/><\/svg>\r\n <div class=\"file-text\"><strong>Klik of sleep je logo hier<\/strong><br><span style=\"font-size:11px\">PNG, SVG, JPG of PDF<\/span><\/div>\r\n <\/div>\r\n <div class=\"file-preview\" id=\"logoPreview\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field-row\">\r\n <div class=\"field\">\r\n <label>Huiskleuren <span class=\"opt\">(optioneel)<\/span><\/label>\r\n <input type=\"text\" id=\"kleuren\" placeholder=\"Bijv. donkerblauw + oranje\"\/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Gewenste stijl <span class=\"opt\">(optioneel)<\/span><\/label>\r\n <input type=\"text\" id=\"lettertypes\" placeholder=\"Bijv. strak, modern, stoer\"\/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Foto's van jouw werk <span class=\"req\">*<\/span><\/label>\r\n <div class=\"option-grid cols-2\" style=\"margin-bottom:10px\">\r\n <div class=\"option-card\">\r\n <input type=\"radio\" name=\"fotos\" id=\"f1\" value=\"eigen\" onchange=\"toggleFotoUpload()\"\/>\r\n <label class=\"option-label\" for=\"f1\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-photo\"\/><\/svg><\/span>Ik heb eigen foto's\r\n <\/label>\r\n <\/div>\r\n <div class=\"option-card\">\r\n <input type=\"radio\" name=\"fotos\" id=\"f2\" value=\"ai\" onchange=\"toggleFotoUpload()\"\/>\r\n <label class=\"option-label\" for=\"f2\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-robot\"\/><\/svg><\/span>AI-foto's (wij regelen dit)\r\n <\/label>\r\n <\/div>\r\n <div class=\"option-card\">\r\n <input type=\"radio\" name=\"fotos\" id=\"f3\" value=\"stock\" onchange=\"toggleFotoUpload()\"\/>\r\n <label class=\"option-label\" for=\"f3\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-globe\"\/><\/svg><\/span>Stock foto's\r\n <\/label>\r\n <\/div>\r\n <div class=\"option-card\">\r\n <input type=\"radio\" name=\"fotos\" id=\"f4\" value=\"combinatie\" onchange=\"toggleFotoUpload()\"\/>\r\n <label class=\"option-label\" for=\"f4\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-stars\"\/><\/svg><\/span>Mix (eigen + AI)\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <div class=\"conditional\" id=\"fotoUpload\">\r\n <div class=\"file-drop\" id=\"fotoDrop\">\r\n <input type=\"file\" id=\"fotoFileInput\" accept=\"image\/*\" multiple onchange=\"addFotos(this)\"\/>\r\n <div style=\"display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><use href=\"#ico-upload\"\/><\/svg>\r\n <div class=\"file-text\"><strong>Klik of sleep foto's hiernaartoe<\/strong><br><span style=\"font-size:11px\">Onbeperkt aantal \u00b7 JPG, PNG, WEBP<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"file-preview\" id=\"fotoPreview\"><\/div>\r\n <div id=\"fotoCount\" style=\"font-size:11px;color:var(--clr-muted);margin-top:6px;display:none\"><\/div>\r\n <\/div>\r\n <div class=\"info-tip\" id=\"aiTip\" style=\"display:none\">\r\n <svg class=\"tip-icon\" viewBox=\"0 0 24 24\"><use href=\"#ico-robot\"\/><\/svg>\r\n <span>Onze AI genereert hyperrealistische beelden passend bij jouw branche, niet van echte foto's te onderscheiden.<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Websites die jij mooi vindt <span class=\"opt\">(optioneel, max. 3 \u2014 geeft ons richting)<\/span><\/label>\r\n <div class=\"url-list\">\r\n <div class=\"url-row\"><span class=\"url-num\">1<\/span><input type=\"url\" placeholder=\"https:\/\/...\"\/><\/div>\r\n <div class=\"url-row\"><span class=\"url-num\">2<\/span><input type=\"url\" placeholder=\"https:\/\/...\"\/><\/div>\r\n <div class=\"url-row\"><span class=\"url-num\">3<\/span><input type=\"url\" placeholder=\"https:\/\/...\"\/><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field\">\r\n <div class=\"toggle-field\">\r\n <div class=\"toggle-info\">\r\n <div class=\"toggle-title\">Heb je Google reviews?<\/div>\r\n <div class=\"toggle-sub\">Bedrijven met zichtbare reviews converteren 68% beter. Wij plaatsen ze op de juiste plek.<\/div>\r\n <\/div>\r\n <label class=\"toggle-switch\">\r\n <input type=\"checkbox\" id=\"heeftReviews\" onchange=\"toggleConditional('heeftReviews','reviewsUrl')\"\/>\r\n <span class=\"toggle-track\"><\/span>\r\n <\/label>\r\n <\/div>\r\n <div class=\"conditional\" id=\"reviewsUrl\">\r\n <input type=\"url\" id=\"googleReviews\" placeholder=\"Link naar je Google Business profiel\"\/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- STAP 4 -->\r\n <div class=\"step-panel\" id=\"step4\">\r\n <div class=\"step-heading\">Stap 4: Bijna klaar, nog 60 seconden<\/div>\r\n <div class=\"step-desc\">Terwijl jij dit leest, zoekt iemand in jouw regio op Google naar een vakman. Wie vindt die persoon? Jij of je concurrent?<\/div>\r\n <div class=\"field-group\">\r\n <div class=\"field\">\r\n <label>Hoe wil jij nieuwe klanten ontvangen? <span class=\"req\">*<\/span><\/label>\r\n <div class=\"option-grid cols-2\">\r\n <div class=\"option-card\">\r\n <input type=\"checkbox\" id=\"cta1\" value=\"bellen\"\/>\r\n <label class=\"option-label\" for=\"cta1\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-phone\"\/><\/svg><\/span>Bellen\r\n <\/label>\r\n <\/div>\r\n <div class=\"option-card\">\r\n <input type=\"checkbox\" id=\"cta2\" value=\"mailen\"\/>\r\n <label class=\"option-label\" for=\"cta2\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-mail\"\/><\/svg><\/span>E-mail\r\n <\/label>\r\n <\/div>\r\n <div class=\"option-card\">\r\n <input type=\"checkbox\" id=\"cta3\" value=\"offerte\"\/>\r\n <label class=\"option-label\" for=\"cta3\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-clipboard\"\/><\/svg><\/span>Offerte aanvragen\r\n <\/label>\r\n <\/div>\r\n <div class=\"option-card\">\r\n <input type=\"checkbox\" id=\"cta4\" value=\"whatsapp\"\/>\r\n <label class=\"option-label\" for=\"cta4\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-whatsapp\"\/><\/svg><\/span>WhatsApp\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <span class=\"field-error\" id=\"err-cta\">Kies minimaal \u00e9\u00e9n optie<\/span>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>KVK-nummer <span class=\"opt\">(optioneel, wekt direct vertrouwen bij twijfelende bezoekers)<\/span><\/label>\r\n <input type=\"text\" id=\"kvk\" placeholder=\"Bijv. 12345678\" maxlength=\"8\"\/>\r\n <\/div>\r\n <div style=\"height:1px;background:var(--clr-border);margin:4px 0\"><\/div>\r\n <div class=\"field\">\r\n <label>Hoe nemen wij contact met jou op? <span class=\"req\">*<\/span><\/label>\r\n <div class=\"option-grid cols-2\">\r\n <div class=\"option-card\">\r\n <input type=\"radio\" name=\"contactvoorkeur\" id=\"cv1\" value=\"telefonisch\"\/>\r\n <label class=\"option-label\" for=\"cv1\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-phone\"\/><\/svg><\/span>Telefonisch\r\n <\/label>\r\n <\/div>\r\n <div class=\"option-card\">\r\n <input type=\"radio\" name=\"contactvoorkeur\" id=\"cv2\" value=\"mail\"\/>\r\n <label class=\"option-label\" for=\"cv2\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-mail\"\/><\/svg><\/span>Per e-mail\r\n <\/label>\r\n <\/div>\r\n <div class=\"option-card\">\r\n <input type=\"radio\" name=\"contactvoorkeur\" id=\"cv3\" value=\"whatsapp\"\/>\r\n <label class=\"option-label\" for=\"cv3\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-whatsapp\"\/><\/svg><\/span>Via WhatsApp\r\n <\/label>\r\n <\/div>\r\n <div class=\"option-card\">\r\n <input type=\"radio\" name=\"contactvoorkeur\" id=\"cv4\" value=\"maakt niet uit\"\/>\r\n <label class=\"option-label\" for=\"cv4\">\r\n <span class=\"option-icon\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"><use href=\"#ico-stars\"\/><\/svg><\/span>Maakt niet uit\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <span class=\"field-error\" id=\"err-contactvoorkeur\">Kies jouw voorkeur zodat wij je goed kunnen bereiken<\/span>\r\n <\/div>\r\n <div style=\"height:1px;background:var(--clr-border);margin:4px 0\"><\/div>\r\n <div class=\"field-row\">\r\n <div class=\"field\">\r\n <label>Voornaam <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" id=\"voornaam\" placeholder=\"Jan\"\/>\r\n <span class=\"field-error\" id=\"err-voornaam\">Vul je naam in<\/span>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Achternaam <span class=\"req\">*<\/span><\/label>\r\n <input type=\"text\" id=\"achternaam\" placeholder=\"de Vries\"\/>\r\n <span class=\"field-error\" id=\"err-achternaam\">Vul je achternaam in<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"field-row\">\r\n <div class=\"field\">\r\n <label>E-mailadres <span class=\"req\">*<\/span><\/label>\r\n <input type=\"email\" id=\"email\" placeholder=\"jan@bedrijf.nl\"\/>\r\n <span class=\"field-error\" id=\"err-email\">Vul een geldig e-mailadres in<\/span>\r\n <\/div>\r\n <div class=\"field\">\r\n <label>Telefoonnummer <span class=\"req\">*<\/span><\/label>\r\n <input type=\"tel\" id=\"telefoon\" placeholder=\"06 12 34 56 78\"\/>\r\n <span class=\"field-error\" id=\"err-telefoon\">Vul je telefoonnummer in<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-tip\">\r\n <svg class=\"tip-icon\" viewBox=\"0 0 24 24\"><use href=\"#ico-lock\"\/><\/svg>\r\n <span>Jouw gegevens zijn veilig. Wij bellen of mailen je alleen om het concept te bespreken. Geen spam, geen verkooppraatjes.<\/span>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <div class=\"consent-wrap\">\r\n <label class=\"consent-label\" for=\"avgConsent\">\r\n <input type=\"checkbox\" id=\"avgConsent\"\/>\r\n <span class=\"consent-box\"><\/span>\r\n <span class=\"consent-text\">Ik ga akkoord met het <a href=\"https:\/\/progrezzagency.nl\/privacybeleid\" target=\"_blank\" rel=\"noopener\">privacybeleid<\/a> en de <a href=\"https:\/\/progrezzagency.nl\/algemene-voorwaarden\" target=\"_blank\" rel=\"noopener\">algemene voorwaarden<\/a> en geef toestemming om contact met mij op te nemen over mijn aanvraag.<\/span>\r\n <\/label>\r\n <\/div>\r\n <span class=\"field-error\" id=\"err-avg\">Je moet akkoord gaan om verder te gaan<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div><!-- \/formCard -->\r\n\r\n <!-- SUCCESS -->\r\n <div class=\"form-card success-screen\" id=\"successScreen\">\r\n <div class=\"success-ring\">\r\n <svg width=\"44\" height=\"44\" viewBox=\"0 0 24 24\"><use href=\"#ico-success\"\/><\/svg>\r\n <\/div>\r\n <div class=\"success-title\">Geregeld. Jouw concept is onderweg.<\/div>\r\n <p class=\"success-sub\">Binnen 48 uur ligt een gepersonaliseerd concept van jouw nieuwe website in je inbox. Klaar om meer aanvragen binnen te halen dan ooit.<\/p>\r\n <div class=\"success-badge\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"><use href=\"#ico-clock\"\/><\/svg>\r\n Concept verwacht binnen 48 uur\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- NAV -->\r\n <div class=\"form-nav\" id=\"formNav\">\r\n <button class=\"btn btn-ghost\" id=\"btnBack\" onclick=\"prevStep()\" style=\"display:none\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\r\n Terug\r\n <\/button>\r\n <button class=\"btn btn-primary\" id=\"btnNext\" onclick=\"nextStep()\">\r\n Volgende stap\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n let currentStep = 1;\r\n const totalSteps = 4;\r\n\r\n function updateProgress() {\r\n document.querySelectorAll('.step-item').forEach(item => {\r\n const s = parseInt(item.dataset.step);\r\n const dot = item.querySelector('.step-dot');\r\n item.classList.remove('active','completed');\r\n if (s === currentStep) { item.classList.add('active'); dot.textContent = s; }\r\n else if (s < currentStep){ item.classList.add('completed'); dot.innerHTML = '\u2713'; }\r\n else { dot.textContent = s; }\r\n });\r\n document.getElementById('btnBack').style.display = currentStep > 1 ? 'inline-flex' : 'none';\r\n const arrow = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"width:16px;height:16px\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>`;\r\n document.getElementById('btnNext').innerHTML = currentStep === totalSteps\r\n ? `Gratis concept aanvragen ${arrow}`\r\n : `Volgende stap ${arrow}`;\r\n }\r\n\r\n function validateStep(step) {\r\n let valid = true;\r\n const clear = ids => ids.forEach(id => { document.getElementById(id)?.classList.remove('error'); document.getElementById('err-'+id)?.classList.remove('visible'); });\r\n const fail = id => { document.getElementById(id)?.classList.add('error'); document.getElementById('err-'+id)?.classList.add('visible'); valid = false; };\r\n\r\n if (step === 1) {\r\n clear(['bedrijfsnaam','bedrijfstype','werkgebied']);\r\n if (!document.getElementById('bedrijfsnaam').value.trim()) fail('bedrijfsnaam');\r\n if (!document.getElementById('bedrijfstype').value) fail('bedrijfstype');\r\n if (!document.getElementById('werkgebied').value.trim()) fail('werkgebied');\r\n }\r\n if (step === 2) {\r\n clear(['diensten','onderscheidend']);\r\n if (!document.getElementById('diensten').value.trim()) fail('diensten');\r\n if (!document.getElementById('onderscheidend').value.trim()) fail('onderscheidend');\r\n const kt = document.querySelector('input[name=\"klanttype\"]:checked');\r\n const ke = document.getElementById('err-klanttype');\r\n if (!kt) { ke.classList.add('visible'); valid = false; } else ke.classList.remove('visible');\r\n }\r\n if (step === 4) {\r\n clear(['voornaam','achternaam','email','telefoon']);\r\n if (!document.getElementById('voornaam').value.trim()) fail('voornaam');\r\n if (!document.getElementById('achternaam').value.trim()) fail('achternaam');\r\n const em = document.getElementById('email').value.trim();\r\n if (!em || !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(em)) fail('email');\r\n if (!document.getElementById('telefoon').value.trim()) fail('telefoon');\r\n const ctas = document.querySelectorAll('#step4 input[type=\"checkbox\"]:checked');\r\n const ce = document.getElementById('err-cta');\r\n if (!ctas.length) { ce.classList.add('visible'); valid = false; } else ce.classList.remove('visible');\r\n const cv = document.querySelector('input[name=\"contactvoorkeur\"]:checked');\r\n const cve = document.getElementById('err-contactvoorkeur');\r\n if (!cv) { cve.classList.add('visible'); valid = false; } else cve.classList.remove('visible');\r\n\r\n const avg = document.getElementById('avgConsent');\r\n const avge = document.getElementById('err-avg');\r\n if (!avg.checked) { avge.classList.add('visible'); valid = false; } else avge.classList.remove('visible');\r\n }\r\n return valid;\r\n }\r\n\r\n function nextStep() {\r\n if (!validateStep(currentStep)) return;\r\n if (currentStep < totalSteps) {\r\n document.getElementById('step'+currentStep).classList.remove('active');\r\n currentStep++;\r\n document.getElementById('step'+currentStep).classList.add('active');\r\n updateProgress();\r\n window.scrollTo({top:0,behavior:'smooth'});\r\n } else { submitForm(); }\r\n }\r\n\r\n function prevStep() {\r\n if (currentStep > 1) {\r\n document.getElementById('step'+currentStep).classList.remove('active');\r\n currentStep--;\r\n document.getElementById('step'+currentStep).classList.add('active');\r\n updateProgress();\r\n window.scrollTo({top:0,behavior:'smooth'});\r\n }\r\n }\r\n\r\n \/\/ \u2500\u2500 CONFIG \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const STATICFORMS_KEY = 'JOUW_STATICFORMS_ACCESS_KEY'; \/\/ vervang met jouw key van staticforms.xyz\r\n const WEBHOOK_URL = ''; \/\/ optioneel: jouw webhook URL (bijv. n8n, Make, Zapier)\r\n \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\r\n \/\/ Unlimited foto uploads \u2014 additive (elke keer meer toevoegen)\r\n let allFotos = [];\r\n\r\n function addFotos(input) {\r\n const newFiles = Array.from(input.files);\r\n newFiles.forEach(f => { if (!allFotos.find(x => x.name === f.name && x.size === f.size)) allFotos.push(f); });\r\n renderFotoPreview();\r\n input.value = ''; \/\/ reset input zodat dezelfde foto opnieuw gekozen kan worden\r\n }\r\n\r\n function renderFotoPreview() {\r\n const preview = document.getElementById('fotoPreview');\r\n const count = document.getElementById('fotoCount');\r\n preview.innerHTML = '';\r\n allFotos.forEach((file, i) => {\r\n const tag = document.createElement('div');\r\n tag.className = 'file-tag';\r\n tag.innerHTML = `<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\"><use href=\"#ico-upload\"\/><\/svg> ${file.name} <button type=\"button\" onclick=\"removeFoto(${i})\">\u00d7<\/button>`;\r\n preview.appendChild(tag);\r\n });\r\n if (allFotos.length > 0) {\r\n count.style.display = 'block';\r\n count.textContent = `${allFotos.length} foto${allFotos.length > 1 ? \"'s\" : ''} geselecteerd`;\r\n } else {\r\n count.style.display = 'none';\r\n }\r\n }\r\n\r\n function removeFoto(index) {\r\n allFotos.splice(index, 1);\r\n renderFotoPreview();\r\n }\r\n\r\n \/\/ Drag-drop voor fotozone\r\n const fotoDrop = document.getElementById('fotoDrop');\r\n if (fotoDrop) {\r\n fotoDrop.addEventListener('dragover', e => { e.preventDefault(); fotoDrop.classList.add('drag-over'); });\r\n fotoDrop.addEventListener('dragleave', () => fotoDrop.classList.remove('drag-over'));\r\n fotoDrop.addEventListener('drop', e => {\r\n e.preventDefault(); fotoDrop.classList.remove('drag-over');\r\n const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image\/'));\r\n files.forEach(f => { if (!allFotos.find(x => x.name === f.name && x.size === f.size)) allFotos.push(f); });\r\n renderFotoPreview();\r\n });\r\n }\r\n\r\n async function submitForm() {\r\n const btn = document.getElementById('btnNext');\r\n btn.disabled = true;\r\n btn.innerHTML = `<svg style=\"width:16px;height:16px;animation:secSpin 1s linear infinite\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"\/><\/svg> Versturen...`;\r\n\r\n try {\r\n \/\/ \u2500\u2500 Bouw FormData voor Staticforms \u2500\u2500\r\n const fd = new FormData();\r\n fd.append('accessKey', STATICFORMS_KEY);\r\n fd.append('subject', 'Nieuwe website aanvraag: ' + (document.getElementById('bedrijfsnaam').value || ''));\r\n fd.append('replyTo', document.getElementById('email').value);\r\n\r\n \/\/ Alle tekstvelden\r\n const fields = {\r\n 'Bedrijfsnaam': 'bedrijfsnaam',\r\n 'Bedrijfstype': 'bedrijfstype',\r\n 'Werkgebied': 'werkgebied',\r\n 'Jaren actief': 'jarenActief',\r\n 'Huidige website': 'huidigeWebsite',\r\n 'Diensten': 'diensten',\r\n 'Klanttype': null, \/\/ radio\r\n 'Onderscheidend': 'onderscheidend',\r\n 'Slogan': 'slogan',\r\n 'Kleuren': 'kleuren',\r\n 'Stijl': 'lettertypes',\r\n 'Google reviews': 'googleReviews',\r\n 'KVK': 'kvk',\r\n 'Voornaam': 'voornaam',\r\n 'Achternaam': 'achternaam',\r\n 'Email': 'email',\r\n 'Telefoon': 'telefoon',\r\n };\r\n\r\n Object.entries(fields).forEach(([label, id]) => {\r\n if (!id) return;\r\n const el = document.getElementById(id);\r\n if (el && el.value) fd.append(label, el.value);\r\n });\r\n\r\n \/\/ Radio\/checkbox waarden\r\n const kt = document.querySelector('input[name=\"klanttype\"]:checked');\r\n const cta = [...document.querySelectorAll('#step4 input[type=\"checkbox\"]:checked')].map(c => c.value).join(', ');\r\n const cv = document.querySelector('input[name=\"contactvoorkeur\"]:checked');\r\n const foto = document.querySelector('input[name=\"fotos\"]:checked');\r\n\r\n if (kt) fd.append('Klanttype', kt.value);\r\n if (cta) fd.append('Aanvraag ontvangen', cta);\r\n if (cv) fd.append('Contactvoorkeur', cv.value);\r\n if (foto) fd.append('Fotokeuze', foto.value);\r\n\r\n \/\/ Foto bestanden meesturen (Staticforms ondersteunt file uploads)\r\n allFotos.forEach((f, i) => fd.append(`Foto_${i + 1}`, f, f.name));\r\n\r\n \/\/ Logo meesturen indien aanwezig\r\n const logoInput = document.getElementById('logoFile');\r\n if (logoInput && logoInput.files[0]) fd.append('Logo', logoInput.files[0], logoInput.files[0].name);\r\n\r\n \/\/ \u2500\u2500 Verstuur naar Staticforms \u2500\u2500\r\n const sfRes = await fetch('https:\/\/api.staticforms.xyz\/submit', {\r\n method: 'POST',\r\n body: fd,\r\n });\r\n\r\n if (!sfRes.ok) throw new Error('Staticforms fout: ' + sfRes.status);\r\n\r\n \/\/ \u2500\u2500 Optioneel: webhook \u2500\u2500\r\n if (WEBHOOK_URL) {\r\n const payload = {};\r\n fd.forEach((val, key) => { if (typeof val === 'string') payload[key] = val; });\r\n payload.aantalFotos = allFotos.length;\r\n fetch(WEBHOOK_URL, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(payload),\r\n }).catch(() => {}); \/\/ webhook fout mag formulier niet blokkeren\r\n }\r\n\r\n \/\/ \u2500\u2500 Toon successkerm \u2500\u2500\r\n document.getElementById('formCard').style.display = 'none';\r\n document.getElementById('formNav').style.display = 'none';\r\n document.getElementById('progressSteps').closest('.progress-bar-wrap').style.display = 'none';\r\n document.getElementById('successScreen').classList.add('active');\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n\r\n } catch (err) {\r\n console.error(err);\r\n btn.disabled = false;\r\n btn.innerHTML = `Gratis concept aanvragen <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"width:16px;height:16px\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>`;\r\n\r\n \/\/ Toon inline foutmelding\r\n let errEl = document.getElementById('submit-error');\r\n if (!errEl) {\r\n errEl = document.createElement('p');\r\n errEl.id = 'submit-error';\r\n errEl.style.cssText = 'color:#f87171;font-size:13px;text-align:center;margin-top:8px';\r\n document.getElementById('formNav').after(errEl);\r\n }\r\n errEl.textContent = 'Er ging iets mis bij het versturen. Probeer het opnieuw of mail ons direct.';\r\n }\r\n }\r\n\r\n function submitForm() { _submitForm(); } \/\/ alias zodat nextStep() submitForm() blijft aanroepen\r\n async function _submitForm() {\r\n const btn = document.getElementById('btnNext');\r\n btn.disabled = true;\r\n btn.innerHTML = `<svg style=\"width:16px;height:16px;animation:secSpin 1s linear infinite\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"\/><\/svg> Versturen...`;\r\n\r\n try {\r\n const fd = new FormData();\r\n fd.append('accessKey', STATICFORMS_KEY);\r\n fd.append('subject', 'Nieuwe website aanvraag: ' + (document.getElementById('bedrijfsnaam').value || ''));\r\n fd.append('replyTo', document.getElementById('email').value);\r\n\r\n const txtFields = { 'Bedrijfsnaam':'bedrijfsnaam','Bedrijfstype':'bedrijfstype','Werkgebied':'werkgebied','Jaren actief':'jarenActief','Huidige website':'huidigeWebsite','Diensten':'diensten','Onderscheidend':'onderscheidend','Slogan':'slogan','Kleuren':'kleuren','Stijl':'lettertypes','Google reviews':'googleReviews','KVK':'kvk','Voornaam':'voornaam','Achternaam':'achternaam','Email':'email','Telefoon':'telefoon' };\r\n Object.entries(txtFields).forEach(([label, id]) => { const el = document.getElementById(id); if (el?.value) fd.append(label, el.value); });\r\n\r\n const kt = document.querySelector('input[name=\"klanttype\"]:checked');\r\n const cta = [...document.querySelectorAll('#step4 input[type=\"checkbox\"]:checked')].map(c => c.value).join(', ');\r\n const cv = document.querySelector('input[name=\"contactvoorkeur\"]:checked');\r\n const foto = document.querySelector('input[name=\"fotos\"]:checked');\r\n if (kt) fd.append('Klanttype', kt.value);\r\n if (cta) fd.append('Aanvraag ontvangen via', cta);\r\n if (cv) fd.append('Contactvoorkeur', cv.value);\r\n if (foto) fd.append('Fotokeuze', foto.value);\r\n\r\n allFotos.forEach((f, i) => fd.append(`Foto_${i+1}`, f, f.name));\r\n const logoInput = document.getElementById('logoFile');\r\n if (logoInput?.files[0]) fd.append('Logo', logoInput.files[0], logoInput.files[0].name);\r\n\r\n const sfRes = await fetch('https:\/\/api.staticforms.xyz\/submit', { method:'POST', body:fd });\r\n if (!sfRes.ok) throw new Error('sf-' + sfRes.status);\r\n\r\n if (WEBHOOK_URL) {\r\n const payload = { aantalFotos: allFotos.length };\r\n fd.forEach((v, k) => { if (typeof v === 'string') payload[k] = v; });\r\n fetch(WEBHOOK_URL, { method:'POST', headers:{'Content-Type':'application\/json'}, body:JSON.stringify(payload) }).catch(()=>{});\r\n }\r\n\r\n document.getElementById('formCard').style.display = 'none';\r\n document.getElementById('formNav').style.display = 'none';\r\n document.getElementById('progressSteps').closest('.progress-bar-wrap').style.display = 'none';\r\n document.getElementById('successScreen').classList.add('active');\r\n window.scrollTo({ top:0, behavior:'smooth' });\r\n\r\n } catch(err) {\r\n console.error(err);\r\n btn.disabled = false;\r\n btn.innerHTML = `Gratis concept aanvragen <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" style=\"width:16px;height:16px\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>`;\r\n let errEl = document.getElementById('submit-error');\r\n if (!errEl) { errEl = document.createElement('p'); errEl.id='submit-error'; errEl.style.cssText='color:#f87171;font-size:13px;text-align:center;margin-top:10px'; document.getElementById('formNav').insertAdjacentElement('afterend', errEl); }\r\n errEl.textContent = 'Er ging iets mis bij het versturen. Probeer het opnieuw of mail ons direct.';\r\n }\r\n }\r\n\r\n function toggleConditional(toggleId, targetId) {\r\n const el = document.getElementById(targetId);\r\n document.getElementById(toggleId).checked ? el.classList.add('visible') : el.classList.remove('visible');\r\n }\r\n\r\n function toggleFotoUpload() {\r\n const val = document.querySelector('input[name=\"fotos\"]:checked')?.value;\r\n const up = document.getElementById('fotoUpload');\r\n const aiTip = document.getElementById('aiTip');\r\n up.classList.remove('visible');\r\n aiTip.style.display = 'none';\r\n if (val === 'eigen' || val === 'combinatie') up.classList.add('visible');\r\n if (val === 'ai' || val === 'combinatie') aiTip.style.display = 'flex';\r\n }\r\n\r\n \/\/ Logo preview\r\n function handleFile(inputId, previewId) {\r\n const input = document.getElementById(inputId);\r\n const preview = document.getElementById(previewId);\r\n if (!preview) return;\r\n preview.innerHTML = '';\r\n Array.from(input.files).forEach(file => {\r\n const tag = document.createElement('div');\r\n tag.className = 'file-tag';\r\n tag.innerHTML = `<svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\"><use href=\"#ico-upload\"\/><\/svg> ${file.name} <button onclick=\"this.parentElement.remove()\" type=\"button\">\u00d7<\/button>`;\r\n preview.appendChild(tag);\r\n });\r\n }\r\n\r\n \/\/ Drag-drop voor logo drop zone\r\n document.querySelectorAll('.file-drop').forEach(d => {\r\n if (d.id === 'fotoDrop') return; \/\/ fotoDrop heeft eigen listener hierboven\r\n d.addEventListener('dragover', e => { e.preventDefault(); d.classList.add('drag-over'); });\r\n d.addEventListener('dragleave', () => d.classList.remove('drag-over'));\r\n d.addEventListener('drop', () => d.classList.remove('drag-over'));\r\n });\r\n\r\n updateProgress();\r\n\r\n \/\/ Scarcity counter drifts down after a delay to feel live\r\n setTimeout(() => {\r\n const el = document.getElementById('spotsLeft');\r\n if (el) { el.textContent = '3'; el.style.color = '#ef4444'; }\r\n }, 22000);\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>Gratis Website Concept | Progrezz AI Nog 4 gratis concepten beschikbaar deze week Jouw concurrent paktjouw klanten op Google Elke dag dat jij online onzichtbaar bent, verdient een ander jouw opdracht. Wij bouwen in 48 uur gratis een gepersonaliseerd concept voor jou. Geen verplichtingen, geen kosten. 73% van vakbedrijven verliest wekelijks aanvragen omdat hun website […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vraagjewebsiteconceptaan.progrezzagency.nl\/index.php?rest_route=\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vraagjewebsiteconceptaan.progrezzagency.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vraagjewebsiteconceptaan.progrezzagency.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vraagjewebsiteconceptaan.progrezzagency.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vraagjewebsiteconceptaan.progrezzagency.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5"}],"version-history":[{"count":5,"href":"https:\/\/vraagjewebsiteconceptaan.progrezzagency.nl\/index.php?rest_route=\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/vraagjewebsiteconceptaan.progrezzagency.nl\/index.php?rest_route=\/wp\/v2\/pages\/5\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/vraagjewebsiteconceptaan.progrezzagency.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}