
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    
    <!-- Critical CSS for instant first paint -->
    <style>
      @layer base {
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.5;background:#fff;color:#1a1a2e}
        @media(prefers-color-scheme:dark){body{background:#0a0a0a;color:#f5f5f5}}
      }
      #root{min-height:100vh}
      .loading-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#fff}
      .loading-spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#2dd4bf;border-radius:50%;animation:spin 1s linear infinite}
      @keyframes spin{to{transform:rotate(360deg)}}
      @media(prefers-color-scheme:dark){.loading-screen{background:#0a0a0a}.loading-spinner{border-color:#333;border-top-color:#2dd4bf}}
    </style>
    
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

    <!-- Preconnect to external domains for performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://calendly.com">
    <link rel="dns-prefetch" href="https://assets.calendly.com">
    <link rel="preconnect" href="https://www.googletagmanager.com">
    <link rel="dns-prefetch" href="https://www.linkedin.com">
    <link rel="dns-prefetch" href="https://twitter.com">

    <!-- Initialize telemetry helpers FIRST -->
    <script>
      // Ensure GetTelemetryID is available immediately for Calendly
      window.GetTelemetryID = function() {
        try {
          return 'replit-' + Math.random().toString(36).substr(2, 9);
        } catch (error) {
          return 'fallback-id';
        }
      };
      
      // Initialize dataLayer for gtag
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      window.gtag = gtag;
    </script>

    <!-- Google Analytics (gtag.js) - Error Safe -->
    <script>
      (function() {
        try {
          var hostname = window.location.hostname;
          if (hostname !== 'alkulaib.io' && hostname !== 'www.alkulaib.io') {
            return;
          }

          var script = document.createElement('script');
          script.async = true;
          script.src = 'https://www.googletagmanager.com/gtag/js?id=G-0FW0FNYW3T';
          script.onerror = function() {
            // Analytics blocked - continue silently
            console.debug('Analytics blocked or unavailable');
          };
          document.head.appendChild(script);
          
          script.onload = function() {
            gtag('js', new Date());
            gtag('config', 'G-0FW0FNYW3T');
          };
        } catch (e) {
          // Silently handle analytics failures
          console.debug('Analytics initialization failed');
        }
      })();
    </script>
    <!-- Typography: locally hosted Cabinet Grotesk + Plus Jakarta Sans + Noto Sans Arabic -->
    <link rel="preload" as="font" type="font/woff2" href="/fonts/CabinetGrotesk-Bold.woff2" crossorigin>
    <link rel="preload" as="font" type="font/woff2" href="/fonts/plus-jakarta-sans-latin-400-normal.woff2" crossorigin>
    <link rel="preload" as="font" type="font/woff2" href="/fonts/noto-sans-arabic-v33-arabic-regular.woff2" crossorigin>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Primary Meta Tags -->
    <title>Abdullah Al Kulaib - Director of Shared Services | AI-Native Transformation Leader</title>
    <meta name="title" content="Abdullah Al Kulaib - Director of Shared Services | AI-Native Transformation Leader">
    <meta name="description" content="I architect AI-native shared services and cognitive operating models that turn operational chaos into competitive advantage. 17+ years building Vision 2030-aligned institutions in Saudi Arabia.">
    <meta name="keywords" content="Shared Services, Vision 2030, AI-Native Operating Models, Public Sector Transformation, Angel Investor, Startup Advisory, Saudi Arabia, MENA, Institutional Architecture">
    <meta name="author" content="Abdullah Al Kulaib">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://alkulaib.io/" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://alkulaib.io/">
    <meta property="og:title" content="Abdullah Al Kulaib - Director of Shared Services | AI-Native Transformation Leader">
    <meta property="og:description" content="I architect AI-native shared services and cognitive operating models that turn operational chaos into competitive advantage. 17+ years building Vision 2030-aligned institutions.">
    <meta property="og:image" content="https://alkulaib.io/og-image.webp">
    <meta property="og:locale" content="en_US">
    <meta property="og:site_name" content="Abdullah Al Kulaib">

    <!-- Open Graph Image Details -->
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="Abdullah Al Kulaib - Director of Shared Services">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@Ab_Alkulaib">
    <meta name="twitter:creator" content="@Ab_Alkulaib">
    <meta name="twitter:title" content="Abdullah Al Kulaib - Director of Shared Services | AI-Native Transformation Leader">
    <meta name="twitter:description" content="I architect AI-native shared services and cognitive operating models that turn operational chaos into competitive advantage. 17+ years building Vision 2030-aligned institutions.">
    <meta name="twitter:image" content="https://alkulaib.io/og-image.webp">
    <meta name="twitter:image:alt" content="Abdullah Al Kulaib - Director of Shared Services">

    <!-- Schema.org Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Person",
      "name": "Abdullah Al Kulaib",
      "alternateName": "عبدالله آل كليب",
      "url": "https://alkulaib.io",
      "image": "https://alkulaib.io/og-image.webp",
      "jobTitle": "Director of Shared Services | Institutional Architect & Transformation Leader",
      "worksFor": {
        "@type": "Organization",
        "name": "Independent Consultant & Angel Investor"
      },
      "description": "I architect AI-native shared services and cognitive operating models that turn operational chaos into competitive advantage. 17+ years building financially sustainable, Vision 2030-aligned institutions.",
      "knowsAbout": ["Shared Services", "Vision 2030", "AI-Native Operating Models", "Public Sector Transformation", "Angel Investment", "Startup Advisory"],
      "address": {
        "@type": "PostalAddress",
        "addressLocality": "Riyadh",
        "addressCountry": "SA"
      },
      "sameAs": [
        "https://www.linkedin.com/in/aalkulaib",
        "https://x.com/Ab_Alkulaib"
      ]
    }
    </script>

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">

    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#2563eb">
    <!-- Removed deprecated apple-mobile-web-app-capable meta; manifest handles PWA mode -->
    <meta name="apple-mobile-web-app-title" content="Abdullah Al Kulaib">
    <script type="module" crossorigin src="/assets/index-B0NjiCgn.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-DVDPw_7t.js">
    <link rel="modulepreload" crossorigin href="/assets/animations-C4YrzuK5.js">
    <link rel="modulepreload" crossorigin href="/assets/query-DvCfpId-.js">
    <link rel="modulepreload" crossorigin href="/assets/react-DgjtGbw0.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-Br4j_65r.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-DEeRigEr.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DG0vLw7W.css">
  </head>
  <body>
    <div id="root">
      <!-- Initial loading state for faster perceived performance -->
      <div class="loading-screen" id="initial-loader">
        <div class="loading-spinner"></div>
      </div>
    </div>
    <script>
      // Remove loading screen once React mounts (with multiple fallbacks)
      function removeLoader() {
        const loader = document.getElementById('initial-loader');
        if (loader) loader.remove();
      }
      // Primary: MutationObserver watches for React mounting
      const observer = new MutationObserver((mutations, obs) => {
        const root = document.getElementById('root');
        if (root && root.children.length > 1) {
          removeLoader();
          obs.disconnect();
        }
      });
      observer.observe(document.getElementById('root'), { childList: true });
      // Fallback: Remove on window load after short delay
      window.addEventListener('load', () => setTimeout(removeLoader, 100));
      // Final fallback: Remove after 3 seconds max
      setTimeout(removeLoader, 3000);
    </script>
  </body>
</html>
