/* ==========================================================================
   AD onderzoek landingspagina (/ad-onderzoek.php)
   Alle classes geprefixt met ado_ om botsingen met style.css te voorkomen.
   Huisstijl: blauw #4154f1, paars #5e2ced, navy #051441, teal #31e1af.
   ========================================================================== */
:root {
    --ado-blauw: #4154f1;
    --ado-paars: #5e2ced;
    --ado-navy: #051441;
    --ado-grijs: #54627a;
    --ado-teal: #31e1af;
    --ado-teal-donker: #0bb98a;
    --ado-oranje: #ff6b00;
    --ado-licht: #f5f6ff;
}

.ado_container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* Voorkom horizontale overflow door absoluut gepositioneerde deco-elementen
   (overflow-x: clip laat de verticale mockup-overlap intact, hidden niet). */
main { overflow-x: clip; }

/* ====== HERO ====== */
.ado_hero { background: linear-gradient(135deg, #4154f1 0%, #5e2ced 100%); color: #ffffff; position: relative; padding: 170px 0 0; }
.ado_hero_deco1 { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,255,255,.06); top: -140px; right: -100px; }
.ado_hero_deco2 { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.05); bottom: 60px; left: -110px; }
.ado_hero_deco3 { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--ado-teal); top: 150px; left: 18%; box-shadow: 0 0 22px var(--ado-teal); animation: ado_zweef 6s ease-in-out infinite; }
.ado_hero_deco4 { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ado-oranje); top: 330px; right: 12%; box-shadow: 0 0 16px var(--ado-oranje); animation: ado_zweef 8s ease-in-out infinite reverse; }
@keyframes ado_zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.ado_hero_inner { position: relative; text-align: center; max-width: 860px; margin: 0 auto; }
.ado_badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); padding: 8px 20px; border-radius: 40px; font-size: 13px; font-weight: 500; letter-spacing: .5px; margin-bottom: 26px; backdrop-filter: blur(4px); color: #ffffff; }
.ado_badge_puls { width: 8px; height: 8px; border-radius: 50%; background: var(--ado-teal); animation: ado_puls 1.8s infinite; }
@keyframes ado_puls { 0% { box-shadow: 0 0 0 0 rgba(49,225,175,.7); } 70% { box-shadow: 0 0 0 9px rgba(49,225,175,0); } 100% { box-shadow: 0 0 0 0 rgba(49,225,175,0); } }
.ado_hero h1 { color: #ffffff; font-size: clamp(36px, 5.5vw, 54px); font-weight: 900; letter-spacing: -1px; margin-bottom: 22px; line-height: 1.15; }
.ado_hero h1 .ado_accent { background: linear-gradient(90deg, #9be7ff, #31e1af); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ado_hero_sub { font-size: 18px; line-height: 1.65; opacity: .93; max-width: 660px; margin: 0 auto 34px; font-weight: 300; color: #ffffff; }
.ado_btns { display: flex; gap: 14px; justify-content: center; margin-bottom: 70px; flex-wrap: wrap; }
.ado_btn_wit { background: #ffffff; color: var(--ado-blauw); font-weight: 700; font-size: 15px; padding: 15px 34px; border-radius: 40px; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: transform .15s; display: inline-block; }
.ado_btn_wit:hover { transform: translateY(-2px); color: var(--ado-blauw); text-decoration: none; }
.ado_btn_ghost { border: 1.5px solid rgba(255,255,255,.85); color: #ffffff; font-weight: 500; font-size: 15px; padding: 15px 30px; border-radius: 40px; text-decoration: none; display: inline-block; transition: background .15s; }
.ado_btn_ghost:hover { background: rgba(255,255,255,.12); color: #ffffff; text-decoration: none; }

/* hero browser-mockup */
.ado_mockup { position: relative; max-width: 900px; margin: 0 auto -90px; background: #ffffff; border-radius: 14px; box-shadow: 0 30px 90px rgba(5,20,65,.30); overflow: hidden; text-align: left; }
.ado_mockup_bar { background: #eef0f7; padding: 10px 16px; display: flex; align-items: center; gap: 6px; }
.ado_mockup_dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ado_mockup_url { background: #ffffff; border-radius: 14px; font-size: 11px; color: var(--ado-grijs); padding: 4px 14px; margin-left: 12px; }
.ado_mockup_body { display: flex; min-height: 320px; }
.ado_mockup_tabs { background: #f8f9fe; border-right: 1px solid #edeef5; padding: 14px 0; min-width: 200px; }
.ado_mockup_tab { font-size: 12px; color: var(--ado-grijs); padding: 9px 18px; display: flex; gap: 9px; align-items: center; }
.ado_mockup_tab i { width: 14px; text-align: center; font-size: 11px; }
.ado_mockup_tab.ado_actief { background: #ffffff; color: var(--ado-blauw); font-weight: 700; border-left: 3px solid var(--ado-blauw); }
.ado_mockup_main { flex: 1; padding: 18px 22px; }
.ado_mockup_titel { font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ado-navy); }
.ado_ai_chip { background: linear-gradient(90deg, #4154f1, #5e2ced); color: #ffffff; font-size: 10px; font-weight: 700; padding: 4px 12px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ado_veld { background: #f8f9fe; border: 1px solid #edeef5; border-radius: 7px; padding: 9px 12px; font-size: 12px; color: var(--ado-navy); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ado_veld_vink { color: var(--ado-teal-donker); font-weight: 900; }
.ado_veld.ado_controle { border-color: #ffd9b8; background: #fff8f2; }
.ado_veld_knopjes { display: flex; gap: 6px; }
.ado_veld_knopjes span { font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 5px; cursor: default; }
.ado_veld_knop_ok { background: var(--ado-blauw); color: #ffffff; }
.ado_veld_knop_edit { border: 1px solid #d8dcf0; color: var(--ado-grijs); }
.ado_regie { font-size: 11px; color: var(--ado-grijs); margin-top: 10px; display: flex; align-items: center; gap: 7px; }
.ado_regie i { color: var(--ado-blauw); }

/* ====== STATS ====== */
.ado_stats { padding: 150px 0 0; }
.ado_stats_flex { display: flex; gap: 22px; }
.ado_stat { flex: 1; text-align: center; padding: 26px 18px; background: #ffffff; border: 1px solid #edeef5; border-radius: 14px; }
.ado_stat b { display: block; font-size: 30px; font-weight: 900; color: var(--ado-blauw); margin-bottom: 6px; letter-spacing: -.5px; }
.ado_stat span { font-size: 13px; color: var(--ado-grijs); line-height: 1.5; display: block; }

/* ====== SECTIE ALGEMEEN ====== */
.ado_blok { padding: 90px 0; }
.ado_kop { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.ado_kop_label { color: var(--ado-blauw); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; display: block; }
.ado_kop h2 { font-size: 36px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 14px; color: var(--ado-navy); }
.ado_kop p { color: var(--ado-grijs); font-size: 16px; line-height: 1.6; }

/* ====== ZO WERKT HET ====== */
.ado_stappen { display: flex; gap: 24px; }
.ado_stap { flex: 1; position: relative; background: var(--ado-licht); border-radius: 14px; padding: 30px 24px 26px; }
.ado_stap_nr { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #4154f1, #5e2ced); color: #ffffff; font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ado_stap h3 { font-size: 17px; margin-bottom: 8px; color: var(--ado-navy); }
.ado_stap p { font-size: 13px; color: var(--ado-grijs); line-height: 1.6; margin-bottom: 0; }
.ado_stap_pijl { position: absolute; right: -21px; top: 50%; transform: translateY(-50%); color: #c3c9f5; font-size: 18px; z-index: 1; }

/* ====== STRUCTUUR-RAIL ====== */
.ado_structuur { background: var(--ado-licht); }
.ado_structuur_kop { text-align: center; max-width: 680px; margin: 0 auto 50px; }
.ado_structuur_kop h2 { font-size: 28px; font-weight: 700; margin-bottom: 12px; letter-spacing: -.5px; color: var(--ado-navy); }
.ado_structuur_kop p { color: var(--ado-grijs); font-size: 15px; line-height: 1.65; }
.ado_rail { position: relative; display: flex; justify-content: space-between; max-width: 920px; margin: 0 auto; }
.ado_rail::before { content: ""; position: absolute; top: 24px; left: 7%; right: 7%; height: 2px; background: linear-gradient(90deg, #c3c9f5, #4154f1, #c3c9f5); }
.ado_rail_node { position: relative; text-align: center; width: 19%; }
.ado_rail_bol { width: 48px; height: 48px; border-radius: 50%; background: #ffffff; border: 2px solid #d8dcfb; color: var(--ado-blauw); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; position: relative; z-index: 1; box-shadow: 0 6px 18px rgba(65,84,241,.10); }
.ado_rail_node b { display: block; font-size: 13px; margin-top: 12px; color: var(--ado-navy); }
.ado_rail_node span { display: block; font-size: 11px; color: var(--ado-grijs); margin-top: 4px; line-height: 1.5; }

/* ====== FEATURE GRID ====== */
.ado_grid_ai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 22px; }
.ado_grid_rest { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.ado_tegel { background: #ffffff; border: 1px solid #edeef5; border-radius: 14px; padding: 28px 22px; transition: all .2s; position: relative; }
.ado_tegel:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(65,84,241,.12); }
.ado_tegel.ado_ai { border: 1px solid #d8dcfb; box-shadow: 0 6px 24px rgba(65,84,241,.08); background: linear-gradient(180deg, #fdfdff 0%, #f8f9ff 100%); }
.ado_tegel.ado_ai:hover { box-shadow: 0 18px 44px rgba(65,84,241,.18); }
.ado_tegel_icoon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }
.ado_tegel h3 { font-size: 16px; margin-bottom: 8px; color: var(--ado-navy); }
.ado_tegel p { font-size: 13px; color: var(--ado-grijs); line-height: 1.55; margin-bottom: 0; }
.ado_tegel.ado_klein { padding: 22px 18px; }
.ado_tegel.ado_klein .ado_tegel_icoon { width: 42px; height: 42px; font-size: 16px; border-radius: 10px; margin-bottom: 12px; }
.ado_tegel.ado_klein h3 { font-size: 14px; }
.ado_tegel.ado_klein p { font-size: 12px; }
.ado_ai_label { position: absolute; top: 16px; right: 16px; background: linear-gradient(90deg, #4154f1, #5e2ced); color: #ffffff; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 4px 11px; border-radius: 12px; }
.ado_ai_label i { margin-right: 4px; font-size: 9px; }
.ado_icoon_blauw { background: #eef0ff; color: #4154f1; }
.ado_icoon_paars { background: #f1ecfe; color: #5e2ced; }
.ado_icoon_oranje { background: #fff1e8; color: #ff6b00; }
.ado_icoon_teal { background: #e6fbf4; color: #0bb98a; }

/* ====== SPOTLIGHTS ====== */
.ado_spotlight { display: flex; gap: 60px; align-items: center; }
.ado_spotlight + .ado_spotlight { margin-top: 110px; }
.ado_spotlight_tekst { flex: 1; }
.ado_spotlight_visual { flex: 1.15; }
.ado_spotlight_label { color: var(--ado-blauw); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; display: block; }
.ado_spotlight h2 { font-size: 30px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 16px; color: var(--ado-navy); }
.ado_spotlight_tekst > p { color: var(--ado-grijs); font-size: 16px; line-height: 1.7; margin-bottom: 18px; }
.ado_usp { list-style: none; padding-left: 0; margin-bottom: 0; }
.ado_usp li { font-size: 14px; padding: 7px 0; display: flex; gap: 10px; align-items: flex-start; color: var(--ado-navy); }
.ado_usp li::before { content: "\2713"; color: var(--ado-teal-donker); font-weight: 900; background: rgba(49,225,175,.14); width: 22px; height: 22px; min-width: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; }

.ado_vis_kaart { background: #ffffff; border-radius: 16px; box-shadow: 0 24px 70px rgba(5,20,65,.13); padding: 26px; border: 1px solid #edeef5; }
.ado_dropzone { border: 2px dashed #c3c9f5; border-radius: 12px; background: var(--ado-licht); padding: 30px 20px; text-align: center; }
.ado_dropzone_wolk { font-size: 30px; color: var(--ado-blauw); }
.ado_dropzone_tekst { font-size: 13px; color: var(--ado-grijs); margin-top: 10px; line-height: 1.5; }
.ado_doc_chip { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #edeef5; border-radius: 8px; padding: 8px 14px; font-size: 12px; margin-top: 14px; box-shadow: 0 4px 14px rgba(5,20,65,.08); color: var(--ado-navy); }
.ado_doc_chip i { color: #df5138; }
.ado_voortgang { margin-top: 18px; }
.ado_voortgang_rij { display: flex; justify-content: space-between; font-size: 12px; color: var(--ado-grijs); margin-bottom: 6px; }
.ado_status_ok { color: var(--ado-teal-donker); font-weight: 700; }
.ado_status_check { color: var(--ado-oranje); font-weight: 700; }
.ado_status_bezig { color: var(--ado-oranje); font-weight: 700; }
.ado_status_analyse { color: var(--ado-blauw); font-weight: 500; }
.ado_balk { background: #edeef5; height: 7px; border-radius: 5px; overflow: hidden; margin-bottom: 12px; }
.ado_balk i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #4154f1, #31e1af); width: 100%; }
.ado_balk.ado_balk_deels i { width: 72%; background: linear-gradient(90deg, #4154f1, #ff9d4d); }

.ado_zoekveld { display: flex; align-items: center; gap: 10px; background: var(--ado-licht); border: 1px solid #e3e6fb; border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--ado-navy); margin-bottom: 16px; }
.ado_zoekveld .fa-search { color: var(--ado-grijs); }
.ado_zoekveld_tekst { color: var(--ado-grijs); }
.ado_zoekveld .ado_ai_chip { margin-left: auto; }
.ado_beroep_kaart { border: 1px solid #edeef5; border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; }
.ado_beroep_kaart.ado_actief { border-color: var(--ado-blauw); box-shadow: 0 10px 30px rgba(65,84,241,.13); }
.ado_beroep_kaart h4 { font-size: 14px; margin-bottom: 4px; color: var(--ado-navy); }
.ado_beroep_meta { font-size: 11px; color: var(--ado-grijs); margin-bottom: 10px; }
.ado_taak_chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ado_taak_chips span { background: var(--ado-licht); color: var(--ado-blauw); font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 14px; }
.ado_belast { display: flex; gap: 8px; margin-top: 10px; }
.ado_belast_item { flex: 1; text-align: center; background: #f8f9fe; border-radius: 8px; padding: 8px 4px; }
.ado_belast_item b { font-size: 13px; display: block; color: var(--ado-blauw); }
.ado_belast_item span { font-size: 10px; color: var(--ado-grijs); }

/* ====== MOCKUP STRIP ====== */
.ado_strip { background: linear-gradient(180deg, #f7f8ff 0%, #ffffff 100%); }
.ado_strip_flex { display: flex; gap: 24px; align-items: stretch; }
.ado_mini { flex: 1; background: #ffffff; border-radius: 12px; border: 1px solid #edeef5; box-shadow: 0 14px 40px rgba(5,20,65,.08); overflow: hidden; display: flex; flex-direction: column; }
.ado_mini_bar { background: #eef0f7; height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 12px; }
.ado_mini_bar span { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ado_mini_body { padding: 16px; flex: 1; }
.ado_mini h4 { font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; color: var(--ado-navy); }
.ado_mini h4 i { color: var(--ado-blauw); }
.ado_mini_veld { display: flex; justify-content: space-between; background: #f8f9fe; border-radius: 6px; padding: 6px 10px; font-size: 10.5px; color: var(--ado-grijs); margin-bottom: 6px; }
.ado_mini_veld b { color: var(--ado-navy); font-weight: 500; }
.ado_mini_dropzone { border: 2px dashed #c3c9f5; border-radius: 8px; height: 54px; background: var(--ado-licht); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ado-grijs); margin-bottom: 10px; }
.ado_mini_dropzone i { margin-right: 7px; color: var(--ado-blauw); }
.ado_mini_knop { background: linear-gradient(90deg, #4154f1, #5e2ced); color: #ffffff; font-size: 11px; font-weight: 700; text-align: center; border-radius: 6px; padding: 8px; margin-top: 8px; }
.ado_mini_knop i { margin-right: 6px; }
.ado_mini_titel { text-align: center; font-size: 13px; font-weight: 700; color: var(--ado-navy); padding: 14px; border-top: 1px solid #f1f2f9; }

/* ====== VEILIGHEID ====== */
.ado_veilig { background: var(--ado-licht); }
.ado_veilig_flex { display: flex; gap: 24px; }
.ado_veilig_item { flex: 1; background: #ffffff; border: 1px solid #e3e6fb; border-radius: 14px; padding: 28px 24px; text-align: center; }
.ado_veilig_item i { font-size: 24px; color: var(--ado-blauw); background: #eef0ff; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ado_veilig_item h3 { font-size: 16px; margin-bottom: 8px; color: var(--ado-navy); }
.ado_veilig_item p { font-size: 13px; color: var(--ado-grijs); line-height: 1.6; margin-bottom: 0; }

/* ====== CTA BAND ====== */
.ado_cta { background: radial-gradient(ellipse at 30% 0%, rgba(94,44,237,.55) 0%, #051441 60%); color: #ffffff; text-align: center; padding: 90px 20px; position: relative; overflow: hidden; }
.ado_cta h2 { color: #ffffff; font-size: 38px; font-weight: 900; margin-bottom: 14px; letter-spacing: -.5px; }
.ado_cta p { opacity: .9; font-size: 16px; margin-bottom: 32px; font-weight: 300; color: #ffffff; }
.ado_cta_ster { position: absolute; border-radius: 50%; }
.ado_cta_micro { display: block; margin-top: 22px; font-size: 14px; color: #ffffff; }
.ado_cta_micro a { color: #9be7ff; text-decoration: none; font-weight: 500; }
.ado_cta_micro a:hover { text-decoration: underline; color: #9be7ff; }

/* ====== TOEGANKELIJKHEID & RESPONSIVE ====== */
@media (prefers-reduced-motion: reduce) {
    .ado_hero_deco3, .ado_hero_deco4, .ado_badge_puls { animation: none !important; }
    .ado_tegel, .ado_btn_wit { transition: none !important; }
    /* AOS verbergt elementen tot ze in beeld scrollen; zonder animaties zou de
       content onzichtbaar blijven voor gebruikers met reduced motion. */
    main [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* 991px = breakpoint van de site-header (menu verdwijnt, min-height 100px) */
@media (max-width: 991px) {
    .ado_hero { padding-top: 150px; }
    .ado_hero_deco1, .ado_hero_deco2 { display: none; }
    .ado_grid_ai { grid-template-columns: 1fr; }
    .ado_grid_rest { grid-template-columns: repeat(2, 1fr); }
    .ado_spotlight { flex-direction: column; }
    .ado_spotlight + .ado_spotlight { margin-top: 70px; }
    .ado_strip_flex, .ado_stats_flex, .ado_veilig_flex, .ado_stappen { flex-direction: column; }
    .ado_stap_pijl { display: none; }
    .ado_mockup_tabs { display: none; }
    .ado_mockup { margin-bottom: -60px; }
    .ado_stats { padding-top: 110px; }
    .ado_rail { flex-direction: column; gap: 26px; }
    .ado_rail::before { display: none; }
    .ado_rail_node { width: 100%; }
}
@media (max-width: 575px) {
    .ado_grid_rest { grid-template-columns: 1fr; }
    .ado_cta h2 { font-size: 28px; }
    .ado_kop h2 { font-size: 28px; }
}