/* ============================================================================
   cloudly.gg - strona
   Warstwa wizualna strony sprzedażowej. Tokeny są przepisane z panelu (nx), żeby
   przejście strona -> panel nie wyglądało jak zmiana marki: ta sama paleta, ta
   sama typografia, te same zaokrąglenia. Strona ma jednak własny prefiks (--cl-),
   bo to osobny kod i nie chcemy zależeć od tego, co ktoś zmieni w panelu.

   Spis:
     1. Tokeny
     2. Reset i podstawy
     3. Siatka i typografia
     4. Przyciski i drobiazgi
     5. Górna nawigacja
     6. Stopka
     7. Sekcje strony głównej
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENY */

:root {
    /* Marka */
    --cl-brand:       #216FED;
    --cl-brand-hi:    #3B8CFF;
    --cl-brand-lo:    #1058CB;
    --cl-brand-press: #0E4CAF;
    --cl-brand-ink:   #FFFFFF;

    /* Semantyka */
    --cl-ok:     #22C55E;
    --cl-warn:   #F59E0B;
    --cl-danger: #F04438;
    --cl-info:   #38BDF8;

    /* Typografia - nagłówki i przyciski mają własny krój, tekst swój */
    --cl-font: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cl-font-nag: "Montserrat", "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cl-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Skala odstępów (4px) */
    --cl-1: 4px;   --cl-2: 8px;   --cl-3: 12px;  --cl-4: 16px;
    --cl-5: 20px;  --cl-6: 24px;  --cl-8: 32px;  --cl-10: 40px;
    --cl-12: 48px; --cl-16: 64px; --cl-20: 80px; --cl-24: 96px;

    /* Zaokrąglenia - jak w panelu: kontrolki ostrzejsze niż karty */
    --cl-r-btn:  8px;
    --cl-r-sm:   10px;
    --cl-r:      14px;
    --cl-r-lg:   18px;
    --cl-r-xl:   24px;
    --cl-r-full: 999px;

    /* Szkielet */
    --cl-wrap:  1200px;
    --cl-nav-h: 64px;

    /* Wysokość kontrolek - jedna dla przycisków i ikonek, żeby rząd był równy */
    --cl-ctrl:      36px;
    --cl-ctrl-duzy: 48px;

    --cl-ease: cubic-bezier(.4, 0, .2, 1);
    /* długie, miękkie wyhamowanie - używane tylko przy wejściu sekcji */
    --cl-spokoj: cubic-bezier(.16, 1, .3, 1);
}

/* Motyw ciemny - domyślny, tak jak w panelu */
:root,
[data-theme="dark"] {
    --cl-bg:        #0A0D14;
    --cl-bg-soft:   #0E121B;
    --cl-surface:   #131824;
    --cl-surface-2: #19202F;
    --cl-surface-3: #1F2839;

    --cl-line:    rgba(255, 255, 255, .07);
    --cl-line-hi: rgba(255, 255, 255, .13);

    --cl-text:      #E9EDF6;
    --cl-text-dim:  #9AA4B8;
    --cl-text-mute: #6B7688;

    --cl-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --cl-shadow:    0 8px 24px -8px rgba(0, 0, 0, .55);
    --cl-shadow-lg: 0 24px 56px -20px rgba(0, 0, 0, .70);
    --cl-glow:      0 0 0 1px rgba(33, 111, 237, .35), 0 8px 28px -10px rgba(33, 111, 237, .55);

    --cl-zaslona: rgba(7, 10, 16, .88);
    --cl-tint:    rgba(33, 111, 237, .12);
    --cl-tint-hi: rgba(33, 111, 237, .20);

    /* Gradient przycisku głównego (skos 135 stopni) */
    --cl-grad-a:    #00A6FF;
    --cl-grad-b:    #0073FF;
    /* Kwoty w cennniku - turkus, żeby cena odcinała się od niebieskich przycisków */
    --cl-cena-a: #22D3EE;
    --cl-cena-b: #0EA5E9;

    --cl-grad-a-hi: #1FB2FF;
    --cl-grad-b-hi: #0F82FF;

    /* Szkło - plakietki i elementy leżące na zdjęciu */
    --cl-glass: rgba(19, 24, 36, .72);

    /* przezroczyste tło paska - pod nim widać przewijaną treść */
    --cl-nav-bg: rgba(10, 13, 20, .72);

    color-scheme: dark;
}

/* Motyw jasny - marka idzie dwa stopnie ciemniej, inaczej na bieli wygląda jak neon */
[data-theme="light"] {
    --cl-brand:       #1D5FD1;
    --cl-brand-hi:    #1B51B4;
    --cl-brand-lo:    #174CA8;
    --cl-brand-press: #133C86;

    --cl-danger: #D92D20;

    --cl-bg:        #F4F6FB;
    --cl-bg-soft:   #FFFFFF;
    --cl-surface:   #FFFFFF;
    --cl-surface-2: #F3F6FC;
    --cl-surface-3: #E9EEF8;

    --cl-line:    rgba(16, 24, 40, .09);
    --cl-line-hi: rgba(16, 24, 40, .16);

    --cl-text:      #0F1729;
    --cl-text-dim:  #566076;
    --cl-text-mute: #7D879C;

    --cl-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --cl-shadow:    0 8px 24px -12px rgba(16, 24, 40, .18);
    --cl-shadow-lg: 0 24px 56px -24px rgba(16, 24, 40, .24);
    --cl-glow:      0 0 0 1px rgba(33, 111, 237, .25), 0 8px 28px -14px rgba(33, 111, 237, .45);

    --cl-cena-a: #0891B2;
    --cl-cena-b: #0E7490;

    --cl-zaslona: rgba(240, 243, 250, .9);
    --cl-tint:    rgba(33, 111, 237, .08);
    --cl-tint-hi: rgba(33, 111, 237, .14);

    --cl-grad-a:    #00A6FF;
    --cl-grad-b:    #0073FF;
    --cl-grad-a-hi: #1FB2FF;
    --cl-grad-b-hi: #0F82FF;

    --cl-glass: rgba(255, 255, 255, .82);

    --cl-nav-bg: rgba(255, 255, 255, .78);

    color-scheme: light;
}

/* ------------------------------------------------------- 2. RESET I PODSTAWY */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--cl-nav-h) + var(--cl-4));
    /* Kolor tła siedzi tutaj, a nie na `body`: nieprzezroczyste `body` zasłoniłoby
       warstwę dekoracji, która leży pod treścią (`.tlo`, z-index: -1). */
    background: var(--cl-bg);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--cl-text);
    font-family: var(--cl-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
img { height: auto; border: 0; }

a { color: var(--cl-brand-hi); text-decoration: none; }
a:hover { color: var(--cl-brand); }

button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--cl-font-nag);
    font-weight: 800; letter-spacing: -.025em; line-height: 1.14;
}
p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* Widoczny focus tylko z klawiatury - myszką obwódki nikt nie potrzebuje */
:focus-visible {
    outline: 2px solid var(--cl-brand-hi);
    outline-offset: 2px;
    border-radius: var(--cl-r-btn);
}

/* --- Tło strony ---
   Poza hero strona jest płaskim kolorem, więc na szerokim ekranie boki robią się
   martwe. Warstwy są przyklejone do okna (`fixed`) - nie przewijają
   się z treścią i nie rosną razem z długością strony:
     - dwie poświaty marki z przeciwnych narożników, dla głębi,
     - siatka kropek widoczna na marginesach i wygaszona pod kolumną treści.
   Całość jest dekoracją: `pointer-events: none` i `aria-hidden` w kodzie strony. */
.tlo {
    position: fixed; inset: 0; z-index: -1;
    overflow: hidden;
    pointer-events: none;
    /* Krycie ustawia skrypt na podstawie przewinięcia: pod hero dekoracja jest
       wygaszona, bo jej krawędź obcinała się o dolną granicę sekcji i tworzyła
       widoczny szew. Domyślna jedynka zostaje na wypadek braku JS-u - wtedy
       lepiej mieć tło z szwem niż płaską stronę. */
    opacity: 1;
    will-change: opacity;
}

.tlo::before, .tlo::after { content: ""; position: absolute; }
.tlo::before {
    top: -14vh; right: -10vw; width: 64vw; height: 72vh;
    background: radial-gradient(closest-side, rgba(0, 122, 255, .16), transparent 72%);
}
.tlo::after {
    bottom: -20vh; left: -14vw; width: 60vw; height: 68vh;
    background: radial-gradient(closest-side, rgba(0, 122, 255, .11), transparent 72%);
}

/* Maska liczona z szerokości kolumny treści, nie w procentach okna: dzięki temu
   kropki kończą się dokładnie tam, gdzie zaczyna się treść, niezależnie od
   rozdzielczości. Gdy margines znika (wąskie okno), maska gaśnie w całości. */
.tlo__siatka {
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(90deg,
        #000 0,
        #000 calc(50% - var(--cl-wrap) / 2),
        transparent calc(50% - var(--cl-wrap) / 2 + 90px),
        transparent calc(50% + var(--cl-wrap) / 2 - 90px),
        #000 calc(50% + var(--cl-wrap) / 2),
        #000 100%);
    mask-image: linear-gradient(90deg,
        #000 0,
        #000 calc(50% - var(--cl-wrap) / 2),
        transparent calc(50% - var(--cl-wrap) / 2 + 90px),
        transparent calc(50% + var(--cl-wrap) / 2 - 90px),
        #000 calc(50% + var(--cl-wrap) / 2),
        #000 100%);
}


[data-theme="light"] .tlo::before { background: radial-gradient(closest-side, rgba(0, 122, 255, .12), transparent 72%); }
[data-theme="light"] .tlo::after { background: radial-gradient(closest-side, rgba(0, 122, 255, .08), transparent 72%); }
[data-theme="light"] .tlo__siatka { background-image: radial-gradient(rgba(16, 24, 40, .11) 1px, transparent 1.4px); }

/* --- Zasłona wczytywania ---
   Pokazuje się na stronie, na którą wchodzisz - nie na tej, z której wychodzisz.
   Dzięki temu link działa natywnie (żadnego przejmowania kliknięcia i sztucznej
   zwłoki), a zasłona przykrywa dokument od pierwszego malowania i schodzi, gdy
   strona jest już złożona.

   Znika animacją CSS bez udziału JS-u: gdyby skrypt się nie wczytał albo padł,
   zasłona nie ma prawa zostać na ekranie i zasłonić całej strony. Dlatego
   `visibility` wchodzi do klatek animacji, a nie do klasy dokładanej skryptem. */
.zaslona {
    position: fixed; inset: 0; z-index: 300;
    display: grid; place-items: center;
    background: var(--cl-bg);
    pointer-events: none;
    animation: cl-zaslona-schodzi .42s var(--cl-ease) .22s both;
}

.zaslona__znak { width: 76px; height: auto; }

@keyframes cl-zaslona-schodzi {
    from { opacity: 1; visibility: visible; }
    99%  { opacity: 0; visibility: visible; }
    to   { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    /* bez przygaszania - zasłona schodzi od razu */
    .zaslona { animation-duration: .01s; animation-delay: 0s; }
}

/* Skok do treści dla czytników i klawiatury */
.skip {
    position: absolute; left: -9999px; top: 0;
    z-index: 100;
    padding: var(--cl-3) var(--cl-4);
    background: var(--cl-brand); color: var(--cl-brand-ink);
    border-radius: 0 0 var(--cl-r-btn) 0;
}
.skip:focus { left: 0; color: var(--cl-brand-ink); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------- 3. SIATKA I TYPOGRAFIA */

.wrap {
    width: 100%;
    max-width: var(--cl-wrap);
    margin: 0 auto;
    padding: 0 var(--cl-5);
}

.sekcja { padding: var(--cl-16) 0 var(--cl-20); }
.sekcja--luzna { padding: var(--cl-24) 0; }

/* Nagłówki: clamp trzyma proporcje od telefonu po duży monitor */
.h-xl { font-size: clamp(36px, 5.6vw, 62px); }
.h-l  { font-size: clamp(25px, 3.6vw, 38px); }
.h-m  { font-size: clamp(20px, 2.6vw, 26px); }

.lid {
    color: var(--cl-text-dim);
    font-size: clamp(16px, 1.8vw, 19.5px);
    line-height: 1.62;
}

.mute  { color: var(--cl-text-dim); }
.mute2 { color: var(--cl-text-mute); }
.mono  { font-family: var(--cl-mono); font-size: .92em; }

/* Nadtytuł sekcji - drobny, rozstrzelony, w kolorze marki */
.nad {
    display: inline-block;
    color: var(--cl-brand-hi);
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .09em;
}

/* --------------------------------------------- 4. PRZYCISKI I DROBIAZGI */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--cl-2);
    height: var(--cl-ctrl); padding: 0 14px;
    border: 1px solid transparent; border-radius: var(--cl-r-btn);
    background: var(--cl-surface-2); color: var(--cl-text);
    font-family: var(--cl-font-nag);
    font-size: 14px; font-weight: 700; letter-spacing: -.005em; white-space: nowrap;
    cursor: pointer;
    transition: background-color .14s var(--cl-ease), border-color .14s var(--cl-ease),
                color .14s var(--cl-ease), transform .14s var(--cl-ease);
}
.btn:hover { color: var(--cl-text); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary {
    /* bez ramki - przy gradiencie każda krawędź robi obwódkę w innym odcieniu */
    border: 0;
    background: linear-gradient(135deg, var(--cl-grad-a), var(--cl-grad-b));
    color: var(--cl-brand-ink);
}
.btn--primary:hover {
    background: linear-gradient(135deg, var(--cl-grad-a-hi), var(--cl-grad-b-hi));
    color: var(--cl-brand-ink);
}
/* Wciśnięcie gasi gradient - płaski, ciemniejszy kolor czyta się jak wgniecenie */
.btn--primary:active { background: var(--cl-brand-press); }

.btn--ghost { background: transparent; border-color: var(--cl-line-hi); color: var(--cl-text-dim); }
.btn--ghost:hover { background: var(--cl-surface-2); color: var(--cl-text); }

.btn--duzy { height: var(--cl-ctrl-duzy); padding: 0 24px; font-size: 15px; }

/* Ikonka-przycisk (motyw, hamburger) */
.ikonka {
    display: inline-grid; place-items: center;
    width: var(--cl-ctrl); height: var(--cl-ctrl); flex: none;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-btn);
    background: transparent; color: var(--cl-text-dim);
    cursor: pointer;
    transition: background-color .14s var(--cl-ease), color .14s var(--cl-ease), border-color .14s var(--cl-ease);
}
.ikonka:hover { background: var(--cl-surface-2); border-color: var(--cl-line-hi); color: var(--cl-text); }
.ikonka svg { width: 17px; height: 17px; }

.plakietka {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-full);
    background: var(--cl-surface-2);
    color: var(--cl-text-dim);
    font-size: 12.5px; font-weight: 500;
}
.plakietka--brand {
    padding: 6px 14px 6px 12px;
    border-color: transparent;
    background:
        linear-gradient(var(--cl-glass), var(--cl-glass)) padding-box,
        linear-gradient(120deg, rgba(59, 140, 255, .75), rgba(59, 140, 255, .18) 52%, rgba(59, 140, 255, .6)) border-box;
    color: var(--cl-brand-hi);
    font-weight: 500;
    box-shadow: 0 10px 26px -16px rgba(33, 111, 237, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.plakietka svg { width: 15px; height: 15px; flex: none; }

/* Wersja na nagłówki podstron: ta sama pigułka, ale czytana z dalszej odległości,
   bo stoi sama nad tytułem - nie jest tylko dopiskiem w treści. */
.plakietka--duza {
    gap: 9px;
    padding: 9px 18px 9px 15px;
    font-family: var(--cl-font-nag);
    font-size: 15px; font-weight: 600;
}
.plakietka--duza svg { width: 21px; height: 21px; }
/* Logo Hytale to kwadratowa ikona aplikacji - zaokrąglamy ją tak samo, jak
   w scenie karty w Ofercie, żeby nie wyglądała jak wklejony obrazek. */
.plakietka--duza img { width: 21px; height: 21px; border-radius: 5px; flex: none; }

.plakietka__kropka { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--cl-ok); flex: none; }

/* Rozchodzący się pierścień - sygnał „to jest nowe", widoczny kątem oka */
.plakietka__kropka::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--cl-ok);
    animation: cl-puls 2.4s var(--cl-ease) infinite;
}

@keyframes cl-puls {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* ------------------------------------------------- 5. GÓRNA NAWIGACJA */

.nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--cl-nav-bg);
    border-bottom: 1px solid transparent;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    transition: border-color .18s var(--cl-ease), box-shadow .18s var(--cl-ease);
}
/* Kreska i cień dopiero po odjechaniu od góry - na samej górze pasek ma zlewać się z tłem */
.nav.jest-przewiniety { border-bottom-color: var(--cl-line); box-shadow: var(--cl-shadow-sm); }

/* Wejście paska - klasę dokłada build tylko stronie głównej, podstrony mają
   pojawiać się od razu (klient wchodzi tam z linku, nie na powitanie). */
.nav--wejscie { animation: cl-nav .5s var(--cl-ease) both; }
.nav--wejscie .nav__logo { animation: cl-nav-el .5s var(--cl-ease) .08s both; }
.nav--wejscie .nav__linki a { animation: cl-nav-el .45s var(--cl-ease) .1s both; }
.nav--wejscie .nav__linki a:nth-child(2) { animation-delay: .16s; }
.nav--wejscie .nav__linki a:nth-child(3) { animation-delay: .22s; }
.nav--wejscie .nav__akcje > * { animation: cl-nav-el .45s var(--cl-ease) .26s both; }

@keyframes cl-nav {
    from { opacity: .4; transform: translateY(-12px); }
    to   { opacity: 1; transform: none; }
}

@keyframes cl-nav-el {
    from { opacity: .35; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nav--wejscie, .nav--wejscie * { animation: none !important; }
}

/* Trzy kolumny: skrajne równe, więc menu stoi dokładnie na środku paska
   niezależnie od szerokości logo i przycisków po prawej. */
.nav__in {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: var(--cl-4);
    height: var(--cl-nav-h);
}
.nav__logo  { justify-self: start; }
.nav__linki { justify-self: center; }
.nav__akcje { justify-self: end; }

.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { height: 26px; width: auto; display: block; }

.nav__linki { display: flex; align-items: center; gap: 2px; }
.nav__linki a {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--cl-ctrl); padding: 0 12px;
    border-radius: var(--cl-r-btn);
    color: var(--cl-text-dim);
    font-family: var(--cl-font-nag);
    font-size: 14px; font-weight: 600;
    transition: background-color .14s var(--cl-ease), color .14s var(--cl-ease);
}
.nav__linki a:hover { background: var(--cl-surface-2); color: var(--cl-text); }
.nav__linki a.jest-aktywny { color: var(--cl-text); }
/* Ikony konturowe przygaszamy razem z tekstem; kolorowe (grass) zostawiamy,
   bo wyblakły blok Minecrafta przestaje być rozpoznawalny. */
.nav__linki svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.nav__linki a:hover svg { opacity: .9; }
.nav__linki svg.ikona-kolor,
.nav__linki a:hover svg.ikona-kolor { width: 17px; height: 17px; opacity: 1; }

.nav__akcje { display: flex; align-items: center; gap: var(--cl-2); flex: none; }

.nav__burger { display: none; }

/* Rozwijane menu na telefonie */
.nav__mobile {
    display: none;
    border-top: 1px solid var(--cl-line);
    background: var(--cl-bg-soft);
    padding: var(--cl-4) 0 var(--cl-6);
}
.nav__mobile.jest-otwarte { display: block; }
.nav__mobile .wrap { display: grid; gap: var(--cl-1); }
.nav__mobile a {
    display: flex; align-items: center; gap: 10px;
    padding: 12px var(--cl-3);
    border-radius: var(--cl-r-btn);
    color: var(--cl-text); font-size: 15px; font-weight: 500;
}
.nav__mobile a:hover { background: var(--cl-surface-2); }
.nav__mobile a > svg { width: 18px; height: 18px; flex: none; opacity: .7; }
.nav__mobile a > svg.ikona-kolor { opacity: 1; }
.nav__mobile .nav__mobile-akcje a { justify-content: center; }
.nav__mobile .nav__mobile-akcje {
    display: grid; gap: var(--cl-2);
    margin-top: var(--cl-3); padding-top: var(--cl-4);
    border-top: 1px solid var(--cl-line);
}

@media (max-width: 900px) {
    .nav__linki { display: none; }
    .nav__akcje .btn--ghost { display: none; }
    .nav__burger { display: inline-grid; }
    /* Ukryte menu wypada z siatki, więc `1fr auto 1fr` wrzucało akcje do środkowej
       kolumny - ikony wisiały w połowie paska, a prawa krawędź stała pusta.
       Na telefonie wystarczy „logo z lewej, akcje z prawej". */
    .nav__in { display: flex; justify-content: space-between; gap: var(--cl-3); }

    /* Palec potrzebuje większego celu niż kursor - 36 px to za mało. */
    .nav__akcje .ikonka { width: 40px; height: 40px; }
    .nav__mobile-akcje .btn { height: 44px; font-size: 15px; }
    .nav__mobile a { padding: 13px var(--cl-3); }
}

@media (max-width: 480px) {
    .nav__akcje .btn--primary { display: none; }
}

/* ------------------------------------------------------------- 6. STOPKA */

.stopka {
    margin-top: var(--cl-20);
    border-top: 1px solid var(--cl-line);
    background: var(--cl-bg-soft);
}

.stopka__gora {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .95fr) minmax(0, .95fr) minmax(0, 1.45fr);
    gap: var(--cl-10) var(--cl-6);
    padding-top: var(--cl-16); padding-bottom: var(--cl-12);
}

.stopka__marka img { height: 26px; width: auto; display: block; }
.stopka__opis {
    margin-top: var(--cl-4);
    max-width: 34ch;
    color: var(--cl-text-dim);
    font-size: 14px; line-height: 1.7;
}
.stopka__spolecznosc { display: flex; gap: var(--cl-2); margin-top: var(--cl-5); }

.stopka__tytul {
    color: var(--cl-text);
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
}
.stopka__kol ul { display: grid; gap: 10px; margin-top: var(--cl-4); }
.stopka__kol a {
    color: var(--cl-text-dim);
    font-size: 14px; font-weight: 400;
}
.stopka__kol a:hover { color: var(--cl-text); }

.stopka__kol--dane {
    min-width: 0;
    padding: var(--cl-5);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface-2);
}
.stopka__kol--dane .stopka__tytul { color: var(--cl-text); }

.stopka__firma { margin-top: var(--cl-4); }
.stopka__kol--dane .stopka__firma { margin-top: var(--cl-3); }
.stopka__firma-nazwa { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }

.stopka__firma address {
    margin-top: 6px;
    color: var(--cl-text-dim);
    font-size: 13.5px; font-style: normal; line-height: 1.6;
}

/* NIP i KRS obok siebie, REGON pod nimi - trzy numery w słupku zajmowały
   pół kolumny i wyglądały jak formularz */
.stopka__firma-dane {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cl-3);
    margin: var(--cl-4) 0 0;
}
.stopka__firma-dane dt {
    color: var(--cl-text-mute);
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
}
.stopka__firma-dane dd {
    margin: 3px 0 0;
    color: var(--cl-text-dim);
    font-family: var(--cl-mono);
    font-size: 13px; letter-spacing: -.01em;
}

.stopka__firma-mail dd { font-family: var(--cl-font); font-size: 13.5px; }
.stopka__firma-mail a { color: var(--cl-text-dim); }
.stopka__firma-mail a:hover { color: var(--cl-brand-hi); }

.stopka__prawne-linki { display: grid; gap: 8px; margin-top: var(--cl-5); }
.stopka__prawne-linki li { display: flex; align-items: center; gap: 8px; }
.stopka__prawne-linki svg { width: 14px; height: 14px; flex: none; color: var(--cl-text-mute); }
.stopka__prawne-linki a { color: var(--cl-text-dim); font-size: 13.5px; }
.stopka__prawne-linki a:hover { color: var(--cl-text); }

/* Znak partnera platformy - tak samo jak na stronie gamehosta: mała etykieta
   i logo zamiast kolejnego linku tekstowego. */
.stopka__powered { display: flex; align-items: center; gap: 10px; }
.stopka__powered-lbl {
    color: var(--cl-text-mute);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.stopka__powered img { display: block; height: 22px; width: auto; }
[data-theme="light"] .stopka__powered img { filter: brightness(0) saturate(100%) invert(12%); }

.stopka__dol {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--cl-4);
    padding-top: var(--cl-5); padding-bottom: var(--cl-8);
    border-top: 1px solid var(--cl-line);
    color: var(--cl-text-mute);
    font-size: 13px;
}
.stopka__dol a { color: var(--cl-text-mute); }
.stopka__dol a:hover { color: var(--cl-text-dim); }
.stopka__prawne { display: flex; flex-wrap: wrap; gap: var(--cl-4); }

@media (max-width: 900px) {
    .stopka__gora { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .stopka__marka { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .stopka__gora { grid-template-columns: minmax(0, 1fr); gap: var(--cl-8); }
    .stopka__dol { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------ 7. SEKCJE STRONY GŁÓWNEJ */

/* ---------------------------------------------------------------- hero ---
   Tło to blokowy krajobraz (public/img/tlo-hero.svg, generowany przez
   narzedzia/tlo-hero.py). Leży przy dolnej krawędzi i jest przykryty gradientem
   w kolorze strony - inaczej tekst siedziałby na trawie i przestałby być czytelny. */

.hero {
    position: relative;
    display: flex; align-items: center;
    /* wysokość liczona z okna, ale z sufitem - na monitorze 4K sekcja nie ma
       urosnąć do dwóch metrów, a na laptopie ma zająć zdecydowaną większość ekranu */
    min-height: min(76vh, 700px);
    padding: var(--cl-16) 0 var(--cl-20);
    overflow: hidden;
}
.hero > .wrap { width: 100%; }

/* zdjęcie */
.hero__tlo { position: absolute; inset: 0; pointer-events: none; }

.hero__tlo::before {
    content: "";
    position: absolute; inset: 0;
    background: url("/img/tlo-hero.webp") center 58% / cover no-repeat;
}
/* Na jasnym motywie ciemny zrzut robiłby dziurę w układzie - przygaszamy go
   i dowietlamy zasłoną poniżej. */
[data-theme="light"] .hero__tlo { opacity: .55; }

/* zasłona: od góry i od lewej pełny kolor tła, w prawym dolnym rogu zdjęcie
   zostaje widoczne - tam nie ma tekstu, tylko render postaci */
.hero__tlo::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, var(--cl-bg) 0%, rgba(10, 13, 20, .74) 26%, rgba(10, 13, 20, .42) 58%, rgba(10, 13, 20, .80) 88%, var(--cl-bg) 100%),
        linear-gradient(to right, var(--cl-bg) 0%, rgba(10, 13, 20, .80) 24%, rgba(10, 13, 20, .22) 58%, rgba(10, 13, 20, .10) 100%);
}
[data-theme="light"] .hero__tlo::after {
    background:
        linear-gradient(to bottom, var(--cl-bg) 0%, rgba(244, 246, 251, .80) 26%, rgba(244, 246, 251, .55) 58%, rgba(244, 246, 251, .85) 88%, var(--cl-bg) 100%),
        linear-gradient(to right, var(--cl-bg) 0%, rgba(244, 246, 251, .84) 24%, rgba(244, 246, 251, .40) 58%, rgba(244, 246, 251, .25) 100%);
}

/* --- Wejście sekcji ---
   Jeden gest zamiast efektu: linie nagłówka wysuwają się zza maski, tło
   uspokaja skalę, reszta dochodzi minimalnym przesunięciem. Klasę dokłada
   skrypt i zdejmuje ją po zakończeniu - bez JS-u sekcja po prostu stoi
   gotowa, więc animacja nigdy nie ma szans niczego ukryć. */

/* Maska dla wiersza nagłówka - używa jej hero i nagłówki podstron */
.linia {
    display: block;
    overflow: hidden;
    /* zapas na poświatę gradientu - maska bez niego ścinałaby ją przy krawędzi */
    padding: .1em 0; margin: -.1em 0;
}

.hero--wejscie .hero__tytul .linia > span { display: block; animation: cl-linia .9s var(--cl-spokoj) both; }
.hero--wejscie .hero__tytul .linia:nth-child(2) > span { animation-delay: .08s; }

.hero--wejscie .hero__tlo::before { animation: cl-tlo 2s var(--cl-spokoj) both; }
.hero--wejscie .plakietka  { animation: cl-podnies .7s var(--cl-spokoj) .04s both; }
.hero--wejscie .hero__lid  { animation: cl-podnies .7s var(--cl-spokoj) .26s both; }
.hero--wejscie .hero__akcje > * { animation: cl-podnies .7s var(--cl-spokoj) .34s both; }
.hero--wejscie .hero__akcje > *:nth-child(2) { animation-delay: .4s; }
.hero--wejscie .hero__akcje > *:nth-child(3) { animation-delay: .46s; }
.hero--wejscie .hero__render img { animation: cl-render 1.2s var(--cl-spokoj) .1s both; }

@keyframes cl-linia {
    from { transform: translateY(108%); }
    to   { transform: none; }
}

@keyframes cl-podnies {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes cl-tlo {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: none; }
}

@keyframes cl-render {
    from { opacity: .3; transform: scale(1.05) translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.hero__uklad {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center; gap: var(--cl-10);
}

.hero__in { max-width: 700px; }
.hero__tytul { margin-top: var(--cl-4); }

/* Tekst wypełniony gradientem. Musi być przezroczysty, żeby tło przez niego
   przeszło - bez tego `background-clip: text` nic nie daje. Gradient jest
   szerszy niż napis i ma jasne pasmo w środku: przesunięcie tła (`cl-polysk`)
   przeciąga ten przebłysk przez litery. */
.tekst-grad {
    background: linear-gradient(115deg,
        var(--cl-grad-a) 0%, var(--cl-grad-b) 38%, #A9DEFF 50%, var(--cl-grad-b) 62%, var(--cl-grad-a) 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

/* Akcent w nagłówku - poświata słabsza niż przy cenie, bo litery są duże
   i przy mocniejszej robi się z tego neon. */
.hero__tytul .tekst-grad {
    background-image: linear-gradient(135deg, var(--cl-grad-a), var(--cl-grad-b));
    background-size: auto;
    background-position: 0 0;
    filter: drop-shadow(0 8px 26px rgba(0, 122, 255, .32));
}

.hero__kwota {
    font-variant-numeric: tabular-nums;
    /* poświata idzie filtrem, bo przezroczysty tekst nie przyjmie cienia */
    filter: drop-shadow(0 6px 22px rgba(0, 122, 255, .45));
}
[data-theme="light"] .hero__kwota { filter: drop-shadow(0 6px 20px rgba(0, 122, 255, .26)); }

/* Klasę dokłada skrypt, gdy licznik dojdzie do końca */
.hero__kwota.jest-gotowa {
    animation: cl-polysk 1.15s var(--cl-ease) .1s both,
               cl-strzal .45s var(--cl-ease) .1s;
}

@keyframes cl-polysk {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

@keyframes cl-strzal {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.035); }
    100% { transform: scale(1); }
}
.hero__lid { margin-top: var(--cl-5); max-width: 54ch; }
.hero__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cl-3); margin-top: var(--cl-8); }

/* „lub" i przycisk stoją w jednej klamrze: gdy rząd akcji się łamie, rozdzielnik
   ma zejść do nowej linii razem z przyciskiem, a nie zostać dyndać na końcu
   poprzedniej. */
.hero__druga-droga { display: inline-flex; align-items: center; gap: var(--cl-3); }

/* „lub" między dwiema drogami dalej. Wersaliki robi CSS, a w kodzie zostaje małe
   słowo - czytnik ekranu przeczytałby wielkie litery jako skrót „L-U-B".
   Element jest tylko rozdzielnikiem wizualnym, stąd `aria-hidden` w kodzie. */
.hero__lub {
    padding: 0 2px;
    color: var(--cl-text-mute);
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}

/* Box z ceną - to samo szkło i ta sama ramka z gradientu co plakietka nad
   nagłówkiem, żeby oba elementy czytały się jako jedna rodzina. */
.hero__cennik {
    display: inline-flex; flex-wrap: wrap;
    align-items: baseline; align-content: center; justify-content: center;
    gap: 8px;
    height: var(--cl-ctrl-duzy);
    padding: 0 18px;
    border: 1px solid transparent; border-radius: 12px;
    background:
        linear-gradient(var(--cl-glass), var(--cl-glass)) padding-box,
        linear-gradient(120deg, rgba(0, 166, 255, .7), rgba(0, 115, 255, .18) 55%, rgba(0, 166, 255, .55)) border-box;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero__cennik-lbl { color: var(--cl-text-dim); font-size: 13px; font-weight: 500; }
.hero__cennik-okres { color: var(--cl-text-mute); font-size: 12.5px; font-weight: 500; }

.hero__cennik .hero__kwota {
    font-family: var(--cl-font-nag);
    font-size: 25px; font-weight: 800; letter-spacing: -.02em;
    line-height: 1;
}

@media (max-width: 420px) {
    /* przy tej szerokości box i przyciski i tak stają jeden pod drugim */
    .hero__cennik { width: 100%; justify-content: center; }
}

/* Render postaci - dół wygaszony maską, bo plik jest ucięty w pasie */
.hero__render { position: relative; display: grid; place-items: center; min-height: 460px; }

.hero__render img {
    position: relative;
    width: min(100%, 500px);
    filter: drop-shadow(0 26px 32px rgba(0, 0, 0, .55));
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 98%);
            mask-image: linear-gradient(to bottom, #000 74%, transparent 98%);
}
[data-theme="light"] .hero__render img { filter: drop-shadow(0 26px 32px rgba(16, 24, 40, .28)); }

/* niskie okno: liczy się każdy piksel wysokości */
@media (max-height: 820px) {
    .hero { min-height: 0; padding: var(--cl-10) 0 var(--cl-12); }
    .hero__render { min-height: 380px; }
    .hero__render img { width: min(100%, 430px); }
    .hero__lid { margin-top: var(--cl-4); }
    .hero__akcje { margin-top: var(--cl-6); }
}

@media (max-height: 720px) {
    .hero { padding: var(--cl-8) 0 var(--cl-10); }
    .hero .h-xl { font-size: clamp(30px, 4.2vw, 46px); }
    .hero__render { min-height: 300px; }
    .hero__render img { width: min(100%, 360px); }
}

@media (max-width: 1024px) {
    .hero__uklad { grid-template-columns: minmax(0, 1fr); gap: var(--cl-8); }
    .hero__in { max-width: none; }
    .hero__render { min-height: 0; }
    .hero__render img { width: min(72%, 320px); }
}

/* Siatka kart - używana przez kolejne sekcje */
.siatka { display: grid; gap: var(--cl-4); }
.siatka--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }


/* --- Karta usługi (sekcja „Oferta") ---
   Każda usługa ma swój akcent (--akcent), którym barwimy scenę z grafiką
   i poświatę pod nią. Reszta karty jest wspólna, więc trzy różne marki
   układają się w jeden rytm zamiast trzech osobnych stylów. */

.usluga {
    display: flex; flex-direction: column;
    padding: var(--cl-5);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg);
    background: var(--cl-surface);
}

.usluga--mc     { --akcent: 124, 194, 75; }
.usluga--hytale { --akcent: 63, 208, 201; }
.usluga--dc     { --akcent: 88, 101, 242; }
.usluga--darmowy { --akcent: 74, 222, 128; }

/* Cztery usługi w jednym rzędzie. `auto-fit` z minimum 280 px mieściło tylko trzy
   (kolumna treści ma 1160 px), więc czwarta karta zostawała sama w drugim rzędzie. */
.uslugi-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cl-4); }

@media (max-width: 1040px) { .uslugi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .uslugi-4 { grid-template-columns: minmax(0, 1fr); } }

/* Scena z grafiką - kadr z gry pod przyciemnieniem, żeby logo czytało się na
   nim tak samo pewnie niezależnie od tego, jak jasne jest zdjęcie.
   Uwaga: scena nie ma ramki celowo - przy półprzezroczystej krawędzi tło
   malowało się także pod nią i przez 1 px prześwitywał nieprzyciemniony kadr. */
.usluga__scena {
    position: relative;
    display: grid; place-items: center;
    height: 148px;
    border-radius: var(--cl-r);
    background: var(--cl-surface-2) center / cover no-repeat;
    overflow: hidden;
}

.usluga__scena::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(58% 62% at 50% 50%, rgba(var(--akcent), .18), transparent 72%),
        linear-gradient(180deg, rgba(8, 11, 18, .72), rgba(8, 11, 18, .86));
}
.usluga--mc     .usluga__scena { background-image: url("/img/uslugi/tlo-minecraft.webp"); }
.usluga--hytale .usluga__scena { background-image: url("/img/uslugi/tlo-hytale.webp"); }
.usluga--dc     .usluga__scena { background-image: url("/img/uslugi/tlo-discord.webp"); }
.usluga__scena img,
.usluga__scena svg {
    position: relative;
    z-index: 1;
    width: 76px; height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .6));
}
.usluga--hytale .usluga__scena img { border-radius: 14px; }

/* Darmowe serwery: kadr ten sam, co przy Minecrafcie, ale w scenie stoi ikona
   bloku ziemi, a nie ten sam render - dwa identyczne obrazki obok siebie
   wyglądałyby na pomyłkę. */
.usluga--darmowy .usluga__scena { background-image: url("/img/uslugi/tlo-minecraft.webp"); }
/* render z wiki jest pikselowy - wygładzanie rozmyłoby teksturę */
.usluga--darmowy .usluga__scena img { image-rendering: pixelated; }

/* Plakietka stoi w wierszu nagłówka, nie na scenie: nazwa „Darmowe serwery
   Minecraft" łamała się na dwie linijki i rozjeżdżała kartę względem sąsiadów. */
/* Nazwa i plakietka w jednym wierszu jako flex: przy `inline-block` plakietka
   podnosiła wysokość linii, a przy 278 px karty łamała się do drugiej linijki.
   Metryki plakietki są ciasne właśnie po to, żeby zmieściła się obok nazwy. */
.usluga__nazwa { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.usluga__znak {
    padding: 3px 8px;
    border: 1px solid rgba(74, 222, 128, .4); border-radius: var(--cl-r-full);
    background: rgba(74, 222, 128, .16);
    color: #4ADE80;
    font-family: var(--cl-font-nag);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    white-space: nowrap;
}
[data-theme="light"] .usluga__znak { color: #15803D; }
.usluga--dc .usluga__scena svg { color: #8A95F7; filter: drop-shadow(0 10px 18px rgba(88, 101, 242, .5)); }


.usluga__nazwa { margin-top: var(--cl-5); font-size: 19px; }
.usluga__opis {
    margin-top: var(--cl-2);
    color: var(--cl-text-dim);
    font-size: 14.5px; line-height: 1.6;
}

/* Stopka dosuwa się do dołu, więc ceny i przyciski stoją w równej linii
   niezależnie od długości opisu. Kreska oddziela ofertę od jej ceny. */
.usluga__stopka {
    margin-top: auto;
    padding-top: var(--cl-4);
    border-top: 1px solid var(--cl-line);
}
.usluga__cena {
    display: flex; align-items: baseline; justify-content: center; gap: 6px;
    color: var(--cl-text-dim);
    /* jeden stopień pisma dla całego wiersza - kwota wybija się kolorem i wagą,
       nie rozmiarem, więc linia nie skacze */
    font-size: 16px;
}
.usluga__cena b {
    background-image: linear-gradient(135deg, var(--cl-grad-a), var(--cl-grad-b));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-family: var(--cl-font-nag);
    font-weight: 800; letter-spacing: -.01em;
}

.usluga__akcja { width: 100%; margin-top: var(--cl-4); }

/* --- Sekcja „O nas" ze statystykami --- */
.onas {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center; gap: var(--cl-12);
    padding: var(--cl-10);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-xl);
    /* dwie poświaty z przeciwnych rogów + siatka kropek; bez nich karta była
       jednolitą płaszczyzną, na której treść wyglądała na zagubioną */
    background:
        radial-gradient(70% 120% at 100% 0%, var(--cl-tint-hi), transparent 60%),
        radial-gradient(60% 100% at 0% 100%, rgba(0, 166, 255, .07), transparent 62%),
        var(--cl-surface);
    overflow: hidden;
}

.onas::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 22px 22px;
    color: var(--cl-text-mute);
    opacity: .16;
    /* kropki gasną w stronę treści, żeby nie przeszkadzały w czytaniu */
    -webkit-mask-image: radial-gradient(80% 90% at 88% 12%, #000, transparent 70%);
            mask-image: radial-gradient(80% 90% at 88% 12%, #000, transparent 70%);
    pointer-events: none;
}

/* Znak marki jako wodny nadruk - duży, ledwo widoczny, wychodzi poza kadr */
.onas__znak {
    position: absolute; right: -70px; bottom: -90px;
    width: 320px; height: auto;
    opacity: .06;
    pointer-events: none;
}
[data-theme="light"] .onas__znak { opacity: .09; }

.onas__tresc, .statystyki { position: relative; }
.onas__tresc h2 { margin-top: var(--cl-3); }
.onas__tresc .lid { margin-top: var(--cl-4); }

.statystyki { display: grid; gap: var(--cl-3); }

.statystyka {
    display: flex; align-items: baseline; gap: var(--cl-4);
    padding: var(--cl-4) var(--cl-5);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface-2);
}
.statystyka b {
    min-width: 4.6em;
    background-image: linear-gradient(135deg, var(--cl-grad-a), var(--cl-grad-b));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-family: var(--cl-font-nag);
    font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; letter-spacing: -.02em;
    /* cyfry o równej szerokości - inaczej licznik przy każdej klatce
       przesuwałby tekst obok siebie */
    font-variant-numeric: tabular-nums;
}
.statystyka span { color: var(--cl-text-dim); font-size: 14.5px; }

@media (max-width: 900px) {
    .onas { grid-template-columns: minmax(0, 1fr); gap: var(--cl-8); padding: var(--cl-6); }
}

/* --- Pokaz panelu ---
   Zrzuty siedzą w ramce udającej okno przeglądarki - bez niej wyglądają jak
   przypadkowe obrazki wklejone w stronę. Przełączanie widoków to zwykłe
   pokazywanie/chowanie, więc bez JS-u widać pierwszy zrzut i nic nie znika. */

.pokaz { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--cl-6); align-items: start; }

.pokaz__wybor { display: grid; gap: var(--cl-2); }

.pokaz__poz {
    display: grid; gap: 4px;
    padding: var(--cl-4);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface);
    text-align: left; cursor: pointer;
    transition: border-color .14s var(--cl-ease), background-color .14s var(--cl-ease);
}
.pokaz__poz b { font-family: var(--cl-font-nag); font-size: 15px; font-weight: 700; }
.pokaz__poz span { color: var(--cl-text-dim); font-size: 13.5px; line-height: 1.5; }
.pokaz__poz:hover { border-color: var(--cl-line-hi); }
.pokaz__poz.jest-aktywna {
    border-color: rgba(0, 122, 255, .45);
    background: var(--cl-tint);
}
.pokaz__poz.jest-aktywna b { color: var(--cl-brand-hi); }

.pokaz__ekran {
    border: 1px solid var(--cl-line-hi); border-radius: var(--cl-r-lg);
    background: var(--cl-surface-2);
    overflow: hidden;
    box-shadow: var(--cl-shadow-lg);
}

/* pasek okna: trzy kropki i adres - tyle wystarczy, żeby zrzut czytał się
   jako ekran aplikacji, a nie jako obrazek */
.pokaz__pasek {
    display: flex; align-items: center; gap: 7px;
    padding: 10px var(--cl-4);
    border-bottom: 1px solid var(--cl-line);
    background: var(--cl-surface);
}
.pokaz__pasek > span { width: 9px; height: 9px; border-radius: 50%; background: var(--cl-surface-3); }
.pokaz__adres {
    margin: 0 auto;
    padding: 3px 14px;
    border-radius: var(--cl-r-full);
    background: var(--cl-surface-2);
    color: var(--cl-text-mute);
    font-size: 11.5px;
}

.pokaz__obraz { display: block; width: 100%; height: auto; }
/* `display: block` powyżej bije domyślną regułę przeglądarki dla [hidden],
   więc ukrycie trzeba powtórzyć jawnie - inaczej wszystkie zrzuty są widoczne */
.pokaz__obraz[hidden] { display: none; }

@media (max-width: 900px) {
    .pokaz { grid-template-columns: minmax(0, 1fr); }
    .pokaz__poz span { display: none; }   /* na telefonie liczy się sama nazwa widoku */
    .pokaz__wybor { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* --- Jak zacząć: cztery kroki ---
   Numery spina cienka linia w tle, żeby układ czytał się jako kolejność,
   a nie cztery niezależne kafelki. Linia jest dekoracją, więc znika razem
   z siatką na wąskim ekranie. */

.kroki {
    position: relative;
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: var(--cl-6);
    counter-reset: krok;
}

.kroki::before {
    content: "";
    position: absolute; top: 22px; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cl-line-hi) 12%, var(--cl-line-hi) 88%, transparent);
}

.krok { position: relative; }

.krok__nr {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-grad-a), var(--cl-grad-b));
    color: var(--cl-brand-ink);
    font-family: var(--cl-font-nag);
    font-size: 17px; font-weight: 800;
    /* obwódka w kolorze tła odcina numer od linii biegnącej pod nim */
    box-shadow: 0 0 0 6px var(--cl-bg);
}

.krok__tytul { margin-top: var(--cl-4); font-size: 17px; }
.krok__opis {
    margin-top: var(--cl-2);
    color: var(--cl-text-dim);
    font-size: 14.5px; line-height: 1.6;
}

.kroki__stopka {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--cl-4);
    margin-top: var(--cl-10);
    padding-top: var(--cl-6);
    border-top: 1px solid var(--cl-line);
}
.kroki__stopka span { color: var(--cl-text-dim); font-size: 14px; }

@media (max-width: 900px) {
    .kroki { gap: var(--cl-5); }
    .kroki::before { display: none; }
}

/* --- Karuzela paczek modów ---
   Dwa pasy kafli jadące w przeciwne strony. Tor ma dwie identyczne grupy i
   przesuwa się dokładnie o połowę swojej szerokości, więc pętla wraca do klatki
   startowej bez przerwy - stąd wymóg, żeby generator (narzedzia/modpacki.py)
   zawsze dublował kafle. Ruch jest dekoracją: kafle są w kodzie strony, więc bez
   animacji po prostu stoją. */

.sekcja--paczki { padding-bottom: var(--cl-16); }

.karuzela {
    position: relative;
    overflow: hidden;
    padding: var(--cl-1) 0;
    /* brzegi gasną - inaczej kafel ucinałby się w pół na krawędzi okna */
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.karuzela + .karuzela { margin-top: var(--cl-4); }

.karuzela__tor {
    display: flex; width: max-content;
    animation: cl-karuzela 70s linear infinite;
    /* Kafle są dekoracją: kursor ich nie dotyka, więc nic się nie zatrzymuje, nie
       podświetla i nie da się ich zaznaczyć ani przeciągnąć. Zdarzenia zostają na
       samej karuzeli, żeby przy „ogranicz animacje" dało się przewinąć pas palcem. */
    pointer-events: none;
    user-select: none; -webkit-user-select: none;
}
.karuzela--wstecz .karuzela__tor { animation-duration: 88s; animation-direction: reverse; }

.karuzela__grupa { display: flex; gap: var(--cl-4); padding-right: var(--cl-4); }

@keyframes cl-karuzela {
    from { transform: none; }
    to   { transform: translateX(-50%); }
}

.paczka { width: 104px; margin: 0; }
.paczka__obraz {
    display: block; width: 104px; height: 104px;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface-2);
    object-fit: cover;
}
.paczka__nazwa {
    /* dwie linijki na sztywno, żeby dłuższe tytuły nie rozjeżdżały wysokości pasa */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    height: 28px; overflow: hidden;
    margin-top: var(--cl-2);
    color: var(--cl-text-mute);
    font-size: 11.5px; font-weight: 500; line-height: 1.2; text-align: center;
}
@media (max-width: 640px) {
    .paczka, .paczka__obraz { width: 84px; }
    .paczka__obraz { height: 84px; }
}

/* przy „ogranicz animacje" pas stoi, ale zostaje przewijalny palcem */
@media (prefers-reduced-motion: reduce) {
    .karuzela { overflow-x: auto; }
    .karuzela__tor { animation: none; }
}

.zrodla {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cl-2);
    margin-top: var(--cl-8);
}
.zrodla li {
    padding: 7px 14px;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-full);
    background: var(--cl-surface-2);
    color: var(--cl-text-dim);
    font-family: var(--cl-font-nag);
    font-size: 12.5px; font-weight: 600;
}
.zrodla__opis {
    max-width: 52ch; margin: var(--cl-4) auto 0;
    color: var(--cl-text-mute);
    font-size: 13.5px; line-height: 1.6; text-align: center;
}

/* --- Co jest w każdym pakiecie ---
   Bento: dwa szersze kafle, trzy zwykłe i pas na dole. Nierówny rytm zamiast
   sześciu identycznych prostokątów, a w każdym kaflu atrapa fragmentu panelu -
   dzięki niej karta pokazuje rzecz, o której mówi, zamiast samego opisu.
   Atrapy są dekoracją: to zwykły tekst, nic się w nich nie klika. */

.wcenie { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--cl-4); }

.wcenie__poz {
    position: relative;
    grid-column: span 2;
    display: flex; flex-direction: column;
    padding: var(--cl-6);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg);
    background:
        radial-gradient(90% 70% at 0% 0%, var(--cl-tint), transparent 62%),
        var(--cl-surface);
}
.wcenie__poz--szeroka { grid-column: span 3; }

/* Pas na dole: ikona, tekst i atrapa w jednej linii - zamyka sekcję czymś innym
   niż kolejny prostokąt tej samej szerokości. */
.wcenie__poz--pas {
    grid-column: span 6;
    flex-direction: row; align-items: center; gap: var(--cl-5);
}
.wcenie__poz--pas .wcenie__tytul { margin-top: 0; }
.wcenie__pas-tresc { flex: 1; min-width: 0; }

.wcenie__ikona {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex: none;
    border: 1px solid rgba(0, 122, 255, .28); border-radius: var(--cl-r-btn);
    background: var(--cl-tint-hi);
    color: var(--cl-brand-hi);
}
.wcenie__ikona svg { width: 20px; height: 20px; }

.wcenie__tytul {
    margin-top: var(--cl-4);
    font-family: var(--cl-font-nag);
    font-size: 16px; font-weight: 700;
}
.wcenie__tresc { margin-top: var(--cl-2); color: var(--cl-text-dim); font-size: 14px; line-height: 1.65; }

/* --- Atrapy fragmentów panelu --- */
.atrapa {
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-btn);
    background: var(--cl-surface-2);
    font-size: 12.5px;
}

/* Atrapa idzie do dna kafla (`auto`), a minimalny odstęp od opisu trzyma margines
   akapitu - dzięki temu w całym wierszu atrapy stoją w jednej linii niezależnie
   od tego, ile linijek ma opis. */
.wcenie__poz .atrapa { margin-top: auto; }
.wcenie__poz .wcenie__tresc { margin-bottom: var(--cl-5); }
.wcenie__poz--pas .atrapa { margin: 0; }
.wcenie__poz--pas .wcenie__tresc { margin-bottom: 0; }

.atrapa li { display: flex; align-items: center; gap: var(--cl-2); padding: 8px 11px; }
.atrapa li + li { border-top: 1px solid var(--cl-line); }

.atrapa--adres { display: flex; align-items: center; gap: var(--cl-2); padding: 9px 11px; }
.atrapa--adres .mono { font-size: 13px; color: var(--cl-text-dim); }
.atrapa--adres .mono b { color: var(--cl-text); font-weight: 600; }
.atrapa__kropka { width: 7px; height: 7px; border-radius: 50%; background: var(--cl-ok); flex: none; }
.atrapa__znak {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--cl-r-full);
    background: var(--cl-tint-hi);
    color: var(--cl-brand-hi);
    font-size: 11px; font-weight: 600;
}

.atrapa--sklep li b { margin-left: auto; color: var(--cl-brand-hi); font-weight: 700; }
.atrapa--sklep li span, .atrapa--plan li span, .atrapa--ekipa li span { color: var(--cl-text-dim); }

/* moment zakupu: wiersz na chwilę się rozświetla, a kwota zmienia kolor na zielony */
.atrapa--sklep li { transition: background-color .25s var(--cl-ease); }
.atrapa--sklep li.jest-kupione { background: var(--cl-tint-hi); }
.atrapa--sklep li.jest-kupione b { color: var(--cl-ok); }

.atrapa__suma { background: var(--cl-surface-3); }
.atrapa__suma span { font-size: 11.5px; }
.atrapa__suma b { margin-left: auto; color: var(--cl-text); font-weight: 700; font-variant-numeric: tabular-nums; }

.atrapa--plan li b {
    width: 44px; flex: none;
    color: var(--cl-text);
    font-family: var(--cl-mono); font-size: 12px; font-weight: 600;
}
.atrapa--plan li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* wykonanie zadania: wiersz się podświetla i pokazuje plakietkę „zrobione".
   Plakietka jest w układzie od początku (tylko niewidoczna), więc nic nie skacze. */
.atrapa--plan li { transition: background-color .25s var(--cl-ease); }
.atrapa--plan li.jest-teraz { background: var(--cl-tint-hi); }
.atrapa--plan li em {
    margin-left: auto; flex: none;
    padding: 1px 7px;
    border-radius: var(--cl-r-full);
    background: rgba(34, 197, 94, .16);
    color: #4ADE80;
    font-size: 10px; font-weight: 700; font-style: normal;
    opacity: 0; transform: translateX(4px);
    transition: opacity .22s var(--cl-ease), transform .22s var(--cl-ease);
}
.atrapa--plan li.jest-teraz em { opacity: 1; transform: none; }
[data-theme="light"] .atrapa--plan li em { color: #15803D; }

.atrapa--ekipa li i {
    display: grid; place-items: center;
    width: 22px; height: 22px; flex: none;
    border-radius: 50%;
    background: var(--cl-tint-hi);
    color: var(--cl-brand-hi);
    font-family: var(--cl-font-nag);
    font-size: 10px; font-weight: 700; font-style: normal;
}

/* Konsola: dwie linijki, nowa dopisuje się na dole, starsza przygasa - tak samo
   jak w panelu, tylko w miniaturze. */
.atrapa--konsola {
    display: grid; gap: 2px;
    padding: 9px 11px;
    color: var(--cl-text-dim);
    font-size: 12px; line-height: 1.5;
}
.atrapa__linia { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.atrapa__linia:first-child { opacity: .5; }
.atrapa__linia.jest-nowa { animation: cl-wiersz .3s var(--cl-spokoj) both; }
.atrapa__czas { color: var(--cl-text-mute); }

/* uprawnienia zapalają się jedno po drugim - jak zaznaczanie zakresu w panelu */
.atrapa__prawa { display: flex; flex-wrap: wrap; gap: 4px; }
.atrapa__prawa em {
    padding: 2px 7px;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-full);
    background: var(--cl-surface-3);
    color: var(--cl-text-mute);
    font-size: 10.5px; font-weight: 600; font-style: normal;
    transition: background-color .22s var(--cl-ease), color .22s var(--cl-ease), border-color .22s var(--cl-ease);
}
.atrapa__prawa em.jest-wlaczone {
    border-color: rgba(0, 122, 255, .45);
    background: var(--cl-tint-hi);
    color: var(--cl-brand-hi);
}

.atrapa--zmiana {
    display: flex; align-items: center; gap: var(--cl-2);
    padding: 8px 12px;
    color: var(--cl-text-mute);
    font-family: var(--cl-font-nag); font-weight: 600;
}
.atrapa--zmiana svg { width: 15px; height: 15px; }
.atrapa--zmiana .jest-mocna { color: var(--cl-brand-hi); }
.atrapa--zmiana span { font-variant-numeric: tabular-nums; }
.atrapa--zmiana span.jest-podmieniony { animation: cl-podmiana .34s var(--cl-spokoj) both; }

@keyframes cl-podmiana {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}

/* --- Wejście kafli ---
   Kafel wchodzi, gdy wjedzie w kadr (obserwator w site.js), i od razu ciągnie za
   sobą swoje wnętrze: płytkę ikony, atrapę i jej wiersze. Opóźnienie w `--op`
   ustawia szyk w obrębie wiersza siatki, żeby kafle nie startowały ławą.
   Bez JS-u żadna z tych reguł nie działa i sekcja stoi gotowa. */

.wcenie__poz.jest-czekajaca { opacity: 0; }

.wcenie__poz.jest-wchodzaca { animation: cl-podnies .62s var(--cl-spokoj) var(--op, 0s) both; }
.wcenie__poz.jest-wchodzaca .wcenie__ikona { animation: cl-plyta .5s var(--cl-spokoj) calc(var(--op, 0s) + .08s) both; }
.wcenie__poz.jest-wchodzaca .atrapa { animation: cl-podnies .5s var(--cl-spokoj) calc(var(--op, 0s) + .18s) both; }
.wcenie__poz.jest-wchodzaca .atrapa li { animation: cl-wiersz .42s var(--cl-spokoj) calc(var(--op, 0s) + .3s) both; }
.wcenie__poz.jest-wchodzaca .atrapa li:nth-child(2) { animation-delay: calc(var(--op, 0s) + .38s); }

/* szyk liczony po pozycji w wierszu bento: 2 kafle, potem 3, na końcu pas */
.wcenie__poz:nth-child(2), .wcenie__poz:nth-child(4) { --op: .08s; }
.wcenie__poz:nth-child(5) { --op: .16s; }

@keyframes cl-plyta {
    from { opacity: 0; transform: scale(.84); }
    to   { opacity: 1; transform: none; }
}

@keyframes cl-wiersz {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

/* --- Życie w atrapach ---
   Trzy drobiazgi, które mają dać wrażenie, że to zrzut czegoś działającego:
   tętniąca kropka przy adresie, mrugający kursor w konsoli i strzałka
   popychająca pakiet w górę. Nic więcej, bo pięć ruchomych rzeczy naraz
   przestaje być tłem i zaczyna rozpraszać. */

.atrapa__kropka::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--cl-ok);
    animation: cl-puls 2.4s var(--cl-ease) infinite;
}
.atrapa__kropka { position: relative; }

.atrapa__kursor {
    display: inline-block;
    width: 6px; height: 12px;
    margin-left: 3px; vertical-align: -1px;
    background: var(--cl-brand-hi);
    animation: cl-mruga 1.1s steps(1, end) infinite;
}
/* w trakcie pisania kursor stoi zapalony - mruganie w połowie wyrazu wygląda
   jak zacięcie, a nie jak ktoś, kto właśnie wpisuje adres */
.atrapa--adres.jest-pisze .atrapa__kursor { animation: none; opacity: 1; }
/* Szerokości nie rezerwujemy: kursor ma stać przy ostatniej literze, a końcówka
   `.cldly.gg` przesuwa się razem z nią, tak jak przy pisaniu w prawdziwym polu.
   Nic obok tego nie skacze, bo plakietka po prawej jest dosunięta do krawędzi. */

@keyframes cl-mruga {
    0%, 50%      { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

.atrapa--zmiana svg { animation: cl-strzalka 2.8s var(--cl-ease) infinite; }

@keyframes cl-strzalka {
    0%, 62%, 100% { transform: none; }
    31%           { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .atrapa__kropka::after, .atrapa__kursor, .atrapa--zmiana svg { animation: none; }
    .atrapa__kursor { opacity: .6; }
}

@media (max-width: 1040px) {
    /* cztery kolumny: kafle łączą się w pary, pas zostaje na całą szerokość */
    .wcenie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .wcenie__poz, .wcenie__poz--szeroka { grid-column: span 2; }
    .wcenie__poz--pas { grid-column: span 4; }

    /* Pięć kafli w parach zostawia jednego samego w wierszu i dziurę obok -
       piąty rozciągamy na całą szerokość, żeby wiersz był domknięty. */
    .wcenie__poz:nth-child(5) { grid-column: span 4; }
}

@media (max-width: 640px) {
    .wcenie { grid-template-columns: minmax(0, 1fr); }
    /* `nth-child(5)` z szerszego zapytania jest bardziej szczegółowy od `.wcenie__poz`,
       więc trzeba go skasować jawnie - inaczej rozciąga siatkę na cztery kolumny
       i strona łapie poziome przewijanie. */
    .wcenie__poz, .wcenie__poz--szeroka, .wcenie__poz--pas, .wcenie__poz:nth-child(5) { grid-column: span 1; }

    /* pas przestaje być pasem - na telefonie nie ma jak zmieścić trzech rzeczy w linii */
    .wcenie__poz--pas { flex-direction: column; align-items: flex-start; gap: 0; }
    .wcenie__poz--pas .wcenie__tytul { margin-top: var(--cl-4); }
    .wcenie__poz--pas .atrapa { margin-top: var(--cl-5); }
}

/* --- Zachęta do konfiguratora ---
   Niski pas pod kartami: render po lewej, tekst w środku, przycisk po prawej.
   Karta ma `overflow: visible`, więc postać może wystawać ponad jej krawędź -
   dlatego rezerwujemy górny margines, żeby nie weszła na ostatni rząd pakietów. */

.pakiet-cta {
    position: relative;
    display: flex; align-items: center; gap: var(--cl-6);
    /* Margines większy od tego, co postać wystaje ponad kartę (210 px renderu
       minus wysokość pasa), inaczej korona nachodziła na dolną krawędź ostatniego
       pakietu i wyglądało to jak pomyłka. */
    margin-top: 132px;
    padding: var(--cl-5) var(--cl-6) var(--cl-5) 210px;
    border: 1px solid rgba(0, 122, 255, .35); border-radius: var(--cl-r-lg);
    background:
        radial-gradient(90% 140% at 12% 50%, var(--cl-tint-hi), transparent 62%),
        var(--cl-surface);
}

.pakiet-cta__render {
    position: absolute; left: var(--cl-5); bottom: -1px;
    width: auto; height: 210px;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .5));
    pointer-events: none;
}

.pakiet-cta__tresc { flex: 1; min-width: 0; }
.pakiet-cta__tytul { font-family: var(--cl-font-nag); font-size: 21px; font-weight: 700; }
.pakiet-cta__opis { margin-top: 6px; color: var(--cl-text-dim); font-size: 14.5px; line-height: 1.6; }
.pakiet-cta__akcja { flex: none; }

@media (max-width: 860px) {
    /* na wąskim ekranie render zjadałby całą szerokość - zostaje sam tekst
       i przycisk, wyśrodkowane jeden pod drugim */
    .pakiet-cta {
        flex-direction: column; text-align: center;
        gap: var(--cl-4);
        margin-top: var(--cl-6);
        padding: var(--cl-6);
    }
    .pakiet-cta__render { display: none; }
    .pakiet-cta__akcja { width: 100%; }
}

/* --- Gotowe paczki pluginów ---
   Bento: trzy węższe kafle w pierwszym rzędzie, dwa szersze w drugim. Pięć kart
   w równych kolumnach zostawiałoby dziurę w ostatnim wierszu, a przy okazji
   szersze kafle mają miejsce na plakietkę z wymaganym pakietem.

   Każdy tryb ma swój akcent (`--akcent`), którym świeci scena z ikoną. Kolor
   siedzi wyłącznie w tle obrazka, więc kafle się różnią, a sekcja nie robi się
   tęczowa. */

.tryby { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--cl-4); }

.tryb {
    grid-column: span 2;
    display: flex; flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg);
    background: var(--cl-surface);
}
.tryb--szeroki { grid-column: span 3; flex-direction: row; }

/* Scena pod ikonę: poświata w kolorze trybu i ta sama siatka kropek, co w tle
   strony - kafel wygląda przez to jak wycinek strony, a nie obca naklejka. */
.tryb__scena {
    position: relative;
    display: grid; place-items: center;
    min-height: 150px;
    padding: var(--cl-5);
    background:
        radial-gradient(closest-side, rgba(var(--akcent), .22), transparent 72%),
        radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 22px 22px,
        var(--cl-surface-2);
}
.tryb--szeroki .tryb__scena { min-width: 168px; flex: none; }

.tryb__scena::after {
    /* miękkie zejście sceny w tło karty - twarda krawędź robiła z kafla dwie sklejone części */
    content: "";
    position: absolute; inset: auto 0 -1px 0; height: 42%;
    background: linear-gradient(to bottom, transparent, var(--cl-surface));
}
.tryb--szeroki .tryb__scena::after {
    inset: 0 -1px 0 auto; width: 42%; height: auto;
    background: linear-gradient(to right, transparent, var(--cl-surface));
}

.tryb__scena img {
    position: relative; z-index: 1;
    width: 84px; height: auto;
    /* ikony mają 16 px źródła - wygładzanie zamieniłoby je w plamę */
    image-rendering: pixelated;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .55));
}
.tryb--szeroki .tryb__scena img { width: 76px; }

.tryb__tresc { display: flex; flex-direction: column; padding: var(--cl-5); }
.tryb--szeroki .tryb__tresc { justify-content: center; }

.tryb__nazwa { font-family: var(--cl-font-nag); font-size: 16.5px; font-weight: 700; }
.tryb__opis { margin-top: var(--cl-2); color: var(--cl-text-dim); font-size: 14px; line-height: 1.6; }

.tryb__dane { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--cl-4); }

.tryb__chip {
    padding: 4px 10px;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-full);
    background: var(--cl-surface-2);
    color: var(--cl-text-dim);
    font-size: 11.5px; font-weight: 600;
    white-space: nowrap;
}
/* warunek pakietu to ograniczenie, nie cecha - stąd inny kolor niż parametry obok */
.tryb__chip--warunek {
    border-color: rgba(245, 158, 11, .3);
    background: rgba(245, 158, 11, .12);
    color: #FBBF24;
}
[data-theme="light"] .tryb__chip--warunek { color: #B45309; }

.tryb--lifesteal { --akcent: 244, 63, 94; }
.tryb--anarchia  { --akcent: 168, 85, 247; }
.tryb--practice  { --akcent: 34, 211, 238; }
.tryb--survival  { --akcent: 74, 222, 128; }
.tryb--gencash   { --akcent: 250, 204, 21; }

[data-theme="light"] .tryb__scena {
    background:
        radial-gradient(closest-side, rgba(var(--akcent), .18), transparent 72%),
        radial-gradient(rgba(16, 24, 40, .07) 1px, transparent 1.4px) 0 0 / 22px 22px,
        var(--cl-surface-2);
}

.tryby__nota {
    max-width: 62ch; margin: var(--cl-6) auto 0;
    color: var(--cl-text-mute);
    font-size: 13.5px; line-height: 1.65; text-align: center;
}
.tryby__nota b { color: var(--cl-text-dim); font-weight: 600; }

@media (max-width: 1040px) {
    /* dwie kolumny: trzy wąskie kafle nie mieszczą się już w rzędzie */
    .tryby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tryb, .tryb--szeroki { grid-column: span 1; }
    .tryb--szeroki { flex-direction: column; }
    .tryb--szeroki .tryb__scena { min-width: 0; }
    .tryb--szeroki .tryb__scena::after {
        inset: auto 0 -1px 0; width: auto; height: 42%;
        background: linear-gradient(to bottom, transparent, var(--cl-surface));
    }
}

@media (max-width: 640px) {
    .tryby { grid-template-columns: minmax(0, 1fr); }
    .tryb__scena { min-height: 128px; }
}

/* --- Wybór drogi zakupu ---
   Przyciski „Zamów" w cennikach nie prowadzą wprost do panelu: najpierw pytamy, czy
   klient chce zamówić na stronie (bez logowania), czy w panelu (z portfela).
   Okno składa skrypt, więc bez JS-u linki działają po staremu.

   Tło jest zwykłą, nieprzezroczystą warstwą z winietą - `backdrop-filter` przy
   pełnoekranowej warstwie kosztuje przemalowanie całej strony na każdą klatkę
   i na słabszych maszynach widać zacinanie. */

.wybor-zakupu {
    position: fixed; inset: 0; z-index: 250;
    display: grid; place-items: center;
    padding: var(--cl-5);
    background:
        radial-gradient(70% 60% at 50% 38%, rgba(6, 10, 18, .82), rgba(4, 7, 12, .94));
    overflow-y: auto;
}
.wybor-zakupu[hidden] { display: none; }
.wybor-zakupu.jest-wchodzace { animation: cl-tlo-okna .2s var(--cl-ease) both; }
.wybor-zakupu.jest-wchodzace .wybor-zakupu__okno { animation: cl-okno .3s var(--cl-spokoj) both; }

@keyframes cl-tlo-okna { from { opacity: 0; } to { opacity: 1; } }

@keyframes cl-okno {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.wybor-zakupu__okno {
    position: relative;
    width: 100%; max-width: 760px;
    padding: var(--cl-6);
    border: 1px solid transparent; border-radius: var(--cl-r-lg);
    /* ramka z gradientu marki - ta sama sztuczka, co w plakietce nad nagłówkiem */
    background:
        linear-gradient(var(--cl-surface), var(--cl-surface)) padding-box,
        linear-gradient(140deg, rgba(0, 166, 255, .55), rgba(0, 115, 255, .12) 55%, rgba(0, 166, 255, .4)) border-box;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}

.wybor-zakupu__glowa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cl-4); }
.wybor-zakupu__tytul { margin-top: var(--cl-2); font-family: var(--cl-font-nag); font-size: 22px; font-weight: 700; }

.wybor-zakupu__zamknij {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-btn);
    background: var(--cl-surface-2); color: var(--cl-text-dim);
    font-size: 18px; line-height: 1;
    cursor: pointer;
}
.wybor-zakupu__zamknij:hover { border-color: var(--cl-line-hi); color: var(--cl-text); }

/* Pasek z wybranym pakietem: grafika, nazwa, parametry i cena - klient widzi, czego
   dotyczy pytanie, i nie musi zamykać okna, żeby sprawdzić, w co kliknął. */
.wybor-zakupu__pakiet {
    display: flex; align-items: center; gap: var(--cl-4);
    margin-top: var(--cl-5); padding: var(--cl-4);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface-2);
}
.wybor-zakupu__obraz { width: 46px; height: 46px; flex: none; }
.wybor-zakupu__obraz[hidden] { display: none; }
.wybor-zakupu__opis { min-width: 0; flex: 1; }
.wybor-zakupu__opis b { display: block; font-family: var(--cl-font-nag); font-size: 16px; font-weight: 700; }
.wybor-zakupu__opis span { display: block; margin-top: 2px; color: var(--cl-text-dim); font-size: 13px; }
.wybor-zakupu__cena { flex: none; text-align: right; }
.wybor-zakupu__cena b {
    display: block;
    background-image: linear-gradient(135deg, var(--cl-cena-a), var(--cl-cena-b));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-family: var(--cl-font-nag); font-size: 20px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.wybor-zakupu__cena span { color: var(--cl-text-mute); font-size: 11.5px; }

.wybor-zakupu__drogi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--cl-4); margin-top: var(--cl-4); }

.wybor-zakupu__droga {
    position: relative;
    display: flex; flex-direction: column;
    padding: var(--cl-5);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface-2); color: var(--cl-text);
    transition: border-color .16s var(--cl-ease), background-color .16s var(--cl-ease), transform .16s var(--cl-ease);
}
.wybor-zakupu__droga:hover { border-color: rgba(0, 122, 255, .5); background: var(--cl-tint); transform: translateY(-2px); }
.wybor-zakupu__droga--polecana {
    border-color: rgba(0, 122, 255, .45);
    background:
        radial-gradient(110% 80% at 50% 0%, var(--cl-tint-hi), transparent 60%),
        var(--cl-surface-2);
}

.wybor-zakupu__znak {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border: 1px solid rgba(0, 122, 255, .28); border-radius: var(--cl-r-btn);
    background: var(--cl-tint-hi);
    color: var(--cl-brand-hi);
}
.wybor-zakupu__znak svg { width: 20px; height: 20px; }

.wybor-zakupu__nazwa { margin-top: var(--cl-3); font-family: var(--cl-font-nag); font-size: 16.5px; font-weight: 700; }

.wybor-zakupu__lista { display: grid; gap: 7px; margin-top: var(--cl-3); }
.wybor-zakupu__lista li { display: flex; align-items: flex-start; gap: 8px; color: var(--cl-text-dim); font-size: 13px; line-height: 1.5; }
.wybor-zakupu__lista svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: #4ADE80; }

.wybor-zakupu__akcja { margin-top: var(--cl-5); width: 100%; }

.wybor-zakupu__plakietka {
    position: absolute; top: -10px; right: var(--cl-5);
    padding: 3px 10px;
    border-radius: var(--cl-r-full);
    background: linear-gradient(135deg, var(--cl-grad-a), var(--cl-grad-b));
    color: var(--cl-brand-ink);
    font-family: var(--cl-font-nag); font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
}

.wybor-zakupu__stopka {
    display: flex; align-items: center; justify-content: center; gap: var(--cl-3); flex-wrap: wrap;
    margin-top: var(--cl-5); padding-top: var(--cl-4);
    border-top: 1px solid var(--cl-line);
    color: var(--cl-text-mute); font-size: 12px;
}
.wybor-zakupu__znaki { display: flex; align-items: center; gap: 8px; }
.wybor-zakupu__znaki img { height: 18px; width: auto; display: block; opacity: .85; }

@media (max-width: 560px) {
    .wybor-zakupu__okno { padding: var(--cl-5); }
    .wybor-zakupu__cena { display: none; }
}

/* --- Zamówienie ---
   Dwie kolumny: konfiguracja po lewej, podsumowanie po prawej (przyklejone przy
   przewijaniu, bo to ono decyduje o kliknięciu). Wszystko liczy się w przeglądarce
   z katalogu wstawionego do strony - cloudly.gg jest statyczne, a kwoty muszą się
   zgadzać z cennikiem, więc katalog wychodzi z tych samych plików. */

.naglowek-strony--niski { padding: var(--cl-10) 0 var(--cl-8); }

.zam {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr);
    gap: var(--cl-5);
    align-items: start;
}
.zam[hidden], .zam__brak[hidden] { display: none; }

.zam__kolumna { display: grid; gap: var(--cl-4); }

.zam__karta {
    padding: var(--cl-6);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg);
    background: var(--cl-surface);
}

.zam__glowa { display: flex; align-items: center; justify-content: space-between; gap: var(--cl-4); flex-wrap: wrap; }
.zam__tytul { font-family: var(--cl-font-nag); font-size: 16px; font-weight: 700; }
.zam__podpis { color: var(--cl-text-mute); font-size: 12.5px; }
.zam__zmien { color: var(--cl-brand-hi); font-size: 13px; font-weight: 600; }

/* --- wybrana usługa --- */
.zam__usluga { display: flex; align-items: center; gap: var(--cl-4); margin-top: var(--cl-4); }
.zam__obraz { width: 56px; height: 56px; flex: none; }
.zam__obraz[hidden] { display: none; }
.zam__usluga-opis b { display: block; font-family: var(--cl-font-nag); font-size: 18px; font-weight: 700; }
.zam__usluga-opis span { display: block; margin-top: 2px; color: var(--cl-text-dim); font-size: 13.5px; }

/* --- okresy --- */
.zam__okresy { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--cl-3); margin-top: var(--cl-4); }
.zam__okres[hidden] { display: none; }
.zam__okres {
    padding: var(--cl-3) var(--cl-4); text-align: left;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface-2); color: var(--cl-text);
    cursor: pointer;
    transition: border-color .14s var(--cl-ease), background-color .14s var(--cl-ease);
}
.zam__okres:hover { border-color: var(--cl-line-hi); }
.zam__okres.jest-aktywna { border-color: rgba(0, 122, 255, .45); background: var(--cl-tint-hi); }
.zam__okres b { display: block; font-family: var(--cl-font-nag); font-size: 14px; font-weight: 700; }
.zam__okres em {
    display: inline-block; margin-left: 4px; padding: 1px 6px;
    border-radius: var(--cl-r-full);
    background: rgba(34, 197, 94, .16); color: #4ADE80;
    font-size: 10px; font-weight: 700; font-style: normal;
}
.zam__okres span { display: block; margin-top: 2px; color: var(--cl-text-mute); font-size: 12px; font-variant-numeric: tabular-nums; }

/* --- dodatki --- */
.zam__dodatki { display: grid; gap: var(--cl-3); margin-top: var(--cl-4); }

.zam__dodatek {
    display: flex; align-items: center; gap: var(--cl-4); flex-wrap: wrap;
    padding: var(--cl-3) var(--cl-4);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface-2);
}
/* Ikona wiersza - bez niej lewa krawędź dodatków była pusta i trzy wiersze zlewały się
   w jedną ścianę tekstu. */
.zam__dodatek-znak {
    display: grid; place-items: center; flex: none;
    width: 38px; height: 38px;
    border: 1px solid rgba(0, 122, 255, .26); border-radius: var(--cl-r-btn);
    background: var(--cl-tint-hi);
    color: var(--cl-brand-hi);
}
.zam__dodatek-znak svg { width: 19px; height: 19px; }
.zam__dodatek.jest-wybrany .zam__dodatek-znak { border-color: rgba(0, 122, 255, .5); }

.zam__dodatek-opis { flex: 1; min-width: 140px; }
.zam__dodatek-opis b { display: block; font-size: 14px; font-weight: 600; }
.zam__dodatek-opis span { display: block; margin-top: 2px; color: var(--cl-text-mute); font-size: 12px; }

/* Licznik: minus, wartość, plus. Wartość ma stałą szerokość, żeby przyciski nie
   przeskakiwały przy zmianie z 9 na 10. */
/* Wartość dodatku stoi w opisie wiersza, a oba przyciski obok siebie po prawej -
   przy układzie „minus, wartość, plus" oko musiało skakać przez liczbę, żeby
   trafić w drugi guzik. */
.zam__licznik { display: flex; align-items: center; gap: 6px; }
.zam__licznik button {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-btn);
    background: var(--cl-surface-3); color: var(--cl-text);
    font-size: 17px; font-weight: 700; line-height: 1;
    cursor: pointer;
    transition: border-color .14s var(--cl-ease), background-color .14s var(--cl-ease);
}
.zam__licznik button:disabled { opacity: .35; cursor: default; }
.zam__licznik button:not(:disabled):hover { border-color: rgba(0, 122, 255, .45); background: var(--cl-tint-hi); }

.zam__ile {
    display: inline-block; margin-top: 2px;
    color: var(--cl-brand-hi); font-size: 12.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* zmiana wartości i kwoty ma być widoczna, a nie podmieniać się w miejscu */
.zam__ile.jest-zmieniona, .zam__dodatek-cena.jest-zmieniona { animation: cl-podmiana .34s var(--cl-spokoj) both; }
.zam__dodatek.jest-wybrany { border-color: rgba(0, 122, 255, .4); background: var(--cl-tint); }

.zam__dodatek-cena { min-width: 92px; text-align: right; color: var(--cl-text-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
/* „brak" to stan, nie kwota - stąd wyciszony kolor i mniejszy stopień pisma */
.zam__dodatek:not(.jest-wybrany) .zam__dodatek-cena { color: var(--cl-text-mute); font-size: 12.5px; }

/* --- konto, płatność --- */
.zam__tryby, .zam__metody { display: flex; flex-wrap: wrap; gap: 6px; }
.zam__tryb {
    height: 32px; padding: 0 12px;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-btn);
    background: var(--cl-surface-2); color: var(--cl-text-dim);
    font-family: var(--cl-font-nag); font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.zam__tryb.jest-aktywna { border-color: rgba(0, 122, 255, .45); background: var(--cl-tint-hi); color: var(--cl-brand-hi); }

.zam__metody { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--cl-3); margin-top: var(--cl-4); }
.zam__metoda {
    display: grid; gap: 8px; align-content: start;
    padding: var(--cl-4); text-align: left;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface-2); color: var(--cl-text);
    cursor: pointer;
    transition: border-color .14s var(--cl-ease), background-color .14s var(--cl-ease);
}
.zam__metoda:hover { border-color: var(--cl-line-hi); }
.zam__metoda.jest-aktywna { border-color: rgba(0, 122, 255, .5); background: var(--cl-tint-hi); }
.zam__metoda b { display: block; font-family: var(--cl-font-nag); font-size: 14.5px; font-weight: 700; }
.zam__metoda-opis { display: block; color: var(--cl-text-mute); font-size: 12px; line-height: 1.45; }

/* Logotypy bez kafla, wprost na karcie. Wersje marek przygotowane pod ciemne tło
   (BLIK w negatywie, pozostałe z zestawu „-dark" z panelu), więc nie trzeba pod
   nie podkładać bieli. Wysokość wspólna, żeby rząd znaków był równy. */
.zam__logo { display: block; height: 26px; width: auto; }
.zam__logo--para { display: flex; align-items: center; gap: 6px; height: 26px; }
.zam__logo--para img { display: block; height: 26px; width: auto; }
/* przelew nie ma znaku marki - rysowana ikona w kolorze marki */
.zam__logo--rysowany {
    display: grid; place-items: center;
    width: 34px; height: 26px;
    color: var(--cl-brand-hi);
}
.zam__logo--rysowany svg { width: 22px; height: 22px; }

/* --- BLIK bez przekierowania ---
   Kod wpisuje się u nas, więc ten blok jest osobnym, wyraźnym krokiem: własna
   ramka, treść na środku i zgoda wymagana przez operatora płatności. */
.zam__blik {
    display: grid; justify-items: center; gap: var(--cl-4);
    margin-top: var(--cl-5); padding: var(--cl-6);
    border: 1px solid rgba(0, 122, 255, .35); border-radius: var(--cl-r-lg);
    background:
        radial-gradient(120% 80% at 50% 0%, var(--cl-tint-hi), transparent 65%),
        var(--cl-surface-2);
    text-align: center;
}
.zam__blik[hidden] { display: none; }

.zam__blik-glowa { display: grid; gap: 4px; }
.zam__blik-glowa b { font-family: var(--cl-font-nag); font-size: 17px; font-weight: 700; }
.zam__blik-glowa span { color: var(--cl-text-mute); font-size: 13px; }

.zam__blik-pole {
    width: 100%; max-width: 280px; height: 62px;
    border: 1px solid var(--cl-line-hi); border-radius: var(--cl-r);
    background: var(--cl-bg); color: var(--cl-text);
    font-family: var(--cl-mono); font-size: 28px; font-weight: 600;
    letter-spacing: .34em; text-align: center; text-indent: .34em;
}
.zam__blik-pole:focus-visible { border-color: rgba(0, 122, 255, .6); outline: none; }
.zam__blik-pole[aria-invalid="true"] { border-color: rgba(240, 68, 56, .6); }

.zam__blik-kwota { color: var(--cl-text-dim); font-size: 13px; }
.zam__blik-kwota b { color: var(--cl-text); font-family: var(--cl-font-nag); font-weight: 700; }

.zam__zgoda--blik { width: 100%; font-size: 11.5px; text-align: left; }
.zam__zgoda--blik a { color: var(--cl-brand-hi); }

.zam__pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--cl-3); margin-top: var(--cl-4); }
.zam__pole { display: grid; gap: 5px; }
.zam__pole[hidden] { display: none; }
.zam__pole > span {
    color: var(--cl-text-mute);
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
.zam__pole input {
    height: var(--cl-ctrl-duzy); padding: 0 13px;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-btn);
    background: var(--cl-surface-2); color: var(--cl-text);
    font-family: var(--cl-font); font-size: 14px;
}
.zam__pole input:focus-visible { border-color: rgba(0, 122, 255, .5); outline: none; }
.zam__pole input[aria-invalid="true"] { border-color: rgba(240, 68, 56, .6); }
.zam__pole--blik { max-width: 220px; margin-top: var(--cl-4); }

/* --- podsumowanie --- */
.zam__suma {
    position: sticky; top: calc(var(--cl-nav-h) + var(--cl-4));
    display: grid; gap: var(--cl-4);
    padding: var(--cl-6);
    border: 1px solid rgba(0, 122, 255, .35); border-radius: var(--cl-r-lg);
    background:
        radial-gradient(120% 70% at 50% 0%, var(--cl-tint), transparent 62%),
        var(--cl-surface);
}

.zam__kod-wiersz { display: flex; gap: 6px; }
.zam__kod-wiersz input { flex: 1; min-width: 0; }
.zam__zastosuj {
    flex: none; padding: 0 14px; height: var(--cl-ctrl-duzy);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-btn);
    background: var(--cl-surface-3); color: var(--cl-text);
    font-family: var(--cl-font-nag); font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.zam__zastosuj:hover { border-color: rgba(0, 122, 255, .45); color: var(--cl-brand-hi); }
.zam__kod-stan { margin-top: 6px; font-size: 12px; line-height: 1.5; }
.zam__kod-stan[hidden] { display: none; }
.zam__kod-stan.jest-dobry { color: #4ADE80; }
.zam__kod-stan.jest-zly { color: #FF8A80; }

.zam__zgody { display: grid; gap: var(--cl-3); }

.zam__pozycje { display: grid; gap: 8px; font-size: 13.5px; }
.zam__pozycje li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cl-3); }
.zam__pozycje li span { color: var(--cl-text-dim); }
.zam__pozycje li b { font-variant-numeric: tabular-nums; font-weight: 600; }
.zam__pozycje li.jest-rabatem b { color: #4ADE80; }

.zam__razem {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--cl-3);
    padding-top: var(--cl-4);
    border-top: 1px solid var(--cl-line);
}
.zam__razem span { color: var(--cl-text-mute); font-size: 13px; }
.zam__razem b {
    background-image: linear-gradient(135deg, var(--cl-cena-a), var(--cl-cena-b));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-family: var(--cl-font-nag);
    font-size: 26px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.zam__zgoda { display: flex; align-items: flex-start; gap: 9px; color: var(--cl-text-dim); font-size: 12.5px; line-height: 1.5; }
.zam__zgoda input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--cl-brand); }
.zam__zgoda a { color: var(--cl-brand-hi); }

/* Turnstile: widget ma swoją stałą szerokość, więc centrujemy go w kolumnie
   podsumowania i rezerwujemy wysokość, żeby przycisk nie podskakiwał, gdy
   widget się doładuje. */
.zam__turnstile { display: flex; justify-content: center; min-height: 68px; }
.zam__turnstile:empty { min-height: 0; }

.zam__wyslij { width: 100%; }
.zam__wyslij:disabled { opacity: .55; cursor: default; }

.zam__stan {
    padding: 10px 12px;
    border-radius: var(--cl-r-btn);
    font-size: 12.5px; line-height: 1.55;
}
.zam__stan[hidden] { display: none; }
.zam__stan.jest-bledem { border: 1px solid rgba(240, 68, 56, .35); background: rgba(240, 68, 56, .12); color: #FF8A80; }
.zam__stan.jest-czekaniem { border: 1px solid rgba(0, 122, 255, .35); background: var(--cl-tint-hi); color: var(--cl-brand-hi); }
.zam__stan.jest-sukcesem { border: 1px solid rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .12); color: #4ADE80; }

.zam__info { color: var(--cl-text-mute); font-size: 12px; line-height: 1.55; }

/* Braki przy składaniu zamówienia: obramowanie całego bloku, nie tylko pola -
   przy niezaznaczonej metodzie płatności albo zgodzie nie ma pola, które można
   podświetlić. */
.zam__karta.jest-bledem,
.zam__blik.jest-bledem,
.zam__metody.jest-bledem,
.zam__zgody.jest-bledem {
    border: 1px solid rgba(240, 68, 56, .65);
    border-radius: var(--cl-r);
    background: rgba(240, 68, 56, .07);
}
.zam__metody.jest-bledem, .zam__zgody.jest-bledem { padding: var(--cl-3); }
.zam__zgoda.jest-bledem span { color: #FF8A80; }

.zam__brak { max-width: 560px; margin: 0 auto; text-align: center; }
.zam__brak .lid { margin-top: var(--cl-3); }
.zam__brak .hero__akcje { justify-content: center; }

@media (max-width: 1000px) {
    .zam { grid-template-columns: minmax(0, 1fr); }
    .zam__suma { position: static; }
}

/* --- Tabela limitów (darmowe serwery) ---
   Zwykła tabela, nie siatka div-ów: to jest porównanie dwóch planów wiersz po
   wierszu, więc czytnik ekranu powinien czytać nagłówki kolumn razem z komórkami.
   Kolumna z planem darmowym jest podświetlona, bo to o niej jest ta strona. */

.limity { overflow-x: auto; border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg); background: var(--cl-surface); }

.limity__tabela { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }

.limity__tabela th,
.limity__tabela td { padding: var(--cl-4) var(--cl-5); text-align: left; vertical-align: middle; }

.limity__tabela thead th {
    color: var(--cl-text);
    font-family: var(--cl-font-nag);
    font-size: 15px; font-weight: 700;
    border-bottom: 1px solid var(--cl-line-hi);
}
.limity__tabela thead th span {
    display: block; margin-top: 2px;
    color: var(--cl-text-mute);
    font-family: var(--cl-font);
    font-size: 12px; font-weight: 500;
}

.limity__tabela tbody th {
    color: var(--cl-text-dim);
    font-weight: 500;
}
.limity__tabela tbody tr + tr th,
.limity__tabela tbody tr + tr td { border-top: 1px solid var(--cl-line); }

/* druga kolumna to plan darmowy - lekki tint zamiast ramki, żeby nie ciąć tabeli na pół */
.limity__tabela th:nth-child(2),
.limity__tabela td:nth-child(2) { background: var(--cl-tint); color: var(--cl-text); }

.limity__tabela td b { font-weight: 700; }

.limity__tak, .limity__nie {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--cl-r-full);
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.limity__tak { background: rgba(74, 222, 128, .16); color: #4ADE80; }
.limity__nie { background: rgba(148, 163, 184, .14); color: var(--cl-text-mute); }
[data-theme="light"] .limity__tak { color: #15803D; }

.limity__nota {
    max-width: 64ch; margin: var(--cl-5) auto 0;
    color: var(--cl-text-mute);
    font-size: 13.5px; line-height: 1.65; text-align: center;
}

/* Karty zasad nie mają scen z grafiką - to same akapity, więc nazwa nie potrzebuje
   górnego marginesu przewidzianego na obrazek. */
.usluga--darmowy .usluga__nazwa:first-child { margin-top: 0; }

/* --- Konfigurator serwera ---
   Kreator: jedno pytanie na ekranie, wynik dopiero po ostatnim kroku. Wszystko
   dzieje się w jednym boksie o stałej szerokości - kroki podmieniają się w tym
   samym miejscu, więc strona nie skacze przy przechodzeniu dalej.

   Bez JS-u kroki nie są ukryte: widać je jeden pod drugim jako zwykłą listę
   pytań, a ukrywanie dokłada dopiero skrypt. */

.kalk {
    display: flex; flex-direction: column; gap: var(--cl-5);
    padding: var(--cl-6);
    border: 1px solid var(--cl-line-hi); border-radius: var(--cl-r-lg);
    background:
        radial-gradient(120% 70% at 50% 0%, var(--cl-tint), transparent 62%),
        var(--cl-surface);
}

.kalk__glowa { display: grid; gap: 8px; }
.kalk__licznik {
    color: var(--cl-text-mute);
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
}
.kalk__postep { height: 3px; border-radius: var(--cl-r-full); background: var(--cl-surface-3); overflow: hidden; }
.kalk__postep span {
    display: block; height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cl-grad-a), var(--cl-grad-b));
    transition: width .3s var(--cl-spokoj);
}

/* Każdy krok ma tę samą wysokość minimalną - tyle, ile najwyższy z nich, czyli
   wynik z komunikatem o przekroczeniu oferty. Bez tego boks skakał w górę i w dół przy przechodzeniu dalej,
   a razem z nim cała strona pod nim. Treść kroku jest wyśrodkowana w pionie,
   więc zapas miejsca rozkłada się równo. */
.kalk__krok {
    min-height: 328px;
    display: flex; flex-direction: column; justify-content: center;
}
/* `grid-template-columns` jawnie, bo `justify-content: center` z reguły bazowej
   działa w gridzie na oś poziomą i zwężałby wynik do szerokości najdłuższej
   linijki, zamiast rozciągnąć go na boks. */
.kalk__krok--wynik { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }

/* `[hidden]` musi być bardziej szczegółowe od reguł wyżej, inaczej autorskie
   `display` wygrywa z regułą przeglądarki i ukryty krok zostaje widoczny. */
.kalk__krok[hidden] { display: none; }

.kalk__krok.jest-wchodzacy { animation: cl-podnies .34s var(--cl-spokoj) both; }

.kalk__pytanie { font-family: var(--cl-font-nag); font-size: 19px; font-weight: 700; }

/* `auto-fit` zamiast stałej liczby kolumn: przy szerokości sekcji wszystkie
   odpowiedzi mieszczą się w jednym rzędzie, a puste ścieżki się zwijają, więc
   dwie opcje w kroku o lokalizacji nie zostają zbite do lewej krawędzi. */
.kalk__opcje { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--cl-3); margin-top: var(--cl-4); }
.kalk__opcje--zwarte { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.kalk__opcja {
    display: block; text-align: left;
    padding: var(--cl-4);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface-2);
    color: var(--cl-text);
    cursor: pointer;
    transition: border-color .14s var(--cl-ease), background-color .14s var(--cl-ease);
}
.kalk__opcja:hover { border-color: rgba(0, 122, 255, .45); background: var(--cl-tint); }
.kalk__opcja b { display: block; font-family: var(--cl-font-nag); font-size: 15px; font-weight: 700; }
.kalk__opcja > span { display: block; margin-top: 3px; color: var(--cl-text-dim); font-size: 13px; line-height: 1.5; }

/* Logo silników pod opisem - te same pliki, co w panelu przy wyborze silnika. */
.kalk__silniki { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--cl-3); }
.kalk__silnik {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px 3px 4px;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-full);
    background: var(--cl-surface-3);
    color: var(--cl-text-dim);
    font-size: 11px; font-weight: 600; line-height: 1;
}
.kalk__silnik img { width: 16px; height: 16px; border-radius: 3px; }
.kalk__silnik--bez-logo { padding-left: 8px; }

/* Stopka zajmuje swoje miejsce także wtedy, gdy nie ma w niej przycisku - na
   pierwszym kroku nie ma „Wstecz", a bez tej rezerwy boks byłby o guzik niższy. */
.kalk__stopka { display: flex; align-items: center; gap: var(--cl-3); min-height: var(--cl-ctrl); }
.kalk__wstecz {
    padding: 0 14px; height: var(--cl-ctrl);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-btn);
    background: none; color: var(--cl-text-dim);
    font-family: var(--cl-font-nag);
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: border-color .14s var(--cl-ease), color .14s var(--cl-ease);
}
.kalk__wstecz:hover { border-color: var(--cl-line-hi); color: var(--cl-text); }
.kalk__wstecz[hidden] { display: none; }

/* --- wynik --- */
.kalk__krok--wynik { gap: var(--cl-4); }

.kalk__zapotrzebowanie {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--cl-3);
    padding-bottom: var(--cl-4);
    border-bottom: 1px solid var(--cl-line);
}
.kalk__zapotrzebowanie span { color: var(--cl-text-mute); font-size: 12.5px; }
.kalk__zapotrzebowanie b {
    font-family: var(--cl-font-nag);
    font-size: 24px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.kalk__karta { display: flex; align-items: center; gap: var(--cl-4); }
.kalk__obraz { width: 56px; height: 56px; flex: none; }
.kalk__karta-opis { min-width: 0; }
.kalk__plakietka {
    display: block;
    color: var(--cl-brand-hi);
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.kalk__karta-opis > b {
    display: block; margin-top: 2px;
    font-family: var(--cl-font-nag);
    font-size: 18px; font-weight: 700;
}
.kalk__parametry { display: block; margin-top: 2px; color: var(--cl-text-dim); font-size: 12.5px; }

.kalk__cena { margin-left: auto; text-align: right; flex: none; }
.kalk__cena b {
    display: block;
    background-image: linear-gradient(135deg, var(--cl-cena-a), var(--cl-cena-b));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-family: var(--cl-font-nag);
    font-size: 24px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.kalk__cena span { color: var(--cl-text-mute); font-size: 11.5px; }

.kalk__cta { width: 100%; }

/* Gdy wyliczenie przekracza największy pakiet, wynik musi to powiedzieć wprost -
   inaczej konfigurator poleca za słabą maszynę i wygląda, jakby pasowała. */
.kalk__uwaga {
    display: flex; gap: var(--cl-3);
    padding: var(--cl-4);
    border: 1px solid rgba(245, 158, 11, .38); border-radius: var(--cl-r);
    background: rgba(245, 158, 11, .1);
}
.kalk__uwaga[hidden] { display: none; }

.kalk__uwaga-znak {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    background: rgba(245, 158, 11, .16);
    color: #FBBF24;
}
.kalk__uwaga-znak svg { width: 18px; height: 18px; }

.kalk__uwaga-tresc { min-width: 0; }
.kalk__uwaga-tresc b {
    display: block;
    color: #FBBF24;
    font-family: var(--cl-font-nag);
    font-size: 14px; font-weight: 700;
}
.kalk__uwaga-tresc > span { display: block; margin-top: 3px; color: var(--cl-text-dim); font-size: 13px; line-height: 1.6; }

[data-theme="light"] .kalk__uwaga-znak,
[data-theme="light"] .kalk__uwaga-tresc b { color: #B45309; }

/* Flaga przy nazwie lokalizacji - ta sama grafika, co w pasku cennika. */
.kalk__z-flaga { display: flex; align-items: center; gap: 8px; }
.kalk__z-flaga svg { width: 20px; height: 14px; border-radius: 2px; flex: none; }

.kalk__zapas { color: var(--cl-text-mute); font-size: 12.5px; line-height: 1.6; }
.kalk__zapas b { color: var(--cl-text-dim); font-weight: 600; }
.kalk__zapas[hidden] { display: none; }

.kalk__wybory { color: var(--cl-text-mute); font-size: 12px; }

.kalk__nota {
    max-width: 64ch; margin: var(--cl-6) auto 0;
    color: var(--cl-text-mute);
    font-size: 13px; line-height: 1.65; text-align: center;
}

@media (max-width: 640px) {
    .kalk { padding: var(--cl-5); }
    .kalk__opcje { grid-template-columns: minmax(0, 1fr); }
}

/* --- Zaproszenie na Discorda ---
   Postać celowo wychodzi ponad górną krawędź panelu (ujemny margines +
   `overflow: visible`) - dzięki temu pas nie wygląda jak kolejna prostokątna
   karta, tylko jak scenka. */

.sekcja--dc { padding-top: var(--cl-12); }

.dc {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) 260px;
    align-items: end; gap: var(--cl-8);
    padding: var(--cl-10);
    border: 1px solid rgba(88, 101, 242, .32); border-radius: var(--cl-r-xl);
    background:
        radial-gradient(80% 140% at 88% 100%, rgba(88, 101, 242, .26), transparent 62%),
        linear-gradient(120deg, rgba(88, 101, 242, .14), rgba(88, 101, 242, .04)),
        var(--cl-surface);
}

.dc__tresc { padding: var(--cl-2) 0; }
.dc__tresc h2 { margin-top: var(--cl-3); }
.dc__tresc .lid { margin-top: var(--cl-4); max-width: 46ch; }
.dc__tresc .btn { margin-top: var(--cl-6); }

.nad--dc { color: #8A95F7; }
[data-theme="light"] .nad--dc { color: #4E5BE0; }

.dc__postac {
    justify-self: center;
    width: min(100%, 250px); height: auto;
    margin: -104px 0 -40px;     /* wychodzi górą poza panel, dołem siada na krawędzi */
    filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5));
}
[data-theme="light"] .dc__postac { filter: drop-shadow(0 26px 30px rgba(16, 24, 40, .28)); }

/* Przycisk w barwach Discorda - jedyne miejsce na stronie, gdzie odchodzimy
   od koloru marki, bo tu prowadzi do cudzego serwisu. */
.btn--dc { background: #5865F2; color: #fff; border: 0; }
.btn--dc:hover { background: #4752C4; color: #fff; }
.btn--dc:active { background: #3C45A5; }
.btn--dc svg { width: 19px; height: 19px; }

@media (max-width: 860px) {
    .dc { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: var(--cl-6); }
    .dc__tresc .lid { margin-left: auto; margin-right: auto; }
    .dc__postac { width: min(72%, 220px); margin: var(--cl-4) 0 -24px; order: -1; }
}

/* --- FAQ ---
   Zwijane pozycje na `details/summary`: działają bez grama JS-u, obsługuje je
   klawiatura i czytniki ekranu, a wyszukiwarka widzi treść odpowiedzi. */

/* Dwie osobne kolumny zamiast jednej siatki: rozwinięcie pytania rozpycha
   tylko swoją kolumnę, a nie zostawia dziury obok (siatka wyrównuje wiersze). */
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: var(--cl-3); align-items: start; }
.faq__kol { display: grid; gap: var(--cl-2); align-content: start; }

.faq__poz {
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface);
}
.faq__poz[open] { border-color: var(--cl-line-hi); background: var(--cl-surface-2); }

.faq__poz summary {
    display: flex; align-items: center; gap: var(--cl-4);
    padding: var(--cl-4) var(--cl-5);
    cursor: pointer;
    color: var(--cl-text);
    font-family: var(--cl-font-nag);
    font-size: 15.5px; font-weight: 600; line-height: 1.4;
    list-style: none;                       /* domyślny trójkącik precz */
}
.faq__poz summary::-webkit-details-marker { display: none; }
.faq__poz summary:focus-visible { border-radius: var(--cl-r); }

/* Znak rozwinięcia rysujemy sami - to zwykły plus, który przy otwarciu
   obraca się w minus. Nie potrzeba do tego ikony ani skryptu. */
.faq__poz summary::after {
    content: "";
    position: relative;
    width: 11px; height: 11px;
    margin-left: auto;
    flex: none;
    background:
        linear-gradient(var(--cl-text-dim), var(--cl-text-dim)) center / 11px 1.5px no-repeat,
        linear-gradient(var(--cl-text-dim), var(--cl-text-dim)) center / 1.5px 11px no-repeat;
    transition: transform .18s var(--cl-ease);
}
.faq__poz[open] summary::after { transform: rotate(90deg); background-size: 11px 1.5px, 0 0; }

/* Rozwijanie: siatka o wysokości 0fr -> 1fr to jedyny sposób, żeby płynnie
   animować „wysokość automatyczną" bez liczenia pikseli w JS. Klasa
   `jest-zwiniete` wymusza stan zwinięty i steruje nią skrypt - przy otwieraniu
   po to, żeby przejście miało klatkę startową, przy zamykaniu po to, żeby
   zdążyło się dokończyć (patrz site.js). */
.faq__tresc {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s var(--cl-spokoj);
}
.faq__poz[open] .faq__tresc { grid-template-rows: 1fr; }
.faq__poz.jest-zwiniete .faq__tresc { grid-template-rows: 0fr; }

/* Element w siatce musi móc skurczyć się do zera, więc sam nie ma odstępów -
   te siedzą w akapicie w środku. Bez tego zwinięty wiersz miał wysokość
   paddingu i animacja startowała skokiem o kilkanaście pikseli. */
.faq__tresc > .faq__wnetrze {
    min-height: 0; overflow: hidden;
    opacity: 1;
    transition: opacity .26s var(--cl-ease) .04s;
}
.faq__poz.jest-zwiniete .faq__tresc > .faq__wnetrze { opacity: 0; transition-delay: 0s; }

.faq__poz p {
    padding: 0 var(--cl-5) var(--cl-5);
    color: var(--cl-text-dim);
    font-size: 14.5px; line-height: 1.65;
}

.faq__stopka {
    margin-top: var(--cl-6);
    text-align: center;
    color: var(--cl-text-mute);
    font-size: 14px;
}

@media (max-width: 560px) {
    .faq__poz summary { padding: var(--cl-3) var(--cl-4); font-size: 15px; }
    .faq__poz p { padding: 0 var(--cl-4) var(--cl-4); }
}

/* --- Nagłówek podstrony ---
   Pas ze zdjęciem i mocnym przyciemnieniem: bez niego tytuł wisiał na płaskim
   tle i podstrona wyglądała jak surowy dokument. */

.naglowek-strony {
    position: relative;
    padding: var(--cl-12) 0 var(--cl-10);
    overflow: hidden;
    border-bottom: 1px solid var(--cl-line);
}

.naglowek-strony__tlo {
    position: absolute; inset: 0;
    background: url("/img/tlo-hero.webp") center 62% / cover no-repeat;
}
.naglowek-strony__tlo::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(10, 13, 20, .80), rgba(10, 13, 20, .90) 55%, var(--cl-bg)),
        radial-gradient(60% 80% at 12% 20%, rgba(0, 122, 255, .22), transparent 70%);
}
[data-theme="light"] .naglowek-strony__tlo { opacity: .5; }
[data-theme="light"] .naglowek-strony__tlo::after {
    background:
        linear-gradient(to bottom, rgba(244, 246, 251, .84), rgba(244, 246, 251, .93) 55%, var(--cl-bg)),
        radial-gradient(60% 80% at 12% 20%, rgba(0, 122, 255, .12), transparent 70%);
}

.naglowek-strony__in { position: relative; }

/* Render wychodzi poza dolną krawędź pasa - sekcja ma `overflow: hidden`, więc
   obcięcie jest równe z jej granicą i wygląda jak zamierzone kadrowanie. */
.naglowek-strony__render {
    position: absolute; right: -12px; bottom: -74px;
    width: min(38vw, 420px); height: auto;
    filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .55));
    pointer-events: none;
}
[data-theme="light"] .naglowek-strony__render { filter: drop-shadow(0 22px 30px rgba(16, 24, 40, .3)); }

@media (max-width: 900px) {
    /* na wąskim ekranie render zjadałby tekst - zostaje samo tło */
    .naglowek-strony__render { display: none; }
}
.naglowek-strony__tytul { margin-top: var(--cl-4); }

/* Wejście nagłówka podstrony - ten sam gest, co w hero, tylko krótszy: tytuł
   wysuwa się zza maski, tło uspokaja skalę, plakietka i akapit dochodzą
   przesunięciem. Klasę dokłada i zdejmuje skrypt (patrz site.js), więc bez JS-u
   albo przy „ogranicz animacje" nagłówek stoi od razu gotowy. */
.naglowek-strony--wejscie .linia > span { display: block; animation: cl-linia .8s var(--cl-spokoj) both; }
.naglowek-strony--wejscie .naglowek-strony__tlo { animation: cl-tlo 1.6s var(--cl-spokoj) both; }
.naglowek-strony--wejscie .plakietka { animation: cl-podnies .6s var(--cl-spokoj) .04s both; }
.naglowek-strony--wejscie .naglowek-strony__lid { animation: cl-podnies .6s var(--cl-spokoj) .2s both; }
.naglowek-strony--wejscie .naglowek-strony__render { animation: cl-render 1.1s var(--cl-spokoj) .1s both; }
.naglowek-strony__lid { margin-top: var(--cl-4); max-width: 46ch; }

/* --- Pasek wyborow nad cennikiem ---
   Przyklejona pigułka o szerokości oferty: przy dziewięciu pakietach często
   zmienia się okres w połowie listy, a przewijanie w górę po każdej zmianie
   byłoby męczące. `top` liczony z wysokości paska nawigacji. */
.cennik__pasek {
    position: sticky; top: calc(var(--cl-nav-h) + 10px);
    z-index: 20;
}
.cennik__pasek-in {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--cl-5) var(--cl-8);
    padding: var(--cl-4) var(--cl-5);
    border: 1px solid var(--cl-line-hi); border-radius: var(--cl-r-lg);
    background: var(--cl-glass);
    box-shadow: var(--cl-shadow);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* Przy wejściu strony animujemy wnętrze, nie samą pigułkę - `transform` na
   elemencie `sticky` zakłóca jego przyklejanie. */
.cennik__pasek.jest-wchodzacy .cennik__pasek-in { animation: cl-podnies .6s var(--cl-spokoj) .16s both; }

/* Pasek z jedną grupą wyborów (Hytale, bot Discorda): bez lokalizacji nie ma czego
   rozsuwać do krawędzi, więc grupa staje po lewej, a nie rozciąga się na całą
   szerokość. */
.cennik__pasek-in--jeden { justify-content: flex-start; }

/* w pigułce przelaczniki nie mają własnej ramki - dwie obwódki wyglądają jak błąd */
/* Krok wyboru: numer plus podpis nad przełącznikiem */
.wybor { display: grid; gap: 6px; }
.wybor__etykieta {
    padding-left: 15px;   /* 14 px paddingu przycisku + 1 px ramki */
    color: var(--cl-text-mute);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
}
.wybor__etykieta b { color: var(--cl-brand-hi); font-weight: 700; }


@media (max-width: 720px) {
    .cennik__pasek-in { border-radius: var(--cl-r-lg); }
}

.przelacznik {
    display: inline-flex; flex-wrap: wrap; gap: 4px;
    padding: 4px;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.przelacznik__poz {
    display: inline-flex; align-items: center; gap: 8px;
    height: var(--cl-ctrl); padding: 0 14px;
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-btn);
    background: var(--cl-surface-2); color: var(--cl-text-dim);
    font-family: var(--cl-font-nag);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: background-color .14s var(--cl-ease), color .14s var(--cl-ease);
}
.przelacznik__poz:hover { border-color: var(--cl-line-hi); color: var(--cl-text); }
.przelacznik__poz.jest-aktywna { border-color: rgba(0, 122, 255, .45); background: var(--cl-tint-hi); color: var(--cl-brand-hi); }
.przelacznik__poz svg { width: 20px; height: 14px; border-radius: 2px; flex: none; }

/* W pasku wyborów grupy nie mają własnej ramki ani tła - obwódka w obwódce
   wygląda jak pomyłka. Selektor jest bardziej szczegółowy od bazowego, żeby
   nie zależeć od kolejności reguł w pliku. */
.cennik__pasek-in .przelacznik {
    padding: 0;
    border: 0; border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    gap: 6px;
}

/* „od X zł" przy lokalizacji - nie powtarzamy kwoty w kodzie, liczy ją skrypt
   z kart cennika, więc zmiana ceny w panelu wystarczy w jednym miejscu. */
.przelacznik__cena {
    padding: 2px 8px;
    border-radius: var(--cl-r-full);
    background: var(--cl-surface-3);
    color: var(--cl-text-mute);
    font-size: 11px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.przelacznik__poz.jest-aktywna .przelacznik__cena { background: var(--cl-tint-hi); color: var(--cl-brand-hi); }
.przelacznik__cena:empty { display: none; }

@media (max-width: 860px) {
    /* na wąskim ekranie pigułka i tak się łamie - cena schodzi, zostaje nazwa */
    .przelacznik__cena { display: none; }
}

.przelacznik__rabat {
    padding: 2px 6px;
    border-radius: var(--cl-r-full);
    background: rgba(34, 197, 94, .16);
    color: #4ADE80;
    font-size: 11px; font-weight: 700;
}
[data-theme="light"] .przelacznik__rabat { color: #15803D; }


/* --- Karty cennika --- */
.sekcja--cennik { padding-top: var(--cl-8); }

/* Trzy kolumny na stałe: przy dziewięciu pakietach automatyczne dopasowanie
   zostawiało w ostatnim wierszu jedną osieroconą kartę. */
/* Odstęp od przyklejonego paska musi zmieścić plakietkę „Polecany", która
   wystaje 11 px nad krawędź karty. */
.cennik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cl-4); margin-top: var(--cl-6); }

/* Trzy pakiety (bot Discorda) - jeden rząd bez osieroconej karty. */
.cennik--trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1000px) { .cennik { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* `1fr` nie zejdzie poniżej min-content karty - przy 320 px rozpychało stronę. */
@media (max-width: 640px)  { .cennik { grid-template-columns: minmax(0, 1fr); } }

/* Przejście między lokalizacjami: stary cennik gaśnie, nowy wchodzi kartami.
   `hidden` ustawia `display: none`, więc samo przełączenie atrybutu nie da się
   animować - kolejnością steruje skrypt (patrz site.js). */
.cennik { transition: opacity .16s var(--cl-ease), transform .16s var(--cl-ease); }
.cennik.jest-gasnacy { opacity: 0; transform: translateY(6px); }

/* Kolejność kart siedzi w `--op`, a `--zwloka` przesuwa cały zestaw. Dzięki temu
   jeden komplet opóźnień obsługuje dwa przypadki: przełączenie lokalizacji
   (wchodzi od razu) i wejście strony (czeka, aż ruszy nagłówek). */
.cennik.jest-wchodzacy .pakiet {
    animation: cl-pakiet .34s var(--cl-spokoj) calc(var(--zwloka, 0s) + var(--op, 0s)) both;
}
.cennik .pakiet:nth-child(2) { --op: .04s; }
.cennik .pakiet:nth-child(3) { --op: .08s; }
.cennik .pakiet:nth-child(4) { --op: .12s; }
.cennik .pakiet:nth-child(5) { --op: .16s; }
.cennik .pakiet:nth-child(6) { --op: .2s; }
.cennik .pakiet:nth-child(7) { --op: .24s; }
.cennik .pakiet:nth-child(8) { --op: .28s; }
.cennik .pakiet:nth-child(9) { --op: .32s; }

.cennik.jest-wejsciem { --zwloka: .3s; }

@keyframes cl-pakiet {
    from { opacity: 0; transform: translateY(10px) scale(.99); }
    to   { opacity: 1; transform: none; }
}
.cennik[hidden] { display: none; }

.pakiet {
    position: relative;
    display: flex; flex-direction: column;
    padding: var(--cl-5);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg);
    background: var(--cl-surface);
}
.pakiet--polecany {
    border-color: rgba(0, 122, 255, .45);
    background:
        radial-gradient(120% 90% at 50% 0%, var(--cl-tint), transparent 62%),
        var(--cl-surface);
}
.pakiet__znak {
    position: absolute; top: -11px; left: var(--cl-5);
    padding: 3px 10px;
    border-radius: var(--cl-r-full);
    background: linear-gradient(135deg, var(--cl-grad-a), var(--cl-grad-b));
    color: var(--cl-brand-ink);
    font-family: var(--cl-font-nag);
    font-size: 11px; font-weight: 700;
}

/* Bot nie ma grafiki pakietu w panelu, więc w nagłówku karty stoi znak Discorda
   w kaflu - inaczej wiersz z nazwą wyglądałby jak niedokończony. */
.pakiet__glif {
    display: grid; place-items: center;
    width: 48px; height: 48px; flex: none;
    border-radius: 12px;
    background: rgba(88, 101, 242, .16);
    color: #8A95F7;
}
.pakiet__glif svg { width: 26px; height: 26px; }

/* Grafika pakietu ta sama, co w panelu przy zamawianiu - klient widzi ten sam
   blok na stronie i w koszyku. */
.pakiet__gora {
    display: flex; align-items: center; gap: var(--cl-3);
    padding-bottom: var(--cl-4);
    border-bottom: 1px solid var(--cl-line);
}
.pakiet__obraz {
    width: 48px; height: 48px; flex: none;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45));
}
[data-theme="light"] .pakiet__obraz { filter: drop-shadow(0 8px 12px rgba(16, 24, 40, .2)); }

/* Nazwa pakietu identyfikuje ofertę, więc dostaje krój i kolor nagłówka */
.pakiet__nazwa {
    min-width: 0;
    color: var(--cl-text);
    font-family: var(--cl-font-nag);
    font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2;
}

/* RAM ucieka do prawej krawędzi - razem z parametrami niżej tworzy jedną kolumnę */
.pakiet__ram {
    margin-left: auto;
    flex: none;
    color: var(--cl-text-dim); font-size: 13px; white-space: nowrap;
}
.pakiet__ram b {
    font-family: var(--cl-font-nag);
    font-size: 23px; font-weight: 800; letter-spacing: -.02em;
    color: var(--cl-text);
}

.pakiet__dane { display: grid; gap: 10px; margin: var(--cl-4) 0 0; }
.pakiet__dane li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.pakiet__dane svg { width: 15px; height: 15px; flex: none; color: var(--cl-text-mute); }
.pakiet__dane span { color: var(--cl-text-mute); }
.pakiet__dane b { margin-left: auto; color: var(--cl-text-dim); font-weight: 500; }

.pakiet__ceny { margin-top: auto; padding-top: var(--cl-5); }
.pakiet__cena { display: flex; align-items: baseline; gap: 6px; }
.pakiet__cena b {
    background-image: linear-gradient(135deg, var(--cl-cena-a), var(--cl-cena-b));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    font-family: var(--cl-font-nag);
    font-size: 26px; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.pakiet__cena span { color: var(--cl-text-mute); font-size: 13px; }

/* Kierunek wjazdu bierzemy ze zmiennej ustawianej przez skrypt: cena w górę wjeżdża
   od dołu, cena w dół od góry. Bez tego licznik przewijałby się zawsze tak samo
   i ruch przeczyłby temu, co pokazuje liczba. */
.pakiet__cena b.jest-przewijana { animation: cl-kwota .34s var(--cl-spokoj) both; }

@keyframes cl-kwota {
    from { transform: translateY(calc(var(--kier, 1) * 10px)); opacity: .25; }
    to   { transform: none; opacity: 1; }
}

.pakiet__cta { width: 100%; margin-top: var(--cl-3); }


/* Nagłówek sekcji */
.naglowek { max-width: 640px; margin-bottom: var(--cl-10); }
.naglowek h2 { margin-top: var(--cl-3); }
.naglowek p { margin-top: var(--cl-4); }
.naglowek--srodek { margin-left: auto; margin-right: auto; text-align: center; }


/* --- Dokumenty prawne (regulamin, polityka prywatności) ---
   Długi tekst czyta się inaczej niż stronę sprzedażową: potrzebuje węższej kolumny,
   numeracji, do której da się odesłać, i spisu treści, który nie ucieka przy
   przewijaniu. Stąd dwie kolumny - przyklejony spis i treść o szerokości ~72 znaków.

   Numeracja paragrafów i punktów leci z przeglądarki (`ol`), a nie z treści: dopisanie
   punktu w środku paragrafu nie wymaga przenumerowania niczego w HTML-u. */

.naglowek-strony--dok { padding-bottom: var(--cl-8); }

.dok__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--cl-2) var(--cl-6);
    margin-top: var(--cl-6);
    font-size: 13px;
}
.dok__meta li { display: flex; align-items: baseline; gap: 6px; }
.dok__meta span { color: var(--cl-text-mute); }
.dok__meta b { font-weight: 600; }
.dok__meta a { color: var(--cl-brand-hi); font-weight: 600; }
.dok__meta a::after { content: " \2192"; }

.sekcja--dok { padding-top: var(--cl-10); }

.dok {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--cl-16);
    align-items: start;
}

/* Spis treści - karta przyklejona pod paskiem nawigacji. Przewija się sama lista,
   a nie cała kolumna: nagłówek „Spis treści" musi zostać na miejscu, bo inaczej przy
   przewinięciu do § 15 nie wiadomo, na co się patrzy.

   Suwak dostajemy własny (cienki, w kolorze linii) - systemowy pasek Windowsa jest
   szeroki, jasny i przy ciemnej karcie wygląda jak wklejony z innej strony. */
.dok__spis {
    position: sticky; top: calc(var(--cl-nav-h) + var(--cl-4));
    padding: var(--cl-4) var(--cl-2) var(--cl-4) var(--cl-4);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface);
}
.dok__spis-tytul {
    margin: 0 var(--cl-2) var(--cl-3) 0; padding-bottom: var(--cl-3);
    border-bottom: 1px solid var(--cl-line);
    color: var(--cl-text-mute);
    font-family: var(--cl-font-nag); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
}

.dok__spis-lista {
    display: grid; gap: 2px;
    max-height: calc(100vh - var(--cl-nav-h) - 150px);
    overflow-y: auto;
    padding-right: var(--cl-2);
    scrollbar-width: thin;
    scrollbar-color: var(--cl-line-hi) transparent;
    overscroll-behavior: contain;
}
.dok__spis-lista::-webkit-scrollbar { width: 6px; }
.dok__spis-lista::-webkit-scrollbar-track { background: transparent; }
.dok__spis-lista::-webkit-scrollbar-thumb {
    border-radius: var(--cl-r-full);
    background: var(--cl-line-hi);
}
.dok__spis-lista::-webkit-scrollbar-thumb:hover { background: var(--cl-text-mute); }

.dok__spis-lista a {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px;
    padding: 6px var(--cl-2) 6px 10px;
    border-left: 2px solid transparent; border-radius: var(--cl-r-btn);
    color: var(--cl-text-dim); font-size: 12.5px; line-height: 1.45;
}
.dok__spis-lista a span {
    color: var(--cl-text-mute);
    font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.dok__spis-lista a:hover { background: var(--cl-surface-2); color: var(--cl-text); }
.dok__spis-lista a.jest-tu {
    border-left-color: var(--cl-brand);
    border-radius: 0 var(--cl-r-btn) var(--cl-r-btn) 0;
    background: var(--cl-tint);
    color: var(--cl-text); font-weight: 500;
}
.dok__spis-lista a.jest-tu span { color: var(--cl-brand-hi); }

/* Kolumna treści wypełnia swój tor siatki, więc prawa krawędź dokumentu kończy się
   dokładnie tam, gdzie prawa krawędź paska nawigacji (oba siedzą w `.wrap`). Miary
   pilnuje szerszy tor spisu i większa przerwa między kolumnami, a nie sztywne `72ch`,
   które urywało tekst w połowie sekcji i wyglądało jak niedomknięty układ. */
.dok__tresc { min-width: 0; }
/* Adresy w treści („manager.cloudly.gg/support", e-maile) to jeden długi wyraz -
   bez tego wystają poza ekran telefonu. */
.dok__tresc a, .dok__tresc li, .dok__tresc p { overflow-wrap: anywhere; }

/* Skrót nad treścią - nie zastępuje regulaminu, ale odpowiada na pytania, po które
   ludzie i tak przychodzą (kiedy usuwamy serwer, czy zwracamy pieniądze). */
.dok__skrot {
    padding: var(--cl-5) var(--cl-6);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r-lg);
    background:
        radial-gradient(120% 90% at 0% 0%, var(--cl-tint), transparent 60%),
        var(--cl-surface);
}
.dok__skrot-tytul {
    color: var(--cl-brand-hi);
    font-family: var(--cl-font-nag); font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
}
.dok__skrot ul { display: grid; gap: 8px; margin-top: var(--cl-3); }
.dok__skrot li {
    position: relative; padding-left: var(--cl-5);
    color: var(--cl-text-dim); font-size: 14px; line-height: 1.6;
}
.dok__skrot li::before {
    content: ""; position: absolute; left: 4px; top: 9px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--cl-brand);
}
.dok__skrot-nota { margin-top: var(--cl-4); color: var(--cl-text-mute); font-size: 12.5px; }

.dok__par { margin-top: var(--cl-12); scroll-margin-top: calc(var(--cl-nav-h) + var(--cl-5)); }

.dok__par-tytul {
    display: flex; align-items: baseline; gap: var(--cl-3);
    padding-bottom: var(--cl-3);
    border-bottom: 1px solid var(--cl-line);
    font-family: var(--cl-font-nag); font-size: 19px; font-weight: 700; line-height: 1.3;
}
.dok__par-nr {
    flex: none;
    color: var(--cl-brand-hi);
    font-variant-numeric: tabular-nums;
}

.dok__wstep { margin-top: var(--cl-4); color: var(--cl-text-dim); font-size: 14.5px; line-height: 1.7; }

/* Punkty: `1.` na pierwszym poziomie, `a)` na drugim - jak w dokumencie na papierze,
   żeby dało się powołać na „§ 6 ust. 5 lit. b". */
/* własny licznik zamiast znacznika przeglądarki - inaczej obok „1." stałaby jeszcze
   natywna numeracja `ol` */
.dok__lista { margin-top: var(--cl-4); counter-reset: punkt; list-style: none; }
.dok__lista > li {
    position: relative;
    padding-left: var(--cl-8); margin-top: var(--cl-3);
    color: var(--cl-text-dim); font-size: 14.5px; line-height: 1.7;
}
.dok__lista > li::before {
    counter-increment: punkt;
    content: counter(punkt) ".";
    position: absolute; left: 0; top: 0;
    width: var(--cl-6); text-align: right;
    color: var(--cl-text-mute); font-variant-numeric: tabular-nums;
}
.dok__lista--lit { margin-top: var(--cl-2); }
.dok__lista--lit > li { padding-left: var(--cl-6); margin-top: var(--cl-2); font-size: 14px; }
.dok__lista--lit > li::before { content: counter(punkt, lower-alpha) ")"; width: var(--cl-4); }

.dok__lista b, .dok__wstep b, .dok__par p b { color: var(--cl-text); font-weight: 600; }
.dok__lista a, .dok__wstep a, .dok__skrot a { color: var(--cl-brand-hi); }
.dok__lista a:hover, .dok__wstep a:hover, .dok__skrot a:hover { text-decoration: underline; }
.dok__lista q { quotes: "\201E" "\201D"; color: var(--cl-text); font-style: italic; }

/* Punkt, który naprawdę zmienia sytuację klienta (utrata danych, utrata prawa
   odstąpienia) - wyróżniony paskiem, nie kolorem tekstu, żeby dokument nie zrobił
   się choinką. */
.dok__lista > li.dok__wazne {
    /* lewy odstęp większy niż w zwykłym punkcie: numer stoi wewnątrz ramki, więc
       potrzebuje własnego miejsca, żeby nie kleił się do pierwszego słowa */
    padding: var(--cl-4) var(--cl-4) var(--cl-4) var(--cl-10);
    border: 1px solid rgba(245, 158, 11, .28); border-radius: var(--cl-r);
    background: rgba(245, 158, 11, .06);
    color: var(--cl-text);
}
.dok__lista > li.dok__wazne::before { left: var(--cl-2); top: var(--cl-4); color: var(--cl-warn); }

/* Definicje w § 2 - słownik, nie luźny tekst: termin w lewej kolumnie, opis w prawej,
   wiersze rozdzielone linią. Domyślne `dd { margin-left }` przeglądarki dawało wcięcie
   bez związku z resztą dokumentu, a przy dwudziestu hasłach wyglądało to jak zlepek
   akapitów. */
.dok__def {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: var(--cl-5);
    margin-top: var(--cl-4); padding: var(--cl-2) var(--cl-5);
    border: 1px solid var(--cl-line); border-radius: var(--cl-r);
    background: var(--cl-surface);
}
.dok__def dt {
    grid-column: 1;
    padding: var(--cl-4) 0;
    border-top: 1px solid var(--cl-line);
    color: var(--cl-text);
    font-family: var(--cl-font-nag); font-size: 14px; font-weight: 700; line-height: 1.5;
}
.dok__def dd {
    grid-column: 2;
    margin: 0; padding: var(--cl-4) 0;
    border-top: 1px solid var(--cl-line);
    color: var(--cl-text-dim); font-size: 14.5px; line-height: 1.7;
}
/* pierwszy wiersz bez linii - inaczej dublowałaby ramkę bloku */
.dok__def dt:first-of-type,
.dok__def dt:first-of-type + dd { border-top: 0; }

/* Zagnieżdżona lista (definicja Usługi) siedzi w kolumnie opisu, więc nie potrzebuje
   dodatkowego odstępu od góry. */
.dok__def dd > .dok__lista { margin-top: var(--cl-2); }

@media (max-width: 720px) {
    /* na wąskim ekranie kolumna 190 px zostawiałaby opisom pasek na 4 słowa */
    .dok__def { grid-template-columns: minmax(0, 1fr); padding: var(--cl-2) var(--cl-4); }
    .dok__def dt { grid-column: 1; padding-bottom: 0; }
    .dok__def dd { grid-column: 1; padding-top: var(--cl-2); border-top: 0; }
}

.dok__tabela-owijka { margin-top: var(--cl-4); overflow-x: auto; border-radius: var(--cl-r); }
.dok__tabela {
    width: 100%; min-width: 560px;
    border-collapse: collapse;
    background: var(--cl-surface);
    font-size: 13.5px;
}
.dok__tabela th, .dok__tabela td {
    padding: var(--cl-3) var(--cl-4);
    border-bottom: 1px solid var(--cl-line);
    text-align: left; vertical-align: top; line-height: 1.6;
}
.dok__tabela thead th {
    background: var(--cl-surface-2);
    color: var(--cl-text-mute);
    font-family: var(--cl-font-nag); font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}
.dok__tabela tbody th { color: var(--cl-text); font-weight: 600; }
.dok__tabela td { color: var(--cl-text-dim); }
.dok__tabela tbody tr:last-child th, .dok__tabela tbody tr:last-child td { border-bottom: 0; }
.dok__tabela a { color: var(--cl-brand-hi); }

.dok__nota { margin-top: var(--cl-4); color: var(--cl-text-mute); font-size: 13px; line-height: 1.65; }

/* Wzór oświadczenia - wygląda jak formularz do wydrukowania, kropki trzymają równe
   linie do wpisania. */
.dok__wzor {
    margin-top: var(--cl-4); padding: var(--cl-5);
    border: 1px dashed var(--cl-line-hi); border-radius: var(--cl-r);
    background: var(--cl-surface);
    color: var(--cl-text-dim); font-size: 14px; line-height: 1.9;
}
.dok__wzor p + p { margin-top: var(--cl-4); }

@media (max-width: 1000px) {
    /* Spis treści przestaje być kolumną - ląduje kartą nad treścią. Lista dostaje
       niższy limit wysokości, bo pełne 22 paragrafy zjadłyby cały pierwszy ekran. */
    .dok { grid-template-columns: minmax(0, 1fr); gap: var(--cl-6); }
    .dok__spis { position: static; }
    .dok__spis-lista { max-height: 38vh; }
    .dok__tresc { max-width: none; }
}

@media (max-width: 640px) {
    .dok__par-tytul { flex-direction: column; gap: 2px; font-size: 17.5px; }
    .dok__skrot { padding: var(--cl-4); }
}

/* Wydruk: dokument prawny bywa drukowany albo zapisywany do PDF-u, więc warto,
   żeby nie wyszła z tego ciemna plama z menu i stopką. */
@media print {
    .nav, .stopka, .dok__spis, .tlo, .zaslona, .naglowek-strony__tlo, .skip { display: none !important; }
    .dok { display: block; }
    .dok__tresc { max-width: none; }
    .dok__par { break-inside: avoid-page; margin-top: var(--cl-8); }
    .dok__skrot { border: 1px solid #999; background: none; }
}

/* ------------------------------------------------ 7B. TELEFON: CELE DOTYKU

   Kursor trafia w 36 px, palec potrzebuje ~44. Podnosimy więc na wąskich ekranach
   przyciski, ikonki i przełączniki okresów - i tylko to, bo reszta układu jest już
   sprawdzona przy 320-430 px. Blok stoi po wszystkich sekcjach, żeby wygrać
   z wcześniejszymi deklaracjami wysokości przy równej wadze selektorów. */

@media (max-width: 640px) {
    .btn { height: 44px; }
    .btn--duzy { height: 48px; }
    .ikonka { width: 40px; height: 40px; }
    .przelacznik__poz { height: 42px; }

    /* Wersaliki w 10 px są na telefonie na granicy czytelności. */
    .stopka__firma-dane dt { font-size: 11.5px; }
    .usluga__znak { font-size: 11px; }

    /* Szerokie tabele zostają przewijane w poziomie (ściśnięcie kolumn do 390 px
       byłoby nieczytelne), ale muszą to po sobie pokazać - inaczej wyglądają na
       ucięte. Podpis jest przyklejony do lewej krawędzi boksu, więc widać go
       niezależnie od przesunięcia tabeli. */
    .limity::after,
    .dok__tabela-owijka::after {
        content: 'Przesuń tabelę w poziomie, żeby zobaczyć całość →';
        position: sticky; left: 0;
        display: block; width: max-content; max-width: 100%;
        padding: 10px var(--cl-4) 12px;
        color: var(--cl-text-mute);
        font-size: 11.5px; font-weight: 600;
    }
}

/* ------------------------------------------------ 8. LOGO ZALEŻNE OD MOTYWU

   Blok siedzi na końcu i celuje w `[data-theme]`, żeby wygrać z lokalnymi
   `display: block` przy logotypach (pasek, stopka). Przy równej wadze
   selektorów wygrywałaby ostatnia reguła w pliku - a to pułapka, w którą
   łatwo wdepnąć przy dopisywaniu kolejnych sekcji. */

[data-theme] img.logo--light        { display: none; }
[data-theme="light"] img.logo--dark  { display: none; }
[data-theme="light"] img.logo--light { display: block; }