/* ============================================================================
   EKRAN POWITALNY — cztery filary
   ----------------------------------------------------------------------------
   Osobny arkusz, pisany MOBILE-FIRST: reguly bazowe opisuja telefon, a szersze
   ekrany dokladaja sie przez min-width.

   Dlaczego osobny plik, a nie dopisek do styles.css: tamten arkusz jest
   desktop-first i utrzymuje sie na `!important`, bo wyglad reszty serwisu siedzi
   w atrybutach `style` w app.js i inaczej go nie przebije. Ten ekran nie ma
   stylow inline, wiec nie potrzebuje ani jednego `!important` — i niech tak
   zostanie.
   ========================================================================== */

.evg {
    --evg-ciemny:   #0E1613;   /* glebszy niz --ev-ink: hero ma byc kinowy, nie szary */
    --evg-ciemny-2: #16211C;
    --evg-zielen:   var(--ev-green);
    --evg-zielen-j: #4ADE80;   /* akcent na ciemnym tle — #2F9E44 na czerni nie swieci */
    --evg-tekst:    rgba(255, 255, 255, 0.82);
    --evg-tekst-2:  rgba(255, 255, 255, 0.58);
    --evg-margines: 20px;
}

@media (min-width: 768px)  { .evg { --evg-margines: 40px; } }
@media (min-width: 1200px) { .evg { --evg-margines: 56px; } }

.evg-kontener {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-inline: var(--evg-margines);
}

/* ── HERO ──────────────────────────────────────────────────────────────────
   100svh, nie 100vh: na telefonie pasek adresu chowa sie przy przewijaniu,
   przez co 100vh jest wyzsze niz widoczny ekran i tresc ucieka pod krawedz.  */
.evg-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background: var(--evg-ciemny);
    color: #fff;
}

.evg-hero__tlo,
.evg-hero__tlo video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Kadr odtwarza `object-fit: cover` recznie: najmniejsze pudelko o proporcjach zdjecia,
   ktore przykrywa hero. Dzieki temu zdjecie i nakladka SVG dziela JEDEN uklad
   wspolrzednych — przy `object-fit` na samym <img> obraz jest przycinany wewnatrz
   swojego pudelka, a SVG o tym nie wie i luki tras rozjezdzaja sie z ladem. */
.evg-kadr {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 2752 / 1536;
    min-width: 100%;
    min-height: 100%;
}
.evg-kadr picture,
.evg-kadr img { display: block; width: 100%; height: 100%; }

.evg-trasy {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Dwie nakladki, nie jedna: pionowa daje czytelnosc tekstu u dolu, a barwna
   sciaga przypadkowa kolorystyke kadru do zieleni marki. Bez tej drugiej kazde
   nowe tlo wygladalo jak z innej strony. */
.evg-hero__tlo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(14,22,19,.55) 0%, rgba(14,22,19,.35) 35%, rgba(14,22,19,.92) 100%),
        linear-gradient(115deg, rgba(31,125,51,.28) 0%, rgba(14,22,19,0) 60%);
}

/* Nakladka dla TLA ZDJECIOWEGO jest inna niz dla rysowanego. To nie kosmetyka:
   zdjecie Europy nocą jest bursztynowo-granatowe, a zielony welon z reguly ogolnej
   zmienilby je w blotnista sepie. Tutaj przyciemniamy mocniej pionowo i schladzamy
   granatem zamiast barwic na zielono — tekst ma byc czytelny, a kadr ma zostac soba. */
.evg-hero__tlo--obraz::after {
    background:
        linear-gradient(180deg, rgba(8,14,24,.62) 0%, rgba(8,14,24,.42) 30%, rgba(8,14,24,.94) 100%),
        linear-gradient(115deg, rgba(10,30,45,.45) 0%, rgba(8,14,24,0) 62%);
}

/* Zanim wgramy material AI — tlo jest rysowane, nie pobierane. Zero bajtow,
   a ekran nie wyglada na niedokonczony. */
.evg-hero__tlo--zastepcze {
    background:
        radial-gradient(120% 90% at 15% 10%, rgba(74,222,128,.22) 0%, rgba(14,22,19,0) 55%),
        radial-gradient(90% 70% at 85% 85%, rgba(47,158,68,.30) 0%, rgba(14,22,19,0) 60%),
        linear-gradient(160deg, #16211C 0%, #0E1613 60%, #0B120F 100%);
}

.evg-hero__gora {
    position: relative;
    z-index: 2;
    padding-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.evg-logo {
    /* 2026-08-20: 42/58 px gubilo sie na tle zdjecia hero. Po pierwszym podbiciu
       (54/80) uzytkownik nadal uznal znak za za maly, stad 62/100 — znak firmowy ma byc
       pierwsza rzecza, ktora widac na ekranie powitalnym. */
    height: 62px;
    width: auto;
    display: block;
    /* Plik jest ciemny — odbicie do bieli zamiast trzymania drugiej wersji pliku. */
    filter: brightness(0) invert(1);
}
@media (min-width: 768px) { .evg-logo { height: 100px; } }

.evg-hero__tresc {
    position: relative;
    z-index: 2;
    padding-block: clamp(18px, 4vh, 44px) clamp(14px, 3vh, 26px);

    /* BLAD, ktory to naprawia: element ma klase `evg-kontener` (max-width 1240 + margin auto),
       a dodatkowo dostawal tutaj `max-width: 46rem`. Nadpisana szerokosc zostawala ze
       srodkowaniem `margin: 0 auto`, wiec blok tekstu ustawial sie jako WASKA KOLUMNA
       NA SRODKU, podczas gdy kafle pod nim trzymaly sie lewej krawedzi kontenera.
       Naglowek zaczynal sie o ~250 px dalej niz kafle i cale wejscie wygladalo na
       zlozone z dwoch roznych stron.
       Szerokosc ograniczamy teraz DZIECIOM, a nie kontenerowi — wtedy tekst lamie sie
       tam, gdzie ma, ale krawedz startowa jest wspolna z reszta ekranu.
       (Pierwsza proba poprawki dawala `max-width: none` i psula to samo w druga strone:
       blok tekstu robil sie SZERSZY niz kontener, wiec zaczynal sie przed kaflami.) */

    /* Blok tekstu srodkujemy w PRZESTRZENI MIEDZY gorna belka a kaflami, zamiast
       spychac go na dol `margin-top: auto`. Poprzednio nad naglowkiem zostawala
       polowa ekranu pustki, a wszystko inne tloczylo sie przy dolnej krawedzi. */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.evg-hero__tresc > * { max-width: 46rem; }

/* Na szerokim ekranie tekst schodzi ku kaflom zamiast siedziec w polowie wolnej
   przestrzeni. Uzytkownik 2026-08-20: „czy nie byloby ladniej, gdyby te kafelki podniesc
   blizej napisow" — kafle sa dociete do dolu przez `space-between` na .evg-hero, wiec
   dystans zamyka sie od strony tekstu; efekt na oku jest ten sam, a nic nie odkleja sie
   od dolnej krawedzi.

   WYLACZNIE od 900 px. Na telefonie uklad jest dobry i nie ma go po co ruszac — a to
   jedyny sposob, zeby jednego nie naprawic kosztem drugiego. Tego samego progu uzywaja
   juz .evg-kafelki i .evg-kafelek, wiec nie wprowadzamy nowego punktu lamania. */
@media (min-width: 900px) {
    .evg-hero__tresc { justify-content: flex-end; padding-block-end: clamp(20px, 4vh, 40px); }
}

.evg-nadtytul {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--evg-zielen-j);
    border: 1px solid rgba(74,222,128,.32);
    border-radius: 999px;
    padding: 7px 14px;
    background: rgba(74,222,128,.07);
}

/* Lista dzialow nad haslem. Zwykly tekst, a nie cztery plakietki: cztery ramki
   z obwodkami nad naglowkiem tworza drugi, konkurencyjny blok — a to ma byc podpis,
   nie element nawigacji. Kropki rozdzielaja, zielen nadaje im rytm. */
.evg-dzialy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
    /* Cien pod tekstem: nazwy leza na zdjeciu, a nad Europa trafiaja sie jasne
       skupiska swiatel, na ktorych sama biel przestaje byc czytelna. */
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
@media (min-width: 768px) { .evg-dzialy { font-size: 11.5px; gap: 10px; margin-bottom: 22px; } }

.evg-dzialy__kropka { color: var(--evg-zielen-j); opacity: .8; }

.evg-hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    /* clamp zamiast breakpointow: naglowek ma 3 slowa i lamie sie inaczej na kazdej
       szerokosci — sztywne rozmiary zawsze gdzies wypadaja zle. */
    /* Gorna granica scieta z 4.4rem: naglowek dzieli teraz ekran z kaflami, a nie
       zajmuje go sam. */
    font-size: clamp(1.9rem, 6.4vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin: 20px 0 0;
    text-wrap: balance;
}

.evg-hero h1 em {
    font-style: normal;
    color: var(--evg-zielen-j);
}

.evg-hero__sub {
    font-family: 'Inter', sans-serif;
    font-size: clamp(.95rem, 3.6vw, 1.125rem);
    line-height: 1.65;
    color: var(--evg-tekst);
    margin: 18px 0 0;
    max-width: 34rem;
}

/* ── KAFLE NA PIERWSZYM EKRANIE ────────────────────────────────────────────
   Szklane plytki na zdjeciu: przyciemnienie + rozmycie tla daje czytelny tekst
   NIEZALEZNIE od tego, co akurat jest pod spodem. Sama przezroczystosc bez rozmycia
   przestaje dzialac, gdy pod kaflem trafi sie jasne swiatlo miasta.               */
.evg-hero__kafle { position: relative; z-index: 2; padding-block: 8px 4px; }

/* Wstep nad kaflami. Ma byc CICHSZY od hasla i podtytulu — to podpis prowadzacy
   wzrok w dol, a nie trzecia rzecz walczaca o uwage. Stad mniejszy stopien,
   przygaszona biel i lekki rozstrzel liter. */
.evg-kafle-wstep {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .72);
    margin: 0 0 12px;
}
@media (min-width: 900px) { .evg-kafle-wstep { font-size: 1rem; margin-bottom: 16px; } }

.evg-kafelki {
    display: grid;
    /* Dwie kolumny na telefonie, nie jedna: cztery kafle jeden pod drugim wypchnelyby
       ostatni ponizej krawedzi ekranu, a caly sens jest w tym, zeby byly widoczne razem. */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 900px) { .evg-kafelki { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

/* Kafel ze zdjeciem w tle. `background-blend-mode` przyciemnia fotografie SAMYM
   kolorem tla, bez dokladania kolejnej warstwy nad nia — dzieki temu rozmycie szkla
   dziala dalej na to, co pod kaflem (mapa), a nie na nieprzezroczysta plame. */
.evg-kafelek {
    position: relative;
    display: flex;
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    flex-direction: column;
    gap: 8px;
    padding: 14px 14px 12px;
    min-height: 104px;
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
    /* Przyciemnienie dobrane DO ZDJEC, ktore akurat leza pod spodem, i zmienialo sie
       dwa razy. Przy jasnych zdjeciach sluzbowych trzeba bylo .84, bo biala naczepa na tle
       nieba zjadala bialy napis. Zdjecia z generatora sa ciemne i mroczne z natury — przy
       .84 kafel robil sie prawie czarny i po zdjeciu nie zostawalo nic.
       Teraz .48, a czytelnosc napisu bierze na siebie gradient od dolu (::before): on
       dziala niezaleznie od tego, jak jasne jest zdjecie, wiec nie trzeba gasic calosci. */
    background-color: rgba(8, 14, 12, .48);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
@media (min-width: 900px) { .evg-kafelek { min-height: 132px; padding: 18px 18px 16px; gap: 10px; } }

.evg-kafelek:hover {
    background-color: rgba(28, 104, 48, .62);
    border-color: rgba(74, 222, 128, .55);
    transform: translateY(-3px);
}
.evg-kafelek:focus-visible { outline: 3px solid var(--evg-zielen-j); outline-offset: 3px; }

/* Gradient pod napisem — zdjecie moze byc dowolne, a nazwa dzialu i tak lezy na ciemnym.
   Samo globalne przyciemnienie nie wystarcza: przy jasnym niebie w gornej czesci kadru
   trzeba by zgasic zdjecie tak bardzo, ze przestaloby byc widoczne. */
.evg-kafelek::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to top, rgba(6, 12, 10, .95) 0%, rgba(6, 12, 10, .55) 48%, rgba(6, 12, 10, .05) 100%);
    pointer-events: none;
    z-index: 1;
}
/* Tresc kafla nad gradientem. */
.evg-kafelek__nr,
.evg-kafelek__ikona,
.evg-kafelek__nazwa,
.evg-kafelek__strzalka { position: relative; z-index: 2; }

.evg-kafelek__nr {
    position: absolute;
    top: 10px;
    right: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: rgba(255, 255, 255, .38);
}

.evg-kafelek__ikona { color: var(--evg-zielen-j); }
.evg-kafelek__ikona svg { display: block; width: 26px; height: 26px; }
@media (min-width: 900px) { .evg-kafelek__ikona svg { width: 32px; height: 32px; } }

.evg-kafelek__nazwa {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
    margin-top: auto;
    /* Nazwy maja rozna dlugosc („Spedycja" kontra „Organizacja przepraw") — balans
       trzyma je w podobnej liczbie linii, wiec kafle nie skacza wysokoscia. */
    text-wrap: balance;
}
@media (min-width: 900px) { .evg-kafelek__nazwa { font-size: 1rem; } }

.evg-kafelek__strzalka { color: var(--evg-zielen-j); opacity: .75; }
.evg-kafelek:hover .evg-kafelek__strzalka { opacity: 1; }

.evg-hero__akcje {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.evg-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    padding: 14px 22px;
    border-radius: 10px;
    /* 48 px to dolna granica wygodnego celu palcem — ponizej trafianie staje sie loteria */
    min-height: 48px;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.evg-btn--glowny { background: var(--evg-zielen); color: #fff; border: 1px solid var(--evg-zielen); }
.evg-btn--glowny:hover { background: #268A3A; transform: translateY(-2px); }
.evg-btn--drugi { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.evg-btn--drugi:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }

.evg-hero__dol {
    position: relative;
    z-index: 2;
    padding-block: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--evg-tekst-2);
}

.evg-hero__dol a { color: var(--evg-tekst-2); text-decoration: none; }
.evg-hero__dol a:hover { color: #fff; }

/* Strzalka „przewijaj" — na telefonie zbedna (kciuk i tak przewija), pokazujemy
   ja dopiero tam, gdzie caly hero miesci sie na ekranie i nic nie sugeruje, ze
   nizej cos jest. */
.evg-scroll { display: none; }
@media (min-width: 1024px) {
    .evg-scroll { display: inline-flex; align-items: center; gap: 8px; }
    .evg-scroll svg { animation: evg-skok 2s ease-in-out infinite; }
}
@keyframes evg-skok {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

/* ── RUCH ──────────────────────────────────────────────────────────────────
   Trzy animacje, wszystkie liczone przez karte graficzna (transform i opacity),
   zadna nie rusza ukladu strony. Laczny koszt: ZERO dodatkowych bajtow.

   Wszystkie sa wylaczane przy `prefers-reduced-motion` na koncu pliku.          */

/* 1. Najazdu na zdjecie JUZ NIE MA.
      Uzytkownik: "jest taki trzesacy, nie robi to dobrego wrazenia" — i mial racje.
      Animowane skalowanie zdjecia 2752 px zmusza przegladarke do przeliczenia kilku
      megapikseli w kazdej klatce; na slabszej maszynie widac to jako drganie. Zamiast
      walczyc o plynnosc czegos, co i tak niewiele wnosilo, ruch przejely TRASY:
      wektor jest tani, plynny i mowi cos o firmie.
      Zdjecie zostaje nieruchome. */

/* 2. Wejscie tresci — kazdy element chwile pozniej niz poprzedni.
      DRUGI BLAD Z PIERWSZEJ WERSJI: animacja startowala w chwili wczytania stylow,
      czyli ZANIM zaladowalo sie zdjecie tla. Cala sekwencja konczyla sie w 1,1 s,
      zwykle wczesniej, niz uzytkownik cokolwiek zobaczyl — wiec z jego strony
      „nie bylo jej wcale". Teraz startuje dopiero, gdy tlo jest gotowe: JS dokłada
      klase `evg--gra`, wczesniej stoi `evg--czeka`.
      Obie klasy dodaje JavaScript, wiec przy jego braku tresc jest po prostu
      widoczna — animacja nie moze byc warunkiem zobaczenia strony.
      Dystans i czas tez podniesione (24 px zamiast 14, 0,7 s zamiast 0,55,
      odstep 0,08 s zamiast 0,06) — poprzednie wartosci byly na granicy widocznosci. */
@media (prefers-reduced-motion: no-preference) {
    .evg--czeka .evg-hero__gora,
    .evg--czeka .evg-hero__tresc > *,
    .evg--czeka .evg-kafle-wstep,
    .evg--czeka .evg-kafelek { opacity: 0; }

    .evg--gra .evg-hero__gora,
    .evg--gra .evg-hero__tresc > *,
    .evg--gra .evg-kafle-wstep,
    .evg--gra .evg-kafelek {
        animation: evg-wejscie .7s cubic-bezier(.2, .7, .3, 1) backwards;
    }
    .evg--gra .evg-hero__gora                   { animation-delay: .05s; }
    .evg--gra .evg-hero__tresc > *:nth-child(1) { animation-delay: .16s; }
    .evg--gra .evg-hero__tresc > *:nth-child(2) { animation-delay: .24s; }
    .evg--gra .evg-hero__tresc > *:nth-child(3) { animation-delay: .32s; }
    .evg--gra .evg-kafle-wstep                  { animation-delay: .42s; }
    .evg--gra .evg-kafelek:nth-child(1)         { animation-delay: .52s; }
    .evg--gra .evg-kafelek:nth-child(2)         { animation-delay: .60s; }
    .evg--gra .evg-kafelek:nth-child(3)         { animation-delay: .68s; }
    .evg--gra .evg-kafelek:nth-child(4)         { animation-delay: .76s; }

    @keyframes evg-wejscie {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: none; }
    }
}

/* 3. Ladunek idacy przez cztery kroki.
      Zielona poswiata przechodzi po kaflach w kolejnosci 01 → 02 → 03 → 04
      i zaczyna od nowa. To nie ozdobnik: pokazuje dokladnie to, co mowi linia
      nad kaflami — jedna sprawa przechodzaca przez cztery dzialy, a nie cztery
      osobne uslugi obok siebie.
      Cykl 12 s, kazdy kafel swieci przez ~1.2 s: dosc, zeby wzrok zdazyl podazyc,
      za rzadko, zeby migotalo w tle podczas czytania. */
.evg-kafelek::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(160deg, rgba(74,222,128,.20) 0%, rgba(74,222,128,0) 55%);
    box-shadow: inset 0 0 0 1px rgba(74,222,128,.45);
    opacity: 0;
    animation: evg-krok 12s linear infinite;
}
.evg-kafelek:nth-child(1)::after { animation-delay: 0s; }
.evg-kafelek:nth-child(2)::after { animation-delay: 1.1s; }
.evg-kafelek:nth-child(3)::after { animation-delay: 2.2s; }
.evg-kafelek:nth-child(4)::after { animation-delay: 3.3s; }

@keyframes evg-krok {
    0%   { opacity: 0; }
    3%   { opacity: 1; }
    12%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Kursor na kaflu przerywa poswiate — inaczej podswietlenie z najechania
   bilo sie z animacja i kafel migotal pod palcem. */
.evg-kafelek:hover::after { animation: none; opacity: 0; }

/* ── TRASY NA MAPIE ────────────────────────────────────────────────────────
   Ruch, ktory cos ZNACZY: strzalki jada po realnych relacjach firmy. Rysowane
   wektorowo, wiec zero dodatkowych bajtow i zadnego szarpania — przegladarka nie
   przelicza kilku megapikseli w kazdej klatce, tylko przesuwa kilkanascie ksztaltow.

   Cala paleta jest przygaszona z rozmyslem. Uzytkownik poprosil, zeby "nie wygladalo
   jak atak jadrowy": slady sa ledwo widoczne, groty niewielkie, a rozblysk w miejscu
   dojazdu miekki. Mapa ma zyc pod tekstem, nie konkurowac z nim. */

/* Slad trasy — na tyle widoczny, zeby bylo wiadomo, ze strzalka gdzies zmierza,
   na tyle slaby, zeby dwanascie linii nie zrobilo z mapy pajeczyny. */
.evg-trasa__slad {
    fill: none;
    stroke: rgba(110, 242, 154, .17);
    stroke-width: 3;
    stroke-linecap: round;
}

.evg-strzalka__grot {
    fill: #7CF2A6;
    filter: drop-shadow(0 0 5px rgba(110, 242, 154, .7));
}

/* Ogon zwezajacy sie ku tylowi — sugeruje kierunek nawet w bezruchu, na zatrzymanym
   kadrze albo przy wylaczonych animacjach. */
.evg-strzalka__ogon {
    fill: none;
    stroke: #7CF2A6;
    stroke-width: 4.5;
    stroke-linecap: round;
    opacity: .45;
}

/* Ikona ladunku. Wypelnienie ciemne, obrys zielony — na mapie pelnej pomaranczowych
   swiatel sama zielona plama zlewalaby sie z tlem, a ciemne pudelko z jasnym obrysem
   czyta sie jako przedmiot. */
/* Trzy sciany paczki o roznej jasnosci. Bryla, a nie plaski ksztalt: przy 25 px
   na ekranie plaski prostokat czyta sie jak kropka, a bryla wciaz jak przedmiot. */
.evg-ladunek__wieko { fill: #8CF5B2; }
.evg-ladunek__lewa  { fill: #3FBF74; }
.evg-ladunek__prawa { fill: #1E8A4E; }
.evg-ladunek__tasma {
    fill: none;
    stroke: rgba(10, 30, 20, .55);
    stroke-width: 2;
}
.evg-ladunek { filter: drop-shadow(0 0 6px rgba(110, 242, 154, .55)); }

/* ── PRZELACZNIK JEZYKA ─────────────────────────────────────────────────── */
.evg-lang { display: flex; gap: 4px; }
.evg-lang button {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .08em;
    padding: 8px 10px;
    min-height: 36px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
    color: var(--evg-tekst-2);
    cursor: pointer;
    transition: all .16s ease;
}
.evg-lang button:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.evg-lang button[aria-current="true"] {
    background: var(--evg-zielen);
    border-color: var(--evg-zielen);
    color: #fff;
}

/* ── FILARY ────────────────────────────────────────────────────────────────
   Jedna kolumna na telefonie, dwie od tabletu, cztery od laptopa. Trzy kolumny
   celowo pomijamy: przy czterech kartach dawalyby osierocona karte w drugim rzedzie. */
.evg-filary { background: var(--ev-paper-2); padding-block: clamp(56px, 9vw, 104px); }

.evg-filary { padding-top: clamp(40px, 7vw, 80px); }
.evg-filary__naglowek { max-width: 42rem; margin-bottom: clamp(32px, 5vw, 56px); }
.evg-filary__naglowek h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 5vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 14px 0 0;
    color: var(--ev-ink);
}
.evg-filary__naglowek .evg-nadtytul {
    color: var(--ev-green-deep);
    border-color: rgba(47,158,68,.3);
    background: rgba(47,158,68,.06);
}

.evg-siatka { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px)  { .evg-siatka { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .evg-siatka { grid-template-columns: repeat(4, 1fr); } }

.evg-karta {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ev-line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.evg-karta:hover {
    transform: translateY(-4px);
    border-color: var(--ev-green);
    box-shadow: 0 14px 34px rgba(47,158,68,.14);
}
.evg-karta:focus-visible { outline: 3px solid var(--ev-green); outline-offset: 3px; }

.evg-karta__obraz {
    position: relative;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--ev-line);
}
@media (min-width: 1100px) { .evg-karta__obraz { aspect-ratio: 4 / 3; } }

/* Zastepcze tlo karty do czasu wgrania grafik AI. Odcien zalezy od numeru filaru,
   zeby cztery karty nie wygladaly jak jedna powtorzona cztery razy. */
.evg-karta__obraz--zastepcze { background-image: linear-gradient(150deg, #1F7D33 0%, #0E1613 100%); }
.evg-karta:nth-child(2) .evg-karta__obraz--zastepcze { background-image: linear-gradient(150deg, #2F9E44 0%, #12211A 100%); }
.evg-karta:nth-child(3) .evg-karta__obraz--zastepcze { background-image: linear-gradient(150deg, #157A5A 0%, #0E1613 100%); }
.evg-karta:nth-child(4) .evg-karta__obraz--zastepcze { background-image: linear-gradient(150deg, #0F6E78 0%, #0E1613 100%); }

.evg-karta__obraz::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(14,22,19,.15) 0%, rgba(14,22,19,.62) 100%);
}

.evg-karta__nr {
    position: absolute;
    right: 14px;
    top: 12px;
    z-index: 3;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 30px;
    font-weight: 500;
    color: rgba(255,255,255,.42);
    line-height: 1;
}

.evg-karta__ikona {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 3;
    color: #fff;
}
.evg-karta__ikona svg { display: block; width: 34px; height: 34px; }

.evg-karta__tresc { padding: 20px 18px 22px; display: flex; flex-direction: column; flex: 1; }

.evg-karta h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
    color: var(--ev-ink);
}

.evg-karta p {
    font-family: 'Inter', sans-serif;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--ev-ink-soft);
    margin: 0 0 16px;
}

.evg-karta ul {
    list-style: none;
    margin: auto 0 16px;
    padding: 14px 0 0;
    border-top: 1px solid var(--ev-line);
    display: grid;
    gap: 7px;
}
.evg-karta li {
    font-family: 'Inter', sans-serif;
    font-size: .8125rem;
    color: var(--ev-ink-2);
    display: flex;
    gap: 8px;
}
.evg-karta li::before { content: "·"; color: var(--ev-green); font-weight: 700; }

.evg-karta__cta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ev-green-deep);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.evg-karta:hover .evg-karta__cta svg { transform: translateX(4px); }
.evg-karta__cta svg { transition: transform .2s ease; }

/* ── SZANUJEMY USTAWIENIE „OGRANICZ ANIMACJE" ─────────────────────────────
   To nie jest kosmetyka: dla czesci osob ruch w tle wywoluje zawroty glowy
   i mdlosci. Wideo zatrzymujemy calkiem, przejscia skracamy do zera.        */
@media (prefers-reduced-motion: reduce) {
    .evg-scroll svg { animation: none; }
    /* Najazd na zdjecie, wejscie tresci i poswiata krokow — wszystko stoi.
       Elementy musza zostac WIDOCZNE, wiec kasujemy animacje i przywracamy
       stan koncowy recznie; samo `animation: none` przy `backwards` zostawiloby
       je przezroczyste. */
    /* SMIL nie slucha prefers-reduced-motion, wiec animacji nie da sie tu wylaczyc
       reguła CSS — robi to JavaScript (pauseAnimations w gateway.js). Tutaj zostaje
       tylko wyglad stanu spoczynku: strzalki stoja na swoich trasach, cele przygaszone. */
    .evg-ladunek { opacity: .35; }
    /* Wejscia tresci nie trzeba tu wylaczac — jego reguly zyja w bloku
       `no-preference`, wiec w tym trybie po prostu nie powstaja. */
    .evg-kafelek::after { animation: none; opacity: 0; }
    .evg-karta, .evg-btn, .evg-karta__cta svg, .evg-kafelek { transition: none; }
    .evg-karta:hover, .evg-btn:hover, .evg-kafelek:hover { transform: none; }
}