<!DOCTYPE html>
<html dir="ltr" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico?v=3" />
    <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" />

    <!-- Критические CSS ресурсы -->
    <!-- inject:css -->
    <link rel="stylesheet" crossorigin href="/assets/css/theme-FOr2WprCwn.css">
    <link rel="stylesheet" crossorigin href="/assets/css/tailwind-DjutpHJGL5.css">

    <!-- 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" />

    <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" />

    <script src="https://consent.trustarc.com/autoblockasset/core.min.js?domain=finelo.com"></script>
    <script src="https://consent.trustarc.com/autoblockoptout?domain=finelo.com"></script>
    <script src="//consent.trustarc.com/notice?domain=finelo.com&c=teconsent&js=nj&noticeType=bb&text=true&gtm=1&pcookie" async crossorigin></script>

    <!-- Microsoft Clarity Analytics -->
    <script async data-cookie="analytics" type="ta-blocked">!function(t,e,n,c,s,a,i){t[n]=t[n]||function(){(t[n].q=t[n].q||[]).push(arguments)},(a=e.createElement(c)).async=1,a.src="https://www.clarity.ms/tag/ebhisn88tx",(i=e.getElementsByTagName(c)[0]).parentNode.insertBefore(a,i)}(window,document,"clarity","script");</script>
    <script>fetch(window.location.href,{method:"HEAD"}).then((_=>{window.__COUNTRY__=_.headers.get("x-country")||""})).catch((()=>{window.__COUNTRY__=""}));</script>
    <script type="module" crossorigin src="/assets/js/main.CNSDm9QH.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/react.DUHfspy_.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/sentry.6sywe8M7.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/statsig.VTqsdGPd.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/mui.Bs268rLO.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/auth.B0iG_pZR.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/motion.Bag73i6e.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/icons.D15RGiCP.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/amplitude.BeyJXNa-.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/grafana.Z-DPoXy5.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/firebase-core.D6Saa5li.js">
    <link rel="modulepreload" crossorigin href="/assets/js/vendor/firebase-firestore.DFQlfvq3.js">
    <link rel="modulepreload" crossorigin href="/assets/js/useGetGeo.dBmeHETf.js">
    <link rel="stylesheet" crossorigin href="/assets/css/useGetGeo-D4bPlb30Ul.css">
    <link rel="stylesheet" crossorigin href="/assets/css/main-CVC8Vx-jJM.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>
    <div id="consent_blackbar"></div>
  </body>
</html>
