/* Podstawowe ustawienia strony */
:root {
    /* Zmienne kolorów ułatwiają ponowne używanie tych samych barw. */
    --bg: #f7f8fa;
    --text: #1f2933;
    --muted: #52616b;
    --primary: #2563eb;
    --surface: #ffffff;
    --border: #d9e2ec;
}

/* Dzięki temu padding i border wliczają się w szerokość elementu. */
* {
    box-sizing: border-box;
}

/* Główne ustawienia całej strony. */
body {
    /* Usuwa domyślny margines przeglądarki. */
    margin: 0;
    /* Ustawia prostą czcionkę bez dodatkowych zależności. */
    font-family: Arial, sans-serif;
    /* Zwiększa odstęp między liniami tekstu. */
    line-height: 1.6;
    /* Ustawia podstawowy kolor tekstu i tła. */
    color: var(--text);
    background: var(--bg);
}

/* Podstawowy wygląd linków. */
a {
    /* Link dziedziczy kolor po elemencie, w którym się znajduje. */
    color: inherit;
    /* Usuwa domyślne podkreślenie linków. */
    text-decoration: none;
}

/* Górny pasek strony z menu. */
.site-header {
    /* Header zostaje widoczny przy przewijaniu strony. */
    position: sticky;
    top: 0;
    /* Jasne tło oddziela menu od treści. */
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border);
}

/* Układ nawigacji w headerze. */
.nav {
    /* Ogranicza szerokość treści, żeby nie rozciągała się za bardzo. */
    max-width: 1100px;
    /* Wyśrodkowuje nawigację w poziomie. */
    margin: 0 auto;
    /* Dodaje odstęp wewnątrz paska. */
    padding: 16px 24px;
    /* Ustawia logo i menu obok siebie. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo tekstowe w menu. */
.logo {
    /* Pogrubia nazwę strony. */
    font-weight: 700;
}

/* Lista linków w menu. */
.menu {
    /* Usuwa domyślne odstępy listy. */
    margin: 0;
    padding: 0;
    /* Układa linki menu w jednym rzędzie. */
    display: flex;
    gap: 20px;
    /* Usuwa kropki listy. */
    list-style: none;
    color: var(--muted);
}

/* Kolor linku po najechaniu kursorem. */
.menu a:hover {
    color: var(--primary);
}

/* Główna sekcja powitalna. */
.hero {
    /* Duży odstęp tworzy wyraźny pierwszy ekran. */
    padding: 96px 24px;
    /* Delikatne tło wyróżnia sekcję hero. */
    background: linear-gradient(135deg, #eef4ff, #ffffff);
}

/* Wspólne ograniczenie szerokości dla hero i sekcji. */
.hero-content,
.section {
    max-width: 1100px;
    margin: 0 auto;
}

/* Największy nagłówek w hero. */
.hero h1 {
    /* Ustawia odstęp pod nagłówkiem. */
    margin: 0 0 16px;
    /* Dopasowuje rozmiar tekstu do szerokości ekranu. */
    font-size: clamp(2.4rem, 8vw, 4.5rem);
    line-height: 1.1;
}

/* Tekst opisowy w hero. */
.hero p {
    /* Ogranicza długość linii, żeby tekst czytało się wygodniej. */
    max-width: 620px;
    color: var(--muted);
}

/* Mały tekst nad głównym nagłówkiem. */
.eyebrow {
    margin: 0 0 12px;
    /* Pogrubienie i kolor podkreślają etykietę. */
    font-weight: 700;
    color: var(--primary);
    /* Zamienia litery na wielkie. */
    text-transform: uppercase;
    font-size: 0.8rem;
}

/* Prosty link wyglądający jak przycisk. */
.button {
    /* Pozwala ustawić padding i margines jak w przycisku. */
    display: inline-block;
    margin-top: 16px;
    /* Ustawia wielkość i kolor przycisku. */
    padding: 12px 18px;
    color: #ffffff;
    background: var(--primary);
    border-radius: 6px;
    font-weight: 700;
}

/* Standardowe odstępy dla sekcji treści. */
.section {
    padding: 64px 24px;
}

/* Nagłówki sekcji. */
.section h2 {
    margin: 0 0 16px;
    font-size: 2rem;
}

/* Akapit bezpośrednio pod nagłówkiem sekcji. */
.section > p {
    /* Ogranicza szerokość dłuższego tekstu. */
    max-width: 760px;
    color: var(--muted);
}

/* Kafelki z podstawowymi informacjami */
.cards {
    /* Grid tworzy trzy równe kolumny. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Odstępy między kafelkami. */
    gap: 20px;
    margin-top: 24px;
}

/* Pojedynczy kafelek. */
.card {
    /* Padding dodaje przestrzeń wewnątrz kafelka. */
    padding: 24px;
    /* Tło i obramowanie oddzielają kafelek od strony. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* Nagłówek w kafelku. */
.card h3 {
    margin: 0 0 8px;
}

/* Krótki opis w kafelku. */
.card p {
    margin: 0;
    color: var(--muted);
}

/* Stopka strony. */
.site-footer {
    /* Dodaje przestrzeń i wyśrodkowuje tekst. */
    padding: 28px 24px;
    text-align: center;
    /* Oddziela stopkę od reszty strony. */
    color: var(--muted);
    border-top: 1px solid var(--border);
    background: var(--surface);
}

/* Reguły dla mniejszych ekranów. */
@media (max-width: 700px) {
    /* Na telefonie logo i menu układają się jedno pod drugim. */
    .nav,
    .menu {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Zmniejsza wysokość sekcji hero na małych ekranach. */
    .hero {
        padding: 72px 24px;
    }

    /* Kafelki przechodzą z trzech kolumn do jednej. */
    .cards {
        grid-template-columns: 1fr;
    }
}