.fp-b2btrust-wall {
    /* Semantic Colors - Slate & Silver Premium */
    --fp-background-color: #070B14; /* Deep Abyss Slate */
    --fp-secondary-color: rgba(15, 23, 42, 0.4); /* Glassmorphic Slate */
    --fp-primary-color: #FFFFFF;    /* Pure White */
    --fp-muted-color: #64748B;      /* Deep Muted Silver */
    --fp-soft-color: rgba(255, 255, 255, 0.06); /* Delicate Borders */
    
    --fp-accent-color: #E2E8F0;     /* Luminous Silver */
    --fp-info-color: #38BDF8;       /* Tech Cyan Hint */
    --fp-warning-color: #94A3B8;    /* Mid Silver */
    --fp-danger-color: #0F172A;     /* Shadow Slate */

    --fp-container-width: 100%;
    --fp-aspect-ratio: auto;
    
    /* Premium Shadows & Radii */
    --fp-radius-stage: 32px;
    --fp-radius-box: 20px;
    --fp-shadow-elegant: 0 20px 40px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1);

    width: var(--fp-container-width);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--fp-primary-color);
}

.fp-b2btrust-wall * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Stage Layout */
.fp-b2btrust-wall-stage {
    position: relative;
    width: 100%;
    max-width: 1100px;
    min-height: 650px;
    background: radial-gradient(circle at 50% -20%, #152033 0%, var(--fp-background-color) 80%);
    border-radius: var(--fp-radius-stage);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--fp-shadow-elegant);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Strict Layout Enforcement: Top 45% Empty */
.fp-b2btrust-wall-empty-zone {
    flex: 0 0 45%;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Layer 2/3 Canvas */
.fp-b2btrust-wall-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
    mix-blend-mode: screen;
}

/* Content Panel */
.fp-b2btrust-wall-panel {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px 3rem 3rem 3rem; /* Applied exactly 30px top padding as requested */
    gap: 2rem;
}

/* Header */
.fp-b2btrust-wall-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.fp-b2btrust-wall-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--fp-soft-color);
    padding: 8px 18px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.fp-b2btrust-wall-pulse {
    width: 6px;
    height: 6px;
    background-color: var(--fp-accent-color);
    border-radius: 50%;
    box-shadow: 0 0 4px var(--fp-accent-color);
    animation: fp-b2btrust-breathe 2.5s infinite alternate ease-in-out;
}

@keyframes fp-b2btrust-breathe {
    0% { transform: scale(0.8); opacity: 0.4; box-shadow: 0 0 0px transparent; }
    100% { transform: scale(1.6); opacity: 1; box-shadow: 0 0 10px var(--fp-accent-color); }
}

.fp-b2btrust-wall-badge-text {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--fp-warning-color);
}

/* Bento Grid */
.fp-b2btrust-wall-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    width: 100%;
}

/* Premium Bento Box */
.fp-b2btrust-wall-box {
    position: relative;
    background: var(--fp-secondary-color);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--fp-soft-color);
    border-radius: var(--fp-radius-box);
    padding: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 140px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.5s ease, 
                box-shadow 0.5s ease,
                background 0.5s ease;
    outline: none;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.02), 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fp-b2btrust-wall-box-wide {
    grid-column: span 2;
}

/* Hover & Focus Interactions */
.fp-b2btrust-wall-box:hover,
.fp-b2btrust-wall-box:focus-visible {
    transform: translateY(-6px);
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(226, 232, 240, 0.2);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.4), 
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        0 0 20px rgba(226, 232, 240, 0.05);
}

/* Elegant Inner Glow Sweep */
.fp-b2btrust-wall-box-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.03) 50%, transparent 80%);
    background-size: 200% 200%;
    background-position: 200% 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.fp-b2btrust-wall-box:hover .fp-b2btrust-wall-box-glow,
.fp-b2btrust-wall-box:focus-visible .fp-b2btrust-wall-box-glow {
    opacity: 1;
    animation: fp-b2btrust-sweep 2s infinite linear;
}

@keyframes fp-b2btrust-sweep {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Logo Vectors */
.fp-b2btrust-wall-logo {
    width: 100%;
    max-width: 150px;
    height: auto;
    color: var(--fp-muted-color);
    transition: color 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.fp-b2btrust-wall-box:hover .fp-b2btrust-wall-logo,
.fp-b2btrust-wall-box:focus-visible .fp-b2btrust-wall-logo {
    color: var(--fp-primary-color);
    transform: scale(1.06);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}

/* Static Grid Reveal Animation */
.fp-reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fp-reveal.fp-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Responsiveness Standard */
@media (max-width: 900px) {
    .fp-b2btrust-wall-bento {
        grid-template-columns: repeat(2, 1fr);
    }
    .fp-b2btrust-wall-box-wide {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .fp-b2btrust-wall-stage {
        min-height: 500px;
    }
    .fp-b2btrust-wall-empty-zone {
        flex: 0 0 35%;
    }
    .fp-b2btrust-wall-panel {
        padding: 30px 1.5rem 1.5rem 1.5rem;
    }
    .fp-b2btrust-wall-bento {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .fp-b2btrust-wall-box-wide {
        grid-column: span 1;
    }
    .fp-b2btrust-wall-box {
        min-height: 100px;
        padding: 1.5rem;
    }
    .fp-b2btrust-wall-logo {
        max-width: 120px;
    }
}

(() => {
    // 1. Strict Component Isolation
    const initB2BTrust = (container) => {
        if (container.dataset.fpInitialized === 'true') return;
        container.dataset.fpInitialized = 'true';

        const stage = container.querySelector('.fp-b2btrust-wall-stage');
        const canvas = container.querySelector('.fp-b2btrust-wall-canvas');
        const boxes = container.querySelectorAll('.fp-b2btrust-wall-box');
        
        if (!stage || !canvas) return;
        const ctx = canvas.getContext('2d');

        // Extract Semantic Colors for Canvas Engine
        const styles = getComputedStyle(container);
        const colorAccent = styles.getPropertyValue('--fp-accent-color').trim() || '#E2E8F0';

        // 2. CSS Static Grid Reveal Logic
        const observerOptions = {
            root: null,
            rootMargin: '0px 0px -50px 0px',
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries, obs) => {
            entries.forEach((entry, index) => {
                if (entry.isIntersecting) {
                    // Staggered elegant reveal
                    setTimeout(() => {
                        entry.target.classList.add('fp-active');
                    }, index * 120);
                    obs.unobserve(entry.target);
                }
            });
        }, observerOptions);

        boxes.forEach(box => observer.observe(box));

        // 3. Layer 2 & 3: Canvas Engine (Ethereal Data Mesh & Reactive Nodes)
        let width, height;
        let nodes = [];
        let connections = [];
        let isSurging = false;
        let surgeTarget = { x: -1000, y: -1000 };

        const resizeCanvas = () => {
            const rect = canvas.parentElement.getBoundingClientRect();
            if (rect.width === 0) return;
            const dpr = window.devicePixelRatio || 1;
            canvas.width = rect.width * dpr;
            canvas.height = rect.height * dpr;
            ctx.scale(dpr, dpr);
            width = rect.width;
            height = rect.height;
            initMesh();
        };

        window.addEventListener('resize', resizeCanvas);

        class MeshNode {
            constructor(x, y) {
                this.baseX = x;
                this.baseY = y;
                this.x = x;
                this.y = y;
                // Ultra-slow, elegant drift
                this.vx = (Math.random() - 0.5) * 0.15;
                this.vy = (Math.random() - 0.5) * 0.15;
                this.radius = Math.random() > 0.85 ? 1.5 : 0.8;
                this.baseAlpha = Math.random() * 0.4 + 0.1;
                this.alpha = this.baseAlpha;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;

                // Soft tether to base position
                if (Math.abs(this.x - this.baseX) > 25) this.vx *= -1;
                if (Math.abs(this.y - this.baseY) > 25) this.vy *= -1;

                // Layer 3: Reactive Magnetic Pull (Surge)
                if (isSurging) {
                    const dx = surgeTarget.x - this.x;
                    const dy = surgeTarget.y - this.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);

                    if (dist < 250) {
                        // Gentle magnetic pull towards active box
                        this.x += (dx / dist) * 0.4;
                        this.y += (dy / dist) * 0.4;
                        // Sparkle effect
                        this.alpha = Math.min(0.9, this.alpha + 0.04);
                    } else {
                        // Spring back gently
                        this.x += (this.baseX - this.x) * 0.02;
                        this.y += (this.baseY - this.y) * 0.02;
                        if (this.alpha > this.baseAlpha) this.alpha -= 0.01;
                    }
                } else {
                    // Normal state
                    this.x += (this.baseX - this.x) * 0.02;
                    this.y += (this.baseY - this.y) * 0.02;
                    if (this.alpha > this.baseAlpha) this.alpha -= 0.02;
                }
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = colorAccent;
                ctx.globalAlpha = this.alpha;
                ctx.fill();
                
                // Add soft glow to larger nodes during surge
                if (isSurging && this.radius > 1 && this.alpha > 0.6) {
                    ctx.shadowBlur = 8;
                    ctx.shadowColor = colorAccent;
                    ctx.fill();
                    ctx.shadowBlur = 0;
                }
                
                ctx.globalAlpha = 1.0;
            }
        }

        const initMesh = () => {
            nodes = [];
            connections = [];
            if (!width || !height) return;
            
            // Constellation style distribution
            const spacing = 90;
            const cols = Math.floor(width / spacing) + 2;
            const rows = Math.floor(height / spacing) + 2;

            for (let i = -1; i < cols; i++) {
                for (let j = -1; j < rows; j++) {
                    const offsetX = (Math.random() - 0.5) * 40;
                    const offsetY = (Math.random() - 0.5) * 40;
                    nodes.push(new MeshNode((i * spacing) + offsetX, (j * spacing) + offsetY));
                }
            }

            // Optimize connection mapping
            for (let i = 0; i < nodes.length; i++) {
                for (let j = i + 1; j < nodes.length; j++) {
                    const dx = nodes[i].baseX - nodes[j].baseX;
                    const dy = nodes[i].baseY - nodes[j].baseY;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    if (dist < spacing * 1.8) {
                        connections.push({a: nodes[i], b: nodes[j]});
                    }
                }
            }
        };

        const hexToRgba = (hex, alpha) => {
            let r = 255, g = 255, b = 255; // Fallback to white
            if (hex.length >= 7) {
                r = parseInt(hex.substring(1, 3), 16);
                g = parseInt(hex.substring(3, 5), 16);
                b = parseInt(hex.substring(5, 7), 16);
            }
            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
        };

        const renderLoop = () => {
            if (!ctx) return;
            ctx.clearRect(0, 0, width, height);

            // Render Connections (Lines)
            ctx.lineWidth = 1;
            connections.forEach(conn => {
                const dx = conn.a.x - conn.b.x;
                const dy = conn.a.y - conn.b.y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                
                if (dist < 140) {
                    let baseLineAlpha = 1 - (dist / 140);
                    let finalAlpha = baseLineAlpha * 0.12; // Very delicate base lines
                    
                    // Illuminate lines near the interaction point
                    if (isSurging) {
                        const dxa = conn.a.x - surgeTarget.x;
                        const dya = conn.a.y - surgeTarget.y;
                        const distToTarget = Math.sqrt(dxa * dxa + dya * dya);
                        
                        if (distToTarget < 250) {
                            // Boost opacity significantly for active zone
                            finalAlpha = baseLineAlpha * 0.4 * (1 - distToTarget/250);
                        }
                    }

                    ctx.beginPath();
                    ctx.moveTo(conn.a.x, conn.a.y);
                    ctx.lineTo(conn.b.x, conn.b.y);
                    ctx.strokeStyle = hexToRgba(colorAccent, finalAlpha);
                    ctx.stroke();
                }
            });

            // Render Nodes
            nodes.forEach(n => {
                n.update();
                n.draw();
            });

            requestAnimationFrame(renderLoop);
        };

        // 4. Precise Interaction Mapping
        boxes.forEach(box => {
            const triggerSurge = () => {
                const rect = box.getBoundingClientRect();
                const stageRect = stage.getBoundingClientRect();
                surgeTarget.x = (rect.left - stageRect.left) + (rect.width / 2);
                surgeTarget.y = (rect.top - stageRect.top) + (rect.height / 2);
                isSurging = true;
            };

            box.addEventListener('mouseenter', triggerSurge);
            box.addEventListener('focusin', triggerSurge);

            box.addEventListener('mouseleave', () => { isSurging = false; });
            box.addEventListener('focusout', () => { isSurging = false; });
        });

        stage.addEventListener('mouseleave', () => {
            isSurging = false;
        });

        // Initialize Engine
        setTimeout(() => {
            resizeCanvas();
            requestAnimationFrame(renderLoop);
        }, 50);
    };

    // Auto-Init Strategy
    const runInit = () => {
        document.querySelectorAll('.fp-b2btrust-wall').forEach(initB2BTrust);
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', runInit);
    } else {
        runInit();
    }
    
    // Mutation Observer for Elementor Dynamic Loading
    const observer = new MutationObserver((mutations) => {
        for (const mut of mutations) {
            if (mut.addedNodes.length) runInit();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });

})();