html { scroll-padding-top: 100px; }
        body { font-family: 'Inter', sans-serif; transition: background-color 0.3s ease; }
        
        /* Navigation transition */
        .glass-nav { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05); }
        
        /* Animations */
        .fade-in { opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
        .fade-in.visible { opacity: 1; transform: translateY(0); }
        .slide-in-right { opacity: 0; transform: translateX(60px); transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
        .slide-in-right.visible { opacity: 1; transform: translateX(0); }
        
        /* Product Cards */
        .product-card { 
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: #ffffff;
            border: 1px solid #f1f5f9;
        }
        .product-card:hover { 
            transform: translateY(-12px); 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
            border-color: #10b981;
        }

        /* SPA Toggling Logic */
        .view-home-only, .view-catalog-only, .view-about-only, .view-cart-only, .view-checkout-only, .view-product-only, .view-article-only, .view-post-only,
        .view-landing-beheerders-only, .view-landing-handbal-only, .view-article-hars-only, .view-faq-only, .view-landing-sprayer-only, .view-landing-zorg-only,
        .view-kennisbank-only, .view-article-vloeren-only, .view-article-veiligheid-only, .view-manuals-only, .view-referenties-only { display: none; }
        
        body.view-home .view-home-only { display: block; }
        body.view-catalog .view-catalog-only { display: block; }
        body.view-about .view-about-only { display: block; }
        body.view-cart .view-cart-only { display: block; }
        body.view-checkout .view-checkout-only { display: block; }
        body.view-product .view-product-only { display: block; }
        body.view-article .view-article-only { display: block; }
        body.view-referenties .view-referenties-only { display: block; }
        body.view-post .view-post-only { display: block; }
        body.view-landing-beheerders .view-landing-beheerders-only { display: block; }
        body.view-landing-handbal .view-landing-handbal-only { display: block; }
        body.view-article-hars .view-article-hars-only { display: block; }
        body.view-faq .view-faq-only { display: block; }
        body.view-landing-sprayer .view-landing-sprayer-only { display: block; }
        body.view-landing-zorg .view-landing-zorg-only { display: block; }
        body.view-kennisbank .view-kennisbank-only { display: block; }
        body.view-article-vloeren .view-article-vloeren-only { display: block; }
        body.view-article-veiligheid .view-article-veiligheid-only { display: block; }
        body.view-manuals .view-manuals-only { display: block; }

        /* Official 5-Page Handboek PDF rendering style rules */
        .pdf-page {
            display: none;
        }
        .pdf-page.active-page {
            display: flex !important;
        }
        @media print {
            body.printing-mode .pdf-page {
                display: flex !important;
                page-break-after: always;
                break-after: page;
                border: none !important;
                box-shadow: none !important;
                margin: 0 !important;
                padding: 2rem !important;
            }
            body.printing-mode .pdf-page:last-child {
                page-break-after: avoid;
                break-after: auto;
            }
        }

        @media print {
            body.printing-mode * { visibility: hidden !important; }
            body.printing-mode #printable-area, body.printing-mode #printable-area * { visibility: visible !important; }
            body.printing-mode #printable-area { position: absolute; left: 0; top: 0; width: 100%; z-index: 99999; background: white; margin: 0; padding: 2rem; }
            body.printing-mode .no-print { display: none !important; }
        }
        
        body.view-home #products, body.view-catalog #products { display: block; }
        #products { display: none; }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .container { padding-left: 1.5rem; padding-right: 1.5rem; }
            h1 { font-size: 2.2rem !important; line-height: 1.1 !important; }
            h2 { font-size: 1.8rem !important; }
            .hero-video-container { min-height: 90vh; }
            .scroll-indicator { display: none; } /* Hide on mobile to avoid overlap */
            .product-card { padding: 1.5rem !important; border-radius: 2rem !important; }
            .cart-item-card { flex-direction: column; align-items: flex-start; gap: 1rem; }
            .cart-item-card img { width: 4rem; height: 4rem; }
        }
        
        /* Hero Video Styling */
        .hero-video-container { 
            position: relative; 
            min-height: 100vh; 
            display: flex; 
            align-items: center; 
            background: #0f172a; 
            overflow: hidden;
        }
        .hero-video, .hero-video-iframe {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            opacity: 0.75; /* Crisper, richer video quality */
            z-index: 0;
            pointer-events: none;
        }
        .hero-overlay {
            position: absolute;
            inset: 0;
            /* Deeper gradient stops to mask active movements and preserve sharp text contrast */
            background: linear-gradient(to bottom, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.85) 50%, rgba(15, 23, 42, 0.7) 100%);
            z-index: 1;
        }
        @media (min-width: 768px) {
            .hero-overlay {
                background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.8) 45%, rgba(15, 23, 42, 0.55) 100%);
            }
        }
        /* Extra high-contrast text shield for perfect legibility over video frames */
        .hero-text-shadow {
            text-shadow: 0 4px 20px rgba(15, 23, 42, 0.95), 0 2px 6px rgba(15, 23, 42, 0.95);
        }
        
        /* UI Components */
        .toast {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: #065f46;
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 1rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
            transform: translateY(150%);
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 100;
        }
        .toast.show { transform: translateY(0); opacity: 1; }

        .custom-video-btn {
            position: absolute;
            bottom: 2rem;
            left: 2rem;
            z-index: 30;
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,0.1);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 99px;
            font-size: 0.7rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            opacity: 0.4;
        }
        .custom-video-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); }

        .scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            color: white;
            opacity: 0.6;
            animation: bounce 2s infinite;
            text-align: center;
        }
        @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);} 40% {transform: translateX(-50%) translateY(-10px);} 60% {transform: translateX(-50%) translateY(-5px);} }

        .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        
        .active-nav { color: #10b981 !important; font-weight: 700 !important; }

        .cart-item-card {
            border-bottom: 1px solid #f1f5f9;
            padding: 1.5rem 0;
        }
        .cart-item-card:last-child { border-bottom: none; }

        /* Logo Marquee */
        .marquee {
            overflow: hidden;
            white-space: nowrap;
            position: relative;
            background: white;
            padding: 5rem 0;
            border-top: 1px solid #f1f5f9;
            border-bottom: 1px solid #f1f5f9;
        }
        .marquee-content {
            display: inline-flex;
            animation: marquee 40s linear infinite;
            width: max-content;
        }
        .marquee-item {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4rem;
        }
        .marquee-item img {
            height: 80px;
            width: auto;
            filter: grayscale(0%);
            opacity: 1;
            transition: all 0.4s ease;
        }
        .marquee-item img.large {
            height: 200px;
        }
        .marquee-item:hover img {
            transform: scale(1.15);
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Lightbox */
        #lightbox {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(8px);
            z-index: 200;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            cursor: zoom-out;
        }
        #lightbox.active { display: flex; animation: fadeIn 0.3s ease; }
        #lightbox img {
            max-width: 90%;
            max-height: 90vh;
            object-fit: contain;
            border-radius: 1rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            cursor: default;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Visual Showcase Styling */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 300px);
            gap: 1.5rem;
        }
        .gallery-item {
            position: relative;
            border-radius: 2rem;
            overflow: hidden;
            cursor: pointer;
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        .gallery-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(15, 23, 42, 0.8), transparent);
            display: flex;
            align-items: flex-end;
            padding: 2rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        @media (max-width: 1024px) {
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(4, 250px);
            }
        }
        @media (max-width: 640px) {
            .gallery-grid {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(6, 250px);
            }
        }

        .upload-overlay {
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 20;
            opacity: 0;
            transition: opacity 0.3s;
            display: flex;
            gap: 0.5rem;
        }
        .video-showcase-card:hover .upload-overlay {
            opacity: 1;
        }

        .fullscreen-btn {
            position: absolute;
            bottom: 1.5rem;
            right: 1.5rem;
            z-index: 20;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: rgba(16, 185, 129, 0.8);
            backdrop-filter: blur(8px);
            color: white;
            padding: 0.75rem;
            border-radius: 1rem;
            cursor: pointer;
        }
        .video-showcase-card:hover .fullscreen-btn {
            opacity: 1;
            transform: scale(1);
        }
        .fullscreen-btn:hover {
            background: #10b981;
            transform: scale(1.1) !important;
        }

        .company-logo {
            height: 60px;
            width: auto;
            object-fit: contain;
            display: inline-block;
            vertical-align: middle;
        }



        /* LinkedIn Image Capture Themes */
        
        /* 1. Classic Slate (Default) */
        #linkedin-post-capture.post-theme-slate {
            background-color: #0f172a; /* slate-900 */
        }
        
        /* 2. Corporate Light */
        #linkedin-post-capture.post-theme-light {
            background-color: #f8fafc !important; /* slate-50 */
            border: 1px solid #e2e8f0;
        }
        #linkedin-post-capture.post-theme-light .text-white {
            color: #0f172a !important; /* slate-900 */
        }
        #linkedin-post-capture.post-theme-light .text-white\/30 {
            color: #64748b !important; /* slate-500 */
        }
        #linkedin-post-capture.post-theme-light .text-white\/80 {
            color: #334155 !important; /* slate-700 */
        }
        #linkedin-post-capture.post-theme-light .bg-white\/5 {
            background-color: #ffffff !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }
        #linkedin-post-capture.post-theme-light #preview-img-before-wrapper {
            border-color: #e2e8f0 !important;
        }
        #linkedin-post-capture.post-theme-light #preview-img-after-wrapper {
            border-color: #10b981 !important;
        }
        #linkedin-post-capture.post-theme-light .bg-white\/10 {
            background-color: #f1f5f9 !important;
            color: #334155 !important;
            border-color: #cbd5e1 !important;
        }
        #linkedin-post-capture.post-theme-light .absolute.inset-0.bg-gradient-to-t {
            background: linear-gradient(to top, rgba(248,250,252,0.95) 0%, rgba(248,250,252,0.3) 50%, transparent 100%) !important;
        }
        #linkedin-post-capture.post-theme-light #preview-text-before {
            color: #1e293b !important;
        }
        #linkedin-post-capture.post-theme-light #preview-text-after {
            color: #064e3b !important;
        }
        #linkedin-post-capture.post-theme-light .absolute.inset-0.bg-gradient-to-t.from-emerald-900\/80 {
            background: linear-gradient(to top, rgba(209,250,229,0.95) 0%, rgba(209,250,229,0.3) 50%, transparent 100%) !important;
        }
        
        /* 3. Tech Neon Cyber style */
        #linkedin-post-capture.post-theme-tech {
            background-color: #030712 !important;
            background: radial-gradient(circle at 50% 50%, #1e1b4b 0%, #030712 100%) !important;
        }
        #linkedin-post-capture.post-theme-tech .text-emerald-500 {
            color: #06b6d4 !important; /* Cyan */
        }
        #linkedin-post-capture.post-theme-tech .bg-emerald-600 {
            background-color: #4f46e5 !important; /* Electric Indigo */
        }
        #linkedin-post-capture.post-theme-tech .bg-white\/5 {
            background-color: rgba(255, 255, 255, 0.02) !important;
            border-color: rgba(6, 182, 212, 0.3) !important;
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
        }
        #linkedin-post-capture.post-theme-tech #preview-img-before-wrapper {
            border-color: rgba(255, 255, 255, 0.05) !important;
        }
        #linkedin-post-capture.post-theme-tech #preview-img-after-wrapper {
            border-color: #06b6d4 !important;
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
        }
        #linkedin-post-capture.post-theme-tech span#preview-solution {
            color: #06b6d4 !important;
        }
        #linkedin-post-capture.post-theme-tech #preview-label-after {
            background-color: #06b6d4 !important;
            color: #030712 !important;
        }

        /* 4. Imperial Gold / Charcoal */
        #linkedin-post-capture.post-theme-gold {
            background-color: #0c0a09 !important; /* warm absolute black */
            background: radial-gradient(circle at 10% 10%, #1c1917, #0c0a09) !important;
        }
        #linkedin-post-capture.post-theme-gold .text-emerald-500 {
            color: #d97706 !important; /* Golden Amber */
        }
        #linkedin-post-capture.post-theme-gold .bg-emerald-600 {
            background-color: #b45309 !important; /* Dark Gold/Amber */
        }
        #linkedin-post-capture.post-theme-gold .bg-white\/5 {
            border-color: rgba(217, 119, 6, 0.3) !important;
            background-color: rgba(217, 119, 6, 0.02) !important;
            box-shadow: 0 4px 20px rgba(217, 119, 6, 0.05);
        }
        #linkedin-post-capture.post-theme-gold #preview-img-before-wrapper {
            border-color: rgba(255, 255, 255, 0.05) !important;
        }
        #linkedin-post-capture.post-theme-gold #preview-img-after-wrapper {
            border-color: #d97706 !important;
            box-shadow: 0 0 20px rgba(217, 119, 6, 0.1);
        }
        #linkedin-post-capture.post-theme-gold span#preview-solution {
            color: #d97706 !important;
        }
        #linkedin-post-capture.post-theme-gold #preview-label-after {
            background-color: #d97706 !important;
            color: #ffffff !important;
        }
        #linkedin-post-capture.post-theme-gold .absolute.inset-0.bg-gradient-to-t.from-emerald-900\/80 {
            background: linear-gradient(to top, rgba(146,64,14,0.7) 0%, rgba(146,64,14,0.2) 50%, transparent 100%) !important;
        }