WoningKijken.nl \u2014 AI-gedreven aankoopcoach<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --navy: #08152e;\n --navy-2: #0d1e42;\n --blue: #1a4bbd;\n --sky: #2db9e8;\n --sky-light: #7dd8f5;\n --white: #ffffff;\n --off-white: #ddeeff;\n --muted: #8faad4;\n --card: #132046;\n --card-2: #1a2b55;\n --border: #253d72;\n --border-2: #1e3360;\n --green: #22c97a;\n --amber: #f5a623;\n --red: #ff5c5c;\n --radius: 14px;\n --radius-lg: 22px;\n}\n\nhtml { scroll-behavior: smooth; }\nbody { font-family: 'Outfit', sans-serif; background: var(--navy); color: var(--white); overflow-x: hidden; line-height: 1.6; }\na { text-decoration: none; }\n\n\/* NAV *\/\nnav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 200;\n display: flex; align-items: center; justify-content: space-between;\n padding: 0 48px; height: 64px;\n background: rgba(8,21,46,0.93); backdrop-filter: blur(24px);\n border-bottom: 1px solid var(--border-2);\n}\n.nav-logo { font-size: 1.2rem; font-weight: 800; color: var(--white) !important; text-decoration: none !important; -webkit-text-decoration: none !important; letter-spacing: -0.01em; }\n.nav-logo, .nav-logo:hover, .nav-logo:visited, .nav-logo:active { text-decoration: none !important; -webkit-text-decoration: none !important; color: var(--white) !important; }\n.nav-logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg,var(--blue),var(--sky)); border-radius: 9px; display:flex; align-items:center; justify-content:center; font-size:1rem; }\n.nav-links { display: flex; gap: 28px; list-style: none; }\n.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color .2s; }\n.nav-links a:hover { color: var(--white); }\n.nav-cta { background: linear-gradient(135deg,var(--blue),var(--sky)); color: var(--white); border: none; padding: 9px 22px; border-radius: 50px; font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: 'Outfit',sans-serif; box-shadow: 0 4px 16px rgba(45,185,232,.35); transition: opacity .2s,transform .2s; }\n.nav-cta:hover { opacity:.9; transform:translateY(-1px); }\n\n\/* HERO *\/\n.hero {\n min-height: 100vh; display: flex; align-items: center;\n padding: 100px 48px 80px; position: relative; overflow: hidden;\n background:\n radial-gradient(ellipse 80% 70% at 75% 40%, rgba(45,185,232,.13) 0%, transparent 60%),\n radial-gradient(ellipse 60% 90% at 5% 90%, rgba(26,75,189,.25) 0%, transparent 55%),\n linear-gradient(160deg, #08152e 0%, #0d1e42 50%, #0c1c40 100%);\n}\n.hero::after { content:''; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle,rgba(45,185,232,.25) 1px,transparent 1px); background-size:52px 52px; opacity:.18; }\n\n.hero-inner { max-width:720px; margin:0 auto; width:100%; position:relative; z-index:2; }\n\n.live-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(45,185,232,.12); border:1px solid rgba(45,185,232,.4); color:var(--sky-light); padding:6px 14px; border-radius:50px; font-size:.78rem; font-weight:700; letter-spacing:.4px; margin-bottom:22px; }\n.live-dot { width:7px; height:7px; background:var(--sky); border-radius:50%; animation:blink 2s infinite; }\n@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }\n\nh1 { font-size:clamp(2.4rem,4.5vw,3.6rem); font-weight:800; line-height:1.1; margin-bottom:20px; color:#ffffff !important; }\nh1 em { color:var(--sky) !important; font-style:normal; }\n\n.hero-sub { color:var(--muted); font-size:1.05rem; margin-bottom:34px; line-height:1.75; }\n\n.input-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 22px 18px; margin-bottom:18px; }\n.input-label { font-size:.68rem; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--sky); margin-bottom:12px; display:flex; align-items:center; gap:6px; }\n.input-row { display:flex; gap:10px; }\n.url-input { flex:1; background:var(--navy-2); border:1.5px solid var(--border); border-radius:10px; padding:13px 16px; color:var(--white); font-family:'Outfit',sans-serif; font-size:.88rem; outline:none; transition:border-color .2s; }\n.url-input::placeholder { color:var(--muted); }\n.url-input:focus { border-color:var(--sky); }\n\n.btn-primary { background:linear-gradient(135deg,var(--blue) 0%,var(--sky) 100%); color:var(--white); border:none; padding:13px 22px; border-radius:10px; font-family:'Outfit',sans-serif; font-weight:700; font-size:.92rem; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:7px; box-shadow:0 4px 20px rgba(45,185,232,.35); transition:transform .2s,box-shadow .2s; }\n.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(45,185,232,.45); }\n\n.hero-chips { display:flex; gap:16px; flex-wrap:wrap; }\n.chip { display:flex; align-items:center; gap:6px; color:var(--off-white); font-size:.83rem; }\n.chip::before { content:'\u2713'; color:var(--sky); font-weight:800; font-size:.85rem; }\n\n.hero-stats { display:flex; gap:32px; margin-top:36px; padding-top:28px; border-top:1px solid var(--border-2); }\n.stat-val { font-size:1.6rem; font-weight:800; color:var(--white); }\n.stat-lbl { color:var(--muted); font-size:.76rem; margin-top:2px; }\n\n\/* PHONE *\/\n.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; padding:40px 0; }\n.glow-ring { position:absolute; width:340px; height:480px; background:radial-gradient(ellipse,rgba(45,185,232,.2) 0%,rgba(26,75,189,.1) 40%,transparent 70%); filter:blur(32px); z-index:0; animation:breathe 5s ease-in-out infinite; }\n@keyframes breathe { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.1);opacity:1} }\n\n.phone { position:relative; z-index:2; width:252px; background:#060e22; border-radius:40px; border:2px solid rgba(255,255,255,.13); overflow:hidden; box-shadow:0 0 0 7px rgba(255,255,255,.03),0 32px 80px rgba(0,0,0,.55),0 0 50px rgba(45,185,232,.12); }\n.phone-notch { width:90px; height:22px; background:#060e22; border-radius:0 0 16px 16px; margin:0 auto; border-bottom:1.5px solid rgba(255,255,255,.07); }\n.phone-screen { background:linear-gradient(180deg,#0d1f50 0%,#081638 100%); min-height:478px; }\n.p-topbar { display:flex; align-items:center; justify-content:space-between; padding:9px 13px 7px; border-bottom:1px solid rgba(255,255,255,.07); }\n.p-logo { font-size:.7rem; font-weight:800; color:var(--white); display:flex; align-items:center; gap:5px; }\n.p-logo-icon { width:16px; height:16px; background:linear-gradient(135deg,var(--blue),var(--sky)); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:.5rem; }\n.p-time { font-size:.62rem; color:rgba(255,255,255,.5); font-weight:600; }\n\n.p-body { padding:11px; }\n.p-score { background:linear-gradient(135deg,rgba(26,75,189,.7),rgba(45,185,232,.35)); border:1px solid rgba(45,185,232,.3); border-radius:11px; padding:11px 12px; margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; }\n.p-score-left .lbl { font-size:.5rem; color:var(--sky-light); font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:2px; }\n.p-score-left .num { font-size:1.35rem; font-weight:800; color:var(--white); line-height:1; }\n.p-score-left .sub { font-size:.46rem; color:rgba(255,255,255,.65); margin-top:2px; }\n.p-ring { width:40px; height:40px; }\n.p-ring circle { fill:none; stroke-width:4.5; }\n.p-ring .bg { stroke:rgba(255,255,255,.1); }\n.p-ring .fill { stroke:var(--amber); stroke-dasharray:88; stroke-dashoffset:32; stroke-linecap:round; transform-origin:center; transform:rotate(-90deg); }\n\n.p-tabs { display:flex; gap:3px; margin-bottom:9px; }\n.p-tab { flex:1; text-align:center; font-size:.46rem; font-weight:700; padding:4px 2px; border-radius:5px; color:rgba(255,255,255,.45); cursor:pointer; border:1px solid transparent; transition:all .2s; }\n.p-tab.on { background:rgba(45,185,232,.2); color:var(--sky-light); border-color:rgba(45,185,232,.35); }\n\n.p-risk { display:flex; align-items:flex-start; gap:5px; background:rgba(255,255,255,.07); border-radius:7px; padding:6px 8px; margin-bottom:5px; border-left:3px solid; }\n.p-risk.r { border-color:var(--red); }\n.p-risk.o { border-color:var(--amber); }\n.p-risk.y { border-color:#ffd740; }\n.p-risk-dot { width:5px; height:5px; border-radius:50%; margin-top:3px; flex-shrink:0; }\n.p-risk.r .p-risk-dot { background:var(--red); }\n.p-risk.o .p-risk-dot { background:var(--amber); }\n.p-risk.y .p-risk-dot { background:#ffd740; }\n.p-risk-text { font-size:.46rem; color:rgba(255,255,255,.85); line-height:1.4; }\n.p-risk-text b { display:block; color:var(--white); font-size:.49rem; margin-bottom:1px; }\n\n.p-bid { background:rgba(26,75,189,.5); border:1px solid rgba(45,185,232,.25); border-radius:9px; padding:8px 10px; margin-top:7px; display:flex; justify-content:space-between; align-items:center; }\n.p-bid-group .p-bid-lbl { font-size:.44rem; color:var(--sky-light); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }\n.p-bid-group .p-bid-val { font-size:.82rem; font-weight:800; color:var(--white); }\n\n\/* floating badges *\/\n.float-b { position:absolute; z-index:5; background:var(--card-2); border:1px solid var(--border); border-radius:13px; padding:9px 14px; box-shadow:0 8px 32px rgba(0,0,0,.4); animation:floatY 6s ease-in-out infinite; white-space:nowrap; }\n.float-b-top { top:10px; left:-55px; }\n.float-b-bot { bottom:20px; right:-50px; animation-delay:-3s; }\n@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }\n.fb-lbl { font-size:.58rem; color:var(--sky-light); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }\n.fb-val { font-size:1.05rem; font-weight:800; color:var(--white); }\n.c-amber { color:var(--amber); }\n.c-green { color:var(--green); }\n\n\/* SECTIONS *\/\n.sect { padding:96px 48px; }\n.sect-alt { background:var(--navy-2); border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2); }\n.sect-inner { max-width:1200px; margin:0 auto; }\n.sect-tag { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--sky); margin-bottom:12px; }\n.sect-title { font-size:clamp(1.7rem,3vw,2.4rem); font-weight:800; color:var(--white); margin-bottom:14px; line-height:1.2; }\n.sect-sub { color:var(--muted); font-size:1rem; max-width:520px; line-height:1.7; }\n\n\/* STEPS *\/\n.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; }\n.step { padding:28px 22px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); position:relative; transition:border-color .25s,transform .25s; }\n.step:hover { border-color:var(--sky); transform:translateY(-4px); }\n.step-num { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--blue),var(--sky)); display:flex; align-items:center; justify-content:center; font-size:.95rem; font-weight:800; color:var(--white); margin-bottom:16px; }\n.step-icon { font-size:1.4rem; margin-bottom:10px; }\n.step h3 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:8px; }\n.step p { color:var(--muted); font-size:.85rem; line-height:1.65; }\n.step:not(:last-child)::after { content:'\u2192'; position:absolute; right:-14px; top:38px; color:var(--sky); font-size:1.1rem; z-index:1; }\n\n\/* FEATURES *\/\n.feat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:48px; }\n.feat-card { padding:28px; background:var(--card); border:1px solid var(--border); border-top:3px solid; border-radius:var(--radius-lg); transition:all .25s; }\n.feat-card:hover { transform:translateY(-3px); }\n.feat-icon { font-size:1.9rem; margin-bottom:14px; }\n.feat-card h3 { font-size:1.05rem; font-weight:700; color:var(--white); margin-bottom:9px; }\n.feat-card p { color:var(--muted); font-size:.87rem; line-height:1.7; }\n\n\/* PRICING *\/\n.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; align-items:start; }\n.price-card { padding:30px 26px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); position:relative; transition:transform .25s; }\n.price-card:hover { transform:translateY(-4px); }\n.price-card.hot { background:linear-gradient(165deg,#132d6b,#0f2357); border:2px solid var(--sky); box-shadow:0 0 40px rgba(45,185,232,.18),0 16px 48px rgba(0,0,0,.3); transform:scale(1.03); }\n.price-card.hot:hover { transform:scale(1.03) translateY(-4px); }\n.pop-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--blue),var(--sky)); color:var(--white); font-size:.68rem; font-weight:800; padding:4px 16px; border-radius:50px; white-space:nowrap; }\n.price-tier { font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:14px; }\n.price-tag { font-size:2.3rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:6px; }\n.price-tag .per { font-size:.9rem; font-weight:400; color:var(--muted); }\n.price-desc { color:var(--muted); font-size:.82rem; margin-bottom:22px; line-height:1.5; }\n.price-divider { height:1px; background:var(--border); margin-bottom:20px; }\n.price-features { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:26px; }\n.price-features li { display:flex; align-items:flex-start; gap:8px; font-size:.86rem; color:var(--off-white); }\n.price-features li::before { content:'\u2713'; color:var(--green); font-weight:800; flex-shrink:0; margin-top:1px; }\n.price-features li.off { color:var(--muted); }\n.price-features li.off::before { content:'\u2013'; color:var(--border); }\n.btn-outline { display:block; width:100%; text-align:center; padding:13px; background:transparent; border:1.5px solid var(--border); color:var(--off-white); border-radius:11px; font-family:'Outfit',sans-serif; font-weight:700; font-size:.9rem; cursor:pointer; transition:all .2s; }\n.btn-outline:hover { border-color:var(--sky); color:var(--sky); }\n.btn-glow { display:block; width:100%; text-align:center; padding:13px; background:linear-gradient(135deg,var(--blue),var(--sky)); color:var(--white); border:none; border-radius:11px; font-family:'Outfit',sans-serif; font-weight:700; font-size:.9rem; cursor:pointer; box-shadow:0 4px 20px rgba(45,185,232,.3); transition:all .2s; }\n.btn-glow:hover { box-shadow:0 8px 28px rgba(45,185,232,.45); transform:translateY(-1px); }\n\n\/* TESTIMONIALS *\/\n.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }\n.testi { padding:24px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); display:flex; flex-direction:column; transition:border-color .25s; }\n.testi:hover { border-color:rgba(45,185,232,.5); }\n.stars { color:var(--amber); font-size:.85rem; margin-bottom:12px; letter-spacing:1px; }\n.testi-text { color:var(--off-white); font-size:.88rem; line-height:1.7; font-style:italic; margin-bottom:18px; flex:1; }\n.testi-author { display:flex; align-items:center; gap:11px; }\n.avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--blue),var(--sky)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; color:var(--white); }\n.author-name { font-weight:700; font-size:.87rem; color:var(--white); }\n.author-loc { color:var(--muted); font-size:.76rem; margin-top:1px; }\n\n\/* CTA BANNER *\/\n.cta-banner { padding:80px 48px; text-align:center; background:radial-gradient(ellipse 70% 100% at 50% 50%,rgba(26,75,189,.4) 0%,transparent 70%),var(--navy-2); border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2); }\n.cta-banner h2 { font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; color:var(--white); margin-bottom:14px; }\n.cta-banner p { color:var(--muted); font-size:1rem; max-width:440px; margin:0 auto 32px; line-height:1.7; }\n.cta-banner .btn-primary { display:inline-flex; margin:0 auto; font-size:1rem; padding:15px 34px; }\n\n\/* FOOTER *\/\nfooter { padding:36px 48px; background:var(--navy); border-top:1px solid var(--border-2); }\n.footer-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }\n.footer-copy { color:var(--muted); font-size:.82rem; margin-top:6px; }\n.footer-links { display:flex; gap:24px; }\n.footer-links a { color:var(--muted); text-decoration:none; font-size:.82rem; transition:color .2s; }\n.footer-links a:hover { color:var(--white); }\n\n\/* MODAL *\/\n.overlay { display:none; position:fixed; inset:0; z-index:1000; background:rgba(3,8,22,.88); backdrop-filter:blur(14px); align-items:center; justify-content:center; padding:24px; }\n.overlay.open { display:flex; animation:fadein .22s ease; }\n@keyframes fadein { from{opacity:0} to{opacity:1} }\n\n.modal { background:var(--navy-2); border:1px solid var(--border); border-radius:26px; width:100%; max-width:660px; max-height:90vh; overflow-y:auto; box-shadow:0 40px 120px rgba(0,0,0,.6); animation:slideup .28s ease; }\n@keyframes slideup { from{transform:translateY(28px);opacity:0} to{transform:none;opacity:1} }\n\n.modal-head { padding:28px 30px 0; display:flex; align-items:flex-start; justify-content:space-between; }\n.modal-title { font-size:1.35rem; font-weight:800; color:var(--white); margin-bottom:4px; }\n.modal-sub { color:var(--sky-light); font-size:.8rem; }\n.modal-close { background:var(--card); border:1px solid var(--border); color:var(--off-white); width:34px; height:34px; border-radius:50%; font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:16px; transition:background .2s; }\n.modal-close:hover { background:var(--card-2); }\n.modal-body { padding:22px 30px 30px; }\n\n.loading { text-align:center; padding:44px 20px; }\n.spinner { width:46px; height:46px; border-radius:50%; border:3px solid rgba(45,185,232,.2); border-top-color:var(--sky); animation:spin .85s linear infinite; margin:0 auto 20px; }\n@keyframes spin { to{transform:rotate(360deg)} }\n.loading-label strong { display:block; color:var(--white); font-size:1rem; font-weight:700; margin-bottom:6px; }\n.loading-label span { color:var(--muted); font-size:.87rem; }\n\n.result { display:none; }\n.result.show { display:block; }\n\n.demo-note { background:rgba(45,185,232,.1); border:1px solid rgba(45,185,232,.25); border-radius:10px; padding:10px 14px; margin-bottom:18px; font-size:.8rem; color:var(--sky-light); }\n\n.m-score { background:linear-gradient(135deg,rgba(26,75,189,.55),rgba(45,185,232,.2)); border:1px solid rgba(45,185,232,.3); border-radius:16px; padding:20px 22px; margin-bottom:18px; display:flex; align-items:center; gap:20px; }\n.m-score-big { font-size:3.2rem; font-weight:800; color:var(--amber); line-height:1; }\n.m-score-info .lbl { font-size:.68rem; color:var(--sky-light); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }\n.m-score-info .desc { color:var(--off-white); font-size:.84rem; margin-bottom:8px; }\n.bar-wrap { height:6px; background:var(--navy); border-radius:3px; width:180px; overflow:hidden; }\n.bar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--amber)); border-radius:3px; }\n\n.m-sect-title { font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:12px; }\n.m-risk { display:flex; align-items:flex-start; gap:12px; padding:13px 15px; background:var(--card); border-radius:12px; margin-bottom:8px; border-left:3px solid; }\n.m-risk.hi { border-color:var(--red); }\n.m-risk.md { border-color:var(--amber); }\n.m-risk.lo { border-color:#ffd740; }\n.m-risk-icon { font-size:1rem; flex-shrink:0; margin-top:1px; }\n.m-risk-body strong { display:block; font-size:.88rem; color:var(--white); margin-bottom:3px; }\n.m-risk-body span { font-size:.81rem; color:var(--muted); line-height:1.6; }\n\n.m-bid { background:linear-gradient(135deg,rgba(26,75,189,.45),rgba(45,185,232,.15)); border:1px solid rgba(45,185,232,.3); border-radius:16px; padding:20px 22px; margin-bottom:18px; }\n.m-bid-amounts { display:flex; gap:12px; margin-bottom:14px; }\n.m-bid-box { flex:1; background:var(--card); border-radius:11px; padding:13px; text-align:center; }\n.m-bid-box .bl { font-size:.67rem; color:var(--sky-light); font-weight:700; text-transform:uppercase; letter-spacing:.7px; margin-bottom:6px; }\n.m-bid-box .bv { font-size:1.35rem; font-weight:800; }\n.m-bid-tip { font-size:.82rem; color:var(--muted); padding-top:13px; border-top:1px solid var(--border-2); line-height:1.6; }\n.m-bid-tip strong { color:var(--sky-light); }\n\n.check-item { display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--border-2); font-size:.87rem; color:var(--off-white); }\n.check-item:last-child { border-bottom:none; }\n.cbox { width:19px; height:19px; border:2px solid var(--border); border-radius:5px; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }\n.cbox.on { background:var(--sky); border-color:var(--sky); }\n.cbox.on::after { content:'\u2713'; color:var(--white); font-size:.7rem; font-weight:800; }\n\n.key-screen { padding: 8px 0 4px; }\n.key-screen p { color: var(--muted); font-size: .87rem; line-height: 1.65; margin-bottom: 18px; }\n.key-input { width:100%; background:var(--navy); border:1.5px solid var(--border); border-radius:10px; padding:13px 16px; color:var(--white); font-family:'Outfit',sans-serif; font-size:.88rem; outline:none; transition:border-color .2s; margin-bottom:12px; }\n.key-input:focus { border-color:var(--sky); }\n.key-note { font-size:.75rem; color:var(--muted); margin-top:8px; }\n.key-note a { color:var(--sky); }\n\n\/* RESPONSIVE *\/\n@media (max-width:960px) {\n nav { padding:0 20px; }\n .nav-links { display:none; }\n .hero { padding:90px 20px 60px; }\n .hero-inner { grid-template-columns:1fr; gap:48px; }\n .hero-visual { order:-1; }\n .float-b-top { left:-28px; top:0; }\n .float-b-bot { right:-28px; bottom:0; }\n .sect { padding:64px 20px; }\n .steps { grid-template-columns:repeat(2,1fr); }\n .step:not(:last-child)::after { display:none; }\n .feat-grid { grid-template-columns:1fr; }\n .price-grid { grid-template-columns:1fr; }\n .price-card.hot { transform:none; }\n .testi-grid { grid-template-columns:1fr; }\n .cta-banner { padding:60px 20px; }\n footer { padding:28px 20px; }\n .footer-inner { flex-direction:column; gap:16px; text-align:center; }\n .m-bid-amounts { flex-direction:column; }\n .modal-head,.modal-body { padding-left:20px; padding-right:20px; }\n}\n<\/style>\n<\/head>\n<body>\n\n\n<nav>\n <a class=\"nav-logo\" href=\"#\">WoningKijken<span style=\"color:var(--sky)\">.nl<\/span><\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#hoe\">Hoe werkt het?<\/a><\/li>\n <li><a href=\"#functies\">Functies<\/a><\/li>\n <li><a href=\"#prijzen\">Prijzen<\/a><\/li>\n <li><a href=\"#reviews\">Reviews<\/a><\/li>\n <\/ul>\n <button class=\"nav-cta\" onclick=\"openModal()\">Probeer gratis \u2192<\/button>\n<\/nav>\n\n\n<section class=\"hero\">\n <div class=\"hero-inner\">\n <div>\n <div class=\"live-badge\"><span class=\"live-dot\"><\/span>AI-gedreven aankoopcoach<\/div>\n <h1>Slimmer een woning <em>bekijken<\/em><\/h1>\n <p class=\"hero-sub\">De meeste mensen kopen een huis zonder echt te weten waar ze op moeten letten. WoningKijken is je digitale aankoopcoach \u2014 altijd in je broekzak.<\/p>\n <div class=\"input-card\">\n <div class=\"input-label\">\ud83d\udd17 Plak een woning-link en start direct<\/div>\n <div class=\"input-row\">\n <input class=\"url-input\" id=\"woningInput\" type=\"url\" placeholder=\"https:\/\/www.woningsite.nl\/detail\/4337324\u2026\" \/>\n <button class=\"btn-primary\" onclick=\"handleAnalyse()\">Analyseer \u2192<\/button>\n <\/div>\n <\/div>\n <div class=\"hero-chips\">\n <span class=\"chip\">Risico-analyse<\/span>\n <span class=\"chip\">Live checklist<\/span>\n <span class=\"chip\">Biedadvies<\/span>\n <\/div>\n <div class=\"hero-stats\">\n <div>\n <div class=\"stat-val\">\u20ac300K<span style=\"color:var(--sky)\">+<\/span><\/div>\n <div class=\"stat-lbl\">Gemiddelde aankoopwaarde<\/div>\n <\/div>\n <div>\n <div class=\"stat-val\" style=\"color:var(--sky)\">\u20ac9,95<\/div>\n <div class=\"stat-lbl\">Per woning-analyse<\/div>\n <\/div>\n <div>\n <div class=\"stat-val\">4.9<span style=\"color:var(--amber)\">\u2605<\/span><\/div>\n <div class=\"stat-lbl\">Gemiddelde beoordeling<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n<section class=\"sect\" id=\"hoe\">\n <div class=\"sect-inner\">\n <div class=\"sect-tag\">Hoe werkt het?<\/div>\n <h2 class=\"sect-title\">Van woning-link tot koopadvies<br>in vier stappen<\/h2>\n <p class=\"sect-sub\">Geen ingewikkelde tools of jarenlange ervaring nodig. WoningKijken begeleidt je van A tot Z.<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"step-num\">1<\/div><div class=\"step-icon\">\ud83d\udd17<\/div><h3>Plak een woning-link<\/h3><p>Kopieer de URL van de woning op een woningsite en plak hem in WoningKijken. Klaar.<\/p><\/div>\n <div class=\"step\"><div class=\"step-num\">2<\/div><div class=\"step-icon\">\ud83e\udd16<\/div><h3>Ontvang directe analyse<\/h3><p>Onze AI analyseert fundering, energielabel, VvE-status, marktpositie en meer.<\/p><\/div>\n <div class=\"step\"><div class=\"step-num\">3<\/div><div class=\"step-icon\">\ud83d\udccb<\/div><h3>Gebruik live checklist<\/h3><p>Neem je persoonlijke checklist mee tijdens de bezichtiging. Op je telefoon, offline werkt ook.<\/p><\/div>\n <div class=\"step\"><div class=\"step-num\">4<\/div><div class=\"step-icon\">\ud83d\udcb0<\/div><h3>Krijg koopadvies<\/h3><p>Na de bezichtiging ontvang je een beslisrapport met concreet start- en maximaal bod.<\/p><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"sect sect-alt\" id=\"functies\">\n <div class=\"sect-inner\">\n <div class=\"sect-tag\">Functies<\/div>\n <h2 class=\"sect-title\">Alles wat je nodig hebt<br>als slimme koper<\/h2>\n <p class=\"sect-sub\">Wij vervangen niet de makelaar \u2014 we versterken de koper.<\/p>\n <div class=\"feat-grid\">\n <div class=\"feat-card\" style=\"border-top-color:var(--red)\"><div class=\"feat-icon\">\u26a0\ufe0f<\/div><h3>Risico-analyse op maat<\/h3><p>De AI identificeert verborgen risico’s op basis van bouwjaar, fundering, energielabel en VvE-status. Jij ziet meteen de rode vlaggen v\u00f3\u00f3r de bezichtiging.<\/p><\/div>\n <div class=\"feat-card\" style=\"border-top-color:var(--sky)\"><div class=\"feat-icon\">\ud83d\udccb<\/div><h3>Slimme vragenlijst<\/h3><p>Ontvang een op de woning afgestemde vragenlijst. Nooit meer vergeten te vragen naar het dak, de CV-ketel of de burenafspraken.<\/p><\/div>\n <div class=\"feat-card\" style=\"border-top-color:var(--green)\"><div class=\"feat-icon\">\ud83d\udcf1<\/div><h3>Live bezichtigingsmodus<\/h3><p>Grote knoppen, afvinkbare checklist en notities \u2014 optimaal ontworpen voor gebruik op je telefoon terwijl je door de woning loopt.<\/p><\/div>\n <div class=\"feat-card\" style=\"border-top-color:var(--amber)\"><div class=\"feat-icon\">\ud83d\udca1<\/div><h3>Concreet biedadvies<\/h3><p>Op basis van marktdata, verkoopsduur en woningkenmerken krijg je een realistisch start- en maximaal bod. Geen gissen meer.<\/p><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"sect\" id=\"prijzen\">\n <div class=\"sect-inner\">\n <div class=\"sect-tag\">Prijzen<\/div>\n <h2 class=\"sect-title\">Transparant & eerlijk geprijsd<\/h2>\n <p class=\"sect-sub\">Voor minder dan \u20ac10 voorkom je een miskoop van duizenden euro’s.<\/p>\n <div class=\"price-grid\">\n <div class=\"price-card\">\n <div class=\"price-tier\">Gratis<\/div>\n <div class=\"price-tag\">\u20ac0<\/div>\n <div class=\"price-desc\">Probeer het risico-vrij, zonder creditcard.<\/div>\n <div class=\"price-divider\"><\/div>\n <ul class=\"price-features\">\n <li>1 basis-analyse per maand<\/li><li>Risicoscore<\/li><li>Standaard checklist<\/li>\n <li class=\"off\">Biedadvies<\/li><li class=\"off\">Beslisrapport<\/li><li class=\"off\">Live modus<\/li>\n <\/ul>\n <button class=\"btn-outline\" onclick=\"openModal()\">Gratis starten<\/button>\n <\/div>\n <div class=\"price-card hot\">\n <div class=\"pop-badge\">\u2b50 Meest gekozen<\/div>\n <div class=\"price-tier\">Pay-per-analyse<\/div>\n <div class=\"price-tag\">\u20ac9,95<span class=\"per\"> \/woning<\/span><\/div>\n <div class=\"price-desc\">Betaal alleen als je kijkt. Geen abonnement nodig.<\/div>\n <div class=\"price-divider\"><\/div>\n <ul class=\"price-features\">\n <li>Volledige AI-analyse<\/li><li>Risicoscore & risico-rapport<\/li><li>Slimme vragenlijst<\/li>\n <li>Concreet biedadvies<\/li><li>Beslisrapport na bezichtiging<\/li><li>Live bezichtigingsmodus<\/li>\n <\/ul>\n <button class=\"btn-glow\" onclick=\"openModal()\">Direct starten \u2192<\/button>\n <\/div>\n <div class=\"price-card\">\n <div class=\"price-tier\">Pro Abonnement<\/div>\n <div class=\"price-tag\">\u20ac19<span class=\"per\"> \/maand<\/span><\/div>\n <div class=\"price-desc\">Onbeperkt kijken, vergelijken en exporteren.<\/div>\n <div class=\"price-divider\"><\/div>\n <ul class=\"price-features\">\n <li>Alles van Pay-per-analyse<\/li><li>Onbeperkt analyses<\/li><li>Woningen vergelijken<\/li>\n <li>Prioriteit support<\/li><li>Exporteren naar PDF<\/li><li>Vroeg toegang nieuwe functies<\/li>\n <\/ul>\n <button class=\"btn-outline\" onclick=\"openModal()\">Pro proberen<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"sect sect-alt\" id=\"reviews\">\n <div class=\"sect-inner\">\n <div class=\"sect-tag\">Reviews<\/div>\n <h2 class=\"sect-title\">Wat kopers zeggen<\/h2>\n <div class=\"testi-grid\">\n <div class=\"testi\"><div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div><p class=\"testi-text\">“Dankzij WoningKijken zag ik meteen dat de fundering risico’s had die de makelaar niet noemde. Dit heeft me waarschijnlijk tienduizenden euro’s bespaard.”<\/p><div class=\"testi-author\"><div class=\"avatar\">S<\/div><div><div class=\"author-name\">Sophie van den Berg<\/div><div class=\"author-loc\">Amsterdam \u00b7 Starter<\/div><\/div><\/div><\/div>\n <div class=\"testi\"><div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div><p class=\"testi-text\">“Het biedadvies was spot-on. We zijn \u20ac15.000 onder vraagprijs begonnen en hebben de woning voor onze maximale grens gekregen. Absoluut de moeite waard.”<\/p><div class=\"testi-author\"><div class=\"avatar\">M<\/div><div><div class=\"author-name\">Mark de Vries<\/div><div class=\"author-loc\">Utrecht \u00b7 Doorstromer<\/div><\/div><\/div><\/div>\n <div class=\"testi\"><div class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/div><p class=\"testi-text\">“De live checklist tijdens de bezichtiging is geniaal. Ik vergat nooit meer een vraag. Eindelijk koop ik met vertrouwen en zonder aankoopmakelaar.”<\/p><div class=\"testi-author\"><div class=\"avatar\">L<\/div><div><div class=\"author-name\">Lisa Hendriks<\/div><div class=\"author-loc\">Rotterdam \u00b7 Starter<\/div><\/div><\/div><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"cta-banner\">\n <h2>Klaar om slimmer te kopen?<\/h2>\n <p>WoningKijken maakt van elke koper een slimme koper. Begin vandaag gratis.<\/p>\n <button class=\"btn-primary\" onclick=\"openModal()\">\ud83c\udfe0 Start met WoningKijken \u2192<\/button>\n<\/div>\n\n\n<footer>\n <div class=\"footer-inner\">\n <div>\n <div class=\"nav-logo\" style=\"margin-bottom:6px\">WoningKijken<span style=\"color:var(--sky)\">.nl<\/span><\/div>\n <div class=\"footer-copy\">\u00a9 2025 WoningKijken.nl \u2014 Jouw digitale aankoopcoach<\/div>\n <\/div>\n <div class=\"footer-links\">\n <a href=\"#\">Privacy<\/a><a href=\"#\">Voorwaarden<\/a><a href=\"#\">Contact<\/a><a href=\"#\">Over ons<\/a>\n <\/div>\n <\/div>\n<\/footer>\n\n\n<div class=\"overlay\" id=\"overlay\" onclick=\"overlayClick(event)\">\n <div class=\"modal\" id=\"modal\">\n <div class=\"modal-head\">\n <div>\n <div class=\"modal-title\" id=\"mTitle\">\ud83d\udd11 API-sleutel instellen<\/div>\n <div class=\"modal-sub\" id=\"mSub\">Eenmalig nodig voor AI-analyses<\/div>\n <\/div>\n <button class=\"modal-close\" onclick=\"closeModal()\">\u2715<\/button>\n <\/div>\n <div class=\"modal-body\">\n\n \n <div id=\"keyScreen\" class=\"key-screen\">\n <p>WoningKijken gebruikt de Anthropic AI voor echte analyses. Vul hieronder je API-sleutel in \u2014 deze wordt alleen in je browser opgeslagen en nergens naartoe gestuurd.<\/p>\n <input class=\"key-input\" id=\"apiKeyInput\" type=\"password\" placeholder=\"sk-ant-api03-\u2026\" autocomplete=\"off\" \/>\n <button class=\"btn-glow\" style=\"width:100%;margin-top:4px\" onclick=\"slaanSleutelOp()\">Sleutel opslaan & doorgaan \u2192<\/button>\n <p class=\"key-note\">Sleutel aanmaken via <a href=\"https:\/\/console.anthropic.com\/settings\/keys\" target=\"_blank\">console.anthropic.com<\/a>. Je sleutel wordt alleen lokaal bewaard (sessionStorage).<\/p>\n <\/div>\n\n \n <div class=\"loading\" id=\"loading\" style=\"display:none\">\n <div class=\"spinner\"><\/div>\n <div class=\"loading-label\">\n <strong>Woning wordt geanalyseerd\u2026<\/strong>\n <span id=\"loadMsg\">Woning-informatie ophalen\u2026<\/span>\n <\/div>\n <\/div>\n\n \n <div id=\"errorBox\" style=\"display:none;text-align:center;padding:32px 8px\">\n <div style=\"font-size:2rem;margin-bottom:14px\">\u26a0\ufe0f<\/div>\n <div id=\"errorMsg\" style=\"color:var(--off-white);font-size:.9rem;margin-bottom:20px;line-height:1.6\"><\/div>\n <button class=\"btn-glow\" style=\"display:inline-block;width:auto;padding:11px 24px\" onclick=\"wisSleutel()\">Opnieuw proberen<\/button>\n <\/div>\n\n \n <div class=\"result\" id=\"result\">\n <div class=\"m-score\">\n <div class=\"m-score-big\" id=\"r-score-num\">\u2013<\/div>\n <div class=\"m-score-info\">\n <div class=\"lbl\">Risicoscore (van 10)<\/div>\n <div class=\"desc\" id=\"r-score-desc\"><\/div>\n <div class=\"bar-wrap\"><div class=\"bar-fill\" id=\"r-bar\" style=\"width:0%\"><\/div><\/div>\n <\/div>\n <\/div>\n <div style=\"margin-bottom:18px\">\n <div class=\"m-sect-title\">\u26a0\ufe0f Ge\u00efdentificeerde risico’s<\/div>\n <div id=\"r-risks\"><\/div>\n <\/div>\n <div class=\"m-bid\">\n <div class=\"m-sect-title\">\ud83d\udcb0 Biedstrategie<\/div>\n <div class=\"m-bid-amounts\">\n <div class=\"m-bid-box\"><div class=\"bl\">Startbod<\/div><div class=\"bv\" id=\"r-start\" style=\"color:var(--green)\">\u2013<\/div><\/div>\n <div class=\"m-bid-box\"><div class=\"bl\">Maximaal bod<\/div><div class=\"bv\" id=\"r-max\" style=\"color:var(--amber)\">\u2013<\/div><\/div>\n <div class=\"m-bid-box\"><div class=\"bl\">Vraagprijs<\/div><div class=\"bv\" id=\"r-ask\" style=\"color:var(--white)\">\u2013<\/div><\/div>\n <\/div>\n <div class=\"m-bid-tip\" id=\"r-bid-tip\"><\/div>\n <\/div>\n <div style=\"margin-bottom:22px\">\n <div class=\"m-sect-title\">\ud83d\udccb Bezichtigings-checklist<\/div>\n <div id=\"r-checklist\"><\/div>\n <\/div>\n <div style=\"text-align:center;padding-top:4px;display:flex;gap:10px;justify-content:center\">\n <button class=\"btn-outline\" style=\"width:auto;padding:9px 18px;font-size:.82rem\" onclick=\"closeModal()\">\u2715 Sluiten<\/button>\n <button class=\"btn-outline\" style=\"width:auto;padding:9px 18px;font-size:.82rem\" onclick=\"wisSleutel()\">\ud83d\udd11 Sleutel wijzigen<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/div>\n\n<script>\nconst MSGS = ['Woning-informatie ophalen\u2026','Kenmerken & bouwjaar analyseren\u2026','Marktdata vergelijken\u2026',\"Risico's beoordelen\u2026\",'Biedstrategie berekenen\u2026'];\nconst KEY_NAME = 'wk_api_key';\n\nfunction getKey() { return sessionStorage.getItem(KEY_NAME) || ''; }\n\n\/\/ \u2500\u2500 Modal openen \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\nfunction openModal() {\n document.getElementById('overlay').classList.add('open');\n document.body.style.overflow = 'hidden';\n if (getKey()) {\n startAnalyse();\n } else {\n toonScherm('key');\n document.getElementById('mTitle').textContent = '\ud83d\udd11 API-sleutel instellen';\n document.getElementById('mSub').textContent = 'Eenmalig nodig voor AI-analyses';\n }\n}\nfunction handleAnalyse() { openModal(); }\n\nfunction closeModal() {\n document.getElementById('overlay').classList.remove('open');\n document.body.style.overflow = '';\n}\nfunction overlayClick(e) {\n if (e.target === document.getElementById('overlay')) closeModal();\n}\n\n\/\/ \u2500\u2500 Schermen wisselen \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\nfunction toonScherm(naam) {\n document.getElementById('keyScreen').style.display = naam === 'key' ? 'block' : 'none';\n document.getElementById('loading').style.display = naam === 'loading' ? 'block' : 'none';\n document.getElementById('errorBox').style.display = naam === 'error' ? 'block' : 'none';\n document.getElementById('result').classList.toggle('show', naam === 'result');\n}\n\n\/\/ \u2500\u2500 Sleutel opslaan \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\nfunction slaanSleutelOp() {\n const key = document.getElementById('apiKeyInput').value.trim();\n if (!key || key.length < 20) {\n toonFout('Voer een geldige Anthropic API-sleutel in.');\n return;\n }\n sessionStorage.setItem(KEY_NAME, key);\n startAnalyse();\n}\n\n\/\/ \u2500\u2500 Analyse starten \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\nlet loadTimer = null;\nfunction startAnalyse() {\n toonScherm('loading');\n document.getElementById('mTitle').textContent = '\ud83e\udd16 Woning analyseren\u2026';\n document.getElementById('mSub').textContent = 'AI is bezig met de analyse';\n let i = 0;\n const el = document.getElementById('loadMsg');\n el.textContent = MSGS[0];\n clearInterval(loadTimer);\n loadTimer = setInterval(() => { if (++i < MSGS.length) el.textContent = MSGS[i]; }, 900);\n const url = document.getElementById('woningInput').value.trim();\n runAnalysis(url);\n}\n\n\/\/ \u2500\u2500 Fout tonen \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\nfunction toonFout(bericht, verwijderSleutel = false) {\n clearInterval(loadTimer);\n if (verwijderSleutel) sessionStorage.removeItem(KEY_NAME);\n document.getElementById('mTitle').textContent = '\u26a0\ufe0f Er ging iets mis';\n document.getElementById('mSub').textContent = '';\n document.getElementById('errorMsg').textContent = bericht;\n toonScherm('error');\n}\n\n\/\/ \u2500\u2500 Pagina-inhoud ophalen via CORS-proxy \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\nasync function haalPaginainhoud(url) {\n if (!url) return null;\n try {\n const proxyUrl = `https:\/\/api.allorigins.win\/get?url=${encodeURIComponent(url)}`;\n const resp = await fetch(proxyUrl, { signal: AbortSignal.timeout(10000) });\n if (!resp.ok) return null;\n const data = await resp.json();\n const html = data.contents || '';\n const tmp = document.createElement('div');\n tmp.innerHTML = html;\n tmp.querySelectorAll('script,style,nav,footer,header,noscript,svg,img,button,form').forEach(el => el.remove());\n const tekst = (tmp.innerText || tmp.textContent || '').replace(\/\\s+\/g, ' ').trim();\n return tekst.slice(0, 6000) || null;\n } catch {\n return null;\n }\n}\n\n\/\/ \u2500\u2500 API-aanroep \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\nasync function runAnalysis(url) {\n const key = getKey();\n\n \/\/ Stap 1: pagina-inhoud ophalen\n document.getElementById('loadMsg').textContent = 'Woningpagina ophalen\u2026';\n const paginaTekst = await haalPaginainhoud(url);\n\n document.getElementById('loadMsg').textContent = \"Gegevens analyseren\u2026\";\n\n const context = paginaTekst\n ? `Hieronder staat de tekst van de woningpagina. Gebruik alle gegevens die erin staan:\\n\\n---\\n${paginaTekst}\\n---\\n\\nHaal de vraagprijs, het energielabel, het bouwjaar, de oppervlakte, VvE-informatie en alle andere kenmerken direct uit deze tekst.`\n : `De pagina kon niet worden opgehaald voor URL: \"${url || 'geen URL'}\". Maak een realistische analyse op basis van wat je weet over de Nederlandse woningmarkt.`;\n\n const prompt = `Je bent WoningKijken, een Nederlandse AI-aankoopcoach.\nURL: \"${url || 'geen URL'}\"\n\n${context}\n\nRetourneer ALLEEN geldig JSON, geen tekst of backticks eromheen:\n{\n \"adres\": \"Straatnaam nr, Stad (uit de paginatekst)\",\n \"risicoscore\": 6.5,\n \"risico_omschrijving\": \"Korte samenvatting risicoprofiel\",\n \"risicos\": [\n { \"niveau\": \"hoog\", \"titel\": \"Specifiek risico gebaseerd op de woningdata\", \"toelichting\": \"Concrete uitleg met bedragen of aandachtspunten\" },\n { \"niveau\": \"midden\", \"titel\": \"...\", \"toelichting\": \"...\" },\n { \"niveau\": \"laag\", \"titel\": \"...\", \"toelichting\": \"...\" }\n ],\n \"vraagprijs\": \"\u20acXXX.000 (uit paginatekst)\",\n \"startbod\": \"\u20acXXX.000\",\n \"maximaal_bod\": \"\u20acXXX.000\",\n \"biedadvies\": \"2-3 concrete zinnen gebaseerd op de werkelijke woningdata\",\n \"checklist\": [\"14+ specifieke checkpunten afgestemd op deze woning en haar kenmerken\"]\n}\nMinimaal 4 risico's, minimaal 14 checkpunten. Wees specifiek over energielabel, bouwjaar, VvE, oppervlakte etc. als die in de paginatekst staan.`;\n\n try {\n const resp = await fetch('https:\/\/api.anthropic.com\/v1\/messages', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'x-api-key': key,\n 'anthropic-version': '2023-06-01',\n 'anthropic-dangerous-direct-browser-access': 'true'\n },\n body: JSON.stringify({\n model: 'claude-sonnet-4-20250514',\n max_tokens: 1600,\n messages: [{ role: 'user', content: prompt }]\n })\n });\n\n if (resp.status === 401) {\n toonFout('Ongeldige API-sleutel. Controleer je sleutel op console.anthropic.com en probeer opnieuw.', true);\n return;\n }\n if (!resp.ok) {\n const e = await resp.json().catch(() => ({}));\n toonFout(`API-fout (${resp.status}): ${e.error?.message || 'Onbekende fout'}`);\n return;\n }\n\n const data = await resp.json();\n const raw = data.content.map(b => b.text || '').join('');\n const clean = raw.replace(\/```json|```\/g, '').trim();\n const a = JSON.parse(clean);\n\n clearInterval(loadTimer);\n renderAnalyse(a, url);\n\n } catch (err) {\n toonFout('Kon geen verbinding maken. (' + (err.message || err) + ')');\n }\n}\n\n\/\/ \u2500\u2500 Resultaat renderen \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\nfunction renderAnalyse(a, url) {\n const score = parseFloat(a.risicoscore);\n const scoreEl = document.getElementById('r-score-num');\n scoreEl.textContent = score.toFixed(1);\n scoreEl.style.color = score >= 7 ? 'var(--red)' : score >= 5 ? 'var(--amber)' : 'var(--green)';\n document.getElementById('r-score-desc').textContent = a.risico_omschrijving;\n document.getElementById('r-bar').style.width = (score * 10) + '%';\n\n const nMap = { hoog: ['hi','\ud83d\udd34'], midden: ['md','\ud83d\udfe0'], laag: ['lo','\ud83d\udfe1'] };\n document.getElementById('r-risks').innerHTML = a.risicos.map(r => {\n const [cls, icon] = nMap[r.niveau] || ['lo','\ud83d\udfe1'];\n return `<div class=\"m-risk ${cls}\"><div class=\"m-risk-icon\">${icon}<\/div><div class=\"m-risk-body\"><strong>${r.titel}<\/strong><span>${r.toelichting}<\/span><\/div><\/div>`;\n }).join('');\n\n document.getElementById('r-start').textContent = a.startbod;\n document.getElementById('r-max').textContent = a.maximaal_bod;\n document.getElementById('r-ask').textContent = a.vraagprijs;\n document.getElementById('r-bid-tip').innerHTML = `<strong>Tip:<\/strong> ${a.biedadvies}`;\n\n document.getElementById('r-checklist').innerHTML = a.checklist.map(item =>\n `<div class=\"check-item\"><div class=\"cbox\" onclick=\"this.classList.toggle('on')\"><\/div>${item}<\/div>`\n ).join('');\n\n document.getElementById('mTitle').textContent = '\u2705 Analyse gereed';\n document.getElementById('mSub').textContent = a.adres || url || 'Voorbeeldwoning';\n toonScherm('result');\n}\n\n\/\/ \u2500\u2500 Sleutel wissen (reset) \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\nfunction wisSleutel() {\n sessionStorage.removeItem(KEY_NAME);\n document.getElementById('apiKeyInput').value = '';\n document.getElementById('mTitle').textContent = '\ud83d\udd11 API-sleutel instellen';\n document.getElementById('mSub').textContent = 'Eenmalig nodig voor AI-analyses';\n toonScherm('key');\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>WoningKijken.nl \u2014 AI-gedreven aankoopcoach WoningKijken.nl Hoe werkt het? Functies Prijzen Reviews Probeer gratis \u2192 AI-gedreven aankoopcoach Slimmer een woning bekijken […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/woningkijken.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":12,"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/woningkijken.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8,"date":"2026-03-31T13:28:51","date_gmt":"2026-03-31T13:28:51","guid":{"rendered":"https:\/\/woningkijken.nl\/?page_id=8"},"modified":"2026-04-11T12:33:18","modified_gmt":"2026-04-11T12:33:18","slug":"home","status":"publish","type":"page","link":"https:\/\/woningkijken.nl\/","title":{"rendered":"Home"},"content":{"rendered":"\n\n\n\n\n\nWoningKijken.nl \u2014 AI-gedreven aankoopcoach<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --navy: #08152e;\n --navy-2: #0d1e42;\n --blue: #1a4bbd;\n --sky: #2db9e8;\n --sky-light: #7dd8f5;\n --white: #ffffff;\n --off-white: #ddeeff;\n --muted: #8faad4;\n --card: #132046;\n --card-2: #1a2b55;\n --border: #253d72;\n --border-2: #1e3360;\n --green: #22c97a;\n --amber: #f5a623;\n --red: #ff5c5c;\n --radius: 14px;\n --radius-lg: 22px;\n}\n\nhtml { scroll-behavior: smooth; }\nbody { font-family: 'Outfit', sans-serif; background: var(--navy); color: var(--white); overflow-x: hidden; line-height: 1.6; }\na { text-decoration: none; }\n\n\/* NAV *\/\nnav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 200;\n display: flex; align-items: center; justify-content: space-between;\n padding: 0 48px; height: 64px;\n background: rgba(8,21,46,0.93); backdrop-filter: blur(24px);\n border-bottom: 1px solid var(--border-2);\n}\n.nav-logo { font-size: 1.2rem; font-weight: 800; color: var(--white) !important; text-decoration: none !important; -webkit-text-decoration: none !important; letter-spacing: -0.01em; }\n.nav-logo, .nav-logo:hover, .nav-logo:visited, .nav-logo:active { text-decoration: none !important; -webkit-text-decoration: none !important; color: var(--white) !important; }\n.nav-logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg,var(--blue),var(--sky)); border-radius: 9px; display:flex; align-items:center; justify-content:center; font-size:1rem; }\n.nav-links { display: flex; gap: 28px; list-style: none; }\n.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color .2s; }\n.nav-links a:hover { color: var(--white); }\n.nav-cta { background: linear-gradient(135deg,var(--blue),var(--sky)); color: var(--white); border: none; padding: 9px 22px; border-radius: 50px; font-weight: 700; font-size: 0.88rem; cursor: pointer; font-family: 'Outfit',sans-serif; box-shadow: 0 4px 16px rgba(45,185,232,.35); transition: opacity .2s,transform .2s; }\n.nav-cta:hover { opacity:.9; transform:translateY(-1px); }\n\n\/* HERO *\/\n.hero {\n min-height: 100vh; display: flex; align-items: center;\n padding: 100px 48px 80px; position: relative; overflow: hidden;\n background:\n radial-gradient(ellipse 80% 70% at 75% 40%, rgba(45,185,232,.13) 0%, transparent 60%),\n radial-gradient(ellipse 60% 90% at 5% 90%, rgba(26,75,189,.25) 0%, transparent 55%),\n linear-gradient(160deg, #08152e 0%, #0d1e42 50%, #0c1c40 100%);\n}\n.hero::after { content:''; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle,rgba(45,185,232,.25) 1px,transparent 1px); background-size:52px 52px; opacity:.18; }\n\n.hero-inner { max-width:720px; margin:0 auto; width:100%; position:relative; z-index:2; }\n\n.live-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(45,185,232,.12); border:1px solid rgba(45,185,232,.4); color:var(--sky-light); padding:6px 14px; border-radius:50px; font-size:.78rem; font-weight:700; letter-spacing:.4px; margin-bottom:22px; }\n.live-dot { width:7px; height:7px; background:var(--sky); border-radius:50%; animation:blink 2s infinite; }\n@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }\n\nh1 { font-size:clamp(2.4rem,4.5vw,3.6rem); font-weight:800; line-height:1.1; margin-bottom:20px; color:#ffffff !important; }\nh1 em { color:var(--sky) !important; font-style:normal; }\n\n.hero-sub { color:var(--muted); font-size:1.05rem; margin-bottom:34px; line-height:1.75; }\n\n.input-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 22px 18px; margin-bottom:18px; }\n.input-label { font-size:.68rem; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--sky); margin-bottom:12px; display:flex; align-items:center; gap:6px; }\n.input-row { display:flex; gap:10px; }\n.url-input { flex:1; background:var(--navy-2); border:1.5px solid var(--border); border-radius:10px; padding:13px 16px; color:var(--white); font-family:'Outfit',sans-serif; font-size:.88rem; outline:none; transition:border-color .2s; }\n.url-input::placeholder { color:var(--muted); }\n.url-input:focus { border-color:var(--sky); }\n\n.btn-primary { background:linear-gradient(135deg,var(--blue) 0%,var(--sky) 100%); color:var(--white); border:none; padding:13px 22px; border-radius:10px; font-family:'Outfit',sans-serif; font-weight:700; font-size:.92rem; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:7px; box-shadow:0 4px 20px rgba(45,185,232,.35); transition:transform .2s,box-shadow .2s; }\n.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(45,185,232,.45); }\n\n.hero-chips { display:flex; gap:16px; flex-wrap:wrap; }\n.chip { display:flex; align-items:center; gap:6px; color:var(--off-white); font-size:.83rem; }\n.chip::before { content:'\u2713'; color:var(--sky); font-weight:800; font-size:.85rem; }\n\n.hero-stats { display:flex; gap:32px; margin-top:36px; padding-top:28px; border-top:1px solid var(--border-2); }\n.stat-val { font-size:1.6rem; font-weight:800; color:var(--white); }\n.stat-lbl { color:var(--muted); font-size:.76rem; margin-top:2px; }\n\n\/* PHONE *\/\n.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; padding:40px 0; }\n.glow-ring { position:absolute; width:340px; height:480px; background:radial-gradient(ellipse,rgba(45,185,232,.2) 0%,rgba(26,75,189,.1) 40%,transparent 70%); filter:blur(32px); z-index:0; animation:breathe 5s ease-in-out infinite; }\n@keyframes breathe { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.1);opacity:1} }\n\n.phone { position:relative; z-index:2; width:252px; background:#060e22; border-radius:40px; border:2px solid rgba(255,255,255,.13); overflow:hidden; box-shadow:0 0 0 7px rgba(255,255,255,.03),0 32px 80px rgba(0,0,0,.55),0 0 50px rgba(45,185,232,.12); }\n.phone-notch { width:90px; height:22px; background:#060e22; border-radius:0 0 16px 16px; margin:0 auto; border-bottom:1.5px solid rgba(255,255,255,.07); }\n.phone-screen { background:linear-gradient(180deg,#0d1f50 0%,#081638 100%); min-height:478px; }\n.p-topbar { display:flex; align-items:center; justify-content:space-between; padding:9px 13px 7px; border-bottom:1px solid rgba(255,255,255,.07); }\n.p-logo { font-size:.7rem; font-weight:800; color:var(--white); display:flex; align-items:center; gap:5px; }\n.p-logo-icon { width:16px; height:16px; background:linear-gradient(135deg,var(--blue),var(--sky)); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:.5rem; }\n.p-time { font-size:.62rem; color:rgba(255,255,255,.5); font-weight:600; }\n\n.p-body { padding:11px; }\n.p-score { background:linear-gradient(135deg,rgba(26,75,189,.7),rgba(45,185,232,.35)); border:1px solid rgba(45,185,232,.3); border-radius:11px; padding:11px 12px; margin-bottom:9px; display:flex; align-items:center; justify-content:space-between; }\n.p-score-left .lbl { font-size:.5rem; color:var(--sky-light); font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:2px; }\n.p-score-left .num { font-size:1.35rem; font-weight:800; color:var(--white); line-height:1; }\n.p-score-left .sub { font-size:.46rem; color:rgba(255,255,255,.65); margin-top:2px; }\n.p-ring { width:40px; height:40px; }\n.p-ring circle { fill:none; stroke-width:4.5; }\n.p-ring .bg { stroke:rgba(255,255,255,.1); }\n.p-ring .fill { stroke:var(--amber); stroke-dasharray:88; stroke-dashoffset:32; stroke-linecap:round; transform-origin:center; transform:rotate(-90deg); }\n\n.p-tabs { display:flex; gap:3px; margin-bottom:9px; }\n.p-tab { flex:1; text-align:center; font-size:.46rem; font-weight:700; padding:4px 2px; border-radius:5px; color:rgba(255,255,255,.45); cursor:pointer; border:1px solid transparent; transition:all .2s; }\n.p-tab.on { background:rgba(45,185,232,.2); color:var(--sky-light); border-color:rgba(45,185,232,.35); }\n\n.p-risk { display:flex; align-items:flex-start; gap:5px; background:rgba(255,255,255,.07); border-radius:7px; padding:6px 8px; margin-bottom:5px; border-left:3px solid; }\n.p-risk.r { border-color:var(--red); }\n.p-risk.o { border-color:var(--amber); }\n.p-risk.y { border-color:#ffd740; }\n.p-risk-dot { width:5px; height:5px; border-radius:50%; margin-top:3px; flex-shrink:0; }\n.p-risk.r .p-risk-dot { background:var(--red); }\n.p-risk.o .p-risk-dot { background:var(--amber); }\n.p-risk.y .p-risk-dot { background:#ffd740; }\n.p-risk-text { font-size:.46rem; color:rgba(255,255,255,.85); line-height:1.4; }\n.p-risk-text b { display:block; color:var(--white); font-size:.49rem; margin-bottom:1px; }\n\n.p-bid { background:rgba(26,75,189,.5); border:1px solid rgba(45,185,232,.25); border-radius:9px; padding:8px 10px; margin-top:7px; display:flex; justify-content:space-between; align-items:center; }\n.p-bid-group .p-bid-lbl { font-size:.44rem; color:var(--sky-light); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }\n.p-bid-group .p-bid-val { font-size:.82rem; font-weight:800; color:var(--white); }\n\n\/* floating badges *\/\n.float-b { position:absolute; z-index:5; background:var(--card-2); border:1px solid var(--border); border-radius:13px; padding:9px 14px; box-shadow:0 8px 32px rgba(0,0,0,.4); animation:floatY 6s ease-in-out infinite; white-space:nowrap; }\n.float-b-top { top:10px; left:-55px; }\n.float-b-bot { bottom:20px; right:-50px; animation-delay:-3s; }\n@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }\n.fb-lbl { font-size:.58rem; color:var(--sky-light); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:2px; }\n.fb-val { font-size:1.05rem; font-weight:800; color:var(--white); }\n.c-amber { color:var(--amber); }\n.c-green { color:var(--green); }\n\n\/* SECTIONS *\/\n.sect { padding:96px 48px; }\n.sect-alt { background:var(--navy-2); border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2); }\n.sect-inner { max-width:1200px; margin:0 auto; }\n.sect-tag { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--sky); margin-bottom:12px; }\n.sect-title { font-size:clamp(1.7rem,3vw,2.4rem); font-weight:800; color:var(--white); margin-bottom:14px; line-height:1.2; }\n.sect-sub { color:var(--muted); font-size:1rem; max-width:520px; line-height:1.7; }\n\n\/* STEPS *\/\n.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; }\n.step { padding:28px 22px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); position:relative; transition:border-color .25s,transform .25s; }\n.step:hover { border-color:var(--sky); transform:translateY(-4px); }\n.step-num { width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--blue),var(--sky)); display:flex; align-items:center; justify-content:center; font-size:.95rem; font-weight:800; color:var(--white); margin-bottom:16px; }\n.step-icon { font-size:1.4rem; margin-bottom:10px; }\n.step h3 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:8px; }\n.step p { color:var(--muted); font-size:.85rem; line-height:1.65; }\n.step:not(:last-child)::after { content:'\u2192'; position:absolute; right:-14px; top:38px; color:var(--sky); font-size:1.1rem; z-index:1; }\n\n\/* FEATURES *\/\n.feat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:48px; }\n.feat-card { padding:28px; background:var(--card); border:1px solid var(--border); border-top:3px solid; border-radius:var(--radius-lg); transition:all .25s; }\n.feat-card:hover { transform:translateY(-3px); }\n.feat-icon { font-size:1.9rem; margin-bottom:14px; }\n.feat-card h3 { font-size:1.05rem; font-weight:700; color:var(--white); margin-bottom:9px; }\n.feat-card p { color:var(--muted); font-size:.87rem; line-height:1.7; }\n\n\/* PRICING *\/\n.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; align-items:start; }\n.price-card { padding:30px 26px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); position:relative; transition:transform .25s; }\n.price-card:hover { transform:translateY(-4px); }\n.price-card.hot { background:linear-gradient(165deg,#132d6b,#0f2357); border:2px solid var(--sky); box-shadow:0 0 40px rgba(45,185,232,.18),0 16px 48px rgba(0,0,0,.3); transform:scale(1.03); }\n.price-card.hot:hover { transform:scale(1.03) translateY(-4px); }\n.pop-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--blue),var(--sky)); color:var(--white); font-size:.68rem; font-weight:800; padding:4px 16px; border-radius:50px; white-space:nowrap; }\n.price-tier { font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:14px; }\n.price-tag { font-size:2.3rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:6px; }\n.price-tag .per { font-size:.9rem; font-weight:400; color:var(--muted); }\n.price-desc { color:var(--muted); font-size:.82rem; margin-bottom:22px; line-height:1.5; }\n.price-divider { height:1px; background:var(--border); margin-bottom:20px; }\n.price-features { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:26px; }\n.price-features li { display:flex; align-items:flex-start; gap:8px; font-size:.86rem; color:var(--off-white); }\n.price-features li::before { content:'\u2713'; color:var(--green); font-weight:800; flex-shrink:0; margin-top:1px; }\n.price-features li.off { color:var(--muted); }\n.price-features li.off::before { content:'\u2013'; color:var(--border); }\n.btn-outline { display:block; width:100%; text-align:center; padding:13px; background:transparent; border:1.5px solid var(--border); color:var(--off-white); border-radius:11px; font-family:'Outfit',sans-serif; font-weight:700; font-size:.9rem; cursor:pointer; transition:all .2s; }\n.btn-outline:hover { border-color:var(--sky); color:var(--sky); }\n.btn-glow { display:block; width:100%; text-align:center; padding:13px; background:linear-gradient(135deg,var(--blue),var(--sky)); color:var(--white); border:none; border-radius:11px; font-family:'Outfit',sans-serif; font-weight:700; font-size:.9rem; cursor:pointer; box-shadow:0 4px 20px rgba(45,185,232,.3); transition:all .2s; }\n.btn-glow:hover { box-shadow:0 8px 28px rgba(45,185,232,.45); transform:translateY(-1px); }\n\n\/* TESTIMONIALS *\/\n.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }\n.testi { padding:24px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); display:flex; flex-direction:column; transition:border-color .25s; }\n.testi:hover { border-color:rgba(45,185,232,.5); }\n.stars { color:var(--amber); font-size:.85rem; margin-bottom:12px; letter-spacing:1px; }\n.testi-text { color:var(--off-white); font-size:.88rem; line-height:1.7; font-style:italic; margin-bottom:18px; flex:1; }\n.testi-author { display:flex; align-items:center; gap:11px; }\n.avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--blue),var(--sky)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; color:var(--white); }\n.author-name { font-weight:700; font-size:.87rem; color:var(--white); }\n.author-loc { color:var(--muted); font-size:.76rem; margin-top:1px; }\n\n\/* CTA BANNER *\/\n.cta-banner { padding:80px 48px; text-align:center; background:radial-gradient(ellipse 70% 100% at 50% 50%,rgba(26,75,189,.4) 0%,transparent 70%),var(--navy-2); border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2); }\n.cta-banner h2 { font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; color:var(--white); margin-bottom:14px; }\n.cta-banner p { color:var(--muted); font-size:1rem; max-width:440px; margin:0 auto 32px; line-height:1.7; }\n.cta-banner .btn-primary { display:inline-flex; margin:0 auto; font-size:1rem; padding:15px 34px; }\n\n\/* FOOTER *\/\nfooter { padding:36px 48px; background:var(--navy); border-top:1px solid var(--border-2); }\n.footer-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }\n.footer-copy { color:var(--muted); font-size:.82rem; margin-top:6px; }\n.footer-links { display:flex; gap:24px; }\n.footer-links a { color:var(--muted); text-decoration:none; font-size:.82rem; transition:color .2s; }\n.footer-links a:hover { color:var(--white); }\n\n\/* MODAL *\/\n.overlay { display:none; position:fixed; inset:0; z-index:1000; background:rgba(3,8,22,.88); backdrop-filter:blur(14px); align-items:center; justify-content:center; padding:24px; }\n.overlay.open { display:flex; animation:fadein .22s ease; }\n@keyframes fadein { from{opacity:0} to{opacity:1} }\n\n.modal { background:var(--navy-2); border:1px solid var(--border); border-radius:26px; width:100%; max-width:660px; max-height:90vh; overflow-y:auto; box-shadow:0 40px 120px rgba(0,0,0,.6); animation:slideup .28s ease; }\n@keyframes slideup { from{transform:translateY(28px);opacity:0} to{transform:none;opacity:1} }\n\n.modal-head { padding:28px 30px 0; display:flex; align-items:flex-start; justify-content:space-between; }\n.modal-title { font-size:1.35rem; font-weight:800; color:var(--white); margin-bottom:4px; }\n.modal-sub { color:var(--sky-light); font-size:.8rem; }\n.modal-close { background:var(--card); border:1px solid var(--border); color:var(--off-white); width:34px; height:34px; border-radius:50%; font-size:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:16px; transition:background .2s; }\n.modal-close:hover { background:var(--card-2); }\n.modal-body { padding:22px 30px 30px; }\n\n.loading { text-align:center; padding:44px 20px; }\n.spinner { width:46px; height:46px; border-radius:50%; border:3px solid rgba(45,185,232,.2); border-top-color:var(--sky); animation:spin .85s linear infinite; margin:0 auto 20px; }\n@keyframes spin { to{transform:rotate(360deg)} }\n.loading-label strong { display:block; color:var(--white); font-size:1rem; font-weight:700; margin-bottom:6px; }\n.loading-label span { color:var(--muted); font-size:.87rem; }\n\n.result { display:none; }\n.result.show { display:block; }\n\n.demo-note { background:rgba(45,185,232,.1); border:1px solid rgba(45,185,232,.25); border-radius:10px; padding:10px 14px; margin-bottom:18px; font-size:.8rem; color:var(--sky-light); }\n\n.m-score { background:linear-gradient(135deg,rgba(26,75,189,.55),rgba(45,185,232,.2)); border:1px solid rgba(45,185,232,.3); border-radius:16px; padding:20px 22px; margin-bottom:18px; display:flex; align-items:center; gap:20px; }\n.m-score-big { font-size:3.2rem; font-weight:800; color:var(--amber); line-height:1; }\n.m-score-info .lbl { font-size:.68rem; color:var(--sky-light); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }\n.m-score-info .desc { color:var(--off-white); font-size:.84rem; margin-bottom:8px; }\n.bar-wrap { height:6px; background:var(--navy); border-radius:3px; width:180px; overflow:hidden; }\n.bar-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--amber)); border-radius:3px; }\n\n.m-sect-title { font-size:.95rem; font-weight:700; color:var(--white); margin-bottom:12px; }\n.m-risk { display:flex; align-items:flex-start; gap:12px; padding:13px 15px; background:var(--card); border-radius:12px; margin-bottom:8px; border-left:3px solid; }\n.m-risk.hi { border-color:var(--red); }\n.m-risk.md { border-color:var(--amber); }\n.m-risk.lo { border-color:#ffd740; }\n.m-risk-icon { font-size:1rem; flex-shrink:0; margin-top:1px; }\n.m-risk-body strong { display:block; font-size:.88rem; color:var(--white); margin-bottom:3px; }\n.m-risk-body span { font-size:.81rem; color:var(--muted); line-height:1.6; }\n\n.m-bid { background:linear-gradient(135deg,rgba(26,75,189,.45),rgba(45,185,232,.15)); border:1px solid rgba(45,185,232,.3); border-radius:16px; padding:20px 22px; margin-bottom:18px; }\n.m-bid-amounts { display:flex; gap:12px; margin-bottom:14px; }\n.m-bid-box { flex:1; background:var(--card); border-radius:11px; padding:13px; text-align:center; }\n.m-bid-box .bl { font-size:.67rem; color:var(--sky-light); font-weight:700; text-transform:uppercase; letter-spacing:.7px; margin-bottom:6px; }\n.m-bid-box .bv { font-size:1.35rem; font-weight:800; }\n.m-bid-tip { font-size:.82rem; color:var(--muted); padding-top:13px; border-top:1px solid var(--border-2); line-height:1.6; }\n.m-bid-tip strong { color:var(--sky-light); }\n\n.check-item { display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--border-2); font-size:.87rem; color:var(--off-white); }\n.check-item:last-child { border-bottom:none; }\n.cbox { width:19px; height:19px; border:2px solid var(--border); border-radius:5px; flex-shrink:0; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }\n.cbox.on { background:var(--sky); border-color:var(--sky); }\n.cbox.on::after { content:'\u2713'; color:var(--white); font-size:.7rem; font-weight:800; }\n\n.key-screen { padding: 8px 0 4px; }\n.key-screen p { color: var(--muted); font-size: .87rem; line-height: 1.65; margin-bottom: 18px; }\n.key-input { width:100%; background:var(--navy); border:1.5px solid var(--border); border-radius:10px; padding:13px 16px; color:var(--white); font-family:'Outfit',sans-serif; font-size:.88rem; outline:none; transition:border-color .2s; margin-bottom:12px; }\n.key-input:focus { border-color:var(--sky); }\n.key-note { font-size:.75rem; color:var(--muted); margin-top:8px; }\n.key-note a { color:var(--sky); }\n\n\/* RESPONSIVE *\/\n@media (max-width:960px) {\n nav { padding:0 20px; }\n .nav-links { display:none; }\n .hero { padding:90px 20px 60px; }\n .hero-inner { grid-template-columns:1fr; gap:48px; }\n .hero-visual { order:-1; }\n .float-b-top { left:-28px; top:0; }\n .float-b-bot { right:-28px; bottom:0; }\n .sect { padding:64px 20px; }\n .steps { grid-template-columns:repeat(2,1fr); }\n .step:not(:last-child)::after { display:none; }\n .feat-grid { grid-template-columns:1fr; }\n .price-grid { grid-template-columns:1fr; }\n .price-card.hot { transform:none; }\n .testi-grid { grid-template-columns:1fr; }\n .cta-banner { padding:60px 20px; }\n footer { padding:28px 20px; }\n .footer-inner { flex-direction:column; gap:16px; text-align:center; }\n .m-bid-amounts { flex-direction:column; }\n .modal-head,.modal-body { padding-left:20px; padding-right:20px; }\n}\n<\/style>\n<\/head>\n<body>\n\n\n<nav>\n <a class=\"nav-logo\" href=\"#\">WoningKijken<span style=\"color:var(--sky)\">.nl<\/span><\/a>\n <ul class=\"nav-links\">\n <li><a href=\"#hoe\">Hoe werkt het?<\/a><\/li>\n <li><a href=\"#functies\">Functies<\/a><\/li>\n <li><a href=\"#prijzen\">Prijzen<\/a><\/li>\n <li><a href=\"#reviews\">Reviews<\/a><\/li>\n <\/ul>\n <button class=\"nav-cta\" onclick=\"openModal()\">Probeer gratis \u2192<\/button>\n<\/nav>\n\n\n<section class=\"hero\">\n <div class=\"hero-inner\">\n <div>\n <div class=\"live-badge\"><span class=\"live-dot\"><\/span>AI-gedreven aankoopcoach<\/div>\n <h1>Slimmer een woning <em>bekijken<\/em><\/h1>\n <p class=\"hero-sub\">De meeste mensen kopen een huis zonder echt te weten waar ze op moeten letten. WoningKijken is je digitale aankoopcoach \u2014 altijd in je broekzak.<\/p>\n <div class=\"input-card\">\n <div class=\"input-label\">\ud83d\udd17 Plak een woning-link en start direct<\/div>\n <div class=\"input-row\">\n <input class=\"url-input\" id=\"woningInput\" type=\"url\" placeholder=\"https:\/\/www.woningsite.nl\/detail\/4337324\u2026\" \/>\n <button class=\"btn-primary\" onclick=\"handleAnalyse()\">Analyseer \u2192<\/button>\n <\/div>\n <\/div>\n <div class=\"hero-chips\">\n <span class=\"chip\">Risico-analyse<\/span>\n <span class=\"chip\">Live checklist<\/span>\n <span class=\"chip\">Biedadvies<\/span>\n <\/div>\n <div class=\"hero-stats\">\n <div>\n <div class=\"stat-val\">\u20ac300K<span style=\"color:var(--sky)\">+<\/span><\/div>\n <div class=\"stat-lbl\">Gemiddelde aankoopwaarde<\/div>\n <\/div>\n <div>\n <div class=\"stat-val\" style=\"color:var(--sky)\">\u20ac9,95<\/div>\n <div class=\"stat-lbl\">Per woning-analyse<\/div>\n <\/div>\n <div>\n <div class=\"stat-val\">4.9<span style=\"color:var(--amber)\">\u2605<\/span><\/div>\n <div class=\"stat-lbl\">Gemiddelde beoordeling<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n\n <\/div>\n<\/section>\n\n\n<section class=\"sect\" id=\"hoe\">\n <div class=\"sect-inner\">\n <div class=\"sect-tag\">Hoe werkt het?<\/div>\n <h2 class=\"sect-title\">Van woning-link tot koopadvies<br>in vier stappen<\/h2>\n <p class=\"sect-sub\">Geen ingewikkelde tools of jarenlange ervaring nodig. WoningKijken begeleidt je van A tot Z.<\/p>\n <div class=\"steps\">\n <div class=\"step\"><div class=\"step-num\">1<\/div><div class=\"step-icon\">\ud83d\udd17<\/div><h3>Plak een woning-link<\/h3><p>Kopieer de URL van de woning op een woningsite en plak hem in WoningKijken. Klaar.<\/p><\/div>\n <div class=\"step\"><div class=\"step-num\">2<\/div><div class=\"step-icon\">\ud83e\udd16<\/div><h3>Ontvang directe analyse<\/h3><p>Onze AI analyseert fundering, energielabel, VvE-status, marktpositie en meer.<\/p><\/div>\n <div class=\"step\"><div class=\"step-num\">3<\/div><div class=\"step-icon\">\ud83d\udccb<\/div><h3>Gebruik live checklist<\/h3><p>Neem je persoonlijke checklist mee tijdens de bezichtiging. Op je telefoon, offline werkt ook.<\/p><\/div>\n <div class=\"step\"><div class=\"step-num\">4<\/div><div class=\"step-icon\">\ud83d\udcb0<\/div><h3>Krijg koopadvies<\/h3><p>Na de bezichtiging ontvang je een beslisrapport met concreet start- en maximaal bod.<\/p><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"sect sect-alt\" id=\"functies\">\n <div class=\"sect-inner\">\n <div class=\"sect-tag\">Functies<\/div>\n <h2 class=\"sect-title\">Alles wat je nodig hebt<br>als slimme koper<\/h2>\n <p class=\"sect-sub\">Wij vervangen niet de makelaar \u2014 we versterken de koper.<\/p>\n <div class=\"feat-grid\">\n <div class=\"feat-card\" style=\"border-top-color:var(--red)\"><div class=\"feat-icon\">\u26a0\ufe0f<\/div><h3>Risico-analyse op maat<\/h3><p>De AI identificeert verborgen risico’s op basis van bouwjaar, fundering, energielabel en VvE-status. Jij ziet meteen de rode vlaggen v\u00f3\u00f3r de bezichtiging.<\/p><\/div>\n <div class=\"feat-card\" style=\"border-top-color:var(--sky)\"><div class=\"feat-icon\">\ud83d\udccb<\/div><h3>Slimme vragenlijst<\/h3><p>Ontvang een op de woning afgestemde vragenlijst. Nooit meer vergeten te vragen naar het dak, de CV-ketel of de burenafspraken.<\/p><\/div>\n <div class=\"feat-card\" style=\"border-top-color:var(--green)\"><div class=\"feat-icon\">\ud83d\udcf1<\/div><h3>Live bezichtigingsmodus<\/h3><p>Grote knoppen, afvinkbare checklist en notities \u2014 optimaal ontworpen voor gebruik op je telefoon terwijl je door de woning loopt.<\/p><\/div>\n <div class=\"feat-card\" style=\"border-top-color:var(--amber)\"><div class=\"feat-icon\">\ud83d\udca1<\/div><h3>Concreet biedadvies<\/h3><p>Op basis van marktdata, verkoopsduur en woningkenmerken krijg je een realistisch start- en maximaal bod. Geen gissen meer.<\/p><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"sect\" id=\"prijzen\">\n <div class=\"sect-inner\">\n <div class=\"sect-tag\">Prijzen<\/div>\n <h2 class=\"sect-title\">Transparant & eerlijk geprijsd<\/h2>\n <p class=\"sect-sub\">Voor minder dan \u20ac10 voorkom je een miskoop van duizenden euro’s.<\/p>\n <div class=\"price-grid\">\n <div class=\"price-card\">\n <div class=\"price-tier\">Gratis<\/div>\n <div class=\"price-tag\">\u20ac0<\/div>\n <div class=\"price-desc\">Probeer het risico-vrij, zonder creditcard.<\/div>\n <div class=\"price-divider\"><\/div>\n <ul class=\"price-features\">\n <li>1 basis-analyse per maand<\/li><li>Risicoscore<\/li><li>Standaard checklist<\/li>\n <li class=\"off\">Biedadvies<\/li><li class=\"off\">Beslisrapport<\/li><li class=\"off\">Live modus<\/li>\n <\/ul>\n <button class=\"btn-outline\" onclick=\"openModal()\">Gratis starten<\/button>\n <\/div>\n <div class=\"price-card hot\">\n <div class=\"pop-badge\">\u2b50 Meest gekozen<\/div>\n <div class=\"price-tier\">Pay-per-analyse<\/div>\n <div class=\"price-tag\">\u20ac9,95<span class=\"per\"> \/woning<\/span><\/div>\n <div class=\"price-desc\">Betaal alleen als je kijkt. Geen abonnement nodig.<\/div>\n <div class=\"price-divider\"><\/div>\n <ul class=\"price-features\">\n <li>Volledige AI-analyse<\/li><li>Risicoscore & risico-rapport<\/li><li>Slimme vragenlijst<\/li>\n <li>Concreet biedadvies<\/li><li>Beslisrapport na bezichtiging<\/li><li>Live bezichtigingsmodus<\/li>\n <\/ul>\n <button class=\"btn-glow\" onclick=\"openModal()\">Direct starten \u2192<\/button>\n <\/div>\n <div class=\"price-card\">\n <div class=\"price-tier\">Pro Abonnement<\/div>\n <div class=\"price-tag\">\u20ac19<span class=\"per\"> \/maand<\/span><\/div>\n <div class=\"price-desc\">Onbeperkt kijken, vergelijken en exporteren.<\/div>\n <div class=\"price-divider\"><\/div>\n <ul class=\"price-features\">\n <li>Alles van Pay-per-analyse<\/li><li>Onbeperkt analyses<\/li><li>Woningen vergelijken<\/li>\n <li>Prioriteit support<\/li><li>Exporteren naar PDF<\/li><li>Vroeg toegang nieuwe functies<\/li>\n <\/ul>\n <button class=\"btn-outline\" onclick=\"openModal()\">Pro proberen<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section class=\"sect sect-alt\" id=\"reviews\">\n <div class=\"sect-inner\">\n <div class=\"sect-tag\">Reviews<\/div>\n <h2 class=\"sect-title\">Wat kopers zeggen<\/h2>\n <div class=\"testi-grid\">\n <div class=\"testi\"><div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div><p class=\"testi-text\">“Dankzij WoningKijken zag ik meteen dat de fundering risico’s had die de makelaar niet noemde. Dit heeft me waarschijnlijk tienduizenden euro’s bespaard.”<\/p><div class=\"testi-author\"><div class=\"avatar\">S<\/div><div><div class=\"author-name\">Sophie van den Berg<\/div><div class=\"author-loc\">Amsterdam \u00b7 Starter<\/div><\/div><\/div><\/div>\n <div class=\"testi\"><div class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/div><p class=\"testi-text\">“Het biedadvies was spot-on. We zijn \u20ac15.000 onder vraagprijs begonnen en hebben de woning voor onze maximale grens gekregen. Absoluut de moeite waard.”<\/p><div class=\"testi-author\"><div class=\"avatar\">M<\/div><div><div class=\"author-name\">Mark de Vries<\/div><div class=\"author-loc\">Utrecht \u00b7 Doorstromer<\/div><\/div><\/div><\/div>\n <div class=\"testi\"><div class=\"stars\">\u2605\u2605\u2605\u2605\u2606<\/div><p class=\"testi-text\">“De live checklist tijdens de bezichtiging is geniaal. Ik vergat nooit meer een vraag. Eindelijk koop ik met vertrouwen en zonder aankoopmakelaar.”<\/p><div class=\"testi-author\"><div class=\"avatar\">L<\/div><div><div class=\"author-name\">Lisa Hendriks<\/div><div class=\"author-loc\">Rotterdam \u00b7 Starter<\/div><\/div><\/div><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<div class=\"cta-banner\">\n <h2>Klaar om slimmer te kopen?<\/h2>\n <p>WoningKijken maakt van elke koper een slimme koper. Begin vandaag gratis.<\/p>\n <button class=\"btn-primary\" onclick=\"openModal()\">\ud83c\udfe0 Start met WoningKijken \u2192<\/button>\n<\/div>\n\n\n<footer>\n <div class=\"footer-inner\">\n <div>\n <div class=\"nav-logo\" style=\"margin-bottom:6px\">WoningKijken<span style=\"color:var(--sky)\">.nl<\/span><\/div>\n <div class=\"footer-copy\">\u00a9 2025 WoningKijken.nl \u2014 Jouw digitale aankoopcoach<\/div>\n <\/div>\n <div class=\"footer-links\">\n <a href=\"#\">Privacy<\/a><a href=\"#\">Voorwaarden<\/a><a href=\"#\">Contact<\/a><a href=\"#\">Over ons<\/a>\n <\/div>\n <\/div>\n<\/footer>\n\n\n<div class=\"overlay\" id=\"overlay\" onclick=\"overlayClick(event)\">\n <div class=\"modal\" id=\"modal\">\n <div class=\"modal-head\">\n <div>\n <div class=\"modal-title\" id=\"mTitle\">\ud83d\udd11 API-sleutel instellen<\/div>\n <div class=\"modal-sub\" id=\"mSub\">Eenmalig nodig voor AI-analyses<\/div>\n <\/div>\n <button class=\"modal-close\" onclick=\"closeModal()\">\u2715<\/button>\n <\/div>\n <div class=\"modal-body\">\n\n \n <div id=\"keyScreen\" class=\"key-screen\">\n <p>WoningKijken gebruikt de Anthropic AI voor echte analyses. Vul hieronder je API-sleutel in \u2014 deze wordt alleen in je browser opgeslagen en nergens naartoe gestuurd.<\/p>\n <input class=\"key-input\" id=\"apiKeyInput\" type=\"password\" placeholder=\"sk-ant-api03-\u2026\" autocomplete=\"off\" \/>\n <button class=\"btn-glow\" style=\"width:100%;margin-top:4px\" onclick=\"slaanSleutelOp()\">Sleutel opslaan & doorgaan \u2192<\/button>\n <p class=\"key-note\">Sleutel aanmaken via <a href=\"https:\/\/console.anthropic.com\/settings\/keys\" target=\"_blank\">console.anthropic.com<\/a>. Je sleutel wordt alleen lokaal bewaard (sessionStorage).<\/p>\n <\/div>\n\n \n <div class=\"loading\" id=\"loading\" style=\"display:none\">\n <div class=\"spinner\"><\/div>\n <div class=\"loading-label\">\n <strong>Woning wordt geanalyseerd\u2026<\/strong>\n <span id=\"loadMsg\">Woning-informatie ophalen\u2026<\/span>\n <\/div>\n <\/div>\n\n \n <div id=\"errorBox\" style=\"display:none;text-align:center;padding:32px 8px\">\n <div style=\"font-size:2rem;margin-bottom:14px\">\u26a0\ufe0f<\/div>\n <div id=\"errorMsg\" style=\"color:var(--off-white);font-size:.9rem;margin-bottom:20px;line-height:1.6\"><\/div>\n <button class=\"btn-glow\" style=\"display:inline-block;width:auto;padding:11px 24px\" onclick=\"wisSleutel()\">Opnieuw proberen<\/button>\n <\/div>\n\n \n <div class=\"result\" id=\"result\">\n <div class=\"m-score\">\n <div class=\"m-score-big\" id=\"r-score-num\">\u2013<\/div>\n <div class=\"m-score-info\">\n <div class=\"lbl\">Risicoscore (van 10)<\/div>\n <div class=\"desc\" id=\"r-score-desc\"><\/div>\n <div class=\"bar-wrap\"><div class=\"bar-fill\" id=\"r-bar\" style=\"width:0%\"><\/div><\/div>\n <\/div>\n <\/div>\n <div style=\"margin-bottom:18px\">\n <div class=\"m-sect-title\">\u26a0\ufe0f Ge\u00efdentificeerde risico’s<\/div>\n <div id=\"r-risks\"><\/div>\n <\/div>\n <div class=\"m-bid\">\n <div class=\"m-sect-title\">\ud83d\udcb0 Biedstrategie<\/div>\n <div class=\"m-bid-amounts\">\n <div class=\"m-bid-box\"><div class=\"bl\">Startbod<\/div><div class=\"bv\" id=\"r-start\" style=\"color:var(--green)\">\u2013<\/div><\/div>\n <div class=\"m-bid-box\"><div class=\"bl\">Maximaal bod<\/div><div class=\"bv\" id=\"r-max\" style=\"color:var(--amber)\">\u2013<\/div><\/div>\n <div class=\"m-bid-box\"><div class=\"bl\">Vraagprijs<\/div><div class=\"bv\" id=\"r-ask\" style=\"color:var(--white)\">\u2013<\/div><\/div>\n <\/div>\n <div class=\"m-bid-tip\" id=\"r-bid-tip\"><\/div>\n <\/div>\n <div style=\"margin-bottom:22px\">\n <div class=\"m-sect-title\">\ud83d\udccb Bezichtigings-checklist<\/div>\n <div id=\"r-checklist\"><\/div>\n <\/div>\n <div style=\"text-align:center;padding-top:4px;display:flex;gap:10px;justify-content:center\">\n <button class=\"btn-outline\" style=\"width:auto;padding:9px 18px;font-size:.82rem\" onclick=\"closeModal()\">\u2715 Sluiten<\/button>\n <button class=\"btn-outline\" style=\"width:auto;padding:9px 18px;font-size:.82rem\" onclick=\"wisSleutel()\">\ud83d\udd11 Sleutel wijzigen<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/div>\n\n<script>\nconst MSGS = ['Woning-informatie ophalen\u2026','Kenmerken & bouwjaar analyseren\u2026','Marktdata vergelijken\u2026',\"Risico's beoordelen\u2026\",'Biedstrategie berekenen\u2026'];\nconst KEY_NAME = 'wk_api_key';\n\nfunction getKey() { return sessionStorage.getItem(KEY_NAME) || ''; }\n\n\/\/ \u2500\u2500 Modal openen \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\nfunction openModal() {\n document.getElementById('overlay').classList.add('open');\n document.body.style.overflow = 'hidden';\n if (getKey()) {\n startAnalyse();\n } else {\n toonScherm('key');\n document.getElementById('mTitle').textContent = '\ud83d\udd11 API-sleutel instellen';\n document.getElementById('mSub').textContent = 'Eenmalig nodig voor AI-analyses';\n }\n}\nfunction handleAnalyse() { openModal(); }\n\nfunction closeModal() {\n document.getElementById('overlay').classList.remove('open');\n document.body.style.overflow = '';\n}\nfunction overlayClick(e) {\n if (e.target === document.getElementById('overlay')) closeModal();\n}\n\n\/\/ \u2500\u2500 Schermen wisselen \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\nfunction toonScherm(naam) {\n document.getElementById('keyScreen').style.display = naam === 'key' ? 'block' : 'none';\n document.getElementById('loading').style.display = naam === 'loading' ? 'block' : 'none';\n document.getElementById('errorBox').style.display = naam === 'error' ? 'block' : 'none';\n document.getElementById('result').classList.toggle('show', naam === 'result');\n}\n\n\/\/ \u2500\u2500 Sleutel opslaan \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\nfunction slaanSleutelOp() {\n const key = document.getElementById('apiKeyInput').value.trim();\n if (!key || key.length < 20) {\n toonFout('Voer een geldige Anthropic API-sleutel in.');\n return;\n }\n sessionStorage.setItem(KEY_NAME, key);\n startAnalyse();\n}\n\n\/\/ \u2500\u2500 Analyse starten \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\nlet loadTimer = null;\nfunction startAnalyse() {\n toonScherm('loading');\n document.getElementById('mTitle').textContent = '\ud83e\udd16 Woning analyseren\u2026';\n document.getElementById('mSub').textContent = 'AI is bezig met de analyse';\n let i = 0;\n const el = document.getElementById('loadMsg');\n el.textContent = MSGS[0];\n clearInterval(loadTimer);\n loadTimer = setInterval(() => { if (++i < MSGS.length) el.textContent = MSGS[i]; }, 900);\n const url = document.getElementById('woningInput').value.trim();\n runAnalysis(url);\n}\n\n\/\/ \u2500\u2500 Fout tonen \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\nfunction toonFout(bericht, verwijderSleutel = false) {\n clearInterval(loadTimer);\n if (verwijderSleutel) sessionStorage.removeItem(KEY_NAME);\n document.getElementById('mTitle').textContent = '\u26a0\ufe0f Er ging iets mis';\n document.getElementById('mSub').textContent = '';\n document.getElementById('errorMsg').textContent = bericht;\n toonScherm('error');\n}\n\n\/\/ \u2500\u2500 Pagina-inhoud ophalen via CORS-proxy \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\nasync function haalPaginainhoud(url) {\n if (!url) return null;\n try {\n const proxyUrl = `https:\/\/api.allorigins.win\/get?url=${encodeURIComponent(url)}`;\n const resp = await fetch(proxyUrl, { signal: AbortSignal.timeout(10000) });\n if (!resp.ok) return null;\n const data = await resp.json();\n const html = data.contents || '';\n const tmp = document.createElement('div');\n tmp.innerHTML = html;\n tmp.querySelectorAll('script,style,nav,footer,header,noscript,svg,img,button,form').forEach(el => el.remove());\n const tekst = (tmp.innerText || tmp.textContent || '').replace(\/\\s+\/g, ' ').trim();\n return tekst.slice(0, 6000) || null;\n } catch {\n return null;\n }\n}\n\n\/\/ \u2500\u2500 API-aanroep \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\nasync function runAnalysis(url) {\n const key = getKey();\n\n \/\/ Stap 1: pagina-inhoud ophalen\n document.getElementById('loadMsg').textContent = 'Woningpagina ophalen\u2026';\n const paginaTekst = await haalPaginainhoud(url);\n\n document.getElementById('loadMsg').textContent = \"Gegevens analyseren\u2026\";\n\n const context = paginaTekst\n ? `Hieronder staat de tekst van de woningpagina. Gebruik alle gegevens die erin staan:\\n\\n---\\n${paginaTekst}\\n---\\n\\nHaal de vraagprijs, het energielabel, het bouwjaar, de oppervlakte, VvE-informatie en alle andere kenmerken direct uit deze tekst.`\n : `De pagina kon niet worden opgehaald voor URL: \"${url || 'geen URL'}\". Maak een realistische analyse op basis van wat je weet over de Nederlandse woningmarkt.`;\n\n const prompt = `Je bent WoningKijken, een Nederlandse AI-aankoopcoach.\nURL: \"${url || 'geen URL'}\"\n\n${context}\n\nRetourneer ALLEEN geldig JSON, geen tekst of backticks eromheen:\n{\n \"adres\": \"Straatnaam nr, Stad (uit de paginatekst)\",\n \"risicoscore\": 6.5,\n \"risico_omschrijving\": \"Korte samenvatting risicoprofiel\",\n \"risicos\": [\n { \"niveau\": \"hoog\", \"titel\": \"Specifiek risico gebaseerd op de woningdata\", \"toelichting\": \"Concrete uitleg met bedragen of aandachtspunten\" },\n { \"niveau\": \"midden\", \"titel\": \"...\", \"toelichting\": \"...\" },\n { \"niveau\": \"laag\", \"titel\": \"...\", \"toelichting\": \"...\" }\n ],\n \"vraagprijs\": \"\u20acXXX.000 (uit paginatekst)\",\n \"startbod\": \"\u20acXXX.000\",\n \"maximaal_bod\": \"\u20acXXX.000\",\n \"biedadvies\": \"2-3 concrete zinnen gebaseerd op de werkelijke woningdata\",\n \"checklist\": [\"14+ specifieke checkpunten afgestemd op deze woning en haar kenmerken\"]\n}\nMinimaal 4 risico's, minimaal 14 checkpunten. Wees specifiek over energielabel, bouwjaar, VvE, oppervlakte etc. als die in de paginatekst staan.`;\n\n try {\n const resp = await fetch('https:\/\/api.anthropic.com\/v1\/messages', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'x-api-key': key,\n 'anthropic-version': '2023-06-01',\n 'anthropic-dangerous-direct-browser-access': 'true'\n },\n body: JSON.stringify({\n model: 'claude-sonnet-4-20250514',\n max_tokens: 1600,\n messages: [{ role: 'user', content: prompt }]\n })\n });\n\n if (resp.status === 401) {\n toonFout('Ongeldige API-sleutel. Controleer je sleutel op console.anthropic.com en probeer opnieuw.', true);\n return;\n }\n if (!resp.ok) {\n const e = await resp.json().catch(() => ({}));\n toonFout(`API-fout (${resp.status}): ${e.error?.message || 'Onbekende fout'}`);\n return;\n }\n\n const data = await resp.json();\n const raw = data.content.map(b => b.text || '').join('');\n const clean = raw.replace(\/```json|```\/g, '').trim();\n const a = JSON.parse(clean);\n\n clearInterval(loadTimer);\n renderAnalyse(a, url);\n\n } catch (err) {\n toonFout('Kon geen verbinding maken. (' + (err.message || err) + ')');\n }\n}\n\n\/\/ \u2500\u2500 Resultaat renderen \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\nfunction renderAnalyse(a, url) {\n const score = parseFloat(a.risicoscore);\n const scoreEl = document.getElementById('r-score-num');\n scoreEl.textContent = score.toFixed(1);\n scoreEl.style.color = score >= 7 ? 'var(--red)' : score >= 5 ? 'var(--amber)' : 'var(--green)';\n document.getElementById('r-score-desc').textContent = a.risico_omschrijving;\n document.getElementById('r-bar').style.width = (score * 10) + '%';\n\n const nMap = { hoog: ['hi','\ud83d\udd34'], midden: ['md','\ud83d\udfe0'], laag: ['lo','\ud83d\udfe1'] };\n document.getElementById('r-risks').innerHTML = a.risicos.map(r => {\n const [cls, icon] = nMap[r.niveau] || ['lo','\ud83d\udfe1'];\n return `<div class=\"m-risk ${cls}\"><div class=\"m-risk-icon\">${icon}<\/div><div class=\"m-risk-body\"><strong>${r.titel}<\/strong><span>${r.toelichting}<\/span><\/div><\/div>`;\n }).join('');\n\n document.getElementById('r-start').textContent = a.startbod;\n document.getElementById('r-max').textContent = a.maximaal_bod;\n document.getElementById('r-ask').textContent = a.vraagprijs;\n document.getElementById('r-bid-tip').innerHTML = `<strong>Tip:<\/strong> ${a.biedadvies}`;\n\n document.getElementById('r-checklist').innerHTML = a.checklist.map(item =>\n `<div class=\"check-item\"><div class=\"cbox\" onclick=\"this.classList.toggle('on')\"><\/div>${item}<\/div>`\n ).join('');\n\n document.getElementById('mTitle').textContent = '\u2705 Analyse gereed';\n document.getElementById('mSub').textContent = a.adres || url || 'Voorbeeldwoning';\n toonScherm('result');\n}\n\n\/\/ \u2500\u2500 Sleutel wissen (reset) \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\nfunction wisSleutel() {\n sessionStorage.removeItem(KEY_NAME);\n document.getElementById('apiKeyInput').value = '';\n document.getElementById('mTitle').textContent = '\ud83d\udd11 API-sleutel instellen';\n document.getElementById('mSub').textContent = 'Eenmalig nodig voor AI-analyses';\n toonScherm('key');\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>WoningKijken.nl \u2014 AI-gedreven aankoopcoach WoningKijken.nl Hoe werkt het? Functies Prijzen Reviews Probeer gratis \u2192 AI-gedreven aankoopcoach Slimmer een woning bekijken […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/woningkijken.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":12,"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":88,"href":"https:\/\/woningkijken.nl\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/88"}],"wp:attachment":[{"href":"https:\/\/woningkijken.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}