/* ============================================================
   HOMEPAGE CARDS FIX — forceert correcte kleuren op alle secties
   Dit bestand laadt als LAATSTE — overschrijft universal-white-text-fix.css
   ook als die via Cloudflare CDN gecached wordt met dark theme
   ============================================================ */

/* Fix horizontale overflow door logo-carousel lc-track */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
.lc-wrap {
    overflow: hidden !important;
}

/* ============================================================
   LICHTE SECTIES — donkere tekst op witte achtergrond
   ============================================================ */

/* Service cards — licht gradient */
.services-section,
body .services-section {
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%) !important;
}

.service-card,
body .service-card,
.services-section .service-card {
    background: #ffffff !important;
    color: #1a202c !important;
    border: 1px solid #e2e8f0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.service-card h3,
.services-section .service-card h3 {
    color: #1a202c !important;
}
.service-card:hover h3 {
    color: #1a73e8 !important;
}

.service-card p,
.services-section .service-card p {
    color: #4b5563 !important;
}

/* Cases sectie */
.cases-section {
    background: #ffffff !important;
}

.case-card {
    background: #ffffff !important;
}

.case-body h3 {
    color: #1a202c !important;
}
.case-card:hover .case-body h3 {
    color: #1a73e8 !important;
}

.case-body p {
    color: #4b5563 !important;
}

/* About sectie */
.about-section {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
}

.about-card {
    background: #ffffff !important;
}

/* Portals sectie */
.portals-section {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
}

.portal-card {
    background: #ffffff !important;
    color: #1a202c !important;
}

.portal-info strong {
    color: #1a202c !important;
}
.portal-card:hover .portal-info strong {
    color: #1a73e8 !important;
}

.portal-info span {
    color: #4b5563 !important;
}

/* How section */
.how-section {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
}

/* Cases section */
.cases-section {
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%) !important;
}

/* Portals section */
.portals-section {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
}

.step h3 {
    color: #1a202c !important;
}
.step:hover h3 {
    color: #1a73e8 !important;
}

.step p {
    color: #4b5563 !important;
}

/* Section titles op lichte achtergrond */
.services-section .section-title,
.how-section .section-title,
.cases-section .section-title,
.portals-section .section-title,
.about-section .section-title,
.lead-section .section-title {
    color: #1a202c !important;
}

.services-section .section-sub,
.how-section .section-sub,
.cases-section .section-sub,
.portals-section .section-sub,
.about-section .section-sub,
.lead-section .section-sub {
    color: #4b5563 !important;
}

/* ============================================================
   DONKERE SECTIES — WIT TEKST FIX
   universal-white-text-fix.css zet .container { color: #333 !important }
   Dit overschrijft wit-op-donker tekst. Hier herstellen we dat.
   ============================================================ */

/* Trust bar — donkere achtergrond, witte tekst */
.trust-bar,
.trust-bar .container,
.trust-bar .trust-inner,
.trust-item {
    color: #ffffff !important;
}
.trust-item:nth-child(1) i { color: #22c55e !important; }
.trust-item:nth-child(2) i { color: #fbbf24 !important; }
.trust-item:nth-child(3) i { color: #38bdf8 !important; }
.trust-item:nth-child(4) i { color: #a78bfa !important; }
.trust-item:nth-child(5) i { color: #f97316 !important; }

/* Stats sectie — blauwe achtergrond, witte tekst */
.stats-section,
.stats-section .container,
.stats-section .stats-grid,
.stat-item,
.stat-item strong,
.stat-item span {
    color: #ffffff !important;
}

/* AI Tools sectie — donkere achtergrond, witte tekst */
.ai-tools-section,
.ai-tools-section .container {
    color: #ffffff !important;
}
.ai-tools-section .section-title {
    color: #ffffff !important;
}
.ai-tools-section .section-sub {
    color: #cbd5e1 !important;
}
.ai-tools-section .section-label {
    color: #00c8ff !important;
}
.tool-card {
    color: #ffffff !important;
}
.tool-card h4 {
    color: #ffffff !important;
}
.tool-card:hover h4 {
    color: #00c8ff !important;
}
.tool-card p {
    color: #94a3b8 !important;
}
.tool-card i {
    color: #00c8ff !important;
}

/* ============================================================
   HERO SECTIE — dag-thema override
   body.itlive-public-day { color: #0f172a !important } mag NOOIT
   de witte hero-tekst beïnvloeden. Belt-and-suspenders fix.
   ============================================================ */

/* Hero overlay: professioneel — links 92% donker (tekst), rechts 8% (foto zichtbaar) */
.hero-overlay {
    background: linear-gradient(105deg, rgba(6,8,18,.92) 0%, rgba(6,8,18,.88) 35%, rgba(6,8,18,.60) 55%, rgba(6,8,18,.20) 75%, rgba(6,8,18,.08) 100%) !important;
}
@media (max-width: 768px) {
    .hero-overlay {
        background: rgba(6,8,18,.80) !important;
    }
}

/* Alle hero-tekst wit, ongeacht dag-thema */
body.itlive-public-day .hero,
body.itlive-public-day .hero .container,
body.itlive-public-day .hero-content,
body.itlive-public-day .hero-content h1,
body.itlive-public-day .hero-content h1 .accent,
body.itlive-public-day .hero-content p,
body.itlive-public-day .hero-badge,
body.itlive-public-day .hero-btns a,
body.itlive-public-day .hero-stat strong,
body.itlive-public-day .hero-stat span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Accent kleur in h1 behouden */
body.itlive-public-day .hero-content h1 .accent {
    color: #00c8ff !important;
    -webkit-text-fill-color: #00c8ff !important;
}

/* Hero stat span iets zachter wit (origineel ontwerp) */
body.itlive-public-day .hero-stat span {
    color: #c8d6e5 !important;
    -webkit-text-fill-color: #c8d6e5 !important;
}

/* Hero paragraaf subtiel lichtgrijs (origineel ontwerp) */
body.itlive-public-day .hero-content p {
    color: #e8edf4 !important;
    -webkit-text-fill-color: #e8edf4 !important;
}


/* ============================================================
   HERO REDESIGN — 2-KOLOM + FIX WHITE TEXT
   ============================================================ */

/* Fix: scan-input erft -webkit-text-fill-color: #fff van .hero-content */
.hero-scan-bar input,
body.itlive-public-day .hero-scan-bar input,
body.itlive-public-day .hero-content .hero-scan-bar input {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: transparent !important;
    caret-color: #0f172a !important;
}
.hero-scan-bar input::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* [WEBKITFILL-20260826] Fix: .hero-mockup-review (het "4.9/5 · 200+ klanten" badge) erft
   -webkit-text-fill-color:#fff van "body.itlive-public-day .hero" hierboven (regel ~220),
   maar heeft zelf een lichte kaart-achtergrond (rgba(255,255,255,.96)) -- wit-op-wit,
   onleesbaar. Zelfde patroon als de scan-inputfix hierboven, lokaal gescopet i.p.v. de
   hero-brede regel aan te passen (die dient de rest van de hero terecht). */
.hmr-stars,
body.itlive-public-day .hmr-stars {
    color: #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
}
.hmr-text,
body.itlive-public-day .hmr-text,
body.itlive-public-day .hmr-text strong {
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
}

/* Fix: unified scan form (itl-scan-*) — zelfde -webkit-text-fill-color erfenis */
.hero-content .itl-scan-field__label,
body.itlive-public-day .hero-content .itl-scan-field__label {
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
}
.hero-content .itl-scan-field__label .itl-fa,
body.itlive-public-day .hero-content .itl-scan-field__label .itl-fa {
    color: #1a73e8 !important;
    -webkit-text-fill-color: #1a73e8 !important;
}
.hero-content .itl-scan-field__input,
body.itlive-public-day .hero-content .itl-scan-field__input {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    background: #fff !important;
    caret-color: #0f172a !important;
}
.hero-content .itl-scan-field__input::placeholder,
body.itlive-public-day .hero-content .itl-scan-field__input::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    opacity: 1 !important;
}
.hero-content .itl-scan-form__fields,
body.itlive-public-day .hero-content .itl-scan-form__fields {
    background: rgba(255, 255, 255, 0.97) !important;
}
.hero-content .itl-scan-field__clear,
body.itlive-public-day .hero-content .itl-scan-field__clear {
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
}

/* Hero overlay: schoner gradient voor 2-kolom */
.hero-overlay {
    background: linear-gradient(
        100deg,
        rgba(6,8,18,.94) 0%,
        rgba(6,8,18,.90) 30%,
        rgba(6,8,18,.75) 52%,
        rgba(6,8,18,.35) 70%,
        rgba(6,8,18,.10) 100%
    ) !important;
}
@media (max-width: 860px) {
    .hero-overlay {
        background: rgba(6,8,18,.82) !important;
    }
}

/* 2-kolom hero container */
.hero-container {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 3rem;
    align-items: center;
    width: 100%;
}
@media (max-width: 1100px) {
    .hero-container {
        grid-template-columns: 1fr 400px;
        gap: 2rem;
    }
}
@media (max-width: 860px) {
    .hero-container {
        grid-template-columns: 1fr;
    }
}

/* Hero content kolom — begrenzing verwijderen */
.hero-container .hero-content {
    max-width: none;
    width: 100%;
}

/* Hero visuele kolom */
.hero-visual {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: revealRight 1s cubic-bezier(.4,0,.2,1) .3s both;
}
@keyframes revealRight {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (max-width: 860px) {
    .hero-visual { display: none !important; }
}

/* Browser mockup card */
.hero-mockup {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
.hero-mockup-bar {
    background: rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hero-mockup-dots {
    display: flex;
    gap: 5px;
}
.hero-mockup-dots span {
    width: 10px; height: 10px; border-radius: 50%;
}
.hero-mockup-dots span:nth-child(1) { background: #ff5f57; }
.hero-mockup-dots span:nth-child(2) { background: #febc2e; }
.hero-mockup-dots span:nth-child(3) { background: #28c840; }
.hero-mockup-url {
    flex: 1;
    background: rgba(255,255,255,.1);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: .72rem;
    color: rgba(255,255,255,.6);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Mockup slideshow */
.hero-mockup {
    position: relative;
}
.hero-mockup-slides {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: #0a1628;
}
.hero-mslide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: opacity .75s ease;
}
.hero-mockup:hover .hero-mslide.active {
    transform: scale(1.02);
    transition: opacity .75s ease, transform 5s ease;
}
/* Floating review badge overlapping onderkant mockup */
.hero-mockup-review {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 7px 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,.28);
    pointer-events: none;
}
.hmr-stars { color: #f59e0b; font-size: .85rem; letter-spacing: .06em; }
.hmr-text { font-size: .7rem; color: #1e293b; line-height: 1.3; white-space: nowrap; }
.hmr-text strong { font-weight: 800; display: block; font-size: .82rem; }

/* Kleine site-thumbnails grid */
.hero-thumb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.hero-thumb {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    aspect-ratio: 4/3;
    position: relative;
    cursor: pointer;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.hero-thumb:hover {
    transform: translateY(-3px);
    border-color: rgba(0,200,255,.4);
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}
.hero-thumb-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(6,8,18,.85));
    padding: 16px 7px 6px;
    font-size: .6rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Live badge */
.hero-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(5,150,105,.2);
    border: 1px solid rgba(5,150,105,.4);
    border-radius: 20px;
    padding: 4px 10px 4px 6px;
    font-size: .72rem;
    font-weight: 700;
    color: #34d399;
    margin-bottom: 8px;
}
.hero-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10b981;
    animation: livePulse 2s ease infinite;
}
@keyframes livePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
    50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

/* Sector pills onder grid */
.hero-sector-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.hero-sector-pill {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: .67rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
}


/* ── Hero visual tablet/medium scherm aanpassingen ── */
@media (max-width:1100px) and (min-width:861px) {
    .hero-mockup-slides { height:200px }
    .hero-thumb-grid { grid-template-columns: repeat(3,1fr); gap:6px }
    .hero-thumb { aspect-ratio:4/3 }
    .hero-live-badge { font-size:.67rem }
    .hero-sector-pills { display:none }
}
.hero-thumb { cursor:pointer }
@media (max-width:860px) {
    .hero-content { padding:3rem 0 2.5rem }
}
@media (max-width:520px) {
    .hero-scan-bar { max-width:100% !important }
    .hero-scan-bar button { padding:10px 12px !important; font-size:.85rem !important }
}

/* ── Unified scan form (diensten / homepage) — donkere labels op witte kaart ── */
.itl-scan-field__label,
label.itl-scan-field span.itl-scan-field__label {
    color: #374151 !important;
    -webkit-text-fill-color: #374151 !important;
}
.itl-scan-field__input,
.itl-scan-field input.itl-scan-field__input {
    color: #1a202c !important;
    -webkit-text-fill-color: #1a202c !important;
    background: #fff !important;
}
.itl-scan-field__input::placeholder,
.itl-scan-field input.itl-scan-field__input::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
}
.unified-scan-form,
.itl-unified-scan {
    color: #374151 !important;
}
.unified-scan-form label,
.itl-unified-scan label {
    color: #374151 !important;
}
.unified-scan-form input,
.unified-scan-form textarea,
.itl-unified-scan input,
.itl-unified-scan textarea {
    color: #1a202c !important;
    -webkit-text-fill-color: #1a202c !important;
}
.unified-scan-form input::placeholder,
.unified-scan-form textarea::placeholder,
.itl-unified-scan input::placeholder,
.itl-unified-scan textarea::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

/* SiteChat + idee — witte form-kaarten */
.sc-card p, .sc-card span { color: #374151 !important; }
.idee-chat-box textarea::placeholder,
.idee-chat-box input::placeholder { color: #64748b !important; -webkit-text-fill-color: #64748b !important; }