/* ================================================= */
/* === ORYGINALNY KOD CSS (MOBILE FIRST BASE) === */
/* ================================================= */

body, html {
    margin: 0;
    padding: 0;
    width: 100%; /* Zapewnia pełną szerokość */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Usunęliśmy display: flex i centrowanie, aby strona mogła się przewijać */
    background-color: #f0f2f5; /* Tło dla pulpitu, jeśli sekcje nie wypełniają ekranu */
    overflow-x: hidden; /* Zapobiega globalnemu scrollowaniu na boki */
}

/* Główny kontener symulujący ekran telefonu */
.hero-section {
    width: 100%; /* Pełna szerokość zamiast 393px */
    height: 852px; /* Zachowujemy wysokość pierwszej sekcji */
    max-height: 100vh; /* Opcjonalnie: ogranicz do wysokości ekranu */
    position: relative; /* Kluczowe dla .background-layer */
    overflow: hidden;
    
    /* Usuwamy style symulujące ramkę telefonu */
    /* border: 1px solid #ccc; */
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); */
    
    /* Tło na wypadek, gdyby obraz się nie załadował */
    background-color: #000; 
}

/* Warstwa z obrazem tła */
.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('background-1.png');
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    z-index: 1;

    /* NOWOŚĆ: Efekt Ken Burns (powolne powiększanie tła) */
    animation: kenBurns 15s infinite alternate ease-in-out;
    transform-origin: center center;
}

/* Nakładka z treścią */
.content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2; /* Wyżej niż tło */
    padding: 40px 24px 50px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: white;
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0)); /* Mocniejszy gradient dla czytelności */
}

/* NOWOŚĆ: Ustawienie animacji dla elementów */
.content-overlay h1,
.content-overlay p,
.profile-button {
    /* Ustawiamy początkowy stan (przed animacją) */
    opacity: 0;
    /* Definicja animacji: nazwa, czas, funkcja, opóźnienie, tryb */
    animation: fadeInUp 0.8s ease-out forwards;
}

.content-overlay h1 {
    font-size: 2.3rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    animation-delay: 0.5s; /* NOWOŚĆ: Opóźnienie dla h1 */
}

.content-overlay p {
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0;
    margin-bottom: 12px;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    animation-delay: 0.7s; /* NOWOŚĆ: Opóźnienie dla p */
}

/* Stylizacja przycisku */
.profile-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #E85DA3;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    padding: 16px 24px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    
    /* NOWOŚĆ: Płynne przejścia dla efektów hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    
    /* NOWOŚĆ: Animacja pulsowania (Call to Action) */
    animation-delay: 0.9s; /* Opóźnienie dla przycisku */
    animation: fadeInUp 0.8s ease-out 0.9s forwards, pulseButton 2.5s infinite 1.7s; /* Dwie animacje! */
}

/* NOWOŚĆ: Ulepszony efekt najechania (hover) */
.profile-button:hover {
    background-color: #d64c91;
    /* Lekkie uniesienie i powiększenie */
    transform: scale(1.03) translateY(-3px);
    /* Różowy cień "glow" */
    box-shadow: 0 8px 25px -5px #E85DA3;
    /* Wyłączamy pulsowanie po najechaniu */
    animation-play-state: paused;
}

/* NOWOŚĆ: Efekt wciśnięcia przycisku */
.profile-button:active {
    transform: scale(0.98); /* Lekkie wciśnięcie */
    box-shadow: none; /* Usuwamy cień */
}


/* --- SEKCJA KEYFRAMES (ANIMACJE) --- */

/* NOWOŚĆ: Animacja dla tła (Ken Burns) */
@keyframes kenBurns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08);
    }
}

/* NOWOŚĆ: Animacja dla wjeżdżającej treści */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NOWOŚĆ: Animacja pulsowania dla przycisku */
@keyframes pulseButton {
    0% {
        box-shadow: 0 0 0 0 rgba(232, 93, 163, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(232, 93, 163, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(232, 93, 163, 0);
    }
}

/* KONIEC SEKCJI 1 */

/* === ZAKTUALIZOWANA SEKCJA OPINII Z EFEKTEM "WOW" === */

/* --- Sekcja Opinie --- */

.testimonials-section {
    width: 100%;
    min-height: 245px; 
    background-color: #6A4C7D;
    padding: 30px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    
    border-top: 3px solid #4A59D1;
    border-bottom: 3px solid #4A59D1;
    
    position: relative; 
    z-index: 5;
    
    /* MODYFIKACJA: Dodajemy overflow-x: hidden na głównym kontenerze,
       aby animacje "fadeInUp" nie powodowały bocznego paska przewijania
       przed pojawieniem się elementów. */
    overflow-x: hidden; 
}

.testimonials-title {
    font-size: 1.5rem;
    color: white;
    font-weight: 600;
    text-align: center;
    margin: 0;
    padding: 0 20px;
}

.testimonials-title span {
    margin-left: 8px;
    font-size: 1.25rem;
    
    /* NOWOŚĆ: Animacja pulsowania serca */
    display: inline-block; /* Wymagane dla transformacji */
    animation: pulseHeart 1.5s infinite ease-in-out;
    animation-delay: 1s; /* Małe opóźnienie startu */
}

.testimonials-grid {
    display: flex;
    flex-wrap: nowrap; 
    overflow-x: auto; 
    width: 100%;
    /* MODYFIKACJA: Zwiększamy padding, aby karty z "glow"
       nie były ucinane przy krawędziach */
    padding: 10px 30px 20px 30px; 
    box-sizing: border-box;
    gap: 15px;
    
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.testimonials-grid::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    flex: 0 0 260px; 
    background-color: #1A1C24;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    
    /* NOWOŚĆ: Płynne przejście dla efektu hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* NOWOŚĆ: Animacja pojawiania się karty */
    opacity: 0; /* Na starcie niewidoczna */
    animation: fadeInUp 0.6s ease-out forwards;
}

/* NOWOŚĆ: Opóźnienie animacji dla kolejnych kart (efekt "staggered") */
.testimonial-card:nth-child(1) {
    animation-delay: 0.2s;
}
.testimonial-card:nth-child(2) {
    animation-delay: 0.4s;
}
.testimonial-card:nth-child(3) {
    animation-delay: 0.6s;
}
/* Dodaj więcej, jeśli masz więcej kart */
.testimonial-card:nth-child(4) {
    animation-delay: 0.8s;
}


/* NOWOŚĆ: Efekt "Lift & Glow" po najechaniu myszką */
.testimonial-card:hover {
    transform: translateY(-8px); /* Uniesienie karty */
    box-shadow: 0 8px 25px rgba(74, 89, 209, 0.35); /* Poświata w kolorze ramki */
    cursor: pointer;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
}

.avatar-placeholder {
    width: 45px;
    height: 45px;
    background-color: white;
    border-radius: 50%;
    flex-shrink: 0;
    
    /* NOWOŚĆ: Przejście dla animacji awatara */
    transition: transform 0.3s ease;
}

/* NOWOŚĆ: Obrót awatara przy najechaniu na kartę */
.testimonial-card:hover .avatar-placeholder {
    transform: scale(1.1) rotate(10deg);
}

.testimonial-card p {
    color: #D3D3D3; 
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.notification-banner {
    width: calc(100% - 40px);
    max-width: 350px; 
    background-color: #312630;
    border-radius: 30px;
    padding: 16px 20px;
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    
    /* NOWOŚĆ: Animacja pulsowania banera */
    animation: pulseBanner 2.5s infinite ease-in-out;
}

.notification-banner p {
    color: white;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
}


/* --- NOWA SEKCJA: Definicje Animacji (Keyframes) --- */

/* Animacja pojawiania się kart (używana też w sekcji 1) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animacja pulsowania serca */
@keyframes pulseHeart {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
}

/* Animacja pulsowania banera z notyfikacją */
@keyframes pulseBanner {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    50% {
        transform: scale(1.03); /* Delikatne powiększenie */
        /* Cień w kolorze tła banera dla lepszego efektu */
        box-shadow: 0 6px 20px rgba(49, 38, 48, 0.3); 
    }
}
 

/* Koniec sekcji 2  */

/* === SEKCJA "DLACZEGO WARTO?" (NOWA Z EFEKTAMI "WOW") === */

.features-section {
    width: 100%;
    background-color: #181818;
    box-sizing: border-box;
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
    
    /* MODYFIKACJA: Dodajemy overflow: hidden, aby animacje "wjeżdżania"
       nie powodowały bocznego paska przewijania. */
    overflow-x: hidden; 
}

.features-title {
    color: white;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
    margin-bottom: 30px;
    
    /* NOWOŚĆ: Animacja pojawiania się tytułu */
    opacity: 0; /* Ukryty na starcie */
    animation: slideInFadeDown 0.6s ease-out 0.1s forwards;
    /* Opóźnienie 0.1s */
}

.features-list {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
    
    /* MODYFIKACJA: Usuwamy border-bottom, zastąpimy go animowanym ::after */
    /* border-bottom: 1px solid #3a3a3a; */
    
    padding: 20px 5px; /* Dodajemy mały boczny padding dla efektu hover */
    
    /* NOWOŚĆ: Pozycja dla pseudo-elementu linii */
    position: relative; 
    
    /* NOWOŚĆ: Animacja pojawiania się elementów */
    opacity: 0; /* Ukryty na starcie */
    animation: slideInFadeUp 0.6s ease-out forwards;
    
    /* NOWOŚĆ: Płynne przejście dla efektu hover */
    border-radius: 10px; /* Zaokrąglenie dla tła przy hover */
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* NOWOŚĆ: Animowana linia oddzielająca */
.feature-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%; /* Linia nie zaczyna się od samej krawędzi */
    width: 80%; /* Linia ma 80% szerokości */
    height: 1px;
    background-color: #3a3a3a;
    
    /* Animacja "rysowania" linii */
    transform: scaleX(0); /* Zaczyna od szerokości 0 */
    transform-origin: left; /* Animacja od lewej do prawej */
    animation: wipeIn 0.7s ease-out forwards;
}

/* NOWOŚĆ: Usuwamy linię i padding dla ostatniego elementu */
.feature-item:last-child {
    padding-bottom: 0;
}
.feature-item:last-child::after {
    display: none; /* Ostatni element nie ma linii */
}

.feature-item:first-child {
    padding-top: 0;
}

/* NOWOŚĆ: Opóźnienia animacji (efekt "staggered") */
.feature-item:nth-child(1) { animation-delay: 0.3s; }
.feature-item:nth-child(1)::after { animation-delay: 0.6s; }

.feature-item:nth-child(2) { animation-delay: 0.5s; }
.feature-item:nth-child(2)::after { animation-delay: 0.8s; }

.feature-item:nth-child(3) { animation-delay: 0.7s; }
/* Ostatni nie ma linii, więc nie potrzebuje opóźnienia ::after */


/* NOWOŚĆ: Efekty po najechaniu myszką */
.feature-item:hover {
    transform: scale(1.02); /* Lekkie powiększenie */
    background-color: #222222; /* Subtelne rozjaśnienie tła */
    cursor: pointer;
}

.feature-icon {
    font-size: 2rem;
    flex-shrink: 0;
    min-width: 40px; 
    text-align: center;
    
    /* NOWOŚĆ: Płynne przejście dla animacji ikony */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* NOWOŚĆ: Animacja ikony przy najechaniu na .feature-item */
.feature-item:hover .feature-icon {
    transform: scale(1.25) rotate(-10deg);
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.feature-text h3 {
    color: white;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

.feature-text p {
    color: #BDBDBD;
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 0;
}


/* --- NOWA SEKCJA: Definicje Animacji (Keyframes) --- */

/* Animacja dla tytułu (wjazd z góry) */
@keyframes slideInFadeDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animacja dla elementów listy (wjazd z dołu) */
@keyframes slideInFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animacja dla linii (rysowanie się) */
@keyframes wipeIn {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}
 
/* Koniec Sekcji 3 */

/* === SEKCJA WEZWANIA DO DZIAŁANIA (NOWA) === */

.cta-section {
    width: 100%;
    /* Używamy paddingu zamiast sztywnej wysokości, 
       aby sekcja była elastyczna na różnych ekranach. */
    padding: 35px 20px; 
    box-sizing: border-box;

    /* Tło gradientowe zgodne z wytycznymi */
    background: linear-gradient(to bottom, #3D2541 40%, #AB47BC 100%);
    
    /* Centrowanie zawartości */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Pozycjonowanie (jak w poprzednich sekcjach) */
    position: relative;
    z-index: 5;
}

.cta-text {
    color: white;
    font-size: 1.4rem; /* ~22px */
    font-weight: 600; /* Grubszy tekst */
    margin: 0;
    padding: 0;
}

.cta-subtext {
    color: white;
    font-size: 1.4rem; /* ~22px */
    font-weight: 400; /* Cieńszy tekst */
    margin: 4px 0 25px 0; /* Odstęp góra/dół */
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    
    color: white;
    font-size: 1rem; /* ~16px */
    font-weight: 500;
    
    /* Ciemne tło przycisku z lekkim połyskiem (gradient) */
    background: linear-gradient(180deg, #4a4a4a 0%, #2c2c2c 100%);
    
    /* Zaokrąglenie "pigułki" */
    border-radius: 999px; 
    padding: 14px 30px; /* Wewnętrzne odstępy */
    
    /* Subtelna ramka i cień dla efektu głębi */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}


/* ================================================= */
/* ================================================= */
/* ===         NOWY KOD RESPONSIVE (START)       === */
/* ================================================= */
/* ================================================= */

/* * KROK 1: PIERWSZY BREAKPOINT (TABLET)
 * Stosujemy od 768px wzwyż 
 */
@media (min-width: 768px) {
    
    /* Ograniczamy szerokość tekstu w sekcji hero, aby nie był zbyt długi */
    .content-overlay {
        /* Używamy max-width zamiast 100% width */
        max-width: 600px; 
        /* Centrujemy nakładkę, która ma teraz max-width */
        left: 50%;
        transform: translateX(-50%);
        /* Zwiększamy padding na większym ekranie */
        padding: 40px 40px 50px 40px; 
    }

    .content-overlay h1 {
        font-size: 2.8rem; /* Większy tekst na tablecie */
    }

    /* Zwiększamy bazową wielkość kart opinii */
    .testimonial-card {
        flex: 0 0 300px; /* Trochę szersze karty */
    }

    /* Ograniczamy szerokość listy "dlaczego warto" */
    .features-list {
        max-width: 600px;
    }

    /* Ograniczamy szerokość tekstu w CTA */
    .cta-text, .cta-subtext {
        max-width: 600px;
    }
}


/* * KROK 2: DRUGI BREAKPOINT (DESKTOP)
 * Stosujemy od 1200px wzwyż
 */
@media (min-width: 1200px) {
    
    /* Zwiększamy wysokość hero na dużych ekranach */
    .hero-section {
        height: 900px; 
    }

    /* Dalsze ograniczenie tekstu hero dla czytelności */
    .content-overlay {
        max-width: 750px;
        bottom: 10%; /* Podnosimy tekst nieco wyżej */
    }

    .content-overlay h1 {
        font-size: 3.5rem; /* Jeszcze większy tekst */
    }
    .content-overlay p {
        font-size: 1.3rem;
    }
    /* Przycisk nie musi być na 100% szerokości */
    .profile-button {
        max-width: 400px; 
        margin: 0 auto; /* Centrujemy go w .content-overlay */
    }

    /* === ZMIANA UKŁADU SEKCJI OPINII (z scroll na grid) === */
    .testimonials-section {
        padding: 60px 40px; /* Więcej oddechu */
    }
    
    .testimonials-grid {
        /* Wyłączamy scrollowanie i zmieniamy układ na siatkę */
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 kolumny */
        overflow-x: visible; /* Wyłączamy scroll */
        
        /* Centrujemy siatkę na stronie */
        width: 100%;
        max-width: 900px; /* (np. 2 karty po 400px + odstęp) */
        margin: 0 auto;
        
        /* Resetujemy paddingi potrzebne dla scrolla na mobilce */
        padding-left: 0;
        padding-right: 0;
    }

    .testimonial-card {
        flex: auto; /* Resetujemy flex-basis z mobilki */
        width: 100%; /* Grid zarządza teraz szerokością */
    }

    /* === ZMIANA UKŁADU SEKCJI "DLACZEGO WARTO?" (z listy na grid) === */
    .features-section {
        padding: 60px 40px;
    }
    
    .features-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 kolumny */
        gap: 30px;
        max-width: 1200px; /* Szeroki kontener na 3 elementy */
    }

    .feature-item {
        /* Resetujemy paddingi i obramowania z mobilki */
        padding: 20px;
        border-bottom: none; 
    }
    /* Ukrywamy animowane linie, bo nie pasują do układu grid */
    .feature-item::after {
        display: none; 
    }
    .feature-item:last-child,
    .feature-item:first-child {
        padding: 20px; /* Ujednolicamy padding */
    }

    /* === Powiększenie tekstów w sekcji CTA === */
    .cta-section {
        padding: 60px 40px;
    }
    .cta-text {
        font-size: 1.8rem;
    }
     .cta-subtext {
        font-size: 1.8rem;
    }
    .cta-button {
        padding: 16px 36px;
        font-size: 1.1rem;
    }
}


/* * KROK 3: OPCJONALNIE (DUŻY DESKTOP 1600px+ dla 1920px)
 * Stosujemy od 1600px wzwyż
 */
@media (min-width: 1600px) {

    /* Na bardzo dużych ekranach, sekcja hero może zająć całą wysokość */
    .hero-section {
        height: 100vh; 
    }
    
    .content-overlay {
        max-width: 850px;
    }

    /* Zmieniamy układ opinii na 4 kolumny */
    .testimonials-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1600px; /* Dostosowujemy max-width do 4 kart */
    }

    /* Kontener "Dlaczego warto" też może być szerszy */
    .features-list {
        max-width: 1500px;
        gap: 40px;
    }

    .features-title {
        font-size: 2rem;
    }

    .background-layer {
        background-image: url('background-1.png');
    }
}

/* ================================================= */
/* ===          NOWY KOD RESPONSIVE (KONIEC)     === */
/* ================================================= */