<!doctype html>
<html lang="en">
  <head>
    <style data-vite-theme="" data-inject-first="">:root {
      --background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--primary: 215 28% 17%;
--primary-foreground: 215 7% 97%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--ring: 20 14.3% 4.1%;
--radius: 0.5rem;
  }
  .dark {
      --background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--primary: 215 28% 17%;
--primary-foreground: 215 7% 97%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 4.9% 83.9%;
--radius: 0.5rem;
  }</style>

    <meta charset="UTF-8" />
    <!-- Original viewport tag replaced by iOS optimized one below -->

    <!-- CRITICAL: Hero video preload - highest priority resource -->
    <!-- Mobile-optimized: Dynamic preload, CDN-aware, mobile gets a smaller variant -->
    <script>
      // Immediately preload hero video before React even loads
      (function () {
        const isMobile =
          window.innerWidth <= 768 ||
          /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
            navigator.userAgent,
          );

        // Store mobile flag for later use
        if (isMobile) {
          console.log("📱 Mobile detected: Prioritizing video preload");
          window._isMobileDevice = true;
        }

        // CDN-aware URL resolution must match client/src/utils/cdn.ts
        // (otherwise the preloaded URL won't be reused by the <video> element
        //  and we'd download the file twice in production).
        const CDN_DOMAIN = "https://videozone-1d6bf.kxcdn.com";
        const useCDN =
          location.hostname === "collabisland.com" ||
          location.hostname === "www.collabisland.com";
        const toAssetUrl = (path) => {
          if (!path.startsWith("/")) path = "/" + path;
          return useCDN ? CDN_DOMAIN + path : path;
        };
        const guessType = (url) => {
          if (/\.webm(\?|$)/i.test(url)) return "video/webm";
          return "video/mp4";
        };

        const buildPreload = (rawUrl) => {
          const link = document.createElement("link");
          link.rel = "preload";
          link.href = toAssetUrl(rawUrl);
          link.as = "video";
          link.setAttribute("fetchpriority", "high");
          link.setAttribute("type", guessType(rawUrl));
          link.id = "hero-video-preload";
          // Insert at very beginning for maximum priority
          document.head.insertBefore(link, document.head.firstChild);
          return link;
        };

        // Mobile uses a fixed, dedicated variant — Hero.tsx hard-codes it via
        // <source media="(max-width: 768px)">, so we can preload it immediately.
        // On desktop, Hero.tsx prefers the CMS-configured backgroundVideo. To
        // avoid the classic "preload URL A, then swap href to URL B and now the
        // browser fetches both" mismatch, we resolve the CMS URL FIRST and only
        // then create a single preload <link> that exactly matches what the
        // <video> element will request.
        //
        // When CMS provides no WebM, Hero.tsx's <source> preference order on
        // desktop is: default WebM → default MP4. Safari skips WebM, so we
        // detect it here and preload the MP4 in that single case; everyone
        // else gets the WebM preloaded so the preload is actually reused.
        const defaultDesktopMp4 = "/assets/ci-drone-intro.mp4";
        const defaultDesktopWebm =
          "/assets/4kdrone-aug-05-25s_1757522833889.webm";
        const defaultMobile = "/assets/ci-drone-intro-mobile.mp4";
        const isSafari =
          /^((?!chrome|android|crios|fxios).)*safari/i.test(
            navigator.userAgent,
          );
        const defaultDesktop = isSafari
          ? defaultDesktopMp4
          : defaultDesktopWebm;

        if (isMobile) {
          // One preload, one URL, no swap.
          buildPreload(defaultMobile);
        } else {
          // Production /api/content/hero responds in < 50 ms; we cap at 1500 ms
          // so even a slow / cold-start API still resolves before LCP.
          // On timeout/error we DO emit a fallback preload using `defaultDesktop`:
          // if the CMS API is unreachable, Hero.tsx's CMS-driven <source> won't
          // resolve either (the React component fetches the same endpoint and
          // falls back to defaults on failure), so the fallback preload will
          // match what <video> actually requests — no duplicate fetch, and we
          // don't lose preload benefit on the slow-API path.
          const fetchWithTimeout = (url, timeout) => {
            return Promise.race([
              fetch(url).then((res) => res.json()),
              new Promise((_, reject) =>
                setTimeout(() => reject(new Error("timeout")), timeout),
              ),
            ]);
          };

          fetchWithTimeout("/api/content/hero", 1500)
            .then((data) => {
              const cmsUrl =
                data && data.content && data.content.backgroundVideo;
              // Mirror Hero.tsx's <source> selection exactly so the preload
              // URL is always the one the browser will actually pick:
              //  - CMS WebM:    everyone uses CMS WebM → preload it
              //                 (except Safari, which can't play WebM —
              //                 preload the default MP4 instead)
              //  - CMS MP4 that ISN'T the same as the default MP4:
              //                 Hero.tsx places it BEFORE the default WebM,
              //                 so all browsers pick the CMS MP4 → preload it
              //  - CMS MP4 that IS the default (or no CMS URL at all):
              //                 Hero.tsx skips the CMS-conditional source and
              //                 falls through to default WebM → default MP4.
              //                 Non-Safari picks default WebM, Safari picks
              //                 default MP4. Use `defaultDesktop`, which is
              //                 already Safari-aware.
              const cmsPath = cmsUrl ? cmsUrl.split("?")[0].toLowerCase() : "";
              const cmsIsWebm = /\.webm$/i.test(cmsPath);
              const cmsIsDefaultMp4 = cmsPath === defaultDesktopMp4;
              let finalUrl;
              if (!cmsUrl || cmsIsDefaultMp4) {
                finalUrl = defaultDesktop;
              } else if (cmsIsWebm && isSafari) {
                finalUrl = defaultDesktopMp4;
              } else {
                finalUrl = cmsUrl;
              }
              console.log("🎥 Hero preload (resolved):", finalUrl);
              buildPreload(finalUrl);
            })
            .catch(() => {
              // CMS lookup failed/timed out — emit a fallback preload using
              // the same default Hero.tsx will fall back to when its own
              // CMS fetch fails. Safari-aware: WebM on Chrome/FF/Edge,
              // MP4 on Safari. Matches what <video> will request.
              console.log(
                "🎥 Hero preload (fallback after CMS timeout):",
                defaultDesktop,
              );
              buildPreload(defaultDesktop);
            });
        }
      })();
    </script>

    <!-- Playfair Display — hero serif font -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap" rel="stylesheet" />

    <!-- Fix for link preload warning -->
    <link
      rel="preconnect"
      href="https://www.googletagmanager.com"
      crossorigin
    />
    <link rel="dns-prefetch" href="https://www.google-analytics.com" />

    <!-- Ensure no white flash during loading/scrolling -->
    <style>
      /* System font stack as immediate fallback to prevent render blocking */
      :root {
        --font-primary:
          system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
      }

      /* Load fonts with swap strategy - prevents blocking render */
      /* WOFF2 first (smallest, supported by all modern browsers), WOFF as fallback.
         Served from origin — CDN does not host the font assets. */
      @font-face {
        font-family: "Avenir Next";
        src:
          url("/fonts/avenir-next/AvenirNext-Regular.woff2?v=2") format("woff2"),
          url("/fonts/avenir-next/AvenirNext-Regular.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Avenir Next";
        src:
          url("/fonts/avenir-next/AvenirNext-Medium.woff2?v=2") format("woff2"),
          url("/fonts/avenir-next/AvenirNext-Medium.woff") format("woff");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Avenir Next";
        src:
          url("/fonts/avenir-next/AvenirNext-DemiBold.woff2?v=2") format("woff2"),
          url("/fonts/avenir-next/AvenirNext-DemiBold.woff") format("woff");
        font-weight: 600;
        font-style: normal;
        font-display: swap;
      }

      /* Map the bold weight to DemiBold since we don't have a separate Bold font file */
      @font-face {
        font-family: "Avenir Next";
        src:
          url("/fonts/avenir-next/AvenirNext-DemiBold.woff2?v=2") format("woff2"),
          url("/fonts/avenir-next/AvenirNext-DemiBold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }

      html,
      body {
        background-color: transparent;
        overscroll-behavior-y: none;
        min-height: 100%;
        /* System fonts load immediately, then progressively enhance with Avenir Next */
        font-family: var(--font-primary);
        font-family: "Avenir Next", var(--font-primary);
      }

      /* Smooth scrolling optimization */
      @media (prefers-reduced-motion: no-preference) {
        html {
          scroll-behavior: smooth;
        }
      }

      /* Enhanced loading spinner with progress indicator */
      .app-loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #080d14;
        z-index: 9999;
        transition:
          opacity 0.5s ease-out,
          visibility 0.5s ease-out;
      }

      .app-loader.hidden {
        opacity: 0;
        visibility: hidden;
      }

      .app-loader-spinner {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-top-color: #4f46e5;
        animation: spinner 0.8s linear infinite;
        margin-bottom: 20px;
      }

      .app-loader-progress {
        width: 120px;
        height: 2px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        margin-bottom: 15px;
        display: none; /* Hide progress bar */
      }

      .app-loader-progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%;
        background: #4f46e5;
        transition: width 0.5s ease;
      }

      .app-loader-text {
        font-family:
          "Avenir Next",
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          Arial,
          sans-serif;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        margin-top: 5px;
        transition: none; /* Prevent any transition that might cause font changes */
        letter-spacing: normal;
        font-weight: normal;
        display: none; /* Hide loading text */
      }

      @keyframes spinner {
        to {
          transform: rotate(360deg);
        }
      }

      /* Font optimization ready class - applies immediately */
      .font-optimization-ready {
        font-size-adjust: 0.5;
      }

      /* Set consistent line-height for all text elements to prevent layout shifts */
      p {
        line-height: 1.7 !important;
      }

      /* Hero section specific fixes to prevent line-height jumping */
      h1 {
        line-height: 1.15 !important;
      }

      /* Ensure font rendering is consistent */
      * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }

      /* Prevent typography plugin from overriding hero styles */
      .prose h1,
      .prose-lg h1,
      .prose-xl h1 {
        line-height: 1.15 !important;
      }

      /* Hero section container stability */
      section h1,
      section p {
        transform: translateZ(0);
        will-change: auto;
      }

      /* Force consistent font loading behavior */
      .font-display {
        font-display: swap;
        font-variation-settings: normal;
      }
    </style>

    <!-- Apply font-optimization-ready class immediately to prevent font changes -->
    <script>
      document.documentElement.classList.add("font-optimization-ready");
    </script>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />

    <!-- Critical resource preloading for immediate availability -->
    <!-- Note: These will be dynamically updated to CDN URLs in production -->
    <!-- Hero background image - lower priority on mobile to prioritize video -->
    <script>
      // Dynamically set background image priority based on device
      (function () {
        const isMobile = window.innerWidth <= 768 || window._isMobileDevice;
        const link = document.createElement("link");
        link.rel = "preload";
        link.href = "/assets/collabisland-background-hq.webp";
        link.as = "image";
        // High priority on desktop, low priority on mobile (video takes priority)
        link.setAttribute("fetchpriority", isMobile ? "low" : "high");
        link.id = "hero-preload";
        document.head.appendChild(link);
        console.log(
          `📷 Background image priority: ${isMobile ? "low (mobile)" : "high (desktop)"}`,
        );
      })();
    </script>

    <!-- Font preloading for immediate availability (WOFF2 only — modern browsers).
         The ?v= query MUST match the @font-face URLs above so the preload is reused. -->
    <link
      rel="preload"
      href="/fonts/avenir-next/AvenirNext-Regular.woff2?v=2"
      as="font"
      type="font/woff2"
      crossorigin
      id="font-regular-preload"
    />
    <link
      rel="preload"
      href="/fonts/avenir-next/AvenirNext-Medium.woff2?v=2"
      as="font"
      type="font/woff2"
      crossorigin
      id="font-medium-preload"
    />
    <link
      rel="preload"
      href="/fonts/avenir-next/AvenirNext-DemiBold.woff2?v=2"
      as="font"
      type="font/woff2"
      crossorigin
      id="font-demibold-preload"
    />

    <!-- Preconnect for analytics and cookie consent providers -->
    <link rel="preconnect" href="https://www.googletagmanager.com" />
    <link rel="preconnect" href="https://cdn.cookie-script.com" />
    <!-- NOTE: DM Serif/Inter/Montserrat were unused in components, so the
         render-blocking Google Fonts stylesheet has been removed. -->


    <!-- Google Analytics (gtag.js) - External Script Implementation -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-BKTHTWKF1J"
    ></script>
    <script src="/js/analytics.js"></script>

    <!-- Primary Meta Tags -->
    <title>Fractional Product, UX & Brand Designers | Collab Island</title>
    <meta
      name="description"
      content="Collab Island (formally Collab Island Studio) is a design agency providing fractional and full-time product, UX/UI, and brand designers for startups, founders, and design leaders worldwide."
    />
    <meta
      name="keywords"
      content="design agency, fractional designers, fractional product designers, product design staffing, ux ui designers for startups, brand designers for startups"
    />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://collabisland.com/" />
    <meta
      property="og:title"
      content="Fractional Product, UX & Brand Designers | Collab Island"
    />
    <meta
      property="og:description"
      content="Collab Island is a design agency providing fractional and full-time product, UX/UI, and brand designers for startup founders and leaders."
    />
    <meta
      property="og:image"
      content="https://collabisland.com/assets/collab-island-og2.png"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta
      property="og:image:alt"
      content="Fractional Product Designers & Design Agency | Collab Island"
    />
    <meta property="og:locale" content="en_US" />
    <meta property="og:site_name" content="Collab Island" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://collabisland.com/" />
    <meta
      property="twitter:title"
      content="Fractional Product, UX & Brand Designers | Collab Island"
    />
    <meta
      property="twitter:description"
      content="Collab Island is a design agency providing fractional and full-time product, UX/UI, and brand designers for startup founders and leaders"
    />
    <meta
      property="twitter:image"
      content="https://collabisland.com/assets/collab-island-og2.png"
    />

    <meta
      http-equiv="permissions-policy"
      content="ambient-light-sensor=(), battery=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), layout-animations=(), legacy-image-formats=(), navigation-override=(), oversized-images=(), publickey-credentials=(), speaker-selection=(), unoptimized-images=(), unsized-media=()"
    />
    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
    <meta http-equiv="X-Frame-Options" content="SAMEORIGIN" />
    <meta name="referrer" content="strict-origin-when-cross-origin" />

    <!-- iOS Safari specific optimizations -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta name="apple-mobile-web-app-title" content="Collab Island" />
    <meta name="format-detection" content="telephone=no" />
    <!-- iOS fast-tap behavior -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=5, viewport-fit=cover, user-scalable=no"
    />

    <!-- Suppress cookiescript banner on mobile so it doesn't block the
         hero animation on first paint. Banner still shows on tablets/desktop
         (>= 768px) where it doesn't cover hero content. -->
    <style>
      @media (max-width: 767px) {
        #cookiescript_injected,
        #cookiescript_badge,
        #cookiescript_wrapper,
        #cookiescript_description,
        .cookiescript_show,
        .cookiebanner,
        [class*="cookiescript"],
        [id*="cookiescript"] {
          display: none !important;
          visibility: hidden !important;
          opacity: 0 !important;
          pointer-events: none !important;
        }
      }
    </style>
    <script type="module" crossorigin src="/assets/index-PyVaJATd.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-BOO02jwf.js">
    <link rel="modulepreload" crossorigin href="/assets/router-Di-GL-Ml.js">
    <link rel="modulepreload" crossorigin href="/assets/query-Bphm3T3A.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-radix-CI4K4Jd-.js">
    <link rel="modulepreload" crossorigin href="/assets/animation-gsap-CczgM2dJ.js">
    <link rel="modulepreload" crossorigin href="/assets/forms-dPBXuBXJ.js">
    <link rel="modulepreload" crossorigin href="/assets/animation-framer-CgaXO_mZ.js">
    <link rel="stylesheet" crossorigin href="/assets/index-CYxjsgtb.css">
  </head>
  <body>
    <!-- Initial app loader that will display immediately -->
    <div id="app-loader" class="app-loader">
      <div class="app-loader-spinner"></div>
      <div class="app-loader-progress">
        <div id="app-loader-progress-bar" class="app-loader-progress-bar"></div>
      </div>
      <div class="app-loader-text">Loading...</div>
    </div>

    <div id="root"></div>

    <!-- Auto-refresh failsafe for root element loading issues -->
    <script>
      // Immediate failsafe: If root element doesn't get content, refresh once
      (function () {
        const hasRefreshed = sessionStorage.getItem("auto-refreshed-once");

        if (!hasRefreshed) {
          // Set a timer to check if React mounted properly
          setTimeout(function () {
            const root = document.getElementById("root");
            // If root exists but is still empty, refresh
            if (root && root.children.length === 0 && !root.textContent) {
              console.log("Auto-refresh: Root element empty, refreshing...");
              sessionStorage.setItem("auto-refreshed-once", "true");
              window.location.reload();
            }
          }, 800); // Give React 800ms to mount
        } else {
          // Clear flag after successful mount
          setTimeout(function () {
            const root = document.getElementById("root");
            if (root && root.children.length > 0) {
              sessionStorage.removeItem("auto-refreshed-once");
            }
          }, 2000);
        }
      })();
    </script>

    <!-- CDN warmup removed: real visitor traffic warms the pull-zone naturally,
         and these post-load HEAD requests competed with real downloads. -->


    <!-- This is a replit script which adds a banner on the top of the page when opened in development mode outside the replit environment -->
    <script
      type="text/javascript"
      src="https://replit.com/public/js/replit-dev-banner.js"
    ></script>

    <!-- Cookie Script - Cookie Consent Management (completely disabled in development) -->
    <script type="text/javascript">
      // Check for development environment
      const isDevelopment =
        window.location.hostname === "localhost" ||
        window.location.hostname.includes("127.0.0.1") ||
        window.location.hostname.includes(".repl.") ||
        window.location.hostname.includes(".replit.") ||
        window.location.port === "5000" ||
        window.location.port === "3000";

      // Only load cookie banner in production mode (not in development)
      if (!isDevelopment) {
        const cookieScript = document.createElement("script");
        cookieScript.type = "text/javascript";
        cookieScript.charset = "UTF-8";
        cookieScript.src =
          "//cdn.cookie-script.com/s/4e986dfb905ffb6baf90a1990cadf9e7.js";
        document.body.appendChild(cookieScript);
      } else {
        // In development mode, add a CSS rule to hide any potential cookie banner that might get through
        const style = document.createElement("style");
        style.textContent = `
          #cookiescript_injected,
          #cookiescript_badge,
          #cookiescript_wrapper,
          .cookiebanner,
          [class*="cookie-banner"],
          [class*="cookie-consent"],
          [id*="cookie-banner"],
          [id*="cookie-consent"] {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
          }
        `;
        document.head.appendChild(style);
      }
    </script>

    <!-- Suppress MetaMask development errors -->
    <script>
      // Only in development environment
      if (
        window.location.hostname === "localhost" ||
        window.location.hostname.includes("replit.dev")
      ) {
        // More comprehensive MetaMask error suppression
        const originalConsoleError = console.error;
        console.error = function (...args) {
          const message = args.join(" ");
          if (
            message.includes("MetaMask") ||
            message.includes("Failed to connect to MetaMask")
          ) {
            return; // Suppress MetaMask console errors
          }
          originalConsoleError.apply(console, args);
        };

        // Suppress window errors
        window.addEventListener("error", function (event) {
          if (
            event.error &&
            event.error.message &&
            (event.error.message.includes("MetaMask") ||
              event.error.message.includes("Failed to connect to MetaMask"))
          ) {
            event.preventDefault();
            event.stopPropagation();
            return false;
          }
        });

        // Suppress unhandled promise rejections
        window.addEventListener("unhandledrejection", function (event) {
          if (event.reason) {
            const message = event.reason.message || event.reason.toString();
            if (
              message.includes("MetaMask") ||
              message.includes("Failed to connect to MetaMask")
            ) {
              event.preventDefault();
              event.stopPropagation();
              return false;
            }
          }
        });

        // Override window.onerror for additional coverage
        window.onerror = function (message, source, lineno, colno, error) {
          if (
            message &&
            (message.includes("MetaMask") ||
              message.includes("Failed to connect to MetaMask"))
          ) {
            return true; // Suppress the error
          }
          return false; // Let other errors through
        };

        // Target Vite's error overlay specifically
        const hideViteErrorOverlay = () => {
          const errorOverlay = document.querySelector("vite-error-overlay");
          if (errorOverlay) {
            const shadowRoot = errorOverlay.shadowRoot;
            if (shadowRoot) {
              const errorText = shadowRoot.textContent || shadowRoot.innerHTML;
              if (
                errorText.includes("MetaMask") ||
                errorText.includes("Failed to connect to MetaMask")
              ) {
                errorOverlay.style.display = "none";
                errorOverlay.remove();
              }
            }
          }
        };

        // Check for error overlay periodically
        setInterval(hideViteErrorOverlay, 100);

        // Also check when DOM changes
        const observer = new MutationObserver(hideViteErrorOverlay);
        observer.observe(document.body, { childList: true, subtree: true });
      }
    </script>
  </body>
</html>
