/* DV Institute Community Funnel — shared styles */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0a;
  --bg-2:#0f0f12;
  --text:#f5f5f7;
  --text-muted:#a1a1aa;
  --text-dim:#71717a;
  --accent:#4d8eff;
  --accent-deep:#3670d6;
  --accent-soft:rgba(77,142,255,.12);
  --accent-glow:rgba(77,142,255,.4);
  --gold:#d4af37;
  --green:#4ade80;
  --red:#f87171;
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.12);
}
html,body{height:100%}
body{
  background:#000;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%,rgba(77,142,255,.16),transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%,rgba(54,112,214,.10),transparent 70%);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Ruistextuur, exact zoals dv-institute.nl */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:overlay;
}
/* Zwevende blauwe orbs, exact zoals dv-institute.nl */
.bg-orb{
  position:fixed;
  width:600px;height:600px;
  border-radius:50%;
  filter:blur(120px);
  opacity:.18;
  z-index:0;
  pointer-events:none;
  animation:orb-float 22s ease-in-out infinite;
}
.bg-orb.one{background:radial-gradient(circle,#4d8eff 0%,transparent 70%);top:-200px;left:-200px}
.bg-orb.two{background:radial-gradient(circle,#3b82f6 0%,transparent 70%);bottom:-200px;right:-200px;animation-delay:-11s;opacity:.12}
@keyframes orb-float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-40px) scale(1.1)}
}
@media (prefers-reduced-motion: reduce){ .bg-orb{animation:none} }

main{position:relative;z-index:2;min-height:100vh;padding:32px 20px 60px}
.container{max-width:720px;margin:0 auto}

/* Top logo */
.top-logo{text-align:center;margin-bottom:28px}
.top-logo img{height:34px;width:auto;opacity:.95;filter:drop-shadow(0 0 16px rgba(77,142,255,.25))}

/* Step indicator */
.steps-bar{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:36px;
}
.step-dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.15);
  border:1.5px solid rgba(255,255,255,.2);
  transition:all .2s;
}
.step-dot.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(77,142,255,.5)}
.step-dot.done{background:var(--green);border-color:var(--green)}
.step-line{
  width:36px;height:1.5px;
  background:rgba(255,255,255,.12);
}
.step-line.done{background:var(--green)}

/* Hero */
.hero{text-align:center;margin-bottom:36px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;
  background:linear-gradient(135deg,rgba(77,142,255,.18),rgba(77,142,255,.08));
  border:1.5px solid rgba(77,142,255,.45);
  border-radius:999px;
  font-size:12px;font-weight:700;
  color:#bfdbfe;
  letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:22px;
}
.hero-eyebrow .pulse{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px var(--accent),0 0 22px rgba(77,142,255,.5);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}

h1{
  font-size:clamp(28px,5.5vw,42px);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.12;
  margin-bottom:14px;
  color:#fff;
}
h1 em{
  font-family:'Instrument Serif',serif;
  font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#bfdbfe 0%,#4d8eff 60%,#3670d6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  display:inline-block;
  padding:0 .05em .15em;
  line-height:1.4;
}
.lead{
  font-size:16px;color:var(--text-muted);
  max-width:560px;margin:0 auto;
  line-height:1.55;
}

/* Bullets */
.bullets{
  list-style:none;
  display:flex;flex-direction:column;gap:14px;
  margin:32px 0;
}
.bullets li{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:14px;
  transition:transform .2s,border-color .2s;
}
.bullets li:hover{transform:translateY(-2px);border-color:rgba(77,142,255,.3)}
.bullets li .icon{
  flex-shrink:0;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  font-size:18px;
  background:rgba(77,142,255,.12);
  border:1px solid rgba(77,142,255,.25);
}
.bullets li .icon svg{width:19px;height:19px;fill:currentColor;display:block}
.bullets li .icon{color:#7fb0ff}
.bullets li.negative .icon{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.2);color:#fca5a5}
.bullets li.positive .icon{background:rgba(74,222,128,.10);border-color:rgba(74,222,128,.25);color:#86efac}
.bullets li.gold .icon{background:rgba(212,175,55,.10);border-color:rgba(212,175,55,.28);color:#e8c86a}
/* Klein inline-icoontje in lopende tekst (zoals de hoofdsite) */
.inline-ico{width:14px;height:14px;fill:currentColor;vertical-align:-2px;margin-right:5px;opacity:.85}
.bullets li .text{flex:1;min-width:0}
.bullets li .text h3{
  font-size:15px;font-weight:700;
  color:#fff;
  margin-bottom:3px;
  letter-spacing:-.005em;
}
.bullets li .text p{
  font-size:14px;color:var(--text-muted);
  line-height:1.5;
}
.bullets li .text p strong{color:#fff;font-weight:600}

/* Right-side check/x mark on each bullet */
.bullets li .check{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(34,197,94,.15);
  border:1.5px solid rgba(34,197,94,.4);
  color:#86efac;
  font-weight:900;
  font-size:14px;
  align-self:center;
}
.bullets li .check.x{
  background:rgba(239,68,68,.12);
  border-color:rgba(239,68,68,.35);
  color:#fca5a5;
}

/* Highlight stats strip */
.hl-strip{
  display:flex;align-items:center;justify-content:space-around;
  gap:8px;
  margin:28px 0 8px;
  padding:22px 18px;
  background:linear-gradient(135deg,rgba(77,142,255,.10),rgba(54,112,214,.06));
  border:1px solid rgba(77,142,255,.25);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(77,142,255,.12),0 0 0 1px rgba(255,255,255,.04) inset;
}
.hl-stat{text-align:center;flex:1;min-width:0}
.hl-num{
  font-family:'Instrument Serif',serif;
  font-style:italic;font-weight:400;
  font-size:36px;
  background:linear-gradient(135deg,#bfdbfe 0%,#4d8eff 60%,#3670d6 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1.1;
  padding:0 .05em .1em;
  display:inline-block;
}
.hl-lbl{
  font-size:11.5px;
  color:var(--text-muted);
  letter-spacing:.04em;
  margin-top:4px;
  line-height:1.35;
}
.hl-divider{
  width:1px;height:42px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.15),transparent);
  flex-shrink:0;
}
@media (max-width:560px){
  .hl-strip{padding:18px 12px;gap:4px}
  .hl-num{font-size:28px}
  .hl-lbl{font-size:10.5px}
  .hl-divider{height:34px}
}

/* CTA button */
.cta-wrap{margin-top:32px;text-align:center}
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  width:100%;max-width:420px;
  padding:18px 32px;
  background:linear-gradient(135deg,#4d8eff,#3670d6);
  color:#fff;
  border:none;
  border-radius:14px;
  font-family:inherit;
  font-size:16px;font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 12px 30px -8px rgba(77,142,255,.55),0 0 0 1px rgba(77,142,255,.2),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s,box-shadow .15s;
}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -8px rgba(77,142,255,.7),0 0 0 1px rgba(77,142,255,.3),inset 0 1px 0 rgba(255,255,255,.18)}
.cta-btn:active{transform:translateY(0)}
.cta-btn .arrow{font-size:18px;transition:transform .15s ease;line-height:1}
.cta-btn:hover .arrow{transform:translateX(5px)}

/* Constante paarse gloed voor de hoofd-CTA (geen pulserende aan/uit) */
.cta-btn-glow{
  background:linear-gradient(135deg,#4d8eff 0%,#3670d6 50%,#4d8eff 100%);
  position:relative;
}
.cta-btn-glow::before{
  content:'';position:absolute;inset:-3px;
  background:linear-gradient(135deg,#4d8eff,#6ba3ff,#3670d6,#4d8eff);
  border-radius:17px;
  z-index:-1;
  filter:blur(10px);
  opacity:.6;
}
.cta-btn-xl{
  padding:22px 36px;
  font-size:17px;
  max-width:480px;
}
.cta-btn.blue{background:linear-gradient(180deg,#4d8eff 0%,#3b82f6 100%);box-shadow:0 10px 30px rgba(77,142,255,.4),0 0 0 1px rgba(255,255,255,.08) inset}
.cta-btn.blue:hover{box-shadow:0 14px 36px rgba(77,142,255,.5),0 0 0 1px rgba(255,255,255,.12) inset}
.cta-btn.green{background:linear-gradient(180deg,#22c55e 0%,#16a34a 100%);box-shadow:0 10px 30px rgba(34,197,94,.4),0 0 0 1px rgba(255,255,255,.08) inset}
.cta-btn.gold{background:linear-gradient(180deg,#d4af37 0%,#a08019 100%);box-shadow:0 10px 30px rgba(212,175,55,.4),0 0 0 1px rgba(255,255,255,.08) inset;color:#0a0a0a}

.cta-sub{
  margin-top:14px;
  font-size:13px;color:var(--text-dim);
}

/* Form */
.form-card{
  background:linear-gradient(180deg,rgba(20,20,26,.6),rgba(10,10,14,.6));
  border:1px solid var(--border-strong);
  border-radius:20px;
  padding:32px 28px 26px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.field{margin-bottom:16px}
.field label{
  display:block;
  font-size:13px;font-weight:600;
  color:var(--text);
  margin-bottom:7px;
  letter-spacing:.005em;
}
.field label .req{color:var(--accent);margin-left:2px}
.field input{
  width:100%;
  padding:14px 16px;
  background:#1a1a20;
  border:1px solid var(--border-strong);
  border-radius:11px;
  color:#fff;
  font-family:inherit;
  font-size:15px;
  outline:none;
  transition:border-color .15s,background .15s;
}
.field input::placeholder{color:#52525b}
.field input:focus{border-color:var(--accent);background:#1e1e26}
.field input.error{border-color:var(--red);background:rgba(239,68,68,.06)}
.field input.valid{border-color:rgba(34,197,94,.5)}

.phone-row{display:flex;gap:8px;align-items:stretch}
.country-select{
  flex:0 0 auto;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:#1a1a20;
  border:1px solid var(--border-strong);
  border-radius:11px;
  color:#fff;
  font-family:inherit;font-size:15px;font-weight:600;
  padding:14px 34px 14px 14px;
  outline:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  transition:border-color .15s,background-color .15s;
}
.country-select:hover{border-color:#3a3a45}
.country-select:focus{border-color:var(--accent);background-color:#1e1e26}
.country-select option{background:#15151b;color:#fff}
.phone-row .phone-input{flex:1 1 auto;min-width:0}
.field-error{display:none;margin-top:6px;font-size:12.5px;color:#fca5a5}
.field-error.show{display:block}

.submit-btn{
  width:100%;
  margin-top:8px;
  padding:17px 24px;
  background:linear-gradient(135deg,#4d8eff,#3670d6);
  color:#fff;border:none;
  border-radius:13px;
  font-family:inherit;
  font-size:15.5px;font-weight:800;
  letter-spacing:.02em;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 12px 30px -8px rgba(77,142,255,.55),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s,box-shadow .15s,opacity .15s;
}
.submit-btn:hover{transform:translateY(-1px);box-shadow:0 18px 40px -8px rgba(77,142,255,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.submit-btn .spinner{
  display:none;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;
}
.submit-btn.loading .spinner{display:inline-block}
.submit-btn.loading span:not(.spinner){opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}

.form-error{
  display:none;margin-top:14px;padding:12px 14px;
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.3);
  border-radius:10px;
  font-size:13px;color:#fca5a5;
}
.form-error.show{display:block}

.disclaimer{
  margin-top:18px;font-size:11.5px;color:var(--text-dim);
  line-height:1.5;text-align:center;
}
.disclaimer a{color:var(--accent);text-decoration:none}
.disclaimer a:hover{text-decoration:underline}

/* Warning blocks */
.warn-block{
  display:flex;gap:12px;
  padding:14px 16px;
  border-radius:12px;
  font-size:13px;
  line-height:1.5;
  margin-bottom:12px;
}
.warn-block .ico{
  flex-shrink:0;font-size:18px;line-height:1;margin-top:1px;
}
.warn-block .body{flex:1;min-width:0}
.warn-block .body strong{display:block;color:#fff;font-weight:700;margin-bottom:2px}
.warn-block.warning{background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.25);color:#fde68a}
.warn-block.warning .body strong{color:#fde68a}
.warn-block.info{background:rgba(77,142,255,.08);border:1px solid rgba(77,142,255,.25);color:#bfdbfe}
.warn-block.info .body strong{color:#bfdbfe}
.warn-block.danger{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:#fca5a5}
.warn-block.danger .body strong{color:#fca5a5}

/* Welkom page steps */
.welkom-steps{
  display:flex;flex-direction:column;gap:18px;
  margin-top:30px;
}
.welkom-step{
  padding:24px 24px 22px;
  background:linear-gradient(180deg,rgba(20,20,26,.7),rgba(10,10,14,.7));
  border:1px solid var(--border-strong);
  border-radius:18px;
  position:relative;
}
.welkom-step-num{
  position:absolute;top:-10px;left:18px;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;
  background:linear-gradient(135deg,#4d8eff,#3670d6);
  border-radius:999px;
  font-size:11px;font-weight:900;
  color:#fff;
  letter-spacing:.14em;
}
.welkom-step h3{
  font-size:18px;font-weight:800;
  color:#fff;
  margin-bottom:10px;
  letter-spacing:-.01em;
}
/* Duur-labeltje naast de kop, zodat de video kort en behapbaar oogt */
.step-duur{
  display:inline-block;
  margin-left:8px;
  vertical-align:middle;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.3);
  color:#4ade80;
  font-size:11.5px;font-weight:700;
  letter-spacing:.02em;
  padding:3px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.welkom-step p{
  font-size:14px;color:var(--text-muted);
  line-height:1.55;
  margin-bottom:10px;
}
.welkom-step p strong{color:#fff;font-weight:700}
.welkom-step .small{
  font-size:12px;color:var(--text-dim);
  margin-top:8px;
}

/* Video placeholder */
.video-frame{
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  background:linear-gradient(135deg,#1a1a22 0%,#0d0d12 100%);
  border:1px solid var(--border-strong);
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  margin-top:14px;
}
.video-frame iframe,.video-frame video,.video-frame wistia-player{
  width:100%;height:100%;
  border:0;
  display:block;
}
.video-placeholder{
  text-align:center;
  padding:30px;
}
.video-placeholder .play-icon{
  width:64px;height:64px;
  border-radius:50%;
  background:rgba(77,142,255,.18);
  border:2px solid rgba(77,142,255,.4);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.video-placeholder .play-icon svg{width:24px;height:24px;fill:#fff;margin-left:3px}
.video-placeholder p{font-size:14px;color:var(--text-muted)}

/* Inline button */
.inline-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;
  background:#25d366;
  color:#fff;
  text-decoration:none;
  border-radius:10px;
  font-weight:700;font-size:14px;
  margin-top:8px;
  transition:opacity .15s;
}
.inline-btn:hover{opacity:.85}
.inline-btn.ghost{
  background:transparent;
  border:1.5px solid var(--border-strong);
  color:#fff;
}
.inline-btn.ghost:hover{background:rgba(255,255,255,.04)}

/* Mobile */
@media (max-width:560px){
  main{padding:24px 16px 40px}
  .top-logo img{height:30px}
  .bullets li{padding:14px 16px}
  .bullets li .icon{width:34px;height:34px;font-size:16px}
  .form-card{padding:24px 20px 22px}
  .welkom-step{padding:22px 18px 20px}
}