@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;700&family=Lato:wght@400;700&display=swap');
:root {
    --header-bg: #ffffff;
    --header-bg-mobile: #ffffff;
    --header-bg-sticky: #f5f5f5;
    --header-padding: 20px;
    --header-padding-mobile: 20px;
    --logo-height-desktop: 50px;
    --logo-height-desktop-sticky: 40px;
    --logo-height-mobile: 40px;
    --hamburger-bg: #000000;
    --header-height: auto;
}
/* ================= OGÓLNE ================= */
body, p {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Exo', sans-serif;
    font-weight: 700;
    margin: 0;
}
/* ================= SEKCJE FULLSCREEN ================= */
.fullscreen-section {
    min-height: 100vh;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 20px 20%;
}
/* ================= SEKCJA 1 ================= */
.section-1 {
    background: #fff; /* białe tło */
    color: #000; /* czarny tekst */
    padding-top: calc(var(--header-height) + 1rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
/* Górny tekst powitalny */
.intro-text {
    text-align: center;
    font-weight: 700;
    font-size: clamp(1rem, 4vw, 2rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    z-index: 2;
}
/* Łapka */
.wave {
    font-size: 3rem;
    display: inline-block;
    animation: wave-hand 1s ease-in-out 1;
    transform-origin: 70% 70%;
}
@keyframes wave-hand {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-8deg); }
    45% { transform: rotate(14deg); }
    60% { transform: rotate(-4deg); }
    75% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}
/* Efekt pisania */
#typed-text {
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid #000;
    animation: blink-cursor 0.7s infinite;
}
@keyframes blink-cursor {
    0%, 100% { border-color: #000; }
    50% { border-color: transparent; }
}
/* Dolny lewy nagłówek */
.bottom-left {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 1;
}
/* H1 i H3 responsywne */
.bottom-left h1 {
    font-size: clamp(1rem, 5vw, 3rem);
    font-weight: 700;
    opacity: 0;
    transform: translateX(-50px);
    animation: fadeInLeft 0.6s ease forwards;
}
.bottom-left h3 {
    font-size: clamp(1rem, 3.5vw, 2rem);
    font-weight: 400;
    opacity: 0;
    transform: translateX(-50px);
    animation: fadeInLeft 0.6s ease forwards 0.3s;
}
/* Animacja wjazdu z fade-in */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* ================= KOLEJNE SEKCJE ================= */
.section-2 { background: #e0e0e0; }
.section-3 { background: #d0d0d0; }
.section-4 { background: #c0c0c0; }
.section-5 { background: #b0b0b0; }
/* ================= RESPONSYWNOŚĆ ================= */
@media (max-width: 1200px) {
    .fullscreen-section {
        padding: 20px 15%;
    }
}
@media (max-width: 768px) {
    .fullscreen-section {
        padding: 20px 10%;
    }
}
@media (max-width: 480px) {
    .fullscreen-section {
        padding: 20px 2rem;
    }
    .intro-text {
        font-size: 1rem;
    }
    .bottom-left h1 {
        font-size: 1rem;
    }
    .bottom-left h3 {
        font-size: 1rem;
    }
}