/* itlive-shell.457ebd638898.css (SHELL-CSS-BUNDEL-20261012) */

/* ===== itlive-fonts.css ===== */
/* SELF-HOSTED-FONTS-20261012 (P4 verbeterplan): Montserrat + DM Sans zelf gehost (variabel, latin, SIL OFL 1.1).
   Geen verzoeken meer naar fonts.googleapis.com / fonts.gstatic.com. Zelfde bestanden als Google leverde,
   dus volledige gewichtsas (Montserrat 100-900, DM Sans 100-1000): geen verschil in weergave. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/montserrat-latin-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dmsans-latin-var.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Fallback met dezelfde maatvoering, zodat de tekst niet verspringt als het echte lettertype binnenkomt */
@font-face{font-family:'Montserrat Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:112.83%;ascent-override:85.79%;descent-override:22.25%;line-gap-override:0%}
@font-face{font-family:'DM Sans Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:104.53%;ascent-override:94.9%;descent-override:29.66%;line-gap-override:0%}
/* FA-SPRITE-OB-20261012: <i class="fa-..."> wordt server-side <i class="... itl-fa-i"><svg class="itl-fa"><use/></svg></i>.
   Het <i> blijft staan zodat bestaande CSS (kleur/grootte op "i") blijft werken; deze regels vervangen het nodige uit all.min.css. */
i.itl-fa-i{font-style:normal;display:inline-block;line-height:1;text-rendering:auto}
i.itl-fa-i::before,i.itl-fa-i::after{content:none!important}
i.itl-fa-i>.itl-fa{display:inline-block;vertical-align:-.125em}
.itl-fa-i.fa-fw{width:1.25em;text-align:center}
.itl-fa-i.fa-2xs{font-size:.625em}.itl-fa-i.fa-xs{font-size:.75em}.itl-fa-i.fa-sm{font-size:.875em}.itl-fa-i.fa-lg{font-size:1.25em;vertical-align:-.075em}.itl-fa-i.fa-xl{font-size:1.5em}.itl-fa-i.fa-2xl{font-size:2em}
.itl-fa-i.fa-1x{font-size:1em}.itl-fa-i.fa-2x{font-size:2em}.itl-fa-i.fa-3x{font-size:3em}.itl-fa-i.fa-4x{font-size:4em}.itl-fa-i.fa-5x{font-size:5em}.itl-fa-i.fa-6x{font-size:6em}.itl-fa-i.fa-7x{font-size:7em}.itl-fa-i.fa-8x{font-size:8em}.itl-fa-i.fa-9x{font-size:9em}.itl-fa-i.fa-10x{font-size:10em}
.itl-fa-i.fa-spin,.itl-fa-i.fa-spin-pulse,.itl-fa-i.fa-pulse{animation:itl-fa-draai 1s linear infinite}
.itl-fa-i.fa-rotate-90{transform:rotate(90deg)}.itl-fa-i.fa-rotate-180{transform:rotate(180deg)}.itl-fa-i.fa-rotate-270{transform:rotate(270deg)}.itl-fa-i.fa-flip-horizontal{transform:scaleX(-1)}
@media(prefers-reduced-motion:reduce){.itl-fa-i.fa-spin,.itl-fa-i.fa-spin-pulse,.itl-fa-i.fa-pulse{animation:none}}
/* P4-AFRONDING-20261012: draaiende sprite-iconen zonder all.min.css (keyframes ontbraken nog) */
@keyframes itl-fa-draai{to{transform:rotate(360deg)}}
svg.itl-fa.fa-spin,svg.itl-fa.fa-spin-pulse,svg.itl-fa.fa-pulse{animation:itl-fa-draai 1s linear infinite;transform-origin:50% 50%}
@media(prefers-reduced-motion:reduce){svg.itl-fa.fa-spin,svg.itl-fa.fa-spin-pulse,svg.itl-fa.fa-pulse{animation:none}}


/* ===== enhanced-styles-v2.css ===== */
/* IT Live Enhanced Styles - Performance & UX Optimizations */

/* Performance Optimizations */
img {
    max-width: 100%;
    height: auto;
}

img.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

img.lazy.loaded {
    opacity: 1;
}

/* Enhanced Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Enhanced Micro-interactions */
.hero .btn-gold {
    position: relative;
    overflow: hidden;
}

.hero .btn-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero .btn-gold:hover::before {
    left: 100%;
}
.hero .btn-gold:hover {
    box-shadow: 0 0 40px rgba(242,193,79,0.5), inset 0 0 10px rgba(255,255,255,0.5);
}

/* Service Cards — geen dark-theme override hier; styling via itlive-homepage/assets/css/style.css */
.service-card .service-icon {
    transition: all 0.3s ease;
}

/* Enhanced Stats */
.stat-number {
    background: linear-gradient(45deg, var(--gold), var(--gold2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pulse 2s infinite;
}

/* Enhanced Navigation */
.navbar.scrolled {
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
    border-bottom: 1px solid rgba(242,193,79,0.15);
}

/* Enhanced Loading States */
.loading {
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--gold);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced Accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Enhanced Print Styles */
@media print {
    .navbar, .contact-bar, .cta-buttons {
        display: none !important;
    }
    
    .hero {
        background: white !important;
        color: black !important;
    }
    
    .service-card {
        break-inside: avoid;
        border: 1px solid #ccc;
    }
}

/* Enhanced Performance Metrics */
.web-vitals {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 9999;
}

/* Enhanced Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --navy: #020917;
        --dark-lighter: #111111;
    }
}

/* Enhanced High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --gold: #ffff00;
        --gold-border: #ffff00;
        --cyan: #00ffff;
    }
}


/* ===== universal-white-text-fix.css ===== */
/* 
 * UNIVERSAL WHITE TEXT ON WHITE BACKGROUND FIX
 * Solves the systematic problem of white text on white/light backgrounds across IT Live platform
 * 
 * This CSS file provides comprehensive fixes for readability issues
 * while preserving proper button styling and visual hierarchy
 * 
 * Author: IT Live Development Team
 * Version: 1.0
 * Last Updated: 2026-03-07
 */

/* ========================================
   UNIVERSAL CONTAINER FIXES
   ======================================== */

/* Force dark text on all white/light containers.
   LET OP: `.container` hoort hier NIET bij — dat is een layout-wrapper (max-width),
   geen licht oppervlak. Hij zit ook binnen donkere secties; `color:#333!important`
   maakte daar alle tekst onleesbaar (vakman/coaching/educatie/horeca/integraties/
   vergelijken/zorg: ratio ~1.0-1.4 op donkere CTA). Zonder deze regel erft `.container`
   gewoon: donker op lichte body, wit op een donkere sectie. */
.card,
.asset-card,
.logo-variant,
.font-sample,
.brand-card,
.service-card,
.feature-card,
.pricing-card,
.testimonial-card,
.stats-card,
.info-card,
.product-card,
.gallery-card,
.portfolio-card,
.team-card,
.contact-card {
    color: #333 !important;
}

/* ========================================
   SPECIFIC COMPONENT FIXES
   ======================================== */

/* Card titles and headings */
.container .card-title,
.container .card-header,
.container .asset-name,
.container .logo-name,
.container .brand-name,
.container .service-title,
.container .feature-title,
.container .pricing-title,
.container .testimonial-title,
.container .stats-title,
.container .info-title,
.container .product-title,
.container .gallery-title,
.container .portfolio-title,
.container .team-title,
.container .contact-title {
    color: #333 !important;
    font-weight: 600 !important;
}

/* Card descriptions and body text */
.container .card-subtitle,
.container .card-text,
.container .asset-description,
.container .logo-description,
.container .brand-description,
.container .service-description,
.container .feature-description,
.container .pricing-description,
.container .testimonial-text,
.container .stats-description,
.container .info-description,
.container .product-description,
.container .gallery-description,
.container .portfolio-description,
.container .team-description,
.container .contact-description {
    color: #555 !important;
}

/* Meta text and smaller elements */
.container .card-meta,
.container .asset-meta,
.container .logo-meta,
.container .brand-meta,
.container .service-meta,
.container .feature-meta,
.container .pricing-meta,
.container .testimonial-meta,
.container .stats-meta,
.container .info-meta,
.container .product-meta,
.container .gallery-meta,
.container .portfolio-meta,
.container .team-meta,
.container .contact-meta {
    color: #666 !important;
}

/* ========================================
   BUTTON PRESERVATION
   ======================================== */

/* Keep buttons white on colored backgrounds */
.container .btn,
.container .btn-primary,
.container .btn-secondary,
.container .btn-success,
.container .btn-danger,
.container .btn-warning,
.container .btn-info,
.container .btn-light,
.container .btn-dark,
.asset-card .btn,
.card .btn,
.service-card .btn,
.feature-card .btn,
.pricing-card .btn,
.product-card .btn,
.contact-card .btn {
    color: white !important;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */

/* Form labels and inputs */
.container .form-label,
.container .form-input,
.container .form-select,
.container .form-textarea,
.container .input-group-text {
    color: #333 !important;
}

/* ========================================
   NAVIGATION ELEMENTS
   ======================================== */

/* Nav tabs and menus */
.container .nav-tab,
.container .nav-link,
.container .menu-item,
.container .breadcrumb-item {
    color: #333 !important;
}

/* Active/hover states for navigation */
.container .nav-tab.active,
.container .nav-link:hover,
.container .menu-item:hover,
.container .breadcrumb-item.active {
    color: var(--primary-color, #FF8C00) !important;
}

/* ========================================
   ACCENT AND BRAND COLORS
   ======================================== */

/* Preserve brand colors for emphasis */
.container .brand-option strong,
.container .platform-name-option,
.container .accent-text,
.container .highlight,
.container .featured {
    color: var(--primary-color, #FF8C00) !important;
}

/* ========================================
   SPECIAL CASES
   ======================================== */

/* Tool cards with active states */
.tool-card {
    color: #333 !important;
}

.tool-card.active {
    color: white !important;
}

.tool-card i {
    color: #667eea !important;
}

.tool-card.active i {
    color: white !important;
}

/* ========================================
   RESPONSIVE OVERRIDES
   ======================================== */

/* Mobile-specific fixes */
@media (max-width: 768px) {
    .container,
    .card,
    .asset-card,
    .logo-variant,
    .font-sample {
        color: #333 !important;
    }
    
    .container .card-title,
    .container .asset-name,
    .container .logo-name {
        color: #333 !important;
        font-weight: 600 !important;
    }
    
    .container .card-subtitle,
    .container .asset-description,
    .container .logo-description {
        color: #555 !important;
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .container,
    .card,
    .asset-card {
        color: #000 !important;
    }
    
    .container .card-title,
    .container .asset-name {
        color: #000 !important;
    }
    
    .container .card-subtitle,
    .container .asset-description {
        color: #333 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .container,
    .card,
    .asset-card {
        transition: none !important;
    }
}

/* ========================================
   DONKERE SECTIES — WIT TEKST BESCHERMEN
   Deze regels overschrijven de .container color:#333 fix
   voor secties die een donkere achtergrond hebben.
   ======================================== */

/* Hero secties */
.hero .container,
.svc-hero .container,
.page-hero .container,
[class*="hero-section"] .container,
.hero-content,
.svc-hero-content {
    color: #ffffff !important;
}

/* Hero dag-thema bescherming */
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 p,
body.itlive-public-day .hero-badge,
body.itlive-public-day .hero-stat strong,
body.itlive-public-day .hero-stat span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Trust bar */
.trust-bar,
.trust-bar .container,
.trust-bar .trust-inner,
.trust-item {
    color: #ffffff !important;
}

/* Stats sectie */
.stats-section .container,
.stat-item,
.stat-item strong,
.stat-item span {
    color: #ffffff !important;
}

/* AI Tools sectie */
.ai-tools-section .container,
.ai-tools-section .section-title,
.ai-tools-section .section-sub {
    color: #ffffff !important;
}

/* Footer */
footer .container,
.site-footer .container,
.footer .container {
    color: #ffffff !important;
}

/* CTA strips met gekleurde achtergrond */
.cta-strip .container,
.cta-section .container {
    color: #ffffff !important;
}

/* Diensten-pagina fallback knoppen */
.dienst-fallback-section .btn-primary {
    color: #09111f !important;
}

/* Navbar */
.navbar .container {
    color: inherit !important;
}

/* Related services (donkere achtergrond) */
.related-section .container,
.related-card {
    color: #ffffff !important;
}

/*
USAGE INSTRUCTIONS:

1. Include this CSS file in your page header:
   <link href="/assets/css/universal-white-text-fix.css" rel="stylesheet">

2. Or add these styles to your existing CSS file

3. For specific page overrides, add page-specific classes:
   .page-specific .custom-component {
       color: #333 !important;
   }

4. Test with different screen sizes and contrast settings

5. Monitor for new components that might need fixes

COMPATIBILITY:
- Works with all modern browsers
- Mobile responsive
- Accessibility compliant
- High contrast mode support
- Reduced motion respect

MAINTENANCE:
- Add new component classes as they're created
- Test after major platform updates
- Monitor user feedback for readability issues
- Update color variables if brand colors change

*/

/* ===== IT Live donkere footer — leesbare tekst (fix 2026-07-02) ===== */
.home-site-footer{ color:#cbd5e1 !important; }
.home-site-footer h1,.home-site-footer h2,.home-site-footer h3,.home-site-footer h4,.home-site-footer h5,.home-site-footer h6,
.home-site-footer .footer-col-title,.home-site-footer .footer-title,.home-site-footer strong{ color:#ffffff !important; }
.home-site-footer a{ color:#a9c5ff !important; }
.home-site-footer a:hover{ color:#ffffff !important; }
.home-site-footer p,.home-site-footer li,.home-site-footer span,.home-site-footer small{ color:#cbd5e1 !important; }
.home-site-footer .footer-copyright,.home-site-footer .copyright,.home-site-footer small{ color:#94a3b8 !important; }

/* ===== footer-grid layout fix (jobs mist externe grid-CSS) 2026-07-02 ===== */
.home-site-footer .footer-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; gap:2rem 2.5rem !important; align-items:start; max-width:72rem; margin-left:auto; margin-right:auto; }
.home-site-footer .footer-grid>*{ min-width:0; }
.home-site-footer .footer-grid h3{ font-size:1.4rem; font-weight:700; margin-bottom:.5rem; }
.home-site-footer .footer-grid h4{ font-size:.72rem; font-weight:700; margin-bottom:1rem; letter-spacing:.1em; text-transform:uppercase; }
.home-site-footer .footer-grid ul{ list-style:none; padding:0; margin:0; line-height:1.9; }
@media(max-width:768px){ .home-site-footer .footer-grid{ grid-template-columns:1fr 1fr !important; } }
@media(max-width:480px){ .home-site-footer .footer-grid{ grid-template-columns:1fr !important; } }
/* FA-sprite iconen (2026-07-26) */
.itl-fa{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor}
/* [09-09-2026] fa-spin kwam uit het icoonlettertype; de tekeningen draaien nu zelf. */
.itl-fa-spin{animation:itl-fa-draai 2s linear infinite}
@keyframes itl-fa-draai{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.itl-fa-spin{animation:none}}


/* ===== itlive-header-core.css ===== */
            :root {
                --navy: #020917;
                --gold: #f2c14f;
                --gold2: #ffd97a;
                --gold-dim: rgba(242,193,79,0.13);
                --gold-border: rgba(242,193,79,0.28);
                --cyan: #00c8ff;
                --white: #ffffff;
                --muted: #6B92B8;
                --muted2: #3a567a;
                --gray: #6B92B8;
                --gray-light: #8ba3c4;
                --dark: #020917;
                --dark-lighter: #060f24;
                --primary: #f2c14f;
                --primary-dark: #c8922a;
                --gradient-primary: linear-gradient(135deg, #f2c14f 0%, #ffd97a 50%, #c8922a 100%);
                --gradient-accent: linear-gradient(135deg, #00c8ff 0%, #0066cc 100%);
                --shadow: 0 10px 25px rgba(0,0,0,0.2);
                --shadow-lg: 0 20px 40px rgba(0,0,0,0.3);
                --shadow-xl: 0 25px 50px rgba(0,0,0,0.4);
                --shadow-glow: 0 0 30px rgba(242,193,79,0.35);
            }
                /* 2026-08-10 — LICHTE PAGINA'S. Hierboven staat het DONKERE palet in :root:
                   --muted/--gray = #6B92B8, prima op navy maar op een lichte achtergrond
                   2,86-3,12:1. Een lichte pagina erft anders de DONKERE waarden: dat gaf 19
                   contrastfouten op /contact/ alleen al. Het donkere thema blijft ongewijzigd. */
                body.itlive-public-day { --muted: #475569; --gray: #475569; --muted2: #334155; }


            * { margin: 0; padding: 0; box-sizing: border-box; }
            html { scroll-behavior: smooth; }
            body {
                font-family: 'DM Sans', 'DM Sans Fallback', sans-serif;
                background: var(--navy);
                color: var(--white);
                line-height: 1.6;
                overflow-x: hidden;
                min-height: 100vh;
            }
            .navbar {
                position: sticky;
                top: 0;
                z-index: 200;
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                align-items: center;
                padding: 0 1.25rem 0 1.5rem;
                height: 66px;
                background: rgba(2, 9, 23, 0.85);
                backdrop-filter: blur(20px) saturate(180%);
                -webkit-backdrop-filter: blur(20px) saturate(180%);
                border-bottom: 1px solid rgba(0, 200, 255, 0.1);
            }
            .navbar .navbar-left { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; }
            .navbar .logo-icons {
                display: flex;
                align-items: center;
                gap: 0.35rem;
            }
            .navbar .logo-icons a {
                width: 34px;
                height: 34px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--muted);
                text-decoration: none;
                transition: color 0.2s, background 0.2s;
            }
            .navbar .logo-icons a:hover { color: var(--gold); background: rgba(255,255,255,0.06); }
            .navbar .logo-icons a i { font-size: 0.9rem; }
            .navbar .navbar-center { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
            .navbar .navbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
            .navbar .nav-links {
                display: none;
                list-style: none;
                margin: 0;
                padding: 0;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                gap: 0.1rem 1.25rem;
            }
            .navbar .nav-links li { margin: 0; }
            .navbar .nav-links a {
                color: var(--muted);
                text-decoration: none;
                font-size: 0.875rem;
                font-weight: 500;
                letter-spacing: 0.04em;
                padding: 0.4rem 0.5rem;
                border-radius: 6px;
                transition: color 0.2s, background 0.2s;
            }
            .navbar .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.06); }
            .navbar .nav-links a.active { color: var(--gold); }
            .navbar .nav-links .nav-live-ai { color: var(--cyan); font-weight: 600; }
            .navbar .nav-links .nav-live-ai:hover { color: var(--gold); }
            @media (min-width: 992px) {
                .navbar .nav-links { display: flex; }
                .navbar .menu-toggle { display: none !important; }
            }
            .navbar .logo {
                display: flex;
                align-items: center;
                gap: 10px;
                text-decoration: none;
            }
            .navbar .logo img.logo-icon-svg { width: 40px; height: 40px; flex-shrink: 0; }
            .navbar .logo-txt, .navbar .itlive-brand-wordmark .wm-main {
                font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
                font-weight: 900;
                font-size: 0.98rem;
                letter-spacing: 0.22em;
                color: #fff;
                text-transform: uppercase;
            }
            .navbar .logo-txt b, .navbar .itlive-brand-wordmark .wm-sub { color: var(--gold); font-weight: 600; font-size: 0.55em; letter-spacing: 0.25em; margin-top: 2px; }
            .navbar .itlive-brand-wordmark .wm-sub{color:#a16207}
            .navbar .itlive-brand-wordmark { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
            .navbar .nav-btn {
                padding: 0.52rem 1.4rem;
                border-radius: 999px;
                border: none;
                background: linear-gradient(135deg, var(--gold) 0%, #c8922a 100%);
                color: #0a0a0a;
                font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
                font-weight: 800;
                font-size: 0.78rem;
                letter-spacing: 0.07em;
                text-transform: uppercase;
                cursor: pointer;
                text-decoration: none;
                display: inline-block;
                box-shadow: 0 4px 22px rgba(242,193,79,0.35), inset 0 1px 1px rgba(255,255,255,0.5);
                transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .navbar .nav-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 32px rgba(242,193,79,0.6), inset 0 1px 1px rgba(255,255,255,0.6);
            }
            /* Ingelogd: zelfde balk als homepage — chip + primaire + ghost knop */
            .navbar-auth-cluster {
                display: none;
                align-items: center;
                gap: 0.45rem;
                flex-wrap: nowrap;
                justify-content: flex-end;
                flex-shrink: 0;
            }
            .itl-user-menu { position: relative; display: inline-flex; }
            .itl-user-trigger {
                display: inline-flex; align-items: center; gap: 0.4rem;
                padding: 0.4rem 0.75rem; border-radius: 10px;
                background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
                color: var(--gray-light, #e2e8f0); font-size: 0.8125rem; font-weight: 600;
                cursor: pointer; font-family: inherit; white-space: nowrap;
                max-width: min(16rem, 40vw); transition: background .15s, border-color .15s;
            }
            .itl-user-trigger .itlive-auth-name {
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 10rem;
            }
            .itl-user-trigger:hover, .itl-user-menu.open .itl-user-trigger {
                background: rgba(255,255,255,0.14); border-color: rgba(0,200,255,0.35);
            }
            .itl-user-menu.open .itl-user-trigger .fa-chevron-down { transform: rotate(180deg); }
            .itl-user-panel {
                display: none; position: absolute; top: calc(100% + 8px); right: 0;
                min-width: 180px; background: #fff; border: 1px solid #e2e8f0;
                border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.12);
                overflow: hidden; z-index: 9999;
            }
            .itl-user-menu.open .itl-user-panel { display: block; }
            .itl-user-panel a {
                display: flex; align-items: center; gap: 9px;
                padding: 11px 16px; font-size: .875rem; font-weight: 600;
                color: #0f172a !important; text-decoration: none;
                transition: background .12s;
            }
            .itl-user-panel a:hover { background: #f8fafc; }
            .itl-user-panel .itl-logout-link { color: #dc2626 !important; border-top: 1px solid #f1f5f9; }
            .itl-user-panel .itl-logout-link:hover { background: #fff5f5; }
            .navbar-user-chip {
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
                max-width: min(14rem, 32vw);
                padding: 0.4rem 0.8rem;
                border-radius: 10px;
                background: rgba(255, 255, 255, 0.08);
                border: 1px solid rgba(255, 255, 255, 0.14);
                color: var(--gray-light);
                font-size: 0.8125rem;
                font-weight: 600;
                line-height: 1.2;
            }
            .navbar-user-chip .itlive-auth-name {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .navbar .nav-btn.nav-btn--ghost {
                background: transparent !important;
                border: 1.5px solid rgba(255, 255, 255, 0.32) !important;
                color: #e2e8f0 !important;
                box-shadow: none !important;
            }
            .navbar .nav-btn.nav-btn--ghost:hover {
                background: rgba(255, 255, 255, 0.08) !important;
                border-color: rgba(0, 200, 255, 0.35) !important;
                color: #fff !important;
            }
            .navbar .menu-toggle {
                height: 44px;
                min-width: 44px;
                min-height: 44px;
                padding: 0 0.7rem;
                border-radius: 12px;
                border: 1px solid rgba(0,207,255,0.28);
                background: linear-gradient(135deg, rgba(124,58,237,0.20), rgba(0,207,255,0.10));
                backdrop-filter: blur(10px);
                color: #fff;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                font-size: 1.1rem;
                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .navbar .menu-toggle .menu-toggle-logo {
                width: 22px;
                height: 22px;
                display: block;
                filter: drop-shadow(0 0 6px rgba(0,207,255,0.45));
                transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .navbar .menu-toggle:hover {
                background: linear-gradient(135deg, rgba(124,58,237,0.32), rgba(0,207,255,0.18));
                border-color: rgba(0,207,255,0.55);
                transform: scale(1.05);
            }
            .navbar .menu-toggle:hover .menu-toggle-logo { transform: rotate(-8deg) scale(1.08); }
            /* ── Mobile: tablet ── */
            @media (max-width: 991px) {
                .navbar {
                    display: flex !important;
                    grid-template-columns: none !important;
                    justify-content: space-between;
                    padding: 0 1rem;
                    height: 60px;
                    gap: 8px;
                }
                .navbar .menu-toggle { display: flex; }
                .navbar .logo-icons { display: none; }
                .navbar .navbar-center { display: none !important; }
                .navbar .navbar-right {
                    gap: 8px;
                    flex-shrink: 0;
                }
                .navbar .itlive-auth-guest { display: inline-flex; }
                .navbar-auth-cluster { flex-wrap: nowrap !important; }
                .itl-user-panel { right: 0; }
            }
            /* ── Mobile: phone ── */
            @media (max-width: 768px) {
                .navbar { padding: 0 0.75rem; height: 56px; gap: 6px; }
                .navbar .logo img.logo-icon-svg { width: 34px; height: 34px; }
                .navbar .itlive-brand-wordmark .wm-main { font-size: 0.85rem; letter-spacing: 0.12em; }
                .navbar .nav-btn { padding: 0.4rem 0.9rem; font-size: 0.72rem; }
                .contact-bar { font-size: 0.72rem !important; }
                .contact-bar .sep { display: none !important; }
                .contact-bar-inner { gap: 8px !important; }
            }
            /* ── Mobile: small phone ── */
            @media (max-width: 480px) {
                .navbar { padding: 0 0.5rem; height: 52px; }
                .navbar .itlive-brand-wordmark .wm-sub { display: none; }
                .navbar .itlive-brand-wordmark .wm-main { font-size: 0.78rem; }
                .navbar .logo img.logo-icon-svg { width: 30px; height: 30px; }
                .navbar .nav-btn { padding: 0.35rem 0.75rem; font-size: 0.68rem; letter-spacing: 0.04em; }
                .navbar .menu-toggle { height: 38px; min-width: 38px; min-height: 38px; padding: 0 0.5rem; gap: 0.4rem; font-size: 1rem; }
                .navbar .menu-toggle .menu-toggle-logo { width: 18px; height: 18px; }
                .contact-bar { display: none !important; }
            }
            .nav-sidebar-overlay {
                position: fixed;
                inset: 0;
                background: rgba(2,9,23,0.75);
                backdrop-filter: blur(8px);
                z-index: 400;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.25s, visibility 0.25s;
            }
            .nav-sidebar-overlay.is-open { opacity: 1; visibility: visible; }
            .nav-sidebar {
                position: fixed;
                top: 0;
                right: 0;
                width: min(360px, 90vw);
                height: 100vh;
                background: linear-gradient(180deg, #020917 0%, #0C1B38 100%);
                border-left: 1px solid rgba(0,200,255,0.15);
                z-index: 401;
                transform: translateX(100%);
                transition: transform 0.3s ease;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
            }
            .nav-sidebar-overlay.is-open .nav-sidebar { transform: translateX(0); }
            .nav-sidebar-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1rem 1.25rem;
                border-bottom: 1px solid rgba(255,255,255,0.08);
            }
            .nav-sidebar-brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
            .nav-sidebar-logo { width: 36px; height: 36px; flex-shrink: 0; }
            .nav-sidebar-brand-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
            .nav-sidebar-brand-name { font-weight: 800; font-size: 1rem; letter-spacing: 0.02em; }
            .nav-sidebar-brand-sub { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-top: 1px; }
            .nav-sidebar-header .sidebar-close {
                width: 44px;
                height: 44px;
                border-radius: 10px;
                border: 1px solid rgba(255,255,255,0.15);
                background: rgba(255,255,255,0.06);
                color: #fff;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.25rem;
            }
            .nav-sidebar-header .sidebar-close:hover { background: rgba(255,255,255,0.12); }
            .nav-sidebar-menu { list-style: none; padding: 1rem 0; margin: 0; }
            .nav-sidebar-menu li { margin: 0; }
            .nav-sidebar-menu a {
                display: block;
                padding: 0.85rem 1.25rem;
                color: #e8f0f8;
                text-decoration: none;
                font-weight: 500;
                border-left: 3px solid transparent;
                transition: background 0.2s, border-color 0.2s, color 0.2s;
            }
            .nav-sidebar-menu a:hover,
                        .nav-sidebar-group { margin: 0; }
            .nav-sidebar-toggle {
                width: 100%; text-align: left; background: transparent; border: 0; color: #fff;
                padding: 0.85rem 1.5rem; font-size: 1rem; font-weight: 600; cursor: pointer;
                display: flex; align-items: center; justify-content: space-between;
            }
            .nav-sidebar-toggle:hover { background: rgba(255,255,255,0.06); color: var(--gold); }
            .nav-sidebar-sub { list-style: none; margin: 0; padding: 0 0 0.5rem 0; display: none; background: rgba(0,0,0,0.15); }
            .nav-sidebar-group.open .nav-sidebar-sub { display: block; }
            .nav-sidebar-sub a { padding: 0.55rem 1.5rem 0.55rem 2.25rem !important; font-size: 0.92rem !important; font-weight: 500 !important; }
            .nav-sidebar-label { padding: 0.65rem 1.5rem 0.25rem 2rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); opacity: 0.85; }
.nav-sidebar-menu a.active {
                background: rgba(255,255,255,0.06);
                border-left-color: var(--gold);
                color: var(--gold);
            }
            .nav-sidebar-chat {
                margin: 1rem 1.25rem;
                padding: 1.25rem;
                background: rgba(0,200,255,0.08);
                border: 1px solid rgba(0,200,255,0.2);
                border-radius: 12px;
            }
            .nav-sidebar-chat h4 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--cyan); display: flex; align-items: center; gap: 0.5rem; }
            .nav-sidebar-chat p { font-size: 0.875rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.4; }
            .nav-sidebar-chat .btn-open-chat {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.6rem 1.2rem;
                background: linear-gradient(135deg, var(--cyan), #0066aa);
                color: #fff;
                border: none;
                border-radius: 8px;
                font-weight: 600;
                font-size: 0.9rem;
                cursor: pointer;
                text-decoration: none;
            }
            .nav-sidebar-chat .btn-open-chat:hover { box-shadow: 0 6px 20px rgba(0,200,255,0.35); }
            .nav-sidebar-contact {
                margin-top: auto;
                padding: 1.25rem;
                border-top: 1px solid rgba(255,255,255,0.08);
                font-size: 0.875rem;
            }
            .nav-sidebar-contact a {
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                color: var(--muted);
                text-decoration: none;
                margin-right: 1rem;
                margin-bottom: 0.5rem;
            }
            .nav-sidebar-contact a:hover { color: var(--gold); }

            /* Live zoekbalk – alle domeinen + AI suggesties bij geen resultaat */
            .navbar .search-wrap {
                position: relative;
                margin-right: 0.5rem;
            }
            .navbar .search-input {
                width: 160px;
                padding: 0.45rem 0.75rem 0.45rem 2rem;
                border-radius: 999px;
                border: 1px solid rgba(255,255,255,0.15);
                background: rgba(255,255,255,0.06);
                color: #fff;
                font-size: 0.8125rem;
                transition: width 0.2s, border-color 0.2s;
            }
            .navbar .search-input::placeholder { color: rgba(255,255,255,0.4); }
            .navbar .search-input:focus {
                outline: none;
                border-color: rgba(0,200,255,0.4);
                width: 200px;
            }
            .navbar .search-wrap .search-icon {
                position: absolute;
                left: 0.75rem;
                top: 50%;
                transform: translateY(-50%);
                color: var(--muted);
                font-size: 0.8rem;
                pointer-events: none;
            }
            .navbar .search-dropdown {
                position: absolute;
                top: calc(100% + 6px);
                left: 0;
                right: 0;
                min-width: 280px;
                max-height: 70vh;
                overflow-y: auto;
                background: linear-gradient(180deg, #020917 0%, #0C1B38 100%);
                border: 1px solid rgba(0,200,255,0.2);
                border-radius: 12px;
                box-shadow: 0 12px 40px rgba(0,0,0,0.5);
                z-index: 300;
                display: none;
            }
            .navbar .search-dropdown.is-open { display: block; }
            .navbar .search-dropdown a {
                display: block;
                padding: 0.6rem 1rem;
                color: #e8f0f8;
                text-decoration: none;
                font-size: 0.875rem;
                border-bottom: 1px solid rgba(255,255,255,0.06);
                transition: background 0.2s;
            }
            .navbar .search-dropdown a:hover { background: rgba(255,255,255,0.08); color: var(--gold); }
            .navbar .search-dropdown a small {
                display: block;
                font-size: 0.75rem;
                color: var(--muted);
                margin-top: 0.15rem;
            }
            .navbar .search-dropdown .search-no-results {
                padding: 1rem;
                color: var(--muted);
                font-size: 0.875rem;
            }
            .navbar .search-dropdown .search-no-results strong { color: var(--cyan); }
            .navbar .search-dropdown .search-suggestions {
                padding: 0.5rem 1rem 1rem;
                border-top: 1px solid rgba(255,255,255,0.08);
            }
            .navbar .search-dropdown .search-suggestions a {
                display: inline-block;
                margin: 0.25rem 0.25rem 0 0;
                padding: 0.35rem 0.65rem;
                background: rgba(0,200,255,0.15);
                border-radius: 8px;
                font-size: 0.8rem;
                border: none;
            }
            .navbar .search-dropdown .search-suggestions a:hover { background: rgba(0,200,255,0.25); }
            .nav-sidebar .search-wrap {
                position: relative;
                padding: 0.75rem 1.25rem;
                border-bottom: 1px solid rgba(255,255,255,0.08);
            }
            .nav-sidebar .search-wrap .search-icon { left: 1.5rem; }
            .nav-sidebar .search-input {
                width: 100%;
                padding: 0.6rem 1rem 0.6rem 2.5rem;
                border-radius: 10px;
                border: 1px solid rgba(255,255,255,0.15);
                background: rgba(255,255,255,0.06);
                color: #fff;
                font-size: 0.9rem;
            }
            .nav-sidebar .search-input::placeholder { color: rgba(255,255,255,0.4); }
            .nav-sidebar .search-dropdown {
                left: 1.25rem;
                right: 1.25rem;
                min-width: auto;
            }
            @media (max-width: 991px) {
                .navbar .search-wrap { display: none; }
            }
            @media (max-width: 1100px) {
                .navbar .search-input { width: 140px; }
                .navbar .search-input:focus { width: 180px; }
            }
            /* iPad landscape compact — hide search so AANMELDEN button stays visible */
            @media (min-width: 992px) and (max-width: 1200px) {
                .navbar .search-wrap { display: none !important; }
                .navbar .navbar-right { gap: 0.5rem; }
            }

            /* Contact bar – 1 regel, full width */
            .contact-bar {
                width: 100%;
                background: rgba(0, 32, 59, 0.95);
                border-bottom: 1px solid rgba(0, 200, 255, 0.12);
                padding: 0.5rem 1rem;
            }
            .contact-bar-inner {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                gap: 1rem 1.5rem;
                font-size: 0.875rem;
            }
            .contact-bar a {
                color: var(--muted);
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                transition: color 0.2s;
            }
            .contact-bar a:hover { color: var(--gold); }
            .contact-bar .sep {
                color: rgba(255,255,255,0.2);
                user-select: none;
            }
            @media (max-width: 768px) {
                .contact-bar { padding: 0.5rem 0.75rem; }
                .contact-bar-inner { gap: 0.75rem 1rem; font-size: 0.8125rem; }
            }
            @media (max-width: 600px) {
                .contact-bar-inner { gap: 0.5rem 0.75rem; font-size: 0.8rem; }
                .contact-bar .sep { display: none; }
            }

            /* Reduce motion for users who prefer it */
            @media (prefers-reduced-motion: reduce) {
                * {
                    animation-duration: 0.01ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 0.01ms !important;
                }
            }

            /* Dag-thema: witte header, lichte achtergrond (publieke site) */
            body.itlive-public-day {
                background: #f1f5f9 !important;
                color: #0f172a !important;
            }
            body.itlive-public-day .navbar {
                background: rgba(255, 255, 255, 0.96) !important;
                border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
                box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
            }
            body.itlive-public-day .navbar .nav-links a {
                color: #475569 !important;
            }
            body.itlive-public-day .navbar .nav-links a:hover {
                color: #0f172a !important;
                background: rgba(15, 23, 42, 0.06) !important;
            }
            body.itlive-public-day .navbar .nav-links a.active { color: #92400e !important; /* 2026-08-10: was #b45309 op #e7f0fd = 4,37:1, net onder de norm. Nu 6,17:1. */ }
            body.itlive-public-day .navbar .nav-links .nav-live-ai { color: #0e7490 !important; }
            body.itlive-public-day .navbar .nav-links .nav-live-ai:hover { color: #c9a227 !important; }
            body.itlive-public-day .navbar .logo-txt,
            body.itlive-public-day .navbar .itlive-brand-wordmark .wm-main { color: #0f172a !important; }
            body.itlive-public-day .navbar .logo-icons a { color: #64748b !important; }
            body.itlive-public-day .navbar .logo-icons a:hover { color: #0e7490 !important; background: rgba(15, 23, 42, 0.06) !important; }
            body.itlive-public-day .navbar .menu-toggle {
                border-color: rgba(15, 23, 42, 0.15) !important;
                background: rgba(255, 255, 255, 0.9) !important;
                color: #0f172a !important;
            }
            body.itlive-public-day .navbar .search-input {
                border: 1px solid rgba(15, 23, 42, 0.12) !important;
                background: #fff !important;
                color: #0f172a !important;
            }
            body.itlive-public-day .navbar .search-input::placeholder { color: #94a3b8 !important; }
            body.itlive-public-day .navbar .search-wrap .search-icon { color: #64748b !important; }
            body.itlive-public-day .navbar .search-dropdown {
                background: #fff !important;
                border: 1px solid rgba(15, 23, 42, 0.1) !important;
                box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12) !important;
            }
            body.itlive-public-day .navbar .search-dropdown a {
                color: #0f172a !important;
                border-bottom-color: rgba(15, 23, 42, 0.06) !important;
            }
            body.itlive-public-day .navbar .search-dropdown a:hover { background: #f8fafc !important; color: #b45309 !important; }
            body.itlive-public-day .navbar .search-dropdown a small { color: #64748b !important; }
            body.itlive-public-day .contact-bar {
                background: #ffffff !important;
                border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
            }
            body.itlive-public-day .contact-bar a { color: #475569 !important; }
            body.itlive-public-day .contact-bar a:hover { color: #0e7490 !important; }
            body.itlive-public-day .contact-bar .sep { color: rgba(15, 23, 42, 0.2) !important; }
            body.itlive-public-day .nav-sidebar-overlay { background: rgba(15, 23, 42, 0.45) !important; }
            body.itlive-public-day .nav-sidebar {
                background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
                border-left: 1px solid rgba(15, 23, 42, 0.1) !important;
            }
            body.itlive-public-day .nav-sidebar-header { border-bottom-color: rgba(15, 23, 42, 0.08) !important; color: #0f172a !important; }
            body.itlive-public-day .nav-sidebar-welcome { color: #64748b !important; }
            body.itlive-public-day .nav-sidebar-header .sidebar-close {
                border-color: rgba(15, 23, 42, 0.15) !important;
                background: #fff !important;
                color: #0f172a !important;
            }
            body.itlive-public-day .nav-sidebar-menu a { color: #334155 !important; }
            /* SIDEBAR-DAG-KNOPPEN-20260927 — Diensten/Pakketten (.nav-sidebar-toggle) bleven #fff uit het
               donkere thema: wit op wit in het lichte menu. Zelfde kleuren als de links hieronder. */
            body.itlive-public-day .nav-sidebar-toggle { color: #334155 !important; }
            body.itlive-public-day .nav-sidebar-toggle:hover,
            body.itlive-public-day .nav-sidebar-group.open > .nav-sidebar-toggle { background: rgba(15, 23, 42, 0.06) !important; color: #b45309 !important; }
            body.itlive-public-day .nav-sidebar-sub { background: rgba(15, 23, 42, 0.04) !important; }
            body.itlive-public-day .nav-sidebar-label { color: #92400e !important; opacity: 1 !important; }
            body.itlive-public-day .nav-sidebar .search-input::placeholder { color: #64748b !important; }
            body.itlive-public-day .nav-sidebar-menu a:hover,
            body.itlive-public-day .nav-sidebar-menu a.active { background: rgba(15, 23, 42, 0.06) !important; color: #b45309 !important; border-left-color: #c9a227 !important; }
            body.itlive-public-day .nav-sidebar .search-input {
                border: 1px solid rgba(15, 23, 42, 0.12) !important;
                background: #fff !important;
                color: #0f172a !important;
            }
            body.itlive-public-day .nav-sidebar-chat {
                background: rgba(8, 145, 178, 0.08) !important;
                border: 1px solid rgba(8, 145, 178, 0.25) !important;
            }
            body.itlive-public-day .nav-sidebar-chat h4 { color: #0e7490 !important; }
            body.itlive-public-day .nav-sidebar-chat p { color: #64748b !important; }
            body.itlive-public-day .nav-sidebar-contact { border-top-color: rgba(15, 23, 42, 0.08) !important; }
            body.itlive-public-day .nav-sidebar-contact a { color: #64748b !important; }
            body.itlive-public-day .nav-sidebar-contact a:hover { color: #b45309 !important; }
            body.itlive-public-day .navbar-user-chip {
                background: #f1f5f9 !important;
                border-color: rgba(15, 23, 42, 0.1) !important;
                color: #334155 !important;
            }
            body.itlive-public-day .navbar .nav-btn.nav-btn--ghost {
                border-color: rgba(15, 23, 42, 0.18) !important;
                color: #475569 !important;
            }
            body.itlive-public-day .navbar .nav-btn.nav-btn--ghost:hover {
                background: rgba(15, 23, 42, 0.06) !important;
                border-color: rgba(15, 23, 42, 0.22) !important;
                color: #0f172a !important;
            }
                    /* 2026-07-16 fix: tussen 1200-1500px liep de nav over -> AANMELDEN-CTA werd afgekapt.
               Compacter in die zone; >=1501px blijft ongewijzigd. */
            @media (min-width: 1201px) and (max-width: 1500px) {
                .navbar { padding: 0 0.75rem; }
                .navbar .navbar-right { gap: 0.5rem; }
                .navbar .search-wrap { margin-right: 0.25rem; }
                .navbar .search-input { width: 110px; }
                .navbar .nav-btn { padding: 0.52rem 0.9rem; }
                .navbar .nav-links { gap: 0.55rem; }
            }


/* ===== itlive-home-polish.css ===== */
/**
 * IT Live Homepage — Visual Polish Layer v2
 * Laadt NA alle andere CSS zodat verbeteringen overschrijven zonder iets te breken.
 * Kleurenpalet: indigo (#6366f1) + violet (#8b5cf6) + goud (#c9a227)
 *
 * Verbetert:
 *  - Chat bubbles (scherpere schaduwen, betere randen, subtiele animaties)
 *  - Composer/input bar (glass morph, focus ring)
 *  - Action chips (consistent design)
 *  - Buttons (hover states, transitions)
 *  - Navigatie balk (polish, borders)
 *  - Scrollbars (modern thin)
 *  - Form inputs (focus states)
 */

/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — gedeeld voor hele homepage
   ═══════════════════════════════════════════════════════ */
:root {
    --itl-ink-deep: #0a0f1c;
    --itl-ink: #0f172a;
    --itl-ink-soft: #1e293b;
    --itl-mute: #64748b;
    --itl-mute-soft: #94a3b8;
    --itl-line: #e2e8f0;
    --itl-line-soft: #f1f5f9;
    --itl-bg: #f8fafc;
    --itl-gold: #c9a227;
    --itl-gold-bright: #f2c14f;
    --itl-gold-soft: #fef9e7;
    --itl-indigo: #6366f1;
    --itl-indigo-bright: #818cf8;
    --itl-indigo-soft: #e0e7ff;
    --itl-violet: #8b5cf6;
    --itl-violet-soft: #ede9fe;

    /* Shadows */
    --itl-shadow-xs: 0 1px 2px rgba(15,23,42,.04);
    --itl-shadow-sm: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --itl-shadow-md: 0 4px 16px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --itl-shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
    --itl-shadow-glow-gold: 0 0 0 3px rgba(201,162,39,.15);
    --itl-shadow-glow-indigo: 0 0 0 3px rgba(99,102,241,.15);

    /* Radii */
    --itl-r-sm: 8px;
    --itl-r-md: 12px;
    --itl-r-lg: 16px;
    --itl-r-xl: 20px;
    --itl-r-pill: 999px;

    /* Transitions */
    --itl-ease: cubic-bezier(.22,.68,.15,1.05);
    --itl-t-fast: 120ms var(--itl-ease);
    --itl-t-med: 220ms var(--itl-ease);
}

/* ═══════════════════════════════════════════════════════
   CHAT BUBBLES — scherper, moderner, betere hiërarchie
   ═══════════════════════════════════════════════════════ */
.msg-bubble {
    padding: 12px 16px !important;
    font-size: .94rem !important;
    line-height: 1.6 !important;
    max-width: min(720px, 92%);
    transition: transform var(--itl-t-fast), box-shadow var(--itl-t-fast);
}

/* AI bubble */
.msg-bubble.msg-ai {
    background: #ffffff !important;
    border: 1px solid rgba(99,102,241,.1) !important;
    color: var(--itl-ink) !important;
    box-shadow:
        0 2px 8px rgba(99,102,241,.05),
        0 1px 3px rgba(0,0,0,.04),
        inset 0 1px 0 rgba(255,255,255,1) !important;
    border-radius: 18px 18px 18px 4px !important;
}
.msg-bubble.msg-ai:hover {
    box-shadow:
        0 4px 14px rgba(99,102,241,.08),
        0 2px 6px rgba(0,0,0,.05),
        inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* User bubble */
.msg-bubble.msg-user {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: 1px solid rgba(99,102,241,.25) !important;
    box-shadow:
        0 3px 12px rgba(99,102,241,.3),
        0 1px 3px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.2) !important;
    border-radius: 18px 18px 4px 18px !important;
}

/* Dark mode chat bubbles */
html[data-home-theme="night"] .msg-bubble.msg-ai,
html[data-home-theme="evening"] .msg-bubble.msg-ai {
    background: rgba(15,30,60,.9) !important;
    border-color: rgba(99,102,241,.2) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05) !important;
    backdrop-filter: blur(10px);
}

/* ═══════════════════════════════════════════════════════
   COMPOSER / INPUT BAR — verfijning bovenop main CSS
   ═══════════════════════════════════════════════════════ */
#homeChatInputBar,
.chat-input-area {
    transition: border-color var(--itl-t-med), box-shadow var(--itl-t-med);
}

/* Input veld zelf */
.home-chat-textarea,
#homeChatInput,
textarea.home-chat-input {
    border: 1.5px solid rgba(15,23,42,.1) !important;
    border-radius: var(--itl-r-lg) !important;
    transition: border-color var(--itl-t-fast), box-shadow var(--itl-t-fast) !important;
}
.home-chat-textarea:focus,
#homeChatInput:focus,
textarea.home-chat-input:focus {
    border-color: var(--itl-indigo) !important;
    box-shadow: var(--itl-shadow-glow-indigo) !important;
    outline: none !important;
}

/* ═══════════════════════════════════════════════════════
   ACTION CHIPS — consistent design
   ═══════════════════════════════════════════════════════ */
.chat-nav-chip,
.home-chat-suggestion,
.home-mode-chip,
button.chip {
    transition: all var(--itl-t-fast) !important;
    border-radius: var(--itl-r-pill) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
.chat-nav-chip:hover,
.home-chat-suggestion:hover,
.home-mode-chip:hover,
button.chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--itl-shadow-sm);
}
.chat-nav-chip:active,
.home-chat-suggestion:active,
.home-mode-chip:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════
   NAV TOOLS — knoppen in de navigator bar
   ═══════════════════════════════════════════════════════ */
.chat-nav-tool-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(15,23,42,.07) !important;
    background: rgba(255,255,255,.7) !important;
    color: var(--itl-ink-soft) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all var(--itl-t-fast) !important;
    flex-shrink: 0 !important;
}
.chat-nav-tool-btn:hover {
    background: var(--itl-indigo-soft) !important;
    border-color: rgba(99,102,241,.25) !important;
    color: var(--itl-indigo) !important;
    transform: translateY(-1px);
}
.chat-nav-tool-btn:active {
    transform: translateY(0);
    background: rgba(99,102,241,.12) !important;
}
.chat-nav-tool-btn i {
    font-size: .95rem !important;
}

/* Night mode */
html[data-home-theme="night"] .chat-nav-tool-btn,
html[data-home-theme="evening"] .chat-nav-tool-btn {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #cbd5e1 !important;
}
html[data-home-theme="night"] .chat-nav-tool-btn:hover,
html[data-home-theme="evening"] .chat-nav-tool-btn:hover {
    background: rgba(99,102,241,.15) !important;
    border-color: rgba(99,102,241,.35) !important;
    color: var(--itl-indigo-bright) !important;
}

/* ═══════════════════════════════════════════════════════
   MODERNE SCROLLBARS
   ═══════════════════════════════════════════════════════ */
.chat-messages,
.home-chat-scroll-wrap,
body {
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,.25) transparent;
}
.chat-messages::-webkit-scrollbar,
.home-chat-scroll-wrap::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}
.chat-messages::-webkit-scrollbar-thumb,
.home-chat-scroll-wrap::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,.2) !important;
    border-radius: 10px !important;
    transition: background .15s !important;
}
.chat-messages::-webkit-scrollbar-thumb:hover,
.home-chat-scroll-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(99,102,241,.45) !important;
}
.chat-messages::-webkit-scrollbar-track,
.home-chat-scroll-wrap::-webkit-scrollbar-track {
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════
   NAVBAR — subtiele polish
   ═══════════════════════════════════════════════════════ */
.navbar .nav-links a {
    position: relative;
    transition: color var(--itl-t-fast) !important;
}
.navbar .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--itl-indigo);
    border-radius: 2px;
    transition: width var(--itl-t-med), left var(--itl-t-med);
}
.navbar .nav-links a:hover::after,
.navbar .nav-links a.active::after {
    width: 60%;
    left: 20%;
}

/* Logo hover */
.navbar .logo {
    transition: opacity var(--itl-t-fast);
}
.navbar .logo:hover {
    opacity: .85;
}

/* ═══════════════════════════════════════════════════════
   SESSION CODE MODAL — extra polish
   ═══════════════════════════════════════════════════════ */
#sessionCodeOverlay {
    animation: itlFadeIn .2s ease;
}
#sessionCodeBox {
    animation: itlScaleIn .25s var(--itl-ease);
}
@keyframes itlFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes itlScaleIn {
    from { opacity: 0; transform: scale(.92); }
    to { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════
   FOCUS RING — consistent overal (indigo)
   ═══════════════════════════════════════════════════════ */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--itl-indigo) !important;
    outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════
   SELECTIE KLEUREN
   ═══════════════════════════════════════════════════════ */
::selection {
    background: rgba(99,102,241,.2);
    color: var(--itl-ink-deep);
}
html[data-home-theme="night"] ::selection,
html[data-home-theme="evening"] ::selection {
    background: rgba(99,102,241,.4);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════
   LOADING / TYPING INDICATORS
   ═══════════════════════════════════════════════════════ */
.typing-indicator,
.home-chat-typing {
    display: inline-flex;
    gap: 5px;
    padding: 8px 14px;
}
.typing-indicator span,
.home-chat-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--itl-indigo);
    animation: itlBounce 1.4s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: .16s; }
.typing-indicator span:nth-child(3) { animation-delay: .32s; }
@keyframes itlBounce {
    0%, 80%, 100% { transform: scale(.6); opacity: .4; }
    40% { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
   MOBIEL — iets meer compact
   ═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .msg-bubble {
        padding: 10px 14px !important;
        font-size: .9rem !important;
    }
    .chat-nav-tool-btn {
        width: 34px !important;
        height: 34px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   SLIDE-OUT SIDEBAR MENU (mobiel menu)
   ═══════════════════════════════════════════════════════ */
.nav-sidebar {
    background: rgba(17,24,39,0.88) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    box-shadow: -12px 0 40px rgba(0,0,0,.4), inset 1px 0 0 rgba(99,102,241,.12) !important;
}
.nav-sidebar-menu a {
    position: relative;
    transition: all var(--itl-t-fast) !important;
    padding-left: 1.5rem !important;
    border-radius: 0 10px 10px 0 !important;
    margin-right: 10px !important;
}
.nav-sidebar-menu a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background var(--itl-t-fast);
}
.nav-sidebar-menu a:hover::before,
.nav-sidebar-menu a.active::before {
    background: linear-gradient(180deg, var(--itl-indigo), var(--itl-violet));
}
.nav-sidebar-menu a:hover {
    background: linear-gradient(90deg, rgba(99,102,241,.1), transparent) !important;
    color: var(--itl-indigo-bright) !important;
    transform: translateX(2px);
}
.nav-sidebar-menu a.active {
    background: linear-gradient(90deg, rgba(99,102,241,.15), transparent) !important;
    color: var(--itl-indigo-bright) !important;
    font-weight: 600;
}
.nav-sidebar-header .sidebar-close {
    transition: all var(--itl-t-fast) !important;
}
.nav-sidebar-header .sidebar-close:hover {
    background: rgba(239,68,68,.15) !important;
    border-color: rgba(239,68,68,.3) !important;
    color: #fca5a5 !important;
    transform: rotate(90deg);
}

/* Sidebar chat CTA */
.nav-sidebar-chat {
    background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.06)) !important;
    border: 1px solid rgba(99,102,241,.2) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.nav-sidebar-chat .btn-open-chat {
    transition: all var(--itl-t-fast) !important;
}
.nav-sidebar-chat .btn-open-chat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99,102,241,.4) !important;
}

/* ═══════════════════════════════════════════════════════
   FOOTER — polish
   ═══════════════════════════════════════════════════════ */
footer {
    background: linear-gradient(180deg, #020917 0%, #050f24 100%) !important;
    position: relative;
    overflow: hidden;
}
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,.3), transparent);
}
footer::after {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(99,102,241,.04), transparent 70%);
    pointer-events: none;
}
footer h3,
footer h4 {
    position: relative;
    display: inline-block;
}
footer h4::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--itl-indigo);
    border-radius: 2px;
}
footer a {
    transition: color var(--itl-t-fast), padding-left var(--itl-t-fast) !important;
    display: inline-flex !important;
    align-items: center;
}
footer a:hover {
    color: var(--itl-indigo-bright) !important;
    padding-left: 6px;
}
footer ul a::before {
    content: '→';
    opacity: 0;
    margin-right: 0;
    transition: opacity var(--itl-t-fast), margin-right var(--itl-t-fast);
    color: var(--itl-indigo);
    font-weight: 700;
}
footer ul a:hover::before {
    opacity: 1;
    margin-right: 6px;
}

/* ═══════════════════════════════════════════════════════
   CONTACT-BAR (onder navbar)
   ═══════════════════════════════════════════════════════ */
.contact-bar {
    background: linear-gradient(90deg, rgba(0,32,59,.95), rgba(0,40,80,.95), rgba(0,32,59,.95)) !important;
}
.contact-bar a {
    transition: color var(--itl-t-fast), transform var(--itl-t-fast) !important;
}
.contact-bar a:hover {
    transform: translateY(-1px);
    color: var(--itl-indigo-bright) !important;
}
.contact-bar a i {
    transition: transform var(--itl-t-fast);
}
.contact-bar a:hover i {
    transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════
   CARDS (marketing pages, examples, service cards)
   ═══════════════════════════════════════════════════════ */
.card,
.service-card,
.feature-card {
    transition: transform var(--itl-t-med), box-shadow var(--itl-t-med), border-color var(--itl-t-med) !important;
}
.card:hover,
.service-card:hover,
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--itl-shadow-lg) !important;
}

/* ═══════════════════════════════════════════════════════
   LINKS — subtiele underline animation
   ═══════════════════════════════════════════════════════ */
a:not(.nav-btn):not(.navbar a):not(.msg-bubble a):not(.chat-nav-tool-btn):not(.card):not(footer a):not(.chip):not([class*="chip"]):not(.nav-sidebar-menu a) {
    transition: color var(--itl-t-fast);
}

/* ═══════════════════════════════════════════════════════
   BADGES & TAGS
   ═══════════════════════════════════════════════════════ */
.badge,
.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--itl-r-pill);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: all var(--itl-t-fast);
}

/* ═══════════════════════════════════════════════════════
   PAGE TRANSITIES — subtle fade-in op load
   ═══════════════════════════════════════════════════════ */
@keyframes itlFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Geen blanket animatie op alle secties — voorkomt opacity:0 FOUC op trage verbindingen */

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION — respecteer gebruikersvoorkeur
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════
   DARK SECTIONS OP MARKETING PAGES
   ═══════════════════════════════════════════════════════ */
.dark-section,
section[data-theme="dark"] {
    background: linear-gradient(180deg, #020917 0%, #0a1630 100%);
    color: #e2e8f0;
}
.dark-section h1,
.dark-section h2,
.dark-section h3,
section[data-theme="dark"] h1,
section[data-theme="dark"] h2,
section[data-theme="dark"] h3 {
    color: #fff;
}

/* ═══════════════════════════════════════════════════════
   INLINE CODE & KBD — pretty tokens
   ═══════════════════════════════════════════════════════ */
code:not(pre code) {
    background: rgba(99,102,241,.08);
    color: #4338ca;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: .85em;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    border: 1px solid rgba(99,102,241,.15);
}
html[data-home-theme="night"] code:not(pre code),
html[data-home-theme="evening"] code:not(pre code) {
    background: rgba(99,102,241,.15);
    color: #c7d2fe;
    border-color: rgba(99,102,241,.25);
}
kbd {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-bottom-width: 2px;
    border-radius: 5px;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: .8em;
    color: #334155;
    box-shadow: 0 1px 0 rgba(15,23,42,.06);
}

/* ── Overflow-fix: logo-carousel lc-track veroorzaakte horizontale scroll ── */
html, body { overflow-x: hidden !important; max-width: 100% !important; }
.lc-wrap   { overflow: hidden !important; }


/* HERO-CHROME-20260923 */
.hero-cta-zone{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:1.1rem 0 0}
.hero-btns--primary{display:flex;flex-wrap:wrap;gap:12px;margin:0;animation:none}
.hero-btns--secondary{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 .5rem;opacity:.95}
.hero .hero-cta-main.btn-primary,
.hero .hero-strategie-cta.btn-primary{
  min-height:52px;padding:0 1.6rem;border-radius:999px;font-size:1.05rem;font-weight:800;
  letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.55rem;
  background:linear-gradient(135deg,#f2c14f 0%,#e8a317 55%,#c98a0a 100%)!important;
  color:#0f172a!important;border:0;box-shadow:0 10px 28px rgba(242,193,79,.35);
  text-shadow:none!important
}
.hero .hero-cta-main.btn-primary:hover,
.hero .hero-strategie-cta.btn-primary:hover{
  transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 14px 34px rgba(242,193,79,.45)
}
.hero .hero-cta-sec.btn-outline,
.hero .hero-cta-login.btn-outline{
  min-height:52px;padding:0 1.25rem;border-radius:999px;font-weight:700;
  display:inline-flex;align-items:center;gap:.45rem;
  border:2px solid rgba(255,255,255,.55)!important;background:rgba(255,255,255,.1)!important;
  backdrop-filter:blur(8px);color:#fff!important
}
.hero .hero-cta-login.btn-outline{
  border-color:rgba(103,232,249,.55)!important;background:rgba(103,232,249,.12)!important
}
.hero .hero-btns--secondary .btn-outline{
  min-height:42px;padding:0 1rem;border-radius:999px;font-size:.9rem;
  border-width:1.5px!important;background:rgba(255,255,255,.06)!important
}
.hero .hero-badge{
  display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .9rem;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);font-weight:700;letter-spacing:.02em
}
@media(max-width:640px){
  .hero-btns--primary,.hero-btns--secondary{width:100%}
  .hero-btns--primary a,.hero-btns--secondary a{flex:1 1 auto;justify-content:center}
}


/* HERO-V2-CLEAN-20260923 */
.hero{min-height:min(92vh,900px)!important}
.hero-overlay{
  background:linear-gradient(115deg,
    rgba(2,9,23,.88) 0%,
    rgba(12,27,56,.72) 42%,
    rgba(2,9,23,.45) 100%)!important
}
.hero-container{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;padding:4.5rem 0 3.5rem}
.hero-content{max-width:560px}
.hero-content h1{margin-bottom:1rem!important;font-size:clamp(2.4rem,5.2vw,3.6rem)!important}
.hero-content > p{font-size:1.12rem!important;line-height:1.65!important;max-width:34rem;opacity:.93;margin-bottom:1.4rem!important}
.hero-cta-zone{gap:14px!important;margin-top:.2rem!important}
.hero-btns--primary{gap:12px!important}
.hero-btns--secondary{display:none!important}
.hero-hint-line{margin:.35rem 0 0;font-size:.88rem;opacity:.85;color:rgba(255,255,255,.9)}
.hero-stats{margin-top:1.75rem!important;gap:1.75rem!important}
.hero-visual{align-self:center}
.hero-thumb-grid,.hero-sector-pills,.gda-home-promo,.hero-scan-trust{display:none!important}
.hero-scan-strip{background:#0b1220;color:#fff;padding:2.25rem 0;border-top:1px solid rgba(255,255,255,.08)}
.hero-scan-strip__inner{display:grid;grid-template-columns:1fr 1.2fr;gap:1.5rem;align-items:center}
.hero-scan-strip__copy h2{font-size:1.35rem;font-weight:800;margin:0 0 .35rem;color:#fff}
.hero-scan-strip__copy p{margin:0;color:#94a3b8;font-size:.95rem}
@media(max-width:960px){
  .hero-container{grid-template-columns:1fr;padding:3rem 0 2.5rem}
  .hero-visual{display:none!important}
  .hero-scan-strip__inner{grid-template-columns:1fr}
}