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

        :root {
            --primary: #174f73;
            --primary-dark: #10384f;
            --accent: #d9a328;

            --background: #f3f6f8;
            --card: #ffffff;

            --text: #263238;
            --muted: #68767f;

            --border: #dce3e7;

            --max-width: 1180px;
        }

        body {
            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Arial,
                sans-serif;

            background: var(--background);
            color: var(--text);
            line-height: 1.6;
        }

        a {
            color: inherit;
        }

        /* =========================
           NAGŁÓWEK
        ========================= */

        .hero {
            background:
                linear-gradient(
                    135deg,
                    #10384f 0%,
                    #174f73 55%,
                    #1f668c 100%
                );

            color: white;
            padding: 64px 24px 54px;
        }

        .hero-inner {
            max-width: var(--max-width);
            margin: 0 auto;
        }

        .hero-tag {
            display: inline-block;

            background: rgba(255,255,255,0.13);
            border: 1px solid rgba(255,255,255,0.2);

            border-radius: 999px;
            padding: 7px 14px;

            font-size: 14px;
            margin-bottom: 20px;
        }

        .hero h1 {
            font-size: clamp(34px, 5vw, 58px);
            line-height: 1.08;
            margin-bottom: 18px;
            max-width: 900px;
        }

        .hero p {
            max-width: 850px;
            font-size: 18px;
            color: rgba(255,255,255,0.88);
        }

        .hero-meta {
            margin-top: 24px;

            display: flex;
            flex-wrap: wrap;
            gap: 14px;

            font-size: 14px;
            color: rgba(255,255,255,0.75);
        }

        /* =========================
           NAWIGACJA
        ========================= */

        .nav-wrapper {
            background: white;
            border-bottom: 1px solid var(--border);

            position: sticky;
            top: 0;
            z-index: 100;

            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }

        .nav {
            max-width: var(--max-width);
            margin: 0 auto;

            display: flex;
            gap: 8px;

            padding: 12px 24px;

            overflow-x: auto;
            scrollbar-width: thin;
        }

        .nav a {
            display: inline-flex;
            align-items: center;
            gap: 7px;

            white-space: nowrap;

            text-decoration: none;

            padding: 9px 14px;

            border: 1px solid var(--border);
            border-radius: 8px;

            background: #fff;

            font-size: 14px;
            font-weight: 600;

            transition: 0.2s;
        }

        .nav a:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
            transform: translateY(-1px);
        }

        /* =========================
           GŁÓWNA TREŚĆ
        ========================= */

        main {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 44px 24px 70px;
        }

        .intro {
            background: white;

            border: 1px solid var(--border);
            border-left: 5px solid var(--accent);

            border-radius: 10px;

            padding: 25px 28px;
            margin-bottom: 36px;
        }

        .intro h2 {
            margin-bottom: 8px;
            font-size: 22px;
        }

        .intro p {
            color: var(--muted);
        }

        /* =========================
           SEKCJE
        ========================= */

        .section {
            margin-bottom: 42px;
            scroll-margin-top: 100px;
        }

        .section-header {
            display: flex;
            align-items: center;
            gap: 11px;

            margin-bottom: 16px;
        }

        .section-icon {
            width: 42px;
            height: 42px;

            display: flex;
            align-items: center;
            justify-content: center;

            background: var(--primary);
            color: white;

            border-radius: 9px;

            font-size: 20px;
        }

        .section h2 {
            font-size: 25px;
        }

        /* =========================
           KARTY
        ========================= */

        .document-grid {
            display: grid;
            grid-template-columns:
                repeat(auto-fit, minmax(280px, 1fr));

            gap: 14px;
        }

        .document {
            display: flex;
            align-items: center;
            gap: 15px;

            text-decoration: none;

            background: var(--card);
            border: 1px solid var(--border);

            padding: 18px;

            border-radius: 10px;

            transition:
                transform 0.15s,
                box-shadow 0.15s,
                border-color 0.15s;
        }

        .document:hover {
            transform: translateY(-2px);

            border-color: #aabec9;

            box-shadow:
                0 8px 24px rgba(20, 55, 75, 0.09);
        }

        .document-icon {
            flex: 0 0 46px;

            width: 46px;
            height: 46px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 9px;

            background: #eef4f7;

            font-size: 21px;
        }

        .document-content {
            flex: 1;
        }

        .document-title {
            display: block;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .document-description {
            display: block;

            font-size: 13px;
            color: var(--muted);
        }

        .document-arrow {
            color: var(--primary);
            font-size: 20px;
        }

        /* =========================
           AKTUALNOŚCI
        ========================= */

        .news {
            display: grid;
            gap: 14px;
        }

        .news-item {
            background: white;

            border: 1px solid var(--border);
            border-radius: 10px;

            padding: 20px 22px;
        }

        .news-date {
            font-size: 12px;
            font-weight: 700;
            color: var(--primary);

            text-transform: uppercase;
            letter-spacing: 0.06em;

            margin-bottom: 5px;
        }

        .news-item h3 {
            margin-bottom: 5px;
        }

        .news-item p {
            color: var(--muted);
        }

        /* =========================
           STOPKA
        ========================= */

        footer {
            background: #102f40;
            color: white;
        }

        .footer-inner {
            max-width: var(--max-width);

            margin: 0 auto;
            padding: 34px 24px;

            display: flex;
            justify-content: space-between;
            gap: 25px;
            flex-wrap: wrap;
        }

        footer p {
            color: rgba(255,255,255,0.72);
            font-size: 14px;
        }

        footer a {
            color: white;
        }

        @media (max-width: 700px) {

            .hero {
                padding-top: 42px;
            }

            .hero h1 {
                font-size: 37px;
            }

            .hero p {
                font-size: 16px;
            }

            main {
                padding-left: 16px;
                padding-right: 16px;
            }

            .nav {
                padding-left: 16px;
                padding-right: 16px;
            }

            .document-grid {
                grid-template-columns: 1fr;
            }
        }

html { scroll-behavior: smooth; }

.page-hero { padding: 48px 24px 42px; }
.page-hero h1 { max-width: 1000px; }

.breadcrumbs {
    margin-bottom: 24px;
    color: var(--muted);
    font-size: 14px;
}
.breadcrumbs a { color: var(--primary); text-decoration: none; font-weight: 600; }
.breadcrumbs a:hover { text-decoration: underline; }

.content-stack { display: grid; gap: 14px; }
.content-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px 24px;
}
.content-card h2, .content-card h3 { margin-bottom: 8px; }
.content-card p { color: var(--muted); }
.content-card p + p { margin-top: 10px; }
.content-card ul, .content-card ol { margin: 12px 0 0 22px; color: var(--muted); }
.content-card li + li { margin-top: 6px; }

.label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 7px;
}

.notice {
    background: #fff8e6;
    border: 1px solid #ecdca8;
    border-left: 5px solid var(--accent);
    border-radius: 10px;
    padding: 18px 20px;
}
.notice p { color: #5e5438; }

.timeline { display: grid; gap: 12px; }
.timeline-item {
    background: white;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    padding: 18px 20px;
}
.timeline-date { font-weight: 800; color: var(--primary); margin-bottom: 5px; }
.timeline-item p { color: var(--muted); }

.source-box {
    background: #eef4f7;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 14px;
    font-size: 14px;
    color: #42515a;
}

.page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.button-link {
    display: inline-flex;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: white;
    font-weight: 700;
    color: var(--primary);
}
.button-link:hover { border-color: var(--primary); }

.table-wrap { overflow-x: auto; margin-top: 12px; }
table { border-collapse: collapse; width: 100%; background: white; }
th, td { border: 1px solid var(--border); padding: 11px 12px; text-align: left; vertical-align: top; }
th { background: #eef4f7; }

.small { font-size: 13px; color: var(--muted); }