/* Cosmos – strona produktowa (cosmosai.live/)
   Kierunek „Jeden wątek”: jasno i spokojnie jak w dobrym edytorze, a przez
   całą stronę biegnie nić, która zmienia kolor razem z silnikiem.
   Bez frameworków i bez budowania – tak jak cała reszta Cosmosa. */

/* Czcionki (Onest, Martian Mono) przychodzą z /fonts/fonts.css – tego samego pliku
   używa aplikacja, więc przeglądarka pobiera je raz. */

/* --- tokeny ------------------------------------------------------------- */
:root {
  color-scheme: light;
  --tlo: #F6F5F1;
  --tlo-2: #EFEDE7;
  --powierzchnia: #FFFFFF;
  --tekst: #16171B;
  --przygaszony: #5E616B;
  --blady: #686B75;          /* 4,9:1 na tle – AA dla drobnego tekstu */
  --linia: #E3E1DA;
  --linia-2: #D5D2C9;
  --k-nvidia: #5E9E3A;
  --k-local: #2F6FEB;
  --k-claude: #C8643B;
  --k-openai: #16171B;
  --k-zloto: #E8A33D;
  /* Kolor silnika jako TEKST: kreski i kropki zostają w kolorach wyżej,
     ale drobny napis w zieleni czy pomarańczu na jasnym tle nie trzyma AA. */
  --k-nvidia-tekst: #3F7B22;
  --k-local-tekst: #2A62D4;
  --k-claude-tekst: #A94F2A;
  --zloto-tekst: #95590F;
  --cien-1: 0 1px 0 rgba(22, 23, 27, .04), 0 1px 2px rgba(22, 23, 27, .05);
  --cien-2: 0 1px 0 rgba(22, 23, 27, .03), 0 12px 32px -12px rgba(22, 23, 27, .14), 0 2px 6px -2px rgba(22, 23, 27, .06);
  --cien-3: 0 1px 0 rgba(22, 23, 27, .03), 0 40px 90px -36px rgba(22, 23, 27, .32), 0 12px 28px -14px rgba(22, 23, 27, .12);
  --szklo: rgba(246, 245, 241, .72);
  --sans: "Onest", "Onest zapas", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --szer: 1200px;
  --margines: 16px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --wolno: cubic-bezier(.2, .7, .1, 1);
  --sprezyna: cubic-bezier(.34, 1.4, .64, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tlo: #111214;
    --tlo-2: #16171A;
    --powierzchnia: #1A1B1F;
    --tekst: #ECEBE6;
    --przygaszony: #A3A5AD;
    --blady: #8A8D96;
    --linia: #2A2B30;
    --linia-2: #34363C;
    --k-nvidia: #76B84F;
    --k-local: #5B8FF5;
    --k-claude: #DE7A51;
    --k-openai: #ECEBE6;
    --k-nvidia-tekst: #76B84F; --k-local-tekst: #5B8DEF; --k-claude-tekst: #DE7A51; --zloto-tekst: #E8A33D;
    --cien-1: 0 1px 0 rgba(0, 0, 0, .3);
    --cien-2: 0 12px 32px -12px rgba(0, 0, 0, .6);
    --cien-3: 0 40px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03);
    --szklo: rgba(17, 18, 20, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --tlo: #111214; --tlo-2: #16171A; --powierzchnia: #1A1B1F; --tekst: #ECEBE6;
  --przygaszony: #A3A5AD; --blady: #8A8D96; --linia: #2A2B30; --linia-2: #34363C;
  --k-nvidia: #76B84F; --k-local: #5B8FF5; --k-claude: #DE7A51; --k-openai: #ECEBE6;
  --k-nvidia-tekst: #76B84F; --k-local-tekst: #5B8DEF; --k-claude-tekst: #DE7A51; --zloto-tekst: #E8A33D;
  --cien-1: 0 1px 0 rgba(0, 0, 0, .3); --cien-2: 0 12px 32px -12px rgba(0, 0, 0, .6);
  --cien-3: 0 40px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03);
  --szklo: rgba(17, 18, 20, .7);
}
@media (min-width: 720px) { :root { --margines: 32px; } }

/* --- podstawa ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--tlo); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--tlo); color: var(--tekst);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; overflow-x: clip; text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
/* ziarno – bez niego jasne tło wygląda jak pusty dokument */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.czeka-na-jezyk body { visibility: hidden; animation: odslon 0s 1.5s forwards; }
@keyframes odslon { to { visibility: visible; } }

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
code { font: 500 .88em var(--mono); background: var(--tlo-2); border: 1px solid var(--linia); padding: .08em .4em; border-radius: 6px; }
.mono { font-family: var(--mono); font-stretch: 87.5%; }
/* Kolory mieszane z var() stoją w @supports, a przed nimi zwykły zapas.
   Sam zapas „najpierw stara wartość, potem nowa” nie działa, gdy nowa ma var():
   stara przeglądarka nie odrzuca jej przy czytaniu, tylko przy liczeniu, i wtedy
   bierze wartość początkową (tło przezroczyste, tekst z gradientem znika).
   Pilnuje tego strona-produktowa, punkt 20. */
::selection { background: rgba(47, 111, 235, .22); }
@supports (color: color-mix(in srgb, red, blue)) { ::selection { background: color-mix(in srgb, var(--k-local) 22%, transparent); } }
:focus-visible { outline: 2px solid var(--k-local); outline-offset: 3px; border-radius: 8px; }

/* Tekst tylko dla czytników ekranu. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.pomin { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--tekst); color: var(--tlo); padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.pomin:focus { top: 12px; }

.kol { width: 100%; max-width: calc(var(--szer) + 2 * var(--margines)); margin-inline: auto; padding-inline: var(--margines); position: relative; }

/* --- znak --------------------------------------------------------------- */
.znak { width: 28px; height: 28px; overflow: visible; }
/* Planeta siedzi w <symbol> wstawianym przez <use>: selektor z przodkiem
   (.znak .planeta) do niej nie sięga i była zawsze czarna. Zmienne CSS
   przechodzą do środka <use>, więc kolor idzie przez nie. */
#znak .planeta, .cta-znak .planeta { fill: var(--planeta, var(--tekst)); stroke: var(--planeta-obrys, var(--tlo)); stroke-width: 2.4; }
/* Znaki przez <use> (nawigacja, ruter, stopka) stoją: animacja treści <symbol>
   unieważniała w każdej klatce wszystkie jego kopie – ~15% głównego wątku
   telefonu w bezruchu. Pierścień obraca się tylko w znaku CTA, wpisanym
   w index.html wprost, i tylko gdy CTA jest na ekranie (.stoi z strona.js). */
.luk { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 21 79; }
.cta-znak .luk { animation: obrot-luku 14s linear infinite; }
.cta-znak.stoi .luk { animation-play-state: paused; }
.l1 { stroke: var(--k-nvidia); stroke-dashoffset: 0; }
.l2 { stroke: var(--k-local); stroke-dashoffset: -25; }
.l3 { stroke: var(--k-claude); stroke-dashoffset: -50; }
.l4 { stroke: var(--k-openai); stroke-dashoffset: -75; }
.l1 { --s: 0; } .l2 { --s: -25; } .l3 { --s: -50; } .l4 { --s: -75; }
@keyframes obrot-luku { from { stroke-dashoffset: var(--s); } to { stroke-dashoffset: calc(var(--s) - 100); } }

/* --- przyciski ---------------------------------------------------------- */
.btn {
  --tlo-btn: var(--tekst); --kolor-btn: var(--tlo);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  background: var(--tlo-btn); color: var(--kolor-btn);
  transition: transform .5s var(--sprezyna), box-shadow .3s, background .3s, border-color .3s;
  position: relative; isolation: isolate; overflow: hidden;
}
.btn-maly { padding: 9px 16px 9px 18px; font-size: 14.5px; }
.btn-duzy { padding: 16px 26px; font-size: 16.5px; }
.btn-ciemny { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 24px -10px rgba(22, 23, 27, .45); }
@supports (color: color-mix(in srgb, red, blue)) { .btn-ciemny { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 24px -10px color-mix(in srgb, var(--tekst) 60%, transparent); } }
.btn-ciemny::before {
  /* połysk przesuwający się po najechaniu */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .16) 45%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--wolno);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .btn-ciemny::before { background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--tlo) 22%, transparent) 45%, transparent 70%); }
}
.btn-ciemny:hover::before { transform: translateX(120%); }
.btn-jasny { --tlo-btn: var(--powierzchnia); --kolor-btn: var(--tekst); border-color: var(--linia); box-shadow: var(--cien-1); }
.btn-jasny:hover { border-color: var(--linia-2); }
.btn .strzalka { transition: transform .4s var(--sprezyna); display: inline-block; width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Napis przycisku wejścia rezerwuje szerokość dłuższego z dwóch („Zaloguj się”
   / „Otwórz Cosmos”) – podmiana po /api/auth nie przesuwa nawigacji. */
.js-wejscie-tekst { display: inline-grid; justify-items: center; }
.js-wejscie-tekst::after { content: attr(data-alt); height: 0; overflow: hidden; visibility: hidden; }
.btn:hover .strzalka { transform: translateX(4px); }
.btn .gh { width: 18px; height: 18px; fill: currentColor; }

/* --- nawigacja ---------------------------------------------------------- */
.postep-strony {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--k-nvidia), var(--k-local), var(--k-claude), var(--k-openai));
  transform-origin: 0 50%; transform: scaleX(0);
}
.nav {
  position: sticky; top: 0; z-index: 50;
  transition: background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.przewiniety {
  background: var(--szklo);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border-bottom-color: var(--linia);
}
@supports (color: color-mix(in srgb, red, blue)) { .nav.przewiniety { border-bottom-color: color-mix(in srgb, var(--linia) 70%, transparent); } }
.nav-w {
  max-width: calc(var(--szer) + 2 * var(--margines)); margin-inline: auto; padding: 14px var(--margines);
  display: flex; align-items: center; gap: 24px;
}
.marka { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 15px/1 var(--sans); letter-spacing: .2em; }
.nav-linki { display: none; gap: 4px; margin-inline: auto; }
.nav-linki a {
  text-decoration: none; font-size: 14.5px; color: var(--przygaszony); padding: 7px 12px; border-radius: 999px;
  transition: color .2s, background .2s;
}
.nav-linki a:hover { color: var(--tekst); background: rgba(128, 128, 128, .1); }
@supports (color: color-mix(in srgb, red, blue)) { .nav-linki a:hover { background: color-mix(in srgb, var(--tekst) 5%, transparent); } }
.nav-linki a.aktywny { color: var(--tekst); }
.nav-prawa { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 1040px) { .nav-linki { display: flex; } .nav-prawa { margin-left: 0; } }

.jezyk {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px;
  border: 1px solid var(--linia); border-radius: 999px; background: var(--powierzchnia);
}
@supports (color: color-mix(in srgb, red, blue)) { .jezyk { background: color-mix(in srgb, var(--powierzchnia) 70%, transparent); } }
.jezyk button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  font: 500 12px/1 var(--mono); letter-spacing: .06em; padding: 7px 10px; border-radius: 999px; color: var(--przygaszony);
  transition: color .3s;
}
.jezyk button[aria-pressed="true"] { color: var(--tlo); }
.jezyk-tlo {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: var(--tekst); transition: transform .45s var(--sprezyna);
}
html[lang="en"] .jezyk-tlo { transform: translateX(100%); }

/* --- nić przez całą stronę ---------------------------------------------- */
main { position: relative; }
main:focus { outline: none; }
/* .watek bez własnego z-index (nie jest kontekstem stosu): linia i podstawa
   leżą POD pasem znaczników (z-index 1 < 2), a głowica NAD nim (3) – przejeżdża
   po pasie jak znacznik po osi, zamiast tonąć w nim w pół koła. */
.watek { position: absolute; top: 0; bottom: 0; left: max(12px, calc((100% - var(--szer)) / 2 - 36px)); width: 2px; pointer-events: none; z-index: auto; display: none; }
@media (min-width: 1320px) { .watek { display: block; } }
/* Linia przycinana w pikselach (--pp-px), tak jak jedzie głowica. Procent
   wysokości rozjeżdżał się z głowicą o setki pikseli, gdy sekcje
   z content-visibility zmieniały wysokość po skoku przewinięcia. */
.watek-linia {
  position: absolute; inset: 0; border-radius: 2px; z-index: 1;
  background: linear-gradient(to bottom, transparent 0, var(--k-nvidia) 6%, var(--k-local) 30%, var(--k-claude) 52%, var(--k-local) 66%, var(--k-openai) 80%, var(--k-nvidia) 96%, transparent);
  clip-path: inset(0 0 calc(100% - var(--pp-px, 0px)) 0);
}
.watek::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--linia); opacity: .8; border-radius: 2px; }
.watek-glowa {
  position: absolute; left: 50%; top: 0; z-index: 3; width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%) translateY(var(--pp-px, 0px)); background: var(--tlo); border: 2px solid var(--k-local);
  box-shadow: 0 0 0 6px rgba(47, 111, 235, .16);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .watek-glowa { box-shadow: 0 0 0 6px color-mix(in srgb, var(--k-local) 16%, transparent); }
}

/* --- etykiety i nagłówki sekcji ---------------------------------------- */
.etykieta {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--przygaszony);
}
.kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--k, var(--k-nvidia)); }
@supports (color: color-mix(in srgb, red, blue)) { .kropka { box-shadow: 0 0 0 4px color-mix(in srgb, var(--k, var(--k-nvidia)) 18%, transparent); } }
.sekcja { padding-block: clamp(88px, 12vw, 168px); position: relative; }
/* Sekcje poza ekranem nie liczą się przy starcie: pierwszy układ strony
   obejmował wszystkie ~940 obiektów naraz i na telefonie był najdłuższym
   zadaniem (~270 ms przy CPU ×4). `auto` w rozmiarze zapamiętuje prawdziwą
   wysokość po pierwszym narysowaniu, więc powrót w górę nie skacze.
   Bez plenera i przekroju: ich animacje liczą się z geometrii toru przy
   każdej klatce przewijania i potrzebują prawdziwych wymiarów od razu. */
.sekcja:not(.plener):not(.pod-maska) { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
/* Skok do kotwicy (link w menu, adres z #sekcją) liczy pozycję celu z wysokości
   sekcji nad nim – szacowane trafiały o setki pikseli obok. Gdy jest cel,
   liczymy wszystko naprawdę: człowiek i tak właśnie przewija przez całą stronę. */
html:has(:target) .sekcja:not(.plener):not(.pod-maska) { content-visibility: visible; }
.sekcja-glowa { display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sekcja-glowa h2 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -.035em; }
.h-duzy { font-size: clamp(46px, 6.4vw, 92px) !important; letter-spacing: -.05em !important; line-height: .95 !important; }
.lead { font-size: clamp(17px, 1.6vw, 19.5px); color: var(--przygaszony); line-height: 1.6; max-width: 62ch; }
.przypis { font-size: 14.5px; color: var(--blady); max-width: 60ch; border-left: 2px solid var(--linia); padding-left: 14px; }

.lista-cech { list-style: none; display: grid; gap: 12px; margin-top: 6px; }
.lista-cech li { position: relative; padding-left: 30px; color: var(--tekst); font-size: 16px; }
.lista-cech li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 18px; height: 18px; border-radius: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E9E3A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 13px no-repeat;
  background-color: rgba(94, 158, 58, .14);
}
@supports (color: color-mix(in srgb, red, blue)) { .lista-cech li::before { background-color: color-mix(in srgb, var(--k-nvidia) 14%, transparent); } }

/* --- pojawianie się przy przewijaniu ------------------------------------ */
/* Bez rozmycia: filtr na całej karcie to raster co klatkę. Strona bez JS
   odsłania bloki przez <noscript> w index.html. */
[data-pokaz] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--wolno), transform 1s var(--wolno); transition-delay: calc(var(--d, 0) * 80ms); }
[data-pokaz].widoczne { opacity: 1; transform: none; }

/* wejście hero przy załadowaniu */
/* .01 zamiast 0: Chrome nie liczy do LCP elementów malowanych przezroczyście,
   więc LCP łapał plakietkę dema po 1,5 s zamiast nagłówka po 0,6 s. */
.wejscie { opacity: .01; transform: translateY(14px); filter: blur(6px); animation: wejdz .8s var(--wolno) forwards; animation-delay: calc(60ms + var(--d, 0) * 60ms); }
.hero-cta.wejscie, .hero-scena.wejscie { filter: none; }
@keyframes wejdz { to { opacity: 1; transform: none; filter: none; } }
.slowo { display: inline-block; opacity: .01; transform: translateY(.35em); filter: blur(6px); animation: wejdz .8s var(--wolno) forwards; animation-delay: calc(100ms + var(--i) * 60ms); }

/* ================================================================ HERO */
.hero { position: relative; padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 80px); overflow: clip; }
.zorza {
  /* Góra w pikselach, nie w procentach: przy „inset: -20%” zależała od wysokości
     hero i cała zorza (prawie ekran) liczyła się jako przesunięcie układu.
     Koła są już rozmyte gradientem – filter: blur(80px) na kontenerze
     i mix-blend-mode kosztowały ~25 klatek na sekundę. */
  position: absolute; left: -10%; right: -10%; top: -180px; height: calc(100% + 180px);
  pointer-events: none; z-index: 0; opacity: .55;
}
.zorza i { position: absolute; border-radius: 50%; animation: dryf 26s ease-in-out infinite alternate; background: radial-gradient(closest-side, var(--c), transparent); }
.zorza .z1 { width: 58vw; height: 58vw; left: 41%; top: -1%; --c: rgba(94, 158, 58, .3); }
.zorza .z2 { width: 52vw; height: 52vw; left: 59%; top: 19%; --c: rgba(47, 111, 235, .26); animation-delay: -8s; animation-duration: 31s; }
.zorza .z3 { width: 48vw; height: 48vw; left: 33%; top: 31%; --c: rgba(200, 100, 59, .26); animation-delay: -15s; animation-duration: 36s; }
.zorza .z4 { width: 44vw; height: 44vw; left: -3%; top: -11%; --c: rgba(232, 163, 61, .16); animation-delay: -4s; }
@supports (color: color-mix(in srgb, red, blue)) {
  .zorza .z1 { --c: color-mix(in srgb, var(--k-nvidia) 30%, transparent); }
  .zorza .z2 { --c: color-mix(in srgb, var(--k-local) 26%, transparent); }
  .zorza .z3 { --c: color-mix(in srgb, var(--k-claude) 26%, transparent); }
  .zorza .z4 { --c: color-mix(in srgb, var(--k-zloto) 16%, transparent); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zorza { opacity: .35; } }
:root[data-theme="dark"] .zorza { opacity: .35; }
@keyframes dryf {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6vw, 4vw) scale(1.12); }
  100% { transform: translate(4vw, -3vw) scale(.94); }
}
.siatka-tla {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background-image: radial-gradient(circle at 1px 1px, rgba(128, 128, 128, .2) 1px, transparent 0);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 20%, transparent 75%);
}
@supports (color: color-mix(in srgb, red, blue)) { .siatka-tla { background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tekst) 16%, transparent) 1px, transparent 0); } }
.hero-w { position: relative; z-index: 2; display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 980px) { .hero-w { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
.hero-tekst { display: flex; flex-direction: column; gap: 26px; }
.hero-h { font-size: clamp(50px, 6vw, 88px); line-height: .94; letter-spacing: -.052em; font-weight: 600; }
.hero-h em {
  font-style: normal; display: inline;
  /* Zwykły gradient dla każdej przeglądarki, „in oklch” tylko za @supports –
     bez tła tekst z color: transparent byłby niewidoczny. W @supports samo
     background-image: skrót „background” zdjąłby background-clip: text. */
  background: linear-gradient(100deg, var(--k-nvidia) 0%, var(--k-local) 34%, var(--k-claude) 67%, var(--k-nvidia) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: plyn 2.4s var(--wolno) .5s 1 both;
}
@supports (background: linear-gradient(in oklch, red, blue)) {
  .hero-h em { background-image: linear-gradient(100deg in oklch, var(--k-nvidia) 0%, var(--k-local) 34%, var(--k-claude) 67%, var(--k-nvidia) 100%); }
}
.hero-h em.slowo { animation: wejdz .8s var(--wolno) forwards, plyn 2.4s var(--wolno) 1 both; animation-delay: calc(100ms + var(--i) * 60ms), .5s; }
/* Jedna fala koloru przy wejściu zamiast nieskończonego mienienia. */
@keyframes plyn { from { background-position: 0 0; } to { background-position: -120% 0; } }
.hero-lead { font-size: clamp(17.5px, 1.55vw, 20px); color: var(--przygaszony); max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- czat w hero -------------------------------------------------------- */
.hero-scena { perspective: 1400px; }
.czat {
  /* Pełne tło bez rozmycia: przy 88% krycia rozmycie dawało 12% obrazu, a nad
     dryfującą zorzą było najdroższym miejscem przewijania hero. */
  position: relative; border-radius: var(--r-l); background: var(--powierzchnia);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--linia); box-shadow: var(--cien-3);
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .8s var(--wolno);
}
.czat::before {
  /* ramka w kolorze silnika, który teraz odpowiada – spokojna, bez wirowania */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--k-akt, var(--k-nvidia)); opacity: .5; transition: border-color .5s;
}
.czat-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 0; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px;
  font: 500 12px/1 var(--mono); font-stretch: 87.5%; background: var(--tlo); border: 1px solid var(--linia);
  overflow: hidden; max-width: 100%; min-width: 0;
}
.pill-kropka { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k-akt, var(--k-nvidia)); transition: background .5s; }
@supports (color: color-mix(in srgb, red, blue)) { .pill-kropka { box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-akt, var(--k-nvidia)) 22%, transparent); } }
.pill-tekst { line-height: 1.35; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pill-tekst.zmiana { animation: pill-zmiana .5s var(--wolno); }
@keyframes pill-zmiana { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-110%); opacity: 0; } 55% { transform: translateY(110%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.czat-status { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--mono); color: var(--przygaszony); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* Wąska karta (1024 px, dwie kolumny hero): „jeden wątek” ustępuje miejsca
   pełnej nazwie modelu – ucięte „local-gpu” mówiło mniej niż brak statusu. */
@media (min-width: 980px) and (max-width: 1180px) { .czat-status { display: none; } }
.czat-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--k-nvidia); animation: puls 2s infinite; }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.czat-cialo { display: grid; }
.czat-duch, .czat-zywy { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; }
.czat-duch { visibility: hidden; }
.wiad-ty {
  align-self: flex-end; max-width: 86%; background: var(--tekst); color: var(--tlo); padding: 11px 15px;
  border-radius: 18px 18px 6px 18px; font-size: 15px; line-height: 1.45;
}
.odp {
  --k: var(--k-nvidia);
  position: relative; padding: 10px 14px 11px 20px; border-radius: 6px 16px 16px 16px; background: var(--tlo);
  font-size: 14.5px; line-height: 1.5;
  border: 1px solid var(--linia);
}
@supports (color: color-mix(in srgb, red, blue)) { .odp { border-color: color-mix(in srgb, var(--linia) 70%, transparent); } }
.odp::before {
  /* odcinek nici w kolorze silnika – rysuje się z góry na dół */
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--k);
  transform-origin: top; transform: scaleY(0); animation: nic .7s var(--wolno) forwards;
}
.czat-duch .odp::before { animation: none; }
.odp::after {
  /* łącznik z poprzednią odpowiedzią */
  content: ""; position: absolute; left: 8px; top: -11px; height: 11px; width: 1px; background: var(--linia-2);
}
.odp:first-of-type::after { display: none; }
@keyframes nic { to { transform: scaleY(1); } }
.odp-silnik { display: flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; color: var(--kt, var(--k)); margin-bottom: 5px; }
/* Napis silnika w kolorze czytelnym jako tekst (zielony i pomarańcz są za jasne). */
.odp[style*="--k-nvidia"] { --kt: var(--k-nvidia-tekst); }
.odp[style*="--k-local"] { --kt: var(--k-local-tekst); }
.odp[style*="--k-claude"] { --kt: var(--k-claude-tekst); }
.odp-tekst .w { opacity: 0; filter: blur(4px); animation: slowo-wpada .5s var(--wolno) forwards; }
@keyframes slowo-wpada { to { opacity: 1; filter: none; } }
.czat-zywy .odp { animation: odp-wchodzi .6s var(--wolno) both; }
@keyframes odp-wchodzi { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.czat-zywy.znika > * { transition: opacity .5s, filter .5s; opacity: 0; filter: blur(6px); }

.przelacznik { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 4px; border-radius: 14px; background: var(--tlo); border: 1px solid var(--linia); }
.przelacznik button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: none; cursor: pointer; padding: 9px 4px; border-radius: 10px;
  font: 500 12.5px/1.1 var(--sans); color: var(--przygaszony); transition: color .3s; min-width: 0;
}
.przelacznik button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Wąski przełącznik (telefon, 1024 px) mówi „Lokalny” zamiast uciętego
   „Lokalny G…” – dopisek „GPU” chowa się, gdy się nie mieści. */
.przelacznik { container-type: inline-size; }
@container (max-width: 420px) { .przel-dop { display: none; } }
.przelacznik button i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--k); }
.przelacznik button[aria-pressed="true"] { color: var(--tekst); }
.przelacznik button:hover { color: var(--tekst); }
.przel-tlo {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 10px;
  background: var(--powierzchnia); box-shadow: var(--cien-2); border: 1px solid var(--linia);
  transform: translateX(calc(var(--nr, 0) * 100%)); transition: transform .5s var(--sprezyna);
}
.scena-podpis { margin-top: 14px; font-size: 13.5px; color: var(--blady); text-align: center; }

/* --- liczby ------------------------------------------------------------- */
.liczby {
  position: relative; z-index: 2; margin-top: clamp(56px, 7vw, 96px);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--linia);
  border: 1px solid var(--linia); border-radius: var(--r-l); overflow: hidden;
}
@media (min-width: 820px) { .liczby { grid-template-columns: repeat(4, 1fr); } }
.liczby > div { background: var(--powierzchnia); padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 6px; }
.liczby dt { font-size: clamp(34px, 4vw, 52px); font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.liczby dd { font-size: 14px; color: var(--przygaszony); }

/* --- pas znaczników ----------------------------------------------------- */
/* Pas leży NAD nicią wątku (z-index 1) i ma pełne tło na CAŁEJ szerokości.
   Krawędzie wygaszają tylko tekst – nakładki w kolorze tła pasa. Dawna maska
   wygaszała razem z tekstem tło i na 1320–1511 px nić prześwitywała przez pas. */
.pas { --pas-tlo: var(--tlo); position: relative; z-index: 2; border-block: 1px solid var(--linia); overflow: hidden; padding-block: 18px; background: var(--pas-tlo); }
@supports (color: color-mix(in srgb, red, blue)) {
  .pas { --pas-tlo: color-mix(in srgb, var(--powierzchnia) 50%, var(--tlo)); }
}
.pas::before, .pas::after { content: ""; position: absolute; inset-block: 0; z-index: 1; width: 8%; pointer-events: none; }
.pas::before { left: 0; background: linear-gradient(90deg, var(--pas-tlo), transparent); }
.pas::after { right: 0; background: linear-gradient(-90deg, var(--pas-tlo), transparent); }
.pas-tor { display: flex; gap: 56px; width: max-content; animation: przesuw 48s linear infinite; font: 400 13px/1 var(--mono); font-stretch: 87.5%; color: var(--przygaszony); white-space: nowrap; }
.pas-tor b { color: var(--k); font-weight: 500; }
.pas:hover .pas-tor { animation-play-state: paused; }
@keyframes przesuw { to { transform: translateX(-50%); } }

/* ============================================================== BENTO */
.bento { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento > .karta-router { grid-column: 1 / -1; } }
/* Na całą szerokość w dwóch kolumnach ruter nie może rosnąć z proporcji
   do ~650 px wysokości – trzymamy go w wysokości ekranu laptopa. */
@media (min-width: 720px) and (max-width: 1039px) { .router { aspect-ratio: auto; height: 400px; } }
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento > .karta { grid-column: span 2; }
  .bento > .karta-router { grid-column: span 4; grid-row: span 2; }
}
.karta {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--r-l);
  padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--cien-1);
  transition: transform .6s var(--wolno), box-shadow .6s var(--wolno), border-color .4s, opacity 1s var(--wolno), filter 1s var(--wolno);
}
.karta::before {
  /* światło podążające za kursorem */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
}
.karta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .4s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .karta::before { background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--k-local) 9%, transparent), transparent 60%); }
  .karta::after { background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--k-local) 55%, transparent), transparent 70%); }
}
@media (hover: hover) {
  .karta:hover { box-shadow: var(--cien-2); transform: translateY(-3px); }
  .karta:hover::before, .karta:hover::after { opacity: 1; }
}
.karta h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.karta p { color: var(--przygaszony); font-size: 15.5px; line-height: 1.6; }
.karta .nr { position: absolute; top: clamp(22px, 2.4vw, 30px); right: clamp(22px, 2.4vw, 30px); font: 500 12px/1 var(--mono); color: var(--blady); }
.ikona {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 10px;
  background: var(--tlo); border: 1px solid var(--linia);
  color: var(--k);
}
@supports (color: color-mix(in srgb, red, blue)) { .ikona { background: color-mix(in srgb, var(--k) 12%, var(--powierzchnia)); border-color: color-mix(in srgb, var(--k) 22%, transparent); } }
.ikona svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.karta-stopka { display: flex; flex-direction: column; gap: 10px; margin-top: auto; max-width: 60ch; }

/* --- ruter silników ----------------------------------------------------- */
.karta-router { padding: 0; }
.karta-router .karta-stopka { padding: 0 clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px); }
.router { position: relative; aspect-ratio: 520 / 360; min-height: 260px; margin: 8px 8px 0; }
.router-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.router-svg path { vector-effect: non-scaling-stroke; }
.router-linie path { fill: none; stroke: var(--linia-2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.router-pakiety path { fill: none; stroke: var(--k); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 16 400; stroke-dashoffset: 416; opacity: .25; transition: opacity .5s; animation: pakiet 2.6s var(--wolno) infinite; }
.router-pakiety path[data-r="1"] { animation-delay: -.65s; }
.router-pakiety path[data-r="2"] { animation-delay: -1.3s; }
.router-pakiety path[data-r="3"] { animation-delay: -1.95s; }
.router[data-akt="0"] .router-pakiety [data-r="0"], .router[data-akt="1"] .router-pakiety [data-r="1"],
.router[data-akt="2"] .router-pakiety [data-r="2"], .router[data-akt="3"] .router-pakiety [data-r="3"] { opacity: 1; stroke-width: 3; }
@keyframes pakiet { to { stroke-dashoffset: 0; } }
/* Poza ekranem (strona.js: IntersectionObserver) pakiety stoją. */
.router.stoi .router-pakiety path { animation-play-state: paused; }
.router-srodek {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--przygaszony); white-space: nowrap;
}
.router-srodek .znak { width: 64px; height: 64px; filter: drop-shadow(0 10px 20px rgba(22, 23, 27, .16)); }
@supports (color: color-mix(in srgb, red, blue)) { .router-srodek .znak { filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--tekst) 18%, transparent)); } }
/* Węzeł jest środkowany na --x (17% / 83%), więc mieści się w ruterze, dopóki jego
   szerokość ≤ 2 × 17% szerokości rutera. Stąd max-width 34% (minus zapas na
   scale(1.04) aktywnego) i zawijanie napisu zamiast nowrap: dłuższy tekst (EN,
   powiększona czcionka) łamie się w pastylce, a nie wypycha jej za kartę. Przy
   domyślnych napisach nad 560 px ograniczenie nie działa – wygląd bez zmian.
   width: max-content, bo przy left: 83% miejsca „do prawej krawędzi” jest tylko 17%
   i bez tego zwykły napis łamałby się, choć pastylka może być szersza. */
.router-wezel {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 14px; min-width: 128px; width: max-content; max-width: calc(34% - 4px);
  background: var(--powierzchnia); border: 1px solid var(--linia); box-shadow: var(--cien-1);
  transition: border-color .4s, box-shadow .5s, transform .5s var(--sprezyna);
}
.router-wezel b { overflow-wrap: anywhere; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.router-wezel b::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.router-wezel small { font: 400 10.5px/1.2 var(--mono); font-stretch: 87.5%; color: var(--blady); overflow-wrap: anywhere; }
.router[data-akt="0"] [data-r="0"].router-wezel, .router[data-akt="1"] [data-r="1"].router-wezel,
.router[data-akt="2"] [data-r="2"].router-wezel, .router[data-akt="3"] [data-r="3"].router-wezel {
  border-color: var(--k);
  box-shadow: var(--cien-2);
  transform: translate(-50%, -50%) scale(1.04);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .router[data-akt="0"] [data-r="0"].router-wezel, .router[data-akt="1"] [data-r="1"].router-wezel,
  .router[data-akt="2"] [data-r="2"].router-wezel, .router[data-akt="3"] [data-r="3"].router-wezel {
    border-color: color-mix(in srgb, var(--k) 55%, transparent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--k) 12%, transparent), var(--cien-2);
  }
}
/* Telefon: 34% rutera to za mało na „Lokalny GPU” (środek na 83% wypychał pastylkę
   za kartę do 10 px przy 320–360 px – zrzut Marcina, okno ~343 px). Węzły przylegają
   więc do krawędzi rutera (margines 8 px mieści pierścień aktywnego) i skalują się od
   niej; min-width trzyma koniec linii (17% / 83%) pod pastylką. */
@media (max-width: 560px) {
  .router { aspect-ratio: auto; height: 300px; }
  .router-wezel { min-width: 104px; max-width: calc(50% - 4px); padding: 8px 10px; }
  .router-wezel b { gap: 6px; justify-content: center; }
  .router-wezel[data-r="0"], .router-wezel[data-r="2"] { left: 0; transform: translateY(-50%); transform-origin: left center; }
  .router-wezel[data-r="1"], .router-wezel[data-r="3"] { left: auto; right: 0; transform: translateY(-50%); transform-origin: right center; }
  .router[data-akt="0"] [data-r="0"].router-wezel, .router[data-akt="1"] [data-r="1"].router-wezel,
  .router[data-akt="2"] [data-r="2"].router-wezel, .router[data-akt="3"] [data-r="3"].router-wezel { transform: translateY(-50%) scale(1.04); }
  .router-wezel small { display: none; }
  .router-srodek .znak { width: 48px; height: 48px; }
}

/* ============================================================= PLENER */
.plener-w { display: grid; gap: 40px; }
@media (min-width: 980px) {
  .plener-w { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
  .plener-tekst { position: sticky; top: 120px; }
}
.plener-tor { height: 190vh; position: relative; }
/* Pod sceną jest już koniec toru – pełny dolny odstęp sekcji dokładał do górnego
   odstępu Pamięci ~400 px pustego tła. */
.plener { padding-bottom: clamp(40px, 5vw, 72px); }
/* Telefon poziomo: scena (niebo nad kartą) jest wyższa niż ekran i łuku nie było
   widać wcale, gdy Słońce po nim jechało. Niebo staje obok karty i mieści się
   w wysokości ekranu; dłuższy tor daje dniu tyle przewijania co w pionie. */
@media (orientation: landscape) and (max-height: 520px) {
  .plener-tor { height: 300vh; }
  .plener-scena { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); top: 64px; }
  .plener-scena .niebo { height: 100%; width: calc(100% * 1.15 / 2.15); }
  .luk-slonca { align-self: end; max-height: calc(100svh - 80px); }
  .odczyt { padding: 14px 16px; gap: 10px; justify-content: center; }
  .odczyt-czas { font-size: 26px; }
  .nastawy b { padding: 8px 4px; font-size: 14px; }
}
.plener-scena {
  position: sticky; top: max(88px, calc(50vh - 300px));
  border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--linia); box-shadow: var(--cien-3);
  background: var(--powierzchnia); isolation: isolate;
}
.niebo { position: absolute; inset: 0 0 auto; height: 62%; z-index: -1; }
.niebo i { position: absolute; inset: 0; }
.n-noc { background: linear-gradient(180deg, #1D2544 0%, #3B4470 60%, #6E6A8E 100%); }
.n-zloto { background: linear-gradient(180deg, #5A6FA8 0%, #E9A56B 62%, #F7D39A 100%); opacity: 0; }
.n-dzien { background: linear-gradient(180deg, #8DB6E8 0%, #C9DEF4 60%, #EEF3F7 100%); opacity: 0; }
.luk-slonca { display: block; width: 100%; height: auto; aspect-ratio: 400 / 230; }
.luk-cien { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.2; stroke-dasharray: 2 5; }
.luk-droga { fill: none; stroke: #FFE3B0; stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 196, 120, .8)); }
.gory path { fill: #2B3148; }
.gory .gory2 { fill: #1C2135; }
@supports (color: color-mix(in srgb, red, blue)) {
  .gory path { fill: color-mix(in oklab, #2B3148, #6B7A99 calc(var(--dzien, 0) * 100%)); }
  .gory .gory2 { fill: color-mix(in oklab, #1C2135, #4A5874 calc(var(--dzien, 0) * 100%)); }
}
.slonce-aura { fill: rgba(255, 200, 120, .35); filter: blur(4px); }
.slonce-tarcza { fill: #FFE0A8; stroke: #fff; stroke-width: 1.5; }
.odczyt { padding: 22px clamp(18px, 2.4vw, 28px) 24px; display: flex; flex-direction: column; gap: 18px; background: var(--powierzchnia); }
.odczyt-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.odczyt-czas { font-size: clamp(30px, 3.4vw, 40px); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.odznaka-swiatla {
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px;
  color: var(--k-local); background: rgba(47, 111, 235, .12); transition: color .4s, background .4s;
}
.odznaka-swiatla.zloto { color: var(--zloto-tekst); background: rgba(232, 163, 61, .18); }
.odznaka-swiatla.dzien { color: var(--k-nvidia-tekst); background: rgba(94, 158, 58, .14); }
@supports (color: color-mix(in srgb, red, blue)) {
  .odznaka-swiatla { background: color-mix(in srgb, var(--k-local) 12%, transparent); }
  .odznaka-swiatla.zloto { background: color-mix(in srgb, var(--k-zloto) 18%, transparent); }
  .odznaka-swiatla.dzien { background: color-mix(in srgb, var(--k-nvidia) 14%, transparent); }
}
.odczyt-dane { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
@media (min-width: 560px) { .odczyt-dane { grid-template-columns: repeat(4, 1fr); } }
.odczyt-dane dt { font-size: 12.5px; color: var(--przygaszony); }
.odczyt-dane dd { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.nastawy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nastawy b {
  font-weight: 500; font-size: clamp(15px, 1.6vw, 19px); text-align: center; padding: 14px 6px; border-radius: 14px;
  background: var(--tlo); border: 1px solid var(--linia); font-variant-numeric: tabular-nums;
}
.nastawy b.mig { animation: mig .5s var(--wolno); }
@keyframes mig { 0% { background: rgba(200, 100, 59, .16); border-color: rgba(200, 100, 59, .4); } }
@supports (color: color-mix(in srgb, red, blue)) {
  @keyframes mig { 0% { background: color-mix(in srgb, var(--k-claude) 16%, var(--tlo)); border-color: color-mix(in srgb, var(--k-claude) 40%, transparent); } }
}
.sprzet { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 8px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.chip-ok { color: var(--k-nvidia-tekst); background: rgba(94, 158, 58, .12); }
.chip-nie { color: var(--k-claude-tekst); background: rgba(200, 100, 59, .1); text-decoration: line-through; text-decoration-thickness: 1px; }
@supports (color: color-mix(in srgb, red, blue)) {
  .chip-ok { background: color-mix(in srgb, var(--k-nvidia) 12%, transparent); }
  .chip-nie { background: color-mix(in srgb, var(--k-claude) 10%, transparent); }
}

/* ============================================================= PAMIĘĆ */
/* Dwie kolumny (720–1039 px): przywołanie na całą szerokość, pod nim dwie karty
   w wierszu i ostatnia pełna. Wysoka karta-wspomnienia w jednym wierszu z małą
   kartą zostawiała obok ~450 px pustej, rozciągniętej karty. */
@media (min-width: 720px) and (max-width: 1039px) {
  .bento-pamiec > .karta-wspomnienia, .bento-pamiec > .karta:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .bento-pamiec > .karta-wspomnienia { grid-column: span 3; grid-row: span 3; }
  .bento-pamiec > .karta:not(.karta-wspomnienia) { grid-column: span 3; }
}
.przywolanie { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
/* Karta jest wysoka jak trzy sąsiednie – przywołanie wypełnia środek,
   zamiast zostawiać pustkę nad podpisem. */
.karta-wspomnienia { justify-content: center; gap: 28px; }
.karta-wspomnienia .przywolanie { gap: 22px; margin-bottom: 0; }
.karta-wspomnienia .karta-stopka { margin-top: 0; }
@media (min-width: 1040px) {
  .karta-wspomnienia .zapytanie { font-size: 15px; padding: 18px 20px; }
  .karta-wspomnienia .wsp { font-size: 15px; padding: 11px 15px; }
}
.zapytanie { padding: 14px 16px; border-radius: 14px; background: var(--tlo); border: 1px solid var(--linia); font-size: 13.5px; font-stretch: 87.5%; }
.kursor-tekst::after { content: ""; display: inline-block; width: 7px; height: 1.1em; margin-left: 3px; vertical-align: -3px; background: var(--k-local); animation: puls 1s steps(1) infinite; }
.wspomnienia { display: flex; flex-wrap: wrap; gap: 8px; }
.wsp {
  --s: .5;
  padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.35; border: 1px solid var(--linia);
  background: var(--powierzchnia); color: var(--przygaszony); position: relative;
  transition: all .9s var(--wolno); transition-delay: calc(var(--s) * 600ms);
}
.wsp::after {
  content: attr(data-wynik); position: absolute; right: 8px; top: -8px; font: 500 9.5px/1 var(--mono); padding: 3px 5px; border-radius: 6px;
  background: var(--k-local); color: #fff; opacity: 0; transform: translateY(4px); transition: all .5s var(--wolno); transition-delay: inherit;
}
.karta-wspomnienia.widoczne .wsp { opacity: calc(.35 + var(--s) * .65); }
.karta-wspomnienia.widoczne .wsp.traf {
  color: var(--tekst); border-color: rgba(47, 111, 235, .45);
  box-shadow: 0 0 0 4px rgba(47, 111, 235, .08);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .karta-wspomnienia.widoczne .wsp.traf {
    border-color: color-mix(in srgb, var(--k-local) 45%, transparent);
    background: color-mix(in srgb, var(--k-local) 7%, var(--powierzchnia));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-local) 8%, transparent);
  }
}
.karta-wspomnienia.widoczne .wsp.traf::after { opacity: 1; transform: none; }

/* =============================================================== GŁOS */
.glos-w { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .glos-w { grid-template-columns: 1fr 1fr; gap: 80px; } }
@media (max-width: 979px) { .glos-scena { order: 2; } }
.glos-scena {
  position: relative; border-radius: var(--r-xl); padding: clamp(32px, 5vw, 56px) 24px 28px;
  background: radial-gradient(120% 90% at 50% 0%, #22243A 0%, #121320 60%, #0C0D14 100%);
  color: #ECEBE6; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 28px;
  box-shadow: var(--cien-3); border: 1px solid rgba(255,255,255,.06);
}
.glos-scena::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 36%, rgba(200, 100, 59, .22), transparent 45%); }
.kula { position: relative; width: clamp(150px, 22vw, 210px); aspect-ratio: 1; display: grid; place-items: center; }
.kula i { position: absolute; border-radius: 50%; }
.kula-rdzen {
  inset: 18%;
  background: radial-gradient(circle at 34% 30%, #FFE7D6 0%, #F2A57E 22%, #C8643B 52%, #5B2A6E 100%);
  box-shadow: 0 0 60px rgba(222, 122, 81, .55), inset -10px -14px 30px rgba(40, 10, 50, .55), inset 8px 10px 24px rgba(255,255,255,.35);
  animation: oddech 3.6s ease-in-out infinite;
}
.kula-aura { inset: 0; background: conic-gradient(from 0deg, var(--k-nvidia), var(--k-local), var(--k-claude), #F2A57E, var(--k-nvidia)); filter: blur(22px); opacity: .55; animation: obrot 9s linear infinite; }
.kula-fala { inset: 14%; border: 1.5px solid rgba(242, 165, 126, .55); animation: fala 3s var(--wolno) infinite; opacity: 0; }
.kula-fala.f2 { animation-delay: 1s; } .kula-fala.f3 { animation-delay: 2s; }
@keyframes oddech { 50% { transform: scale(1.05); } }
@keyframes obrot { to { transform: rotate(360deg); } }
@keyframes fala { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.fala-dzwieku { display: flex; align-items: center; gap: 5px; height: 42px; position: relative; }
.fala-dzwieku b { width: 4px; height: 100%; border-radius: 4px; background: linear-gradient(#F2A57E, #C8643B); transform: scaleY(.15); animation: slupek 1.2s ease-in-out infinite; }
.fala-dzwieku b:nth-child(2n) { animation-duration: .9s; } .fala-dzwieku b:nth-child(3n) { animation-duration: 1.4s; }
.fala-dzwieku b:nth-child(1) { animation-delay: -.2s; } .fala-dzwieku b:nth-child(2) { animation-delay: -.5s; } .fala-dzwieku b:nth-child(3) { animation-delay: -.1s; }
.fala-dzwieku b:nth-child(4) { animation-delay: -.7s; } .fala-dzwieku b:nth-child(5) { animation-delay: -.3s; } .fala-dzwieku b:nth-child(6) { animation-delay: -.9s; }
.fala-dzwieku b:nth-child(7) { animation-delay: -.4s; } .fala-dzwieku b:nth-child(8) { animation-delay: -.6s; } .fala-dzwieku b:nth-child(9) { animation-delay: -.15s; }
.fala-dzwieku b:nth-child(10) { animation-delay: -.8s; } .fala-dzwieku b:nth-child(11) { animation-delay: -.35s; } .fala-dzwieku b:nth-child(12) { animation-delay: -.55s; }
@keyframes slupek { 50% { transform: scaleY(1); } }
.transkrypt { position: relative; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; }
.transkrypt p { padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 1.45; opacity: 0; transform: translateY(10px); transition: all .8s var(--wolno); }
.t-ty { align-self: flex-end; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-bottom-right-radius: 6px; transition-delay: .5s !important; }
.t-on { align-self: flex-start; background: rgba(222, 122, 81, .16); border: 1px solid rgba(222, 122, 81, .3); border-bottom-left-radius: 6px; transition-delay: 1.6s !important; }
.glos-scena.widoczne .transkrypt p { opacity: 1; transform: none; }
.zapas { list-style: none; display: grid; gap: 10px; }
.zapas li { display: grid; grid-template-columns: auto 40px 1fr; align-items: center; gap: 12px; font-size: 15px; color: var(--przygaszony); }
.zapas .mono { font-size: 12.5px; color: var(--tekst); background: var(--powierzchnia); border: 1px solid var(--linia); padding: 6px 10px; border-radius: 8px; min-width: 88px; text-align: center; }
.zapas i { height: 1px; background: linear-gradient(90deg, var(--linia-2), var(--k-claude)); position: relative; }
.zapas i::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left: 5px solid var(--k-claude); border-right: 0; }

/* ========================================================== CIĄGŁOŚĆ */
.ciag-w { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .ciag-w { grid-template-columns: 1fr 1fr; gap: 80px; } }
.ciag-scena { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: center; }
.telefon {
  width: clamp(170px, 24vw, 230px); aspect-ratio: 9 / 18.5; border-radius: 34px; padding: 9px;
  background: linear-gradient(145deg, #2A2B31, #0E0F12); box-shadow: var(--cien-3), inset 0 0 0 1px rgba(255,255,255,.08);
  position: relative;
}
.telefon::before { content: ""; position: absolute; top: 16px; left: 50%; width: 30%; height: 16px; border-radius: 10px; background: #000; transform: translateX(-50%); z-index: 3; }
.tel-ekran { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: var(--tlo); }
.tel-czat { padding: 44px 12px 12px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.tel-pyt { align-self: flex-end; background: var(--tekst); color: var(--tlo); font-size: 11px; line-height: 1.35; padding: 8px 10px; border-radius: 12px 12px 4px 12px; max-width: 88%; }
.tel-odp { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 10px 14px; border-radius: 4px 12px 12px 12px; background: var(--powierzchnia); border: 1px solid var(--linia); position: relative; }
.tel-odp::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--k-nvidia); }
.tel-odp i { height: 6px; border-radius: 3px; background: var(--linia-2); width: var(--w); transform-origin: left; transform: scaleX(0); }
.tel-wznowiono { margin-top: auto; align-self: center; font-size: 8.5px; padding: 5px 8px; border-radius: 999px; color: var(--k-nvidia-tekst); background: rgba(94, 158, 58, .12); opacity: 0; }
@supports (color: color-mix(in srgb, red, blue)) { .tel-wznowiono { background: color-mix(in srgb, var(--k-nvidia) 12%, transparent); } }
.tel-blokada { position: absolute; inset: 0; background: #050507; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #ECEBE6; opacity: 0; pointer-events: none; }
.tel-zegar { font-size: 30px; font-weight: 300; letter-spacing: -.02em; }
.tel-blokada svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .6; }
.serwer { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--r-m); padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--cien-2); min-width: 0; }
.serwer-glowa { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--przygaszony); }
.serwer-glowa i { width: 7px; height: 7px; border-radius: 50%; background: var(--k-nvidia); animation: puls 1.4s infinite; }
.serwer-pasek { height: 6px; border-radius: 3px; background: var(--tlo-2); overflow: hidden; }
.serwer-pasek i { display: block; height: 100%; background: linear-gradient(90deg, var(--k-nvidia), var(--k-local)); transform-origin: left; transform: scaleX(0); }
.serwer-log { list-style: none; display: grid; gap: 7px; font-size: 10.5px; line-height: 1.4; color: var(--przygaszony); }
.serwer-log li { opacity: .25; padding-left: 14px; position: relative; }
.serwer-log li::before { content: ""; position: absolute; left: 0; top: .45em; width: 6px; height: 6px; border-radius: 50%; background: var(--linia-2); }

/* scenariusz: 12 s w pętli – pisze, ekran gaśnie, serwer pisze dalej, ekran wraca */
.ciag-scena.gra .tel-odp i { animation: linia-odp 12s infinite; }
.ciag-scena.gra .tel-odp i:nth-child(1) { --t0: 4%; } .ciag-scena.gra .tel-odp i:nth-child(2) { --t0: 8%; }
.ciag-scena.gra .tel-odp i:nth-child(3) { --t0: 12%; }
.ciag-scena.gra .tel-odp i:nth-child(n+4) { animation-name: linia-odp-pozno; }
.ciag-scena.gra .tel-blokada { animation: blokada 12s infinite; }
.ciag-scena.gra .tel-wznowiono { animation: wznowiono 12s infinite; }
.ciag-scena.gra .serwer-pasek i { animation: pasek 12s linear infinite; }
.ciag-scena.gra .serwer-log li:nth-child(1) { animation: log1 12s infinite; }
.ciag-scena.gra .serwer-log li:nth-child(2) { animation: log2 12s infinite; }
.ciag-scena.gra .serwer-log li:nth-child(3) { animation: log3 12s infinite; }
.ciag-scena.gra .serwer-log li:nth-child(4) { animation: log4 12s infinite; }
@keyframes linia-odp { 0%, 3% { transform: scaleX(0); } 14%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes linia-odp-pozno { 0%, 60% { transform: scaleX(0); } 64%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes blokada { 0%, 20% { opacity: 0; } 24%, 58% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes wznowiono { 0%, 62% { opacity: 0; transform: translateY(4px); } 66%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes pasek { 0% { transform: scaleX(0); } 58% { transform: scaleX(1); } 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes log1 { 0%, 2% { opacity: .25; } 4%, 94% { opacity: 1; } 100% { opacity: .25; } }
@keyframes log2 { 0%, 22% { opacity: .25; } 25%, 94% { opacity: 1; } 100% { opacity: .25; } }
@keyframes log3 { 0%, 56% { opacity: .25; } 58%, 94% { opacity: 1; } 100% { opacity: .25; } }
@keyframes log4 { 0%, 61% { opacity: .25; } 63%, 94% { opacity: 1; } 100% { opacity: .25; } }
.serwer-log li:nth-child(2)::before { background: var(--k-claude); }
.serwer-log li:nth-child(3)::before, .serwer-log li:nth-child(4)::before, .serwer-log li:nth-child(1)::before { background: var(--k-nvidia); }

/* ======================================================== PRYWATNOŚĆ */
.pryw-w { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .pryw-w { grid-template-columns: 1fr 1fr; gap: 80px; } }
/* Trzy „pokoje” w wachlarzu – po wycięciu panelu administratora trzy małe
   karty stały w pustej kolumnie (agencja, runda 6). */
.pokoje { position: relative; width: 100%; max-width: 440px; height: 330px; margin-inline: auto; }
.pokoj {
  background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--r-m); padding: 16px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: var(--cien-2, var(--cien-1)); overflow: hidden;
  position: absolute; width: 60%; height: 230px; left: calc(var(--d) * 20%); top: calc(var(--d) * 34px);
  transform: rotate(calc((var(--d) - 1) * 4deg));
}
.pokoj::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--k); }
.pokoj-glowa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pokoj-glowa b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: var(--tlo-2); color: var(--k); }
@supports (color: color-mix(in srgb, red, blue)) { .pokoj-glowa b { background: color-mix(in srgb, var(--k) 14%, transparent); } }
.pokoj-glowa svg { width: 16px; height: 16px; fill: none; stroke: var(--blady); stroke-width: 1.8; }
.pokoj > i { height: 6px; border-radius: 3px; background: var(--linia); width: var(--w, 100%); filter: blur(1.5px); }
.pokoje.widoczne .pokoj { animation: pokoj-wchodzi .9s var(--wolno) both; animation-delay: calc(var(--d) * 120ms); }
@keyframes pokoj-wchodzi { from { transform: translateY(16px) scale(.97); opacity: 0; } }

/* ========================================================= POD MASKĄ */
.przekroj-tor { position: relative; }
.przekroj { display: grid; gap: 40px; align-items: center; }
/* Od 980 px sekcja stoi przyklejona, a tor daje drogę na rozsunięcie płyt
   i cztery podświetlenia – płyta i jej opis są na ekranie razem. */
@media (min-width: 980px) {
  .przekroj-tor { height: 230vh; }
  .przekroj { grid-template-columns: 1.2fr 1fr; gap: 64px; position: sticky; top: max(72px, calc(50vh - 290px)); }
}
.stos {
  --p: 0; position: relative; height: clamp(360px, 46vw, 540px); perspective: 1600px; display: grid; place-items: center;
}
.warstwa {
  position: absolute; left: 50%; top: 58%; width: clamp(200px, 26vw, 310px); aspect-ratio: 1; margin: 0;
  border-radius: 22px; border: 1.5px solid var(--k);
  background: var(--powierzchnia);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%) translateY(calc(var(--i) * (-1 * (28px + var(--p) * 58px)))) rotateX(58deg) rotateZ(-45deg);
  transition: opacity .4s, filter .4s;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .warstwa {
    border-color: color-mix(in srgb, var(--k) 85%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--k) 20%, var(--powierzchnia)), color-mix(in srgb, var(--k) 6%, var(--powierzchnia)));
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--k) 60%, transparent);
  }
}
/* Przygaszona warstwa ma dalej być warstwą: przy .35 i odbarwieniu w ciemnym
   motywie znikała prawie cała, a z przekroju zostawała jedna płyta w pustce
   (Marcin: „kiepsko działa”). */
.warstwa.przygas { opacity: .6; }
.stos:has(.warstwa.przygas) .warstwa:not(.przygas) {
  border-color: var(--k);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .stos:has(.warstwa.przygas) .warstwa:not(.przygas) {
    box-shadow: 0 30px 70px -24px color-mix(in srgb, var(--k) 85%, transparent), 0 0 0 1px color-mix(in srgb, var(--k) 40%, transparent);
  }
}
.w-siatka {
  position: absolute; inset: 10px; border-radius: 14px; opacity: .5;
  background-image: linear-gradient(var(--linia-2) 1px, transparent 1px), linear-gradient(90deg, var(--linia-2) 1px, transparent 1px);
  background-size: 22px 22px;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .w-siatka { background-image: linear-gradient(color-mix(in srgb, var(--k) 30%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--k) 30%, transparent) 1px, transparent 1px); }
}
.w-chip { position: absolute; left: var(--x); top: var(--y); width: 22%; height: 16%; border-radius: 8px; background: var(--powierzchnia); border: 1px solid var(--k); box-shadow: 4px 6px 0 var(--linia-2); }
@supports (color: color-mix(in srgb, red, blue)) { .w-chip { border-color: color-mix(in srgb, var(--k) 50%, transparent); box-shadow: 4px 6px 0 color-mix(in srgb, var(--k) 35%, transparent); } }
.w-tel { width: 18%; height: 30%; border-radius: 10px; }
.stos-nic {
  /* nić przechodząca przez wszystkie warstwy */
  position: absolute; left: 50%; bottom: 42%; width: 3px; border-radius: 3px; transform: translateX(-50%);
  height: calc(3 * (28px + var(--p) * 58px) + 20px);
  background: linear-gradient(to top, var(--k-nvidia), var(--k-local) 34%, var(--k-claude) 66%, var(--k-openai));
  opacity: calc(.3 + var(--p) * .7); z-index: 5;
}
/* Węższy ekran: stos przyklejony pod nawigacją, opis przewija się pod nim. */
@media (max-width: 979px) {
  .przekroj { align-items: start; gap: 12px; }
  .stos { position: sticky; top: 64px; z-index: 2; height: clamp(250px, 42vh, 340px); background: var(--tlo);
    box-shadow: 0 18px 24px -18px var(--tlo); }
  .warstwa { top: 70%; width: clamp(150px, 42vw, 220px);
    transform: translate(-50%, -50%) translateY(calc(var(--i) * (-1 * (18px + var(--p) * 34px)))) rotateX(58deg) rotateZ(-45deg); }
  .stos-nic { height: calc(3 * (18px + var(--p) * 34px) + 14px); bottom: 32%; }
  .legenda li { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) { .przekroj-tor { height: auto; } .przekroj { position: static; } }
.legenda { list-style: none; display: grid; gap: 8px; }
.legenda li {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 18px; border-radius: var(--r-m);
  border: 1px solid transparent; cursor: default; transition: background .3s, border-color .3s;
}
.legenda li:hover, .legenda li.aktywna { background: var(--powierzchnia); border-color: var(--linia); box-shadow: var(--cien-1); }
.legenda .mono { font-size: 12px; color: var(--k); padding-top: 4px; }
.legenda li[data-w="0"] .mono { color: var(--k-nvidia-tekst); }
.legenda li[data-w="2"] .mono { color: var(--k-claude-tekst); }
.legenda li[data-w="1"] .mono { color: var(--k-local-tekst); }
.legenda b { font-size: 18px; letter-spacing: -.01em; display: block; margin-bottom: 2px; }
.legenda p { font-size: 14.5px; color: var(--przygaszony); }
.fakty { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: clamp(48px, 6vw, 80px); }
@media (min-width: 640px) { .fakty { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .fakty { grid-template-columns: repeat(4, 1fr); } }
.fakt { border-top: 1px solid var(--linia-2); padding-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.fakt-liczba { font-size: 40px; font-weight: 500; letter-spacing: -.04em; line-height: 1; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--tekst) 30%, var(--k-local)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fakt h3 { font-size: 17px; letter-spacing: -.01em; }
.fakt p { font-size: 14.5px; color: var(--przygaszony); }

/* =============================================================== CTA */
.cta { padding-top: 0; }
.cta-karta {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl);
  padding: clamp(56px, 9vw, 120px) clamp(22px, 5vw, 64px); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  --cta-tekst: var(--tlo); --cta-przyg: #9D9C9A;
  background: var(--tekst); color: var(--cta-tekst); box-shadow: var(--cien-3);
}
.cta-karta .btn-ciemny { --tlo-btn: var(--tlo); --kolor-btn: var(--tekst); }
.cta-karta .btn-jasny { --tlo-btn: transparent; --kolor-btn: var(--tlo); border-color: rgba(128, 128, 128, .45); box-shadow: none; }
@supports (color: color-mix(in srgb, red, blue)) { .cta-karta .btn-jasny { border-color: color-mix(in srgb, var(--tlo) 22%, transparent); } }
.cta-karta h2 { font-size: clamp(34px, 5.4vw, 68px); letter-spacing: -.045em; line-height: 1; max-width: 16ch; }
.cta-karta p { font-size: clamp(16.5px, 1.5vw, 19px); opacity: .7; max-width: 52ch; }
/* Osoba bez konta: następny krok zamiast ślepego „Zaloguj się”. */
/* Przygaszone jest samo zdanie (kolor, nie opacity), link ma pełny kolor karty:
   opacity .6 zbijała link poniżej 4,5:1 w ciemnym motywie i gasiła obrys fokusu.
   --cta-przyg: 6,5:1 na ciemnej karcie, 5,5:1 na jasnej. */
.cta-karta p.cta-zaproszenie { font-size: 14.5px; opacity: 1; color: var(--cta-przyg); }
.cta-zaproszenie a { color: var(--cta-tekst); text-decoration: underline; text-underline-offset: 3px; }
.cta-zaproszenie a:hover { text-decoration-thickness: 2px; }
/* Niebieski obrys (--k-local) na karcie CTA miał ~1,1:1 – obrys w kolorze tekstu karty. */
.cta-karta :focus-visible { outline-color: var(--cta-tekst); }
.cta-karta .hero-cta { justify-content: center; margin-top: 8px; }
.cta-znak { width: 72px; height: 72px; }
.cta-znak { --planeta: var(--tlo); --planeta-obrys: var(--tekst); }
.cta-zorza { position: absolute; inset: 0; z-index: -1; opacity: .38; }
.cta-zorza i { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; animation: dryf 22s ease-in-out infinite alternate; -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent); }
.cta-zorza i:nth-child(1) { left: -10%; top: -30%; background: var(--k-nvidia); }
.cta-zorza i:nth-child(2) { right: -10%; top: -20%; background: var(--k-local); animation-delay: -6s; }
.cta-zorza i:nth-child(3) { left: 20%; bottom: -50%; background: var(--k-claude); animation-delay: -12s; }
.cta-zorza i:nth-child(4) { right: 15%; bottom: -60%; background: #7a5cff; opacity: .6; animation-delay: -3s; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta-karta { --cta-tekst: #16171B; --cta-przyg: #5E5F62; background: #ECEBE6; } }
:root[data-theme="dark"] .cta-karta { --cta-tekst: #16171B; --cta-przyg: #5E5F62; background: #ECEBE6; }

/* ============================================================ STOPKA */
.stopka { border-top: 1px solid var(--linia); padding-block: 40px 48px; }
.stopka-w { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.stopka-marka { display: flex; flex-direction: column; gap: 10px; }
.stopka-marka p { font-size: 14px; color: var(--przygaszony); }
.stopka-linki { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14.5px; }
.stopka-linki a { text-decoration: none; color: var(--przygaszony); transition: color .2s; }
.stopka-linki a:hover { color: var(--tekst); }
.stopka-adres { font-size: 12px; color: var(--blady); }

/* --- podpowiedź „Read in English” ---------------------------------------- */
.podpowiedz-jezyka {
  position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: 999px; background: var(--powierzchnia); border: 1px solid var(--linia); box-shadow: var(--cien-2);
  animation: wejdz .5s var(--wolno) 1.2s both; opacity: 0; transform: translateY(8px);
}
.podpowiedz-jezyka[hidden] { display: none; }
.podpowiedz-jezyka button { border: 0; background: none; cursor: pointer; border-radius: 999px; padding: 8px 12px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.podpowiedz-jezyka .pj-tak svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.podpowiedz-jezyka .pj-nie { color: var(--przygaszony); padding-inline: 10px; font-size: 18px; line-height: 1; }
.podpowiedz-jezyka button:hover { background: var(--tlo-2); }
/* W prawym dolnym rogu węższych ekranów stoi przełącznik silników rozmowy
   pokazowej: przy dwóch kolumnach hero (980–1180 px) podpowiedź idzie na środek
   dołu, między kolumny; przy jednej kolumnie (tablet) przełącznik zajmuje cały
   dół pierwszego ekranu, więc podpowiedź staje pod nawigacją, obok etykiety hero.
   Na telefonie karta ma całą szerokość i róg zasłania najmniej – zostaje w rogu. */
@media (min-width: 980px) and (max-width: 1180px) {
  .podpowiedz-jezyka { right: auto; left: 50%; translate: -50% 0; }
}
@media (min-width: 561px) and (max-width: 979px) {
  .podpowiedz-jezyka { bottom: auto; top: 80px; right: var(--margines); }
}


/* --- przejście między językami (View Transitions) ----------------------- */
::view-transition-old(root) { animation: vt-wyjdz .28s var(--wolno) both; }
::view-transition-new(root) { animation: vt-wejdz .42s var(--wolno) both; }
@keyframes vt-wyjdz { to { opacity: 0; filter: blur(6px); } }
@keyframes vt-wejdz { from { opacity: 0; filter: blur(6px); } }

/* --- telefon ------------------------------------------------------------ */
@media (max-width: 480px) {
  .marka { gap: 8px; font-size: 13.5px; letter-spacing: .14em; }
  .marka .znak { width: 24px; height: 24px; }
  .nav-w { gap: 12px; }
  .nav-prawa { gap: 8px; }
  .btn-maly { padding: 8px 13px; font-size: 13.5px; }
  .jezyk button { padding: 6px 8px; }
  .czat-status { display: none; }
  .czat { padding: 12px; }
}
@media (max-width: 560px) {
  .telefon { width: 200px; }
  .btn-duzy { padding: 15px 22px; font-size: 16px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .nav-prawa .btn-maly .strzalka { display: none; }
  .pokoje { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pokoj { padding: 10px; }
  .ciag-scena { grid-template-columns: 1fr; justify-items: center; }
  .serwer { width: 100%; }
  .plener-tor { height: 260vh; }   /* 170vh: cały dzień w jednym ruchu kciuka, złota godzina ~40 px */
  .zapas li { grid-template-columns: auto 24px 1fr; gap: 8px; }
  .zapas .mono { min-width: 0; }
}

/* Najwęższe telefony (320 px: iPhone SE 1. gen., Android z powiększonym
   rozmiarem wyświetlania): sam znak zamiast napisu COSMOS, inaczej przycisk
   wejścia wystawał poza ekran i strona przewijała się w bok. */
@media (max-width: 359px) {
  .marka span { display: none; }
  .nav-w { gap: 8px; }
  .nav-prawa { gap: 6px; }
  .btn-maly { padding-inline: 12px; }
}

/* --- ograniczony ruch: wszystko widać od razu, nic się nie rusza -------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  [data-pokaz], .wejscie, .slowo { opacity: 1 !important; transform: none !important; filter: none !important; }
  .luk, .cta-znak .luk { animation: none; }
  /* Pas stoi i zawija się w wiersze: bez nakładek wygaszających krawędzie
     i bez ucinania długich znaczników na telefonie. */
  .pas::before, .pas::after { display: none; }
  .pas-tor > span { white-space: normal; text-align: center; line-height: 1.5; }
  .pas-tor { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 12px; padding-inline: 16px; }
  .pas-tor span:nth-child(n+7) { display: none; }
  .plener-tor { height: auto; }
  .plener-scena { position: relative; top: 0; }
  .tel-odp i { transform: scaleX(1); }
  .serwer-log li { opacity: 1; }
  .serwer-pasek i { transform: scaleX(1); }
  .transkrypt p { opacity: 1; transform: none; }
  .zorza i, .cta-zorza i { animation: none; }
  .podpowiedz-jezyka { opacity: 1; transform: none; }
}