html, body {
            height: 100%; /* Ustawiamy sztywną wysokość bazową */
            margin: 0;
            padding: 0;
            /* Ważne na mobilkach: blokuje przewijanie, żeby strona nie "pływała" góra-dół */
            overflow: hidden;
        }


body {
    
                position: relative;
            /* FLEXBOX odpowiada za centrowanie */
            display: flex;
            justify-content: center; /* Poziomo (na boki) */
            align-items: center;     /* Pionowo (góra-dół) */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #1a1a1a;
            background-repeat: no-repeat;            color: #f0f0f0;
            font-family: 'Playfair Display', serif;
            font-size: 150px;
            font-weight: 700;
            margin: 0;
            overflow: hidden;}
        
        
        
        body::before {
            content: ""; /* Konieczne do wyświetlenia elementu */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Ujemny Z-index przesuwa ten element POD tekst */
            z-index: -1;

            /* === USTAWIENIA ZDJĘCIA === */
            /* Wstaw tutaj link do swojego zdjęcia */
            background-image: url('tlo.jpg'); /* <--- TUTAJ WSTAW LINK */
            
            background-size: cover; /* Skaluje zdjęcie, by wypełniło ekran */
            background-position: center; /* Centruje zdjęcie */
            background-repeat: no-repeat;

            /* === EFEKT ROZMYCIA === */
            /* Zmień wartość px, żeby zwiększyć/zmniejszyć blur */
            filter: blur(8px);
            
            /* Lekkie powiększenie (scale), aby ukryć rozmyte krawędzie przy brzegu ekranu */
            transform: scale(1.05);
        }
        /* Główny kontener */
        
        /* Główny kontener tekstu */
        .container {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: baseline;
            text-shadow: 3px 3px 6px rgba(0,0,0, 0.8);
            /* Zabezpieczenie: kontener nigdy nie będzie szerszy niż ekran */
            max-width: 100%;
        }

       /* --- STOPKA (EMAIL + INSTAGRAM) --- */
        .footer-container {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            
            /* Ustawiamy elementy obok siebie */
            display: flex;
            align-items: center;
            /* Odstęp między emailem a ikoną */
            gap: 15px; 

            /* Wspólne style dla tekstu i ikony */
            font-size: 18px;
            font-weight: 400;
            letter-spacing: 1px;
            white-space: nowrap;
             /* Kolor bazowy (lekko przezroczysty) */
            color: rgba(240, 240, 240, 0.7);
        }

        /* Style samego tekstu emaila */
        .footer-text {
            /* dziedziczy style z kontenera */
        }

        /* Style linku z ikoną */
        .footer-icon-link {
            display: flex;
            align-items: center;
            text-decoration: none; /* Usuwa podkreślenie linku */
            color: inherit; /* Dziedziczy kolor z kontenera */
            /* Płynne przejście koloru po najechaniu */
            transition: color 0.3s ease, transform 0.3s ease;
        }
/* --- KLUCZOWE: Style samej ikony SVG (Naprawia wielkość) --- */
        .footer-icon-link svg {
            width: 20px;  /* Sztywna szerokość */
            height: 20px; /* Sztywna wysokość */
            fill: currentColor; /* Kolor taki sam jak tekst */
        }

        /* Efekt po najechaniu myszką na ikonę */
        .footer-icon-link:hover {
            color: #ffffff; /* Jaśniejszy biały */
            transform: scale(1.1); /* Lekkie powiększenie */
        }

        /* Media Query - dostosowanie stopki na telefonach */
        @media (max-width: 768px) {
            .footer-container {
                font-size: 14px;
                bottom: 30px;
                gap: 10px;
            }
            /* Zmniejszamy ikonę na telefonie */
            .footer-icon-link svg {
                width: 16px;
                height: 16px;
            }
        }



        /* --- CSS ANIMACJI --- */
        .letter-slot {
            position: relative;
            display: inline-block;
            height: 1.2em;
            line-height: 1.2em;
            overflow: hidden;
            opacity: 0;
            transform: translateY(-20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .letter-slot.appeared {
            opacity: 1;
            transform: translateY(0);
        }

        .inner-slider {
            display: flex;
            flex-direction: column;
            transform: translateY(-50%);
            animation-name: oscillateDown;
            animation-duration: 2s; 
            animation-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-delay: 1.5s;
            animation-fill-mode: both;
        }

        @keyframes oscillateDown {
            0%, 20% { transform: translateY(-50%); }
            80%, 100% { transform: translateY(0%); }
        }
        
        .letter-slot.static .inner-slider {
            animation: none !important;
            transform: translateY(-50%);
        }
        
        .inner-slider span {
            display: block;
            height: 1.2em;
            text-align: center;
            min-width: 0.6em;
        }