<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Finelo - the ultimate online learning platform for absolute beginners in investing and trading. Dive into interactive courses and practice with a real-time market simulator, gaining essential financial knowledge in a fun and risk-free environment." />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="apple-mobile-web-app-title" content="Finelo" />

    <!-- Критические стили inline для быстрой загрузки -->
    <style>
      :root {
          --w-mobile: 500px;
          --h-footer: 4rem;
          --h-header: 3rem;
      }

      #root {
          max-width: var(--w-mobile, 768px);
          margin: 0 auto;
          padding: 0;
          display: flex;
          flex-direction: column;
          width: 100%;
      }

      html {
        font-size: 16px;
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
      }

      body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        color: var(--text-primary, #000000);
        line-height: 1.5;
        background-color: var(--background-primary, #ffffff);
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }

      .loader {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        min-height: 100vh;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        background-color: var(--background-primary, #ffffff);
      }

      @supports (height: 100dvh) {
        .loader {
          height: 100dvh;
          min-height: 100dvh;
        }
      }

      .lds-hourglass {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
      }

      .lds-hourglass:after {
        content: " ";
        display: block;
        border-radius: 50%;
        width: 0;
        height: 0;
        margin: 8px;
        box-sizing: border-box;
        border: 32px solid var(--stroke-accent, #5653fe);
        border-color: var(--stroke-accent, #5653fe) transparent var(--stroke-accent, #5653fe) transparent;
        animation: lds-hourglass 1.2s infinite;
      }

      @keyframes lds-hourglass {
        0% {
          transform: rotate(0);
          animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }
        50% {
          transform: rotate(900deg);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        100% {
          transform: rotate(1800deg);
        }
      }

      /* Улучшенная доступность */
      @media (prefers-reduced-motion: reduce) {
        .lds-hourglass:after {
          animation: none;
        }

        html {
          scroll-behavior: auto;
        }
      }

      #fc_frame {
        opacity: 0 !important;
        display: none !important;
      }

      #fc_frame.fc-open {
        opacity: 1 !important;
        display: block !important;
      }

      #launcher-frame {
        display: none !important;
      }

      /* Оптимизация для печати */
      @media print {
        .loader {
          display: none !important;
        }

        body {
          background: white !important;
          color: black !important;
        }
      }

      /* Улучшенная поддержка темной темы */
      @media (prefers-color-scheme: dark) {
        :root {
          color-scheme: dark;
        }
      }

      @media (prefers-color-scheme: light) {
        :root {
          color-scheme: light;
        }
      }
    </style>

    <!-- DNS prefetch для внешних доменов -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
    <link rel="dns-prefetch" href="https://s3.us-east-1.amazonaws.com" />
    <link rel="dns-prefetch" href="https://api.finelo.com" />
    <link rel="dns-prefetch" href="https://www.clarity.ms" />

    <!-- Preload критических ресурсов -->

    <!-- Preload основного скрипта -->
    <link rel="preload" href="data:application/octet-stream;base64,aW1wb3J0IHsgU3RyaWN0TW9kZSB9IGZyb20gJ3JlYWN0JzsKCmltcG9ydCAnLi9zaGFyZWQvbGliL3NlbnRyeSc7CgppbXBvcnQgeyBjcmVhdGVSb290IH0gZnJvbSAncmVhY3QtZG9tL2NsaWVudCc7CgppbXBvcnQgJy4vc2hhcmVkL2xpYi9pMThuJzsKCmltcG9ydCBBcHAgZnJvbSAnQC9hcHAvQXBwJzsKCmNvbnN0IGNvbnRhaW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdyb290Jyk7CgppZiAoIWNvbnRhaW5lcikgewogIHRocm93IG5ldyBFcnJvcignUm9vdCBjb250YWluZXIgbm90IGZvdW5kJyk7Cn0KCmNvbnN0IHJvb3QgPSBjcmVhdGVSb290KGNvbnRhaW5lcik7Cgpyb290LnJlbmRlcigKICA8U3RyaWN0TW9kZT4KICAgIDxBcHAgLz4KICA8L1N0cmljdE1vZGU+LAopOwo=" as="script" />

    <!-- Preload favicon для быстрой загрузки -->
    <link rel="preload" href="/favicon.ico" as="image" type="image/x-icon" />

    <!-- CSS переменные для темизации - загружаются первыми -->

    <!-- Tailwind CSS - основной фреймворк -->

    <base href="/" />

    <title>Finelo</title>

    <!-- Google Fonts с оптимизированной загрузкой -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      onload="this.onload=null;this.rel='stylesheet'"
    />
    <!-- fallback для отключённого JS -->
    <noscript>
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      />
    </noscript>

    <!-- Preconnect для внешних ресурсов -->
    <link rel="preconnect" href="https://s3.us-east-1.amazonaws.com" />
    <link rel="preconnect" href="https://api.finelo.com" />

    <!-- Cookie consent script -->
    <script
      id="cookieyes"
      type="text/javascript"
    ></script>

    <!-- Microsoft Clarity Analytics -->
    <script class="clarity-init" type="text/plain" data-cookiecategory="analytics" async>
      (function (c, l, a, r, i, t, y) {
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
      })(window, document, "clarity", "script", "ebhisn88tx");
    </script>
    <script type="module" crossorigin src="/assets/index-Bw4PSDux.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/react.B14MtaVP.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/statsig.CDP0XnLY.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/sentry.BIoEHyJX.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/amplitude.DdHRaR7a.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/aws-amplify.DE_UzqDb.js">
    <link rel="stylesheet" crossorigin href="/assets/css/index-DK-DNI3dOj.css">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
      <div class="loader">
        <div class="lds-hourglass"></div>
      </div>
    </div>
  </body>
</html>
