/* Podstrona „Firma” (PL i EN): wygląd z firma.html. Stany i dane wypełnia test-ai.js (companyPage); test firmy idzie z test.css, jak test na stronie testu. */
/* Inter z własnego serwera: te same pliki co Google Fonts v20 (latin, latin-ext), wagi 400 i 500 jak w projekcie */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 500;font-display:swap;src:url("/fonts/inter-32cb096a.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 500;font-display:swap;src:url("/fonts/inter-13387c02.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Zastępcza czcionka o wymiarach Inter: zanim Inter się wczyta, tekst zajmuje tyle samo miejsca, więc nic się nie przesuwa po załadowaniu */
@font-face{font-family:"Inter Fallback";font-weight:400;src:local("Arial");size-adjust:107%;ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:500;src:local("Arial");size-adjust:108.1%;ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%}
/* Podstrona „Ranking”: te same tokeny i komponenty co strona testu i „Odznaki” (badges.css), sekcje od góry do dołu. */
:root{
  --cream:#f7f3ea; --ink:#0e0e0e;
  --t5:#5b49c4;
  --wrap:1120px; --gut:clamp(20px,5vw,48px);
  --r:8px;
  --ease:cubic-bezier(.16,1,.3,1);
  --soft:cubic-bezier(.4,0,.2,1);
  /* Stała hierarchia tekstu dla całej strony. Każdy rozmiar ma jedną funkcję:
     h1 36-52   nagłówek strony
     h2 28-40   nagłówki sekcji
     figure 48  kluczowe liczby
     base 16    tekst do czytania i elementy akcji: opis, nawigacja, przycisk, nazwy poziomów
     aux 13     informacje pomocnicze: etykiety, podpisy, przełącznik języka, numery kroków, przedziały punktów, stopka */
  --fs-xs:13px;
  --fs-eyebrow:var(--fs-xs);
  --fs-base:16px;
  /* Odległości w hero wynikają z bliskości, nie z równych przerw:
     s 16 = element opisuje sąsiada (etykieta nad nagłówkiem, podpis pod przyciskiem)
     m 24 = elementy powiązane (nagłówek i opis)
     l 48 = osobne grupy (treść i akcja) */
  --sp-s:16px; --sp-m:24px; --sp-l:48px;
  /* Skala odstępów (siatka 8 px). Każdy odstęp na stronie to jeden z tych tokenów:
     1 = 8 (drobny odstęp wewnątrz elementu) | 2 = 16 | 3 = 24 | 4 = 48 | 5 = 64 (między blokami w sekcji) | 6 = 96 (padding sekcji) */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:48px; --sp-5:64px; --sp-6:96px;
  /* Kolory: czerń, biel i dwie szarości o tej samej randze w hierarchii (kontrast około 6:1 na własnym tle).
     tło hero #0e0e0e | biel: wszystko, co się czyta lub uruchamia (nagłówek, opis, nawigacja, przycisk, aktywny język)
     --gray-on-dark  #8f8f8f: informacje pomocnicze i nieaktywne na ciemnym tle (hero)
     --gray-on-light #636363: ta sama rola na jasnym tle (do użycia w sekcjach na jasnym tle) */
  --h-fg:#fff; --gray-on-dark:#8f8f8f; --gray-on-light:#636363;
  /* Linie: jedna grubość i jeden kolor wszędzie. Linia ma długość kontenera, który dzieli. */
  --line:var(--gray-on-light); --line-w:1px;
  /* Fiolet w parze jak szarości: ciemniejszy na jasnym tle, jaśniejszy na ciemnym, oba z kontrastem około 6,6:1,
     więc mają tę samą wagę dla oka i nie konkurują. */
  --violet-on-light:#5b49c4; --violet-on-dark:#998bea;
  --fs-figure:48px;
  --fs-h2:clamp(28px,3.4vw,40px);
  --fs-h1:clamp(36px,4vw,52px);
}
*{box-sizing:border-box;margin:0}
/* tło pod stroną (widoczne przy przewinięciu poza górę i dół) w kolorze hero i stopki, nie kremowe */
html{-webkit-text-size-adjust:100%;background:var(--ink)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:Inter,"Inter Fallback",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6;font-size:var(--fs-base)}
a{color:inherit}
ul,ol{list-style:none;padding:0}
.wrap{max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:2px solid var(--t5);outline-offset:3px}
.hero :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px;top:8px;background:var(--cream);color:var(--ink);padding:var(--sp-1) var(--sp-2);line-height:24px;z-index:10}
.skip:focus{left:8px}

h2{font-weight:500;font-size:var(--fs-h2);line-height:1.1;line-height:round(up,calc(var(--fs-h2) * 1.1),4px);letter-spacing:-.035em;text-wrap:balance}
.label{font-size:var(--fs-eyebrow);line-height:20px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-on-light)}
.sec{border-top:var(--line-w) solid var(--line);padding:var(--sp-6) 0}


/* ---------- HERO ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--h-fg);min-height:clamp(620px,54vw,800px);display:grid;place-items:center;padding:96px var(--gut) 112px}
.nav{position:absolute;top:0;left:0;right:0;z-index:2}
.nav .wrap{max-width:none;padding:0 clamp(24px,4vw,64px);height:80px;display:flex;align-items:center;justify-content:space-between}
.logo{display:block;line-height:0}
.logo svg{display:block;height:30px;width:auto}
.nav ul{display:flex;align-items:center;gap:36px;font-size:var(--fs-base);font-weight:500}
.nav a:not(.logo){position:relative;text-decoration:none;padding:6px 0;line-height:24px;color:var(--h-fg)}
/* fioletowa linia wyrasta od środka na boki przy najechaniu, szerokość równa szerokości linku */
.nav ul > li > a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:999px;background:var(--violet-on-dark);transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease)}
.nav ul > li > a:hover::after,.nav ul > li > a:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.nav ul > li > a::after{transition:none}}
/* przełącznik języka jak na stronie dla firm: ramka, PL / EN, aktywny język wyróżniony */
.nav .lang{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border:1.5px solid var(--h-fg);font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em;line-height:16px}
.nav .lang a,.nav .lang a[aria-current]{padding:0;border:0;line-height:16px;color:var(--gray-on-dark)}
.nav .lang a:hover{color:var(--h-fg)}
.nav .lang a[aria-current]{color:var(--h-fg)}
.nav .lang span{color:var(--gray-on-dark);font-weight:400}

/* Rytm w hero (tokeny --sp-*): etykieta 16 nagłówek 24 opis 48 przycisk 16 podpis.
   Padding hero jest większy na dole niż na górze, żeby blok leżał optycznie nieco powyżej środka. */
.hero-copy{max-width:820px;text-align:center}
.hero-copy .eyebrow{font-size:var(--fs-eyebrow);font-weight:500;line-height:20px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-on-dark)}
.hero-copy h1{margin:var(--sp-s) 0 var(--sp-m);font-size:var(--fs-h1);line-height:1.08;line-height:round(up,calc(var(--fs-h1) * 1.08),4px);letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.hero-copy p{max-width:38em;margin-inline:auto;font-size:var(--fs-base);line-height:24px;color:var(--h-fg);text-wrap:balance}
.hero-actions{display:flex;flex-direction:column;align-items:center;gap:var(--sp-s);margin-top:var(--sp-l)}
.btn{display:inline-block;padding:10px 28px;background:#fff;color:var(--ink);font-size:var(--fs-base);font-weight:500;line-height:24px;text-decoration:none;border-radius:4px}
/* hover: przycisk stoi w miejscu, przesuwa się tylko strzałka (kierunek akcji) */
/* Inter z Google Fonts nie ma znaku „→”; strzałka bierze czcionkę systemową, tak jak wyglądała od początku */
.btn .arr{display:inline-block;font-family:system-ui,-apple-system,"Helvetica Neue",sans-serif;transition:transform .25s var(--ease)}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.btn .arr{transition:none}}


/* ---------- HERO PODSTRONY ---------- */
/* Ten sam język co hero strony testu, ale niższy: treść wyznacza wysokość, bez tła z chipami. */
.hero.sub{min-height:0;padding:calc(80px + var(--sp-6)) var(--gut) var(--sp-6)}
.nav ul > li > a[aria-current="page"]::after{transform:scaleX(1)}
/* opis jest tu dłuższy niż na stronie testu: szerszy limit (tuż poniżej szerokości nagłówka), żeby ułożył się w dwie linie */
.hero.sub .hero-copy p:not(.eyebrow){max-width:47em}

/* ---------- SEKCJE ---------- */
.sec h2{margin-top:var(--sp-2)}
.sec .copy{margin-top:var(--sp-3);max-width:calc((100% - var(--sp-5)) * 6 / 11);font-size:var(--fs-base);line-height:24px;text-wrap:balance}
.light{background:#fff;border-top:0}
.dark{background:var(--ink);color:var(--h-fg);border-top:0}
.dark .label{color:var(--gray-on-dark)}

/* ---------- KOMPONENTY STRONY TESTU (landing.css) ---------- */
.l1{--c0:#10175a;--c1:#2e3a96;--c2:#6f8cff}
.l2{--c0:#2c6410;--c1:#6f9a12;--c2:#a9cc22}
.l3{--c0:#b5320e;--c1:#e0661c;--c2:#f7a548}
.l4{--c0:#a10d58;--c1:#e5197b;--c2:#ff78bb}
.l5{--c0:#221a6e;--c1:#5b49c4;--c2:#b4a8ff}
.si{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:6px;background:radial-gradient(90% 70% at 14% 0%,var(--c2) 0,transparent 70%),linear-gradient(160deg,var(--c1),var(--c0))}
.si .sg{display:block;width:22px;height:22px;overflow:visible}
.si [fill="var(--c0)"]{fill:color-mix(in srgb,var(--c0) 50%,#000);fill-opacity:1}
.l3 .si [fill="var(--c0)"]{fill:#fff}
.figures{display:flex;flex-direction:column;gap:var(--sp-3)}
.figures li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:var(--sp-2);align-items:start}
.figures .rule{display:block;height:var(--line-w);background:var(--line)}
.figures .fig{font-size:var(--fs-figure);line-height:48px;font-weight:500;letter-spacing:-.035em;color:var(--violet-on-light)}
.figures b{display:block;font-size:var(--fs-base);line-height:24px;font-weight:500}
.figures p{margin-top:var(--sp-1);text-wrap:balance;font-size:var(--fs-base);line-height:24px;color:var(--ink)}
.axis{position:relative;margin-top:var(--sp-3);height:calc(var(--sp-3) + 20px);font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.axis::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--line-w);background:var(--line)}
.axis span{position:absolute;top:var(--sp-3);left:calc(var(--p) * 1%);transform:translateX(-50%)}
.axis span::before{content:"";position:absolute;top:calc(var(--sp-3) * -1 + (var(--line-w) - var(--sp-1)) / 2);left:50%;width:var(--sp-1);height:var(--sp-1);border-radius:50%;background:var(--line);transform:translateX(-50%)}
.axis span:first-child{transform:none}
.axis span:first-child::before{left:0;transform:none}
.axis span:last-child{transform:translateX(-100%)}
.axis span:last-child::before{left:auto;right:0;transform:none}
.m1{--c0:#3f2312;--c1:#8c5634;--c2:#d9a17a}
.m2{--c0:#2e333c;--c1:#7d838f;--c2:#e6e9ef}
.m3{--c0:#45320a;--c1:#8f6c17;--c2:#e6c463}

/* ---------- STANY BEZ DANYCH FIRMY ---------- */
/* Bez wyniku, bez nazwy firmy, nieaktualny kod, błąd serwera, wczytywanie. Ciemny hero w wysokości hero strony testu,
   na środku biała karta z komunikatem (jak okienko „Wróć do swojego wyniku”), w tle ścieżki w kolorach poziomów
   jak w hero strony testu, bez chipów: rysują się od krawędzi do karty, potem biegną po nich krótkie impulsy. */
/* karta optycznie nad środkiem: pod paskiem nawigacji tylko jego wysokość, na dole dwa razy więcej miejsca */
.hero.state{min-height:clamp(620px,54vw,800px);padding:80px var(--gut) 128px}
.st-card{position:relative;z-index:1;width:min(640px,100%);padding:var(--sp-5) var(--sp-4);border-radius:var(--r);background:#fff;color:var(--ink);text-align:center;transition:box-shadow 1.2s var(--soft)}
.hero.wired .st-card{box-shadow:0 0 48px rgba(255,255,255,.12)}
.st-card .eyebrow{font-size:var(--fs-eyebrow);font-weight:500;line-height:20px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-on-light)}
.st-card h1{margin:var(--sp-s) 0 0;font-size:var(--fs-h1);line-height:1.08;line-height:round(up,calc(var(--fs-h1) * 1.08),4px);letter-spacing:-.035em;font-weight:500;text-wrap:balance}
.st-card p:not(.eyebrow){margin-top:var(--sp-m);font-size:var(--fs-base);line-height:24px;text-wrap:balance}
.hero-actions{display:flex;flex-direction:column;align-items:center;gap:var(--sp-s);margin-top:var(--sp-l)}
.st-card .btn{background:var(--ink);color:#fff}
button.btn{border:0;cursor:pointer;font-family:inherit}
/* przy dolnej krawędzi (pod hero jest stopka) ścieżki gasną na ostatnich 160 px zamiast się ucinać */
.st-bg{position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 160px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 160px),transparent)}
.st-bg svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.st-bg path{fill:none;stroke:var(--c2);stroke-opacity:.45;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.st-bg path.pulse{stroke-opacity:.95;stroke-width:2}
.l1{--c2:#6f8cff}.l2{--c2:#a9cc22}.l3{--c2:#f7a548}.l4{--c2:#ff78bb}.l5{--c2:#b4a8ff}

/* ---------- WYNIK FIRMY ---------- */
/* Kolejność czytania: jak firma stoi (hero) → co dalej, czyli ścieżka odznak z brakującymi warunkami →
   ludzie (z zaproszeniem zespołu) → test firmy (osobny test o organizacji, jego wynik i powtórka) → co zrobić → pytania kontrolne.
   Teksty z gotowych stron (Odznaki, ranking, strona testu), łączone, nie pisane od nowa. */
:root{--tint:#f4f4f4;--track:#ececec;--edge:#e2e2e2}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:none;color:inherit;box-shadow:inset 0 0 0 var(--line-w) currentColor}
.light{background:#fff}
.sec-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-5);align-items:end}
.sec-head .copy{margin-top:var(--sp-3);max-width:none;font-size:var(--fs-base);line-height:24px;text-wrap:pretty}
.cta{margin-top:var(--sp-4)}
.note{margin-top:var(--sp-2);font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.dark .note{color:var(--gray-on-dark)}
.h3{font-size:var(--fs-base);line-height:24px;font-weight:500}

/* hero: przyznana odznaka jest nagrodą, więc stoi w hero; numer pod grafiką, „Sprawdź odznakę” jak podkreślony link
   pod przyciskiem w hero strony testu („Wróć do swojego wyniku”) */
.hero-badge{width:min(440px,100%);margin:var(--sp-4) auto 0}
.hero-badge img{display:block;width:100%;height:auto}
.hero-badge .no{margin-top:var(--sp-1);font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-dark)}
.back{font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-dark);text-decoration:underline;text-underline-offset:4px;transition:color .2s}
.back:hover{color:var(--h-fg)}

/* ścieżka odznak: karty w kolorach tła odznak (brąz, srebro, złoto, ten sam gradient co na odznace),
   znak w szklanym kafelku jak na odznace, warunki jako postęp na cienkich paskach jak kreski na odznace.
   Zablokowana: ciemna jak tło odznak weryfikowanych, bez koloru, z kłódką. */
.path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-5)}
.step{position:relative;display:flex;flex-direction:column;padding:var(--sp-3);border-radius:20px;color:#fff;overflow:hidden;
  background:radial-gradient(90% 70% at 14% 0%,color-mix(in srgb,var(--c2) 70%,transparent) 0,transparent 70%),linear-gradient(160deg,var(--c1),var(--c0))}
.step-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.step .si{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.step .si .sg{width:40px;height:40px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);line-height:20px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.tag svg{width:14px;height:14px}
.step h3{margin-top:var(--sp-4);font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.02em}
.reqs{display:grid;gap:var(--sp-2);margin-top:var(--sp-3);font-variant-numeric:tabular-nums}
.reqs li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-2);row-gap:6px;line-height:24px;color:rgba(255,255,255,.86)}
.reqs .v{font-weight:500;color:#fff}
.reqs .bar{grid-column:1 / -1;height:4px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden}
.reqs .bar i{display:block;height:100%;border-radius:2px;background:#fff}
/* Trzy stopnie wyrazistości, czytelne bez czytania etykiet:
   przyznana = pełne tło odznaki; następna = biała karta z obramowaniem w kolorze odznaki, kolor tylko na znaku i paskach (w toku);
   zablokowana = płaska szara karta, bez koloru, z kłódką */
.step.next{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--c1)}
.step.next .si{background:radial-gradient(90% 70% at 14% 0%,var(--c2) 0,transparent 70%),linear-gradient(160deg,var(--c1),var(--c0));box-shadow:none}
.step.next .tag{color:var(--c1)}
.step.next .reqs li{color:var(--ink)}
.step.next .reqs .v{color:var(--ink)}
.step.next .reqs .bar{background:var(--track)}
.step.next .reqs .bar i{background:linear-gradient(90deg,var(--c1),var(--c0))}
.step.locked{background:var(--tint);color:var(--gray-on-light)}
.step.locked .si{background:#c4c4c4;box-shadow:none}
.step.locked .tag,.step.locked .reqs li,.step.locked .reqs .v{color:var(--gray-on-light)}
.step.locked .reqs .bar{background:#e4e4e4}
.step.locked .reqs .bar i{background:#bdbdbd}

/* ludzie: najpierw liczby (średni i najwyższy Indeks AI, ambasadorzy), potem poziomy jako jeden pasek
   w kolorach poziomów z legendą, wymiary w jednym rzędzie, na końcu zaproszenie zespołu */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-5)}
.stats b{display:block;font-size:var(--fs-figure);line-height:48px;font-weight:500;letter-spacing:-.035em;color:var(--violet-on-dark);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:var(--sp-1);line-height:24px}
.lvbar{display:flex;gap:3px;height:12px;margin-top:var(--sp-2);border-radius:6px;overflow:hidden}
.lvbar i{display:block;height:100%;background:linear-gradient(160deg,var(--c1),var(--c0))}
.legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-2);margin-top:var(--sp-3)}
.legend li{display:flex;align-items:center;gap:var(--sp-1);line-height:24px}
/* liczba tuż przy nazwie poziomu, a nie na końcu kolumny, gdzie stała bliżej sąsiedniej nazwy */
.legend li b{margin-left:var(--sp-1);font-weight:500;font-variant-numeric:tabular-nums}
.legend li.zero{color:var(--gray-on-dark)}
.block{margin-top:var(--sp-5)}
.dims4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-2)}
/* wymiary: wartość nad nazwą, jak liczby w statystykach powyżej, tylko mniejsza */
.dims4 b{display:block;font-size:var(--fs-h2);line-height:40px;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.dims4 span{display:block;margin-top:var(--sp-1);line-height:24px}
.invite{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-5);align-items:end}
.invite p{margin-top:var(--sp-1);line-height:24px}
.copyrow{display:flex;gap:var(--sp-2)}
.copyrow input{flex:1;min-width:0;padding:9px var(--sp-2);border:var(--line-w) solid var(--gray-on-dark);border-radius:4px;background:none;color:var(--h-fg);font:inherit;font-size:var(--fs-xs);line-height:24px}

/* test firmy po wykonaniu: wynik i poziom dojrzałości na skali pięciu poziomów, obok data i powtórka tego samego testu */
.t-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-5);align-items:start}
.score{display:flex;align-items:baseline;gap:var(--sp-1);margin-top:var(--sp-3)}
.score b{font-size:96px;line-height:88px;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.score span{font-size:var(--fs-h2);color:var(--gray-on-light)}
.t-head .copy{margin-top:var(--sp-3);max-width:none;line-height:24px;text-wrap:pretty}
/* box: dwie grupy rozdzielone odstępem, data jako mała etykieta nad wartością (jak liczby w statystykach), akcja na dole */
.t-meta{display:grid;gap:var(--sp-4);padding:var(--sp-4);border-radius:var(--r);background:var(--tint)}
.t-meta .lbl{font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.t-meta .date{margin-top:var(--sp-1);font-size:var(--fs-h2);line-height:40px;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.t-act p{line-height:24px}
.t-act p + p{margin-top:var(--sp-1)}
.t-act .btn{margin-top:var(--sp-3)}
.t-act .btn:first-child{margin-top:0}
.t-act p.h3 + p{color:var(--gray-on-light)}
.scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:var(--sp-4)}
.scale li{font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.scale li::before{content:"";display:block;height:6px;margin-bottom:var(--sp-1);border-radius:3px;background:var(--track)}
.scale li.past::before{background:color-mix(in srgb,var(--violet-on-light) 40%,#fff)}
.scale li.on::before{background:var(--violet-on-light)}
.scale li.on{color:var(--ink);font-weight:500}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--sp-5);margin-top:var(--sp-5);align-items:start}
.areas{margin-top:var(--sp-1)}
.areas li{display:grid;grid-template-columns:minmax(0,1fr) auto 48px;column-gap:var(--sp-3);align-items:center;min-height:44px}
/* obszary: głębokość widać po kreskach, bez powtarzania jej liczbą; gwiazdka (obniżony poziom) przy nazwie */
.areas.depth li{grid-template-columns:minmax(0,1fr) auto}
.pips{display:flex;gap:6px}
.pips i{display:block;width:24px;height:6px;border-radius:3px;background:var(--track)}
.pips i.on{background:var(--violet-on-light)}
/* cel firmy (test-ai.js gapList): kreski między „dziś” a „cel” jako sam obrys */
.pips i.goal{background:none;box-shadow:inset 0 0 0 1.5px var(--accent,var(--violet-on-light))}
.areas.gap li{grid-template-columns:minmax(0,1fr) auto auto}
.areas.gap .v{font-weight:400;font-size:var(--fs-xs)}
.areas .v{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.areas .v.skipped{font-weight:400;color:var(--gray-on-light);font-size:var(--fs-xs)}

/* co zrobić: białe karty na czarnym tle jak „Jak to działa” na stronie testu */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-5)}
.card{background:#fff;color:var(--ink);padding:var(--sp-3);border-radius:var(--r)}
.card .num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--violet-on-light);color:#fff;font-size:var(--fs-xs);line-height:20px;font-weight:500}
.card h3{margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-base);line-height:24px;font-weight:500}
.card p{line-height:24px;text-wrap:pretty}
.offer{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-5);align-items:center;margin-top:var(--sp-5)}
.offer p{margin-top:var(--sp-1);line-height:24px;color:var(--h-fg)}
.offer .btn{justify-self:end}

/* pytania kontrolne: pytanie w wierszu, lepsza odpowiedź po rozwinięciu */
.checks{display:grid;gap:var(--sp-1);margin-top:var(--sp-5)}
.checks details,.checks .row{border-radius:var(--r);background:var(--tint)}
.checks summary,.checks .row{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;column-gap:var(--sp-3);align-items:center;padding:var(--sp-2) var(--sp-3);cursor:pointer;list-style:none}
.checks .row{cursor:default}
.checks summary::-webkit-details-marker{display:none}
/* nazwa obszaru zwykłym pismem: w każdym wierszu, więc wersaliki z szerokim odstępem męczyły przy czytaniu listy */
.checks .q small{display:block;font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light)}
.checks .q span{display:block;margin-top:2px;font-weight:500;line-height:24px}
.checks .st{font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light);white-space:nowrap}
.checks .st.ok{color:var(--violet-on-light)}
.checks .chev{width:20px;height:20px;color:var(--gray-on-light);transition:transform .35s var(--ease)}
.checks details[open] .chev{transform:rotate(180deg)}
.checks .better{padding:0 var(--sp-3) var(--sp-3)}
.checks .better li + li{margin-top:var(--sp-2)}
.checks .better b{font-weight:500}
.checks .better p{line-height:24px}
.checks .better .why{color:var(--gray-on-light)}
@media (prefers-reduced-motion:reduce){.checks .chev{transition:none}}
/* ---------- STOPKA ---------- */
.foot{background:var(--ink);padding:var(--sp-5) 0}
.foot .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-dark)}
.foot b{display:block;margin-bottom:var(--sp-2);color:var(--h-fg);font-weight:500}
.foot span{display:block;text-wrap:pretty}
.foot span + span{margin-top:var(--sp-1)}
.foot .wrap > div:nth-child(2):last-child{grid-column:2 / 4}
.foot a{color:var(--h-fg)}

/* Jedna reakcja na naciśnięcie dla wszystkiego, co się klika: delikatne zmniejszenie (1,5%),
   szybkie wejście (0,12 s) i miękki powrót (0,45 s), żeby nic nie "skakało". */
.foot a,.nav ul > li > a{display:inline-block}
:is(.btn,.logo,.foot a,.nav ul > li > a,.nav .lang a){transition:transform .45s var(--ease),color .2s,border-color .2s,background-color .2s}
:is(.btn,.logo,.foot a,.nav ul > li > a,.nav .lang a):active{transform:scale(.985);transition-duration:.12s}
@media (prefers-reduced-motion:reduce){:is(.btn,.logo,.foot a,.nav ul > li > a,.nav .lang a){transition:none}}


@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
}
@media (max-width:900px){
  .nav ul{gap:20px}
  .logo svg{height:26px}
  .sec{padding:var(--sp-5) 0}
  .hero.sub{padding:calc(80px + var(--sp-5)) var(--gut) var(--sp-5)}
  .sec .copy,.closing{max-width:none}
  .foot .wrap{grid-template-columns:1fr}
  .foot .wrap > div:nth-child(2):last-child{grid-column:auto}
}
@media (max-width:520px){
  .nav ul{gap:14px;align-items:center}
  .nav .lang{padding:7px 11px}
}

/* ---------- TELEFON ---------- */
/* Do 640 px. Telefon to zwykle wejście z LinkedIn: kilka sekund na decyzję, czy test jest wiarygodny.
   Dlatego: jedna oś (wszystko do lewej, także hero), skala pisma na mały ekran (etykiety wyraźnie mniejsze
   niż tekst, większa interlinia do czytania), mniej tekstu naraz (karuzele, krótkie liczby), bez linii
   i bez animacji wejścia, a każde dotknięcie ma odpowiedź. Pasek przyklejony u góry z menu. Obsługa: /test-ai/phone.js */
.burger,.dots{display:none}
@media (max-width:640px){
  :root{--fs-h1:34px;--fs-h2:26px;--fs-eyebrow:11px}
  body{-webkit-tap-highlight-color:transparent}
  .label,.hero-copy .eyebrow{line-height:16px;letter-spacing:.14em}
  .copy,.hero-copy p:not(.eyebrow),.closing{line-height:26px}
  .sec{padding:var(--sp-5) 0}
  .sec h2{margin-top:var(--sp-1)}
  .sec .copy{margin-top:var(--sp-2)}

  /* pasek i menu */
  .hero{isolation:auto}
  .nav{position:fixed;z-index:30;transition:background-color .3s var(--soft),transform .35s var(--ease)}
  .nav .wrap{height:64px;padding:0 var(--gut)}
  .nav.solid,.nav.open{background:var(--ink)}
  .nav.away{transform:translateY(-100%)}
  .burger{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--h-fg);cursor:pointer}
  .burger svg{display:block;width:24px;height:24px;overflow:visible}
  .burger path{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ease)}
  .nav.open .burger .b1{transform:translateY(3px) rotate(45deg)}
  .nav.open .burger .b2{transform:translateY(-3px) rotate(-45deg)}
  #menu{display:none}
  .nav.open #menu{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);position:fixed;inset:64px 0 0;overflow:auto;padding:var(--sp-4) var(--gut) var(--sp-5);background:var(--ink)}
  #menu > li > a{padding:var(--sp-1) 0;font-size:var(--fs-h2);line-height:40px;letter-spacing:-.03em}
  #menu > li > a::after{bottom:var(--sp-1)}
  #menu > li > a:active{color:var(--gray-on-dark)}
  #menu > li:last-child{margin-top:var(--sp-4)}
  html.menu-open{overflow:hidden}

  /* hero na tej samej osi co reszta strony: do lewej, przycisk na całą szerokość */
  .hero{place-items:start stretch}
  .hero-copy{width:100%;text-align:left}
  .hero-copy p:not(.eyebrow){margin-inline:0;text-wrap:pretty}
  .hero-copy h1{margin:var(--sp-2) 0}
  .hero-actions{align-items:stretch;margin-top:var(--sp-4);gap:var(--sp-1)}
  .hero-actions .btn,.me .btn{display:block;padding:12px 24px;text-align:center}
  .btn:active{background-color:#e6e6e6}
  .btn.dark:active{background-color:#2a2a2a}
  .hero-actions .back{align-self:flex-start;padding:12px 0;margin-left:0}

  /* karuzela: slajd ma szerokość kolumny tekstu, przesuwa się po jednym; kreski to przyciski (stuknij, by przejść) */
  [data-carousel]{display:flex!important;gap:calc(var(--gut) + 2px);margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  [data-carousel]::-webkit-scrollbar{display:none}
  [data-carousel] > li{position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
  .dots{display:flex;justify-content:center;margin-top:var(--sp-1)}
  .dots button{display:grid;place-items:center;width:36px;height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
  .dots button::before{content:"";width:24px;height:4px;border-radius:2px;background:currentColor;opacity:.2;transition:opacity .25s var(--soft)}
  .dots button.on::before{opacity:1}
  .dots button:active::before{opacity:.6}

  /* bez animacji wejścia na telefonie: treść jest od razu na miejscu */
  .js .rv{opacity:1;transform:none;transition:none}
  @media (prefers-reduced-motion:no-preference){
    .nav.open #menu{animation:menu-in .35s var(--ease)}
    @keyframes menu-in{from{opacity:0;transform:translateY(-8px)}}
  }
  @media (prefers-reduced-motion:reduce){.nav,.burger path,.dots button::before{transition:none}}

  /* hero */
  .hero.sub{padding:calc(64px + var(--sp-4)) var(--gut) var(--sp-5)}
  .cta{margin-top:var(--sp-3)}

  .foot .wrap{gap:32px}
}

/* ---------- OKIENKO: wróć do wyniku (z landing.css, jak na stronie testu) ---------- */
html:has(dialog.m[open]){overflow:hidden}
dialog.m{position:fixed;inset:0;margin:auto;padding:0;border:0;border-radius:var(--r);background:#fff;color:var(--ink);width:min(640px,calc(100% - 2 * var(--gut)));height:fit-content;max-height:calc(100dvh - 2 * var(--sp-3));overflow:auto}
dialog.m::backdrop{background:rgba(14,14,14,.64)}
.m-in{display:grid;gap:var(--sp-4);padding:var(--sp-4)}
.m-x{position:absolute;top:var(--sp-2);right:var(--sp-2);display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;color:var(--gray-on-light);cursor:pointer;transition:color .2s}
.m-x:hover{color:var(--ink)}
.m-x svg{display:block;width:16px;height:16px}
.m-f{display:grid;gap:var(--sp-1)}
.m-f label,.m-f h3{font-size:var(--fs-base);line-height:24px;font-weight:500}
.m-f p{font-size:var(--fs-base);line-height:24px;color:var(--ink);text-wrap:balance}
.m-row{display:grid;grid-template-columns:minmax(0,1fr) 192px;gap:var(--sp-2)}
.m-f p + .m-row{margin-top:var(--sp-1)}
.m-row input{min-width:0;padding:9px var(--sp-2);border:var(--line-w) solid var(--line);border-radius:4px;background:#fff;color:var(--ink);font:inherit;font-size:var(--fs-base);line-height:24px;transition:border-color .2s}
.m-row input::placeholder{color:var(--gray-on-light)}
.m-row input:hover{border-color:var(--ink)}
.m-row input:focus{outline:0;border-color:var(--violet-on-light);box-shadow:inset 0 0 0 var(--line-w) var(--violet-on-light)}
.m-row .btn{border:0;cursor:pointer;text-align:center;font-family:inherit}
dialog.m .btn.ghost{color:var(--ink)}
dialog.m .btn.ghost:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--violet-on-light)}
@media (prefers-reduced-motion:no-preference){
  dialog.m[open]{animation:m-in .35s var(--ease)}
  dialog.m[open]::backdrop{animation:m-bd .35s var(--soft)}
  @keyframes m-in{from{opacity:0;transform:translateY(16px)}}
  @keyframes m-bd{from{opacity:0}}
  dialog.m.closing{animation:m-out .28s var(--soft) forwards}
  dialog.m.closing::backdrop{animation:m-bd-out .28s var(--soft) forwards}
  @keyframes m-out{to{opacity:0;transform:translateY(16px)}}
  @keyframes m-bd-out{to{opacity:0}}
}
@media (max-width:520px){
  .m-in{padding:var(--sp-3)}
  .m-row{grid-template-columns:1fr}
}
/* „Wróć do swojego wyniku” jako przycisk (otwiera okienko); na białej karcie szarość dla jasnego tła, jak każe system kolorów */
button.back{padding:0;border:0;background:none;font:inherit;cursor:pointer;font-size:var(--fs-xs);line-height:20px}
.st-card .back{color:var(--gray-on-light)}
.st-card .back:hover{color:var(--ink)}
/* lepsza kolejność w pytaniu kontrolnym: kroki z numerami */
.checks .better ol{margin-top:var(--sp-1);padding-left:1.25em;list-style:decimal}
.checks .better ol li + li{margin-top:var(--sp-1)}
.checks .better ol + .why{margin-top:var(--sp-1)}

/* ---------- TELEFON: zasady dla Rankingu i strony Firma ---------- */
/* Dopisane do systemu z landing.css i badges.css (jedna oś, skala pisma, karuzele, przyciski na całą szerokość).
   Każdy element na telefonie podlega jednej z tych zasad, na każdej stronie tak samo:
   1. Oś i szerokość: wszystko do lewej, także karta stanu; nic nie jest szersze niż ekran,
      w bok przewija się tylko karuzela.
   2. Pismo: h1 34, h2 26, kluczowe liczby 40 (--fs-figure), wynik testu 2 × liczba kluczowa, etykiety 11;
      tekst do czytania 16/26, tekst drugiego planu (opis pod tytułem, uzasadnienie) 15/24 i szary.
   3. Tekst nie jest ucinany ani chowany za „więcej”: teksty są krótkie, więc drugi plan dostaje cichszy styl.
      Zwijają się tylko listy szczegółów (pytania kontrolne), pod nagłówkiem mówiącym, co jest w środku.
   4. Siatki: kolumny z desktopu układają się jedna pod drugą. Wyjątki: krótkie liczby z podpisem stoją obok siebie
      (3 w rzędzie dla 3 pozycji, 2 dla 2 i 4), legendy (znak i nazwa) po dwie w rzędzie.
   5. Zestaw równorzędnych kart (3 i więcej, każda zrozumiała sama) to karuzela z kreskami, jak „Jak to działa”;
      otwiera się na karcie, która dotyczy użytkownika (aria-current), inaczej na pierwszej. Karta: numer lub znak
      i tytuł w jednym wierszu, opis pod nimi jako drugi plan.
   6. Tabele: bez przewijania w bok i bez ukrytych danych. W pierwszej linii wiersza pozycja, nazwa i główna wartość
      (po prawej, pod nagłówkiem tej kolumny), pod nią pozostałe kolumny jako drugi plan, każda w swojej linii
      (krótkie liczby razem w jednej); liczba, która nie stoi w kolumnie, ma przy sobie nazwę kolumny. Nagłówek zostaje tylko nad tym, co dalej jest kolumną.
   7. Wykres: podpisy, które nie mieszczą się pod słupkami, przechodzą do legendy pod wykresem (zasada 4);
      tabliczka nad słupkiem nie wychodzi poza ekran.
   8. Akcje: przycisk na całą szerokość (48 px), podkreślony link zostaje linkiem z polem dotyku 44 px.
      Pole i przycisk obok siebie (link dla zespołu, wyszukiwarka) stają jedno pod drugim, na całą szerokość.
   9. Skala z nazwami, które się nie mieszczą (dojrzałość firmy): nazwa tylko przy obecnym stopniu,
      pełna skala w aria-label. */
@media (max-width:640px){
  /* 2. pismo */
  :root{--fs-figure:40px}
  .copy{line-height:26px}
  .why,.card p,.offer p:not(.h3),.invite p:not(.h3),.t-act p.h3 + p{font-size:15px;line-height:24px}

  /* 1. stany: karta pod paskiem, do lewej; ścieżki dalej biegną od krawędzi do karty */
  .hero.state{min-height:min(720px,100svh);padding:calc(64px + var(--sp-3)) var(--gut) var(--sp-5);place-items:center stretch}
  .st-card{width:100%;padding:var(--sp-4) var(--sp-3);text-align:left}
  .st-card .eyebrow{font-size:var(--fs-eyebrow);line-height:16px;letter-spacing:.14em}
  .st-card h1{margin-top:var(--sp-2)}
  .st-card p:not(.eyebrow){margin-top:var(--sp-2);line-height:26px;text-wrap:pretty}
  .hero-badge{width:100%;margin:var(--sp-3) 0 0}
  .hero-copy > p:not(.eyebrow){margin-top:var(--sp-2)}

  /* 4. siatki jedna pod drugą */
  .sec-head,.t-head,.split,.offer,.invite{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .block{margin-top:var(--sp-4)}

  /* 4. liczby z podpisem: 3 pozycje w rzędzie, 4 po dwie; podpis jak tytuł liczby na stronie testu */
  .stats{gap:var(--sp-2);margin-top:var(--sp-4)}
  .stats span,.dims4 span{font-size:15px;line-height:22px}
  .dims4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-3)}
  /* 4. legenda: po dwie w rzędzie */
  .legend{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-1)}

  /* 5. karuzele: ścieżka odznak (otwiera się na następnej odznace) i następne kroki */
  .path,.cards{margin-top:var(--sp-4)}
  .step h3{margin-top:var(--sp-3)}
  .card{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--sp-2);align-items:center;align-content:start}
  .card .num{width:32px;height:32px;font-size:12px}
  .card h3{margin:0}
  .card p{grid-column:1 / -1;margin-top:var(--sp-2);color:var(--gray-on-light)}
  .dark .dots{color:var(--h-fg)}

  /* 8. akcje */
  .copyrow{flex-direction:column;gap:var(--sp-1)}
  .copyrow .btn,.t-act .btn,.cta .btn,.offer .btn{display:block;width:100%;padding:12px 24px;text-align:center}
  .btn.ghost:active{background-color:rgba(255,255,255,.08)}
  .light .btn.ghost:active{background-color:var(--tint)}
  .hero-copy .back,.st-card .back{display:inline-block;padding:12px 0}

  /* test firmy: wynik to 2 × liczba kluczowa; 9. skala z nazwą obecnego stopnia */
  .score b{font-size:calc(2 * var(--fs-figure));line-height:1}
  .score span{font-size:var(--fs-base)}
  .t-meta{padding:var(--sp-3);gap:var(--sp-3)}
  .scale{margin-top:var(--sp-3)}
  .scale li{color:transparent;white-space:nowrap;user-select:none}
  .scale li.on{color:var(--ink)}
  .scale li.on:nth-last-child(-n+2){direction:rtl}
  .areas li{column-gap:var(--sp-2)}
  .pips i{width:18px}

  /* 3. pytania kontrolne: lista szczegółów pod nagłówkami; stan pod pytaniem, strzałka po prawej */
  .checks{margin-top:var(--sp-4)}
  .checks summary,.checks .row{grid-template-columns:minmax(0,1fr) 20px;column-gap:var(--sp-2);row-gap:var(--sp-1);padding:var(--sp-2)}
  .checks .q{grid-column:1;grid-row:1}
  .checks .st{grid-column:1;grid-row:2}
  .checks .chev{grid-column:2;grid-row:1 / 3}
  .checks .row > span:last-child{display:none}
  .checks .better{padding:0 var(--sp-2) var(--sp-2)}
}