
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Workbrand Analytics</title>
    <meta name="description" content="Our best-in-class Workbrand Analytics platform will grade your EVP and provide continuous, real-time and actionable information to help you optimize your talent acquisition and employee engagement strategies.">
    <meta name="author" content="Workbrand" />

    
    
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://storage.googleapis.com/gpt-engineer-file-uploads/0aA1MIAG1uS2Y2iWK4pE4AfZOlQ2/social-images/social-1760148295938-wbfull.png">

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@workbrand" />
    <meta name="twitter:image" content="https://storage.googleapis.com/gpt-engineer-file-uploads/0aA1MIAG1uS2Y2iWK4pE4AfZOlQ2/social-images/social-1760148295938-wbfull.png">
    
    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="apple-touch-icon" href="/favicon.png">
    
    <!-- Inline theme detection — runs before first paint to avoid flash -->
    <script>
      (function(){
        var t=localStorage.getItem('workbrand-ui-theme')||'system';
        if(t==='system')t=window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';
        document.documentElement.classList.add(t);
      })();
    </script>
    <!-- Performance optimization hints - prioritized order -->
    <link rel="preconnect" href="https://tvcqwnkngilzvtiqkssg.supabase.co" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdn.brandfetch.io" crossorigin>

    <!-- Montserrat — WorkBrand brand font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap"></noscript>

    <!-- Critical inline styles for instant first paint -->
    <style>
      /* Font display optimization */
      @font-face {
        font-family: 'Montserrat';
        font-display: swap;
      }
      /* Critical above-the-fold styles */
      *,*::before,*::after{box-sizing:border-box}
      html{-webkit-text-size-adjust:100%;line-height:1.5}
      body{margin:0;font-family:'Montserrat',system-ui,-apple-system,sans-serif;background:#09090b;color:#fafafa}
      /* Light mode overrides */
      html.light body{background:#ffffff;color:#09090b}
      #root{min-height:100vh;display:flex;flex-direction:column}
      /* Loading state — speed dial */
      .initial-loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#09090b;z-index:9999}
      html.light .initial-loader{background:#ffffff}
      .initial-loader .gauge{position:relative;width:128px;height:128px}
      .initial-loader svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(180deg)}
      .initial-loader .gauge-bg{fill:none;stroke:rgba(255,255,255,0.05);stroke-width:8}
      html.light .initial-loader .gauge-bg{stroke:rgba(0,0,0,0.05)}
      .initial-loader .gauge-arc{fill:none;stroke:#346FFD;stroke-width:8;stroke-linecap:round;stroke-dasharray:126 252;stroke-dashoffset:126;animation:gf 2.5s ease-in-out infinite}
      .initial-loader .ticks{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
      .initial-loader .tick{position:absolute;width:100%;height:100%}
      .initial-loader .tick::after{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:2px;height:8px;background:rgba(52,111,253,0.3);border-radius:9999px}
      .initial-loader .tick.end::after{height:12px;background:rgba(52,111,253,0.5)}
      .initial-loader .needle-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
      .initial-loader .needle-rotate{position:absolute;width:100%;height:100%;animation:gn 2.5s ease-in-out infinite}
      .initial-loader .needle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:bottom center}
      .initial-loader .needle-bar{height:48px;width:4px;transform:translateY(-24px);background:linear-gradient(to top,#346FFD,rgba(52,111,253,0.4));border-radius:9999px}
      .initial-loader .pin{position:relative;z-index:10;width:12px;height:12px;background:#346FFD;border-radius:50%;box-shadow:0 0 8px rgba(52,111,253,0.5)}
      .initial-loader .glow{position:absolute;inset:0;border-radius:50%;background:rgba(52,111,253,0.05);filter:blur(16px);animation:pulse 2s ease-in-out infinite}
      @keyframes gn{0%{transform:rotate(-90deg)}40%{transform:rotate(90deg)}50%{transform:rotate(90deg)}90%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}
      @keyframes gf{0%{stroke-dashoffset:126}40%{stroke-dashoffset:0}50%{stroke-dashoffset:0}90%{stroke-dashoffset:126}100%{stroke-dashoffset:126}}
      @keyframes pulse{0%,100%{opacity:0.4}50%{opacity:1}}
    </style>
    
    <!-- Service Worker registration -->
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('/sw.js')
            .then((registration) => {
              console.log('SW registered: ', registration);
            })
            .catch((registrationError) => {
              console.log('SW registration failed: ', registrationError);
            });
        });
      }
    </script>
    <meta property="og:title" content="Workbrand Analytics">
  <meta name="twitter:title" content="Workbrand Analytics">
  <meta property="og:description" content="Our best-in-class Workbrand Analytics platform will grade your EVP and provide continuous, real-time and actionable information to help you optimize your talent acquisition and employee engagement strategies.">
  <meta name="twitter:description" content="Our best-in-class Workbrand Analytics platform will grade your EVP and provide continuous, real-time and actionable information to help you optimize your talent acquisition and employee engagement strategies.">
  <script type="module" crossorigin src="/assets/index-_yWjIygs.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/react-vendor-BsbpdF34.js">
  <link rel="modulepreload" crossorigin href="/assets/query-vendor-BTTGjYr6.js">
  <link rel="modulepreload" crossorigin href="/assets/supabase-vendor-Djhhzs77.js">
  <link rel="modulepreload" crossorigin href="/assets/ui-vendor-CgX-omjC.js">
  <link rel="modulepreload" crossorigin href="/assets/chart-vendor-bpFzyCKq.js">
  <link rel="modulepreload" crossorigin href="/assets/router-vendor-CG0Ma9Em.js">
  <link rel="stylesheet" crossorigin href="/assets/index-gCJDowzC.css">
</head>

  <body>
    <!-- Speed dial loader — lives outside #root so React doesn't destroy it -->
    <div class="initial-loader" id="initial-loader"><div class="gauge"><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" class="gauge-bg" stroke-dasharray="126 252"/><circle cx="50" cy="50" r="40" class="gauge-arc"/></svg><div class="ticks"><div class="tick end" style="transform:rotate(-90deg)"></div><div class="tick" style="transform:rotate(-60deg)"></div><div class="tick" style="transform:rotate(-30deg)"></div><div class="tick" style="transform:rotate(0deg)"></div><div class="tick" style="transform:rotate(30deg)"></div><div class="tick" style="transform:rotate(60deg)"></div><div class="tick end" style="transform:rotate(90deg)"></div></div><div class="needle-wrap"><div class="needle-rotate"><div class="needle"><div class="needle-bar"></div></div></div><div class="pin"></div></div><div class="glow"></div></div></div>
    <div id="root"></div>
  </body>
</html>
