/* Strona główna testu (PL i EN): wygląd ze strona-testu.html. Działa też pod ekranami testu (test.css) i wynikiem
   (result.css): test-ai.js dokłada ich arkusz w showApp. */
/* 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%}
/* Strona testu kompetencji AI: tokeny, potem 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}
.about{background:#fff;border-top:0}

/* belki zastępujące treść */

/* ---------- 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-*): nazwa testu (h1) i pasek poziomów 48 pytanie 16 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}
/* Nagłówek to nazwa testu (użytkownicy czytali pytanie jako pierwsze i nie wiedzieli, że to test), pod nią pasek
   pięciu poziomów (kolory chipów) na całą szerokość napisu. Na komputerze pasek napełnia się poziom po poziomie
   przy wejściu, potem co kilka sekund przebiega po nim światło */
.hero-copy .title{display:inline-flex;flex-direction:column;align-items:stretch;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}
/* pytanie jako podtytuł: wyraźnie mniejsze od nazwy testu, większe od opisu */
.hero-copy .lead{margin-top:var(--sp-4);font-size:clamp(20px,2vw,26px);line-height:32px;font-weight:500;letter-spacing:-.02em}
.hero-copy .lead + p{margin-top:var(--sp-s)}
/* „AI” jako procesor, ten sam rysunek co chipy poziomów w hero (nóżki z czterech stron, połysk, rdzeń), z poświatą.
   Przy wejściu przechodzi przez kolory poziomów razem z napełnianiem paska i zostaje fioletowy (poziom 5).
   Wymiary liczone od korpusu: korpus to 88 z 160 jednostek rysunku, więc rysunek wystaje o 40,9% z każdej strony */
.eb-ai{--c0:#221a6e;--c1:#5b49c4;--c2:#b4a8ff;position:relative;display:inline-grid;place-items:center;width:1.15em;height:1.15em;margin:0 .3em 0 .35em;vertical-align:middle;isolation:isolate}
.eb-ai::before{content:"";position:absolute;inset:8%;z-index:-2;border-radius:30%;background:color-mix(in srgb,var(--c2) 45%,transparent);filter:blur(18px)}
.eb-ai svg{position:absolute;z-index:-1;inset:-40.9%;width:181.8%;height:181.8%;overflow:visible}
.eb-ai .pin{fill:color-mix(in srgb,var(--c1) 55%,#0e0e0e);stroke:#fff;stroke-opacity:.1;stroke-width:.8}
.eb-ai .body{fill:var(--c1);stroke:#fff;stroke-opacity:.14;stroke-width:.8}
.eb-ai .die{fill:none;stroke:#fff;stroke-opacity:.18;stroke-width:.8}
.eb-ai b{font-size:.5em;line-height:1;font-weight:500;letter-spacing:.02em;margin-right:-.02em}
.eb-bar{display:flex;gap:6px;margin-top:28px}
.eb-bar i{flex:1;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--c1),var(--c2));box-shadow:0 0 14px color-mix(in srgb,var(--c2) 45%,transparent);transform-origin:0 50%}
.eb-bar .l1{--c1:#2e3a96;--c2:#6f8cff}
.eb-bar .l2{--c1:#6f9a12;--c2:#a9cc22}
.eb-bar .l3{--c1:#e0661c;--c2:#f7a548}
.eb-bar .l4{--c1:#e5197b;--c2:#ff78bb}
.eb-bar .l5{--c1:#5b49c4;--c2:#b4a8ff}
@media (prefers-reduced-motion:no-preference){
  .eb-bar i{animation:eb-run 5s var(--soft) calc(2.6s + var(--i) * 110ms) infinite}
  @keyframes eb-run{0%,16%,100%{filter:none;box-shadow:0 0 14px color-mix(in srgb,var(--c2) 45%,transparent)}8%{filter:brightness(1.7);box-shadow:0 0 22px color-mix(in srgb,var(--c2) 85%,transparent)}}
}
.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)}
/* zaproszenie z linku zespołu (?company=): kto zaprasza, nad tytułem */
.hero-copy .invite-note{margin:0 auto var(--sp-m);font-size:var(--fs-xs);font-weight:500;line-height:20px;letter-spacing:.04em;color:var(--violet-on-dark)}
.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}}
.back{padding:0;border:0;background:none;font:inherit;cursor:pointer;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)}

/* ---------- O TEŚCIE ---------- */
/* Lewa kolumna: etykieta i tekst. Prawa: trzy kluczowe liczby. Pod spodem rząd miejsc na logotypy.
   Kolory: tylko czerń i szarość na jasnym tle. Odstępy wyłącznie z tokenów --sp-*. */
.about-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-5);align-items:stretch}
/* Obie kolumny mają dwie grupy: pierwsza przy górnej krawędzi, druga przy dolnej.
   Lewa: tytuł i treść. Prawa: dwie statystyki. Odstęp między grupami wynika z wysokości ramy. */
.about-text{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-3)}
.about h2,.levels h2{margin-top:0}
.about .copy,.levels .copy{max-width:40em;text-wrap:balance;font-size:var(--fs-base);line-height:24px;color:var(--ink)}
.about .copy + .copy{margin-top:var(--sp-2)}
/* ta sama szerokość co lewa kolumna w "O teście": 6/11 szerokości bez odstępu między kolumnami */
.levels .copy{margin-top:var(--sp-3);max-width:calc((100% - var(--sp-5)) * 6 / 11)}
.figures{display:flex;flex-direction:column;justify-content:space-between;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)}
.collab{margin-top:var(--sp-5)}
/* Długi, płaski znak (.wide, SOZ BPS) dostaje szerszą kolumnę na komputerze i cały wiersz na wąskim ekranie. */
.logo-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(0,1.6fr);gap:var(--sp-2);margin-top:var(--sp-2)}
.logo-slots li{display:grid;place-items:center;height:64px}
/* Logotypy w spoczynku w szarości strony (czerń przy 61% krycia daje #636363), po najechaniu wracają prawdziwe kolory.
   Pliki mają przezroczyste tła, więc nie potrzeba mieszania warstw (było kosztowne przy przewijaniu). */
/* Wysokości logotypów dobrane optycznie, nie metrycznie: cienkie, szerokie znaki dostają mniej, lekkie i szczegółowe więcej.
   --k skaluje całość na wąskim ekranie. --dy to pionowa korekta w % wysokości logo: środek ciężkości każdego znaku
   (zmierzony na pikselach) ląduje na środku komórki, bo np. podpis pod MediClinica ściągał całość w dół. */
.logo-slots{--k:1}
.lg-wsl{--lh:30px;--dy:3.6}
.lg-aresto{--lh:34px;--dy:-5.5}
.lg-ovh{--lh:20px;--dy:-5.8}
.lg-eleven{--lh:16px;--dy:-5.7}
.lg-vulcan{--lh:30px;--dy:-.6}
.lg-medi{--lh:26px;--dy:11.7}
.lg-bps{--lh:20px;--dy:0}
.logo-slots img{display:block;max-width:100%;width:auto;object-fit:contain;height:calc(var(--lh) * var(--k));transform:translateY(calc(var(--dy,0) * 1%));filter:grayscale(1);opacity:.61;transition:opacity .6s var(--soft),filter .75s var(--soft)}
/* "Zapalanie": najpierw rośnie jasność, a kolor dochodzi chwilę później i wolniej. Wejście szybsze, powrót do szarości łagodny. */
.logo-slots li:hover img{filter:none;opacity:1;transition:opacity .35s var(--soft),filter .55s var(--soft) .05s}
@media (prefers-reduced-motion:reduce){.logo-slots img{transition:none}}

/* ---------- JAK TO DZIAŁA ---------- */
.how{background:var(--ink);border-top:0}
.how .label{color:var(--gray-on-dark)}
.how h2{color:var(--h-fg)}
.how + .levels{border-top:0}
.levels{background:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
.card{background:#fff;padding:var(--sp-3);border-radius:var(--r)}
.badge{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;color:var(--ink)}
.card p{font-size:var(--fs-base);line-height:24px;color:var(--ink);text-wrap:balance}
/* przebieg testu jako schemat: zadania zbiegają się w wynik, wynik trafia do rankingu.
   Panele na czerni, cienkie linie i strzałki w odstępach między nimi. Kolory to kolory poziomów (te same co schodki,
   odznaki i chipy w hero): słupek wyniku ma kolor swojego poziomu, strzałki są neutralne. */
.flow{--gap:64px;--fv:208px;--hair:rgba(255,255,255,.22);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);margin-top:var(--sp-4);color:var(--h-fg)}
.fs{position:relative}
.flow .l1{--c0:#10175a;--c1:#2e3a96;--c2:#6f8cff}
.flow .l2{--c0:#2c6410;--c1:#6f9a12;--c2:#a9cc22}
.flow .l3{--c0:#b5320e;--c1:#e0661c;--c2:#f7a548}
.flow .l4{--c0:#a10d58;--c1:#e5197b;--c2:#ff78bb}
.flow .l5{--c0:#221a6e;--c1:#5b49c4;--c2:#b4a8ff}
.fv{position:relative;display:flex;align-items:center;height:var(--fv);padding:var(--sp-3);border-radius:var(--r);background:#1a1a1a}
.fa{position:absolute;top:calc(var(--fv) / 2 - 6px);left:100%;width:var(--gap);height:12px;overflow:visible;fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fs h3{display:flex;gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-base);line-height:24px;font-weight:500}
.fn{font-variant-numeric:tabular-nums;color:var(--violet-on-dark)}
.fs p{font-size:var(--fs-base);line-height:24px;color:var(--gray-on-dark);text-wrap:balance}
/* 1: cztery rodzaje zadań i linie zbiegające się w strzałkę */
.tasks{display:grid;gap:8px;flex:0 0 62%}
.tasks li{display:flex;align-items:center;gap:10px;height:32px;padding:0 12px;border:1px solid var(--hair);border-radius:6px;font-size:14px;line-height:20px;white-space:nowrap}
.tasks svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--c2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fan{flex:1;align-self:center;height:152px;margin-right:calc(-1 * var(--sp-3));overflow:visible;fill:none;stroke-width:1.5}
.fan path{stroke:var(--c2);stroke-opacity:.8;vector-effect:non-scaling-stroke}
/* węzeł, w którym linie zadań się spotykają i skąd wychodzi strzałka */
.f1::after{content:"";position:absolute;top:50%;right:-4px;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff}
/* 2: indeks na pierścieniu i dziesięć obszarów */
.f2{gap:var(--sp-3)}
.ring{position:relative;flex:none;display:grid;place-content:center;justify-items:center;width:136px;height:136px}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none;stroke:var(--hair);stroke-width:6}
.ring .v{stroke:url(#ring-g);stroke-linecap:round;stroke-dasharray:72 100}
.ring b{font-size:40px;line-height:44px;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.f2 small,.ax{font-size:12px;line-height:16px;color:var(--gray-on-dark)}
.areas{flex:1;display:grid;gap:var(--sp-1)}
.bars{display:flex;align-items:flex-end;gap:5px;height:96px;border-bottom:1px solid var(--hair)}
/* słupki w kolorze poziomu, z tym samym przejściem co schodki */
.bars i,.dist i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:linear-gradient(to top,var(--c0),var(--c1) 55%,var(--c2))}
/* 3: rozkład wyników jak na wykresie rankingu, twój słupek wyróżniony */
.f3{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:var(--sp-1)}
.dist{display:flex;align-items:flex-end;gap:3px;height:120px;border-bottom:1px solid var(--hair)}
/* rozkład przygaszony, twój słupek w pełnym kolorze */
.dist i{position:relative;opacity:.5}
.dist .me{opacity:1}
.dist .me b{position:absolute;font-style:normal;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:2px 8px;border-radius:4px;background:var(--c2);color:var(--ink);font-size:12px;line-height:16px;font-weight:500}
.ax{display:flex;justify-content:space-between}
/* węższy ekran z trzema kolumnami: mniejszy pierścień, żeby słupki obszarów miały miejsce */
@media (min-width:901px) and (max-width:1180px){
  .flow{--gap:48px}
  .f2{gap:var(--sp-2)}
  .ring{width:104px;height:104px}
  .ring b{font-size:32px;line-height:36px}
  .bars{gap:3px;height:80px}
  .f2 small{white-space:nowrap}
}

/* ---------- POZIOMY ---------- */
.stairs{display:flex;align-items:flex-end;margin-top:var(--sp-4);list-style:none;padding:0}
.stair{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-2)}
.stair b{display:block;font-size:var(--fs-base);line-height:24px;font-weight:500;text-align:center}
.stair .st{display:block;position:relative;border-radius:var(--r) var(--r) 0 0}
/* schodki w kolorach poziomów, tych samych co odznaki i chipy w hero */
.stair.l1{--c0:#10175a;--c1:#2e3a96;--c2:#6f8cff}
.stair.l2{--c0:#2c6410;--c1:#6f9a12;--c2:#a9cc22}
.stair.l3{--c0:#b5320e;--c1:#e0661c;--c2:#f7a548}
.stair.l4{--c0:#a10d58;--c1:#e5197b;--c2:#ff78bb}
.stair.l5{--c0:#221a6e;--c1:#5b49c4;--c2:#b4a8ff}
.stair .st{background:radial-gradient(90% 70% at 14% 0%,var(--c2) 0,transparent 70%),linear-gradient(160deg,var(--c1),var(--c0))}
/* znak w jednej linii z nazwą: mały kafelek w kolorze poziomu, jak chip z odznaki */
.stair b{display:flex;align-items:center;justify-content:center;gap:var(--sp-1)}
.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}
/* ciemne detale znaków (podstawa żarówki, tęczówka, igła, środek fal): głębszy odcień, bo na kolorze poziomu się zlewały */
:is(.si,.hc) [fill="var(--c0)"]{fill:color-mix(in srgb,var(--c0) 50%,#000);fill-opacity:1}
/* żarówka w małych rozmiarach: cała biała, bo gwint ma tu 2–3 px i żaden kolor go nie uratuje */
:is(.hc.l3,.stair.l3 .si) [fill="var(--c0)"]{fill:#fff}
.rng{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.s1{height:96px}
.s2{height:136px}
.s3{height:176px}
.s4{height:216px}
.s5{height:256px}
/* oś pod schodkami: osobna linia, progi zaznaczone kropkami, liczby pod nimi */
.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}

/* ---------- OKIENKO: wróć do wyniku ---------- */
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}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 var(--line-w) var(--ink)}
.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}}
  /* zamknięcie: lustrzane odbicie wejścia, odrobinę krótsze */
  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}}
}

/* ---------- 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,.back,.logo,.m-x,.foot a,.nav ul > li > a,.nav .lang a){transition:transform .45s var(--ease),color .2s,border-color .2s,background-color .2s}
:is(.btn,.back,.logo,.m-x,.foot a,.nav ul > li > a,.nav .lang a):active{transform:scale(.985);transition-duration:.12s}
@media (prefers-reduced-motion:reduce){:is(.btn,.back,.logo,.m-x,.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);transition-delay:calc(var(--i,0) * 80ms)}
  .js .rv.in{opacity:1;transform:none}
  /* wyjątek: schodki rosną od linii w górę, nazwy dochodzą po nich, oś wchodzi pierwsza */
  .js .chart .axis{opacity:0;transition:opacity .7s var(--ease)}
  .js .chart.in .axis{opacity:1}
  .js .stair .st{clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--ease);transition-delay:calc(var(--i,0) * 80ms + 160ms)}
  .js .stair b{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 80ms + 480ms)}
  .js .chart.in .stair .st{clip-path:inset(0)}
  .js .chart.in .stair b{opacity:1;transform:none}
  @media (max-width:768px){.js .stair .st{clip-path:inset(0 100% 0 0)}}
  /* schemat: linie zadań i strzałki dorysowują się po kolei, pierścień dochodzi do wyniku */
  .js .flow :is(.fan,.fa){clip-path:inset(0 100% 0 0);transition:clip-path .8s var(--ease)}
  .js .flow .fs:nth-child(1) .fan{transition-delay:.3s}
  .js .flow .fs:nth-child(1) .fa{transition-delay:.9s}
  .js .flow .fs:nth-child(2) .fa{transition-delay:1.5s}
  .js .flow .ring .v{stroke-dashoffset:72;transition:stroke-dashoffset 1.2s var(--ease) 1s}
  .js .flow.in :is(.fan,.fa){clip-path:inset(0)}
  .js .flow.in .ring .v{stroke-dashoffset:0}
}

@media (max-width:900px){
  .nav ul{gap:20px}
  .logo svg{height:26px}
  .about-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .levels .copy{max-width:none}
  .logo-slots{grid-template-columns:repeat(3,minmax(0,1fr));--k:.7}
  .logo-slots .wide{grid-column:1/-1}
  .lg-bps{--lh:28px}
  .cards{grid-template-columns:1fr}
  /* schemat w pionie: strzałka w dół pod tekstem kroku, na osi numerów */
  .flow{--gap:56px;grid-template-columns:minmax(0,1fr);max-width:560px}
  .fs:not(:last-child){padding-bottom:var(--gap)}
  .fa{top:auto;bottom:42px;left:12px;width:40px;transform-origin:0 50%;transform:rotate(90deg)}
  .stairs{flex-direction:column;align-items:stretch;gap:var(--sp-3)}
  .stair{display:grid;grid-template-columns:1fr auto;row-gap:var(--sp-1)}
  .stair b{text-align:left}
  .rng{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:var(--fs-xs);line-height:20px;color:var(--gray-on-light);align-self:center}
  .stair .st{grid-column:1/-1;height:48px!important;border-radius:var(--r)}
  .stair b{justify-content:flex-start}
  .s1{width:20%}.s2{width:40%}.s3{width:60%}.s4{width:80%}.s5{width:100%}
  .axis{display:none}
  .foot .wrap{grid-template-columns:1fr}
  .foot .wrap > div:nth-child(2):last-child{grid-column:auto}
  .sec{padding:var(--sp-5) 0}
}
@media (max-width:520px){
  .m-in{padding:var(--sp-3)}
  .m-row{grid-template-columns:1fr}
  .nav ul{gap:14px;align-items:center}
  .nav .lang{padding:7px 11px}
  .figures li{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-1)}
}
/* tło hero: pięć chipów poziomów; zapalają się po kolei, a z każdego biegnie ścieżka do przycisku */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-copy{position:relative;z-index:1}
.hb-chips{position:absolute;inset:0}
.hc-traces{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hc-traces path{fill:none;stroke:var(--c2);stroke-opacity:.45;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ścieżki poboczne: ta sama grubość, słabsze; uciekają za krawędź ekranu */
.hc-traces path.s{stroke-opacity:.2}
/* impulsy jak w stanach strony Firma: krótki jaśniejszy odcinek biegnie po ścieżce */
.hc-traces path.pulse{stroke-opacity:.95;stroke-width:2}
/* przycisk „podłącza się”, gdy dochodzą ścieżki: bez ostrego obrysu, cicha poświata narasta powoli */
.hero .btn{transition:transform .45s var(--ease),color .2s,background-color .2s,box-shadow 2.4s cubic-bezier(.25,.1,.25,1)}
.hero.wired .btn{box-shadow:0 0 28px rgba(255,255,255,.12)}
/* wejście tekstu na desktopie (klasa seq z test-ai): nadtytuł, nagłówek wysuwa się spod maski, opis, przycisk, link;
   chipy zapalają się dopiero po tekście. Na telefonie i przy „ogranicz ruch” zostaje zwykłe .rv */
@media (min-width:641px) and (prefers-reduced-motion:no-preference){
  .hero.seq .hero-copy :is(.eb-t,p,.btn,.back){opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease),box-shadow 2.4s cubic-bezier(.25,.1,.25,1)}
  .hero.seq.go .hero-copy :is(.eb-t,p,.btn,.back){opacity:1;transform:none}
  .hero.seq.go .hero-copy .lead{transition-delay:.3s}
  .hero.seq.go .hero-copy .lead + p{transition-delay:.42s}
  /* pasek napełnia się od lewej: każdy poziom dopiero, gdy poprzedni jest pełny */
  .hero.seq .eb-bar i{transform:scaleX(0);transition:transform .32s cubic-bezier(.45,0,.55,1)}
  .hero.seq.go .eb-bar i{transform:none;transition-delay:calc(.9s + var(--i) * 320ms)}
  .hero.seq.go .eb-ai{animation:eb-ai 1.6s linear .9s backwards}
  @keyframes eb-ai{
    0%,19.9%{--c0:#10175a;--c1:#2e3a96;--c2:#6f8cff}
    20%,39.9%{--c0:#2c6410;--c1:#6f9a12;--c2:#a9cc22}
    40%,59.9%{--c0:#b5320e;--c1:#e0661c;--c2:#f7a548}
    60%,79.9%{--c0:#a10d58;--c1:#e5197b;--c2:#ff78bb}
    80%,100%{--c0:#221a6e;--c1:#5b49c4;--c2:#b4a8ff}
  }
  .hero.seq.go .hero-copy .btn{transition-delay:.56s,.56s,0s}
  .hero.seq.go .hero-copy .back{transition-delay:.68s}
}
.hc{position:absolute;width:84px;height:84px;margin:-42px 0 0 -42px;isolation:isolate}
/* poświata: rozmyty kształt chipu w jego kolorze; rozmycie jest stałe, animuje się tylko przezroczystość, więc nie ma skoku */
.hc::before{content:"";position:absolute;inset:6px;z-index:-1;border-radius:14px;background:color-mix(in srgb,var(--c2) 42%,transparent);filter:blur(18px);opacity:0;transition:opacity 1.8s cubic-bezier(.25,.1,.25,1);
  /* własna warstwa: Safari inaczej przycina rozmycie, gdy obok biegną impulsy */
  transform:translateZ(0);will-change:opacity}
.hc.on::before{opacity:1}
.hc svg{display:block;width:100%;height:100%;overflow:visible}
.hc .pin{fill:#1b1b1b;stroke:#fff;stroke-opacity:.1;stroke-width:.8;transition:fill 1s cubic-bezier(.4,0,.2,1)}
.hc .body{fill:#161616;stroke:#fff;stroke-opacity:.14;stroke-width:.8;transition:fill 1s cubic-bezier(.4,0,.2,1)}
.hc .die{fill:none;stroke:#fff;stroke-opacity:.1;stroke-width:.8}
.hc .sheen,.hc .gl{transition:opacity 1s cubic-bezier(.4,0,.2,1)}
.hc .sheen{opacity:0}
.hc .gl{opacity:.2}
.hc.on .body{fill:var(--c1)}
.hc.on .pin{fill:color-mix(in srgb,var(--c1) 55%,#0e0e0e)}
.hc.on .sheen,.hc.on .gl{opacity:1}
.hc.l1{--c0:#10175a;--c1:#2e3a96;--c2:#6f8cff}
.hc.l2{--c0:#2c6410;--c1:#6f9a12;--c2:#a9cc22}
.hc.l3{--c0:#b5320e;--c1:#e0661c;--c2:#f7a548}
.hc.l4{--c0:#a10d58;--c1:#e5197b;--c2:#ff78bb}
.hc.l5{--c0:#221a6e;--c1:#5b49c4;--c2:#b4a8ff}
@media (max-width:1023px){.hb-chips{display:none}}

/* ---------- 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{line-height:16px;letter-spacing:.14em}
  .copy,.hero-copy p,.closing{line-height:26px}
  .sec{padding:var(--sp-5) 0}
  .sec h2{margin-top:var(--sp-1)}
  :is(.about,.how,.levels) h2{margin-top:0}
  .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{margin-inline:0;text-wrap:pretty}
  .eb-bar{gap:4px;margin-top:20px}
  .eb-bar i{height:4px}
  .hero-copy .lead{margin-top:40px;font-size:20px;line-height:28px}
  .hero-copy .lead + p{margin-top:var(--sp-1)}
  .hero-actions{align-items:stretch;margin-top:var(--sp-4);gap:var(--sp-1)}
  .hero-actions .btn,.cta .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 */
  /* chipy poziomów w hero: rząd pod przyciskiem, hero na cały pierwszy ekran, żeby ścieżki miały miejsce
     (pozycje i ścieżki liczy skrypt hero w index.html); między 641 a 1023 px chipów nie ma, jak dotąd */
  .hb-chips{display:block}
  .hc{width:48px;height:48px;margin:-24px 0 0 -24px}
  .hc::before{inset:4px;border-radius:8px;filter:blur(10px)}
  .hero{min-height:100svh;padding:calc(64px + var(--sp-4)) var(--gut) calc(var(--sp-5) + 136px)}

  /* O teście: nagłówek, akapit prowadzący, drugi akapit ciszej; liczby jako dwie krótkie kolumny
     (wartość i tytuł), pod nimi opis jako drugi plan (zasada 3 w ranking.css: tekst nie jest chowany) */
  .about-grid{gap:var(--sp-4)}
  .about-text{gap:var(--sp-2)}
  .about .copy{margin-top:0}
  .about .copy + .copy{margin-top:var(--sp-2);color:var(--gray-on-light)}
  .figures{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
  .figures .rule{display:none}
  .figures li{display:block}
  .figures .fig{display:block;font-size:40px;line-height:40px}
  .figures b{margin-top:var(--sp-1);font-size:15px;line-height:22px;text-wrap:balance}
  .figures p{font-size:15px;line-height:24px;color:var(--gray-on-light);text-wrap:pretty}
  .collab{margin-top:var(--sp-4)}
  .logo-slots{margin-top:var(--sp-1);gap:0;--k:.6}
  .logo-slots li{height:56px;padding:0}

  /* Jak to działa: karuzela; w karcie numer i tytuł w jednym wierszu, opis pod nimi */
  .how .dots{color:var(--h-fg)}
  .cards{margin-top:var(--sp-4)}
  .card{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--sp-2);align-items:center;align-content:start;padding:var(--sp-3)}
  .card .badge{width:32px;height:32px;font-size:12px}
  .card h3{margin:0;font-size:17px;line-height:24px}
  .card p{grid-column:1 / -1;margin-top:var(--sp-2);font-size:15px;line-height:24px;color:var(--gray-on-light)}

  /* poziomy: nazwa i przedział w wierszu, cienki pasek pod nimi; bez animacji wzrostu */
  .chart{margin-top:var(--sp-4)}
  .stairs{margin-top:0;gap:var(--sp-3)}
  .stair{row-gap:var(--sp-1)}
  .stair b{font-size:15px;line-height:24px}
  .rng{font-variant-numeric:tabular-nums}
  .stair .st{height:6px!important;border-radius:3px}
  .js .stair .st{clip-path:none;transition:none}
  .js .stair b,.js .chart .axis{opacity:1;transform:none;transition:none}
  .foot .wrap{gap:32px}
}