<!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 prevents duplicate downloads for CMS videos -->
    <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;
        }
        
        // Fetch hero content with timeout to prevent blocking
        // Non-blocking: Won't prevent page load if API is slow
        const fetchWithTimeout = (url, timeout = 2000) => {
          return Promise.race([
            fetch(url).then(res => res.json()),
            new Promise((_, reject) => 
              setTimeout(() => reject(new Error('timeout')), timeout)
            )
          ]);
        };
        
        fetchWithTimeout('/api/content/hero', 2000)
          .then(data => {
            const videoUrl = data?.content?.backgroundVideo || '/assets/ci-drone-intro.mp4';
            console.log('🎥 Creating early video preload:', videoUrl);
            
            // Create preload link for the actual video (default or CMS-configured)
            const link = document.createElement('link');
            link.rel = 'preload';
            link.href = videoUrl;
            link.as = 'video';
            link.setAttribute('fetchpriority', 'high');
            link.setAttribute('type', 'video/mp4');
            link.id = 'hero-video-preload';
            // Insert at very beginning for maximum priority
            document.head.insertBefore(link, document.head.firstChild);
          })
          .catch(err => {
            // Fallback to default video if API fails or times out
            console.log('🎥 Using default video preload (API timeout/error)');
            const link = document.createElement('link');
            link.rel = 'preload';
            link.href = '/assets/ci-drone-intro.mp4';
            link.as = 'video';
            link.setAttribute('fetchpriority', 'high');
            link.setAttribute('type', 'video/mp4');
            link.id = 'hero-video-preload';
            document.head.insertBefore(link, document.head.firstChild);
          });
      })();
    </script>
    
    <!-- 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 */
      @font-face {
        font-family: "Avenir Next";
        src: url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-Regular.eot");
        src:
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-Regular.eot?#iefix")
            format("embedded-opentype"),
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-Regular.woff") format("woff"),
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-Regular.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Avenir Next";
        src: url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-Medium.eot");
        src:
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-Medium.eot?#iefix")
            format("embedded-opentype"),
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-Medium.woff") format("woff"),
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-Medium.ttf") format("truetype");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: "Avenir Next";
        src: url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-DemiBold.eot");
        src:
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-DemiBold.eot?#iefix")
            format("embedded-opentype"),
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-DemiBold.woff") format("woff"),
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-DemiBold.ttf") format("truetype");
        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("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-DemiBold.eot");
        src:
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-DemiBold.eot?#iefix")
            format("embedded-opentype"),
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-DemiBold.woff") format("woff"),
          url("https://videozone-1d6bf.kxcdn.com/fonts/avenir-next/AvenirNext-DemiBold.ttf") format("truetype");
        font-weight: 700; /* Using 700 for bold rather than the 'bold' keyword */
        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 -->
    <link
      rel="preload"
      href="/fonts/avenir-next/AvenirNext-Regular.woff"
      as="font"
      type="font/woff"
      crossorigin
      id="font-regular-preload"
    />
    <link
      rel="preload"
      href="/fonts/avenir-next/AvenirNext-Medium.woff"
      as="font"
      type="font/woff"
      crossorigin
      id="font-medium-preload"
    />
    <link
      rel="preload"
      href="/fonts/avenir-next/AvenirNext-DemiBold.woff"
      as="font"
      type="font/woff"
      crossorigin
      id="font-demibold-preload"
    />

    <!-- Preconnect for faster font loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://www.googletagmanager.com" />
    <link rel="preconnect" href="https://cdn.cookie-script.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600&family=Montserrat:wght@500;600;700&display=swap"
      rel="stylesheet"
    />

    <!-- 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>Collab Island – Elite Product Designers, On Demand</title>
    <meta
      name="description"
      content="Handpicked global design talent from Collab Island Studio. We match startups and VCs with top-tier designers for high-impact product work."
    />
    <meta
      name="keywords"
      content="design talent, ux design, ui design, product design, brand identity, designer marketplace, creative talent, startup design"
    />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://collabisland.com/" />
    <meta
      property="og:title"
      content="Collab Island – Elite Product Designers, On Demand"
    />
    <meta
      property="og:description"
      content="Get matched with vetted global design talent for your startup or VC-backed project. Trial risk-free. No fluff—just great design."
    />
    <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="Collab Island - Elite Product Designers, On Demand"
    />
    <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="Collab Island – Elite Product Designers, On Demand"
    />
    <meta
      property="twitter:description"
      content="Global design talent for product, brand, and UX. Vetted. Reliable. Studio-crafted. Trial our designers risk-free."
    />
    <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"
    />
    <script type="module" crossorigin src="/assets/index-ByFOE-hu.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-C733eHZ9.js">
    <link rel="modulepreload" crossorigin href="/assets/router-8yqWYgl9.js">
    <link rel="stylesheet" crossorigin href="/assets/index-IvBvord-.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 Initialization Script -->
    <script>
      // Initialize CDN and trigger asset pulls in production
      if (window.location.hostname.includes('collabisland')) {
        console.log('🌍 Initializing KeyCDN integration...');
        
        const CDN_BASE = 'https://videozone-1d6bf.kxcdn.com';
        const criticalAssets = [
          '/fonts/avenir-next/AvenirNext-Regular.woff',
          '/fonts/avenir-next/AvenirNext-Medium.woff',
          '/fonts/avenir-next/AvenirNext-DemiBold.woff',
          '/assets/cloud.webp',
          '/assets/ci-vcs.webm'
        ];
        
        // Trigger CDN pulls after page loads
        window.addEventListener('load', () => {
          setTimeout(async () => {
            console.log('🚀 Triggering CDN asset pulls...');
            
            const results = await Promise.allSettled(
              criticalAssets.map(async (asset) => {
                try {
                  const response = await fetch(CDN_BASE + asset, {
                    method: 'HEAD',
                    cache: 'no-cache'
                  });
                  console.log(`${response.ok ? '✅' : '❌'} CDN ${asset}: ${response.status}`);
                  return { asset, success: response.ok, status: response.status };
                } catch (error) {
                  console.log(`❌ CDN ${asset}: ${error.message}`);
                  return { asset, success: false, error: error.message };
                }
              })
            );
            
            const successful = results.filter(r => r.status === 'fulfilled' && r.value.success).length;
            console.log(`📊 CDN pulls: ${successful}/${criticalAssets.length} successful`);
          }, 3000);
        });
      }
    </script>
    
    <!-- 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>
