:root {
    --primary-color: #7B1FA2; /* Główny fiolet */
    --primary-color-dark: #5a1773; /* Ciemniejszy fiolet */
    --primary-color-light: #e9d6f0; /* Jasny fiolet */
    --secondary-color: #ffffff; /* Białe tło dla czystości */
    --background-color: #f9f9f9; /* Bardzo jasnoszare tło strony */
    --text-color: #444; /* Ciemniejszy szary dla tekstu */
    --text-color-light: #666; /* Jaśniejszy szary dla opisów */
    --light-text-color: #ffffff; /* Biały tekst na ciemnym tle */
    --border-color: #e0e0e0; /* Jasny kolor obramowania */
    --font-family: 'Poppins', sans-serif;
    --container-width: 1100px; /* Nieco szerszy kontener */
    --breakpoint-md: 768px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --border-radius: 8px; /* Zaokrąglenia */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Ustawienie bazowej wielkości czcionki */
}

body {
    font-family: var(--font-family);
    line-height: 1.7; /* Zwiększenie interlinii */
    color: var(--text-color);
    background-color: var(--background-color); /* Użycie jaśniejszego tła */
    -webkit-font-smoothing: antialiased; /* Poprawa renderowania czcionek */
    -moz-osx-font-smoothing: grayscale;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color-dark);
}

h1, h2, h3, h4, h5, h6 { /* Dodane pozostałe nagłówki */
    font-weight: 600;
    line-height: 1.3; /* Dostosowanie interlinii nagłówków */
    margin-bottom: 1.25rem; /* Dostosowanie marginesu */
    color: #333; /* Ciemniejszy kolor dla nagłówków */
}

h1 {
    font-size: 2.8rem; /* Nieco większy H1 */
    font-weight: 700; /* Grubszy H1 */
}

h2 {
    font-size: 2.2rem;
}

h3 {
    font-size: 1.6rem;
}

p {
    margin-bottom: 1.25rem; /* Zwiększenie marginesu akapitów */
    color: var(--text-color-light); /* Jaśniejszy kolor dla P */
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem; /* Zwiększenie paddingu kontenera */
}

/* Header / Nav */
header {
    background-color: var(--secondary-color);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 0; /* Zwiększenie paddingu headera */
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color); /* Delikatna linia oddzielająca */
}

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

header .logo {
    font-size: 1.9rem; /* Nieco większe logo */
    font-weight: 700;
    color: var(--primary-color);
}

header ul {
    display: flex;
    align-items: center; /* Wyśrodkowanie linków pionowo */
}

header ul li {
    margin-left: 2rem; /* Zwiększenie odstępu między linkami */
}

header ul li a {
    font-weight: 500; /* Lżejsza waga dla linków */
    padding: 0.5rem 0.75rem;
    color: var(--text-color);
    position: relative;
    transition: color 0.3s ease;
}

header ul li a::after { /* Subtelne podkreślenie przy najechaniu */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

header ul li a:hover,
header ul li a.active { /* Dodanie klasy 'active' dla bieżącej strony */
    color: var(--primary-color);
}

header ul li a:hover::after {
    width: 100%;
}

/* Hero Section */
#hero {
    background: linear-gradient(to bottom right, var(--primary-color), var(--primary-color-dark)); /* Gradient */
    color: var(--light-text-color);
    padding: 6rem 2rem; /* Więcej paddingu */
    text-align: center;
    border-bottom: 5px solid var(--primary-color-light); /* Akcent na dole */
}

#hero h1 {
    margin-bottom: 1rem;
    color: var(--light-text-color); /* Biały H1 */
    font-size: 3.2rem; /* Większy H1 w Hero */
}

#hero p {
    font-size: 1.2rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9); /* Lekko przezroczysty biały */
    max-width: 700px; /* Ograniczenie szerokości tekstu */
    margin: 0 auto 2rem auto; /* Wyśrodkowanie */
}

/* Możliwość dodania przycisku */
.cta-button {
    display: inline-block;
    background-color: var(--light-text-color);
    color: var(--primary-color);
    padding: 0.8rem 2rem;
    border-radius: 50px; /* Zaokrąglony przycisk */
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.cta-button:hover {
    background-color: var(--primary-color-light);
    color: var(--primary-color-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}


/* Sections */
section {
    padding: 4rem 0; /* Zwiększenie paddingu sekcji */
}

section:nth-of-type(odd):not(#hero) { /* Lekkie tło dla co drugiej sekcji */
     background-color: var(--secondary-color);
}


section h2 {
    text-align: center;
    margin-bottom: 3rem; /* Większy margines pod H2 */
    color: var(--primary-color);
}

/* Features Section */
#features {
     background-color: var(--secondary-color); /* Białe tło dla sekcji funkcji */
}

#features .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Minimalna szerokość 280px */
    gap: 2rem; /* Większy odstęp */
    text-align: center;
}

#features .feature-item {
    background-color: #fff; /* Chociaż tło sekcji jest białe, to dla pewności */
    padding: 2rem; /* Więcej paddingu */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md); /* Wyraźniejszy cień */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color); /* Delikatne obramowanie */
}

#features .feature-item:hover {
    transform: translateY(-8px); /* Większe uniesienie */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); /* Mocniejszy cień przy hover */
}

/* Można dodać ikony - wymaga dodania HTML np. z Font Awesome */
/*
#features .feature-item .icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
*/

#features .feature-item h3 {
    color: var(--primary-color);
    margin-bottom: 0.75rem;
    font-size: 1.4rem; /* Dostosowanie rozmiaru */
}

#features .feature-item p {
    font-size: 0.95rem; /* Nieco mniejszy tekst opisu */
    color: var(--text-color-light);
}


/* Premium Section */
#premium {
    background-color: var(--primary-color-light); /* Jasnofioletowe tło */
    text-align: center;
    border-radius: var(--border-radius); /* Zaokrąglenie całej sekcji */
    margin: 2rem auto; /* Marginesy góra/dół */
    padding: 3rem 2rem; /* Dostosowanie paddingu */
    max-width: calc(var(--container-width) - 4rem); /* Dopasowanie do kontenera */
}

#premium h2 {
    color: var(--primary-color-dark);
}
#premium p {
    color: var(--primary-color-dark);
    opacity: 0.9;
}


/* Support Links Section */
#support-links {
    text-align: center;
}
#support-links h2 {
     margin-bottom: 1.5rem;
}


/* Footer */
footer {
    background-color: #222; /* Ciemniejsze tło stopki */
    color: #ccc; /* Jaśniejszy tekst w stopce */
    text-align: center;
    padding: 2.5rem 0; /* Więcej paddingu */
    margin-top: 4rem; /* Większy odstęp od treści */
    font-size: 0.9rem;
}

footer p {
    margin-bottom: 1rem; /* Zwiększony margines */
    color: #aaa; /* Jeszcze jaśniejszy tekst dla copyright */
}

footer nav a {
    color: #ddd; /* Kolor linków w stopce */
    margin: 0 0.75rem; /* Nieco większy odstęp */
    transition: color 0.3s ease;
}

footer nav a:hover {
    color: var(--light-text-color); /* Biały przy najechaniu */
}

/* Styl dla stron tekstowych (Polityka, Warunki) */
.text-content {
    background-color: var(--secondary-color);
    padding: 2.5rem 3rem; /* Więcej paddingu */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin: 2rem auto; /* Margines góra/dół i wyśrodkowanie */
    max-width: 900px; /* Ustalenie szerokości dla lepszej czytelności */
    border: 1px solid var(--border-color);
}

.text-content h1 {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--primary-color);
}

.text-content h2 {
    text-align: left;
    font-size: 1.7rem; /* Nieco większe H2 */
    color: var(--primary-color);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--primary-color-light); /* Grubsza linia */
    padding-bottom: 0.75rem;
}

.text-content p,
.text-content ul,
.text-content li {
    margin-bottom: 1.25rem;
    line-height: 1.8; /* Zwiększona interlinia dla tekstu prawnego */
    color: var(--text-color); /* Ciemniejszy tekst dla czytelności */
}

.text-content ul {
    list-style: disc;
    padding-left: 1.5rem; /* Dodanie wcięcia dla list */
}

 .text-content li {
    margin-bottom: 0.75rem;
}

.text-content strong {
    font-weight: 600;
    color: #333;
}

/* Dodatkowe style dla strony FAQ */
#faq-content {
    max-width: 900px; /* Podobnie jak text-content */
    margin: 2rem auto;
}

#faq-content h1 {
    text-align: center;
    margin-bottom: 3rem;
}

#faq-content h2 { /* Wspólne z .text-content, ale może wymagać dostosowań */
    font-size: 1.7rem;
    color: var(--primary-color);
    margin-top: 3rem; /* Większy odstęp między grupami pytań */
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--primary-color-light);
    padding-bottom: 0.75rem;
}

.faq-item {
    background-color: var(--secondary-color);
    margin-bottom: 1.25rem; /* Zwiększony odstęp */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    overflow: hidden; /* Aby zaokrąglenie działało poprawnie */
    transition: box-shadow 0.3s ease;
}
.faq-item:hover {
    box-shadow: var(--shadow-md);
}


.faq-item summary {
    padding: 1.25rem 1.5rem; /* Więcej paddingu */
    font-weight: 600;
    cursor: pointer;
    outline: none;
    display: list-item;
    list-style: none;
    position: relative;
    padding-left: 3.5em; /* Więcej miejsca na ikonę */
    color: #333; /* Ciemniejszy kolor pytania */
    transition: background-color 0.3s ease;
}
.faq-item summary:hover {
    background-color: #f5f5f5; /* Lekkie tło przy najechaniu */
}


.faq-item summary::before { /* Zmieniona ikona +/- */
     content: '+';
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: monospace; /* Lepsze dla + / - */
     font-weight: bold;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background-color: var(--primary-color-light);
     color: var(--primary-color-dark);
     font-size: 1.4em;
     position: absolute;
     left: 1.5rem; /* Dopasowanie pozycji */
     top: 50%;
     transform: translateY(-50%) rotate(0deg); /* Dodanie rotacji */
     transition: transform 0.3s ease, background-color 0.3s ease;
}

.faq-item[open] summary {
    background-color: #f0f0f0; /* Lekkie tło dla otwartego pytania */
    border-bottom: 1px solid var(--border-color); /* Linia oddzielająca */
}

 .faq-item[open] summary::before {
     content: '−'; /* Minus */
     transform: translateY(-50%) rotate(180deg); /* Obrót ikony */
     background-color: var(--primary-color);
     color: var(--light-text-color);
}

/* Usunięcie domyślnej strzałki */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; } /* Dla Firefox */


.faq-item p {
    padding: 1.5rem; /* Zwiększony padding odpowiedzi */
    padding-left: 3.5em; /* Dopasowanie wcięcia */
    margin: 0; /* Usunięcie marginesów domyślnych P wewnątrz details */
    color: var(--text-color-light);
    font-size: 0.95rem;
    line-height: 1.7;
}

.contact-prompt {
    margin-top: 3rem;
    font-weight: 500; /* Lżejsza waga */
    text-align: center;
    color: var(--text-color);
}

/* Dodatkowe style dla strony Kontakt */
#contact-form {
    max-width: 800px; /* Nieco węższy kontener dla formularza */
    margin: 2rem auto;
}
#contact-form h1 {
    text-align: center;
    margin-bottom: 1rem;
}
#contact-form > p { /* Główny opis pod H1 */
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.1rem;
}


.contact-form-element {
    background-color: var(--secondary-color);
    padding: 2.5rem; /* Zwiększony padding */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    margin-top: 2rem;
     border: 1px solid var(--border-color);
}

.form-group {
    margin-bottom: 1.75rem; /* Zwiększony odstęp */
}

.form-group label {
    display: block;
    margin-bottom: 0.6rem; /* Zwiększony odstęp labelki */
    font-weight: 500; /* Lżejsza waga labelki */
    color: var(--text-color);
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.9rem 1rem; /* Więcej paddingu w polach */
    border: 1px solid var(--border-color);
    border-radius: 6px; /* Mniejsze zaokrąglenie dla pól */
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff; /* Lekko inne tło pola */
}

.form-group textarea {
    resize: vertical;
    min-height: 120px; /* Minimalna wysokość pola tekstowego */
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(123, 31, 162, 0.15); /* Delikatny glow przy focusie */
}

.btn-submit {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--light-text-color);
    padding: 0.9rem 2rem; /* Większy padding przycisku */
    border: none;
    border-radius: 50px; /* Zaokrąglony przycisk */
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    width: 100%; /* Przycisk na całą szerokość */
    margin-top: 1rem; /* Odstęp nad przyciskiem */
}

.btn-submit:hover {
    background-color: var(--primary-color-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.contact-info {
    margin-top: 3.5rem; /* Większy odstęp */
    text-align: center;
    padding: 2rem; /* Zwiększony padding */
    background-color: var(--primary-color-light);
    border-radius: var(--border-radius);
}

.contact-info h2 {
    color: var(--primary-color-dark);
    margin-bottom: 1rem;
    font-size: 1.5rem; /* Dostosowanie H2 w info */
}
.contact-info p {
    color: var(--primary-color-dark);
    opacity: 0.9;
}


/* Responsywność */
@media (max-width: var(--breakpoint-md)) {
    html { font-size: 15px; } /* Lekkie zmniejszenie czcionki bazowej */

    h1 { font-size: 2.2rem; }
    #hero h1 { font-size: 2.5rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.4rem; }

    .container { padding: 0 1.5rem; } /* Mniejszy padding na mobilkach */

    header nav {
        flex-direction: column;
        align-items: center;
    }

    header .logo {
        margin-bottom: 1.5rem; /* Większy odstęp logo */
    }

    header ul {
        padding-left: 0;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }

    header ul li {
        margin: 0.5rem 0.75rem; /* Mniejsze odstępy linków */
    }

    #hero {
        padding: 4rem 1.5rem; /* Mniejszy padding hero */
    }

    section {
        padding: 3rem 0; /* Mniejszy padding sekcji */
    }

    #features .feature-grid {
        grid-template-columns: 1fr; /* Jedna kolumna na mobilkach */
        gap: 1.5rem;
    }

    .text-content { padding: 2rem 1.5rem; }
    #faq-content { padding: 0 1.5rem; } /* Usunięcie bocznego paddingu, bo kontener go ma */
    #contact-form { padding: 0 1.5rem; }

    .contact-form-element { padding: 2rem; } /* Mniejszy padding formularza */

    .btn-submit { width: 100%; } /* Upewnienie się, że przycisk jest pełnej szerokości */
}

/* Poprawki dla małych ekranów - dalsze */
@media (max-width: 480px) {
    html { font-size: 14px; } /* Jeszcze mniejsza czcionka */

    header ul li { margin: 0.5rem 0.5rem; }
    header ul li a { padding: 0.3rem 0.5rem; }

    .text-content { padding: 1.5rem 1rem; }
    .contact-form-element { padding: 1.5rem; }
    .faq-item summary { padding-left: 3em; } /* Dopasowanie ikony FAQ */
    .faq-item summary::before { left: 1rem; }
    .faq-item p { padding-left: 3em; }
}