/* Zieleń celna: ciemna butelkowa jako kolor marki, jaśniejsza na akcenty. Kolory trzymamy w zmiennych, bo ta sama
   paleta obowiązuje w samym programie — jedno miejsce na decyzję o wyglądzie. */
:root {
    --zielen: #0b3b2e;
    --zielen-ciemna: #072a20;
    --zielen-akcent: #1f8a5b;
    --zielen-jasna: #eaf3ee;
    --zielen-linia: #d3e3d9;
    --tekst: #10201a;
    --tekst-cichy: #55665e;
    --tlo: #ffffff;
    --tlo-mgla: #f6faf7;
    --cien: 0 1px 2px rgb(11 59 46 / 6%), 0 8px 24px rgb(11 59 46 / 6%);
    --promien: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--tekst);
    background: var(--tlo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.6em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.0625rem; }
p { margin: 0 0 1rem; }
a { color: var(--zielen-akcent); }

.obszar { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.25rem; }

/* --- pasek górny --- */
.pasek {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgb(255 255 255 / 88%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--zielen-linia);
}

.pasek-tresc { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }

.logo { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.125rem; color: var(--zielen); text-decoration: none; }
.logo svg { width: 26px; height: 26px; fill: none; stroke: var(--zielen-akcent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pasek nav { display: flex; align-items: center; gap: 0.25rem; font-size: 0.9375rem; }
.pasek nav a { padding: 0.5rem 0.75rem; border-radius: 8px; color: var(--tekst-cichy); text-decoration: none; }
.pasek nav a:hover { color: var(--zielen); background: var(--zielen-jasna); }

/* --- przyciski --- */
.przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.15s, border-color 0.15s, transform 0.05s;
}
.przycisk:active { transform: translateY(1px); }
.przycisk.duzy { padding: 0.8rem 1.5rem; font-size: 1rem; }

.przycisk-glowny { background: var(--zielen); color: #fff; }
.przycisk-glowny:hover { background: var(--zielen-akcent); }
.pasek nav .przycisk-glowny { color: #fff; }
.pasek nav .przycisk-glowny:hover { background: var(--zielen-akcent); }

.przycisk-obrys { background: #fff; color: var(--zielen); border-color: var(--zielen-linia); }
.przycisk-obrys:hover { border-color: var(--zielen-akcent); background: var(--zielen-jasna); }

.przycisk-jasny { background: #fff; color: var(--zielen-ciemna); }
.przycisk-jasny:hover { background: var(--zielen-jasna); }

/* --- hero --- */
.hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2.5rem, 6vw, 4rem); }

/* Poświata daje głębię bez obrazków — nic się nie dogrywa z sieci, więc strona wchodzi natychmiast. */
.poswiata {
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 620px;
    background:
        radial-gradient(38% 55% at 22% 20%, rgb(31 138 91 / 16%), transparent 70%),
        radial-gradient(32% 45% at 78% 8%, rgb(11 59 46 / 12%), transparent 70%);
    pointer-events: none;
}

.hero-tresc { position: relative; }
.hero-tresc h1 { max-width: 20ch; }

.odznaka {
    display: inline-block;
    margin: 0 0 1.25rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--zielen-jasna);
    border: 1px solid var(--zielen-linia);
    color: var(--zielen);
    font-size: 0.8125rem;
    font-weight: 600;
}

.prowadzenie { font-size: clamp(1.0625rem, 2vw, 1.1875rem); color: var(--tekst-cichy); max-width: 46em; }

.hero-akcje { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 2.25rem; }

.hero-fakty { display: grid; gap: 0.75rem 2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); list-style: none; margin: 0; padding: 1.5rem 0 0; border-top: 1px solid var(--zielen-linia); font-size: 0.9375rem; color: var(--tekst-cichy); }
.hero-fakty strong { display: block; font-size: 1.5rem; color: var(--zielen); line-height: 1.2; }

/* --- sekcje --- */
.sekcja { padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(2.5rem, 6vw, 4rem); }
.sekcja-tlo { background: var(--tlo-mgla); border-top: 1px solid var(--zielen-linia); border-bottom: 1px solid var(--zielen-linia); }
.podtytul { max-width: 60ch; color: var(--tekst-cichy); margin-top: -0.25rem; }

/* --- wyszukiwarka kodów --- */
.szukajka { max-width: 760px; margin-top: 1.75rem; }

.szukajka-pole { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--zielen-linia); border-radius: var(--promien); box-shadow: var(--cien); }
.szukajka-pole:focus-within { border-color: var(--zielen-akcent); box-shadow: 0 0 0 3px rgb(31 138 91 / 15%); }
.szukajka-pole svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--tekst-cichy); stroke-width: 1.8; stroke-linecap: round; }
.szukajka-pole input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; color: inherit; background: transparent; }

.szukajka-info { margin: 0.625rem 0 0; font-size: 0.875rem; color: var(--tekst-cichy); min-height: 1.4em; }

.wyniki { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.wyniki li { display: flex; gap: 0.875rem; align-items: baseline; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--zielen-linia); border-radius: 10px; }
.wyniki .kod { flex: none; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; color: var(--zielen); }

/* Ścieżka taryfowa jako łańcuch osobnych elementów, nie tekst rozdzielony znakiem: rozwidlenia widać wtedy nawet
   przy pobieżnym spojrzeniu, a strzałka jest tylko dodatkiem, nie jedynym nośnikiem podziału. Liść — czyli odpowiedź
   na pytanie „czym jest ten kod" — dostaje pełne wypełnienie, więc oko trafia w niego od razu. */
.wyniki .sciezka { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0; font-size: 0.8125rem; }

.galaz {
    position: relative;
    padding: 0.1rem 0.45rem;
    margin-right: 1.1rem;
    border: 1px solid var(--zielen-linia);
    border-radius: 6px;
    background: var(--tlo-mgla);
    color: var(--tekst-cichy);
    white-space: normal;
}

.galaz::after {
    content: "›";
    position: absolute;
    right: -0.95rem;
    color: var(--zielen-akcent);
    font-weight: 700;
}

.lisc {
    padding: 0.14rem 0.55rem;
    border-radius: 6px;
    background: var(--zielen);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
}

.wspolna-sciezka {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0;
    margin: 0.875rem 0 0;
    padding: 0.625rem 0.75rem;
    border-left: 3px solid var(--zielen-akcent);
    background: var(--zielen-jasna);
    border-radius: 0 8px 8px 0;
    font-size: 0.8125rem;
}

.wspolna-etykieta { margin-right: 0.5rem; font-weight: 600; color: var(--zielen); }
.wspolna-sciezka .galaz { background: #fff; }
.wspolna-sciezka .galaz:last-child::after { content: none; }

/* --- kafle --- */
.kafle { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 2rem; }
.kafle-male { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.kafel { padding: 1.5rem; background: #fff; border: 1px solid var(--zielen-linia); border-radius: var(--promien); box-shadow: var(--cien); }
.kafel h3 { color: var(--zielen); }
.kafel p { margin: 0; color: var(--tekst-cichy); font-size: 0.9375rem; }

.ikona { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 1rem; border-radius: 10px; background: var(--zielen-jasna); }
.ikona svg { width: 22px; height: 22px; fill: none; stroke: var(--zielen-akcent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- kroki --- */
.kroki { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2rem; }
.krok { padding: 1.5rem; border: 1px solid var(--zielen-linia); border-radius: var(--promien); background: #fff; }
.krok h3 { color: var(--zielen); }
.krok p { margin: 0; color: var(--tekst-cichy); font-size: 0.9375rem; }
.krok-numer { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 0.875rem; border-radius: 999px; background: var(--zielen); color: #fff; font-weight: 700; font-size: 0.9375rem; }

/* --- kontakt i stopka --- */
.sekcja-ciemna { background: var(--zielen-ciemna); color: #fff; }
.kontakt { max-width: 640px; text-align: center; margin: 0 auto; }
.kontakt h2 { color: #fff; }
.kontakt p { color: rgb(255 255 255 / 78%); }
.kontakt-drobne { margin-top: 1rem; font-size: 0.875rem; }

.stopka { padding: 2rem 0; background: var(--zielen-ciemna); color: rgb(255 255 255 / 70%); border-top: 1px solid rgb(255 255 255 / 10%); font-size: 0.875rem; }
.stopka-tresc { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; }
.stopka nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.stopka a { color: rgb(255 255 255 / 82%); text-decoration: none; }
.stopka a:hover { color: #fff; text-decoration: underline; }

/* --- telefon --- */
@media (max-width: 720px) {
    .pasek nav a:not(.przycisk) { display: none; }
    .hero-fakty strong { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .przycisk { transition: none; }
}