/* Komentarz: Globalne resetowanie i ustawienia podstawowe */
:root {
    /* Paleta kolorów w stylu Finansowym/Księgowym: Profesjonalne i bezpieczne */
    --color-primary-dark: #003366;    /* Głęboki Granat - Symbol profesjonalizmu (jak w bankowości/księgowości) */
    --color-secondary-light: #F4F7F9; /* Jasna, czysta Szarość/Biel dla tła bloków */
    --color-accent: #00A86B;         /* Szmaragdowa Zieleń - Akcent na Zyski/Wzrost */
    --color-text-dark: #2C3E50;       /* Ciemny tekst */
    --color-text-light: #FFFFFF;      /* Jasny tekst */
    --color-border: #DCDCDC;          /* Jasna linia podziału */

    /* Systemowe Czcionki (Bez Google Fonts) */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body {
    /* Ustawienie maksymalnej szerokości i centrowanie */
    max-width: 1090px;
    margin: 0 auto;
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-secondary-light);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

/* Stylizacja nagłówków */
h1, h2, h3 {
    margin-bottom: 0.8em;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 2.5em;
    color: var(--color-accent);
}

h2 {
    font-size: 2em;
    color: var(--color-primary-dark);
    text-align: center;
    margin-top: 1.5em;
}

p {
    margin-bottom: 1em;
}

/* Stylizacja linii podziału */
hr {
    border: none;
    border-top: 5px solid var(--color-border);
    margin: 2em 0;
}

/* --- Sekcje blokowe i kontrastowe kolory --- */

section {
    padding: 3em 5%;
    /* Domyślne tło dla większości sekcji */
    background-color: var(--color-text-light);
}

/* Blok 1: Oferta - Kontrastowe tło i minimalna wysokość */
.block-1 {
    background-color: var(--color-primary-dark); /* Granatowe tło */
    color: var(--color-text-light); /* Jasny tekst na ciemnym tle */
    min-height: 470px; /* Minimalna wysokość zgodnie z wymaganiem */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.block-1 h1 {
    color: var(--color-accent); /* Zielony nagłówek na Granacie */
    border-bottom: 3px solid var(--color-accent);
    padding-bottom: 0.2em;
    margin-bottom: 0.5em;
}

.block-1 p {
    max-width: 80%;
}

/* Blok 3: Produkty + Artykuł - Jasne tło */
.block-3 {
    background-color: var(--color-secondary-light);
    padding-bottom: 5em;
}

/* Blok 4: Specjaliści i 4.1 Działalność - Kontrastowe, ciemniejsze tło */
.block-4, .block-4-1 {
    background-color: var(--color-text-light);
}

/* Blok 2: Formularz - Podkreślenie kontrastem */
.block-2 {
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
    text-align: center;
}

.block-2 h2 {
    color: var(--color-accent);
}

/* Blok 5: Recenzje i 5.2 Formularz opinii - Jasne tło, lekkie cieniowanie */
.block-5, .block-5-2 {
    background-color: var(--color-secondary-light);
}

/* Blok 6: Adres i Mapa - Podkreślony wizualnie */
.block-6 {
    background-color: var(--color-text-light);
    text-align: center;
}

/* --- Stylizacja Artykułu (Blok 3) --- */

.article-content {
    background-color: var(--color-text-light);
    padding: 2em;
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-primary-dark); /* Wyraźne wyróżnienie artykułu */
    margin-top: 2em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.article-content h3 {
    color: var(--color-primary-dark);
    font-size: 1.4em;
}

/* --- Stylizacja Produktów (Blok 3) --- */

.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 2em;
}

.product {
    background-color: var(--color-text-light);
    padding: 1.5em;
    border: 1px solid var(--color-border);
    border-top: 5px solid var(--color-accent);
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.product:hover {
    transform: translateY(-5px);
}

.product h3 {
    font-size: 1.1em;
    margin-bottom: 0.5em;
    color: var(--color-primary-dark);
}

.price {
    font-weight: 700;
    color: var(--color-accent);
    display: block;
    margin-top: 0.5em;
    font-style: italic;
}

/* --- Stylizacja Specjalistów (Blok 4) --- */

.specialist-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    margin-top: 2em;
    text-align: center;
}

.specialist {
    padding: 1.5em;
    background-color: var(--color-secondary-light);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.specialist h3 {
    color: var(--color-primary-dark);
    font-size: 1.2em;
    margin-bottom: 0.3em;
}

/* --- Stylizacja Recenzji (Blok 5) --- */

.review-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 2em;
}

.review {
    background-color: var(--color-text-light);
    padding: 2em;
    border-radius: 8px;
    border-left: 5px solid var(--color-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.reviewer {
    text-align: right;
    font-style: italic;
    margin-top: 1em;
    color: var(--color-primary-dark);
}

/* --- Stylizacja Formularzy i Przycisków (Bloki 1, 2, 5.2) --- */

/* Ogólne style dla przycisków */
.btn, button[type="submit"] {
    display: inline-block;
    padding: 0.8em 1.5em;
    margin-top: 1.5em;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Przycisk w Bloku 1 (Link-przycisk) */
.block-1 .btn {
    background-color: var(--color-accent); /* Akcentowa zieleń */
    color: var(--color-text-light);
    box-shadow: 0 4px 0 var(--color-primary-dark); /* Efekt 3D */
    font-size: 1.1em;
}

.block-1 .btn:hover {
    background-color: #008855;
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--color-primary-dark);
}

.block-1 .btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--color-primary-dark);
}

/* Przycisk w Formularzu (Bloki 2 i 5.2) */
button[type="submit"] {
    background-color: var(--color-accent); /* Akcentowa zieleń */
    color: var(--color-text-light);
}

button[type="submit"]:hover {
    background-color: #008855;
}

/* Stylizacja pól formularza */
form {
    max-width: 500px;
    margin: 2em auto 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

label {
    font-weight: 600;
    display: block;
    margin-top: 0.5em;
}

input[type="email"], input[type="text"], textarea {
    width: 100%;
    padding: 1em;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1em;
    background-color: var(--color-text-light); /* Jasne tło pól */
    color: var(--color-text-dark);
}

.block-2 input[type="email"] {
    /* Pole email w Granatowym Bloku 2 */
    border: 2px solid var(--color-accent);
}

textarea {
    resize: vertical;
}

/* --- Stylizacja Mapy (Blok 6) --- */

.map-container {
    margin-top: 2em;
    border: 3px solid var(--color-primary-dark);
    max-width: 800px;
    margin: 2em auto;
}

iframe {
    display: block;
    /* Domyślna szerokość 100% już jest, ale można to poprawić dla kontenera */
}

/* --- Stopka (Blok 7) --- */

footer {
    background-color: var(--color-text-dark); /* Ciemne, eleganckie tło stopki */
    color: var(--color-border);
    text-align: center;
    padding: 1.5em 5%;
    font-size: 0.85em;
}

footer .domainName {
    /* Utrzymanie wymaganej klasy bez zmian w kodzie, ale z nadaniem koloru */
    color: var(--color-accent);
    font-weight: 700;
    text-transform: lowercase;
}

/* ============================================================= */
/* --- RESPONSIVE DESIGN (Wersja Mobilna) --- */
/* ============================================================= */

@media (max-width: 768px) {
    /* Dostosowania dla tabletów i telefonów */

    body {
        /* Usunięcie marginesów bocznych i granic, aby strona zajmowała całą szerokość */
        margin: 0;
        border-left: none;
        border-right: none;
    }

    section {
        padding: 2em 4%; /* Mniejszy padding dla lepszego wykorzystania przestrzeni */
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.7em;
    }

    /* Blok 1: Dopasowanie tekstu i przycisku */
    .block-1 {
        text-align: center;
        align-items: center;
        min-height: 400px;
    }

    .block-1 p {
        max-width: 100%;
    }

    .block-1 .btn {
        width: 90%;
        max-width: 300px;
        margin-top: 1em;
    }

    /* Dopasowanie siatki produktów i specjalistów - pojedyncza kolumna */
    .product-list, .specialist-list, .review-list {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .product {
        padding: 1em;
    }

    /* Artykuł */
    .article-content {
        padding: 1.5em;
    }

    /* Formularz */
    form {
        gap: 10px;
    }

    button[type="submit"] {
        width: 100%;
        margin-top: 0.5em;
    }

    /* Mapa */
    .map-container {
        margin: 1.5em auto;
        border-width: 1px;
    }
}