<!doctype html>
<html lang="en">
  <head>
    <!-- Critical meta tags -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="theme-color" content="#0a0a0a" />
    <meta name="color-scheme" content="dark" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=no" />

    
    <!-- SEO meta tags -->
    <title>SowidTech LLC - Next-Gen Digital Agency | AI Lead Capture, AI Content Engine & AI Sales Automation</title>
    <meta name="description" content="Where small ventures rise through alchemy of code — SowidTech LLC weaves AI, art, and automation to let thy business bloom with little toil." />
    <meta name="keywords" content="AI lead capture, AI content engine, AI sales automation, AI website systems, digital agency, web development, Bisbee Arizona" />
    <meta name="author" content="SowidTech LLC" />
    <meta name="robots" content="index, follow" />
    
    <!-- Open Graph meta tags -->
    <meta property="og:title" content="SowidTech LLC - Next-Gen AI Digital Agency" />
    <meta property="og:description" content="Where small ventures rise through alchemy of code — SowidTech LLC weaves AI, art, and automation to let thy business bloom with little toil." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://sowidtech.com" />
    <meta property="og:image" content="https://sowidtech.com/sowidtech-logo.webp" />
    <meta property="og:site_name" content="SowidTech LLC" />
    
    <!-- Twitter Card meta tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="SowidTech LLC - Next-Gen AI Digital Agency" />
    <meta name="twitter:description" content="Where small ventures rise through alchemy of code — SowidTech LLC weaves AI, art, and automation to let thy business bloom with little toil." />
    <meta name="twitter:image" content="https://sowidtech.com/sowidtech-logo.webp" />
    
    <!-- Favicon and icons -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" href="/sowidtech-logo.webp" />
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://sowidtech.com" />
    
    <!-- DNS prefetch for external domains -->
    <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
    <link rel="dns-prefetch" href="https://cdn.voiceflow.com" />
    <link rel="dns-prefetch" href="https://general-runtime.voiceflow.com" />
    
    <!-- Critical CSS inline -->
    <style>
      /* Self-hosted Inter fonts */
      @font-face {
        font-family: 'Inter';
        src: url('/fonts/Inter-regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: 'Inter';
        src: url('/fonts/Inter-semibold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: 'Inter';
        src: url('/fonts/Inter-bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: optional;
      }
      
      /* Critical above-the-fold styles */
      html {
        background-color: #000000;
        color: #ffffff;
        margin: 0;
        padding: 0;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background: #0a0a0a;
        color: #ffffff;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        min-height: 100vh;
        overflow-x: hidden;
        width: 100%;
      }

      body::before {
        content: '';
        position: fixed;
        inset: 0;
        background-image:
          radial-gradient(at 20% 80%, hsla(120,100%,10%,0.3) 0px, transparent 50%),
          radial-gradient(at 80% 20%, hsla(240,100%,15%,0.3) 0px, transparent 50%),
          radial-gradient(at 40% 40%, hsla(300,100%,10%,0.2) 0px, transparent 50%);
        z-index: -1;
        pointer-events: none;
        will-change: transform;
      }
      
      .container { 
        max-width: 1400px; 
        margin: 0 auto; 
        padding: 0 1.5rem; 
      }
      
      h1, h2, h3, h4, h5, h6 { 
        font-weight: 700; 
        line-height: 1.2; 
        margin: 0;
        letter-spacing: -0.025em;
      }
      
      h1 { 
        font-size: 3rem; 
        margin-bottom: 1rem;
        background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.1;
      }
      
      @media (min-width: 768px) { 
        h1 { 
          font-size: 4rem; 
        } 
      }
      
      @media (min-width: 1024px) { 
        h1 { 
          font-size: 5rem; 
        } 
      }
      
      /* Critical hero section styles */
      .hero-section {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        background: radial-gradient(ellipse at center, rgba(120, 119, 198, 0.15) 0%, transparent 70%);
        overflow: hidden;
        contain: layout style paint;
      }
      
      .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
        z-index: 10;
      }
      
      .hero-content {
        position: relative;
        z-index: 20;
        padding: 5rem 1rem;
        max-width: 90rem;
        margin: 0 auto;
        text-align: center;
      }
      
      /* Advanced Glass Morphism */
      .glass {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      }

      @media (min-width: 1024px) {
        .glass {
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
        }
      }

      /* Tap highlight color for mobile */
      * {
        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.3);
      }
      
      .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 2rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-decoration: none;
        border-radius: 12px;
        font-weight: 600;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow:
          0 4px 20px rgba(102, 126, 234, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        will-change: transform;
      }
      
      .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 
          0 8px 30px rgba(102, 126, 234, 0.6),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
      }
      
      .btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 2rem;
        background: rgba(255, 255, 255, 0.05);
        color: white;
        text-decoration: none;
        border-radius: 12px;
        font-weight: 600;
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: transform 0.2s ease-out, background 0.2s ease-out;
        will-change: transform;
      }
      
      .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
      }
      
      /* Gradient Text */
      .gradient-text {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      
      /* Critical navbar styles */
      .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background: rgba(10, 10, 10, 0.8);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1rem 0;
        transition: transform 0.2s ease, background-color 0.2s ease;
        will-change: transform;
        contain: layout style paint;
      }
      
      @media (min-width: 1024px) {
        .navbar {
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
        }
      }
      
      .navbar.scrolled {
        background: rgba(10, 10, 10, 0.95);
        border-bottom-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      }
      
      .navbar-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 1.5rem;
      }
      
      .logo-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-decoration: none;
        color: white;
      }
      
      .logo-img {
        width: 4rem;
        height: 4rem;
        -o-object-fit: contain;
           object-fit: contain;
      }
      
      /* Mobile menu button */
      .mobile-menu-btn {
        display: block !important;
        position: relative;
        z-index: 60;
        padding: 0.75rem;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        min-width: 48px;
        min-height: 48px;
        box-sizing: border-box;
      }
      
      @media (min-width: 768px) {
        .mobile-menu-btn {
          display: none !important;
        }
      }
      
      /* Desktop nav */
      .desktop-nav {
        display: none;
        align-items: center;
        gap: 1.5rem;
      }
      
      @media (min-width: 768px) {
        .desktop-nav {
          display: flex;
        }
      }
      
      .nav-link {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        font-size: 0.875rem;
        transition: color 0.2s ease;
        will-change: color;
      }
      
      .nav-link:hover,
      .nav-link.active {
        color: white;
        text-decoration: none;
      }
      
      /* Critical Tailwind utilities */
      .flex { display: flex; }
      .items-center { align-items: center; }
      .justify-center { justify-content: center; }
      .justify-between { justify-content: space-between; }
      .gap-3 { gap: 0.75rem; }
      .gap-4 { gap: 1rem; }
      .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
      .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
      .font-bold { font-weight: 700; }
      .font-medium { font-weight: 500; }
      .text-white { color: rgb(255 255 255); }
      .text-primary-500 { color: #667eea; }
      .bg-primary-500 { background-color: #667eea; }
      .hover\:bg-primary-600:hover { background-color: #5a6fd8; }
      .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
      .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
      .rounded-md { border-radius: 0.375rem; }
      .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
      .duration-300 { transition-duration: 300ms; }
      .mb-4 { margin-bottom: 1rem; }
      .mb-8 { margin-bottom: 2rem; }
      .max-w-5xl { max-width: 90rem; }
      .mx-auto { margin-left: auto; margin-right: auto; }
      .text-center { text-align: center; }
      .leading-relaxed { line-height: 1.625; }
      
      /* Loading spinner */
      @media (max-width: 767px) {
        * {
          -webkit-tap-highlight-color: rgba(102, 126, 234, 0.3);
          tap-highlight-color: rgba(102, 126, 234, 0.3);
        }
        
        html {
          -webkit-text-size-adjust: 100%;
          -moz-text-size-adjust: 100%;
               text-size-adjust: 100%;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
        }
        
        body {
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: none;
        }
        
        .hero-section {
          min-height: 100vh;
          padding-top: 80px;
        }
        
        .hero-content {
          padding: 2rem 1rem;
        }
        
        h1 {
          font-size: 2.5rem;
          line-height: 1.1;
        }
        
        .btn-primary,
        .btn-secondary {
          width: auto;
          min-width: 200px;
          margin-bottom: 0.5rem;
          padding: 0.875rem 1.5rem;
        }
        
        .navbar {
          padding: 0.5rem 0;
        }
        .mobile-menu-btn {
          min-height: 44px;
          min-width: 44px;
          -webkit-tap-highlight-color: rgba(102, 126, 234, 0.3);
        }
      }
      
      /* Ensure content is visible */
      #root {
        min-height: 100vh;
        isolation: isolate;
        width: 100%;
        position: relative;
      }
      
      /* Improve focus visibility for accessibility */
      *:focus-visible {
        outline: 3px solid #667eea;
        outline-offset: 3px;
      }

      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      textarea:focus-visible,
      select:focus-visible {
        outline: 3px solid #667eea;
        outline-offset: 2px;
      }
      
      /* Reduce motion for users who prefer it */
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }
      
      /* High contrast mode support */
      @media (prefers-contrast: high) {
        .btn-primary {
          border: 2px solid currentColor;
        }
        
        .btn-secondary {
          background-color: transparent;
          border: 2px solid currentColor;
        }
        
        .glass {
          border: 2px solid rgba(255, 255, 255, 0.5);
          background: rgba(0, 0, 0, 0.8);
        }
      }
    </style>
    
    <!-- Preload critical resources -->
    <link rel="preload" as="image" href="/sowidtech-logo-optimized.webp" fetchpriority="high">
    <link rel="preload" as="style" href="/assets/index-Bd3O96Wk.css">
    <link rel="preload" as="font" href="/fonts/Inter-regular.woff2" type="font/woff2" crossorigin>
    <link rel="preload" as="font" href="/fonts/Inter-semibold.woff2" type="font/woff2" crossorigin>
    
    <!-- Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "SowidTech LLC",
      "description": "Where small ventures rise through alchemy of code — SowidTech LLC weaves AI, art, and automation to let thy business bloom with little toil.",
      "url": "https://sowidtech.com",
      "logo": "https://sowidtech.com/Untitled%20design%20(4).webp",
      "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+1-520-227-0826",
        "contactType": "customer service",
        "email": "business@sowidtech.com",
        "availableLanguage": "English"
      },
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "Bisbee",
        "addressRegion": "AZ",
        "addressCountry": "US"
      },
      "service": [
        {
          "@type": "Service",
          "name": "AI Lead Capture",
          "description": "Smart chatbots that qualify leads and book calls automatically"
        },
        {
          "@type": "Service",
          "name": "AI Content Engine",
          "description": "Automated content creation and scheduling tailored to your business"
        },
        {
          "@type": "Service",
          "name": "AI Sales Automation",
          "description": "Automate lead capture, follow-ups, and conversions with smart systems"
        },
        {
          "@type": "Service",
          "name": "AI Website Systems",
          "description": "AI-powered websites that automate booking, contact, and conversion"
        }
      ]
    }
    </script>
    <script type="module" crossorigin src="/assets/js/index-CMyGH5sP.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/js/vendor-other-CjuW5UTR.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor-react-DWUvc_8v.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor-react-dom-Dj9ZzFzH.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor-router-CuxnoINk.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor-supabase-Ccp9ZOrr.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DCRhX318.css">
  </head>
  <body>
    <!-- Skip to main content for accessibility -->
    <a href="#main-content" class="sr-only">Skip to main content</a>
    
    <!-- Main app container -->
    <div id="root"></div>
    
    <!-- Load main script with defer -->
    
    <!-- Service Worker registration - deferred -->
    <script>
      // Create Trusted Types policy for safe script loading
      if (window.trustedTypes && trustedTypes.createPolicy) {
        trustedTypes.createPolicy('default', {
          createScriptURL: (url) => {
            const allowedOrigins = [
              'https://cdn.voiceflow.com',
              'https://www.googletagmanager.com',
              '/sw.js'
            ];
            if (allowedOrigins.some(origin => url.startsWith(origin) || url === '/sw.js')) {
              return url;
            }
            throw new TypeError('Invalid script URL');
          }
        });
      }

      window.addEventListener('load', () => {
        // Service Worker registration
        if ('serviceWorker' in navigator) {
          // Use requestIdleCallback for non-critical service worker registration
          const registerSW = () => {
            navigator.serviceWorker.register('/sw.js').catch(() => {
              console.log('Service worker registration failed, but app should still work');
            });
          };

          if ('requestIdleCallback' in window) {
            requestIdleCallback(registerSW, { timeout: 5000 });
          } else {
            setTimeout(registerSW, 2000);
          }
        }

        // Voiceflow Chat Widget - load when user interacts
        const loadVoiceflow = () => {
          if (window.voiceflowLoaded) return;
          window.voiceflowLoaded = true;

          const script = document.createElement('script');
          script.onload = () => {
            window.voiceflow.chat.load({
              verify: { projectID: '68936c8a470f9eb8a3f5c97a' },
              url: 'https://general-runtime.voiceflow.com',
              versionID: 'production',
              voice: {
                url: "https://runtime-api.voiceflow.com"
              }
            });
          };
          script.src = "https://cdn.voiceflow.com/widget-next/bundle.mjs";
          script.type = "text/javascript";
          script.async = true;
          document.head.appendChild(script);
        };

        // Load on user interaction
        const interactions = ['mousedown', 'touchstart', 'scroll'];
        interactions.forEach(event => {
          document.addEventListener(event, () => {
            if ('requestIdleCallback' in window) {
              requestIdleCallback(loadVoiceflow, { timeout: 3000 });
            } else {
              setTimeout(loadVoiceflow, 1000);
            }
          }, { once: true, passive: true });
        });

        // Google Analytics - load on interaction
        const loadAnalytics = () => {
          if (window.gaLoaded) return;
          window.gaLoaded = true;

          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-W1X9CS37RR');

          const script = document.createElement('script');
          script.async = true;
          script.src = 'https://www.googletagmanager.com/gtag/js?id=G-W1X9CS37RR';
          document.head.appendChild(script);
        };

        // Load on first interaction
        const gaInteractions = ['mousedown', 'touchstart', 'scroll'];
        gaInteractions.forEach(event => {
          document.addEventListener(event, () => {
            if ('requestIdleCallback' in window) {
              requestIdleCallback(loadAnalytics, { timeout: 2000 });
            } else {
              setTimeout(loadAnalytics, 500);
            }
          }, { once: true, passive: true });
        });
      });
    </script>
  </body>
</html>