/* ── index.html ──
 * Przeniesione 10.09.2026 z bloku <style> w tresci strony. Styl w tresci nie da sie
 * buforowac osobno ani wspoldzielic, a przede wszystkim wymusza furtke unsafe-inline
 * w CSP — czyli politykę, ktora nie chroni przed wstrzyknietym stylem. */

/* 🔴 Tła NEUTRALNE, bez niebieskiego podbicia. Wcześniej wszystkie trzy poziomy były
   granatowe (#000000, #101012, #161619) i cała strona miała chłodny odcień, przez
   który srebro wyglądało na sine, a przygaszony zrzut programu na wyblakły. Teraz
   kolor zostaje tylko tam, gdzie coś znaczy — w oknie programu.

   Tekst też traci niebieskawy odcień: dawne #9a9ca1 i #6b6d73 to szarości z domieszką
   błękitu, widoczna dopiero obok czystej czerni. */
:root {
    --bg-primary: #000000;
    --bg-secondary: #101012;
    --bg-card: rgba(226, 232, 240, 0.035);
    --accent: #28aab1;
    --accent-glow: rgba(40, 170, 177, 0.3);
    --accent-light: #49b8c4;
    --text-primary: #f2f3f5;
    --text-secondary: #9a9ca1;
    --text-muted: #6b6d73;
    --border: #26262a;
    --success: #10b981;
    --warning: #f59e0b;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

.brand {
    color: var(--accent-light);
    font-weight: 600;
}

/* ── Hero ── */
/* Bez własnego tła — bierze je ze strony. Kiedy czerń była tylko tutaj, sekcja odcinała
   się od granatowej reszty jak wklejka. */
.hero {
    max-width: 1100px;
    margin: 0 auto;
    /* Odstęp od góry bierze na siebie .hero-top, żeby jego wysokość dała się
       policzyć wprost z wysokości okna. Dolny to jedyna przerwa między ramką z opisem
       a ramką o kluczach niżej — nic innego ich nie dzieli. */
    padding: 0 2rem 4rem;
    text-align: center;
}

/* Pierwszy ekran to DOKŁADNIE ta sekcja: wysokość okna bez paska nagłówka (58 px).
   Opis możliwości zaczyna się tuż pod krawędzią, więc przy wejściu nie widać go wcale —
   strona wita jednym obrazem, a czytanie zaczyna się dopiero po przewinięciu.

   `dvh` zamiast `vh`, bo na telefonie pasek adresu chowa się i wraca: przy `vh` sekcja
   byłaby liczona względem najwyższego stanu okna i wystawałaby poza ekran. Linia z `vh`
   zostaje jako zapas dla starszych przeglądarek — nowsze nadpiszą ją niżej.

   Kolumny równane GÓRĄ, nie środkiem: górna krawędź hasła ma stanąć na wysokości
   górnej krawędzi logo obok. Przy wyśrodkowaniu obie jechały każda swoją drogą,
   bo mają różną wysokość.

   Odstęp nad logo równy temu pod logo. Pod spodem jest przerwa 1,2rem do miniatury
   plus pusty margines w samym pliku (3,56% jego szerokości) — i dokładnie
   tyle wchodzi tutaj u góry. Rachunek trzyma się przy każdej szerokości kolumny,
   bo margines pliku jest ułamkiem jej szerokości, nie stałą liczbą pikseli. */
.hero-top {
    position: relative;
    /* Szerokość lewej kolumny rządzi całą sekcją: od niej liczy się wysokość logo
       (proporcja 1,776), wysokość miniatury (1,34) i oba przesunięcia poniżej.
       Górna granica 340 px to rozmiar, w jakim kolumna stała od początku. Człon
       `46vh - 48px` pilnuje niskich okien: przy tej szerokości suma wszystkiego —
       odstęp nad logo, logo, przerwa, miniatura, odstęp pod nią — mieści się jeszcze
       nad krawędzią ekranu. Bez niego miniatura schodziła poniżej. */
    --kolumna: min(340px, calc(43vh - 44px), 28vw);
    /* Logo szersze od miniatury o 13,8%: przy tej szerokości jego widoczna część
       (0,4556 szerokości pliku) ma dokładnie
       tyle samo pikseli w pionie co dwie linie hasła obok (1,842 rozmiaru pisma).
       Miniatura idzie za nim, patrz `--mini` niżej. */
    --logo: calc(var(--kolumna) * 1.231);
    /* Miniatura równa się z widoczną grafiką logo, nie z krawędzią pliku: metal zajmuje
       86,22% jego szerokości, a po lewej zostaje 6,44% przezroczystości. Stąd szerokość
       i dosunięcie poniżej — obie krawędzie, lewa i prawa, stają w jednym pionie. */
    --mini: calc(var(--logo) * 0.8622);
    /* Połowa wysokości miniatury. Logo i hasło schodzą o tyle w dół, miniatura
       o dwa razy tyle — stąd ta sama wartość wchodzi raz w odstęp nad logo
       i drugi raz w przerwę między logo a miniaturą. */
    --przesuw: calc(var(--mini) / 1.34 / 2);

    box-sizing: border-box;
    min-height: calc(100vh - 58px);
    min-height: calc(100dvh - 58px);
    padding: calc(var(--logo) * 0.0356 + 1.2rem + var(--przesuw)) 0 min(2rem, 3vh);
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    text-align: left;
    margin-bottom: 0;
}

/* Strzałka siedzi przy dolnej krawędzi pierwszego ekranu, w pustce pod treścią.
   Pozycja bezwzględna, bo `.hero-top` jest rzędem dwóch kolumn — wstawiona w niego
   zwyczajnie stanęłaby jako trzecia kolumna obok hasła.

   Ruch jest wolny i niewielki: ma zwrócić uwagę kątem oka, a nie ciągnąć wzroku
   z tekstu obok. W animacji powtarza się `translateX(-50%)`, bo `transform` nadpisuje
   się w całości i bez tego strzałka odskakiwałaby w bok na czas ruchu. */
/* Przyklejona do OKNA, nie do pierwszego ekranu: po przewinięciu widok bywa tak
   równo wypełniony ramką, że znów nie widać, czy niżej coś jest. Strzałka zostaje
   więc na oczach przez całą drogę i za każdym kliknięciem schodzi o jedną sekcję.
   Przy końcu strony gaśnie — nie ma już dokąd prowadzić. */
.hero-scroll {
    position: fixed;
    left: 50%;
    bottom: 3vh;
    z-index: 60;
    width: 34px;
    height: 19px;
    color: var(--text-muted);
    animation: strzalka-w-dol 2.6s ease-in-out infinite;
    transition: color 0.3s, opacity 0.4s;
}

/* Stan wygaszony ustawia skrypt, gdy niżej nie ma już czego pokazać.
   🔴 `animation: none` jest tu konieczne: klatki ruchu same ustawiają `opacity`,
   a wartość animowana bije zwykłą regułę — bez zatrzymania animacji strzałka
   migotała dalej mimo wpisanego zera. */
.hero-scroll.schowana {
    animation: none;
    opacity: 0;
    pointer-events: none;
}

.hero-scroll:hover {
    color: var(--accent-light);
}

.hero-scroll svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes strzalka-w-dol {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
    50%      { transform: translate(-50%, 9px); opacity: 1; }
}

/* Kto wyłączył animacje w systemie, dostaje strzałkę nieruchomą — sygnał zostaje. */
@media (prefers-reduced-motion: reduce) {
    .hero-scroll { animation: none; opacity: 0.75; transform: translateX(-50%); }
}

/* Lewa kolumna: logo, a pod nim miniatura okna programu — obie tej samej szerokości,
   więc kolumna czyta się jak jeden blok. */
/* Szerokość kolumny wiąże WYSOKOŚĆ okna, nie szerokość: pod logo stoi miniatura
   o proporcji 1,34, więc obie razem zajmują około 1,3 szerokości kolumny w pionie.
   Przy niskim oknie sztywne 340 px wypychało miniaturę poniżej krawędzi ekranu,
   przy wysokim zostawiało pod nią pusty pas — `42vh` prowadzi ją w obie strony.
   Górna granica to 340 px — rozmiar, w jakim kolumna stała od początku. Zmienna
   część działa tylko w dół: na niskim oknie kolumna maleje, żeby miniatura zmieściła
   się nad krawędzią, ale nigdy nie rośnie ponad swój pierwotny rozmiar. */
.hero-top .hero-logo-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: calc(1.2rem + var(--przesuw));
    width: var(--logo);
}

/* Miniatura rośnie razem z logo i staje pod jego widoczną grafiką — nie pod krawędzią
   pliku, w którym po bokach jest przezroczystość. Dzięki temu oba elementy mają wspólną
   lewą i prawą krawędź. */
.hero-top .hero-thumb {
    width: var(--mini);
    margin-left: calc(var(--logo) * 0.0644);
    align-self: flex-start;
}

/* Prawa kolumna dostaje wysokość LEWEJ, nie kontenera — dzięki temu przyciski,
   dopchnięte na jej dół, kończą się dokładnie na dolnej krawędzi miniatury.
   Rachunek: logo zajmuje 0,564 SWOJEJ szerokości minus 0,0733 ujemnego marginesu,
   czyli 0,491; miniatura 0,746 swojej, plus 2 px ramki. Od czasu powiększenia logo
   obie mają różne szerokości, więc każda liczona jest ze swojej zmiennej.
   Rozciągnięcie przez `align-items: stretch` nie zadziała, bo kontener ma wysokość
   całego ekranu i przyciski wylądowałyby przy jego dolnej krawędzi. */
.hero-top .hero-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: calc(var(--logo) * 0.491 + var(--mini) * 0.746 + 2px + 1.2rem + var(--przesuw));
}

.hero h1.hero-title {
    /* Pismo SZERYFOWE i cienkie — ciężar niesie krój i rozmiar, nie grubość ani barwa.
       Zapis zwykły, wielką literą tylko na początku członów: w tym rozmiarze wersaliki
       robiły z hasła szyld, a szeryfy czyta się lepiej z małymi literami, bo mają
       wydłużenia górne i dolne, po których oko rozpoznaje kształt słowa.
       Zapas: Didot jest na macOS, Georgia wszędzie — gdyby pismo z sieci nie doszło. */
    font-family: 'Instrument Serif', Didot, 'Bodoni 72', Georgia, 'Times New Roman', serif;
    /* Trzeci człon wiąże rozmiar z wysokością okna — przy niskim oknie hasło musi
       zmaleć razem z resztą, inaczej samo zajęłoby pół pierwszego ekranu. */
    font-size: calc(var(--kolumna) * 0.2636);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1;
    /* Napis dosunięty do PRAWEJ krawędzi kolumny — obie linie kończą się równo, przez co
       blok ma twardy pion po prawej stronie i wygląda jak wybity w metalu, a nie
       rozsypany. */
    text-align: right;
    /* Podniesienie o odstęp, jaki krój zostawia NAD literami w wierszu. Przy
       `line-height: 1` wiersz jest niższy od naturalnej wysokości pisma (ascent
       i descent Instrument Serif to razem 1,3 rozmiaru), a widoczna krawędź liter
       zaczyna się 0,089 rozmiaru poniżej górnej krawędzi bloku. Logo obok takiego
       zapasu nie ma — jego pusty margines jest skompensowany ujemnym marginesem —
       więc bez tej poprawki hasło siedziało o te 8 px niżej. */
    margin: -0.089em 0 1.1rem;

    /* Srebro: ciemniejsze krawędzie, jasny pas w środku — jak światło na szczotkowanym
       metalu. Pas przesuwa się w kółko, bardzo powoli, więc napis „żyje", ale nie miga
       w oku podczas czytania. Barwa idzie z tła przyciętego do liter, dlatego samo
       `color` musi być przezroczyste. */
    background: linear-gradient(100deg,
        #6f7681 0%,
        #aab3bd 18%,
        #ffffff 32%,
        #e6ebf0 42%,
        #8d959f 60%,
        #6f7681 100%);
    background-size: 200% 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: srebrny-polysk 22s linear infinite;
    filter: none;
}

/* 🔴 Skok brał się z rachunku, nie z czasu trwania. `background-position` w procentach
   NIE jest przesunięciem o tyle procent: CSS zestawia punkt X% obrazu z punktem X%
   elementu, więc przy tle szerszym od elementu ten sam zapis daje inną drogę. Przy tle
   200% współczynnik wynosi dokładnie −1, czyli droga od 0% do −200% równa się jednej
   pełnej długości wzoru — i dopiero wtedy pętla schodzi się co do piksela.
   Do tego gradient zaczyna i kończy tą samą barwą, więc styku nie widać. */
@keyframes srebrny-polysk {
    from { background-position: 0% 0; }
    to   { background-position: -200% 0; }
}

/* Kto wyłączył animacje w systemie, dostaje sam gradient bez ruchu — napis nadal jest
   srebrny, tylko światło stoi. */
@media (prefers-reduced-motion: reduce) {
    .hero h1.hero-title { animation: none; background-position: 30% 0; }
}

/* Obie linie hasła kończą się i zaczynają w tym samym miejscu — blok ma przez to
   dwie proste krawędzie zamiast schodka po lewej.

   Mnożniki nie są dobrane na oko, tylko zmierzone w przeglądarce na kroju Instrument
   Serif. Przy równym piśmie „Serial Terminal" jest szersze od „& Automation" — sam
   ampersand zajmuje ułamek tego, co całe słowo — więc to DOLNA linia musi urosnąć,
   żeby dogonić górną: 448 px do 380 px, stąd 1,179.

   Powiększona jest dolna, a nie zmniejszona górna, i to jest różnica nie do pominięcia.
   Dolna linia jest wzorcem szerokości dla dopowiedzenia, wałka, podpisu i przycisków
   pod spodem — zmniejszenie górnej ściągnęłoby cały ten blok do 380 px, czyli o 15%.
   Tak zostaje przy 448 px i nic pod hasłem nie drga.

   🔴 Zapasowe kroje (Didot, Georgia) mają inne proporcje — gdyby pismo z sieci nie
   doszło, krawędzie rozjadą się o kilka procent. */
.hero-title-top,
.hero-title-bottom {
    display: block;
}

.hero-title-top {
    font-size: 1.085em;
}

.hero-title-bottom {
    font-size: 1.179em;
}

/* Dopowiedzenie — małymi literami i ciszej, żeby odróżniało się od hasła krojem
   i wielkością, a nie kolorem. */
/* Zdanie w JEDNEJ linii. Rozmiar z rachunku: prawa kolumna ma 1036 px sekcji minus
   340 px lewej kolumny i 40 px przerwy, czyli ~656 px na 74 znaki. Przy piśmie zwykłej
   grubości znak zajmuje około 0,5 wysokości, więc granicą jest ~17 px — bierzemy 0,97 rem
   z zapasem, a przy węższym oknie przejmuje człon w `vw`. */
.hero .hero-subtitle {
    font-size: min(0.97rem, 1.55vw);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    /* Jaśniejsze od dopowiedzeń niżej: to zdanie wprowadza listę pod sobą, więc ma
       stać wyżej w hierarchii niż wypisywane pod nim przykłady. */
    color: #cdd0d5;
    /* Do prawej, za nagłówkiem — inaczej blok rozjeżdżałby się na dwie osie naraz. */
    text-align: right;
    white-space: nowrap;
    /* GÓRNA krawędź zdania staje na wysokości górnej krawędzi miniatury obok. Odstęp
       to różnica dwóch dróg liczonych od tej samej góry sekcji: po lewej logo (0,491
       swojej szerokości) plus przerwa do miniatury, po prawej dwie linie hasła (2,264
       rozmiaru pisma, minus jego podniesienie) plus własny margines.
       Wartość przeszła tu z kreski, która wcześniej stała w tym miejscu i wyznaczała
       tę wysokość — po jej usunięciu zdanie przejęło rolę górnej krawędzi bloku.

       🔴 Ułamek 0,4271, nie 0,4743: po powiększeniu dolnej linii hasła do szerokości
       górnej dwuwiersz urósł w pionie z 2,085 na 2,264 rozmiaru pisma. Różnica 0,179
       razy 0,2636 (rozmiar pisma liczony z szerokości kolumny) daje 0,0472 — i tyle
       trzeba było stąd odjąć, inaczej zdanie zjeżdża 14 px pod krawędź miniatury,
       a wałek traci te 14 px na ikonach. Zmiana rozmiaru którejkolwiek linii hasła
       każe przeliczyć tę wartość na nowo. */
    margin: calc(var(--kolumna) * 0.4271 + 1.6px) 0 0.5rem auto;
}

.hero p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 0 1.5rem;
}

/* Nazwa produktu wewnątrz zdania — w sekcji powitalnej BEZ pomarańczu. Świeciła w środku
   wiersza i rozbijała zdanie na dwie części; tutaj wystarczy, że jest jaśniejsza. */
.hero .brand {
    color: var(--text-primary);
}

/* ── Wałek z ikonami funkcji ──
   Trzy ikony na widoku: środkowa duża i wyraźna, boczne mniejsze i przygaszone.
   Co kilka sekund wałek obraca się o jedno miejsce — lewa gaśnie, środkowa wchodzi
   na jej miejsce, a z prawej wsuwa się następna.

   W kodzie stoi WSZYSTKIE DZIEWIĘĆ ikon naraz, nie trzy. Każda ma numer miejsca
   względem środka (0 środek, -1 lewa, 1 prawa) i z niego liczy przesunięcie,
   wielkość i przezroczystość. Obrót to podmiana numerów u wszystkich naraz — resztę
   robi przejście CSS, więc nic nie przeskakuje.

   Miejsca ±2 stoją poza kadrem z zerową widocznością i to jest cały sekret ruchu
   „na wałku": ikona ma skąd WJECHAĆ i dokąd wyjechać. Gdyby widocznych miejsc było
   dokładnie trzy, skrajne musiałyby pojawiać się i znikać w powietrzu.

   Szerokość bloku ustawia skrypt — tę samą, co podpis i przyciski, żeby cała prawa
   kolumna trzymała jeden pion. */
.hero-wheel {
    position: relative;
    width: 100%;
    /* 🔴 Wałek zabiera CAŁE wolne miejsce, jakie zostaje w kolumnie — i to on, a nie
       margines przycisków, rozpycha ją do wysokości lewej kolumny. Stąd dwie rzeczy
       naraz: ikony są tak duże, jak pozwala miejsce, a przyciski kończą się dokładnie
       na dolnej krawędzi miniatury obok. Przy sztywnej wysokości wałka było odwrotnie —
       nad ikonami i pod nimi zostawała pustka, a nadmiar treści spychał przyciski
       o kilkadziesiąt pikseli poniżej miniatury. */
    flex: 1 1 auto;
    /* Dolna granica na ciasne okno: przy zerowej wysokości ikony zniknęłyby zupełnie,
       a lepiej, żeby kolumna urosła o te kilkadziesiąt pikseli. */
    min-height: 60px;
    margin: 0 0 0.4rem auto;
    /* Ikony wyjeżdżające poza kadr są przezroczyste, ale nadal zajmują miejsce —
       bez przycięcia wchodziłyby na miniaturę w kolumnie obok. */
    overflow: hidden;
}

.hero-wheel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 🔴 Gniazdo jest PROSTOKĄTNE, nie kwadratowe, i to jest ważniejsze, niż wygląda.
       Pliki ikon mają skrajnie różne proporcje — od 420×480 (macros) po 480×149
       (cross-platform), czyli od kwadratu po pasek trzy razy szerszy niż wyższy.
       W kwadratowym gnieździe płaska ikona wypełniała ledwie połowę wysokości,
       a resztę zostawiała pustą. Proporcja 1,57 to mediana z tych dziewięciu plików:
       większość wypełnia gniazdo prawie w całości, skrajne w obie strony ustawiają
       się na wysokość albo na szerokość.

       Dwa ograniczenia naraz: w pionie wysokość wałka, w poziomie 38% jego szerokości.
       Przy szerokim, niskim pasie rządzi pierwsze, przy wąskim i wysokim drugie —
       dzięki temu trzy ikony mieszczą się w pasie, cokolwiek zrobi się z oknem. */
    height: 100%;
    aspect-ratio: 1.57 / 1;
    max-width: 38%;
    display: block;
    /* Kolejność członów ma znaczenie: najpierw wyśrodkowanie własnym rozmiarem,
       potem przesunięcie na swoje miejsce, a skala NA KOŃCU. Postawiona wcześniej
       mnożyłaby też przesunięcie i boczne ikony jeździłyby bliżej środka, niż wynika
       z rozstawu.
       Przesunięcie w PROCENTACH, bo procent w `translate` liczy się od rozmiaru
       samego elementu — rozstaw idzie więc za wielkością ikony bez żadnej zmiennej
       i bez rachunku w skrypcie. */
    transform: translate(-50%, -50%) translateX(var(--x, 0%)) scale(var(--s, 1));
    opacity: var(--o, 0);
    transition: transform 0.62s cubic-bezier(0.33, 0.9, 0.3, 1),
                opacity 0.62s ease;
}

.hero-wheel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Miejsca na wałku. `--x` to przesunięcie w procentach szerokości gniazda: 96% stawia
   boczną tuż obok środkowej, 190% wypycha następną poza kadr. Wartość dobrana tak,
   żeby zewnętrzna krawędź bocznej ikony miała jeszcze kilkanaście pikseli zapasu
   do krawędzi pasa — przy 102% ocierała się o nią i przy zaokrągleniu bywała ucięta. */
.hero-wheel-item[data-miejsce="0"]  { --x: 0%; --s: 1; --o: 1; z-index: 3; }
.hero-wheel-item[data-miejsce="-1"] { --x: -96%; --s: 0.58; --o: 0.3; z-index: 2; }
.hero-wheel-item[data-miejsce="1"]  { --x: 96%; --s: 0.58; --o: 0.3; z-index: 2; }
.hero-wheel-item[data-miejsce="-2"] { --x: -190%; --s: 0.42; --o: 0; z-index: 1; pointer-events: none; }
.hero-wheel-item[data-miejsce="2"]  { --x: 190%; --s: 0.42; --o: 0; z-index: 1; pointer-events: none; }

/* Boczna ikona rozjaśnia się pod kursorem — to jedyny znak, że da się ją kliknąć
   i przekręcić wałek. Bez tego wygląda jak ozdoba. */
.hero-wheel-item[data-miejsce="-1"]:hover,
.hero-wheel-item[data-miejsce="1"]:hover { --o: 0.65; }

/* 🔴 Ikony spoza pięciu miejsc — niewidoczne i BEZ przejścia. Wałek zamyka się
   w pierścień, więc skrajna z lewej przy kolejnym obrocie staje się skrajną z prawej.
   Z włączonym przejściem przejechałaby przez środek widoku w poprzek wszystkiego. */
.hero-wheel-item.poza {
    transition: none;
    opacity: 0;
    pointer-events: none;
}

/* Podpis środkowej ikony: nazwa funkcji i jedno zdanie o niej. Blok jest szerokości
   hasła (ustawia ją skrypt), a tekst stoi w jego ŚRODKU — pod środkową ikoną, której
   dotyczy. Wyrównanie do lewej zostało tu po maszynie do pisania: przy wypisywaniu
   litera po literze każde inne ustawienie pełzało w bok z każdym dopisanym znakiem.
   Podpis wymienia się teraz przenikaniem, w całości naraz, więc nie ma czym pełzać.

   Stała wysokość trzech wierszy: podpisy mają różną długość i bez niej układ skakałby
   przy każdym obrocie, spychając przyciski w dół i z powrotem. */
/* Selektor z `.hero` z premedytacją: reguła `.hero p` niżej jest mocniejsza od samej
   klasy i zerowała lewy margines, przez co blok siadał przy lewej krawędzi kolumny
   zamiast pod zdaniem. Dopowiedzenie obok ma `.hero .hero-subtitle` z tego samego
   powodu. */
.hero .hero-caption {
    margin: 0 0 0.4rem auto;
    max-width: none;
    text-align: center;
    font-size: min(0.92rem, 1.45vw);
    line-height: 1.5;
    /* 🔴 Zapas musi mieścić NAJDŁUŻSZY podpis, nie przeciętny. Wysokość bloku odejmuje
       się od tego, co zostaje wałkowi, więc każde jej drgnięcie zmienia rozmiar ikon:
       przy zapasie na krótsze zdania siedem podpisów z dziesięciu rozpychało blok
       i ikony pulsowały o kilka pikseli przy każdym obrocie.
       5em = nazwa (1,5 × 1,2 wiersza) + odstęp + dwuwierszowe zdanie, czyli najgorszy
       przypadek z listy. Po dopisaniu dłuższego zdania trzeba tę wartość sprawdzić. */
    min-height: 5em;
    color: var(--text-secondary);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Stan przejściowy: skrypt gasi podpis, podmienia treść i zapala go z powrotem.
   Krótkie zejście w dół daje wrażenie, że nowy podpis przychodzi razem z ikoną,
   zamiast podmieniać się w miejscu. */
.hero .hero-caption.gasnie {
    opacity: 0;
    transform: translateY(4px);
}

/* Nazwa funkcji w osobnej linii i jaśniej — po niej wiadomo, na co się patrzy,
   zanim jeszcze przeczyta się zdanie pod spodem.

   Półtora raza większa od zdania pod nią, ale z CIAŚNIEJSZĄ interlinią — i jedno bez
   drugiego nie ma sensu. Nazwa zajmuje jeden wiersz, więc odstęp międzywierszowy 1,5
   odziedziczony po bloku nie rozdziela u niej niczego: dokłada tylko pustkę nad
   literami i pod nimi. Ściągnięty do 1,2 oddaje tę pustkę na wzrost pisma, przez co
   cały blok zostaje tej samej wysokości co przedtem — a to on dzieli miejsce
   z wałkiem nad sobą i przyciskami pod spodem. Bez tego napis urósłby kosztem ikon.

   1,2 to dolna granica: niżej krój zaczyna przycinać wydłużenia dolne — ogonki
   w „Lua Scripting" czy „Programming". */
.hero-caption-title {
    display: block;
    color: var(--text-primary);
    font-size: 1.5em;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0.1rem;
}

/* Kto wyłączył animacje w systemie, dostaje wałek nieruchomy: ikony i podpis
   zmieniają się dopiero po kliknięciu, i to od razu, bez przejazdu. */
@media (prefers-reduced-motion: reduce) {
    .hero-wheel-item { transition: none; }
    .hero .hero-caption { transition: none; }
}

/* Obok siebie i do prawej — pod napisem i dopowiedzeniem, które też są dosunięte,
   więc cała prawa kolumna trzyma jeden pion. */
.hero-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(0.35rem, 1.2vw, 0.8rem);
    justify-content: space-between;
    width: 100%;
    margin-left: auto;
    /* 🔴 Bez `margin-top: auto`. Automatyczny margines w układzie elastycznym zjada
       całą wolną przestrzeń ZANIM rozdzieli ją `flex-grow`, więc przyciski stały na
       dole kolumny, ale wałek nad nimi nie dostawał ani piksela ponad swoją treść.
       Teraz to wałek rozpycha kolumnę do wysokości lewej, a przyciski siadają na jej
       dole same z siebie — i kończą się równo z dolną krawędzią miniatury obok. */
}

.hero-buttons .btn {
    justify-content: center;
    min-width: 0;
    padding: 0.6rem clamp(0.45rem, 1.4vw, 1rem);
    font-size: clamp(0.68rem, 1.6vw, 1rem);
    white-space: nowrap;
}

/* Przyciski przejmują język ruchu z kafelków: turkusową ramkę, delikatne uniesienie,
   poświatę i linię światła przy dolnej krawędzi. */
.hero-buttons .btn {
    position: relative;
    overflow: hidden;
    color: #e8ecf1;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, color 0.3s ease;
    box-shadow: none;
}

.hero-buttons .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(40, 170, 177, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.hero-buttons .btn::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transition: width 0.4s ease, left 0.4s ease;
    pointer-events: none;
}

.hero-buttons .btn:hover {
    color: #ffffff;
    border-color: rgba(40, 170, 177, 0.55);
    transform: translateY(-6px);
    box-shadow: 0 0 24px rgba(40, 170, 177, 0.098), 0 12px 36px rgba(40, 170, 177, 0.063);
}

.hero-buttons .btn:hover::before { opacity: 1; }

.hero-buttons .btn:hover::after {
    width: 80%;
    left: 10%;
}

.hero-buttons .btn:active {
    transform: scale(0.98) translateY(-2px);
    box-shadow: 0 0 28px rgba(40, 170, 177, 0.140), inset 0 0 6px rgba(40, 170, 177, 0.035);
    transition: all 0.08s ease;
}

.hero-buttons .btn .brand {
    color: inherit;
    font-weight: 600;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.8rem;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 20px var(--accent-glow);
}

.btn-primary:hover {
    background: #009193;
    box-shadow: 0 0 30px rgba(40, 170, 177, 0.175), 0 0 12px rgba(40, 170, 177, 0.105);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: scale(0.95);
    box-shadow: 0 0 40px rgba(40, 170, 177, 0.210), inset 0 0 8px rgba(40, 170, 177, 0.070);
    background: #008284;
    transition: all 0.08s ease;
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: rgba(40, 170, 177, 0.55);
    box-shadow: 0 0 18px rgba(40, 170, 177, 0.105), 0 0 6px rgba(40, 170, 177, 0.052);
}

.btn-secondary:active {
    transform: scale(0.95);
    box-shadow: 0 0 24px rgba(40, 170, 177, 0.175), inset 0 0 8px rgba(40, 170, 177, 0.035);
    border-color: var(--accent-light);
    transition: all 0.08s ease;
}

/* ── Terminal Preview ── */
.terminal-preview {
    max-width: 750px;
    margin: 3rem auto 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.terminal-dot.red { background: #ef4444; }
.terminal-dot.yellow { background: #f59e0b; }
.terminal-dot.green { background: #10b981; }

.terminal-title {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.terminal-body {
    padding: 1.2rem;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.terminal-body .prompt { color: var(--success); }
.terminal-body .cmd { color: var(--text-primary); }
.terminal-body .output { color: var(--text-muted); }
.terminal-body .ai { color: #8b5cf6; }
.terminal-body .highlight { color: var(--warning); }

/* ── Features ── */
/* Sekcja jest KONTENEREM ZAPYTAŃ, żeby kafelek „Works Everywhere" niżej wiedział, ile
   kolumn ma pod sobą siatka. Zwykłe zapytanie medialne mierzyłoby okno, a liczba kolumn
   zależy od szerokości samej siatki — po zmianie `max-width` sekcji albo jej marginesu
   próg rozjechałby się z rzeczywistością i pas systemów pojawiałby się przy dwóch
   kolumnach. Tutaj mierzona jest dokładnie ta szerokość, którą widzi `auto-fit`. */
.features {
    max-width: 1100px;
    margin: 0 auto;
    padding: 5rem 2rem;
    container-type: inline-size;
}

/* Nagłówki sekcji tym samym pismem szeryfowym co hasło powitalne — strona ma jeden
   głos, a nie dwa. Waga 400, bo Instrument Serif nie ma odmiany grubszej i przy 700
   przeglądarka pogrubiłaby go sztucznie, rozmywając szeryfy. Rozmiar w górę o jedną
   czwartą: pismo szeryfowe o zwykłej grubości waży optycznie mniej niż dotychczasowe
   bezszeryfowe pogrubione, więc przy dawnej wartości nagłówki by zmalały. */
.features h2 {
    font-family: 'Instrument Serif', Didot, 'Bodoni 72', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.features h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.features .subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 3rem;
}

/* Liczbę kolumn dobiera szerokość kafelka, nie próg w zapytaniu medialnym. Przy sztywnym
   `repeat(3, 1fr)` kolumna schodziła do 250 px zanim próg 768 px w ogóle zadziałał —
   i tam tekst upychał się po dwa słowa w wierszu. 280 px to szerokość, poniżej której
   zdanie w karcie przestaje się czytać; siatka sama zdejmuje wtedy jedną kolumnę.
   Wychodzi z tego 3 kolumny do ~975 px, 2 do ~625 px, niżej jedna — płynnie, bez skoku
   z trzech wprost na jedną. */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.8rem;
    transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(40, 170, 177, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.feature-card::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transition: width 0.4s ease, left 0.4s ease;
}

.feature-card:hover {
    border-color: rgba(40, 170, 177, 0.55);
    transform: translateY(-6px);
    box-shadow: 0 0 24px rgba(40, 170, 177, 0.098), 0 12px 36px rgba(40, 170, 177, 0.063);
}

.feature-card:hover::before { opacity: 1; }

.feature-card:hover::after {
    width: 80%;
    left: 10%;
}

.feature-card:active {
    transform: scale(0.98) translateY(-2px);
    box-shadow: 0 0 28px rgba(40, 170, 177, 0.140), inset 0 0 6px rgba(40, 170, 177, 0.035);
    transition: all 0.08s ease;
}

.feature-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    margin-bottom: 0.8rem;
}

.feature-card h3 {
    font-family: 'Instrument Serif', Didot, 'Bodoni 72', Georgia, 'Times New Roman', serif;
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.05;
    min-height: 2.1em;
    margin-bottom: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    flex: 1;
}

/* ── Works Everywhere jako pas pod siatką ──
   Próg: trzy kolumny mieszczą się, gdy siatka ma 3 × 280 px kafelka + 2 × 24 px
   przerwy = 888 px. To ta sama arytmetyka, co `minmax(280px, 1fr)` i `gap: 1.5rem`
   wyżej — 🔴 gdy tam zmieni się szerokość kafelka albo przerwa, TĘ LICZBĘ trzeba
   przeliczyć razem z nimi, inaczej pas wyskoczy przy dwóch kolumnach.

   Poniżej progu żadna z tych reguł nie działa i Works Everywhere jest zwykłym,
   dziesiątym kafelkiem: dwie kolumny dają 2×5, jedna 1×10 — bez dziury w siatce. */
@container (min-width: 888px) {
    .features-grid .feature-wide {
        grid-column: 1 / -1;
        margin-top: 2rem;
    }

    /* Bez ramki, tła i podświetleń: to ma być sekcja pod kafelkami, a nie najszerszy
       kafelek w siatce. Zostaje sam odnośnik — grafika systemów dalej prowadzi
       do pobierania. */
    .feature-wide .feature-card {
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        /* 🔴 Kafelek przycina wszystko, co z niego wystaje — po to, żeby podświetlenie
           tła nie wylewało się poza jego zaokrąglony róg. W pasie nie ma czego
           przycinać, a grafika dotyka dolnej krawędzi, więc poświata pod nią była
           ucinana w poprzek: światło kończyło się prostą linią zamiast zgasnąć. */
        overflow: visible;
        /* Szerokość z treści, nie z całej siatki. Kursor ma zapalać ikony także
           z nagłówka i zdania nad nimi, a kafelek rozciągnięty na 1036 px reagowałby
           również pół ekranu obok, na pustym miejscu. */
        width: fit-content;
        margin: 0 auto;
    }

    .feature-wide .feature-card::before,
    .feature-wide .feature-card::after { content: none; }

    .feature-wide .feature-card:hover,
    .feature-wide .feature-card:active {
        transform: none;
        box-shadow: none;
        border-color: transparent;
    }

    /* Kolejność jak w dawnej sekcji „Platforms": nagłówek, zdanie pod nim, a grafika
       systemów na samym dole. W kafelku ikona stoi między nagłówkiem a zdaniem, więc
       sama treść zostaje ta sama — przestawia ją tylko `order`. */
    .feature-wide .feature-card h3 {
        order: 1;
        font-size: 2.5rem;
        min-height: 0;
        margin-bottom: 0.5rem;
    }

    .feature-wide .feature-card p {
        order: 2;
        flex: none;
        max-width: 560px;
        margin: 0 auto 1.6rem;
    }

    .feature-wide .feature-icon {
        order: 3;
        height: auto;
        margin-bottom: 0;
    }

    /* Grafika trzech systemów w rozmiarze z dawnej sekcji — plik ma 480 px szerokości,
       więc granica 320 px faktycznie ją zmniejsza, a nie tylko zabezpiecza. */
    .feature-wide .feature-logo-icon {
        max-height: none;
        max-width: 320px;
        width: auto;
        transition: transform 0.35s ease, filter 0.35s ease;
    }

    /* W pasie nie ma ramki kafelka, która podświetla się pod kursorem — bez własnego
       znaku nic nie mówiłoby, że to prowadzi do pobierania. Reagują same ikony:
       rosną i dostają turkusową poświatę, tę samą barwę, co obrys kafelka obok.

       Kursor łapany na CAŁYM bloku, nie na samej grafice — najechanie na nagłówek
       albo zdanie zapala ikony tak samo. Same napisy zostają bez zmian: podświetlać
       ma się obrazek, a nie tekst.

       Światło słabe z rozmysłem. Mocniejsze przy grafice tak płaskiej i szerokiej
       wygląda jak obwódka doklejona do prostokąta, nie jak blask samego metalu. */
    .feature-wide .feature-card:hover .feature-logo-icon {
        transform: scale(1.07);
        filter: brightness(1.04) drop-shadow(0 0 9px rgba(40, 170, 177, 0.14));
    }
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
    text-align: left;
}

.price-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
}

.price-card.popular {
    border-color: rgba(40, 170, 177, 0.55);
    box-shadow: 0 0 30px rgba(40, 170, 177, 0.087);
}

.price-card.popular::before {
    content: 'Most Popular';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    text-transform: uppercase;
}

.price-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.price-card .price {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.price-card .price small {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-muted);
}

.price-card .queries {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.price-card ul {
    list-style: none;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.price-card ul li {
    padding: 0.25rem 0;
}

.price-card ul li::before {
    content: '✓ ';
    color: var(--success);
    font-weight: 700;
}

/* ── Footer ── */
footer {
    border-top: 1px solid var(--border);
    padding: 3rem 2rem;
    color: var(--text-muted);
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.footer-logo {
    width: 80px;
    height: auto;
    border-radius: 0;
    filter: drop-shadow(0 0 10px rgba(160, 205, 212, 0.3));
}

.footer-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.footer-name .io {
    color: #28aab1;
}

.footer-name .studio {
    color: var(--accent);
}

.footer-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--accent-light);
}

.footer-download {
    color: #f2f3f5 !important;
    font-weight: 600 !important;
}
.footer-download:hover { color: var(--accent-light) !important; }

.footer-copy {
    font-size: 0.85rem;
    color: var(--text-muted);
}


/* Miniatura okna programu pod logo. Stoi mała, żeby nie zabierała miejsca nagłówkowi,
   a pod kursorem rośnie do rozmiaru, w którym widać szczegóły — terminal, wykres i czat.
   Kliknięcie prowadzi tam, gdzie logo: do strony „czym to jest".

   Powiększenie idzie od DOLNEGO LEWEGO narożnika: dolna krawędź stoi w miejscu, rośnie
   tylko górna. Przy rozroście w dół miniatura wyjeżdżała poniżej krawędzi ekranu.
   Skala nie jest stała — liczy ją skrypt na dole strony tak, żeby powiększona miniatura
   kończyła się dokładnie na prawej krawędzi kolumny z napisami. W samym CSS się nie da:
   `calc` nie dzieli długości przez długość, a skala musi być liczbą. */
.hero-thumb {
    display: block;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.45s, border-color 0.45s, z-index 0s;
    transform-origin: bottom left;
}

/* Bez odbarwiania. Zrzut jest teraz w tej samej palecie co strona — turkus okna
   programu to ten sam turkus, co akcenty wokół — więc barwa nie rozbija układu,
   tylko go domyka. Wcześniej okno miało pomarańczowy motyw i gryzło się z resztą,
   stąd szarość w spoczynku. */
.hero-thumb img {
    width: 100%;
    display: block;
}

.hero-thumb:hover {
    transform: scale(var(--skala, 2.6));
    z-index: 40;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
}



/* Logo w odcieniach szarości. Pomarańcz zostaje w interfejsie programu — na stronie
   powitalnej ciągnął oko na siebie zamiast na to, co narzędzie robi. Poświata też
   traci barwę: pomarańczowa wokół szarego logo wyglądałaby jak niedokończona zmiana. */
/* Logo bez odbarwiania i przyciemniania — jest metaliczne samo z siebie, a jedyny kolor
   w nim (niebieski punkt i poświata pod napisem) to celowy akcent, który filtr szarości
   by zabił. Poprzednie logo trzeba było gasić, bo świeciło pomarańczem; to nie wymaga
   niczego poza lekką poświatą, żeby nie wisiało w próżni na czerni. */
.hero-logo {
    display: block;
    max-width: none;
    width: 100%;
    height: auto;
    /* 🔴 Logo podniesione o WŁASNY pusty margines. W pliku 13,0% wysokości u góry to
       przezroczystość, więc równanie do krawędzi obrazu zostawiało widoczne złącze
       niżej niż napis obok. Margines w procentach liczy się od SZEROKOŚCI rodzica,
       a obraz ma proporcję 900:508 — stąd 13,0% wysokości daje 7,33% szerokości.
       Dzięki temu wyrównanie trzyma się przy każdej szerokości kolumny. */
    margin-top: -7.33%;
    /* Lekko prześwitujące — pełne krycie robiło z logo naklejkę przyklejoną na dym w tle,
       a nie element tej samej sceny. Jedna liczba do strojenia. */
    opacity: 0.7;
    filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0.07));
    transition: transform 0.3s, filter 0.3s;
}

.hero-logo:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 0 60px rgba(255, 255, 255, 0.12));
}

/* 🔴 Wszystkie ikony na SREBRO — rysunki są pomarańczowe w plikach, więc odbarwiamy je
   filtrem zamiast przerabiać czternaście obrazów. Odwracalne jednym wierszem.

   Sam `grayscale` daje szarość matową i zbyt ciemną: pomarańcz po odbarwieniu ląduje
   w środku skali. Podbita jasność i kontrast przywracają połysk, przez który rysunek
   znów wygląda na metal, a nie na wyblakłą naklejkę. Poświaty tracą barwę razem
   z ikonami — pomarańczowa aureola wokół srebrnej ikony zdradzałaby, skąd to się wzięło. */
/* Kolejność filtrów ma znaczenie, bo działają po sobie: najpierw `grayscale` zdejmuje
   pomarańcz do czystej szarości, dopiero potem `sepia` dokłada ciepło. Sama szarość
   wychodziła zimna i żałobna; sepia w tej dawce daje ton starej fotografii — ciepły,
   ale wciąż jednobarwny, więc ikona nie wraca do pomarańczu. */
.feature-logo-icon,
.feature-logo-icon-lg {
    filter: none;
    transition: filter 0.3s;
}

.feature-logo-icon {
    max-height: 80px;
    width: auto;
    border-radius: 6px;
    object-fit: contain;
}

.feature-logo-icon-lg {
    max-height: 80px;
    width: auto;
    border-radius: 6px;
    object-fit: contain;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    /* Kolumny idą jedna pod drugą, więc treść nie mieści się już w jednym ekranie —
       wymuszanie jego wysokości zostawiałoby pod spodem pustkę albo ucinało miniaturę. */
    .hero-top {
        flex-direction: column;
        text-align: center;
        min-height: 0;
        padding: 2rem 0 1.5rem;
        /* Bez tego każdy blok kurczy się do swojej treści i lepi do lewej krawędzi:
           `flex-start` z układu dwukolumnowego trzyma tam wysokość kolumn, ale po
           obróceniu osi zaczyna rządzić SZEROKOŚCIĄ. Hasło stawało wtedy przy lewej,
           choć miało wyśrodkowany tekst, a bloki pod nim kurczyły się do treści. */
        align-items: stretch;
        /* Kolumny stoją jedna pod drugą, więc rozsuwanie logo od miniatury i doklejanie
           przycisków do dołu straciło sens — obie wartości schodzą do zera. */
        --przesuw: 0px;
    }
    .hero-scroll { display: none; }
    /* Kolumna tekstu przestaje być pudełkiem: jej dzieci wchodzą wprost do flexa
       sekcji, więc każde z nich może stanąć w innej kolejności niż w kodzie. Bez tego
       hasło nie ma jak wyjść ponad logo — siedzi w środku bloku razem z resztą. */
    .hero-top .hero-text {
        display: contents;
    }
    /* Hasło na samą górę, nad logo: przy jednej kolumnie ono prowadzi stronę,
       a nie stoi w połowie wysokości pod obrazkiem. */
    .hero h1.hero-title {
        order: -1;
        text-align: center;
        /* Rośnie z szerokością ekranu, ale nie ponad 4rem — przy tym rozmiarze dłuższy
           z dwóch wierszy („for Professionals") mieści się jeszcze na ekranie 390 px. */
        font-size: clamp(2.4rem, 11vw, 4rem);
        margin: 0 0 1.2rem;
    }
    /* Wszystko na jedną oś. Górny odstęp zdania liczony jest od wysokości logo OBOK —
       przy układzie pionowym nie ma czego dorównywać, więc schodzi do zera. */
    .hero .hero-subtitle {
        text-align: center;
        white-space: normal;
        margin: 0 auto 1rem;
        font-size: 1rem;
    }
    /* Wałek na całą szerokość ekranu i wyśrodkowany, bo kolumny stoją tu jedna pod
       drugą. Wysokość WŁASNA, a nie z rozpychania: przy jednej kolumnie sekcja nie ma
       narzuconej wysokości, więc nie ma tu wolnego miejsca do zabrania i wałek
       skurczyłby się do swojej dolnej granicy. Wysokość prowadzi szerokość ekranu,
       z granicami z obu stron. */
    .hero-wheel {
        flex: none;
        height: clamp(64px, 20vw, 116px);
        min-height: 0;
        width: 100%;
        margin: 0 auto 0.6rem;
    }
    /* Podpis dostaje szerokość i pismo zdania nad nim — czyta się jak jego dalszy
       ciąg. Rozmiar `1.45vw` dawał tu 7 px, czyli mikrodruk: ta wartość jest liczona
       dla szerokiej kolumny obok logo, nie dla ekranu telefonu.
       Zapas wysokości mniejszy niż na desktopie, bo zdania łamią się na więcej linii. */
    .hero .hero-caption {
        margin: 0 auto 0.8rem;
        width: 100%;
        font-size: 1rem;
        min-height: 3.4em;
    }
    /* Kolumna z logo bierze całą szerokość sekcji i centruje swoją zawartość.
       Sztywne `--logo` trzymało ją przy lewej krawędzi na 241 px, więc logo
       i miniatura stały w kącie, a hasło i przyciski na środku. */
    .hero-top .hero-logo-wrap {
        width: 100%;
        align-items: center;
    }
    /* Miniatura na całą szerokość kolumny, wyśrodkowana pod logo. Przy szerokości
       branej z `--mini` schodziła do 116 px na ekranie 390 px — do znaczka pocztowego
       przyklejonego do lewej krawędzi, podczas gdy logo i tekst stały na środku. */
    .hero-top .hero-thumb {
        width: 100%;
        margin-left: 0;
        align-self: center;
    }
    /* Bez powiększania tam, gdzie nie ma myszy. `:hover` na ekranie dotykowym albo nie
       zachodzi wcale, albo zostaje przyklejony po dotknięciu i zasłania stronę — a i tak
       nie ma go jak obejrzeć, bo dotknięcie miniatury wchodzi od razu w link. */
    .hero-thumb:hover {
        transform: none;
        z-index: 1;
        box-shadow: none;
    }
    /* Oba przyciski w jednym rzędzie. Ograniczenie do 340 px łamało je na dwa wiersze
       nawet wtedy, gdy w kolumnie było na nie miejsce. */
    .hero-buttons {
        max-width: none;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .hero p {
        margin: 0 auto 1.5rem;
    }
    .hero h1 { white-space: normal; }
    .hero-logo { max-width: 280px; }
}

@media (max-width: 640px) {
    .hero { padding: 1.5rem 1.2rem 1.5rem; }
    .features { padding: 3rem 1.2rem; }
    .pricing-grid { grid-template-columns: 1fr; }
    .hero-logo { max-width: 240px; }
    /* Wąski ekran: kolumny jedna pod drugą, a lewa traci sztywne 340 px — inaczej
       wypychałaby układ poza ekran razem ze zmniejszonym logo. */
    .hero-top { flex-direction: column; gap: 0; min-height: 0; }

    /* Na telefonie jedna linia znaczyłaby pismo nie do odczytania — tu zdanie
       ma się złamać i urosnąć do czytelnego rozmiaru. */
    .hero h1.hero-title { white-space: normal; }
    /* Na telefonie zdanie nie zmieści się w jednej linii przy czytelnym piśmie —
       tam ma się złamać, a nie zmaleć do nieczytelności. */
    .hero .hero-subtitle { white-space: normal; font-size: 0.95rem; }
}