<!DOCTYPE html><html lang="pl"><head>
  <meta charset="utf-8">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=overlays-content">
  <meta name="referrer" content="origin">
  <link rel="icon" type="image/x-icon" href="assets/fav.png">

  <link rel="dns-prefetch" href="https://www.googletagmanager.com">

  <!-- ============================================ -->
  <!-- 1. NATYCHMIASTOWE ZAPISANIE UTM PARAMETRÓW  -->
  <!-- Musi być PIERWSZYM skryptem!                -->
  <!-- ============================================ -->
  <script>
    (function() {
      // Lista parametrów do zachowania
      var utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term', 'gclid', 'fbclid', 'dclid'];
      var params = new URLSearchParams(window.location.search);

      // Zapisz każdy parametr UTM do sessionStorage
      utmParams.forEach(function(param) {
        var value = params.get(param);
        if (value) {
          sessionStorage.setItem('st_' + param, value);
          console.log('UTM saved:', param, '=', value);
        }
      });

      // Zapisz referrer (skąd przyszedł użytkownik)
      if (document.referrer && !sessionStorage.getItem('st_original_referrer')) {
        sessionStorage.setItem('st_original_referrer', document.referrer);
        console.log('Referrer saved:', document.referrer);
      }

      // Zapisz pełny landing page URL
      if (!sessionStorage.getItem('st_landing_page')) {
        sessionStorage.setItem('st_landing_page', window.location.href);
        console.log('Landing page saved:', window.location.href);
      }
    })();
  </script>

  <!-- Conditional Preloading Based on Page Path -->
  <script>
    (function() {
      var path = window.location.pathname;
      var isHomepage = (path === '/' || path === '' || path === '/index.html');
      var isLessonPage = /^\/nauka-angielskiego\/historia-\d+/.test(path);

      function preloadImage(href, options) {
        var link = document.createElement('link');
        link.rel = 'preload';
        link.as = 'image';
        link.type = 'image/webp';
        link.href = href;
        if (options && options.fetchpriority) {
          link.fetchPriority = options.fetchpriority;
        }
        if (options && options.media) {
          link.media = options.media;
        }
        document.head.appendChild(link);
      }

      // Logo - preload on ALL pages EXCEPT lesson pages
      if (!isLessonPage) {
        preloadImage('/assets/splogo.webp');
      }

      // Hero images - preload ONLY on homepage
      if (isHomepage) {
        if (window.matchMedia('(min-width: 769px)').matches) {
          preloadImage('/assets/hero-desktop.webp', { fetchpriority: 'high' });
        } else {
          preloadImage('/assets/hero-mobile.webp', { fetchpriority: 'high' });
        }
      }

      // Lesson page assets - preload only on historia pages
      if (isLessonPage) {
        ['ai.webp', 'ai2.webp', 'ai3.webp', 'ai5.webp'].forEach(function(img) {
          preloadImage('/assets/' + img);
        });
      }
    })();
  </script>

  <!-- ============================================ -->
  <!-- 2. CONSENT MODE + GTM/PIXEL LOADERS         -->
  <!-- ============================================ -->
  <script>
    window.dataLayer = window.dataLayer || [];

    // Lightweight gtag function
    function gtag(){dataLayer.push(arguments);}
    window.gtag = gtag;

       // Detect GTM debug/preview mode
    var isGtmDebug = window.location.search.indexOf('gtm_debug') > -1
                  || document.cookie.indexOf('_gtm_debug') > -1;

    // DEFAULT CONSENT: ALL BLOCKED (EU/RODO compliant)
    gtag('consent', 'default', {
      'ad_storage': 'denied',
      'analytics_storage': 'denied',
      'ad_user_data': 'denied',
      'ad_personalization': 'denied',
      'personalization_storage': 'denied',
      'functionality_storage': isGtmDebug ? 'granted' : 'denied',
      'security_storage': 'granted',
      'wait_for_update': 500
    });

    gtag('set', 'ads_data_redaction', true);

    // WAŻNE: url_passthrough pozwala przekazywać gclid/dclid przez URL bez cookies
    // Jest to zgodne z RODO - nie zapisuje żadnych danych użytkownika
    gtag('set', 'url_passthrough', true);

    // ============================================
    // FUNKCJA POMOCNICZA: Odtwórz UTM z sessionStorage
    // ============================================
    function getStoredUtmParams() {
      var utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term', 'gclid', 'fbclid', 'dclid'];
      var restored = {};

      utmParams.forEach(function(param) {
        var value = sessionStorage.getItem('st_' + param);
        if (value) {
          restored[param] = value;
        }
      });

      // Dodaj referrer i landing page
      var referrer = sessionStorage.getItem('st_original_referrer');
      var landingPage = sessionStorage.getItem('st_landing_page');

      if (referrer) restored.original_referrer = referrer;
      if (landingPage) restored.landing_page = landingPage;

      return restored;
    }

    // ============================================
    // GTM LOADER - z odtwarzaniem UTM
    // ============================================
    window.gtmLoaded = false;

    window.loadGTM = function() {
      if (window.gtmLoaded) return;
      window.gtmLoaded = true;

      // KROK 1: Odtwórz UTM parametry z sessionStorage
      var restoredUtm = getStoredUtmParams();

      // KROK 2: Wyślij UTM do dataLayer PRZED załadowaniem GTM
      if (Object.keys(restoredUtm).length > 0) {
        window.dataLayer.push({
          'event': 'utm_params_restored',
          'utm_source': restoredUtm.utm_source || null,
          'utm_medium': restoredUtm.utm_medium || null,
          'utm_campaign': restoredUtm.utm_campaign || null,
          'utm_content': restoredUtm.utm_content || null,
          'utm_term': restoredUtm.utm_term || null,
          'gclid': restoredUtm.gclid || null,
          'fbclid': restoredUtm.fbclid || null,
          'original_referrer': restoredUtm.original_referrer || null,
          'landing_page': restoredUtm.landing_page || null
        });
        console.log('UTM params restored to dataLayer:', restoredUtm);
      }

      // KROK 3: Załaduj GTM
      (function(w,d,s,l,i){
        w[l]=w[l]||[];
        w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
        var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
        j.async=true;
        j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
        f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-WD8PN39V');

      console.log('GTM loaded after consent');
    };


    // ============================================
    // AUTO-LOAD GTM IN DEBUG MODE
    // Tag Assistant needs GTM loaded to connect
    // ============================================
    if (isGtmDebug) {
      window.loadGTM();
      console.log('GTM auto-loaded for debug/preview mode');
    }

    // ============================================
    // FACEBOOK PIXEL LOADER - z odtwarzaniem parametrów
    // ============================================
    window.fbPixelLoaded = false;

window.loadFacebookPixel = function() {
  if (window.fbPixelLoaded) return;
  window.fbPixelLoaded = true;

  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');

  var fbclid = sessionStorage.getItem('st_fbclid');

  fbq('init', '908701465440043');

  // Generate unique event ID for PageView deduplication
  var pageViewEventId = 'pv_' + Date.now() + '_' + Math.random().toString(36).substring(2, 9);
  fbq('track', 'PageView', {}, { eventID: pageViewEventId });

  if (fbclid) {
    console.log('Facebook Pixel loaded with fbclid:', fbclid);
  } else {
    console.log('Facebook Pixel loaded after consent');
  }
};
    // ============================================
    // STRIPE LOADER (bez zmian)
    // ============================================
    window.stripeLoaded = false;
    window.loadStripe = function() {
      if (window.stripeLoaded) return Promise.resolve();

      return new Promise((resolve) => {
        const stripeScript = document.createElement('script');
        stripeScript.src = "https://js.stripe.com/v3/";
        stripeScript.async = true;
        stripeScript.onload = function() {
          window.stripeLoaded = true;
          console.log('Stripe loaded on demand');
          resolve();
        };
        document.body.appendChild(stripeScript);
      });
    };
  </script>

  <!-- Async font loading - non-blocking -->
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&amp;family=Poppins:wght@400;500;600;700&amp;display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Poppins:wght@400;500;600;700&display=swap"></noscript>

  <!-- CRITICAL CSS - Inline for instant hero display -->
  <style>
    /* Base reset and hero placeholder - shows BEFORE Angular loads */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background: #0a0a0f;
      color: #fff;
      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
      min-height: 100vh;
    }

    /* Loading placeholder that shows instantly */
    .app-loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0f0f1a 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    .app-loading.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .app-loading-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 20px;
      width: 100%;
      max-width: 400px;
    }

    .app-loading-logo {
      width: 180px;
      height: auto;
      margin-bottom: 24px;
      animation: pulse 2s ease-in-out infinite;
      object-fit: contain;
    }

    .app-loading-text {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 8px;
      background: linear-gradient(135deg, #fff 0%, #4ade80 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-align: center;
      width: 100%;
    }

    .app-loading-subtitle {
      font-size: 1rem;
      color: rgba(255,255,255,0.6);
      text-align: center;
      width: 100%;
      margin-bottom: 24px;
    }

    .loading-bar {
      width: 200px;
      height: 3px;
      background: rgba(255,255,255,0.1);
      border-radius: 3px;
      overflow: hidden;
      margin: 0 auto;
    }

    .loading-bar-progress {
      height: 100%;
      width: 30%;
      background: linear-gradient(90deg, #4ade80, #22d3ee);
      border-radius: 3px;
      animation: loading 1.5s ease-in-out infinite;
    }

    @keyframes loading {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(400%); }
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

    /* Preload hero image in background - only load what's needed */
    .hero-preload {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    /* Desktop: load desktop image, hide mobile */
    .hero-preload-mobile {
      display: none;
    }

    /* Mobile: load mobile image, hide desktop */
    @media (max-width: 768px) {
      .hero-preload-desktop {
        display: none;
      }
      .hero-preload-mobile {
        display: block;
      }

      .app-loading-logo {
        width: 150px;
      }

      .app-loading-text {
        font-size: 1.5rem;
      }

      .loading-bar {
        width: 160px;
      }
    }
  </style>
<style>@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13, 110, 253;--bs-secondary-rgb:108, 117, 125;--bs-success-rgb:25, 135, 84;--bs-info-rgb:13, 202, 240;--bs-warning-rgb:255, 193, 7;--bs-danger-rgb:220, 53, 69;--bs-light-rgb:248, 249, 250;--bs-dark-rgb:33, 37, 41;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-body-color-rgb:33, 37, 41;--bs-body-bg-rgb:255, 255, 255;--bs-font-sans-serif:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}*,*:before,*:after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}*{box-sizing:border-box}@media only screen and (min-width: 1025px){html{overflow-x:hidden}}:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}img{vertical-align:middle}@charset "UTF-8"</style><link rel="stylesheet" href="styles.998e10766a54a06a.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.998e10766a54a06a.css"></noscript></head>

<body>
  <!-- GTM noscript - only loads if GTM is loaded -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WD8PN39V"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

  <!-- Facebook Pixel noscript -->
  <noscript>
    <img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=908701465440043&ev=PageView&noscript=1"/>
  </noscript>

  <!-- INSTANT LOADING SCREEN - Shows only on homepage first visit -->
  <div class="app-loading" id="app-loading" style="display: none;">
    <div class="app-loading-content">
      <!-- Your actual logo -->
      <img class="app-loading-logo" src="/assets/splogo.webp" alt="Storytime Premium" width="180" height="60">
      <div class="app-loading-text">Oglądaj. Klikaj. Zapamiętuj.</div>
      <div class="app-loading-subtitle">Ładowanie...</div>
      <div class="loading-bar">
        <div class="loading-bar-progress"></div>
      </div>
    </div>

    <!-- Preload hero images - correct one based on device -->
    <img class="hero-preload hero-preload-desktop" src="/assets/hero-desktop.webp" alt="" aria-hidden="true">
    <img class="hero-preload hero-preload-mobile" src="/assets/hero-mobile.webp" alt="" aria-hidden="true">
  </div>

  <app-root></app-root>

  <!-- Loading screen logic - only homepage, only first visit -->
  <script>
    (function() {
      var path = window.location.pathname;
      var isHomepage = (path === '/' || path === '' || path === '/index.html');
      var hasVisited = sessionStorage.getItem('st_visited');
      var loader = document.getElementById('app-loading');

      // Only show on homepage AND only on first visit this session
      if (isHomepage && !hasVisited && loader) {
        loader.style.display = 'flex';
        sessionStorage.setItem('st_visited', 'true');

        // Hide loader when page is ready
        window.addEventListener('load', function() {
          setTimeout(function() {
            loader.classList.add('hidden');
            setTimeout(function() {
              loader.remove();
            }, 300);
          }, 100);
        });

        // Fallback: hide after 5 seconds max (in case load event doesn't fire)
        setTimeout(function() {
          if (loader && loader.parentNode) {
            loader.classList.add('hidden');
            setTimeout(function() {
              if (loader && loader.parentNode) {
                loader.remove();
              }
            }, 300);
          }
        }, 5000);
      } else if (loader) {
        // Not homepage or already visited - remove loader immediately
        loader.remove();
      }
    })();
  </script>
<script src="runtime.d1a6f08ada98d1dc.js" type="module"></script><script src="polyfills.9235a755e281251e.js" type="module"></script><script src="main.101f89085b927ed1.js" type="module"></script>

</body></html>