
:root{--bg:#050507;--panel:#101218;--soft:#171922;--text:#f4f4f4;--muted:#b8bbc6;--gold:#ffb400;--blue:#4db8ff;--line:rgba(255,255,255,.1);--max:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 18% 0%,rgba(77,184,255,.14),transparent 32%),radial-gradient(circle at 85% 8%,rgba(255,180,0,.13),transparent 31%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}
.site-header{position:sticky;top:0;z-index:20;background:rgba(5,5,7,.84);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{max-width:var(--max);margin:auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--gold));display:flex;align-items:center;justify-content:center;color:#071018;font-weight:1000;letter-spacing:-.05em}.brand-text{display:flex;flex-direction:column;line-height:1.05}.brand-text strong{font-size:16px}.brand-text em{font-style:normal;font-size:12px;color:var(--muted)}.nav-links{display:flex;align-items:center;gap:20px;font-size:14px}.nav-cta{background:linear-gradient(135deg,var(--blue),var(--gold));color:#071018;padding:10px 14px;border-radius:999px;font-weight:900}.nav-toggle{display:none;background:var(--soft);color:white;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.hero{max-width:var(--max);margin:auto;padding:86px 20px 36px;display:grid;grid-template-columns:1.35fr .75fr;gap:28px;align-items:center}.subhero{padding-top:62px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--blue);font-size:12px;font-weight:900;margin:0 0 10px}h1{font-size:clamp(38px,6vw,76px);line-height:.98;margin:0 0 20px;letter-spacing:-.06em}h2{font-size:clamp(26px,3vw,42px);line-height:1.05;margin:0 0 16px;letter-spacing:-.04em}h3{margin:0 0 8px;font-size:20px}.hero-text,.section-intro{font-size:18px;color:var(--muted);max-width:760px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:13px 18px;font-weight:900;border:1px solid var(--line);cursor:pointer}.btn.primary{background:linear-gradient(135deg,var(--blue),var(--gold));color:#071018;border:0}.btn.ghost{background:rgba(255,255,255,.06)}.btn.big{font-size:18px;padding:16px 22px;width:100%}.trust-row{display:flex;gap:10px;flex-wrap:wrap}.trust-row span{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:#eee;font-size:13px}
.hero-panel,.form-section,.lead-form,.card,.stat-box,.steps div,.ai-box,.scan-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:26px;box-shadow:0 24px 70px rgba(0,0,0,.25)}.hero-panel{padding:28px}.ai-panel{position:relative;overflow:hidden}.ai-panel:before{content:"";position:absolute;inset:-60px;background:radial-gradient(circle,rgba(77,184,255,.17),transparent 45%);animation:pulse 4s ease-in-out infinite}
.section{max-width:var(--max);margin:auto;padding:54px 20px}.grid{display:grid;gap:16px}.cards{grid-template-columns:repeat(3,1fr)}.card{display:block;padding:24px}.card p{color:var(--muted);margin:0}.split{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}.stat-box{padding:36px;text-align:center}.stat-box span{display:block;font-size:70px;line-height:1;font-weight:1000;color:var(--blue);letter-spacing:-.07em}.stat-box p{color:var(--muted)}
.form-section{max-width:var(--max);margin:22px auto;padding:28px;display:grid;grid-template-columns:.85fr 1.15fr;gap:24px}.form-copy p,.form-note{color:var(--muted)}.lead-form{padding:22px;display:grid;gap:14px}.lead-form label span{display:block;font-weight:900;font-size:13px;margin-bottom:6px}.lead-form input{width:100%;border:1px solid var(--line);background:#08090d;color:white;border-radius:14px;padding:15px 14px;font-size:16px;outline:none;text-transform:none}.lead-form input[name="kenteken"]{text-transform:uppercase}.lead-form input:focus{border-color:rgba(77,184,255,.75);box-shadow:0 0 0 4px rgba(77,184,255,.12)}.hp{position:absolute!important;left:-9999px!important;opacity:0!important}.form-status{font-size:14px;color:var(--blue);font-weight:800;min-height:20px}.check-list li{margin:8px 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.steps div{padding:22px}.steps b{display:inline-flex;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--gold));color:#071018;align-items:center;justify-content:center;margin-bottom:14px}.ai-box{padding:34px}.meter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.meter-grid div{background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:18px;padding:18px}.meter-grid span{display:block;color:var(--blue);font-weight:1000}.meter-grid strong{display:block;font-size:18px;margin:6px 0}.meter-grid p{color:var(--muted);margin:0}
.faq details{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:18px;margin:10px 0;padding:16px}.faq summary{cursor:pointer;font-weight:900}.faq p{color:var(--muted)}.final-cta{max-width:var(--max);margin:40px auto 70px;padding:48px 20px;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.thanks-page{min-height:calc(100vh - 90px);display:flex;align-items:center;justify-content:center;padding:60px 20px}.scan-card{max-width:760px;text-align:center;padding:48px}.scan-ring{width:96px;height:96px;border-radius:50%;border:3px solid rgba(77,184,255,.25);border-top-color:var(--blue);margin:0 auto 22px;animation:spin 1.1s linear infinite}.analysis-list{display:grid;gap:10px;margin:24px auto;max-width:520px;text-align:left}.analysis-list div{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:13px}.analysis-list span{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--blue);margin-right:10px;box-shadow:0 0 18px var(--blue)}.confirm-text{font-size:18px;color:#fff;font-weight:800}
.footer{border-top:1px solid var(--line);background:#030305}.footer>div{max-width:var(--max);margin:auto;padding:34px 20px;color:var(--muted)}.footer a{color:white}.footer-brand{display:inline-flex;margin-bottom:14px}.disclaimer{font-size:12px;color:#8b8f9d}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@media(max-width:900px){.brand-text em{display:none}.nav-toggle{display:block}.nav-links{display:none;position:absolute;left:20px;right:20px;top:72px;background:#0b0c11;border:1px solid var(--line);border-radius:18px;padding:16px;flex-direction:column;align-items:flex-start}.nav-links.open{display:flex}.hero,.form-section,.split{grid-template-columns:1fr}.cards,.meter-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}h1{font-size:42px}.hero{padding-top:48px}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.hero-actions .btn{width:100%}.trust-row span{width:100%;text-align:center}.section{padding:38px 16px}.hero{padding-left:16px;padding-right:16px}.form-section{margin-left:16px;margin-right:16px}.nav{padding-left:16px;padding-right:16px}.scan-card{padding:30px 20px}}

.brand-card h3{font-size:19px}.brand-grid{grid-template-columns:repeat(3,1fr)}@media(max-width:900px){.brand-grid{grid-template-columns:1fr}}


/* SEO Stable v3 layout guards */
.form-section,.lead-card,.section,.hero,.final-cta{max-width:1160px;margin-left:auto;margin-right:auto}
.form-section,.lead-card{padding:28px 20px}
.hero-panel{overflow:hidden}
.hero-panel img[src*="og-image"]{display:none!important}
.card p,.hero-text,.section-intro,.form-note{color:var(--muted,#b8bbc6)}
.brand{gap:14px}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
@media(max-width:900px){.form-section,.lead-card{margin-left:16px;margin-right:16px}.nav-links.open{display:flex!important}}

/* ============================================================
   NEXT-LEVEL BRAND HERO — cinematic car reveal
   ============================================================ */
.brand-hero{position:relative;max-width:var(--max);margin:0 auto 0;padding:0 20px 48px;overflow:visible}
.brand-hero-inner{position:relative;border-radius:28px;overflow:hidden;background:#0a0b10;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07)}
.brand-hero-img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.brand-hero-img.loaded{opacity:1;transform:scale(1)}
.brand-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(5,5,7,.82) 0%,rgba(5,5,7,.38) 55%,rgba(5,5,7,.0) 100%),linear-gradient(to top,rgba(5,5,7,.7) 0%,transparent 40%);pointer-events:none}
.brand-hero-badge{position:absolute;top:22px;left:22px;display:inline-flex;align-items:center;gap:8px;background:rgba(5,5,7,.72);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:800;color:#fff;letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(-10px);transition:all .6s .4s cubic-bezier(.22,1,.36,1)}
.brand-hero-badge.loaded{opacity:1;transform:translateY(0)}
.brand-hero-badge::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue);flex-shrink:0;animation:blink 2s ease-in-out infinite}
.brand-hero-stats{position:absolute;bottom:24px;left:24px;display:flex;gap:12px;opacity:0;transform:translateY(14px);transition:all .7s .55s cubic-bezier(.22,1,.36,1)}
.brand-hero-stats.loaded{opacity:1;transform:translateY(0)}
.brand-stat{background:rgba(5,5,7,.75);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.11);border-radius:14px;padding:12px 16px;min-width:90px}
.brand-stat strong{display:block;font-size:22px;font-weight:1000;color:var(--blue);line-height:1;letter-spacing:-.04em}
.brand-stat span{display:block;font-size:11px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.08em}
.brand-hero-cta{position:absolute;bottom:24px;right:24px;opacity:0;transform:translateY(14px);transition:all .7s .65s cubic-bezier(.22,1,.36,1)}
.brand-hero-cta.loaded{opacity:1;transform:translateY(0)}

/* glow rim */
.brand-hero-inner::after{content:'';position:absolute;inset:0;border-radius:28px;box-shadow:inset 0 0 0 1px rgba(77,184,255,.15);pointer-events:none}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ============================================================
   SCROLL-REVEAL — fade up on enter
   ============================================================ */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}.reveal-d4{transition-delay:.4s}

/* ============================================================
   STEPS (hero panel) upgrade
   ============================================================ */
.hero-panel{position:relative;overflow:hidden}
.hero-panel::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(77,184,255,.18),transparent 70%);pointer-events:none}
.hero-panel ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.hero-panel ul li{display:flex;align-items:center;gap:10px;font-size:15px;color:#dde}
.hero-panel ul li::before{content:'✓';width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--gold));color:#071018;font-size:11px;font-weight:1000;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ============================================================
   BEDANKT — NEXT LEVEL confirmation
   ============================================================ */
.thanks-page{min-height:calc(100vh - 90px);display:flex;align-items:flex-start;justify-content:center;padding:60px 20px 80px;background:radial-gradient(ellipse at 50% 0%,rgba(77,184,255,.12) 0%,transparent 55%)}
.confirm-card{max-width:860px;width:100%;text-align:left}

/* success icon */
.confirm-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,rgba(77,184,255,.2),rgba(255,180,0,.15));border:2px solid rgba(77,184,255,.4);display:flex;align-items:center;justify-content:center;margin:0 0 28px;position:relative;animation:iconPop .6s cubic-bezier(.34,1.56,.64,1) both}
.confirm-icon svg{width:36px;height:36px;stroke:var(--blue);stroke-width:2.5;fill:none;stroke-dasharray:60;stroke-dashoffset:60;animation:drawCheck .5s .4s ease forwards}
.confirm-icon::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(77,184,255,.18);animation:ripple 2.2s ease-out 0.4s infinite}

@keyframes iconPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
@keyframes ripple{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.7);opacity:0}}

.confirm-card h1{font-size:clamp(32px,5vw,60px);margin:0 0 10px;letter-spacing:-.06em}
.confirm-card .sub{font-size:18px;color:var(--muted);margin:0 0 40px;max-width:580px}

/* progress timeline */
.confirm-timeline{display:grid;gap:0;position:relative;margin:0 0 40px}
.confirm-timeline::before{content:'';position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:linear-gradient(to bottom,var(--blue),rgba(77,184,255,.1));z-index:0}
.tl-step{display:flex;gap:20px;align-items:flex-start;padding:18px 0;position:relative;z-index:1}
.tl-dot{width:48px;height:48px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;position:relative;transition:all .4s}
.tl-dot.done{background:linear-gradient(135deg,var(--blue),var(--gold));box-shadow:0 0 24px rgba(77,184,255,.4)}
.tl-dot.active{background:rgba(77,184,255,.15);border:2px solid var(--blue);animation:activePulse 1.8s ease-in-out infinite}
.tl-dot.pending{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12)}
.tl-body{padding-top:10px;flex:1}
.tl-body strong{display:block;font-size:17px;margin-bottom:4px}
.tl-body p{color:var(--muted);margin:0;font-size:14px;line-height:1.5}
.tl-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:3px 10px;margin-top:6px}
.tl-badge.done-badge{background:rgba(77,184,255,.12);color:var(--blue)}
.tl-badge.active-badge{background:rgba(255,180,0,.12);color:var(--gold);animation:badgePulse 1.8s ease-in-out infinite}
.tl-badge.pending-badge{background:rgba(255,255,255,.06);color:var(--muted)}
.tl-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}

@keyframes activePulse{0%,100%{box-shadow:0 0 0 0 rgba(77,184,255,.4)}50%{box-shadow:0 0 0 10px rgba(77,184,255,.0)}}
@keyframes badgePulse{0%,100%{opacity:1}50%{opacity:.55}}

/* info bar */
.confirm-infobar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 36px}
.confirm-info-item{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:18px;padding:20px;text-align:center}
.confirm-info-item .icon{font-size:28px;margin-bottom:8px;display:block}
.confirm-info-item strong{display:block;font-size:15px;margin-bottom:4px}
.confirm-info-item span{font-size:13px;color:var(--muted)}

/* countdown */
.confirm-countdown{background:linear-gradient(135deg,rgba(77,184,255,.08),rgba(255,180,0,.06));border:1px solid rgba(77,184,255,.2);border-radius:18px;padding:20px 24px;display:flex;align-items:center;gap:16px;margin-bottom:36px}
.countdown-num{font-size:42px;font-weight:1000;color:var(--blue);letter-spacing:-.06em;line-height:1;min-width:60px}
.countdown-text strong{display:block;font-size:15px}
.countdown-text span{font-size:13px;color:var(--muted)}

/* actions */
.confirm-actions{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:640px){.confirm-infobar{grid-template-columns:1fr}.confirm-timeline::before{left:19px}.tl-dot{width:40px;height:40px}.confirm-countdown{flex-direction:column;text-align:center}}
