<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Orvexa</title>
    <!-- Prevent white flash during initial load / route transitions -->
    <style>
      html, body { 
        background: #1A2321; 
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      #root {
        min-height: 100vh;
      }
      /* Critical CSS for initial render - inline to avoid blocking */
      .lite-theme {
        --bg-main: #1A2321;
        --bg-card: #1F2A29;
        --text-primary: #FFFFFF;
        --text-secondary: #B0B0B0;
      }
      /* Ensure LCP element renders quickly - critical CSS */
      h1 {
        font-size: 2.25rem;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        padding: 0;
        letter-spacing: -0.02em;
        /* Ensure h1 is always visible immediately */
        visibility: visible !important;
        opacity: 1 !important;
      }
      /* Apply gradient after initial render to avoid blocking LCP */
      h1[data-gradient="true"] {
        background: linear-gradient(to right, #4E5BFF, #89C8FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      /* Prevent any layout shifts */
      body {
        overflow-x: hidden;
      }
      .text-lite-text-secondary {
        color: #B0B0B0;
      }
      /* Fade in animation for description - ensures h1 is LCP */
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      /* Optimize font rendering */
      * {
        font-display: swap;
      }
    </style>
    <!-- Preconnect to improve connection time - dynamically set based on environment -->
    <script>
      // Set preconnect based on environment
      const isProduction = window.location.hostname !== 'localhost' && !window.location.hostname.includes('localhost');
      const apiUrl = isProduction ? 'https://api.orvexa.ai' : 'http://localhost:8081';
      const preconnect = document.createElement('link');
      preconnect.rel = 'preconnect';
      preconnect.href = apiUrl;
      preconnect.crossOrigin = 'anonymous';
      document.head.appendChild(preconnect);
      const dnsPrefetch = document.createElement('link');
      dnsPrefetch.rel = 'dns-prefetch';
      dnsPrefetch.href = apiUrl;
      document.head.appendChild(dnsPrefetch);
    </script>
    <!-- Note: modulepreload removed - Vite will handle this automatically in production -->
    <script type="module" crossorigin src="/assets/js/index-18TBQbiy.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/css/index-BWlTaNPL.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>


